/* ===== Базовые переменные и сброс ===== */
:root {
  --accent: #1f4e79;
  --accent-dark: #163a5a;
  --accent-soft: #eaf1f8;
  --text: #1c1c1c;
  --muted: #6b7280;
  --border: #e2e6ea;
  --bg: #f7f8fa;
  --danger: #c0392b;
  --success: #1a8a3d;
  --radius: 10px;
  /* v46: зелёная/кремовая палитра для шапки-редизайна (референс от владельца) — используется
     только в шапке (фича-полоса, кнопка «Каталог товаров», бейдж на баннере), остальной сайт
     продолжает жить на --accent (синий), чтобы не переделывать все кнопки/ссылки сайта разом. */
  /* v53: цвета подогнаны точно под референс владельца (test.php: catalog-btn #3a6b3a,
     hover/акцент #2d5a27) — раньше были близкие, но не идентичные оттенки. */
  --brand-green: #3a6b3a;
  --brand-green-dark: #2d5a27;
  --cream-bg: #faf6ec;
  --header-tint: #f0f7ef;
  --gold: #b8934a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
ul { margin: 0; padding: 0; }

/* ===== Кнопки ===== */
.btn {
  display: inline-block; background: var(--accent); color: #fff; border: none;
  padding: 11px 20px; border-radius: var(--radius); font-size: 15px; cursor: pointer;
  text-decoration: none; text-align: center;
}
.btn:hover { background: var(--accent-dark); text-decoration: none; }
.btn-small { padding: 7px 14px; font-size: 13px; }
.btn-outline { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.btn-outline:hover { background: var(--accent); color: #fff; }
.btn-link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 14px; }
.btn-link-danger { color: var(--danger); }

/* ===== Верхняя инфополоса (адрес/часы работы/быстрые ссылки) — светлая тонкая полоса над тёмной шапкой ===== */
.site-topbar { background: #f4f5f7; color: var(--text); font-size: 12.5px; border-bottom: 1px solid var(--border); }
.site-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 16px; flex-wrap: wrap; }
.site-topbar-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-topbar-item { white-space: nowrap; opacity: .85; }
.site-topbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-topbar-right a { color: var(--text); opacity: .8; white-space: nowrap; }
.site-topbar-right a:hover { opacity: 1; color: var(--accent); text-decoration: underline; }
.site-topbar-lang-form select {
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12px;
  font-family: inherit; background: #fff; color: var(--text); cursor: pointer;
}
.site-topbar-lang-form select option { color: var(--text); }
@media (max-width: 800px) {
  .site-topbar-inner { padding: 6px 16px; }
  .site-topbar-right a:not(:last-child) { display: none; }
}

/* ===== v46 — шапка по референсу владельца: кремовая фича-полоса (лого по центру) сверху +
   единая белая строка меню (кнопка «Каталог товаров» + пункты + поиск/избранное/сравнение/
   аккаунт/корзина справа). Старая тёмно-синяя полоса убрана целиком — см. includes/header.php. ===== */
.site-header { border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }

/* v53: по референсу владельца (test.php) верхняя полоса и строка лого — БЕЛЫЕ, не кремовые
   (кремовым был только общий фон страницы в самом первом референсе v46, но в новом коде верх
   шапки везде белый) — меняем фон на #fff, чтобы точно совпадало. */
.site-feature-bar { background: #fff; width: 100%; border-bottom: 1px solid var(--border); }
.site-feature-bar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px;
}
.site-feature-bar-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.feature-badge { font-size: 13px; font-weight: 600; color: var(--brand-green-dark); white-space: nowrap; }
.logo { font-size: 20px; font-weight: 700; color: var(--text); display: flex; align-items: center; }
.logo-center { flex: none; }
.logo-img { height: 48px; width: auto; max-width: 100%; display: block; }
/* v52: отдельная строка с логотипом по центру (десктоп) — лого крупнее, т.к. занимает собственный
   ряд. .logo-img-lg переопределяет высоту только там, обычный .logo-img (в фича-полосе на мобильном)
   остаётся прежнего размера. */
.logo-img-lg { height: 60px; }
/* Лого-дубликат для мобильной версии: на десктопе скрыт (лого показывается в .logo-row ниже),
   на мобильном — наоборот, показывается прямо в фича-полосе (см. media-запрос ниже), в точности
   как было устроено до v52. */
.logo-mobile-only { display: none; }
.site-feature-bar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
/* v46.1: телефон + кнопка «Заказать звонок» теперь в одной колонке (звонок под номером) —
   по просьбе владельца, только на десктопе (см. .callback-desktop-only ниже). */
.feature-bar-phone-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.feature-bar-phone { font-size: 15px; font-weight: 700; color: var(--brand-green-dark); white-space: nowrap; }
.feature-bar-phone:hover { color: var(--brand-green); text-decoration: none; }
/* v56: по просьбе владельца кнопка «Заказать звонок» на мобильном теперь тоже показывается прямо
   тут, рядом с телефоном (там, где раньше был переключатель языка), а не в строке меню — поэтому
   мобильный флип классов больше не нужен: callback-desktop-only видна везде, callback-mobile-only
   (вторая копия в строке меню) скрыта везде, имя классов оставлено как есть, чтобы не менять JS. */
.callback-desktop-only { display: inline-block; }
.callback-mobile-only { display: none; }
/* v53: по референсу владельца (test.php) — переключатель языка теперь выглядит как простой текст
   со стрелкой вниз, без рамки/белого фона выпадающего списка; сам <select> и его функциональность
   (submit формы при смене языка) не менялись, изменено только визуальное оформление. */
.site-topbar-lang-form select {
  border: none; background-color: transparent; padding: 4px 20px 4px 2px; font-size: 14px;
  font-weight: 600; font-family: inherit; color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0L5 6L10 0Z' fill='%231c1c1c'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}
/* v56: копия переключателя языка рядом с кнопкой «Каталог товаров» — видна только на мобильном
   (см. media-запрос ниже), на десктопе полностью скрыта, там используется обычная .lang-topbar. */
.lang-navrow { display: none; }
/* v54: по новому скриншоту владельца — на мобильном значки «Доставка по всему миру»/«100% натурально»
   теперь ПОКАЗЫВАЮТСЯ (раньше прятались), а строка логотипа (.logo-row, реальный логотип сайта)
   тоже видна на мобильном как отдельная центрированная секция — старый трюк с лого-дубликатом
   в фича-полосе (.logo-mobile-only) больше не нужен и скрыт, чтобы логотип не показывался дважды.
   Фича-полоса переносится на 2 строки: значки сверху, телефон+язык под ними — как на скриншоте. */
@media (max-width: 800px) {
  .site-feature-bar-inner { flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 10px 16px; }
  /* v59: по скриншоту владельца («левую выровнять по левой стороне, правую по правой») — раньше
     обе плашки («Доставка по всему миру» и «100% натурально») просто лепились друг к другу у
     левого края строки, из-за чего левая колонка (значок доставки + телефон под ней) выглядела
     нормально, а правая (значок «натурально» + кнопка «Заказать звонок» под ней, у неё уже было
     justify-content:space-between) не совпадала по краю с тем, что над ней. Добавлено
     justify-content:space-between и сюда — теперь значок доставки у левого края, а «100% натурально»
     у правого, ровно над кнопкой «Заказать звонок» под ним. Только мобильная версия. */
  .site-feature-bar-left { flex: 1 1 100%; gap: 20px; justify-content: space-between; }
  .site-feature-bar-right { flex: 1 1 100%; justify-content: space-between; }
  .logo-mobile-only { display: none; }
  /* v56: по просьбе владельца — телефон и кнопка «Заказать звонок» теперь сидят РЯДОМ в одну
     строку (не одна под другой, как на десктопе), а переключатель языка отсюда убран — он занял
     новое место рядом с кнопкой «Каталог товаров» (см. .lang-navrow ниже). */
  .feature-bar-phone-col { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
  .lang-topbar { display: none; }
}

/* v52: отдельная строка с логотипом по центру. v54: теперь показывается и на мобильном (по
   скриншоту владельца) — реальный логотип сайта виден на всех размерах экрана одинаково. */
.logo-row { background: #fff; width: 100%; border-bottom: 1px solid var(--border); }
.logo-row-inner { display: flex; align-items: center; justify-content: center; padding: 10px 16px; }

.burger { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text); }

.header-icon-actions { display: flex; align-items: center; gap: 16px; }
.header-iconlink-badge {
  position: absolute; top: -7px; right: -10px; background: var(--brand-green); color: #fff;
  border-radius: 50%; font-size: 10px; min-width: 15px; height: 15px; line-height: 15px; text-align: center; padding: 0 2px;
}
.header-callback-link {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-size: 12.5px;
  color: var(--muted); text-decoration: underline; white-space: nowrap; font-family: inherit;
}
.header-callback-link:hover { color: var(--brand-green-dark); }
/* v53: бейдж корзины — по присланному коду (.cart-badge) теперь красный кружок, наплывающий на
   угол иконки (как у .header-iconlink-badge для избранного/сравнения), а не зелёный овал рядом с ней. */
.cart-count {
  position: absolute; top: -8px; right: -10px; background: var(--danger); color: #fff;
  border-radius: 50%; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  line-height: 16px; text-align: center; padding: 0 2px;
}

/* ===== Мини-корзина (выпадающая) ===== */
.mini-cart-wrap { position: relative; }
.mini-cart-dropdown {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; width: 320px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 16px; z-index: 60;
}
.mini-cart-wrap:hover .mini-cart-dropdown { display: block; }
.mini-cart-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.mini-cart-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.mini-cart-list li:last-child { border-bottom: none; }
.mini-cart-list img, .mini-cart-list .img-placeholder { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.mini-cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-cart-item-info a { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-cart-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 4px; }
.mini-cart-remove:hover { color: var(--danger); }
.mini-cart-footer { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px; }
.mini-cart-total { font-size: 15px; margin-bottom: 10px; }
.mini-cart-actions { display: flex; gap: 8px; }
.mini-cart-actions .btn, .mini-cart-actions .btn-outline { flex: 1; text-align: center; }
.currency-switch-form { display: inline-flex; }
.currency-switch-form select {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 13px;
  font-family: inherit; background: #fff; color: var(--text); cursor: pointer;
}
/* ===== Строка категорий под шапкой — стилизовано под настоящее меню (подсветка при наведении, аккуратный шрифт) =====
   Обновлено: крупнее и наряднее шрифт, аккуратный акцентный низ-бордер при наведении/раскрытии (этап «новое меню»). */
.main-nav { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* v38: с 9 пунктами верхнего уровня (Каталог + 5 категорий + О компании/Бизнес/Галерея) прежние
   паддинги/gap на ширине контейнера 1180px переносили последние 2 пункта на вторую строку.
   Контейнер меню расширен до 1400px (как в шапке), паддинги и gap сжаты, шрифт чуть компактнее —
   на типичных десктопных экранах меню теперь помещается в одну строку. flex-wrap оставлен как
   аварийный откат на очень узких окнах (на мобильном меню всё равно уходит в бургер, см. media). */
.main-nav .container { max-width: 1400px; }
/* v46: по референсу владельца строка меню теперь несёт ещё и поиск/иконки/корзину (перенесены
   сюда из убранной тёмной полосы) — кнопка «Каталог» и пункты меню прижаты к левому краю, а
   .nav-icon-actions margin-left:auto отталкивает поиск/иконки/корзину к правому краю. Это
   заменяет centering из v42.1 — с иконками в этой же строке центрировать всё целиком уже не
   имело смысла (получалось бы неровно из-за разной ширины левого/правого блоков). */
/* v48.2: по просьбе владельца — промежутки между пунктами меню увеличены (4px → 22px), чтобы
   строка меню выглядела просторнее (было слишком плотно). */
.nav-inner { display: flex; align-items: center; gap: 22px; padding: 8px 10px; overflow-x: visible; flex-wrap: wrap; }
/* v53: по присланному владельцем коду (test.php, .nav-links a) — убрана закруглённая заливка фона
   при наведении (она и создавала эффект «шаров»/пилюль), вместо неё — плоский текст, который просто
   меняет цвет на зелёный и подчёркивается снизу растущей линией (::after, ширина 0 → 100%), в точности
   как в присланном коде. Сами ссылки/адреса и подменю не менялись. */
.nav-inner > a {
  white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--text);
  padding: 11px 2px; position: relative; transition: color .2s;
}
.nav-inner > a::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 8px; height: 2px;
  background: var(--brand-green); width: 0; transition: width .3s;
}
.nav-inner > a:hover {
  color: var(--brand-green-dark); text-decoration: none;
}
.nav-inner > a:hover::after { width: calc(100% - 4px); }
.nav-item { position: relative; display: flex; align-items: center; }
/* v57: стрелка «▾» вынесена из ссылки в отдельную кнопку — на десктопе чисто декоративная (подменю
   по-прежнему открывается наведением мыши на .nav-item), на мобильном именно она разворачивает
   подменю аккордеоном (см. main.js и мобильный @media ниже). */
.nav-item-toggle {
  background: none; border: none; cursor: pointer; color: var(--text); font-size: 13px;
  padding: 11px 4px; line-height: 1; flex-shrink: 0;
}
.nav-item:hover > .nav-item-toggle, .nav-item:focus-within > .nav-item-toggle { color: var(--brand-green-dark); }
.nav-item > a {
  white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--text);
  display: block; padding: 11px 2px; position: relative; transition: color .2s;
}
.nav-item > a::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 8px; height: 2px;
  background: var(--brand-green); width: 0; transition: width .3s;
}
.nav-item > a:hover { color: var(--brand-green-dark); text-decoration: none; }
.nav-item:hover > a, .nav-item:focus-within > a { color: var(--brand-green-dark); }
.nav-item:hover > a::after, .nav-item:focus-within > a::after { width: calc(100% - 4px); }
/* Пункты меню «Бизнес» и «Галерея» — сам заголовок раздела больше не открывает страницу
   напрямую (не ссылка на page.php), работает только выпадающее подменю под ним. Курсор
   обычный (не «рука»), чтобы визуально не выглядело как кликабельная ссылка. */
.nav-item-noclick { cursor: default; }
/* v54: обёртка обычных пунктов меню — на десктопе display:contents убирает её из раскладки
   (её дети ведут себя так, будто лежат прямо в .nav-inner, тот же gap/порядок, что и раньше). */
.nav-links-group { display: contents; }
/* v49.1: раньше был margin-top:6px между пунктом меню и выпадашкой — при движении мыши по
   диагонали курсор попадал в этот «мёртвый» зазор (не принадлежит ни пункту меню, ни самой
   выпадашке), hover обрывался, и меню резко закрывалось, не давая выбрать пункт. Зазор убран
   (margin-top:0, dropdown вплотную к пункту меню) — теперь между наведением и списком нет разрыва. */
/* v53: стиль выпадающего списка подогнан под присланный код (.catalog-menu) — тень мягче и шире,
   углы 8px вместо 12px, между пунктами тонкий разделитель, при наведении лёгкий зелёный тон фона
   и отступ текста вправо (вместо прежней закруглённой плашки-заливки). */
.nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 220px;
  background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 10px 0;
  flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.12); margin-top: 0;
}
.nav-dropdown a {
  font-size: 14px; font-weight: 500; padding: 12px 20px; color: var(--text);
  border-bottom: 1px solid #f5f5f5; transition: background .2s, color .2s, padding-left .2s;
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: var(--header-tint); color: var(--brand-green-dark); text-decoration: none; padding-left: 25px; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: flex; }

