/*
 * НПП «Флореаль» — фирменный слой поверх темы OpenCart.
 *
 * Подключается последним, поэтому переопределяет базовые стили без правки
 * файлов ядра. Когда придёт лицензионный шаблон Frame, этот же слой ляжет
 * поверх него — переменные и компоненты те же.
 *
 * Ориентир по композиции — демо Frame: карточки со скруглением 7px,
 * светлые подложки, воздух между блоками. Цвета — наши, с логотипов.
 */

:root {
  /* Вариант А «Чистая лаборатория»: главный цвет действий — изумруд,
     синий остаётся только в логотипе. Имена --f-blue-* сохранены,
     чтобы не переименовывать токен в трёх тысячах строк: читать их
     теперь надо как «основной фирменный цвет». Тёмный оттенок берём
     на кнопки и ссылки ради контраста с белым текстом (WCAG AA). */
  --f-blue: #008A4E;
  --f-blue-dark: #00703F;
  --f-blue-light: #2FB877;
  --f-sky: #7AAFD8;
  --f-green: #8BBE2F;
  --s-crimson: #DC0057;

  /* Расширенная палитра: от лайма логотипа к глубокой хвое */
  --p-lime: #C2E85C;
  --p-green: #8CC63F;
  --p-emerald: #00A85F;
  --p-teal: #2E8B84;
  --p-deep: #17545E;
  --p-navy: #0C3A66;

  --text: #14261D;
  --text-muted: #5B6B62;
  --border: #DDEAE2;
  --surface: #EFF7F2;

  --radius: 9px;
  --radius-lg: 16px;
  --shadow: 0 2px 10px rgba(10, 92, 55, .07);
  --shadow-hover: 0 6px 22px rgba(10, 92, 55, .14);
  --container: 2000px;
}

/* ---------- Основа ---------- */

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: #fff;
}

/* Широкий контейнер: каталогу нужны колонки, а не поля по краям.
   Bootstrap задаёт .container фиксированную ширину на каждом брейкпоинте,
   поэтому перебиваем и width, и max-width. */
.container {
  width: 100%;
  max-width: min(var(--container), 95vw);
  padding-left: 28px;
  padding-right: 28px;
}

@media (max-width: 991px) {
  .container { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 767px) {
  .container { padding-left: 14px; padding-right: 14px; }
}

h1, h2, h3, h4 { color: var(--text); font-weight: 700; line-height: 1.2; }
h1 { font-size: 38px; margin-bottom: 22px; }
h2 { font-size: 29px; }
h3 { font-size: 23px; }

a { color: var(--f-blue); }
a:hover { color: var(--f-blue-light); text-decoration: none; }

/* ---------- Меню категорий ---------- */

.navbar, #menu {
  background: var(--f-blue);
  border: 0;
  border-radius: var(--radius);
  min-height: 46px;
  margin-bottom: 24px;
}
#menu .nav > li > a {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 16px;
}
#menu .nav > li > a:hover,
#menu .nav > li.open > a { background: rgba(255, 255, 255, .12); color: #fff; }
#menu .dropdown-menu { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 6px 0; }
#menu .dropdown-inner a { color: var(--text); padding: 8px 18px; }
#menu .dropdown-inner a:hover { background: var(--surface); color: var(--f-blue); }

/* ---------- Хлебные крошки ---------- */

.breadcrumb {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 14px;
  font-size: 13px;
}
.breadcrumb > li + li:before { content: "/"; color: var(--border); }
.breadcrumb a { color: var(--text-muted); }

/* ---------- Карточка товара в сетке ---------- */

.product-thumb {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  transition: box-shadow .18s, border-color .18s;
  margin-bottom: 24px;
}
.product-thumb:hover { box-shadow: var(--shadow-hover); border-color: transparent; }
.product-thumb .image { padding: 16px; }
.product-thumb .image img { margin: 0 auto; max-height: 220px; width: auto; }
.product-thumb .caption { padding: 0 18px 12px; min-height: auto; }
.product-thumb h4 { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.product-thumb h4 a { color: var(--text); }
.product-thumb h4 a:hover { color: var(--f-blue); }
.product-thumb .description { color: var(--text-muted); font-size: 13px; }
.product-thumb .price { font-size: 20px; font-weight: 700; color: var(--text); padding: 6px 0 0; }
.product-thumb .price-new { color: var(--s-crimson); }
.product-thumb .price-old { color: var(--text-muted); font-size: 14px; }

.product-thumb .button-group { background: transparent; border-top: 1px solid var(--border); }
.product-thumb .button-group button {
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px 0;
}
.product-thumb .button-group button:first-child {
  background: var(--f-blue);
  color: #fff;
  font-weight: 600;
}
.product-thumb .button-group button:first-child:hover { background: var(--f-blue-dark); }
.product-thumb .button-group button:hover { color: var(--f-blue); }

/* ---------- Боковая колонка и фильтры ---------- */

#column-left .list-group-item,
#column-right .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 11px 4px;
  color: var(--text);
  background: transparent;
}
#column-left .list-group-item:hover { color: var(--f-blue); }

#column-left .panel, #column-left .card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 20px;
}
#column-left .panel-heading, #column-left .card-header {
  background: var(--surface);
  border: 0;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
#column-left .panel-body { padding: 12px 16px; }
#column-left .checkbox { margin: 4px 0; }
#column-left .checkbox label { font-size: 14px; color: var(--text); font-weight: 400; }

/* ---------- Кнопки ---------- */

.btn {
  border-radius: var(--radius);
  font-weight: 600;
  padding: 10px 20px;
  border: 0;
  transition: background .15s;
}
.btn-primary { background: var(--f-blue); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--f-blue-dark); }
.btn-default { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-default:hover { background: #eaeef6; color: var(--f-blue); }
.btn-success { background: var(--f-green); }
.btn-success:hover { background: #7aa829; }

/* ---------- Страница товара ---------- */

.thumbnails { margin-bottom: 20px; }
.thumbnails > li img { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; }

#product .list-unstyled li { padding: 3px 0; color: var(--text-muted); font-size: 14px; }
#product .list-unstyled .price,
.product-info h2 { color: var(--text); font-size: 30px; font-weight: 700; }

.form-control {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  height: 42px;
  font-size: 15px;
}
.form-control:focus { border-color: var(--f-blue-light); box-shadow: none; }

.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs > li > a { color: var(--text-muted); border: 0; font-weight: 600; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  color: var(--f-blue);
  border: 0;
  border-bottom: 2px solid var(--f-blue);
  background: transparent;
}

/* ---------- Заголовки блоков на главной ---------- */

h3 { position: relative; margin: 32px 0 20px; }

/* ---------- Подвал ---------- */

footer {
  background: var(--f-blue-dark);
  color: rgba(255, 255, 255, .75);
  border: 0;
  margin-top: 48px;
  padding: 36px 0 24px;
}
footer h5 { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
footer a { color: rgba(255, 255, 255, .75); }
footer a:hover { color: #fff; }
footer hr { border-color: rgba(255, 255, 255, .15); }

/* ---------- Раздел «Стеверит» ---------- */

body.steverit {
  --f-blue: var(--s-crimson);
  --f-blue-dark: #B80047;
  --f-blue-light: #E8397D;
}

/* ---------- Мобильные ---------- */

@media (max-width: 767px) {
  h1 { font-size: 24px; }
  #logo { margin: 12px 0; text-align: center; }
  .product-thumb .image img { max-height: 160px; }
  .product-thumb .price { font-size: 18px; }
}

/* Страница никогда не должна ехать по горизонтали */
html, body { overflow-x: hidden; }
.fl-catalog, .fl-hero, .fl-grid { max-width: 100%; }

/* ============================================================
   Шапка — три строки одинаковой логики:
   1) служебная панель: контакты слева, инструменты справа
   2) логотип · поиск · корзина — один flex-ряд, всё по центру
   3) меню разделов
   Все элементы строки имеют одну высоту, иначе «пляшут» на пиксель.
   ============================================================ */

:root {
  --row-h: 54px;      /* высота элементов главной строки */
  --topbar-h: 40px;   /* высота элементов служебной панели */
}

/* Иконки Heroicons: 24-я сетка, поэтому обводка 1.8 и размер 20 —
   при 18px и 1.7 линии выглядели тонкими и рваными */
.fl-ico {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  flex: 0 0 22px;
  display: block;
}

/* ---------- 1. Служебная панель ---------- */

#top {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0;
  min-height: 0;
}

.fl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}

.fl-topbar-contacts,
.fl-topbar-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Единый элемент панели. Ровно одна точка, задающая высоту, отступы
   и промежуток «иконка — текст»: иначе элементы расходятся по строке. */
.fl-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--topbar-h);
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .14s, color .14s;
}
.fl-topbar-item:hover,
.fl-topbar-item:focus,
.fl-topbar-drop.open > .fl-topbar-item {
  color: var(--f-blue);
  background: rgba(0, 29, 155, .06);
  text-decoration: none;
}

.fl-topbar-phone { color: var(--text); font-weight: 700; font-size: 17px; }
.fl-topbar-phone .fl-ico { color: var(--p-emerald); }
.fl-topbar-addr { cursor: default; }
.fl-topbar-addr:hover { background: transparent; color: var(--text-muted); }
.fl-topbar-addr .fl-ico { color: var(--p-teal); }

/* Дропдаун не должен быть флекс-элементом сам по себе —
   иначе иконка и текст внутри ссылки встают в две строки */
.fl-topbar-drop { position: relative; display: inline-flex; }

/* Валюту и язык OpenCart оборачивает в .pull-left > form > .btn-group.
   Float во флексе ломает выравнивание, поэтому снимаем его и приводим
   кнопку к тому же виду, что и остальные пункты панели. */
.fl-topbar-tools .pull-left,
.fl-topbar-tools .pull-right,
.fl-topbar-tools form,
.fl-topbar-tools .btn-group {
  float: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.fl-topbar-tools .btn-group > .btn-link,
.fl-topbar-tools form > .btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--topbar-h);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}
.fl-topbar-tools .btn-group > .btn-link:hover,
.fl-topbar-tools form > .btn-link:hover {
  color: var(--f-blue);
  background: rgba(0, 29, 155, .06);
  text-decoration: none;
}


/* Содержимое выпадающих списков живёт по своим правилам */
.fl-topbar .dropdown-menu {
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  margin-top: 4px;
  padding: 6px 0;
  min-width: 190px;
}
.fl-topbar .dropdown-menu > li > a,
.fl-topbar .dropdown-menu .btn-link {
  display: block;
  width: 100%;
  height: auto;
  padding: 9px 16px;
  font-size: 14px;
  text-align: left;
  color: var(--text);
  border-radius: 0;
}
.fl-topbar .dropdown-menu > li > a:hover,
.fl-topbar .dropdown-menu .btn-link:hover { background: var(--surface); color: var(--f-blue); }

.fl-topbar .caret { margin-left: 2px; opacity: .45; }

/* ---------- 2. Логотип · поиск · корзина ---------- */

.fl-header { padding: 20px 0; }

.fl-header-row {
  display: flex;
  align-items: center;
  gap: 28px;
}

.fl-header-logo { flex: 0 0 auto; line-height: 0; }
.fl-header-logo img { height: 60px; width: auto; display: block; }
.fl-header-name { font-size: 24px; font-weight: 700; color: var(--f-blue); line-height: 1.2; }

