/* ==========================================================================
   Усадьба ПРО — слой «в стиле лендингов» для основного сайта.
   Загружается ПОСЛЕ скомпилированного app.css, поэтому переопределяет его
   при равной специфичности. Tailwind на сервере пересобрать нельзя (нет node),
   поэтому здесь только собственные правила по уже существующим классам —
   новых Tailwind-утилит в шаблонах не появляется.
   ========================================================================== */

:root {
  /* палитра логотипа — та же, что на лендингах */
  --u-brand:      #5AA24B;
  --u-brand-deep: #2E6B34;
  --u-accent:     #9AD175;
  --u-ink:        #1B3221;
  --u-soft:       #F4F8ED;
  --u-softer:     #FAFCF5;
  --u-line:       rgba(27, 50, 33, .12);
  --u-line-soft:  rgba(27, 50, 33, .07);

  --u-display: 'Unbounded', 'Manrope', ui-sans-serif, system-ui, sans-serif;

  --u-grad-cta:  linear-gradient(123deg, #1B3F22 7%, #2E6B34 37%, #35763A 72%, #3B7F3C 100%);
  --u-grad-head: linear-gradient(180deg, #1B3221 0%, #5AA24B 100%);

  --u-radius:    clamp(20px, 2.2vw, 34px);
  --u-radius-md: clamp(12px, 1.2vw, 18px);
  --u-shadow:    0 18px 45px -32px rgba(27, 50, 33, .42);
  --u-ease:      cubic-bezier(.25, .1, .25, 1);

  /* существующие токены сайта подтягиваем к лендингам */
  --design-ink: #1B3221;
  --design-line: #DFE7E1;
  --design-canvas: #FAFCF5;
  --design-radius-lg: var(--u-radius-md);
  --design-radius-xl: var(--u-radius);
  --design-shadow: var(--u-shadow);
}

/* ==========================================================================
   ТИПОГРАФИКА — главный носитель стиля лендингов
   ========================================================================== */
.ui-page-title,
.ui-section-title {
  font-family: var(--u-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: .95;
  color: var(--u-ink);
  text-wrap: balance;
}

.ui-h3-title,
.ui-h4 {
  font-family: var(--u-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--u-ink);
  text-transform: none;
}

/* градиентный акцент, как .grad-text на лендингах */
.u-grad {
  background: var(--u-grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ui-kicker {
  color: var(--u-brand-deep) !important;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.ui-body, .ui-body-lg { color: #4A5F4E !important; }

/* заголовки внутри статей тоже переводим на display-шрифт */
.prose h2, .prose h3, .article-body h2, .article-body h3 {
  font-family: var(--u-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--u-ink);
}
/* Капс внутри текста блоков не нужен: в описаниях товаров он кричал
   и ломал ритм. Оставляем display-шрифт без верхнего регистра. */
.prose h2, .article-body h2 { letter-spacing: -.025em; }

/* ==========================================================================
   КНОПКИ — пилюли лендингов.
   На сайте нет общего класса кнопки, поэтому ловим по структуре:
   ссылки/кнопки с уже скомпилированными утилитами rounded-full.
   ========================================================================== */
/* Раньше здесь было правило по всем a.rounded-full — оно било по площадям:
   капс налез на длинные названия комплектаций товара. Стилизуем только явное. */
.u-btn { border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }

.u-btn--primary,
.u-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--u-grad-cta);
  color: #fff;
  padding: 15px clamp(22px, 3vw, 34px);
  font-size: clamp(.72rem, 1.05vw, .85rem);
  box-shadow: 0 4px 4px rgba(46, 107, 52, .25), 4px 4px 12px var(--u-brand) inset;
  outline: 2px solid #fff;
  outline-offset: -3px;
  white-space: nowrap;
}
.u-btn--primary:hover,
.u-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(90, 162, 75, .38), 4px 4px 12px var(--u-brand) inset;
}

.u-btn--ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 2px solid var(--u-line);
  color: var(--u-ink);
  padding: 15px clamp(22px, 3vw, 34px);
  font-size: clamp(.72rem, 1.05vw, .85rem);
  background: transparent;
}
.u-btn--ghost:hover {
  background: var(--u-soft);
  border-color: var(--u-brand);
  color: var(--u-brand-deep);
  transform: translateY(-2px);
}

/* ==========================================================================
   ШАПКА
   ========================================================================== */
.site-header-sticky { background: rgba(255,255,255,.86) !important; backdrop-filter: blur(14px); }
.site-header-brand-copy { font-family: var(--u-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.site-header-tagline { color: #667A6A !important; letter-spacing: .04em; }
.site-header-search-input { border-radius: 999px; background: var(--u-soft) !important; border-color: var(--u-line) !important; }
.site-header-search-input:focus {
  border-color: var(--u-brand) !important;
  box-shadow: 0 0 0 4px rgba(154, 209, 117, .35) !important;
}
.site-header-nav-link { border-radius: 999px; font-weight: 600; color: #3A4C40 !important; }
.site-header-nav-link--active { background: var(--u-brand-deep) !important; color: #fff !important; }
.site-header-nav-link:not(.site-header-nav-link--active):hover {
  background: var(--u-soft) !important;
  color: var(--u-brand-deep) !important;
}
.site-header-nav-link:not(.site-header-nav-link--active):hover .site-header-nav-link-icon { color: var(--u-brand-deep) !important; }

/* ==========================================================================
   КАРТОЧКИ И СЕКЦИИ — крупные скругления и мягкие подложки
   ========================================================================== */
.home-showcase,
.home-dashboard__list,
.catalog-product-card,
.article-rail-card,
.home-slider-card {
  border-radius: var(--u-radius-md) !important;
  border-color: var(--u-line) !important;
  box-shadow: var(--u-shadow) !important;
}

.catalog-product-card:hover,
.article-rail-card:hover {
  border-color: var(--u-brand) !important;
  box-shadow: 0 26px 58px -34px rgba(27, 50, 33, .5) !important;
}

.home-showcase { background: rgba(255,255,255,.72) !important; }
.home-dashboard__list { background: var(--u-soft) !important; }
.home-dashboard__item { border-radius: 14px; font-weight: 600; }
.home-dashboard__item:hover { background: #fff; color: var(--u-brand-deep); }
.home-dashboard__icon { background: rgba(154, 209, 117, .32) !important; color: var(--u-brand-deep) !important; border-radius: 12px; }
.home-dashboard__tab.is-active { background: var(--u-ink) !important; }
.home-dashboard__subitem:hover { color: var(--u-brand-deep); }

/* ==========================================================================
   ПЛИТКА РУБРИК — зелёная база + акцент на категорию.
   Градиент приходит инлайном из шаблона через --cat-a/--cat-b.
   ========================================================================== */
.home-showcase-card {
  border-radius: var(--u-radius-md);
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.18), transparent 20%),
    linear-gradient(135deg, var(--cat-a, #4E9440) 0%, var(--cat-b, #2E6B34) 100%);
  transition: transform .25s var(--u-ease), box-shadow .25s var(--u-ease);
}
.home-showcase-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(27,50,33,.55); }
.home-showcase-card__title {
  font-family: var(--u-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.02;
}

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */
footer.bg-white {
  background: var(--u-ink) !important;
  border-top: 0 !important;
  border-radius: var(--u-radius) var(--u-radius) 0 0;
  color: rgba(255,255,255,.72);
  margin-top: clamp(40px, 6vw, 90px) !important;
}
footer.bg-white a { color: rgba(255,255,255,.82); }
footer.bg-white a:hover { color: var(--u-accent); }
footer.bg-white .ui-h4,
footer.bg-white .ui-kicker,
footer.bg-white h2, footer.bg-white h3, footer.bg-white h4 { color: #fff !important; }
footer.bg-white .border-slate-200,
footer.bg-white .border-slate-100 { border-color: rgba(255,255,255,.14) !important; }
footer.bg-white .text-slate-500,
footer.bg-white .text-slate-600,
footer.bg-white .text-slate-400 { color: rgba(255,255,255,.6) !important; }

/* ==========================================================================
   ПРОЧЕЕ
   ========================================================================== */
.article-tag-pill, .home-tag-pill, .site-mobile-panel__chip, .article-meta-chip {
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: var(--u-soft);
  color: var(--u-brand-deep);
  font-weight: 600;
}
.article-tag-pill:hover, .home-tag-pill:hover { background: rgba(154,209,117,.35); }

.ui-breadcrumbs, .article-breadcrumbs { color: #667A6A; }
.ui-breadcrumbs a:hover, .article-breadcrumbs a:hover { color: var(--u-brand-deep); }

::selection { background: var(--u-accent); color: var(--u-ink); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--u-brand);
  outline-offset: 3px;
}

body { background: var(--u-softer) !important; }

/* ==========================================================================
   ВТОРОЙ ПРОХОД: то, что не попало под слой с первого раза
   ========================================================================== */

/* Палитра Tailwind-утилит сайта (text-brand-600, bg-brand-50 и т.п.)
   сдвигается на лендинговую — это меняет акценты сразу везде. */
:root {
  --color-brand-50:  244 248 237;  /* #F4F8ED */
  --color-brand-100: 233 242 222;  /* #E9F2DE */
  --color-brand-200: 154 209 117;  /* #9AD175 */
  --color-brand-500:  90 162  75;  /* #5AA24B */
  --color-brand-600:  46 107  52;  /* #2E6B34 */
}

/* Заголовок статьи: display-шрифт, но БЕЗ капса — заголовки длинные,
   капс здесь убил бы читаемость. */
.article-title {
  font-family: var(--u-display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  color: var(--u-ink);
  text-wrap: balance;
}

.article-toc-title,
.article-comment-title,
.article-related-title {
  font-family: var(--u-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--u-ink);
}

/* Тёмные кнопки сайта -> пилюли лендингов.
   Ловим только ссылки и кнопки, чтобы не задеть оверлеи bg-slate-950/70. */
a.bg-slate-950,
button.bg-slate-950,
a.bg-slate-900,
button.bg-slate-900 {
  background: var(--u-grad-cta) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  box-shadow: 0 4px 4px rgba(46,107,52,.25), 4px 4px 12px var(--u-brand) inset;
  outline: 2px solid #fff;
  outline-offset: -3px;
  transition: transform .2s var(--u-ease), box-shadow .25s var(--u-ease);
}
a.bg-slate-950:hover,
button.bg-slate-950:hover,
a.bg-slate-900:hover,
button.bg-slate-900:hover {
  transform: translateY(-2px);
  background: var(--u-grad-cta) !important;
  box-shadow: 0 10px 26px rgba(90,162,75,.38), 4px 4px 12px var(--u-brand) inset;
}

/* мобильная панель — те же bg-slate-950, но это навигация, не кнопка:
   капс и обводка тут лишние */
.site-mobile-panel__section.bg-slate-950 {
  text-transform: none;
  letter-spacing: normal;
  outline: 0;
  border-radius: 1rem !important;
}

/* Табы каталога/вариантов товара: активный — зелёный, не чёрный */
.border-slate-950.bg-slate-950 {
  border-color: var(--u-brand-deep) !important;
}

/* Бренд товара в карточке */
.catalog-product-card__brand,
.catalog-product-card .text-slate-400 {
  color: var(--u-brand-deep) !important;
  font-weight: 700;
  letter-spacing: .12em;
}

/* ==========================================================================
   НАВИГАЦИЯ — сегментированный рельс вместо плоского ряда ссылок
   ========================================================================== */
.site-header-nav {
  background: rgba(255,255,255,.92) !important;
  border-color: var(--u-line-soft) !important;
}
.site-header-nav-row { height: 64px !important; gap: 1rem; }

.site-header-nav-links {
  display: flex; align-items: center; gap: .25rem;
  padding: .3rem;
  border-radius: 999px;
  background: var(--u-soft);
  /* горизонтальный скролл без полосы — пунктов много */
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.site-header-nav-links::-webkit-scrollbar { display: none; }

.site-header-nav-link {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 38px !important; min-height: 38px !important;
  padding: 0 .95rem !important;
  border-radius: 999px !important;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #46584B !important;
  background: transparent;
  white-space: nowrap;
  transition: background-color .18s var(--u-ease), color .18s var(--u-ease);
  transform: none !important;   /* прежний ховер дёргал строку вверх */
}
.site-header-nav-link-icon { display: inline-flex; width: 15px; height: 15px; opacity: .5; transition: opacity .18s, color .18s; }
.site-header-nav-link-icon svg { width: 100%; height: 100%; }

.site-header-nav-link:not(.site-header-nav-link--active):hover {
  background: #fff !important;
  color: var(--u-brand-deep) !important;
  box-shadow: 0 2px 8px -4px rgba(27,50,33,.35);
}
.site-header-nav-link:not(.site-header-nav-link--active):hover .site-header-nav-link-icon { opacity: 1; color: var(--u-brand) !important; }

.site-header-nav-link--active {
  background: var(--u-grad-cta) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -6px rgba(27,50,33,.55);
}
.site-header-nav-link--active .site-header-nav-link-icon { opacity: 1; color: #fff !important; }

/* дата справа — служебная информация, не должна конкурировать с навигацией */
.site-header-nav-row > :last-child:not(.site-header-nav-links) {
  font-size: .72rem; letter-spacing: .06em; color: #8A998F; white-space: nowrap;
}

/* ==========================================================================
   РЕЛЬС ФИЛЬТРОВ (каталог) — одна прокручиваемая строка вместо трёх рядов
   ========================================================================== */
.u-chip-rail {
  display: flex; align-items: center; gap: .5rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: .15rem;
  /* мягкое затухание у правого края — подсказка, что рельс скроллится */
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.u-chip-rail::-webkit-scrollbar { display: none; }

.u-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: #fff;
  color: #46584B;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .18s var(--u-ease), color .18s var(--u-ease), border-color .18s var(--u-ease), transform .18s var(--u-ease);
}
/* Ховер и «выбрано» раньше выглядели одинаково — было непонятно, что активно.
   Ховер: только подложка и текст, рамка не меняется, сдвига нет (ряд не дёргается).
   Выбрано: плотная заливка градиентом. */
.u-chip:hover {
  background: var(--u-soft);
  color: var(--u-brand-deep);
}
.u-chip:focus-visible { outline: 2px solid var(--u-brand); outline-offset: 2px; }
.u-chip[aria-current="page"], .u-chip.is-active {
  background: var(--u-grad-cta);
  border-color: transparent;
  color: #fff;
}
.u-chip[aria-current="page"]:hover, .u-chip.is-active:hover {
  background: var(--u-grad-cta); color: #fff;
}

@media (max-width: 640px) {
  .u-chip, .site-header-nav-link { font-size: .7rem; }
  .u-chip-rail { mask-image: none; -webkit-mask-image: none; }
}

/* Tailwind-утилита .font-display завязана на Fraunces (tailwind.config.js).
   Заголовки 404/500 и бренд в подвале шли серифом — переводим на Unbounded. */
.font-display {
  font-family: var(--u-display) !important;
  font-weight: 800;
  letter-spacing: -.03em;
}

/* Подвал: бренд и заголовки колонок */
footer.bg-white .font-display { color: #fff !important; }

/* ==========================================================================
   УЗКИЕ ЭКРАНЫ: Unbounded заметно шире Fraunces/Manrope, и прежние размеры
   заголовков перестали влезать — длинные одиночные слова («ОБОРУДОВАНИЕ»,
   «БЛАГОУСТРОЙСТВО») выходили за вьюпорт. Уменьшаем кегль и разрешаем перенос.
   ========================================================================== */
.ui-page-title, .ui-section-title, .article-title, .font-display,
.home-showcase-card__title {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

@media (max-width: 700px) {
  main > .site-shell h1.ui-page-title,
  .manufacturer-page h1.ui-page-title,
  .catalog-category-page h1.ui-page-title,
  .catalog-index-page h1.ui-page-title {
    font-size: clamp(1.55rem, 7.6vw, 2.6rem) !important;
    line-height: 1.02;
  }
  .ui-section-title { font-size: clamp(1.35rem, 6.4vw, 2rem); }
  .article-title    { font-size: clamp(1.45rem, 6.8vw, 2.2rem); }
  .font-display     { font-size: clamp(1.5rem, 7vw, 2.4rem); }
}

/* ==========================================================================
   СТРАНИЦА ТОВАРА — левая колонка кончалась на картинке и под ней была дыра
   ========================================================================== */

/* «Коротко о модели» — 2×2 плитки с ключевыми цифрами */
.product-glance {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1.1rem;
}
.product-glance__item {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--u-radius-md);
  background: var(--u-soft);
  border: 1px solid var(--u-line-soft);
}
.product-glance__val {
  font-family: var(--u-display); font-weight: 800;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  line-height: 1.1; color: var(--u-ink);
  overflow-wrap: break-word;
}
.product-glance__lbl {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #6C7E71;
}

/* Переход на профильный лендинг: заявка уходит в Битрикс через его форму */
.product-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.1rem;
  padding: 1.25rem 1.35rem;
  border-radius: var(--u-radius-md);
  background: var(--u-ink);
  color: rgba(255,255,255,.75);
}
.product-cta__body { min-width: 12rem; flex: 1 1 14rem; }
.product-cta__title {
  font-family: var(--u-display); font-weight: 700; font-size: 1.02rem;
  color: #fff; margin-bottom: .3rem;
}
.product-cta__text { font-size: .86rem; line-height: 1.5; }
.product-cta__btn { flex: 0 0 auto; }

/* Карточка производителя */
.product-brand {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-top: .8rem; padding: .95rem 1.2rem;
  border: 1px solid var(--u-line); border-radius: var(--u-radius-md);
  background: #fff;
  transition: border-color .2s var(--u-ease);
}
.product-brand:hover { border-color: var(--u-brand); }
.product-brand__label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A998F; }
.product-brand__name { font-family: var(--u-display); font-weight: 700; color: var(--u-ink); }
.product-brand__more { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--u-brand-deep); }

@media (max-width: 520px) {
  .product-glance { grid-template-columns: 1fr; }
  .product-thumbs { grid-template-columns: repeat(3, 1fr); }
  .product-cta { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   ОПИСАНИЕ ТОВАРА — блок выглядел рыхлым: короткая мера строки в широкой
   карточке и слишком крупные отступы у заголовков.
   ========================================================================== */
.product-page__body {
  border-radius: var(--u-radius-md) !important;
  border-color: var(--u-line) !important;
  padding: clamp(1.25rem, 3vw, 2.25rem) !important;
}
.product-page__body > * { max-width: 68ch; }
.product-page__body h2 {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  margin-top: 1.8em; margin-bottom: .5em;
  padding-top: 1.1em;
  border-top: 1px solid var(--u-line-soft);
}
.product-page__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.product-page__body h3 { font-size: clamp(1rem, 1.6vw, 1.2rem); margin-top: 1.4em; margin-bottom: .4em; }
.product-page__body p  { line-height: 1.65; }
.product-page__body ul { margin: .6em 0 1em; padding-left: 1.1em; }
.product-page__body li { margin: .3em 0; line-height: 1.6; }
.product-page__body li::marker { color: var(--u-brand); }
.product-page__body strong { color: var(--u-ink); }

/* ==========================================================================
   СКРУГЛЕНИЯ — крупные утилиты шаблонов приводим к единой, более сдержанной шкале
   ========================================================================== */
.rounded-\[2rem\] { border-radius: 20px !important; }
.rounded-3xl       { border-radius: 18px !important; }
.rounded-2xl       { border-radius: 14px !important; }
.rounded-xl        { border-radius: 11px !important; }

/* ==========================================================================
   СТРАНИЦА ТОВАРА: колонки разной высоты неизбежно оставляли дыру в короткой.
   Медиа-колонку делаем «липкой» — она следует за прокруткой, пустота не читается.
   ========================================================================== */
@media (min-width: 1024px) {
  .product-hero { align-items: start; }
  .product-media-col {
    position: sticky;
    top: calc(var(--header-h, 76px) + 76px);
    align-self: start;
  }
}

/* ==========================================================================
   ПОДВАЛ: фон стал тёмно-зелёным, но часть текста осталась тёмной от
   исходных Tailwind-классов и не читалась. Задаём цвета жёстко по ролям.
   ========================================================================== */
footer.bg-white { color: rgba(255,255,255,.72) !important; }
footer.bg-white h1, footer.bg-white h2, footer.bg-white h3,
footer.bg-white h4, footer.bg-white h5,
footer.bg-white .font-display, footer.bg-white strong, footer.bg-white b {
  color: #fff !important;
}
footer.bg-white p, footer.bg-white span, footer.bg-white div,
footer.bg-white li, footer.bg-white address, footer.bg-white small,
footer.bg-white time, footer.bg-white dd, footer.bg-white dt {
  color: rgba(255,255,255,.72) !important;
}
footer.bg-white .ui-kicker { color: rgba(255,255,255,.55) !important; }
footer.bg-white a { color: rgba(255,255,255,.86) !important; }
footer.bg-white a:hover { color: var(--u-accent) !important; }

/* ==========================================================================
   ГАЛЕРЕЯ ТОВАРА — смена главного кадра, стрелки, счётчик, миниатюры
   ========================================================================== */
.product-gallery__stage {
  position: relative;
  border: 1px solid var(--u-line);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}
.product-gallery__img {
  display: block; width: 100%; height: auto;
  max-height: 620px; object-fit: contain;
  background: #fff;
}
.product-gallery__empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; font-size: .9rem; color: #8A998F;
}

.product-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--u-line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  font-size: 1.6rem; line-height: 1; color: var(--u-ink);
  cursor: pointer; opacity: 0;
  transition: opacity .2s var(--u-ease), background-color .2s var(--u-ease), transform .2s var(--u-ease);
}
.product-gallery__nav--prev { left: 12px; }
.product-gallery__nav--next { right: 12px; }
.product-gallery__stage:hover .product-gallery__nav,
.product-gallery__nav:focus-visible { opacity: 1; }
.product-gallery__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }

.product-gallery__counter {
  position: absolute; right: 12px; bottom: 12px;
  padding: .28rem .6rem; border-radius: 999px;
  background: rgba(27,50,33,.72); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
}

.product-gallery__thumbs {
  display: flex; gap: .55rem; margin-top: .7rem;
  overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem;
}
.product-gallery__thumbs::-webkit-scrollbar { display: none; }
.product-gallery__thumb {
  flex: 0 0 auto; width: 88px; padding: .3rem; cursor: pointer;
  background: #fff; border: 1px solid var(--u-line); border-radius: 12px;
  transition: border-color .18s var(--u-ease), transform .18s var(--u-ease);
}
.product-gallery__thumb img { width: 100%; aspect-ratio: 4/3; object-fit: contain; display: block; }
/* Ховер миниатюры не должен повторять активную: раньше обе давали зелёную рамку,
   а сдвиг на 2px выбивал миниатюру из ряда. */
.product-gallery__thumb:hover { background: var(--u-soft); }
.product-gallery__thumb:hover img { transform: scale(1.04); }
.product-gallery__thumb img { transition: transform .18s var(--u-ease); }
.product-gallery__thumb:focus-visible { outline: 2px solid var(--u-brand); outline-offset: 2px; }
.product-gallery__thumb.is-active {
  border-color: var(--u-brand-deep);
  box-shadow: inset 0 0 0 2px var(--u-brand-deep);
  background: #fff;
}

/* на тач-устройствах стрелки не нужны — там свайп по миниатюрам */
@media (hover: none) {
  .product-gallery__nav { display: none; }
  .product-gallery__thumb { width: 74px; }
}

/* ==========================================================================
   В app.css есть собственное правило `.catalog-category-nav a:hover`
   (заливка --design-accent + сдвиг). Его специфичность (0,2,1) выше моей
   (0,2,0), поэтому ховер выглядел как «выбрано». Перебиваем точнее.
   ========================================================================== */
.catalog-category-nav a.u-chip {
  border-radius: 999px;
  border-color: var(--u-line);
  background: #fff;
  color: #46584B;
}
.catalog-category-nav a.u-chip:hover {
  background: var(--u-soft);
  border-color: var(--u-line);
  color: var(--u-brand-deep);
  transform: none;
}
.catalog-category-nav a.u-chip:focus-visible {
  outline: 2px solid var(--u-brand);
  outline-offset: 2px;
}
.catalog-category-nav a.u-chip[aria-current="page"],
.catalog-category-nav a.u-chip.is-active,
.catalog-category-nav a.u-chip[aria-current="page"]:hover,
.catalog-category-nav a.u-chip.is-active:hover {
  background: var(--u-grad-cta);
  border-color: transparent;
  color: #fff;
  transform: none;
}

/* ==========================================================================
   ФИКС ПЕРЕПОЛНЕНИЯ НА СТРАНИЦЕ ТОВАРА (мобильные)
   У элементов grid по умолчанию min-width:auto, поэтому прокручиваемый ряд
   миниатюр галереи раздувал колонку до ширины своего содержимого (572px при
   вьюпорте 430px) и уносил всю страницу вправо. Разрешаем колонкам сжиматься.
   ========================================================================== */
.product-hero > * { min-width: 0; }
.product-gallery { min-width: 0; }
.product-gallery__thumbs { min-width: 0; }

/* та же ловушка возможна в нижней сетке статьи/каталога */
.product-page > .grid > *,
.catalog-grid > * { min-width: 0; }

/* ==========================================================================
   ФИКС ВЫСОТЫ CTA-КАРТОЧКИ ТОВАРА (мобильные)
   У .product-cta__body стоит flex: 1 1 14rem — при flex-direction: column
   базис применяется к ВЫСОТЕ, поэтому блок текста получал 224px вместо
   фактических 66px, и карточка раздувалась на 158 лишних пикселей.
   ========================================================================== */
@media (max-width: 520px) {
  .product-cta__body { flex: 0 0 auto; min-width: 0; }
  .product-cta { gap: .85rem; justify-content: flex-start; }
}

/* ==========================================================================
   HTML-КАРТА САЙТА
   Даёт краулеру прямые пути к страницам, которые были доступны только через
   закрытую в robots пагинацию.
   ========================================================================== */
.sitemap-group + .sitemap-group { border-top: 1px solid var(--u-line-soft); padding-top: 1.6rem; }
.sitemap-group__count {
  display: inline-block; margin-left: .5rem; padding: .1rem .5rem;
  border-radius: 999px; background: var(--u-soft);
  font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 700;
  color: var(--u-brand-deep); vertical-align: middle;
}
.sitemap-list { columns: 1; column-gap: 2rem; }
@media (min-width: 640px)  { .sitemap-list { columns: 2; } }
@media (min-width: 1024px) { .sitemap-list { columns: 3; } }
.sitemap-list li { break-inside: avoid; margin-bottom: .45rem; line-height: 1.4; }
.sitemap-list a { color: #3A4C40; font-size: .92rem; border-bottom: 1px solid transparent; }
.sitemap-list a:hover { color: var(--u-brand-deep); border-bottom-color: var(--u-brand); }

/* ==========================================================================
   ГЛАВНАЯ: сетка 3x3 из девяти карточек
   Заменила асимметричную пару «крупная статья + карточка», у которой высоты
   столбцов не совпадали — карточка вылезала на ~100px ниже левого фото.
   Одинаковый размер получается сам: столбцы равной ширины дают равную высоту
   фото (пропорции у него фиксированные), а заголовок всегда занимает ровно две
   строки. Растягивать фото по высоте нельзя — при flex-basis: auto оно
   схлопывалось почти в ноль, и от карточки оставалась одна цветная плашка.
   ========================================================================== */
.home-grid-9 { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
  .home-grid-9 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .home-grid-9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.home-grid-9 > article { min-width: 0; }

/* Заголовок ровно в две строки: длинный обрезается, короткий добирает высоту. */
.home-grid-9 .article-preview-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

/* ==========================================================================
   ЗНАЧКИ СОЦСЕТЕЙ
   У ссылки с фирменным знаком убираем плашку: сам логотип круглый и цветной,
   квадратная подложка с градиентом под ним выглядела бы рамкой вокруг рамки.
   ========================================================================== */
.article-social-icon--logo {
  background: none !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 0;
  width: 48px;
  height: 48px;
  box-shadow: 0 6px 18px -8px rgba(34, 158, 217, .8);
  transition: transform .2s var(--u-ease), box-shadow .2s var(--u-ease);
}
.article-social-icon--logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(34, 158, 217, .9);
}
.article-social-logo { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   ПАРТНЁРСКИЕ ТОВАРЫ
   Визуально отличаются от карточек каталога: это не наше оборудование, и
   читатель должен видеть разницу. Отсюда мягкая подложка и пометка сверху.
   ========================================================================== */
.partner-products {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-md);
  background: var(--u-softer);
}
.partner-products__disclosure {
  font-size: .78rem;
  line-height: 1.4;
  color: #6B7A6E;
  max-width: 22rem;
}
/* auto-fit, а не фиксированные 4 колонки: при одном-двух товарах карточки
   растягиваются по ширине, а не висят узкой полоской в 100px. */
.partner-products__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.partner-product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--u-line-soft);
  border-radius: var(--u-radius-md);
  background: #fff;
  overflow: hidden;
  transition: transform .2s var(--u-ease), box-shadow .2s var(--u-ease), border-color .2s var(--u-ease);
}
.partner-product:hover {
  transform: translateY(-2px);
  border-color: var(--u-brand);
  box-shadow: var(--u-shadow);
}
.partner-product__media {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: .75rem;
}
.partner-product__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-product__placeholder {
  width: 100%; height: 100%;
  background: radial-gradient(circle at 30% 30%, #EEF4E6, #F7FAF2);
  border-radius: 12px;
}
.partner-product__body { display: flex; flex-direction: column; gap: .35rem; padding: .85rem 1rem 1rem; }
.partner-product__brand { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #7A8A7E; }
.partner-product__title {
  font-weight: 600; line-height: 1.3; color: var(--u-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.partner-product__note { font-size: .82rem; line-height: 1.45; color: #5C6C60; }
.partner-product__price { margin-top: .25rem; font-family: var(--u-display); font-weight: 700; color: var(--u-brand-deep); }
.partner-product__price s { margin-left: .4rem; font-family: 'Manrope', sans-serif; font-weight: 500; font-size: .85em; color: #98A69C; }
.partner-product__checked { font-size: .72rem; color: #8A998E; }
.partner-product__cta { margin-top: auto; padding-top: .6rem; font-size: .82rem; font-weight: 600; color: var(--u-brand-deep); }

/* ==========================================================================
   СТРАНИЦА 404
   Не «извинение в пустоте», а развилка: поиск, разделы, свежие материалы.
   ========================================================================== */
.error-page { padding-block: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: clamp(2rem, 4vw, 3rem); }
.error-page__head { max-width: 46rem; }
.error-page__search {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem;
}
.error-page__search-input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: .85rem 1.25rem;
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: #fff;
  font-size: 1rem;
}
.error-page__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.error-page__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.error-page__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ==========================================================================
   БЛОК СТОРОННЕЙ СЕТИ ВНУТРИ СТАТЬИ
   Высоту не резервируем — как и у блоков РСЯ, по решению владельца. Отступы
   появляются только когда сеть что-то вставила в контейнер.
   ========================================================================== */
.lux-slot { display: flex; justify-content: center; }
.lux-slot > * { width: 100%; }
.lux-slot:not(:empty) { margin-block: clamp(1.5rem, 3vw, 2.4rem); }

/* ==========================================================================
   ПОДСКАЗКИ ПОИСКА
   ========================================================================== */
.site-header-search-wrap, .search-suggest-wrap { position: relative; }
.search-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: .35rem;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-md);
  background: #fff;
  box-shadow: 0 24px 48px -28px rgba(27, 50, 33, .45);
}
.search-suggest__item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: 12px;
  color: var(--u-ink);
  line-height: 1.35;
}
.search-suggest__item:hover, .search-suggest__item.is-active { background: var(--u-soft); }
.search-suggest__type {
  flex: 0 0 auto;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A998E;
}
.search-suggest__title { font-size: .95rem; }
.search-suggest__all {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .6rem;
  border: 0;
  border-top: 1px solid var(--u-line-soft);
  background: none;
  color: var(--u-brand-deep);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}