/* ===== v46 — кнопка «Каталог товаров» (зелёная, с гамбургером) + список категорий в выпадашке =====
   v53: паддинги/радиус/регистр букв подогнаны под присланный код (.catalog-btn) — заглавные буквы,
   более крупные внутренние отступы, чуть менее скруглённые углы. */
.catalog-item { margin-right: 0; }
/* v67: у .nav-item > a (селектор из общих правил меню) специфичность выше, чем у .catalog-btn,
   поэтому display/padding/font-weight отсюда перебивались общими значениями (block/11px 2px/500)
   — кнопка «Каталог товаров» реально рендерилась почти без внутренних отступов, сплюснутой,
   из-за чего рядом с ней стрелка-переключатель выглядела как отдельный сломанный обрезок.
   !important на этих трёх свойствах возвращает кнопке предназначенный вид (inline-flex,
   12px 28px, жирность 600), как и было задумано в v53. */
.catalog-btn {
  display: inline-flex !important; align-items: center; gap: 10px; background: var(--brand-green); color: #fff !important;
  font-size: 14px; font-weight: 600 !important; padding: 12px 28px !important; border-radius: 6px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: none !important; transition: background .15s;
}
/* v52: по новому референсу владельца кнопка «Каталог товаров» снова темнеет при наведении
   (отменяет правило v49.1, которое убирало это затемнение). */
.catalog-btn:hover { background: var(--brand-green-dark); text-decoration: none; color: #fff; }
.catalog-dropdown { min-width: 260px; max-height: 70vh; overflow-y: auto; }
.catalog-dropdown-parent { font-weight: 700; color: var(--brand-green-dark); margin-top: 6px; }
.catalog-dropdown-parent:first-child { margin-top: 0; }
.catalog-dropdown-child { padding-left: 30px !important; font-weight: 500 !important; }
/* Пункт «Программы здоровья» — первым в выпадающем списке каталога, выделен сильнее любого
   обычного пункта (заливка вместо плоского текста, крупнее, с тенью), чтобы сразу бросался в
   глаза на фоне остальных категорий. */
.catalog-dropdown-health {
  display: inline-flex !important; width: fit-content; max-width: calc(100% - 20px);
  align-items: center; gap: 6px;
  margin: 4px 10px 10px !important; padding: 12px 16px !important;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark)) !important;
  color: #fff !important; font-weight: 700 !important; font-size: 15px !important;
  border-radius: 8px; border-bottom: none !important;
  box-shadow: 0 4px 14px rgba(58,107,58,.35);
}
.catalog-dropdown-health:hover {
  background: linear-gradient(135deg, var(--brand-green-dark), var(--brand-green-dark)) !important;
  color: #fff !important; padding-left: 16px !important; text-decoration: none;
  box-shadow: 0 6px 18px rgba(58,107,58,.45);
}

/* ===== v46 — поиск/избранное/сравнение/аккаунт/корзина, перенесённые в строку меню =====
   v48.2: поиск расширен (160px → 260px) и промежуток между иконками чуть увеличен по просьбе владельца.
   v49.1: поиск расширен по максимуму (260px → 420px, flex-grow чтобы забирать всё свободное место
   в своём блоке) — но .nav-icon-actions gap (18px) и .nav-inner gap (22px, зазор до пунктов меню
   слева) не тронуты, так что промежутки вокруг самого поиска и остальных иконок не «съезжаются».
   v50.1: по просьбе владельца — поиск расширен ещё в 2 раза (420px → 840px). Иконки справа
   (избранное/сравнение/аккаунт/корзина) идут следом за полем поиска в этом же flex-ряду, а весь
   блок .nav-icon-actions прижат к правому краю строки меню (margin-left:auto) — значит их правый
   край никуда не съезжает, а расширение поля добавляется именно слева от иконок, в сторону пунктов
   меню, как и просили. */