.fl-header-search { flex: 1 1 auto; min-width: 0; }
.fl-header-search #search { margin: 0; display: flex; }
.fl-header-search #search .form-control,
.fl-header-search #search .btn {
  height: var(--row-h);
}
/* Bootstrap внутри .input-group задаёт полю width:100%; вместе с кнопкой
   это даёт переполнение — сбрасываем ширину и отдаём место флексу */
.fl-header-search #search .form-control {
  width: auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 17px;
  box-shadow: none;
  flex: 1 1 auto;
}
.fl-header-search #search .form-control:focus { border-color: var(--f-blue-light); }
/* Bootstrap держит .input-group-btn на width:1% для табличной раскладки —
   во флексе это даёт 2px и кнопка вылезает наружу */
.fl-header-search #search .input-group-btn {
  display: flex;
  flex: 0 0 auto;
  width: auto;
}
.fl-header-search #search .btn {
  background: var(--f-blue);
  color: #fff;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
}
.fl-header-search #search .btn:hover { background: var(--f-blue-dark); }

.fl-header-cart { flex: 0 0 auto; }
.fl-header-cart #cart { display: block; }
.fl-header-cart #cart > .btn {
  height: var(--row-h);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--p-emerald);
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 0 22px;
  white-space: nowrap;
}
.fl-header-cart #cart > .btn:hover,
.fl-header-cart #cart.open > .btn { background: #00904f; color: #fff; }
.fl-header-cart .dropdown-menu {
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  min-width: 320px;
  right: 0;
  left: auto;
}

/* ---------- Адаптив шапки ---------- */

@media (max-width: 991px) {
  .fl-header-row { flex-wrap: wrap; gap: 14px 16px; }
  .fl-header-logo { order: 1; }
  .fl-header-cart { order: 2; margin-left: auto; }
  .fl-header-search { order: 3; flex: 1 1 100%; }
  .fl-header-cart #cart > .btn { padding: 0 16px; }

  /* На планшете телефон, адрес, валюта, закладки и кабинет в одну строку
     не помещались: «Личный кабинет» уезжал за край и становился
     недоступен. Адрес убираем — он есть в подвале и на контактах. */
  .fl-topbar { flex-wrap: wrap; gap: 4px 10px; }
  .fl-topbar-addr { display: none; }
  .fl-topbar-item span:not(.caret) { font-size: 13.5px; }
}

@media (max-width: 767px) {
  :root { --row-h: 44px; --topbar-h: 34px; }
  .fl-header { padding: 14px 0; }
  .fl-header-logo img { height: 40px; }
  .fl-topbar { justify-content: center; gap: 2px; flex-wrap: wrap; }
  .fl-topbar-addr { display: none; }
  .fl-topbar-item span:not(.caret) { font-size: 13px; }
  .fl-topbar-tools .fl-topbar-item > span:not(.caret) { display: none; }
  .fl-topbar-item { padding: 0 9px; }
  .fl-header-cart #cart > .btn { padding: 0 14px; font-size: 13.5px; }
  .fl-header-cart #cart > .btn .fl-ico { margin: 0; }
  .fl-header-logo img { height: 38px; }
}

/* ============================================================
   ГЛАВНАЯ СТРАНИЦА
   Композиция по референсу Frame: слева меню разделов, справа
   баннер и промо-карточка, ниже — преимущества, карусели,
   плитки разделов, подбор по отрасли и призыв к действию.
   ============================================================ */

.fl-home { margin-bottom: 40px; }

/* ---------- Экран: меню + баннер ---------- */

.fl-top {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.fl-side {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  align-self: start;
}
.fl-side-head {
  background: var(--f-blue);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding: 16px 20px;
}
.fl-side-list { display: block; }
.fl-side-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none;
  border-bottom: 1px solid var(--surface);
  transition: background .13s, color .13s;
}
.fl-side-item:last-child { border-bottom: 0; }
.fl-side-item:hover { background: var(--surface); color: var(--f-blue); text-decoration: none; }
.fl-side-ico {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(140deg, rgba(140,198,63,.15), rgba(46,139,132,.15));
  color: var(--p-deep);
}
.fl-side-ico .fl-ico { width: 21px; height: 21px; }
.fl-side-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fl-side-count { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.fl-side-arrow { width: 14px; height: 14px; color: var(--border); flex: 0 0 14px; }
.fl-side-item:hover .fl-side-arrow { color: var(--f-blue-light); }

.fl-hero-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
}

/* Карусель предложений.
   Фон каждого слайда нарисован градиентом и мягкими пятнами —
   стоковые «абстракции» тут не нужны, а фото товара даёт предметность. */

.fl-slider { position: relative; height: 100%; }
.fl-slides { position: relative; height: 100%; min-height: 420px; }

.fl-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 48px 52px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease;
}
.fl-slide.is-active { opacity: 1; visibility: visible; }