.nav-icon-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
/* v61: по просьбе владельца поле поиска больше НЕ иконка-переключатель, разворачивающаяся по
   клику (так было с v52) — теперь это обычный, всегда развёрнутый элемент строки меню, встроенный
   в обычный поток (не position:absolute поверх других элементов), поэтому и участвует в общем
   gap строки меню наравне с пунктами Главная/О нас/Бизнес/Галерея/Блог. Заодно чуть расширено —
   раньше в развёрнутом виде было 360px, теперь 400px. Функция поиска (submit на /search.php?q=...)
   не менялась. */
.nav-search-wrap { display: flex; align-items: center; }
.nav-search-form {
  display: flex; align-items: center; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; width: 400px; max-width: 30vw;
}
.nav-search-form input {
  flex: 1; min-width: 0; padding: 9px 10px; border: none; background: transparent;
  font-size: 13.5px; color: var(--text);
}
.nav-search-form input:focus { outline: none; }
.nav-search-submit {
  border: none; background: none; padding: 0 10px; cursor: pointer; color: var(--text); flex-shrink: 0;
}
.nav-search-submit:hover { color: var(--brand-green-dark); }
.nav-iconlink { position: relative; color: var(--text); font-size: 17px; display: inline-flex; align-items: center; }
.nav-iconlink:hover { color: var(--brand-green-dark); text-decoration: none; }
.cart-link { position: relative; white-space: nowrap; font-weight: 600; }
.mobile-search-row { display: none; }
@media (max-width: 1450px) {
  .nav-search-wrap { display: none; }
  /* v70: строка поиска (.mobile-search-row) теперь видна на любом экране ≤1450px — том же
     брейкпоинте, где скрывается десктопный поиск справа в шапке (.nav-search-wrap). Раньше
     мобильную строку показывали только до 800px, из-за чего на планшетах (800–1450px) поиска
     не было видно вообще нигде — ни десктопного, ни мобильного варианта. Ширина всегда 100% от
     контейнера (адаптируется под экран), а не фиксированные 400px/30vw как у десктопного поиска. */
  .mobile-search-row { display: block; width: 100%; padding: 0 16px 10px; box-sizing: border-box; }
  .mobile-search-row .nav-search-form {
    display: flex; align-items: center; border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden; background: #fff; width: 100%; max-width: 100%;
  }
  .mobile-search-row .nav-search-form input {
    flex: 1 1 auto; min-width: 0; border: none; padding: 10px 12px; font-size: 14px; outline: none;
  }
  .mobile-search-row .nav-search-submit { padding: 8px 14px; }
}

/* v54: НАЙДЕН И ИСПРАВЛЕН реальный баг — раньше .main-nav целиком было display:none на мобильном,
   а кнопка-бургер (#burgerBtn), которая должна была этот же .main-nav раскрывать, лежала ВНУТРИ
   него — то есть сама кнопка открытия меню была невидима и физически недоступна для нажатия, и всё
   мобильное меню (включая «Каталог товаров», О нас/Бизнес/Галерея/Блог) было недостижимо через
   шапку. Теперь: .main-nav и кнопка «Каталог товаров» видны на мобильном ВСЕГДА в одну строку с
   бургером и языком; кнопка-бургер по-прежнему видна и по клику раскрывает только .nav-links-group
   (Главная/О нас/Бизнес/Галерея/Блог) отдельным блоком под этой строкой.
   v56: по просьбе владельца иконки поиска/сравнения/корзины и мобильная копия кнопки звонка под
   этой строкой убраны (.nav-icon-actions скрыт целиком на мобильном) — звонок теперь виден рядом
   с телефоном в верхней полосе, язык — рядом с кнопкой «Каталог» в этой строке. */
@media (max-width: 800px) {
  /* v54: .logo-img-lg (строка лого, теперь видна и на мобильном) держит свою высоту 60px —
     это правило теперь трогает только .logo-img без модификатора (если где-то встретится). */
  .logo-img:not(.logo-img-lg) { height: 32px; }
  .main-nav { display: block; }
  .nav-inner {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch;
    gap: 10px; padding: 10px 16px;
  }
  /* v55: по скриншоту владельца — прежняя раскладка выглядела «сдвинутой»: бургер висел одиноко
     слева, кнопка «Каталог» не дотягивала до правого края. Теперь бургер и «Каталог» вместе
     занимают всю ширину строки (бургер — фиксированный квадрат, кнопка растягивается на остаток).
     v56: по новой просьбе владельца справа от кнопки «Каталог» в эту же строку добавлен флаг/язык
     (.lang-navrow, фикс.ширина) — кнопка «Каталог» делит оставшееся место между бургером и языком.
     Иконки «Сравнить»/«Корзина» и старая мобильная копия кнопки звонка под этой строкой убраны по
     просьбе владельца (.nav-icon-actions целиком скрыт) — звонок и язык теперь в других местах. */
  .burger {
    display: flex; align-items: center; justify-content: center; order: 1; flex: 0 0 auto;
    width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 6px; padding: 0;
  }
  /* v67: настоящая причина «испорченного» открытия каталога на мобильном — .catalog-item это
     flex-контейнер (nowrap по умолчанию) для трёх детей: кнопки «Каталог товаров», стрелки и
     самого списка категорий. Когда список открыт (.catalog-dropdown-open, width:100%), он
     становится третьим элементом в той же строке и втискивается рядом с кнопкой и стрелкой
     вместо того, чтобы уйти на новую строку под ними — кнопка и стрелка сплющиваются, список
     съезжает вбок. flex-wrap:wrap здесь и flex-basis:100% на самом списке (ниже) заставляют
     список, когда он открыт, переноситься на отдельную полноширинную строку, как и задумывалось. */
  .catalog-item { order: 2; flex: 1 1 auto; min-width: 0; margin-right: 0; gap: 6px; flex-wrap: wrap; }
  .catalog-btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
  /* v68: на некоторых языках (EN, RU) текст кнопки "PRODUCT CATALOG"/"КАТАЛОГ ТОВАРОВ" в верхнем
     регистре с letter-spacing не помещался в одну строку вместе с бургером и языком — строка
     переносилась, и переключатель языка съезжал под кнопку отдельной строкой (было видно на
     скриншоте владельца). Причина: white-space:nowrap держит кнопку на ширине полного текста,
     фикс. паддинг 12px 28px и letter-spacing только добавляют ширины. Теперь на мобильном паддинг
     и межбуквенный интервал меньше, а если текст всё равно не влезает — обрезается многоточием
     вместо переноса всей строки, так строка "бургер + каталог + язык" остаётся одной строкой на
     любом языке. */
  .catalog-btn {
    padding: 12px 14px !important; letter-spacing: 0; font-size: 13px; min-width: 0;
  }
  .catalog-btn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .lang-navrow { display: flex; order: 3; flex: 0 0 auto; align-items: center; }
  .lang-navrow select { padding-right: 18px; font-size: 13px; }
  .nav-icon-actions { display: none; }
  /* Пункты меню (Главная/О нас/Бизнес/Галерея/Блог) — скрыты по умолчанию, разворачиваются в
     отдельный полноширинный блок под строкой «бургер + каталог + иконки» по клику на бургер. */
  .nav-links-group {
    display: none; order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 2px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px;
  }
  .main-nav.open .nav-links-group { display: flex; }
  /* v57: по просьбе владельца подменю О нас/Бизнес/Галерея внутри этой раскрывающейся группы
     больше НЕ показаны всегда развёрнутыми — по умолчанию скрыты, разворачиваются аккордеоном
     по клику на стрелку (.nav-item-toggle, см. main.js): выбор одного пункта разворачивает его и
     сворачивает предыдущий открытый. Выпадающий список категорий «Каталога» (он всегда виден в
     верхней строке, не внутри .nav-links-group) не затронут — эти правила его не касаются. */
  .nav-links-group .nav-dropdown {
    display: none; position: static; border: none; box-shadow: none; padding: 0 0 4px 28px;
  }
  .nav-links-group .nav-dropdown.nav-dropdown-open { display: flex !important; }
  .nav-item-toggle { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; padding: 11px 8px; }
  /* v60: НАСТОЯЩАЯ ПРИЧИНА жалобы «открыв каталог товаров в мобильной версии меню не
     пролистываются» — раньше здесь стояло правило .catalog-dropdown{max-height:none}, которое
     на мобильном полностью снимало десктопное ограничение высоты (max-height:70vh) и внутренний
     скролл (overflow-y:auto) списка категорий; список либо обрезался невидимым «хвостом» без
     возможности прокрутки, либо (если хватало места) вообще не мог прокручиваться сам по себе.
     Плюс список открывался только наведением/фокусом (:hover/:focus-within), а не кликом — на
     сенсорном экране при попытке пролистать список палец уходит с кнопки, фокус/hover теряется
     и список тут же закрывается. Теперь: список на мобильном открывается только кликом по
     кнопке-стрелке (.catalog-toggle, main.js) через класс .catalog-dropdown-open, встроен в
     обычный поток страницы (position:static — не всплывающая абсолютная плашка, которую что-то
     может обрезать), ограничен по высоте (60vh) со своим внутренним скроллом — теперь список
     из всех 40 категорий спокойно пролистывается пальцем. */
  .catalog-dropdown { display: none !important; }
  .catalog-dropdown.catalog-dropdown-open {
    display: flex !important; position: static; max-height: 60vh; overflow-y: auto;
    border: none; box-shadow: none; margin-top: 8px; width: 100%; min-width: 0;
    flex-basis: 100%; /* v67: вместе с flex-wrap:wrap на .catalog-item — переносит открытый
    список категорий на отдельную строку, а не втискивает в ряд с кнопкой и стрелкой */
  }
  /* Нижняя мобильная навигация дублирует «Избранное» и «Профиль» — прячем их из шапки, чтобы не было
     двух одинаковых пунктов. «Сравнение» и корзину в шапке оставляем — для них своих пунктов в mobile-tabbar нет. */
  .mobile-tabbar-dupe { display: none; }
  .currency-switch-form select, .site-topbar-lang-form select { font-size: 12px; padding: 5px 6px; }
}

/* ===== Нижняя мобильная навигация (этап G редизайна под референс foodok) ===== */
.mobile-tabbar { display: none; }
@media (max-width: 800px) {
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-tabbar-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px 6px; font-size: 11px; color: var(--muted);
  }
  .mobile-tabbar-item:hover, .mobile-tabbar-item:active { color: var(--accent); }
  .mobile-tabbar-icon { position: relative; font-size: 19px; line-height: 1; }
  .mobile-tabbar-badge {
    position: absolute; top: -6px; right: -10px; background: var(--accent); color: #fff;
    border-radius: 50%; font-size: 10px; min-width: 15px; height: 15px; line-height: 15px; text-align: center; padding: 0 2px;
  }
  body { padding-bottom: 58px; }
  /* v56: НАЙДЕН И ИСПРАВЛЕН реальный баг — виджет чата перекрывал корзину в нижней мобильной
     панели. Причина: без !important это правило (bottom:74px) проигрывало общему .chat-widget
     { bottom: 20px } ниже по файлу — при равной специфичности (оба простые классы-селекторы)
     побеждает то, что объявлено ПОЗЖЕ в файле, а не то, что внутри более узкого @media — поэтому
     на мобильном фактически всегда применялось bottom:20px, и бабл чата залезал на панель снизу.
     v57: по скриншоту владельца (стрелка от заголовка «Новинки» до чата) — 82px было ещё мало,
     чат перекрывал иконку сравнения на карточке товара. Поднят выше — примерно на высоту заголовка
     «Новинки» при обычной прокрутке страницы (виджет всё равно прилеплен к экрану, а не к
     конкретному блоку, поэтому это ориентир по высоте, а не жёсткая привязка к контенту). */
  .chat-widget { bottom: 160px !important; }
  .callback-modal-overlay, .quickview-overlay { padding-bottom: 66px; }
}