.slide-a { background: linear-gradient(120deg, #EEF6E4 0%, #E4F1F0 55%, #E6ECF8 100%); }
.slide-b { background: linear-gradient(120deg, #E7F0FC 0%, #E9F3F1 60%, #F1F6E6 100%); }
.slide-c { background: linear-gradient(120deg, #E4F1F0 0%, #E9EEF9 55%, #EDF7E6 100%); }

/* Мягкие пятна поверх градиента — глубина без картинок */
.fl-slide::before,
.fl-slide::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.fl-slide::before {
  width: 420px; height: 420px;
  right: -90px; top: -160px;
  background: radial-gradient(circle at 35% 35%, rgba(140, 198, 63, .28), rgba(140, 198, 63, 0) 68%);
}
.fl-slide::after {
  width: 380px; height: 380px;
  left: 38%; bottom: -190px;
  background: radial-gradient(circle at 50% 50%, rgba(0, 29, 155, .16), rgba(0, 29, 155, 0) 70%);
}

.fl-slide-text { flex: 1 1 auto; max-width: 58%; position: relative; z-index: 1; }
.fl-slide-title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--text);
}
.fl-slide-title span { color: var(--p-emerald); display: block; }
.fl-slide-lead {
  font-size: 19px;
  line-height: 1.5;
  color: #3C4A55;
  margin-bottom: 28px;
  max-width: 540px;
}
.fl-slide-img {
  flex: 0 0 34%;
  align-self: center;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.fl-slide-img img {
  max-height: 340px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(12, 58, 102, .18));
}

/* Переключатель слайдов держим у правого края: слева под ним стоит
   кнопка слайда, и две интерактивные вещи в одном углу спорили друг
   с другом */
.fl-dots {
  position: absolute;
  right: 52px;
  bottom: 26px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.fl-dot {
  width: 34px; height: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(12, 58, 102, .22);
  cursor: pointer;
  transition: background .2s, width .2s;
}
.fl-dot.is-active { background: var(--p-emerald); width: 48px; }

/* Промо-карточка */
.fl-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 26px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .16s, transform .16s;
}
.fl-promo:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); text-decoration: none; color: var(--text); }
.fl-promo img { max-width: 150px; height: auto; margin-bottom: 10px; }
.fl-promo-title { font-size: 18px; font-weight: 700; }
.fl-promo-lead { font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.fl-promo-price { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--s-crimson); }

/* ---------- Кнопки главной ---------- */

.fl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 30px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.fl-btn-accent { background: var(--p-emerald); color: #fff; }
.fl-btn-accent:hover { background: #00904f; color: #fff; text-decoration: none; }
.fl-btn-primary { background: var(--f-blue); color: #fff; }
.fl-btn-primary:hover { background: var(--f-blue-dark); color: #fff; text-decoration: none; }
.fl-btn-ghost { background: #fff; color: var(--f-blue); border: 1px solid var(--border); }
.fl-btn-ghost:hover { border-color: var(--f-blue); color: var(--f-blue); text-decoration: none; }

/* ---------- Преимущества ---------- */

.fl-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.fl-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius-lg);
}
.fl-benefit-ico {
  flex: 0 0 54px;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: #fff;
}
.fl-benefit-ico .fl-ico { width: 28px; height: 28px; }
.fl-benefit-title { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.fl-benefit-text { font-size: 15.5px; line-height: 1.45; color: #4A5560; }

.tone-blue  { background: #EAF0FB; }
.tone-blue  .fl-benefit-ico { color: var(--f-blue); }
.tone-green { background: #EEF7E3; }
.tone-green .fl-benefit-ico { color: #5E8F1E; }
.tone-teal  { background: #E5F2F0; }
.tone-teal  .fl-benefit-ico { color: var(--p-deep); }

/* ---------- Блоки с заголовком ---------- */

.fl-block { margin-bottom: 32px; }

.fl-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--border);
  border-bottom: 0;
}
.fl-block-head h3 { margin: 0; font-size: 22px; font-weight: 700; }
.fl-block-head .fl-ico { width: 26px; height: 26px; }
.fl-block-note {
  margin-left: auto;
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 400;
}
.fl-block-head.tone-orange { background: #FFF4E5; }
.fl-block-head.tone-orange .fl-ico { color: #E08600; }
.fl-block-head.tone-green  { background: #EEF7E3; }
.fl-block-head.tone-green  .fl-ico { color: #5E8F1E; }
.fl-block-head.tone-blue   { background: #EAF0FB; }
.fl-block-head.tone-blue   .fl-ico { color: var(--f-blue); }

/* ---------- Карусель товаров ---------- */

.fl-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  scroll-snap-type: x proximity;
}
.fl-row::-webkit-scrollbar { height: 6px; }
.fl-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.fl-card {
  display: flex;
  flex-direction: column;
  padding: 18px 16px;
  border-right: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  scroll-snap-align: start;
  transition: box-shadow .16s;
}
.fl-card:last-child { border-right: 0; }
.fl-card:hover { box-shadow: var(--shadow-hover); text-decoration: none; color: var(--text); }
.fl-card-img {
  display: grid;
  place-items: center;
  height: 200px;
  margin-bottom: 14px;
}
.fl-card-img img { max-height: 200px; max-width: 100%; width: auto; object-fit: contain; }
.fl-card-name {
  font-size: 15.5px;
  line-height: 1.35;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fl-card-price { font-size: 22px; font-weight: 700; margin-top: auto; }
.fl-card-btn {
  margin-top: 10px;
  text-align: center;
  padding: 8px 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--f-blue);
  font-size: 13.5px;
  font-weight: 600;
}
.fl-card:hover .fl-card-btn { background: var(--f-blue); color: #fff; }

/* ---------- Плитки разделов с фото ---------- */

.fl-cats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.fl-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 20px 14px;
  border-right: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background .15s;
}
.fl-cat:last-child { border-right: 0; }
.fl-cat:hover { background: var(--surface); color: var(--f-blue); text-decoration: none; }
.fl-cat-img { display: grid; place-items: center; height: 130px; }
.fl-cat-img img { max-height: 130px; max-width: 100%; object-fit: contain; }
.fl-cat-name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.fl-cat-count { font-size: 14px; color: var(--text-muted); }

/* ---------- Нумерованные плитки ---------- */

.fl-nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.fl-num {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--f-blue);
  color: #fff;
  min-height: 150px;
}
.fl-num:nth-child(2) { background: #0C3A80; }
.fl-num:nth-child(3) { background: var(--p-deep); }
.fl-num:nth-child(4) { background: var(--p-emerald); }
.fl-num-n {
  font-size: 15px;
  font-weight: 700;
  opacity: .55;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.fl-num-title { font-size: 19px; font-weight: 700; line-height: 1.2; }
.fl-num-text { font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,.8); }
.fl-num { position: relative; overflow: hidden; }
.fl-num-ico {
  position: absolute;
  right: -14px;
  bottom: -18px;
  opacity: .18;
  pointer-events: none;
}
.fl-num-ico .fl-ico { width: 104px; height: 104px; stroke-width: 1.1; }

/* ---------- Подбор по отрасли: фото-плитки ---------- */

.fl-inds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.fl-ind {
  position: relative;
  display: block;
  height: 190px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.fl-ind-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}
.fl-ind::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 26, 66, .88) 0%, rgba(6, 26, 66, .35) 55%, rgba(6, 26, 66, .1) 100%);
}
.fl-ind:hover { color: #fff; text-decoration: none; }
.fl-ind:hover .fl-ind-photo { transform: scale(1.06); }
.fl-ind-body {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fl-ind-name { font-size: 17.5px; font-weight: 700; line-height: 1.2; }
.fl-ind-count { font-size: 14px; color: rgba(255, 255, 255, .8); }

/* ---------- Призыв к действию ---------- */

.fl-cta {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fl-cta-photo { background-size: cover; background-position: center; min-height: 340px; }
.fl-cta-body {
  padding: 40px 44px;
  background: var(--f-blue);
  color: #fff;
}
.fl-cta h3 { margin: 0 0 12px; font-size: 32px; font-weight: 800; color: #fff; }
.fl-cta p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.fl-cta-form { display: grid; gap: 10px; max-width: 460px; }
.fl-cta-input {
  height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 16px;
}
.fl-cta-input::placeholder { color: rgba(255, 255, 255, .6); }
.fl-cta-input:focus { outline: 0; border-color: #fff; background: rgba(255, 255, 255, .16); }
.fl-cta-submit { justify-content: center; width: 100%; }
.fl-cta-note { margin-top: 16px; font-size: 15px; color: rgba(255, 255, 255, .75); }
.fl-cta-note a { color: #fff; font-weight: 600; }

/* ---------- Адаптив главной ---------- */

@media (max-width: 1399px) {
  .fl-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fl-cat:nth-child(3n) { border-right: 0; }
  .fl-cat:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 1199px) {
  .fl-top { grid-template-columns: 250px minmax(0, 1fr); }
  .fl-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-hero-wrap { grid-template-columns: minmax(0, 1fr); }
  .fl-promo { flex-direction: row; justify-content: flex-start; text-align: left; gap: 18px; }
  .fl-promo img { margin-bottom: 0; max-width: 110px; }
  .fl-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-cta { grid-template-columns: minmax(0, 1fr); }
  .fl-cta-photo { min-height: 220px; }
}

@media (max-width: 991px) {
  .fl-top { grid-template-columns: minmax(0, 1fr); }
  .fl-side-list { max-height: none; display: grid; grid-template-columns: 1fr 1fr; }
  .fl-side-item { border-right: 1px solid var(--surface); }
  .fl-benefits { grid-template-columns: minmax(0, 1fr); }
  .fl-banner { min-height: 0; padding: 28px; }
  .fl-banner-title { font-size: 27px; }
}

@media (max-width: 767px) {
  .fl-side-list { grid-template-columns: 1fr; }
  .fl-banner { flex-direction: column; align-items: flex-start; text-align: left; padding: 22px; }
  .fl-banner-text { max-width: 100%; }
  .fl-banner-title { font-size: 23px; }
  .fl-banner-img { align-self: center; }
  .fl-banner-img img { max-height: 200px; }
  .fl-cats { grid-template-columns: 1fr 1fr; }
  .fl-cat:nth-child(3n) { border-right: 1px solid var(--border); }
  .fl-cat:nth-child(2n) { border-right: 0; }
  .fl-inds { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .fl-ind { height: 150px; }
  .fl-nums { grid-template-columns: minmax(0, 1fr); }
  .fl-cta-body { padding: 26px 20px; }
  .fl-cta { padding: 28px 18px; }
  .fl-cta h3 { font-size: 21px; }
  .fl-block-note { display: none; }
}

/* ---------- Кнопка покупки в карточке ---------- */

.fl-card-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 10px;
  border: 0;
  border-radius: var(--radius);
  background: var(--p-emerald);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.fl-card-buy:hover,
.fl-card-buy:focus { background: #00904f; color: #fff; text-decoration: none; }
.fl-card-buy .fl-ico { width: 20px; height: 20px; }

/* Товар с фасовками: ведём выбирать объём, а не сразу в корзину */
.fl-card-buy-alt {
  background: var(--surface);
  color: var(--f-blue);
  border: 1px solid var(--border);
}
.fl-card-buy-alt:hover { background: var(--f-blue); color: #fff; border-color: var(--f-blue); }

/* Карточка стала блоком со ссылками внутри — правим наследие от <a> */
.fl-card-name { display: -webkit-box; color: var(--text); text-decoration: none; }
.fl-card-name:hover { color: var(--f-blue); text-decoration: none; }
.fl-card-img { text-decoration: none; }

@media (max-width: 767px) {
  .fl-quick { gap: 5px; }
  .fl-quick-item { padding: 8px 13px; font-size: 14px; }
  .fl-quick-item .fl-ico { width: 18px; height: 18px; }
}

/* Баннер не должен тянуться под высоту бокового меню */
/* Карусель и промо тянутся по высоте бокового меню — иначе на широком
   экране под баннером оставалась пустая полоса */
.fl-hero-wrap { align-self: stretch; align-items: stretch; }
.fl-top { align-items: stretch; }
.fl-promo { height: 100%; }

.fl-side-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  color: var(--f-blue);
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
}
.fl-side-more:hover { background: #E9EEF8; color: var(--f-blue-dark); text-decoration: none; }
.fl-side-more .fl-ico { color: currentColor; }

@media (max-width: 991px) {
  .fl-slides { min-height: 0; }
  .fl-slide { position: relative; opacity: 1; visibility: visible; display: none; padding: 28px; }
  .fl-slide.is-active { display: flex; }
  .fl-slide-title { font-size: 27px; }
  .fl-dots { right: 28px; bottom: 16px; }
}

@media (max-width: 767px) {
  .fl-slide { flex-direction: column; align-items: flex-start; padding: 22px 20px 44px; }
  .fl-slide-text { max-width: 100%; }
  .fl-slide-title { font-size: 23px; }
  .fl-slide-img { align-self: center; }
  .fl-slide-img img { max-height: 190px; }
  .fl-dots { right: 20px; bottom: 14px; }
  .fl-num-ico .fl-ico { width: 78px; height: 78px; }
}

/* ============================================================
   Каталог: страница категории

   Сетка страницы своя, а не bootstrap-колонки: подбор фиксированной
   ширины, товары — авто-сетка. На широком мониторе в ряд встаёт
   столько карточек, сколько влезает, без правки классов в шаблоне.
   ============================================================ */

.fl-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 40px;
}
.fl-layout.is-wide { grid-template-columns: minmax(0, 1fr); }
.fl-layout #content { min-width: 0; }

/* ---------- Заголовок категории ---------- */

.fl-cat-head { margin-bottom: 20px; }
.fl-cat-head h1 { margin: 0 0 10px; font-size: 34px; }
.fl-cat-desc {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 90ch;
}

/* Раздел со своей картинкой: текст слева, знак сразу за ним.

   Растягивать текст на всю ширину нельзя — строка длиннее 90 знаков
   читается тяжело. Но и прижимать знак к правому краю нельзя: на
   двухтысячном экране между текстом и знаком зияла пустая половина
   страницы, и они переставали читаться как один блок.

   Поэтому колонки заданы пределами, а не долями: текст занимает свои
   90 знаков, знак встаёт вплотную за ним, а свободная ширина уходит
   вправо от пары — туда, где ничего и не должно быть. */
.fl-cat-head.has-photo {
  display: grid;
  grid-template-columns: minmax(0, 90ch) minmax(0, 300px);
  justify-content: start;
  gap: 32px;
  align-items: start;
}
.fl-cat-photo {
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
}
.fl-cat-photo img { max-width: 100%; height: auto; }

/* Широкий экран: текст раскладывается колонками, а не тянется одной
   строкой в сто с лишним знаков. Иначе на двухтысячном мониторе шапка
   раздела занимала треть ширины, а остальное оставалось пустым — при
   том, что сетка товаров под ней идёт во всю ширину.

   Колонки заданы шириной, а не числом: сколько колонок по 38 знаков
   поместится, столько браузер и сделает. Абзац целиком остаётся в
   своей колонке — разрывать его посередине хуже, чем оставить внизу
   немного воздуха. */
@media (min-width: 1200px) {
  .fl-cat-head.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }

  .fl-cat-head.has-photo .fl-cat-desc {
    max-width: none;
    columns: 38ch;
    column-gap: 44px;
  }

  .fl-cat-head.has-photo .fl-cat-desc p { break-inside: avoid; margin-top: 0; }
}

/* ---------- Подкатегории ---------- */

.fl-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.fl-subcat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .14s, background .14s, color .14s;
}
.fl-subcat:hover {
  border-color: var(--f-blue);
  background: rgba(0, 29, 155, .05);
  color: var(--f-blue);
  text-decoration: none;
}
.fl-subcat-arrow { width: 15px; height: 15px; flex: 0 0 15px; color: var(--text-muted); }
.fl-subcat:hover .fl-subcat-arrow { color: var(--f-blue); }

/* ---------- Панель управления выдачей ---------- */

.fl-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: var(--surface);
  border-radius: var(--radius-lg);
}
.fl-toolbar-results { color: var(--text-muted); font-size: 14.5px; margin-right: auto; }
.fl-toolbar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.fl-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}
.fl-select select {
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-size: 14.5px;
}
.fl-select select:focus { outline: 0; border-color: var(--f-blue-light); }

.fl-view { display: inline-flex; gap: 4px; }
.fl-view-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
}
.fl-view-btn:hover { color: var(--f-blue); }
.fl-view-btn.is-active { background: var(--f-blue); border-color: var(--f-blue); color: #fff; }

/* Кнопка подбора нужна только там, где колонка уехала в шторку */
.fl-toolbar-filters {
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--f-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Сетка товаров ---------- */

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

.fl-good {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 16px;
  transition: box-shadow .16s, border-color .16s;
}
.fl-good:hover { box-shadow: var(--shadow-hover); border-color: transparent; }

.fl-good-img {
  display: grid;
  place-items: center;
  height: 200px;
  margin-bottom: 14px;
  text-decoration: none;
}
.fl-good-img img { max-height: 200px; max-width: 100%; width: auto; object-fit: contain; }

.fl-good-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.fl-good-model {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.fl-good-name {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.fl-good-name:hover { color: var(--f-blue); text-decoration: none; }

/* Фасовки: покупатель должен видеть объёмы, не открывая карточку */
.fl-good-packs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.fl-pack {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* В сетке описание только мешает — показываем его в режиме списка */
.fl-good-desc { display: none; }

.fl-good-foot { margin-top: auto; }
.fl-good-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 22px;
  font-weight: 700;
  padding-top: 6px;
}
.fl-good-from { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.fl-price-new { color: var(--s-crimson); }
.fl-price-old { font-size: 15px; font-weight: 600; color: var(--text-muted); text-decoration: line-through; }

/* ---------- Режим списка ---------- */

.fl-goods.is-list { grid-template-columns: minmax(0, 1fr); }
.fl-goods.is-list .fl-good {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.fl-goods.is-list .fl-good-img { height: 160px; margin: 0; }
.fl-goods.is-list .fl-good-img img { max-height: 160px; }
.fl-goods.is-list .fl-good-name { font-size: 19px; -webkit-line-clamp: 2; }
.fl-goods.is-list .fl-good-desc {
  display: block;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 12px;
  max-width: 80ch;
}
.fl-goods.is-list .fl-good-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.fl-goods.is-list .fl-card-buy { width: auto; min-width: 220px; margin-top: 0; }

/* ---------- Постраничная навигация ---------- */

.fl-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.fl-pager .pagination { margin: 0; }
.fl-pager .pagination > li > a,
.fl-pager .pagination > li > span {
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  margin-right: 4px;
  border-radius: var(--radius);
}
.fl-pager .pagination > .active > span,
.fl-pager .pagination > .active > span:hover {
  background: var(--f-blue);
  border-color: var(--f-blue);
  color: #fff;
}
.fl-pager-results { color: var(--text-muted); font-size: 14.5px; }

/* ============================================================
   Подбор по фильтрам
   ============================================================ */

.fl-aside { position: relative; }
.fl-aside-bar { display: none; }

/* Список разделов в колонке — тот же вид, что и на главной */
.fl-aside #column-left { padding: 0; }
.fl-aside .list-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}
.fl-aside .list-group-item {
  display: block;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 11px 16px;
  font-size: 15px;
  color: var(--text);
  background: #fff;
}
.fl-aside .list-group-item:last-child { border-bottom: 0; }
.fl-aside .list-group-item:hover { background: var(--surface); color: var(--f-blue); }
.fl-aside .list-group-item.active,
.fl-aside .list-group-item.active:hover {
  background: rgba(0, 29, 155, .06);
  color: var(--f-blue);
  font-weight: 600;
}

.fl-filter {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  transition: opacity .15s;
}
.fl-filter.is-busy { opacity: .5; pointer-events: none; }

.fl-filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  font-weight: 700;
  font-size: 16px;
}
.fl-filter-reset { font-size: 13.5px; font-weight: 600; color: var(--s-crimson); }
.fl-filter-reset:hover { color: #B80047; }

.fl-filter-group { padding: 14px 16px; border-top: 1px solid var(--border); }
.fl-filter-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.fl-filter-list { display: flex; flex-direction: column; gap: 2px; }

.fl-filter-item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--radius);
  font-weight: 400;
  font-size: 15px;
  cursor: pointer;
  transition: background .12s;
}
.fl-filter-item:hover { background: var(--surface); }
.fl-filter-item input { margin: 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--f-blue); }
.fl-filter-name { flex: 1 1 auto; line-height: 1.3; }
.fl-filter-count { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.fl-filter-item input:checked ~ .fl-filter-name { font-weight: 600; color: var(--f-blue); }

/* Кнопка нужна только в шторке: на десктопе отметка применяется сразу */
.fl-filter-foot { display: none; }
/* Нижняя панель шторки — только на телефоне и планшете */
.fl-aside-apply { display: none; }

/* ---------- Планшет и телефон: подбор уезжает в шторку ---------- */

@media (max-width: 991px) {
  .fl-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fl-toolbar-filters { display: inline-flex; }
  .fl-cat-head h1 { font-size: 27px; }

  /* На телефоне знак уезжает под текст и занимает не больше трети экрана:
     первый экран раздела должен показывать товары, а не логотип */
  .fl-cat-head.has-photo { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fl-cat-photo { padding: 16px; }
  .fl-cat-photo img { max-width: 220px; }

  .fl-aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: min(360px, 88vw);
    background: #fff;
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    transform: translateX(-102%);
    transition: transform .22s ease;
  }
  body.fl-aside-open { overflow: hidden; }
  body.fl-aside-open .fl-aside { transform: translateX(0); }

  /* Затемнение под шторкой, чтобы промах по краю закрывал её */
  body.fl-aside-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .4);
  }

  .fl-aside-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -16px 14px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    font-size: 17px;
    font-weight: 700;
  }
  .fl-aside-close {
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    color: var(--text-muted);
    padding: 0 4px;
    cursor: pointer;
  }

  /* Шторка — колонка: шапка сверху, список прокручивается, кнопка
     «Показать» всегда у нижнего края. Фильтров два десятка, и кнопка
     в конце списка требовала прокрутить его целиком. */
  .fl-aside { display: flex; flex-direction: column; padding: 0 16px; overflow: hidden; }
  .fl-aside-apply { display: block; }
  .fl-aside-body { flex: 1 1 auto; overflow-y: auto; padding-bottom: 16px; }
  .fl-aside-apply {
    flex: 0 0 auto;
    margin: 0 -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .06);
  }
  .fl-aside-apply .fl-btn { width: 100%; justify-content: center; }

  /* В шторке первым идёт то, ради чего её открыли: сначала фильтры,
     потом разделы. Баннер там ни к чему — это не витрина. */
  .fl-aside #column-left { display: flex; flex-direction: column; }
  .fl-aside .fl-filter { order: -1; margin-bottom: 20px; }
  /* Заголовок панели повторял бы шапку шторки — оставляем только сброс */
  .fl-aside .fl-filter-head {
    background: transparent;
    padding: 10px 16px 0;
    justify-content: flex-end;
  }
  .fl-aside .fl-filter-head > span { display: none; }
  .fl-aside .swiper-viewport,
  .fl-aside .fl-aside-banner { display: none; }

  /* Подкатегории лентой: восемь плиток в столбик съедали пол-экрана */
  .fl-subcats {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -14px 18px;
    padding: 0 14px 4px;
    scrollbar-width: none;
  }
  .fl-subcats::-webkit-scrollbar { display: none; }
  .fl-subcat { flex: 0 0 auto; }
}

@media (max-width: 767px) {
  /* Две колонки на телефоне: одна превращала каталог из 13 позиций
     в бесконечную ленту. 150px — минимум, при котором две влезают в 360 */
  .fl-goods { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .fl-pack { font-size: 11.5px; padding: 2px 7px; }
  .fl-good-model { font-size: 11.5px; }
  .fl-good { padding: 12px; }
  .fl-good-img { height: 140px; }
  .fl-good-img img { max-height: 140px; }
  .fl-good-name { font-size: 14.5px; }
  .fl-good-price { font-size: 19px; }
  /* В узкой колонке иконка отбирает у подписи строку — убираем её */
  .fl-card-buy { font-size: 14px; padding: 10px 8px; }
  .fl-goods .fl-card-buy .fl-ico { display: none; }

  .fl-goods.is-list .fl-good { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fl-goods.is-list .fl-card-buy { width: 100%; min-width: 0; }

  .fl-toolbar { padding: 10px 12px; }
  .fl-toolbar-results { width: 100%; order: 3; }
  .fl-select span { display: none; }
}

/* Фирменный рендер в слайде: фон у него свой, поэтому без тени
   и во всю высоту — иначе получается «картинка в картинке» */
.fl-slide-img.is-render { flex-basis: 40%; align-self: stretch; }
.fl-slide-img.is-render img {
  max-height: none;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  mix-blend-mode: multiply;
}
@media (max-width: 767px) {
  .fl-slide-img.is-render { align-self: center; }
  .fl-slide-img.is-render img { height: auto; max-height: 260px; }
}

/* ============================================================
   Правки главной по замечаниям дизайнера

   Кнопки одного цвета, каталог в шапке, первый экран ниже,
   преимущества без цветных подложек, блок о компании.
   ============================================================ */

/* ---------- Одна кнопка — один цвет ----------
   Было три: зелёная «запросить прайс», синяя «в корзину», голубая
   «выбрать фасовку». Оставляем фирменный синий на все действия,
   вторая по важности кнопка — светлая с рамкой. */

.fl-btn-accent { background: var(--f-blue); color: #fff; }
.fl-btn-accent:hover { background: var(--f-blue-dark); color: #fff; }

.fl-card-buy { background: var(--f-blue); }
.fl-card-buy:hover,
.fl-card-buy:focus { background: var(--f-blue-dark); }

/* Вторая по важности кнопка — светлая с рамкой. Переобъявляем после
   основной: иначе синий фон перекрывает её и текст пропадает. */
.fl-card-buy-alt { background: var(--surface); color: var(--f-blue); border: 1px solid var(--border); }
.fl-card-buy-alt:hover,
.fl-card-buy-alt:focus { background: var(--f-blue); color: #fff; border-color: var(--f-blue); }

.fl-header-cart #cart > .btn { background: var(--f-blue); }
.fl-header-cart #cart > .btn:hover,
.fl-header-cart #cart.open > .btn { background: var(--f-blue-dark); }

/* ---------- Каталог в шапке ---------- */

.fl-header-catalog { position: relative; flex: 0 0 auto; }

.fl-catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--row-h);
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--f-blue);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.fl-catalog-btn:hover,
.fl-header-catalog.is-open .fl-catalog-btn { background: var(--f-blue-dark); }

.fl-catalog-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: max-content;
  max-width: min(760px, 90vw);
  columns: 2;
  column-gap: 0;
  padding: 10px 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
}
.fl-header-catalog.is-open .fl-catalog-drop { display: block; }

.fl-catalog-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  break-inside: avoid;
  padding: 9px 20px;
  color: var(--text);
  font-size: 16px;
  text-decoration: none;
}
.fl-catalog-item:hover { background: var(--surface); color: var(--f-blue); text-decoration: none; }
.fl-catalog-name { min-width: 0; }
.fl-catalog-count { font-size: 14px; font-weight: 600; color: var(--text-muted); }

/* ---------- Первый экран без боковой колонки ----------
   Каталог уехал в шапку, поэтому баннер занимает всю ширину,
   а высоту больше не диктует список из двенадцати разделов. */

.fl-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fl-hero-wrap { grid-template-columns: minmax(0, 1fr) 300px; }
.fl-slides { min-height: 340px; }
.fl-slide { padding: 34px 40px; }
.fl-slide-title { font-size: 40px; }
.fl-slide-img img { max-height: 260px; }
.fl-promo { padding: 22px 20px; }

/* ---------- Преимущества: шире и без подложек ----------
   Три цветные плашки конкурировали с товарными блоками.
   Оставляем воздух, иконку и тонкую линию сверху. */

.fl-benefits {
  gap: 0;
  margin: 8px 0 36px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fl-benefit {
  padding: 26px 28px;
  border-radius: 0;
  border-left: 1px solid var(--border);
}
.fl-benefit:first-child { border-left: 0; padding-left: 0; }
.fl-benefit:last-child { padding-right: 0; }
.fl-benefit-ico { background: var(--surface); }
.tone-blue, .tone-green, .tone-teal { background: transparent; }

/* ---------- Заголовки блоков без цветных подложек ---------- */

.fl-block-head {
  background: #fff;
  padding: 14px 18px;
}
.fl-block-head .fl-ico { color: var(--f-blue); }

/* Стрелки карусели в заголовке блока */
.fl-block-nav { display: inline-flex; gap: 6px; margin-left: 14px; }
.fl-nav-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.fl-nav-btn:hover { background: var(--f-blue); border-color: var(--f-blue); color: #fff; }
.fl-nav-btn[disabled] { opacity: .35; cursor: default; }
.fl-nav-btn[disabled]:hover { background: #fff; border-color: var(--border); color: var(--text-muted); }
.fl-nav-back { transform: rotate(180deg); }
.fl-block-nav + .fl-block-note { margin-left: 14px; }
.fl-block-head .fl-block-note { margin-left: auto; }
.fl-block-head .fl-block-nav { margin-left: 14px; order: 3; }

/* Лента товаров прокручивается стрелками — полосу прокрутки прячем */
.fl-row { scrollbar-width: none; scroll-behavior: smooth; }
.fl-row::-webkit-scrollbar { display: none; }

/* ---------- О компании ---------- */

.fl-about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  margin-bottom: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fl-about-text { padding: 34px 38px; }
.fl-about-text h3 { margin: 0 0 14px; font-size: 28px; }
.fl-about-text p {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #4A5560;
  max-width: 62ch;
}
.fl-about-photo {
  background-size: cover;
  background-position: center;
  min-height: 320px;
}

/* Видео с производства: занимает ту же половину блока, что раньше фото */
.fl-about-video { min-height: 320px; background: #0B1020; }
.fl-about-video video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  background: #0B1020;
}

.fl-about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.fl-about-vk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--f-blue);
  text-decoration: none;
}
.fl-about-vk:hover { text-decoration: underline; }

.fl-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 26px;
}
.fl-fact { display: flex; flex-direction: column; gap: 2px; }
.fl-fact-value { font-size: 26px; font-weight: 800; color: var(--f-blue); line-height: 1.1; }
.fl-fact-label { font-size: 14px; line-height: 1.35; color: var(--text-muted); }

/* ---------- Планшет и телефон ---------- */

@media (max-width: 991px) {
  .fl-header-catalog { order: 2; }
  .fl-catalog-btn { padding: 0 16px; font-size: 15px; }
  .fl-catalog-drop { columns: 1; max-width: min(420px, 92vw); }

  .fl-hero-wrap { grid-template-columns: minmax(0, 1fr); }
  .fl-slide-title { font-size: 30px; }

  .fl-benefits { grid-template-columns: minmax(0, 1fr); }
  .fl-benefit { border-left: 0; border-top: 1px solid var(--border); padding: 20px 0; }
  .fl-benefit:first-child { border-top: 0; }

  .fl-about { grid-template-columns: minmax(0, 1fr); }
  .fl-about-photo { min-height: 220px; order: -1; }
  /* Видео идёт первым: с телефона его смотрят охотнее, чем читают текст */
  .fl-about-video { min-height: 0; order: -1; }
  .fl-about-video video { max-height: 56vw; }
  .fl-about-text { padding: 26px 22px; }
  .fl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* Стрелки не нужны: ленту листают пальцем */
  .fl-block-nav { display: none; }
  .fl-about-text h3 { font-size: 23px; }
  .fl-fact-value { font-size: 22px; }

  /* Шапка в две строки: логотип и корзина сверху, каталог и поиск снизу.
     Втроём в строку они не помещаются даже на 390 px. */
  .fl-header-row { flex-wrap: wrap; gap: 10px; }
  .fl-header-logo { flex: 1 1 auto; }
  .fl-header-cart { flex: 0 0 auto; order: 2; }
  .fl-header-catalog { flex: 0 0 auto; order: 3; }
  .fl-header-search { flex: 1 1 180px; order: 4; }
  .fl-catalog-btn { height: 46px; padding: 0 14px; }
  .fl-header-cart #cart > .btn { height: 46px; padding: 0 14px; }

  /* Промо возвращается в столбик: в строку четыре блока не помещались
     и цена вылезала за карточку */
  .fl-promo { flex-direction: column; text-align: center; gap: 6px; }
  .fl-promo img { max-width: 120px; margin-bottom: 6px; }
}

/* На синей плашке та же кнопка выворачивается: синее на синем не читается */
.fl-cta-body .fl-btn-primary { background: #fff; color: var(--f-blue); }
.fl-cta-body .fl-btn-primary:hover { background: #EAEEF8; color: var(--f-blue-dark); }

/* ============================================================
   Гигиенический план отрасли

   Фирменная таблица заказчика: участок, периодичность, технология,
   препарат, концентрация, температура. Технолог читает её как
   инструкцию, поэтому строки крупные, а препарат выделен цветом.
   ============================================================ */

.fl-plan { margin-bottom: 32px; }
.fl-plan-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 80ch;
  margin-bottom: 20px;
}

/* Таблица широкая: на узком экране скроллится сама, страница — нет */
.fl-plan-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.fl-plan-table { width: 100%; border-collapse: collapse; min-width: 900px; background: #fff; }
.fl-plan-table th {
  background: var(--surface);
  padding: 13px 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.fl-plan-table td {
  padding: 13px 14px;
  font-size: 15px;
  line-height: 1.45;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  vertical-align: top;
}
.fl-plan-table td:first-child { border-left: 0; font-weight: 600; }
.fl-plan-table tr:last-child td { border-bottom: 0; }
/* Синим и жирным — только те препараты, у которых есть карточка. Средства
   из планов, которых нет в каталоге, остаются обычным текстом: подчёркнутая
   ссылка в никуда хуже, чем её отсутствие */
.fl-plan-drug { font-weight: 600; }
.fl-plan-drug a { color: var(--f-blue); font-weight: 700; }
.fl-plan-drug a:hover { text-decoration: underline; }

.fl-plan-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--f-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.fl-plan-cta { margin: 22px 0 0; }
.fl-plan-note {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .fl-plan-lead { font-size: 15.5px; }
  .fl-plan-table td { font-size: 14px; padding: 10px 11px; }
}

.fl-plan-subhead { margin: 30px 0 14px; font-size: 22px; }

/* ============================================================
   Карточка товара

   Три колонки: фотография, характеристики, панель заказа. Средняя
   исчезает у товаров без характеристик — их 48 из 83, и держать под
   них пустой столбец нельзя. Панель заказа справа и липкая: список
   фасовок длинный, а кнопка должна оставаться на виду.
   ============================================================ */

.fl-prod-head { margin-bottom: 22px; }
.fl-prod-head h1 { margin-bottom: 10px; max-width: 40ch; }

.fl-prod-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 14.5px;
  color: var(--text-muted);
}
.fl-prod-model { font-weight: 600; color: var(--text); }
.fl-prod-stock { color: var(--p-emerald); font-weight: 600; }
/* Кнопка «Скопировать ссылку»: в строке из текстовых меток кнопка с
   рамкой смотрелась бы чужой, поэтому подчёркивание пунктиром */
.fl-prod-copy {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-muted);
  border-bottom: 1px dashed currentColor;
  cursor: pointer;
}
.fl-prod-copy:hover { color: var(--p-emerald); }
.fl-prod-copy.is-done { color: var(--p-emerald); border-bottom-color: transparent; }
/* Разделяем метки только отступом: точка-разделитель на узком экране
   переносится вместе со строкой и висит в начале сама по себе */

.fl-prod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 0;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 36px;
}
.fl-prod.has-specs {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 400px);
}

/* ---------- Фотография ---------- */

.fl-prod-gallery { padding: 26px; }
.fl-prod-photo {
  display: grid;
  place-items: center;
  min-height: 380px;
  background: #fff;
}
.fl-prod-photo img { max-width: 100%; max-height: 460px; width: auto; object-fit: contain; }

.fl-prod-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fl-prod-thumb {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.fl-prod-thumb.is-active { border-color: var(--f-blue); }
.fl-prod-thumb img { max-width: 100%; max-height: 100%; width: auto; }

/* ---------- Характеристики ---------- */

.fl-prod-specs {
  padding: 26px;
  border-left: 1px solid var(--border);
  align-self: stretch;
}
.fl-prod-specs h2 { font-size: 21px; margin: 0 0 14px; }

.fl-specs { width: 100%; border-collapse: collapse; }
.fl-specs th,
.fl-specs td {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  vertical-align: top;
  text-align: left;
}
.fl-specs th { font-weight: 400; color: var(--text-muted); width: 45%; padding-right: 16px; }
.fl-specs td { font-weight: 600; }
.fl-specs tr:last-child th,
.fl-specs tr:last-child td { border-bottom: 0; }

.fl-prod-docs {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.fl-prod-docs .fl-ico { flex: 0 0 auto; color: var(--f-blue); }

/* ---------- Панель заказа ---------- */

.fl-prod-panel {
  padding: 26px;
  border-left: 1px solid var(--border);
  background: var(--surface);
  align-self: stretch;
}

.fl-prod-packs-head {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.fl-prod-packs-list { display: grid; gap: 8px; margin-bottom: 22px; }

/* Фасовка — первый выбор покупателя, поэтому не список, а плитки с ценой:
   объём и цена за упаковку видны сразу, без раскрытия. */
.fl-pack-pick {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 400;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.fl-pack-pick input { position: absolute; opacity: 0; pointer-events: none; }
.fl-pack-pick:hover { border-color: var(--f-blue-light); }
.fl-pack-pick.is-active {
  border-color: var(--f-blue);
  box-shadow: inset 0 0 0 1px var(--f-blue);
}
.fl-pack-name { font-size: 16px; font-weight: 600; }
.fl-pack-price { margin-left: auto; font-size: 16px; color: var(--text-muted); }
.fl-pack-pick.is-active .fl-pack-price { color: var(--text); }

.fl-prod-price { display: flex; align-items: baseline; gap: 10px; }
.fl-prod-price-now { font-size: 38px; font-weight: 700; line-height: 1.1; }
.fl-prod-price-note { font-size: 14.5px; color: var(--text-muted); }

.fl-prod-group {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-muted);
}
.fl-prod-group .fl-ico { flex: 0 0 auto; color: var(--f-blue); }
.fl-prod-group-link { color: var(--f-blue); text-decoration: none; }
.fl-prod-group-link:hover { text-decoration: underline; }

.fl-prod-order { display: flex; gap: 10px; margin-top: 22px; }

.fl-qty {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.fl-qty-btn {
  width: 42px;
  border: 0;
  background: transparent;
  font-size: 19px;
  color: var(--text-muted);
  cursor: pointer;
}
.fl-qty-btn:hover { color: var(--f-blue); background: var(--surface); }
.fl-qty input {
  width: 46px;
  border: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
}

.fl-prod-cart { flex: 1 1 auto; justify-content: center; }
.fl-prod-min { margin: 12px 0 0; font-size: 14px; color: var(--text-muted); }

.fl-prod-care {
  list-style: none;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
}
.fl-prod-care li {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.fl-prod-care li:last-child { margin-bottom: 0; }
.fl-prod-care .fl-ico { flex: 0 0 auto; color: var(--f-blue); }

/* ---------- Описание ---------- */

/* Описания перенесены со старого сайта вместе с версткой: центрированные
   заголовки, ручные отступы, мелкий шрифт в сносках. Ограничиваем строку
   по ширине и приводим шрифт — переписывать 83 текста мы не подряжались. */
.fl-prod-desc { margin-bottom: 36px; }
.fl-prod-desc h2 { font-size: 26px; margin: 0 0 16px; }
.fl-prod-desc-body { max-width: 92ch; font-size: 16.5px; line-height: 1.6; color: #333; }
.fl-prod-desc-body p { margin: 0 0 12px; }
.fl-prod-desc-body b { color: var(--text); }
.fl-prod-desc-body hr { border-color: var(--border); margin: 20px 0; }
.fl-prod-desc-body .small { font-size: 14.5px; color: var(--text-muted); }
.fl-prod-desc-body img { max-width: 100%; height: auto; }

/* ---------- Где применяется ---------- */

/* Отраслей у средства бывает и одна, и двенадцать. Сетка на таком разбросе
   даёт полупустой последний ряд с рамками, поэтому ссылки идут строкой
   плашками и переносятся по месту. */
.fl-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.fl-plan-link {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: background .14s, border-color .14s, color .14s;
}
.fl-plan-link:hover {
  background: var(--f-blue);
  border-color: var(--f-blue);
  color: #fff;
  text-decoration: none;
}
.fl-plan-name { font-weight: 600; font-size: 15.5px; }
.fl-plan-name::first-letter { text-transform: uppercase; }
.fl-plan-steps { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
.fl-plan-link:hover .fl-plan-steps { color: rgba(255, 255, 255, .75); }

/* ---------- Планшет и телефон ---------- */

@media (max-width: 1399px) {
  /* Панель заказа уходит под фотографию: втроём колонки становятся
     слишком узкими, и название фасовки переносится по слогам */
  .fl-prod,
  .fl-prod.has-specs { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .fl-prod.has-specs .fl-prod-gallery { grid-column: 1; grid-row: 1; }
  .fl-prod.has-specs .fl-prod-specs {
    grid-column: 1;
    grid-row: 2;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .fl-prod.has-specs .fl-prod-panel { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 991px) {
  .fl-prod,
  .fl-prod.has-specs { grid-template-columns: minmax(0, 1fr); }
  .fl-prod.has-specs .fl-prod-gallery,
  .fl-prod.has-specs .fl-prod-specs,
  .fl-prod.has-specs .fl-prod-panel { grid-column: 1; grid-row: auto; }
  /* В одну колонку порядок другой: сначала купить, потом читать */
  .fl-prod-panel { order: 2; }
  .fl-prod-specs { order: 3; }
  .fl-prod-panel,
  .fl-prod-specs { border-left: 0; border-top: 1px solid var(--border); }
  .fl-prod-photo { min-height: 260px; }
  .fl-prod-photo img { max-height: 320px; }
}

@media (max-width: 767px) {
  .fl-prod-head h1 { max-width: none; }
  .fl-prod-gallery,
  .fl-prod-specs,
  .fl-prod-panel { padding: 18px; }
  .fl-prod-price-now { font-size: 30px; }
  .fl-prod-order { flex-wrap: wrap; }
  .fl-prod-cart { width: 100%; flex: 1 0 100%; }
  .fl-prod-desc-body { font-size: 15.5px; }
}

/* ============================================================
   Корзина и оформление

   Товары строками, итог отдельной колонкой. Шаги оформления остались
   стоковой гармошкой — переписывать её разметку значило бы переписывать
   и семьсот строк скрипта, который ищет панели по классам bootstrap.
   Поэтому панели переодеты стилями, а сводка заказа добавлена рядом.
   ============================================================ */

.fl-cart,
.fl-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}

/* ---------- Строки корзины ---------- */

.fl-cart-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fl-line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto auto 34px;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid var(--border);
}
.fl-line:last-child { border-bottom: 0; }

.fl-line-img { display: grid; place-items: center; height: 80px; }
.fl-line-img img { max-width: 100%; max-height: 80px; width: auto; }

.fl-line-name {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.fl-line-name:hover { color: var(--f-blue); }
.fl-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 14px;
  color: var(--text-muted);
}
.fl-line-out { color: var(--s-crimson); }

.fl-line-price { margin-top: 6px; font-size: 14.5px; color: var(--text-muted); }
.fl-line-total { min-width: 110px; text-align: right; font-size: 19px; font-weight: 700; }

.fl-line-drop {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.fl-line-drop:hover { background: var(--surface); color: var(--s-crimson); }

/* ---------- Итог и сводка заказа ---------- */

.fl-cart-sum,
/* Шаг 2 оформления: кто оформляет заказ.

   Раньше здесь стоял второй бланк адреса — тот же, что на шаге доставки.
   Теперь данные покупателя из его учётной записи, менять их на этом шаге
   незачем: правятся в кабинете. */
.fl-person {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--surface-soft, #fff);
}

.fl-person-list {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 10px 24px;
  margin: 0;
}

.fl-person-list dt {
  color: var(--text-muted);
  font-weight: 400;
}

.fl-person-list dd {
  margin: 0;
  font-weight: 600;
  min-width: 0;
  word-break: break-word;
}

.fl-person-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 575px) {
  .fl-person-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fl-person-list dd { margin-bottom: 10px; }
}

.fl-checkout-sum {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.fl-sum-head { font-size: 18px; font-weight: 700; margin-bottom: 16px; }

.fl-sum-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.fl-sum-item-img { display: grid; place-items: center; height: 48px; }
.fl-sum-item-img img { max-width: 100%; max-height: 48px; width: auto; }
.fl-sum-item-name {
  display: block;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--text);
}
.fl-sum-item-meta { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.fl-sum-item-total { font-size: 15px; font-weight: 700; white-space: nowrap; }

.fl-sum-rows { margin: 16px 0 20px; }
.fl-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-size: 15.5px;
  color: var(--text-muted);
}
.fl-sum-row b { color: var(--text); font-weight: 600; }
.fl-sum-row.is-final {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 17px;
  color: var(--text);
}
.fl-sum-row.is-final b { font-size: 24px; font-weight: 700; }

.fl-sum-go { width: 100%; justify-content: center; }
.fl-sum-back {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 15px;
  color: var(--f-blue);
}

.fl-sum-care {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
}
.fl-sum-care li {
  display: flex;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
}
.fl-sum-care li:last-child { margin-bottom: 0; }
.fl-sum-care .fl-ico { flex: 0 0 auto; color: var(--f-blue); }

/* ---------- Пусто: не найдено и пустая корзина ---------- */

.fl-blank {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
  padding: 72px 20px;
  text-align: center;
}
.fl-blank .fl-ico { width: 44px; height: 44px; color: var(--border); }
.fl-blank h1 { margin: 0; font-size: 30px; }
.fl-blank p { margin: 0; font-size: 17px; color: var(--text-muted); }
.fl-blank-help { font-size: 15px; }

/* ---------- Шаги оформления ---------- */

/* Панели bootstrap переодеваем: разметку трогать нельзя, её ищет скрипт */
#checkout-checkout .panel-group { margin: 0; }
#checkout-checkout .panel {
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: hidden;
}
#checkout-checkout .panel-heading { background: #fff; border: 0; padding: 0; }
#checkout-checkout .panel-title { font-size: 17px; font-weight: 700; }
#checkout-checkout .panel-title { padding: 18px 22px; color: var(--text); }
/* Заголовок шага скрипт подменяет на ссылку — она должна занять ту же
   площадь, иначе отступы удваиваются */
#checkout-checkout .panel-title > a {
  display: block;
  margin: -18px -22px;
  padding: 18px 22px;
  color: var(--text);
  text-decoration: none;
}
#checkout-checkout .panel-title > a:hover { color: var(--f-blue); }
#checkout-checkout .panel-title .fa { display: none; }
#checkout-checkout .panel-body { padding: 4px 22px 24px; border: 0; }
#checkout-checkout .panel-collapse.in + .panel-heading,
#checkout-checkout .panel-collapse.in { border-top: 1px solid var(--border); }

#checkout-checkout .form-group { margin-bottom: 16px; }
#checkout-checkout .control-label { font-size: 14.5px; color: var(--text-muted); font-weight: 400; }
#checkout-checkout .radio label,
#checkout-checkout .checkbox label { font-size: 15.5px; }
#checkout-checkout .buttons { margin-top: 8px; }
#checkout-checkout .btn-primary { background: var(--f-blue); }

/* Первый шаг: гость или кабинет */

.fl-login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; }
.fl-login h2 { font-size: 21px; margin: 0 0 14px; }
.fl-login-back { padding-left: 34px; border-left: 1px solid var(--border); }
.fl-login-forgot { display: inline-block; margin-top: 8px; font-size: 14px; }

.fl-login-picks { display: grid; gap: 10px; margin-bottom: 18px; }
.fl-pick {
  display: block;
  margin: 0;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 400;
  cursor: pointer;
}
.fl-pick input { position: absolute; opacity: 0; pointer-events: none; }
.fl-pick:hover { border-color: var(--f-blue-light); }
.fl-pick.is-active { border-color: var(--f-blue); box-shadow: inset 0 0 0 1px var(--f-blue); }
.fl-pick-name { display: block; font-size: 16px; font-weight: 600; }
.fl-pick-note { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.fl-pick-cost { display: block; margin-top: 8px; font-size: 15.5px; font-weight: 600; }

.fl-ships { display: grid; gap: 10px; margin-bottom: 20px; }

/* ---------- Планшет и телефон ---------- */

@media (max-width: 1199px) {
  .fl-cart,
  .fl-checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 18px; }
  .fl-line { grid-template-columns: 76px minmax(0, 1fr) auto auto 34px; gap: 14px; }
}

@media (max-width: 991px) {
  .fl-cart,
  .fl-checkout { grid-template-columns: minmax(0, 1fr); }
  .fl-login { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fl-login-back { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 24px; }
}

@media (max-width: 767px) {
  /* Строка складывается в две колонки: фото и всё остальное */
  .fl-line {
    grid-template-columns: 64px minmax(0, 1fr) 34px;
    gap: 12px 14px;
    padding: 14px;
  }
  .fl-line-img { grid-column: 1; grid-row: 1 / span 2; height: 64px; align-self: start; }
  .fl-line-img img { max-height: 64px; }
  .fl-line-body { grid-column: 2; grid-row: 1; }
  .fl-line-drop { grid-column: 3; grid-row: 1; align-self: start; }
  /* Количество слева, сумма справа — одной строкой под названием */
  .fl-line .fl-qty { grid-column: 2; grid-row: 2; justify-self: start; }
  .fl-line-total {
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    min-width: 0;
  }
}

.fl-sum-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Шаг «Проверка заказа» приходит стоковой таблицей — приводим к виду
   остальных таблиц сайта */
#collapse-checkout-confirm .table { width: 100%; border-collapse: collapse; margin: 0; }
#collapse-checkout-confirm .table > thead > tr > td,
#collapse-checkout-confirm .table > tbody > tr > td,
#collapse-checkout-confirm .table > tfoot > tr > td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  vertical-align: top;
}
#collapse-checkout-confirm .table > thead > tr > td {
  background: var(--surface);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 14px;
}
#collapse-checkout-confirm .table > tfoot > tr:last-child > td { font-size: 17px; font-weight: 700; }
#collapse-checkout-confirm .buttons { margin-top: 18px; }

/* ============================================================
   Подвал

   Четыре колонки: контакты, каталог, гигиенические планы и страницы
   для покупателя. Ширины разные — колонка с планами длиннее прочих,
   у отраслей длинные названия.
   ============================================================ */

.fl-footer {
  margin-top: 56px;
  padding: 46px 0 26px;
  background: var(--f-blue-dark);
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
}

.fl-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.fl-footer h5 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.fl-footer-where { margin-top: 26px; }

.fl-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.fl-footer a:hover { color: #fff; text-decoration: underline; }

.fl-footer ul { list-style: none; margin: 0; padding: 0; }
.fl-footer-col li { margin-bottom: 9px; line-height: 1.4; }

/* Логотип на синем: он свёрстан для белой шапки, поэтому подложка */
.fl-footer-logo {
  max-width: 230px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--radius);
}
.fl-footer-lead { margin: 0 0 18px; line-height: 1.5; max-width: 44ch; }

.fl-footer-contacts li {
  display: flex;
  gap: 10px;
  margin-bottom: 11px;
  line-height: 1.4;
}
.fl-footer-contacts .fl-ico { flex: 0 0 auto; color: rgba(255, 255, 255, .55); }

/* Названия отраслей приходят из заголовка страницы, где они стоят после
   двоеточия и потому со строчной буквы */
.fl-footer-plans a { display: inline-block; }
.fl-footer-plans a::first-letter { text-transform: uppercase; }

.fl-footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.fl-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
}

@media (max-width: 1199px) {
  .fl-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 34px; }
}

@media (max-width: 767px) {
  .fl-footer { margin-top: 36px; padding: 32px 0 20px; }
  .fl-footer-top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .fl-footer-lead { max-width: none; }
  /* В одну колонку тридцать ссылок подряд — это экран с половиной сайта;
     разводим их в два столбца */
  .fl-footer-col ul { columns: 2; column-gap: 20px; }
  .fl-footer-col li { break-inside: avoid; font-size: 14.5px; }
  .fl-footer-links { columns: auto; }
}

/* ============================================================
   Информационные и отраслевые страницы

   Текст слева с ограниченной длиной строки, соседние страницы справа.
   Таблицы гигиенических планов из ограничения выведены — им нужна
   вся ширина колонки.
   ============================================================ */

.fl-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 44px;
  align-items: start;
  margin-bottom: 40px;
}
/* Страница плана: таблица занимает всю ширину, список отраслей уходит
   плашками под неё */
.fl-page.is-wide { grid-template-columns: minmax(0, 1fr); }

.fl-page-body { font-size: 16.5px; line-height: 1.6; color: #333; }
.fl-page-body h1 { margin-bottom: 20px; }
.fl-page-body h2 { font-size: 25px; margin: 30px 0 14px; }
.fl-page-body h3 { font-size: 20px; margin: 24px 0 12px; }
.fl-page-body p,
.fl-page-body ul,
.fl-page-body ol,
.fl-page-body h2,
.fl-page-body h3 { max-width: 78ch; }
.fl-page-body p { margin: 0 0 14px; }
.fl-page-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.fl-page-body hr { border-color: var(--border); margin: 24px 0; }

/* Пустые абзацы со старого сайта: их там десятки подряд, каждый держит
   строку высоты и рвёт страницу на куски */
.fl-page-body p:empty,
.fl-page-body div:empty,
.fl-page-body h2:empty,
.fl-page-body h3:empty { display: none; }

.fl-page-nav {
  position: sticky;
  top: 20px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.fl-page-nav-head {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.fl-page-nav ul { list-style: none; margin: 0; padding: 0; }
.fl-page-nav li { margin-bottom: 2px; }
.fl-page-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
.fl-page-nav a:hover { background: #fff; color: var(--f-blue); }
.fl-page-nav a.is-active {
  background: var(--f-blue);
  color: #fff;
  font-weight: 600;
}
/* Названия отраслей приходят из заголовка страницы, где стоят после
   двоеточия и потому со строчной буквы */
.fl-plan-name::first-letter { text-transform: uppercase; }

/* Отрасль, которую читают сейчас: плашка остаётся в списке, чтобы был
   виден весь набор, но перестаёт выглядеть ссылкой */
.fl-plan-link.is-current {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
  pointer-events: none;
}

@media (max-width: 991px) {
  .fl-page { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Список соседних страниц уходит под текст: наверху он отодвинул бы
     содержание страницы на второй экран */
  .fl-page-nav { position: static; order: 2; }
  .fl-page-nav ul { columns: 2; column-gap: 16px; }
  .fl-page-nav li { break-inside: avoid; }
}

@media (max-width: 767px) {
  .fl-page-body { font-size: 15.5px; }
  .fl-page-nav ul { columns: auto; }
}

/* ---------- Контакты и обратная связь ---------- */

.fl-contacts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  margin-bottom: 40px;
}

.fl-contact-card {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.fl-contact-card:last-child { margin-bottom: 0; }
.fl-contact-card > .fl-ico { flex: 0 0 auto; color: var(--f-blue); margin-top: 2px; }
.fl-contact-card p { margin: 0 0 6px; font-size: 16.5px; line-height: 1.45; }
.fl-contact-card p:last-child { margin-bottom: 0; }
.fl-contact-label {
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.fl-contact-note { font-size: 14.5px; color: var(--text-muted); }
.fl-contact-map { display: inline-block; margin-top: 8px; font-size: 15px; }

.fl-contacts-form {
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.fl-contacts-form h2 { font-size: 22px; margin: 0 0 18px; }
.fl-contacts-form .form-group { margin-bottom: 16px; }
.fl-contacts-form .control-label { font-size: 14.5px; color: var(--text-muted); font-weight: 400; }
.fl-contacts-form textarea.form-control { height: auto; }
.fl-contacts-form .fl-btn { width: 100%; justify-content: center; }

@media (max-width: 991px) {
  .fl-contacts { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* ---------- Строка поиска на странице результатов ---------- */

.fl-search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.fl-search-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16.5px;
  background: #fff;
}
.fl-search-form input[type="text"]:focus {
  border-color: var(--f-blue-light);
  outline: none;
}
.fl-search-form .fl-btn { flex: 0 0 auto; }

@media (max-width: 767px) {
  .fl-search-form { flex-wrap: wrap; }
  .fl-search-form .fl-btn { width: 100%; justify-content: center; }
}

/* ---------- Корзина в шапке ---------- */

/* Панель своя: bootstrap только рисует её по классу open на #cart,
   открытием и закрытием управляет floreal.js. Селектор с #cart —
   в стилях OpenCart ширина задана через идентификатор. */
.fl-header-cart #cart .dropdown-menu.fl-mini {
  display: none;
  width: 400px;
  max-width: calc(100vw - 28px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}
.fl-header-cart #cart.open .dropdown-menu.fl-mini { display: block; }

/* Шапка панели: название и крестик. Раньше закрыть панель можно было
   только щелчком мимо — а он же и срабатывал случайно при любом
   действии внутри. */
.fl-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  font-weight: 700;
}
.fl-mini-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.fl-mini-close:hover { background: var(--surface); color: var(--text); }

/* Количество прямо в панели: маленький вариант того же переключателя */
.fl-qty-sm {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.fl-qty-sm .fl-qty-btn { width: 28px; font-size: 16px; }
.fl-qty-sm input {
  width: 34px;
  border: 0;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  background: transparent;
}
/* В стилях OpenCart у выпадающей корзины стоит min-width: 427px и своё
   поле на внутреннем блоке: панель из-за них разъезжалась шире себя самой,
   а отступы итогов схлопывались. Селекторы с #cart — иначе не перебить. */
.fl-header-cart #cart .fl-mini > li,
.fl-header-cart #cart .fl-mini > li > div { min-width: 0; }
.fl-header-cart #cart .fl-mini > li,
.fl-header-cart #cart .fl-mini > li > .fl-mini-list { padding: 0; }
.fl-header-cart #cart .fl-mini > li > .fl-mini-foot { padding: 16px 18px 18px; }

.fl-mini-list { max-height: 340px; overflow-y: auto; }

.fl-mini-line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  align-items: start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.fl-mini-line:last-child { border-bottom: 0; }
.fl-mini-img { display: grid; place-items: center; height: 48px; }
.fl-mini-img img { max-width: 100%; max-height: 48px; width: auto; }
.fl-mini-name {
  display: block;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--text);
  white-space: normal;
}
.fl-mini-name:hover { color: var(--f-blue); }
.fl-mini-foot-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.fl-mini-meta { margin-top: 3px; font-size: 13px; color: var(--text-muted); }
.fl-mini-total { font-size: 15px; font-weight: 700; white-space: nowrap; }
.fl-mini-drop {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.fl-mini-drop:hover { background: var(--surface); color: var(--s-crimson); }

.fl-mini-foot { padding: 16px 18px 18px; background: var(--surface); }
.fl-mini-foot .fl-sum-rows { margin: 0 0 14px; }
.fl-mini-foot .fl-sum-row { padding: 5px 0; font-size: 14.5px; }
.fl-mini-foot .fl-sum-row.is-final { font-size: 15.5px; }
.fl-mini-foot .fl-sum-row.is-final b { font-size: 20px; }
.fl-mini-go { width: 100%; justify-content: center; height: 48px; }
.fl-mini-back {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 14.5px;
  color: var(--f-blue);
}

.fl-mini-empty { display: grid; justify-items: center; gap: 10px; padding: 34px 20px; }
.fl-mini-empty .fl-ico { width: 34px; height: 34px; color: var(--border); }
.fl-mini-empty p { margin: 0; font-size: 15px; color: var(--text-muted); }

/* На телефоне кнопка корзины стоит слева и узкая: панель, привязанная
   к ней, уезжала за край экрана. Отвязываем от кнопки — панель считает
   края от строки шапки и занимает её ширину */
@media (max-width: 991px) {
  .fl-header .container { position: relative; }
  .fl-header-cart,
  .fl-header-cart #cart { position: static; }
  .fl-header-cart #cart .dropdown-menu.fl-mini {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* На узком экране строка ужимается: ширину панели держит max-width */
@media (max-width: 460px) {
  .fl-mini-line { grid-template-columns: 44px minmax(0, 1fr) 26px; gap: 10px; padding: 12px 16px; }
  .fl-header-cart #cart .fl-mini > li > .fl-mini-foot { padding: 14px 16px 16px; }
}

/* ---------- Подсказки поиска ---------- */

.fl-header-search #search { position: relative; }

.fl-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1010;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
}
.fl-suggest[hidden] { display: none; }

.fl-suggest-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.fl-suggest-item:hover,
.fl-suggest-item.is-active { background: var(--surface); text-decoration: none; color: var(--text); }

.fl-suggest-img { display: grid; place-items: center; height: 44px; }
.fl-suggest-img img { max-width: 100%; max-height: 44px; width: auto; }
/* Название в подсказке — не больше двух строк: иначе шесть товаров
   занимают весь экран телефона */
.fl-suggest-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
}
.fl-suggest-model { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.fl-suggest-price { font-size: 15px; font-weight: 700; white-space: nowrap; }

.fl-suggest-more {
  display: block;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--f-blue);
  text-align: center;
}
.fl-suggest-more:hover { background: var(--surface); text-decoration: none; }

.fl-suggest-empty {
  padding: 18px 16px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---------- Хлебные крошки: без стрелок из поставки ---------- */

/* В стилях OpenCart каждая крошка обведена уголком-стрелкой, и рядом
   с нашим разделителем «/» получалось два разделителя сразу. На узком
   экране строка ещё и переносилась вместе с уголками. */
.breadcrumb > li { padding: 0; white-space: normal; text-shadow: none; }
.breadcrumb > li:after { display: none; }
.breadcrumb > li + li:before { content: "/"; padding: 0 8px; color: var(--border); }
.breadcrumb > li:first-child { padding-right: 0; }

@media (max-width: 767px) {
  .breadcrumb { font-size: 12.5px; margin-bottom: 10px; }
}

/* ============================================================
   Личный кабинет

   Кабинет нужен оптовику: его уровень цен, постоянные позиции
   и повтор прошлого заказа. Списки ссылок из поставки ушли вбок.
   ============================================================ */

.fl-account-head { margin-bottom: 26px; }
.fl-account-head h1 { margin-bottom: 12px; }

.fl-account-level {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 16px;
  line-height: 1.4;
}
.fl-account-level .fl-ico { flex: 0 0 auto; color: var(--p-emerald); }

.fl-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 34px;
  align-items: start;
  margin: 36px 0 40px;
}
.fl-account h2 { font-size: 22px; margin: 0 0 16px; }

.fl-orders { display: grid; gap: 10px; }
.fl-order {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.fl-order-body { flex: 1 1 auto; min-width: 0; }
.fl-order-num { font-size: 16.5px; font-weight: 600; color: var(--text); }
.fl-order-num:hover { color: var(--f-blue); }
.fl-order-meta { margin-top: 4px; font-size: 14px; color: var(--text-muted); }
.fl-order-repeat { flex: 0 0 auto; height: 44px; padding: 0 18px; font-size: 15px; }

.fl-account-all { display: inline-block; margin-top: 14px; font-size: 15.5px; }
.fl-account-empty { font-size: 16.5px; line-height: 1.5; color: var(--text-muted); max-width: 60ch; }

.fl-account-side {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.fl-account-links { list-style: none; margin: 0; padding: 0; }
.fl-account-links li { margin-bottom: 10px; }
.fl-account-links a { font-size: 16px; }
.fl-account-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Сколько раз позицию уже заказывали — в ленте постоянных товаров */
.fl-card-times { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }

@media (max-width: 991px) {
  .fl-account { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 767px) {
  .fl-order { flex-wrap: wrap; }
  .fl-order-repeat { width: 100%; justify-content: center; }
}

/* ---------- Меню кабинета сбоку ---------- */

.fl-side-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fl-side-item {
  display: block;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 15.5px;
  text-decoration: none;
}
.fl-side-item:last-child { border-bottom: 0; }
.fl-side-item:hover { background: var(--surface); color: var(--f-blue); text-decoration: none; }

/* Боковая колонка кабинета: обычный столбец, а не шторка каталога */
.fl-aside-static { position: static; transform: none; width: auto; padding: 0; overflow: visible; }
@media (max-width: 991px) {
  .fl-aside-static { display: block; box-shadow: none; }
}

/* ============================================================
   Вариант А «Чистая лаборатория»

   Пластика поверх токенов: действия — пилюли, корзина в шапке —
   контурная, подвал светлый на мятной подложке, призыв к действию —
   градиент хвои. Палитру целиком несут переменные в :root, здесь
   только форма и те места, где синий был прописан числом.
   ============================================================ */

/* ---------- Действия — пилюли ---------- */

/* .fl-btn писался для ссылок; на <button> вылезала браузерная рамка
   outset — видна тёмным ободком на «Запросить прайс» и «Продолжить» */
.fl-btn { border: 0; cursor: pointer; }

.fl-btn,
.fl-card-buy,
.fl-card-buy-alt,
.fl-catalog-btn,
.fl-header-cart #cart > .btn,
.fl-order-repeat,
.btn-primary,
.btn-default,
.btn-success,
.fl-toolbar-filters {
  border-radius: 999px;
}

/* Круглые служебные кнопки: переключатели вида и стрелки каруселей */
.fl-view-btn,
.fl-nav-btn { border-radius: 50%; }

.fl-pager .pagination > li > a,
.fl-pager .pagination > li > span { border-radius: 999px; }

/* Поиск — пилюля из поля и кнопки */
.fl-header-search #search .form-control {
  border-radius: 999px 0 0 999px;
  padding-left: 22px;
}
.fl-header-search #search .btn { border-radius: 0 999px 999px 0; }
.fl-search-form input[type="text"] { border-radius: 999px; padding: 0 22px; }
.fl-search-form .fl-btn { border-radius: 999px; }

/* ---------- Корзина в шапке: контурная пилюля ---------- */

.fl-header-cart #cart > .btn {
  background: #fff;
  border: 1.5px solid var(--f-blue);
  color: var(--f-blue-dark);
}
.fl-header-cart #cart > .btn:hover,
.fl-header-cart #cart.open > .btn {
  background: var(--surface);
  color: var(--f-blue-dark);
}

/* ---------- Остатки прописанного синего ---------- */

.fl-topbar-item:hover,
.fl-topbar-item:focus,
.fl-topbar-drop.open > .fl-topbar-item,
.fl-topbar-tools .btn-group > .btn-link:hover,
.fl-topbar-tools form > .btn-link:hover {
  background: rgba(0, 138, 78, .07);
}
.fl-subcat:hover { background: rgba(0, 138, 78, .06); }
.fl-aside .list-group-item.active,
.fl-aside .list-group-item.active:hover { background: rgba(0, 138, 78, .08); }
.fl-side-more:hover { background: #E3F0E8; }
.btn-default:hover { background: #E3F0E8; }

/* Мягкое пятно в слайдере было синим — стало морской волной */
.fl-slide::after {
  background: radial-gradient(circle at 50% 50%, rgba(46, 139, 132, .2), rgba(46, 139, 132, 0) 70%);
}

/* Затемнение фото отраслей: хвоя вместо тёмно-синего */
.fl-ind::after {
  background: linear-gradient(to top, rgba(10, 46, 32, .88) 0%, rgba(10, 46, 32, .35) 55%, rgba(10, 46, 32, .1) 100%);
}

/* Нумерованные плитки — семейство зелёных вместо синих */
.fl-num { background: var(--p-emerald); }
.fl-num:nth-child(2) { background: var(--p-teal); }
.fl-num:nth-child(3) { background: var(--p-deep); }
.fl-num:nth-child(4) { background: #5E8F1E; }

/* ---------- Призыв к действию: градиент хвои ---------- */

.fl-cta-body { background: linear-gradient(115deg, var(--p-teal), #00703F); }

/* ---------- Преимуществ стало четыре ----------
   К производству, документам и опту добавились сети магазинов.
   Правило стоит позже мобильных медиазапросов, поэтому широкую сетку
   ограничиваем своим медиазапросом — иначе она перебивала одну колонку
   телефона и четыре колонки наезжали друг на друга. */

@media (min-width: 1200px) {
  .fl-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .fl-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-benefit:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .fl-benefit:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* ---------- Светлый подвал на мятной подложке ---------- */

footer,
.fl-footer {
  background: var(--surface);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
footer h5,
.fl-footer h5 { color: var(--text); }
footer a,
.fl-footer a { color: var(--text-muted); }
footer a:hover,
.fl-footer a:hover { color: var(--f-blue-dark); }
footer hr { border-color: var(--border); }
.fl-footer-top { border-bottom-color: var(--border); }
.fl-footer-logo { background: #fff; border: 1px solid var(--border); }
.fl-footer-contacts .fl-ico { color: var(--f-blue); }
.fl-footer-bottom { color: var(--text-muted); }

/* ---------- Согласие на обработку данных в формах ---------- */

.fl-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
  cursor: pointer;
}
.fl-consent input {
  margin: 3px 0 0;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--f-blue);
}

/* ---------- Cookie-уведомление ---------- */

.fl-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.fl-cookies[hidden] { display: none; }
.fl-cookies span { flex: 1 1 420px; }
.fl-cookies .fl-btn { height: 42px; padding: 0 22px; font-size: 15px; }

/* ---------- Карта в подвале ---------- */

.fl-footer-map { margin: 30px 0 26px; }
.fl-footer-map-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 12px;
}
.fl-footer-map-head h5 { margin: 0; }
.fl-footer-map-head span { font-size: 14.5px; }
.fl-footer-map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
}

@media (max-width: 767px) {
  .fl-footer-map iframe { height: 240px; }
}

/* ---------- Длинные отрасли в плитках ----------
   «Рыбопереработка» и «животноводство» шире плитки на телефоне:
   переносим по слогам, а где браузер не умеет — в любом месте слова. */

.fl-ind-name {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .fl-ind-name { font-size: 15.5px; }
  .fl-ind-count { font-size: 13px; }
}

/* ---------- Формы: плашки ответов и согласие на тёмном ---------- */

.fl-form-ok,
.fl-form-err {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.45;
}
.fl-form-ok { background: #E3F4EA; color: #135E36; }
.fl-form-err { background: #FDF0EF; color: #90271C; }

/* Согласие на синем градиенте призыва к действию */
.fl-consent-light { color: rgba(255, 255, 255, .85); font-size: 13.5px; }
.fl-consent-light a { color: #fff; text-decoration: underline; }
.fl-consent-light input { accent-color: #fff; }

/* Ловушка для ботов: поле вне экрана, но не display:none —
   примитивные боты такие пропускают реже */
.fl-cta-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ============================================================
   Стоковые формы кабинета: регистрация, вход, восстановление,
   правка данных. Разметку ядра не трогаем — приводим стилями.
   ============================================================ */

/* Контейнер у сайта широкий (95vw): стоковая форма на нём растягивается
   в строку на два метра. Держим читаемую ширину. */
#account-register #content,
#account-login #content,
#account-forgotten #content,
#account-edit #content,
#account-password #content,
#account-address #content,
#account-newsletter #content,
#account-return #content { max-width: 960px; }

/* Подписи разделов формы */
#account-register legend,
#account-edit legend,
#account-password legend {
  font-size: 19px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

/* Строка согласия в стоковых формах: текст с галочкой — отдельным
   блоком на подложке, кнопка — под ним. Разметка ядра кладёт галочку
   после текста; :has ограничивает правку только формами с согласием. */
.buttons .pull-right:has(input[name='agree']) {
  /* у bootstrap на .pull-right стоит float: right !important */
  float: none !important;
  display: block;
  max-width: 720px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: left;
}
.buttons .pull-right input[name='agree'] {
  width: 17px;
  height: 17px;
  margin: 0 6px;
  vertical-align: -3px;
  accent-color: var(--f-blue);
}
.buttons .pull-right:has(input[name='agree']) .btn-primary,
.buttons .pull-right:has(input[name='agree']) input[type='submit'] {
  display: block;
  margin-top: 14px;
}

/* Подсветка пропущенного согласия */
.fl-consent-miss {
  outline: 2px solid var(--s-crimson);
  outline-offset: 3px;
  border-radius: var(--radius);
  transition: outline-color .2s;
}