/* ===== Flash-сообщения ===== */
.flash { padding: 12px 16px; border-radius: 8px; margin: 16px 0; font-size: 14px; }
.flash-success { background: #e7f6ec; color: var(--success); border: 1px solid #bfe6cc; }
.flash-error { background: #fdecea; color: var(--danger); border: 1px solid #f5c2bb; }

/* ===== Баннер «техработы включены, вы видите сайт как админ» =====
   Показывается только залогиненному в /admin посетителю, пока сайт закрыт для покупателей
   (см. includes/bootstrap.php / current_admin_bypassing_maintenance()). Сделан ярким и
   прилипающим к верху, чтобы админ не забыл, что для остальных сайт сейчас недоступен. */
.admin-maintenance-banner {
  position: sticky; top: 0; z-index: 500; background: #b8860b; color: #fff; font-size: 13.5px;
  font-weight: 600; text-align: center; padding: 10px 16px; line-height: 1.4;
}
.admin-maintenance-banner a { color: #fff; text-decoration: underline; margin-left: 8px; white-space: nowrap; }
.admin-maintenance-banner a:hover { opacity: .85; }

/* ===== Главная ===== */
.hero { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; padding: 48px 24px; border-radius: var(--radius); text-align: center; margin: 24px 0; }
.hero h1 { margin: 0 0 8px; font-size: 28px; }
.hero .btn { margin-top: 16px; background: #fff; color: var(--accent); }
.hero .btn:hover { background: #eee; }

/* ===== Управляемый баннер (слайдер главной страницы) =====
   Раньше блок имел жёсткую высоту (360px) и background-size:cover — если загруженная картинка
   не совпадала по пропорциям, верх и низ баннера обрезались. Теперь если у первого слайда есть
   картинка, index.php считает её реальные пропорции (getimagesize) и задаёт их через inline
   aspect-ratio (класс .hero-slider-fit, height:auto) — высота блока подстраивается под картинку
   и обрезки не происходит. background-size переведён с cover на contain по той же причине —
   картинка теперь всегда видна целиком (в редком случае несовпадения пропорций между слайдами
   могут появиться небольшие поля сверху/снизу, залитые фирменным градиентом — это лучше, чем обрезанный баннер). */
/* width:100% явно — без этого правила блок с inline aspect-ratio (см. index.php) и max-height
   (ниже) в некоторых браузерах уменьшает СВОЮ ШИРИНУ вместо того, чтобы просто растянуться на весь
   контейнер: получалось, что баннер уже блока «Новинки» под ним, хотя оба сидят в одном .container.
   С явной шириной 100% баннер всегда ровно той же ширины, что и остальные блоки главной страницы. */
.hero-slider { position: relative; width: 100%; margin: 24px 0; border-radius: var(--radius); overflow: hidden; height: 360px; }
/* v37: слайдер не должен занимать весь экран целиком — иначе при загрузке страницы посетитель
   не видит, что ниже есть ещё контент. Ограничиваем высоту так, чтобы баннер помещался в первый
   экран вместе с шапкой, а следующий блок (плашки «Скидки/Новинки/Блог») чуть выглядывал снизу.
   background-size:contain (см. выше) гарантирует, что при этом фото не обрезается — просто при
   несовпадении пропорций появляются небольшие поля сверху/снизу вместо среза картинки. */
.hero-slider.hero-slider-fit { height: auto; max-height: min(560px, calc(100vh - 210px)); min-height: 240px; }
.hero-slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)); background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0; transition: opacity .5s ease; color: #fff;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide-overlay { max-width: 640px; padding: 24px; background: rgba(0,0,0,.32); border-radius: var(--radius); }
.hero-slide-overlay h1 { margin: 0 0 8px; font-size: 28px; }
.hero-slide-overlay .btn { margin-top: 16px; background: #fff; color: var(--accent); }
.hero-slide-overlay .btn:hover { background: #eee; }
/* Этап 11 — необязательный блочный контент слайда (конструктор). Слайдер зафиксирован по
   высоте, поэтому длинный дополнительный контент скроллится, а не ломает вёрстку карусели. */
.hero-slide-blocks { margin-top: 16px; max-height: 140px; overflow-y: auto; text-align: left; }
/* v81: слайд без наложенного текста (весь дизайн уже на картинке) — вся картинка кликабельна,
   но сама по себе визуально не меняется, только лёгкая обратная связь при наведении/фокусе,
   чтобы было понятно, что это ссылка, а не просто фон. */
.hero-slide-clickable { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.hero-slide-clickable:hover, .hero-slide-clickable:focus-visible { filter: brightness(1.04); }
.hero-slide-clickable:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
/* v82: точечная кликабельная зона поверх уже нарисованной на картинке кнопки — сама зона
   невидима (не дублирует дизайн картинки лишним фоном/рамкой), но даёт курсор-указатель и
   лёгкую подсветку при наведении/фокусе, чтобы было понятно, что именно здесь можно кликнуть. */
.hero-slide-hotspot {
  position: absolute; z-index: 2; border-radius: 999px;
  cursor: pointer; background: rgba(255,255,255,0);
  transition: background-color .2s ease;
}
.hero-slide-hotspot:hover, .hero-slide-hotspot:focus-visible { background: rgba(255,255,255,.12); }
.hero-slide-hotspot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-slider-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; }
.hero-dot.active { background: #fff; }

/* ===== v46 — декоративный цветочный кант по краям баннера + круглый бейдж (по референсу владельца) =====
   pointer-events:none — чисто декоративные слои, не должны мешать кликам по слайдам/точкам/кнопке. */
.hero-floral {
  position: absolute; bottom: -10px; width: 140px; height: 140px; z-index: 3; pointer-events: none;
  opacity: .9;
}
.hero-floral-left { left: -10px; }
.hero-floral-right { right: -10px; transform: scaleX(-1); }
/* v66: .hero-badge (круглый SVG-бейдж «Натурально/Эффективно/Безопасно») отключён по просьбе
   владельца — сама разметка убрана из index.php, стили здесь больше ничего не затрагивают,
   оставлены закомментированными на случай, если бейдж когда-нибудь понадобится вернуть. */
/*
.hero-badge {
  position: absolute; top: 18px; right: 18px; width: 118px; height: 118px; z-index: 3;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}
*/
@media (max-width: 700px) {
  .hero-floral { width: 90px; height: 90px; }
}
@media (max-width: 600px) { .hero-slider:not(.hero-slider-fit) { height: 280px; } }

/* ===== Характеристики товара ===== */
.attributes-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.attributes-table th, .attributes-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.attributes-table th { width: 40%; color: var(--muted); font-weight: 600; }

/* ===== Преимущества (главная страница) ===== */
.advantages { margin: 32px 0; }
.advantages-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.advantage-item { text-align: center; padding: 16px; }
.advantage-icon { font-size: 32px; display: block; margin-bottom: 10px; }
.advantage-item h3 { font-size: 15px; margin: 0 0 6px; }
.advantage-item p { color: var(--muted); font-size: 13px; margin: 0; }

/* ===== Промо-карточки (Скидки/Новинки/Блог) — этап E редизайна под референс foodok ===== */
.promo-cards { margin: 28px 0; }
.grid-promo-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promo-card {
  display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: var(--radius); color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)); transition: transform .15s;
}
.promo-card:hover { transform: translateY(-2px); }
.promo-card-icon { font-size: 26px; }
.promo-card-title { font-size: 18px; font-weight: 700; }
.promo-card-text { font-size: 13px; opacity: .9; }
.promo-card-new { background: linear-gradient(135deg, #2d9cdb, #1a6fa8); }
.promo-card-blog { background: linear-gradient(135deg, #6b7280, #3f4653); }
@media (max-width: 700px) {
  .grid-promo-cards { grid-template-columns: 1fr; }
}

/* ===== Отзывы на главной (сайт-wide, этап E) ===== */
.reviews-widget { }
.grid-reviews { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.review-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.review-card-title { font-weight: 600; margin: 6px 0 4px; }
.review-card-text { color: var(--text); font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.review-card-meta { color: var(--muted); font-size: 12.5px; margin: 0; }

.grid { display: grid; gap: 18px; }
.grid-products { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.products-section, .brand-strip { margin: 36px 0; }
.products-section h2, .brand-strip h2 { font-size: 20px; margin-bottom: 16px; }

/* ===== Бренды (этап D редизайна под референс foodok) ===== */
.grid-brands { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.brand-card {
  display: flex; align-items: center; justify-content: center; height: 76px; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; background: #fff; transition: border-color .15s;
}
.brand-card:hover { border-color: var(--accent); }
.brand-card img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(20%); }
.brand-card-name { font-weight: 600; color: var(--text); text-align: center; font-size: 13px; }

.brand-header { display: flex; align-items: center; gap: 16px; margin: 16px 0 20px; }
.brand-header-logo { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; background: #fff; }
.brand-header-title { font-size: 22px; margin: 0 0 4px; }

/* ===== Карточка товара (этап H редизайна под референс foodok) ===== */
.product-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s, transform .15s; background: #fff;
}
.product-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: transparent; transform: translateY(-2px); }
.product-card-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; margin-bottom: 12px; background: var(--bg); }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.product-card:hover .product-card-img img { transform: scale(1.04); }
.img-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 13px; background: var(--bg); }
.img-placeholder.large { aspect-ratio: 1/1; }
.badge-sale { position: absolute; top: 8px; left: 8px; background: var(--danger); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px; font-weight: 600; }
.badge-sale-inline { display: inline-block; background: var(--danger); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px; margin-left: 8px; vertical-align: middle; }
.product-card-title { font-size: 14px; margin: 0 0 6px; font-weight: 500; line-height: 1.3; min-height: 2.6em; }
.product-card-title a { color: var(--text); }
.product-card-title a:hover { color: var(--accent); text-decoration: none; }
.product-card-price { margin-bottom: 12px; }
.price-now { font-weight: 700; font-size: 17px; color: var(--text); }
.price-old { text-decoration: line-through; color: var(--muted); font-size: 13px; margin-left: 6px; }
.out-of-stock { color: var(--danger); font-size: 13px; }
.add-to-cart-form { margin-top: auto; }
.add-to-cart-form .btn, .product-card > a.btn { width: 100%; }
/* Кнопка «Купить в один клик» — отдельный акцентный цвет (зелёный), чтобы отличаться от обычной
   светло-синей «Добавить в корзину». На карточке — отдельная строка под формой корзины; на странице
   товара — рядом с кнопкой «Добавить в корзину» в той же форме (кнопка type="button", саму форму не отправляет). */
.btn-buy-now { background: var(--success); }
.btn-buy-now:hover { background: #146c30; }
.product-card > .quick-order-btn { width: 100%; margin-top: 8px; }
/* v62: margin-left:10px раньше был не нужен — обе кнопки на странице товара и так стояли друг под
   другом на всю ширину (это правило просто сдвигало «Купить в 1 клик» на 10px вправо без всякого
   смысла). Новая раскладка кнопок — .product-buy-buttons (flex-column, gap 10px) ниже. */

/* ===== Каталог (этап H) ===== */
.catalog-layout { display: grid; grid-template-columns: 230px 1fr; gap: 28px; margin: 24px 0 48px; }
.catalog-sidebar {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; align-self: start;
}
.catalog-sidebar h3 { font-size: 14px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.cat-filter-list li { list-style: none; padding: 6px 0; font-size: 14px; }
.cat-filter-list li.active a { color: var(--accent); font-weight: 700; }
/* Пункт «Программы здоровья» в сайдбаре каталога — та же заливка/выделение, что и в выпадающем
   списке «Каталог товаров» в шапке (.catalog-dropdown-health), чтобы стиль совпадал везде. */
.cat-filter-health { padding: 6px 0 !important; }
.cat-filter-health-link {
  display: inline-flex !important; width: fit-content; max-width: 100%;
  align-items: center; gap: 6px;
  padding: 10px 14px !important; margin: 2px 0 8px;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
  color: #fff !important; font-weight: 700 !important; font-size: 14px;
  border-radius: 8px; box-shadow: 0 4px 14px rgba(58,107,58,.35);
}
.cat-filter-health-link:hover {
  background: linear-gradient(135deg, var(--brand-green-dark), var(--brand-green-dark));
  color: #fff !important; text-decoration: none;
  box-shadow: 0 6px 18px rgba(58,107,58,.45);
}
/* Аккордеон дерева категорий: на каждом уровне видна только одна открытая ветка подкатегорий. */
.cat-filter-list .cat-node { padding: 0; }
.cat-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; }
.cat-row .cat-link { flex: 1; min-width: 0; }
.cat-toggle {
  flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); font-size: 11px; cursor: pointer;
  transition: transform .15s;
}
.cat-toggle[aria-expanded="true"] { transform: rotate(90deg); color: var(--accent); }
.cat-children { display: none; }
.cat-children.open { display: block; }

.filter-form { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.filter-form h3 { margin: 16px 0 10px; }
.filter-form h3:first-child { margin-top: 0; }
.filter-price-row { display: flex; align-items: center; gap: 8px; }
.filter-price-row input { width: 0; flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.filter-form select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; background: #fff; }
.filter-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.sort-form select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; }
.pagination { display: flex; gap: 6px; margin-top: 28px; }
.pagination a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagination a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

@media (max-width: 800px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar { position: static; }
}

/* ===== Страница товара (этап H) ===== */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 24px 0; }
.main-image { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; background: var(--bg); }
.main-image img { width: 100%; height: 100%; object-fit: cover; }
.thumb-row { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; transition: border-color .15s; }
.thumb:hover { border-color: var(--accent); }
.product-info h1 { font-size: 24px; margin: 0 0 6px; }
.sku { color: var(--muted); font-size: 13px; }
.product-card-price.large .price-now { font-size: 28px; }
.short-desc { color: var(--muted); }
.stock-ok { color: var(--success); font-weight: 600; }
.qty-input { width: 70px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }

/* v62: редизайн блока «количество + кнопки» на странице товара — по просьбе владельца («сделай
   кнопки красивее, ровнее, не такими большими, лучший вариант, какой можешь придумать»). Раньше
   количество было голым number-полем с браузерными стрелочками (в каждом браузере выглядят
   по-своему, мелкие и неаккуратные), а кнопки «Добавить в корзину»/«Купить в 1 клик» — крупные
   (padding 13px 28px) без общего скругления сайта. Теперь: аккуратный степпер с кнопками −/+
   (число посередине), а кнопки того же скругления (var(--radius)), что и везде на сайте, чуть
   компактнее, с лёгким подъёмом и тенью при наведении. */
.product-buy-box { margin-top: 16px; }
.qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qty-row-label { font-size: 14px; font-weight: 600; color: var(--text); }
.qty-stepper {
  display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; background: #fff;
}
.qty-step {
  width: 36px; height: 100%; border: none; background: none; color: var(--text); font-size: 16px;
  font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0; line-height: 1;
}
.qty-step:hover { background: var(--header-tint); color: var(--brand-green-dark); }
.qty-stepper .qty-input {
  width: 46px; height: 100%; border: none; border-left: 1px solid var(--border);
  border-right: 1px solid var(--border); border-radius: 0; text-align: center; padding: 0;
  font-size: 14.5px; font-weight: 700; color: var(--text); -moz-appearance: textfield;
}
.qty-stepper .qty-input::-webkit-inner-spin-button, .qty-stepper .qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.product-buy-buttons { display: flex; flex-direction: column; gap: 10px; }
.product-buy-buttons .btn {
  width: 100%; padding: 13px 20px; font-size: 14.5px; font-weight: 600; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.product-buy-buttons .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.btn-add-cart { background: var(--accent); color: #fff; }
.btn-add-cart:hover { background: var(--accent-dark); }
/* Иконки «В избранное»/«Сравнить» под кнопками — раньше простые подчёркнутые текстовые ссылки,
   теперь аккуратные пилюли-чипы с рамкой, как остальные мелкие элементы шапки/каталога.
   v78: раньше .btn-chip были узкими «по тексту» и вставали неровно рядом друг с другом
   (разной ширины, слева) — теперь обе кнопки растянуты на всю ширину строки поровну (50/50),
   как остальные кнопки покупки выше, а второе, дублирующее определение .product-extra-actions
   (было ниже в файле, с другим gap) — убрано, чтобы не было рассинхрона стилей. */
.product-extra-actions { display: flex; gap: 12px; margin: 18px 0 0; }
.product-extra-actions form { flex: 1 1 0; display: flex; }
.btn-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: #fff; border: 1px solid var(--border); box-sizing: border-box;
  border-radius: var(--radius); padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.btn-chip:hover { border-color: var(--brand-green); color: var(--brand-green-dark); background: var(--header-tint); transform: translateY(-1px); }
.btn-chip.wishlist-active { border-color: var(--danger); color: var(--danger); background: #fff5f5; }

.notify-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.notify-form input { flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; }
.product-description { margin: 32px 0; }
/* v62: старое правило .add-to-cart-form .btn, .variant-select-wrap .btn {padding:13px 28px;
   font-size:15px} убрано — оно (два класса в селекторе, специфичность выше, чем у .btn-small)
   на самом деле перебивало .btn-small на карточках товаров в каталоге, делая там кнопку
   «Добавить в корзину» крупнее, чем задумано; на странице товара тот же размер теперь задают
   .product-buy-buttons .btn (см. блок выше, после .qty-input). .variant-select-wrap нигде в
   разметке уже не используется. */

@media (max-width: 800px) {
  .product-detail { grid-template-columns: 1fr; }
}

/* ===== Корзина (этап H) ===== */
/* На узких экранах таблица не сжимается до нечитаемого вида, а скроллится по горизонтали —
   тот же приём, что и у .compare-table-wrap для таблицы сравнения. */
.cart-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.cart-table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; }
.cart-table th, .cart-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; }
.cart-table th { background: var(--bg); color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.cart-table tbody tr:last-child td { border-bottom: none; }
.cart-table tbody tr:hover { background: var(--bg); }
.cart-product-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.cart-product-cell img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.qty-form input { width: 60px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; }
@media (max-width: 480px) {
  .cart-table th, .cart-table td { padding: 8px; font-size: 13px; }
}
.cart-summary {
  display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 16px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--bg);
}
.cart-total { font-size: 19px; font-weight: 700; }
.cart-total-lines { text-align: right; font-size: 14px; color: var(--muted); }
.cart-discount-line { color: var(--success); }

/* ===== Промокод ===== */
.promo-form-wrap { margin-top: 16px; }
.promo-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.promo-form input[type=text] { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.promo-applied { margin: 0; text-align: right; font-size: 14px; }

/* ===== Оформление заказа (этап H) ===== */
.checkout-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; margin: 24px 0 48px; }
.checkout-form label, .admin-form label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 6px; }
.checkout-form input[type=text], .checkout-form input[type=email], .checkout-form textarea,
.admin-form input[type=text], .admin-form input[type=email], .admin-form input[type=password],
.admin-form input[type=number], .admin-form textarea, .admin-form select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 400;
}
.checkout-form h2 { font-size: 17px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.checkout-form h2:first-child { padding-top: 0; border-top: none; }
.checkout-summary { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; align-self: start; }
.checkout-items { list-style: none; padding: 0; font-size: 14px; }
.checkout-items li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.checkout-total { margin-top: 12px; font-size: 18px; font-weight: 700; }
.checkout-total-lines { font-size: 14px; color: var(--muted); margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.checkout-form > button[type=submit].btn { width: 100%; margin-top: 20px; padding: 14px; font-size: 16px; font-weight: 600; }

@media (max-width: 800px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
}

.order-success { text-align: center; padding: 40px 0; }
.done-icon { font-size: 52px; }

.static-page-content { margin-top: 16px; line-height: 1.7; }

/* ===== Подвал ===== */
.site-footer { background: var(--bg); border-top: 1px solid var(--border); margin-top: 48px; padding: 24px 0; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--muted); }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }

.footer-newsletter {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
.footer-newsletter-text { display: flex; flex-direction: column; gap: 2px; }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-form input[type=email] { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; min-width: 220px; }

/* ===== Колонки подвала (редизайн под референс foodok) ===== */
.footer-columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.footer-col h3 { font-size: 14px; margin: 0 0 12px; color: var(--text); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul a { color: var(--muted); font-size: 14px; }
.footer-col ul a:hover { color: var(--accent); }
.footer-logo { font-size: 18px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.footer-logo-img { height: 40px; width: auto; max-width: 100%; display: block; margin-bottom: 10px; }
.footer-tagline { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; max-width: 320px; }
/* Список соцсетей в подвале — карточки-строки (круглая иконка + название + описание), по образцу от пользователя. */
.footer-social-list { list-style: none; margin: 4px 0 0; padding: 0; max-width: 300px; }
.footer-social-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border);
}
.footer-social-row:last-child { border-bottom: none; }
.footer-social-icon-circle {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.footer-social-text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.footer-social-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.footer-social-name:hover { color: var(--accent); }
.footer-social-desc { font-size: 11px; color: var(--muted); line-height: 1.3; }
.footer-contacts-list { margin-bottom: 10px; }
.footer-contacts-list a { color: var(--muted); }
.footer-contacts-list a:hover { color: var(--accent); }
.footer-hours { color: var(--muted); font-size: 13px; line-height: 1.6; }
.footer-payment-icons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.footer-payment-badge {
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 11px;
  font-weight: 700; color: var(--muted); letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
}
/* v37: иконки оплаты приближены к фирменным цветам брендов (набор провайдеров не менялся) */
.footer-payment-badge.badge-visa {
  background: #1a1f71; border-color: #1a1f71; color: #fff; font-style: italic; font-weight: 800; letter-spacing: .03em;
}
.footer-payment-badge.badge-mastercard { background: #fff; border-color: var(--border); color: #1a1a1a; padding-left: 8px; }
.mc-circles { position: relative; display: inline-block; width: 22px; height: 13px; flex: 0 0 auto; }
.mc-circles::before, .mc-circles::after { content: ""; position: absolute; top: 0; width: 13px; height: 13px; border-radius: 50%; }
.mc-circles::before { left: 0; background: #eb001b; }
.mc-circles::after { left: 9px; background: #f79e1b; mix-blend-mode: multiply; }
.footer-payment-badge.badge-applepay { background: #000; border-color: #000; color: #fff; font-weight: 600; letter-spacing: 0; }
.footer-payment-badge.badge-googlepay { background: #fff; border-color: var(--border); color: #5f6368; font-weight: 600; }
.footer-payment-badge.badge-googlepay .gp-g, .footer-payment-badge.badge-googlepay .gp-g2 { color: #4285f4; }
.footer-payment-badge.badge-googlepay .gp-o1 { color: #ea4335; }
.footer-payment-badge.badge-googlepay .gp-o2 { color: #fbbc05; }
.footer-payment-badge.badge-googlepay .gp-l { color: #34a853; }
.footer-payment-badge.badge-googlepay .gp-e { color: #ea4335; }
@media (max-width: 900px) {
  .footer-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-columns { grid-template-columns: 1fr; gap: 22px; }
  /* v59: по скриншоту владельца — на мобильном самый низ подвала (копирайт + иконки оплаты)
     теперь центрируется, а не жмётся к левому краю; порядок визуально поменян местами
     (order, разметка/DOM не трогали) — иконки оплаты идут выше, а строка
     «Рослина Карпат © 2026» спущена в самый низ. Только мобильная версия, десктоп (обычная
     .footer-inner с justify-content:space-between выше) не менялся. */
  .footer-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-payment-icons { order: 1; justify-content: center; }
  .footer-copyright { order: 2; }
}

.main-content { min-height: 50vh; padding-bottom: 20px; }

/* ===== Блог ===== */
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.blog-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; }
.blog-card-img { display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; margin-bottom: 10px; background: var(--bg); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-title { font-size: 16px; margin: 6px 0; }
.blog-card-title a { color: var(--text); }
.blog-card-excerpt { color: var(--muted); font-size: 14px; margin: 0 0 10px; }

.blog-post { max-width: 760px; margin: 0 auto; }
.blog-post-image { margin: 16px 0; border-radius: var(--radius); overflow: hidden; }
.blog-post-content { line-height: 1.7; margin-top: 16px; }

/* ===== Honeypot-поле защиты от ботов (визуально скрыто, но остаётся в DOM) ===== */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== Хлебные крошки ===== */
.breadcrumbs { margin: 16px 0 4px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; font-size: 13px; color: var(--muted); }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }

/* ===== Избранное (кнопка-сердце на карточке товара) ===== */
.product-card { position: relative; }
.wishlist-mini-form { position: absolute; top: 20px; right: 20px; z-index: 5; }
.wishlist-heart {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.9);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.15); color: var(--text);
}
.wishlist-heart.wishlist-active, .wishlist-form .wishlist-active { color: var(--danger); }
.wishlist-form { margin-top: 10px; }

/* ===== Быстрый просмотр (Quick View) — v37: обновлённый дизайн кнопки и модалки ===== */
.quickview-btn {
  width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 20px;
  background: #fff; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.quickview-btn::before { content: "👁"; font-size: 13px; }
.quickview-btn:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft, #eaf1f8);
  box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px);
}
.quickview-btn:active { transform: translateY(0); }

.quickview-overlay {
  display: flex; position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); z-index: 200;
  align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease;
}
.quickview-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
body.quickview-locked { overflow: hidden; }
.quickview-modal {
  background: #fff; border-radius: 18px; max-width: 780px; width: 100%; max-height: 88vh;
  overflow-y: auto; position: relative; padding: 36px;
  box-shadow: 0 24px 64px rgba(15,23,42,.28);
  transform: scale(.94) translateY(14px); transition: transform .28s cubic-bezier(.34,1.2,.64,1);
}
.quickview-overlay.open .quickview-modal { transform: scale(1) translateY(0); }
.quickview-modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}
.quickview-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 1;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.quickview-close:hover { border-color: var(--accent); color: #fff; background: var(--accent); transform: rotate(90deg); }
.quickview-content { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.quickview-image { aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; background: var(--bg); }
.quickview-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.quickview-image:hover img { transform: scale(1.05); }
.quickview-info h2 { font-size: 21px; margin: 0 0 8px; line-height: 1.25; }
.quickview-info h2 a { color: var(--text); }
.quickview-info h2 a:hover { color: var(--accent); }
.quickview-info .product-card-price.large { margin: 12px 0; font-size: 22px; }

@media (max-width: 700px) {
  .quickview-content { grid-template-columns: 1fr; }
  .quickview-modal { padding: 26px 20px; border-radius: 14px; }
}

/* ===== Модалка «Заказать звонок» (переиспользует конвенции quickview-модалки) ===== */
.callback-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200;
  align-items: center; justify-content: center; padding: 20px;
}
.callback-modal-overlay.open { display: flex; }
.callback-modal {
  background: #fff; border-radius: var(--radius); max-width: 380px; width: 100%;
  position: relative; padding: 32px;
}
.callback-modal h3 { margin: 0 0 4px; font-size: 19px; }
.callback-modal label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 6px; }
.callback-modal input[type=text], .callback-modal input[type=tel] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 400;
}
.callback-modal .btn { margin-top: 18px; width: 100%; }
.callback-alt-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.callback-phone-list { display: flex; flex-direction: column; gap: 6px; }
.callback-phone-choice {
  display: block; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-weight: 600; font-size: 14px; transition: border-color .15s, color .15s;
}
.callback-phone-choice:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.callback-messenger-list { display: flex; gap: 8px; flex-wrap: wrap; }
.callback-messenger-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px;
  color: #fff; font-weight: 600; font-size: 13px; flex: 1; justify-content: center; min-width: 100px;
}
.callback-messenger-btn:hover { text-decoration: none; opacity: .9; }
.callback-messenger-whatsapp { background: #25d366; }
.callback-messenger-viber { background: #7360f2; }
.callback-messenger-telegram { background: #29a9eb; }

/* ===== Формы входа / регистрации ===== */
.auth-form-wrap { max-width: 420px; margin: 32px auto; }
.auth-form label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 6px; }
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password],
.auth-form input[type=date], .auth-form textarea, .auth-form select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 400;
}
.auth-form .btn { margin-top: 18px; width: 100%; }
.auth-switch { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }
.hint-text { color: var(--muted); font-size: 13px; }
.social-login-row { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.social-login-row .btn { width: 100%; text-align: center; font-weight: 600; }
.btn-social-google { border-color: #4285f4; color: #4285f4; }
.btn-social-google:hover { background: #4285f4; color: #fff; }
.btn-social-apple { border-color: #1a1d24; color: #1a1d24; }
.btn-social-apple:hover { background: #1a1d24; color: #fff; }

/* ===== Личный кабинет (этап H) ===== */
.account-layout { display: grid; grid-template-columns: 230px 1fr; gap: 28px; margin: 24px 0 48px; }
.account-sidebar {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; align-self: start;
}
.account-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.account-sidebar a { padding: 9px 10px; border-radius: 8px; color: var(--text); font-size: 14px; transition: background .15s; }
.account-sidebar a:hover { background: var(--bg); text-decoration: none; }
.account-sidebar a.active { background: var(--accent); color: #fff; }
.account-user-name { font-weight: 700; padding: 0 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.account-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.account-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.account-panel h2 { font-size: 16px; margin: 0 0 14px; }
.account-actions { display: flex; gap: 12px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.address-card { position: relative; }
.saved-cards-list { list-style: none; padding: 0; margin: 0 0 14px; }
.saved-cards-list li { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.saved-cards-list li:last-child { border-bottom: none; }

/* ===== Бонусы и рефералы ===== */
.loyalty-balance { font-size: 32px; font-weight: 700; color: var(--accent); margin: 4px 0 10px; }
.referral-link-row { display: flex; gap: 8px; margin: 10px 0; }
.referral-link-row input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--bg); }

@media (max-width: 800px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-grid-2 { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
}

/* ===== Общие таблицы/бейджи (используются и в личном кабинете) ===== */
.admin-table { width: 100%; border-collapse: collapse; background: #fff; margin: 16px 0; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; }
.admin-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }

.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: capitalize; background: #eee; color: #555; }
.status-badge.status-new { background: #eaf1f8; color: var(--accent); }
.status-badge.status-processing { background: #fff4e0; color: #b4790e; }
.status-badge.status-shipped { background: #e6f0fd; color: #1d5fbf; }
.status-badge.status-delivered { background: #e7f6ec; color: var(--success); }
.status-badge.status-cancelled { background: #fdecea; color: var(--danger); }
.status-badge.status-active { background: #e7f6ec; color: var(--success); }
.status-badge.status-inactive { background: #f0f0f0; color: #888; }
.status-badge.status-paid { background: #e7f6ec; color: var(--success); }
.status-badge.status-pending { background: #fff4e0; color: #b4790e; }
.status-badge.status-failed { background: #fdecea; color: var(--danger); }
.status-badge.status-refunded { background: #e6f0fd; color: #1d5fbf; }

/* ===== Таймлайн статуса заказа ===== */
.order-timeline { display: flex; list-style: none; padding: 0; margin: 0 0 24px; }
.order-timeline li { flex: 1; text-align: center; position: relative; font-size: 13px; color: var(--muted); }
.order-timeline li:not(:last-child)::after {
  content: ''; position: absolute; top: 9px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0;
}
.order-timeline li.done:not(:last-child)::after { background: var(--success); }
.order-timeline-dot {
  display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 2px solid var(--border); margin: 0 auto 6px; position: relative; z-index: 1;
}
.order-timeline li.done .order-timeline-dot { background: var(--success); border-color: var(--success); }
.order-timeline li.current .order-timeline-dot { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,78,121,.15); }
.order-timeline li.current .order-timeline-label { color: var(--text); font-weight: 700; }
.order-timeline-cancelled { margin-bottom: 24px; }

.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }

.checkbox-label { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; margin: 10px 0 !important; }
.checkbox-label input { width: auto !important; }

.btn-link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 14px; text-decoration: underline; }
.btn-link-danger { color: var(--danger); }

/* ===== Рейтинг / звёзды ===== */
.stars { color: #e0a02c; letter-spacing: 1px; font-size: 15px; }
.rating-line { margin: 4px 0 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.card-rating .stars { font-size: 13px; }

/* ===== Действия на карточке товара (избранное + сравнение) ===== */
.card-mini-actions { position: absolute; top: 20px; right: 20px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.card-mini-actions .wishlist-mini-form { position: static; }

/* ===== Отзывы ===== */
.review-list { display: flex; flex-direction: column; gap: 18px; margin: 16px 0 24px; }
.review-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review-title { font-weight: 600; margin: 4px 0; }
.review-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; margin-top: 8px; }
.review-reply { background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 14px; }
.review-form { max-width: 480px; margin-top: 20px; }
.review-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; }
.product-reviews { margin: 40px 0; }

/* ===== Сравнение товаров ===== */
.compare-table-wrap { overflow-x: auto; margin: 20px 0; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.compare-table th, .compare-table td { border: 1px solid var(--border); padding: 12px; text-align: center; vertical-align: top; font-size: 14px; }
.compare-table th { background: var(--bg); }
.compare-table th img, .compare-table th .img-placeholder { width: 90px; height: 90px; object-fit: cover; margin: 0 auto 8px; border-radius: 8px; }
.compare-table td:first-child, .compare-table th:first-child { text-align: left; font-weight: 600; background: var(--bg); }

/* ===== Онлайн-чат (виджет-пузырь) ===== */
.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 999; }
.chat-bubble {
  width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--accent); color: #fff;
  font-size: 24px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.chat-bubble:hover { transform: scale(1.06); }
.chat-bubble-active { background: var(--accent-dark); }
.chat-panel {
  position: absolute; right: 0; bottom: 68px; width: 320px; max-width: calc(100vw - 32px); height: 440px;
  max-height: 70vh; background: #fff; border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,.22);
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border);
}
.chat-panel-header {
  background: var(--accent); color: #fff; padding: 12px 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.chat-panel-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity: .85; }
.chat-panel-close:hover { opacity: 1; }
.chat-panel-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.chat-empty-hint { color: var(--muted); font-size: 13px; margin: 0; }
.chat-msg { display: flex; flex-direction: column; max-width: 85%; }
.chat-msg-customer { align-self: flex-end; align-items: flex-end; }
.chat-msg-admin { align-self: flex-start; align-items: flex-start; }
.chat-msg-bubble { padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; word-wrap: break-word; }
.chat-msg-customer .chat-msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-admin .chat-msg-bubble { background: #fff; color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg-time { font-size: 11px; color: var(--muted); margin-top: 2px; }
.chat-guest-fields { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; }
.chat-guest-fields input {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit;
}
.chat-panel-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: #fff; }
.chat-panel-input textarea {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font-family: inherit; font-size: 14px; max-height: 96px;
}
.chat-panel-input button { flex-shrink: 0; }
@media (max-width: 480px) {
  .chat-panel { width: calc(100vw - 24px); right: -8px; }
}

/* ---------------------------------------------------------------------
   Конструктор страниц (блочный редактор) — рендер блоков на витрине.
   Класс pb- = "page builder". Отступы/цвет/шрифт/фон задаются inline
   в includes/blocks.php (pb_style_attr), здесь — только базовые правила
   отображения содержимого каждого типа блока.
--------------------------------------------------------------------- */
.pb-block { max-width: 100%; }
.pb-block-text p:first-child, .pb-block-heading h1, .pb-block-heading h2,
.pb-block-heading h3, .pb-block-heading h4, .pb-block-heading h5, .pb-block-heading h6 { margin-top: 0; }
.pb-block-text p:last-child { margin-bottom: 0; }
.pb-block-text a { color: var(--accent-dark, #167a43); text-decoration: underline; }
.pb-block-image img { max-width: 100%; height: auto; display: block; }
.pb-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pb-gallery-grid img { width: 100%; height: 220px; object-fit: contain; object-position: center; background: #f2f4f1; border-radius: 8px; box-sizing: border-box; padding: 6px; }
/* v85: лайтбокс для галерей конструктора страниц — крупный просмотр фото с перелистыванием
   (клик по фото / стрелки / клавиатура ← →, закрытие по ✕ / клику по фону / Esc). */
.pb-gallery-grid img:hover { opacity: .9; }
.pb-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.9); padding: 24px;
}
.pb-lightbox.open { display: flex; }
body.pb-lightbox-lock { overflow: hidden; }
.pb-lightbox-img { max-width: min(90vw, 1100px); max-height: 85vh; object-fit: contain; border-radius: 4px; }
.pb-lightbox-close, .pb-lightbox-prev, .pb-lightbox-next {
  position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%;
  cursor: pointer; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.pb-lightbox-close:hover, .pb-lightbox-prev:hover, .pb-lightbox-next:hover { background: rgba(255,255,255,.25); }
.pb-lightbox-close { top: 18px; right: 18px; width: 42px; height: 42px; }
.pb-lightbox-prev, .pb-lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.pb-lightbox-prev { left: 12px; }
.pb-lightbox-next { right: 12px; }
.pb-lightbox-counter {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #fff; opacity: .8; font-size: 14px; background: rgba(0,0,0,.4); padding: 4px 12px; border-radius: 999px;
}
@media (max-width: 640px) {
  .pb-lightbox-prev, .pb-lightbox-next { width: 42px; height: 42px; font-size: 24px; }
}
.pb-video-wrap { position: relative; width: 100%; padding-top: 56.25%; }
.pb-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.pb-button { display: inline-block; padding: 12px 28px; background: var(--accent, #1f9d55); color: #fff;
  border-radius: 8px; font-weight: 600; text-decoration: none; transition: background .15s; }
.pb-button:hover { background: var(--accent-dark, #167a43); color: #fff; }
.pb-divider { border: none; border-top: 1px solid var(--border, #e5e7eb); margin: 0; }
.pb-icon { font-size: 40px; line-height: 1; display: inline-block; }
.pb-block-html { overflow-x: auto; }

/* Этап 10 — блок «Колонки»: несколько блоков рядом, без сборки, на CSS Grid. */
.pb-block-columns { display: grid; gap: 24px; }
.pb-columns-2 { grid-template-columns: 1fr 1fr; }
.pb-columns-3 { grid-template-columns: 1fr 1fr 1fr; }
.pb-column { min-width: 0; }

/* Этап 10 — блок «Форма»: публичная форма обращения, см. pb_form_submit.php. */
.pb-block-form { max-width: 480px; }
.pb-form-title { margin-top: 0; }
.pb-form { display: flex; flex-direction: column; gap: 12px; }
.pb-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted, #6b7280); }
.pb-form input, .pb-form textarea { padding: 10px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; font: inherit; }
.pb-form button { align-self: flex-start; }

@media (max-width: 640px) {
  .pb-block-heading h1 { font-size: 30px; }
  .pb-block-heading h2 { font-size: 24px; }
  .pb-hide-mobile { display: none !important; }
  .pb-columns-2, .pb-columns-3 { grid-template-columns: 1fr; }
}

/* Лидеры бренда / «История успеха» (v70) */
.leader-card-img { aspect-ratio: 3/4; position: relative; }
.leader-card-title { text-align: center; }
.leader-card-city { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.leader-rank-badge {
  position: absolute; left: 10px; bottom: 10px; background: var(--accent, #1f4e79);
  color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.leader-rank-badge-lg { position: static; display: inline-block; margin-bottom: 12px; font-size: 13px; padding: 6px 14px; }
.leader-post { max-width: 760px; margin: 0 auto; }
.leader-post-image img { border-radius: var(--radius); }
.leader-info-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px;
  margin: 16px 0 24px; background: var(--bg);
}
.leader-info-list { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.leader-info-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.leader-post-content p { margin: 0 0 16px; line-height: 1.7; }
.leaders-related { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 24px; }
.leaders-grid-compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.leader-related-card { display: block; text-decoration: none; color: var(--text); }
.leader-related-card .leader-card-img { border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.leader-related-card .leader-card-img img { width: 100%; height: 100%; object-fit: cover; }
.leader-related-name { font-size: 13px; display: block; text-align: center; }

/* Страница «Партнёрская программа» (v71) */
.static-page-content .lead { font-size: 19px; line-height: 1.6; color: var(--text); margin: 0 0 20px; }
.benefits-list { list-style: none; margin: 20px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.benefits-list li {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
  transition: transform .15s ease, box-shadow .15s ease;
}
.benefits-list li:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.benefit-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.benefit-text { font-size: 15px; line-height: 1.4; }
.partner-ulife-img { max-width: 320px; margin: 24px auto; }
.partner-ulife-img img { border-radius: var(--radius); width: 100%; }
.pb-block-button { text-align: center; margin: 24px 0; }

/* Страница «Ми сьогодні» (v72) */
.page-quote {
  font-size: 20px; line-height: 1.5; font-style: italic; color: var(--text);
  padding: 18px 24px; border-left: 4px solid var(--accent, #1f4e79); background: var(--bg);
  border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 24px;
}
.quote-author { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--muted); }
.values-list {
  list-style: none; margin: 16px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;
}
.values-list li {
  padding: 8px 18px; border-radius: 999px; background: var(--accent, #1f4e79); color: #fff;
  font-size: 14px; font-weight: 600;
}
.stat-highlight {
  font-size: 17px; line-height: 1.6; padding: 16px 20px; margin: 24px 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.stat-highlight strong { font-size: 22px; color: var(--accent, #1f4e79); }
.static-page-content h3 { margin: 28px 0 10px; }

/* Страница «Виробництво» (v73) */
.cert-list { list-style: none; margin: 16px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cert-list li {
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--accent, #1f4e79);
  color: var(--accent, #1f4e79); font-size: 13px; font-weight: 700; letter-spacing: .3px;
}

/* ===== About hub page (v75) — nav cards linking to subpages ===== */
.about-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 28px 20px;
    background: #fff;
    border: 1px solid #e6e2da;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.about-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    border-color: #b7cf9f;
    text-decoration: none;
}
.about-nav-icon {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 4px;
}
.about-nav-title {
    font-weight: 700;
    font-size: 17px;
    color: #2f3b2a;
}
.about-nav-text {
    font-size: 14px;
    color: #6b6f63;
    line-height: 1.4;
}

/* ===== Вкладки товара «Склад / Застосування / Характеристики / Відгуки» (v77) =====
   Восстановлено — колонки composition/application_info/characteristics_info уже были
   заполнены в реальной БД сайта (4 языка), но верстки вкладок в этой сборке не было. */
.product-tabs {
  margin-top: 32px;
}
.product-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.product-tab-btn {
  flex: 1 1 0;
  min-width: 140px;
  padding: 16px 20px;
  background: #fff;
  border: none;
  border-right: 1px solid var(--border);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.product-tab-btn:last-child {
  border-right: none;
}
.product-tab-btn:hover {
  background: var(--bg);
}
.product-tab-btn.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}
.product-tab-panel {
  display: none;
  padding: 24px 4px 0;
  line-height: 1.65;
  color: var(--text);
}
.product-tab-panel.active {
  display: block;
}
.product-tab-panel .attributes-table {
  margin-bottom: 20px;
}
.tab-characteristics-text {
  white-space: normal;
}
@media (max-width: 640px) {
  .product-tabs-nav {
    flex-direction: column;
  }
  .product-tab-btn {
    border-right: none;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .product-tab-btn:last-child {
    border-bottom: none;
  }
}

/* CraftAI dev-credit badge — сайт розроблено CRAFT AI (https://craftai.md/) */
.footer-credit-row{
  display:flex;justify-content:center;align-items:center;
  width:100%;
  padding-top:6px;margin-top:2px;
  border-top:1px solid var(--border);
}
.craftai-credit{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--muted);
}
.craftai-credit img{
  height:26px;width:auto;display:block;flex:none;
}
.craftai-credit__text{
  display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-size:13px;line-height:1.3;
}
.craftai-credit__brand{
  font-weight:700;letter-spacing:.02em;color:var(--text);
  text-decoration:none;
  transition:color .2s ease;
}
.craftai-credit__brand:hover{color:var(--accent);text-decoration:underline;}
@media (max-width:480px){
  .craftai-credit img{height:22px;}
  .craftai-credit__text{font-size:12px;justify-content:center;}
}