@charset "UTF-8";
/* =====================================================================
   OLIVIN.KZ — общая дизайн-система шаблона (владелец: агент F «Фундамент»)
   Источник: SITE/demo/style.css + reports/11_design.md.
   Подключается в header.php ПОСЛЕ bootstrap/swiper/fontawesome/main.css.
   Постраничные стили — в assets/css/pages/<роль>.css или style.css компонента.
   Префикс новых классов — olv-. Классы demo (menu-top, title-3, btn-main …) сохранены.
   ===================================================================== */

/* ---------- 1. Шрифт Montserrat (локально) ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/montserrat/Montserrat-Regular.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/montserrat/Montserrat-Medium.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-Medium.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/montserrat/Montserrat-Bold.woff2") format("woff2"), url("../fonts/montserrat/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/montserrat/Montserrat-ExtraBold.ttf") format("truetype"); }

/* ---------- 2. Токены ---------- */
:root {
  --olv-green: #A0D02E;          /* основной акцент: кнопки, ссылки, табы */
  --olv-green-2: #9DC202;        /* полоса под шапкой, шапки модалок, заголовки подвала */
  --olv-green-hover: #95C32C;
  --olv-green-strong: #8EC804;   /* активный раздел фильтра, выбранный цвет */
  --olv-green-dark: #6D9A01;     /* плашка «вид нанесения» */
  --olv-green-link: #7FA325;     /* «Показать ещё» в фильтре */
  --olv-green-count: #98C62C;    /* счётчики мега-меню */
  --olv-header: #393D46;         /* тёмная полоса шапки */
  --olv-search: #2B2E35;         /* поле поиска */
  --olv-footer: #4D4D55;
  --olv-title: #383C45;          /* заголовки, цены */
  --olv-text: #4C4F57;           /* основной «тёмный» текст блоков */
  --olv-body: #212529;           /* текст body (как BS) */
  --olv-menu: #878B8E;           /* верхнее меню, телефон */
  --olv-muted: #95979C;          /* подписи, даты, артикулы */
  --olv-border: #DDDDDF;
  --olv-line: #EAEAEA;           /* рамки карточек */
  --olv-bg: #F5F5F7;             /* серый фон страниц/плашек */
  --olv-white: #FFFFFF;
  --olv-danger: #DC3545;

  --olv-radius-sm: 5px;          /* поля, сортировка, пагинация, теги */
  --olv-radius: 10px;            /* .btn-main */
  --olv-radius-card: .5rem;      /* карточки, табы, превью */
  --olv-shadow-drop: 0 20px 40px rgba(0, 0, 0, .08);
  --olv-shadow-card: 0 10px 30px rgba(0, 0, 0, .06);
  --olv-font: "Montserrat", sans-serif;
  --olv-header-z: 1030;

  /* Bootstrap 5.3 */
  --bs-body-font-family: var(--olv-font);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.2;
  --bs-body-color: var(--olv-body);
  --bs-primary: #A0D02E;
  --bs-primary-rgb: 160, 208, 46;
  --bs-success: #9DC202;
  --bs-success-rgb: 157, 194, 2;
  --bs-link-color: #000;
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color: #000;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-border-color: var(--olv-border);
  --bs-focus-ring-color: rgba(160, 208, 46, .25);
}

/* ---------- 3. Глобальная типографика ---------- */
html { font-size: 16px; }
body {
  font-family: var(--olv-font);
  font-size: 16px;
  line-height: 1.2;             /* demo: 120% — безразмерно, чтобы крупные заголовки не налезали */
  font-weight: 400;
  color: var(--olv-body);
  background: var(--olv-white);
  -webkit-font-smoothing: antialiased;
}
body.main-body, body.olv-gray { background: var(--olv-bg); }
input, button, select, textarea, optgroup { font-family: inherit; }
a { color: #000; text-decoration: none; transition: color .3s, background-color .3s, border-color .3s, opacity .3s; }
a:hover { color: #000; }
b, strong { font-weight: 600; }
img { max-width: 100%; }

/* Богатый текст (статьи, «О компании», описания) — оберните контент в .olv-content */
.olv-content { color: var(--olv-text); line-height: 1.3; }
.olv-content h1, .olv-content h2, .olv-content h3,
.olv-content h4, .olv-content h5, .olv-content h6 { color: var(--olv-title); font-weight: 600; line-height: 1.25; margin: 1.5em 0 .6em; }
.olv-content h1 { font-size: 2rem; }
.olv-content h2 { font-size: 1.5rem; }
.olv-content h3 { font-size: 1.25rem; }
.olv-content h4, .olv-content h5, .olv-content h6 { font-size: 1.05rem; }
.olv-content p { margin: 0 0 1em; }
.olv-content ul, .olv-content ol { padding-left: 1.3em; margin: 0 0 1em; }
.olv-content ul li { list-style: disc; }
.olv-content ol li { list-style: decimal; }
.olv-content li { margin-bottom: .35em; }
.olv-content a { color: var(--olv-green-dark); text-decoration: underline; }
.olv-content a:hover { color: var(--olv-green); }
.olv-content img { height: auto; border-radius: var(--olv-radius-card); }
.olv-content blockquote { background: #F9FBF2; border-left: 4px solid var(--olv-green); padding: 16px 20px; margin: 1.5em 0; }
.olv-content table { width: 100%; margin-bottom: 1em; }
.olv-content > :first-child { margin-top: 0; }

/* ---------- 4. Заголовки секций ---------- */
.title-3 {                        /* заголовки секций и H1 страниц */
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--olv-title);
  margin: 0;
}
.title-4 { font-size: 36px; font-weight: 700; line-height: 1.2; color: #000; margin: 0; }
.title-5 { font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--olv-text); margin: 0; }
.olv-title-sm { font-size: 24px; font-weight: 500; line-height: 1.25; color: var(--olv-body); margin: 0 0 16px; } /* H1 товара/корзины */
.olv-section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
@media (max-width: 991.98px) {
  .title-3 { font-size: 32px; }
  .title-4 { font-size: 28px; }
  .title-5 { font-size: 24px; }
}
@media (max-width: 575.98px) {
  .title-3 { font-size: 28px; }
}

/* ---------- 5. Секции ---------- */
.olv-section { padding: 60px 0 50px; }
.olv-section--white { background: var(--olv-white); }
.olv-section--gray { background: var(--olv-bg); }
.olv-section--lg { padding: 90px 0 80px; }
@media (max-width: 575.98px) {
  .olv-section { padding: 40px 0 36px; }
  .olv-section--lg { padding: 50px 0 40px; }
}

/* ---------- 6. Кнопки ---------- */
/* Bootstrap-кнопки в палитре OLIVIN */
.btn { font-weight: 500; }
.btn-primary, .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--olv-green);
  --bs-btn-border-color: var(--olv-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--olv-green-hover);
  --bs-btn-hover-border-color: var(--olv-green-hover);
  --bs-btn-focus-shadow-rgb: 160, 208, 46;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--olv-green-hover);
  --bs-btn-active-border-color: var(--olv-green-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--olv-green);
  --bs-btn-disabled-border-color: var(--olv-green);
}
.btn-outline-primary {
  --bs-btn-color: var(--olv-green-dark);
  --bs-btn-border-color: var(--olv-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--olv-green);
  --bs-btn-hover-border-color: var(--olv-green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--olv-green-hover);
  --bs-btn-active-border-color: var(--olv-green-hover);
  --bs-btn-focus-shadow-rgb: 160, 208, 46;
}
.btn-link { --bs-btn-color: var(--olv-green-dark); --bs-btn-hover-color: var(--olv-green); }

/* Главная контурная кнопка demo («Показать ещё») */
.btn-main {
  width: 190px;
  height: 56px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  color: var(--olv-green);
  background-color: transparent;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid var(--olv-green);
  border-radius: var(--olv-radius);
  transition: .3s;
  cursor: pointer;
}
.btn-main:hover, .btn.btn-main:hover,
.btn-main:active, .btn.btn-main:active, .btn.btn-main:first-child:active {
  border-color: var(--olv-green);
  background-color: var(--olv-green);
  color: var(--olv-text);
}
.btn-main:focus, .btn-main:focus-visible, .btn.btn-main:focus-visible {
  background-color: transparent;
  box-shadow: none;
  outline: none;
  color: var(--olv-green);
  border-color: var(--olv-green);
}
.btn-main:focus-visible { box-shadow: 0 0 0 .2rem rgba(160, 208, 46, .35); }
.btn-main--auto { width: auto; min-width: 190px; }

/* Залитая кнопка основного действия (demo .lvn-btn-cart / .lvn-btn-checkout) */
.olv-btn, .lvn-btn-cart, .lvn-btn-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .5rem 1.5rem;
  min-height: 42px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  background: var(--olv-green);
  border: 1px solid var(--olv-green);
  border-radius: .375rem;
  text-decoration: none;
  cursor: pointer;
  transition: .3s;
}
.olv-btn:hover, .lvn-btn-cart:hover, .lvn-btn-checkout:hover,
.olv-btn:focus-visible, .lvn-btn-cart:focus-visible, .lvn-btn-checkout:focus-visible {
  color: #fff;
  background: var(--olv-green-hover);
  border-color: var(--olv-green-hover);
}
.olv-btn:disabled, .olv-btn.disabled { opacity: .6; pointer-events: none; }
.olv-btn--block { display: flex; width: 100%; }
.olv-btn--lg { min-height: 50px; font-size: 18px; }
.olv-btn--sm { min-height: 34px; padding: .25rem .9rem; font-size: 14px; }
/* Вторичная (серая) — demo .btn-auth без .success */
.olv-btn--gray { color: var(--olv-text); background: #D9D9D9; border-color: #D9D9D9; }
.olv-btn--gray:hover, .olv-btn--gray:focus-visible { color: var(--olv-text); background: #CBCBCB; border-color: #CBCBCB; }
/* Контурная тонкая */
.olv-btn--outline { color: var(--olv-text); background: #fff; border-color: var(--olv-border); }
.olv-btn--outline:hover, .olv-btn--outline:focus-visible { color: var(--olv-text); background: var(--olv-bg); border-color: var(--olv-border); }

/* Белая кнопка-ссылка demo (@olivin.kz). В demo называлась .btn-link — переименована, чтобы не ломать Bootstrap */
.olv-btn-social {
  width: 156px;
  height: 55px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: var(--olv-green);
  text-transform: uppercase;
  font-weight: 500;
  border: 0;
  border-radius: 0;
}
.olv-btn-social:hover { background: var(--olv-bg); color: var(--olv-search); }

/* Кнопки-переключатели (demo .sort-btn) — сортировка, выбор шт/уп/кор */
.sort-btn, .olv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--olv-text);
  background: var(--olv-bg);
  border: 1px solid var(--olv-bg);
  border-radius: var(--olv-radius-sm);
  cursor: pointer;
  transition: .3s;
}
.sort-btn:hover, .olv-chip:hover { color: var(--olv-text); border-color: var(--olv-green-2); }
.sort-btn.active, .olv-chip.active, .olv-chip.is-active { background: #fff; border-color: var(--olv-green-2); }
.olv-chip:disabled, .olv-chip.is-disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 575.98px) { .sort-btn, .olv-chip { padding: 5px 8px; font-size: 14px; } }

/* ---------- 7. Формы ---------- */
.form-control, .form-select {
  border-color: var(--olv-border);
  border-radius: var(--olv-radius-sm);
  color: var(--olv-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--olv-green-2);
  box-shadow: 0 0 0 .2rem rgba(157, 194, 2, .15);
}
.form-label { font-weight: 500; color: var(--olv-text); margin-bottom: 6px; }
.form-check-input { border-color: var(--olv-border); }
.form-check-input:checked { background-color: var(--olv-green-2); border-color: var(--olv-green-2); }
.form-check-input:focus { border-color: var(--olv-green-2); box-shadow: 0 0 0 .2rem rgba(157, 194, 2, .2); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239DC202'/%3e%3c/svg%3e"); }
/* Поле «только нижняя линия» (demo, модалки) */
.olv-input-line {
  border: 0;
  border-bottom: 2px solid var(--olv-bg);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  transition: border-color .3s;
}
.olv-input-line:focus { box-shadow: none; border-bottom-color: var(--olv-green-2); }

/* Количество (demo .lvn-qty) */
.olv-qty, .lvn-qty { display: inline-flex; align-items: stretch; width: 130px; }
.olv-qty .btn, .lvn-qty .btn, .olv-qty__btn {
  flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  color: #fff; background: var(--olv-green); border: 0;
  font-size: 18px; font-weight: 500;
}
.olv-qty .btn:hover, .lvn-qty .btn:hover, .olv-qty__btn:hover { background: var(--olv-green-hover); color: #fff; }
.olv-qty .form-control, .lvn-qty .form-control, .olv-qty__input { text-align: center; border-radius: 0; min-width: 0; }

/* ---------- 8. Карточки-обёртки ---------- */
.olv-card {
  background: #fff;
  border: 1px solid var(--olv-line);
  border-radius: var(--olv-radius-card);
  padding: 1rem;
}
.olv-card--lg { padding: 1.5rem; }
.olv-card--flat { border-color: transparent; }
.olv-card__title { font-size: 18px; font-weight: 600; color: var(--olv-title); margin: 0 0 12px; }
.olv-muted { color: var(--olv-muted); }
.olv-accent { color: var(--olv-green); }
/* Строки «название — значение» (demo «Краткие характеристики», «Итого») */
.olv-dl { list-style: none; margin: 0; padding: 0; }
.olv-dl > li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--olv-line); }
.olv-dl > li:last-child { border-bottom: 0; }

/* Бейдж-счётчик (шапка, нижняя навигация) */
.olv-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--olv-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}
.olv-badge.is-zero { display: none; }
.header__favorite-count.cart-count-bump, .header__basket-count.cart-count-bump { animation: olvBump .4s ease; }
@keyframes olvBump { 50% { transform: scale(1.35); } }

/* Карточка товара demo (a.product-card) — базовая, P1/P2 дополняют в своих стилях */
.product-card { display: block; width: 100%; max-width: 260px; margin: 40px auto 0; color: inherit; }
.product-card:hover { color: inherit; }
.product-img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--olv-bg); background: #fff; display: flex; align-items: center; justify-content: center; }
.product-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-title { font-weight: 600; line-height: 1.2; margin-top: 10px; color: var(--olv-title); }
.product-description { margin-top: 8px; color: var(--olv-muted); font-size: 14px; line-height: 1.2; }
.product-price { margin-top: 8px; color: var(--olv-title); font-size: 20px; font-weight: 600; line-height: 1.2; }
.product-price .value { color: var(--olv-muted); }
.product-description .amount { color: var(--olv-green-2); }

/* Карточка новости demo (a.news-item) — базовая */
.olv-news-card { display: block; color: inherit; }
.olv-news-card__img { display: block; width: 100%; aspect-ratio: 7 / 5; overflow: hidden; background: var(--olv-bg); }
.olv-news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.olv-news-card:hover .olv-news-card__img img { transform: scale(1.03); }
.olv-news-card__title { margin-top: 10px; font-weight: 600; line-height: 1.2; color: var(--olv-title); }
.olv-news-card__date { margin-top: 8px; font-size: 14px; color: var(--olv-muted); }

/* ---------- 9. Bootstrap-компоненты в палитре ---------- */
.nav-tabs { --bs-nav-tabs-border-color: var(--olv-line); --bs-nav-tabs-link-active-color: var(--olv-green-dark); --bs-nav-tabs-border-radius: .5rem; }
.nav-tabs .nav-link { color: var(--olv-green); font-weight: 500; }
.nav-tabs .nav-link.active { font-weight: 600; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--olv-green); }
.nav-link { --bs-nav-link-color: var(--olv-text); --bs-nav-link-hover-color: var(--olv-green-dark); }
.accordion {
  --bs-accordion-active-bg: var(--olv-bg);
  --bs-accordion-active-color: var(--olv-text);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A0D02E' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --bs-accordion-border-color: var(--olv-line);
}
.accordion-button { font-weight: 500; color: var(--olv-text); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--olv-green); --bs-dropdown-border-color: var(--olv-line); --bs-dropdown-font-size: 15px; box-shadow: var(--olv-shadow-drop); }
.list-group { --bs-list-group-active-bg: var(--olv-green); --bs-list-group-active-border-color: var(--olv-green); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--olv-green); }
.text-primary { color: var(--olv-green) !important; }
.bg-primary { background-color: var(--olv-green) !important; }
.border-primary { border-color: var(--olv-green) !important; }
.link-olv { color: var(--olv-green-dark); }
.link-olv:hover { color: var(--olv-green); }

/* Хлебные крошки (demo: nav.small.py-3 > .breadcrumb) */
.olv-breadcrumbs { font-size: 14px; }
.olv-breadcrumbs .breadcrumb { margin: 0; padding: 0; flex-wrap: wrap; --bs-breadcrumb-divider-color: var(--olv-muted); --bs-breadcrumb-item-active-color: #6c757d; }
.olv-breadcrumbs .breadcrumb-item { list-style: none; }
.olv-breadcrumbs a { color: #000; }
.olv-breadcrumbs a:hover { color: var(--olv-green-dark); }

/* Пагинация (demo .pagination-block) — BS-разметка и классы Bitrix */
.pagination-block, .olv-pagination { padding: 20px 0 50px; }
.pagination { --bs-pagination-border-width: 0; flex-wrap: wrap; justify-content: center; margin: 0; }
.pagination .page-item { margin: 8px 8px 0; list-style: none; }
.pagination .page-link {
  min-width: 40px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: var(--olv-text);
  background: var(--olv-bg);
  border: 0;
  border-radius: var(--olv-radius-sm) !important;
  box-shadow: none;
}
.pagination .page-link:hover { background: var(--olv-green); color: #fff; }
.pagination .page-link.active, .pagination .page-item.active .page-link { background: var(--olv-green); color: #fff; }
.pagination .page-item.disabled .page-link { opacity: .5; }

/* ---------- 10. Обёртка внутренних страниц ---------- */
/* header.php: <main class="olv-page olv-page--plate|crumbs|none"> [.title-top] <div class="container olv-page__body"> … */
.title-top { padding: 20px 0 45px; background: var(--olv-bg); }
.title-top .olv-page__title { text-align: center; margin-top: 30px; }
.title-top--solo { padding: 65px 0 45px; }                    /* плашка без крошек (как в demo) */
.olv-page__crumbs { padding: 16px 0 8px; }
.olv-page--plate > .olv-page__body { padding-top: 40px; padding-bottom: 90px; }
.olv-page--crumbs > .olv-page__body { padding-top: 8px; padding-bottom: 60px; }
.olv-page--none > .olv-page__body { padding-bottom: 0; }
@media (max-width: 575.98px) {
  .title-top { padding: 16px 0 40px; }                        /* FX-F: ближе к demo (плашка 156px, H 32px) */
  .title-top .olv-page__title { margin-top: 28px; font-size: 32px; overflow-wrap: break-word; }
  .title-top--solo { padding: 45px 0 40px; }
  .olv-page--plate > .olv-page__body { padding-top: 24px; padding-bottom: 50px; }
  .olv-page--crumbs > .olv-page__body { padding-bottom: 40px; }
}

/* ---------- 11. Шапка (demo header.php) ---------- */
.olv-header { position: relative; z-index: var(--olv-header-z); }
.menu-top { position: relative; background: #fff; }
.menu-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  color: var(--olv-menu);
}
.img-logo { flex: 0 0 auto; width: 111px; }
.img-logo a, .img-logo img { display: block; }
.img-logo img { width: 111px; height: auto; }
.nav-list { display: flex; align-items: center; flex-wrap: wrap; }
.menu-item {
  position: relative;
  display: inline-block;
  padding: 0 25px 0 20px;
  color: var(--olv-menu);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.menu-item:hover, .menu-item.is-active { color: var(--olv-green); }
.menu-item::after {
  position: absolute;
  content: "";
  top: 5px;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background: #A0D12F;
}
.nav-list .menu-item:last-child::after { display: none; }
.tel-block a {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  color: var(--olv-menu);
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
}
.tel-block a:hover { color: var(--olv-green); }
.tel-block a::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url("../img/icons/tel.png") no-repeat center / contain;
}
.burger-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.burger-btn img { width: 100%; height: 100%; }

.menu-bottom { position: relative; background: var(--olv-header); color: #fff; }
.under-menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0;
}
.under-menu::after {                 /* зелёная линия 8px по ширине контейнера */
  position: absolute;
  content: "";
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--olv-green-2);
  z-index: 2;
}
.menu-catalog-btn {
  position: relative;
  flex: 0 0 132px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  padding: 0 0 0 30px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--olv-green-2);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .3s;
}
.menu-catalog-btn::before {
  position: absolute;
  content: "";
  top: 13px;
  left: 18px;
  width: 23px;
  height: 23px;
  background: url("../img/icons/burger.png") no-repeat center / contain;
}
.menu-catalog-btn:hover, .menu-catalog-btn[aria-expanded="true"] { background: rgba(157, 194, 2, .15); color: #fff; }

/* Поиск (шаблон search.title/alver_search) */
.search-block { position: relative; flex: 1 1 auto; min-width: 0; margin: 0 30px; }
.search-block form { position: relative; margin: 0; }
.search-area {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 60px 0 20px;
  font-size: 16px;
  color: #fff;
  background: var(--olv-search);
  border: 0;
  border-radius: 0;
  outline: none;
}
.search-area::placeholder { color: var(--olv-menu); opacity: 1; }
.search-area:focus { border: 0; box-shadow: inset 0 0 0 1px rgba(157, 194, 2, .6); outline: none; color: #fff; }
.search-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--olv-menu);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.search-btn:hover { color: var(--olv-green); }
.search-btn svg { width: 22px; height: 22px; }

/* Войти / Избранное / Корзина */
.users-block { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; }
.user-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.user-item:hover, .user-item:focus { color: #fff; opacity: .7; }
.user-item::before { content: ""; display: block; width: 24px; height: 24px; background: no-repeat center / contain; }
.user-item.account::before { background-image: url("../img/icons/user.png"); }
.user-item.fav::before { background-image: url("../img/icons/star.png"); }
.user-item.bag::before { background-image: url("../img/icons/basket.png"); }
.user-item .olv-badge { position: absolute; top: -8px; left: calc(50% + 6px); }
.user-item__label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.olv-user .dropdown-toggle::after { display: none; }
.olv-user .dropdown-menu { margin-top: 12px !important; min-width: 220px; }
.olv-user .dropdown-header { color: var(--olv-title); font-weight: 600; white-space: normal; }
.olv-user .dropdown-item { padding: 8px 16px; }

/* Мега-меню «Каталог» (menu/olivin_catalog) */
.catalog-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: var(--olv-shadow-drop);
  z-index: 1050;
  padding: 20px 0 28px;
  color: var(--olv-body);
}
.catalog-panel.show { display: block; }
.catalog-panel__head { padding: 0 0 8px; border-bottom: 1px solid #F1F1F1; margin-bottom: 20px; }
.catalog-panel__title { font-weight: 700; color: var(--olv-body); }
.catalog-panel__title:hover { color: var(--olv-green-dark); }
.catalog-close { line-height: 1; font-size: 16px; color: var(--olv-text); border: 0; }
.catalog-col .catalog-group { display: block; margin-bottom: 8px; font-weight: 700; color: #222; line-height: 1.25; }
.catalog-col .catalog-group:hover, .catalog-col .catalog-group.is-selected { color: var(--olv-green-count); }
.catalog-col .catalog-group { display: flex; align-items: center; gap: 8px; }
.catalog-group__icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--olv-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--olv-green-dark); }
.catalog-group__text { min-width: 0; }
.catalog-col .catalog-group .count, .catalog-col .catalog-link span { color: var(--olv-green-count); font-weight: 400; }
.catalog-col .catalog-link { display: block; margin: 6px 0; font-size: .95rem; line-height: 1.25; color: #2B2B2B; }
.catalog-col .catalog-link:hover, .catalog-col .catalog-link.is-selected { color: var(--olv-green-count); }
.catalog-col__toggle { display: none; }

/* Оверлей (мега-меню, мобильное меню) */
.olv-overlay {
  position: fixed;
  inset: 0;
  z-index: 1029;
  background: rgba(46, 46, 46, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.olv-overlay.show { opacity: 1; visibility: visible; }
.olv-overlay.is-menu { z-index: 1040; }   /* над нижней навигацией, под мобильным меню */
.olv-overlay.is-light { background: rgba(46, 46, 46, .25); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.olv-lock { overflow: hidden; }

/* Мобильное бургер-меню (demo .mobile-menu) */
.olv-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1045;
  width: 350px;
  max-width: calc(100vw - 32px);
  max-height: 100vh;
  overflow-y: auto;
  padding: 44px 44px 36px;
  background: rgba(245, 245, 247, .98);
  border-radius: 0 0 0 15px;
  box-shadow: var(--olv-shadow-drop);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .25s ease, visibility .25s ease;
}
.olv-mobile-menu.show { transform: none; visibility: visible; }
.olv-mobile-menu__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: url("../img/icons/close.png") no-repeat center / contain;
  cursor: pointer;
}
.olv-mobile-menu__nav { display: flex; flex-direction: column; align-items: flex-end; }
.olv-mobile-menu__nav .menu-item { margin-top: 20px; text-align: right; color: #6F7377; }
.olv-mobile-menu__nav .menu-item:hover, .olv-mobile-menu__nav .menu-item.is-active { color: var(--olv-green-dark); }
.olv-mobile-menu__nav .menu-item::after { top: 5px; }
.olv-mobile-menu__user { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--olv-border); }
.olv-mobile-menu__user a, .olv-mobile-menu__user button { color: var(--olv-text); font-weight: 500; background: none; border: 0; padding: 0; }
.olv-mobile-menu__user a:hover, .olv-mobile-menu__user button:hover { color: var(--olv-green-dark); }
.olv-mobile-menu .tel-block { margin-top: 30px; display: flex; justify-content: flex-end; }
.olv-mobile-menu .tel-block a { color: #6F7377; }

@media (max-width: 1399.98px) {
  .menu-item { padding: 0 15px 0 10px; }
}
@media (max-width: 1199.98px) {
  .menu-wrapper { flex-wrap: wrap; justify-content: space-between; padding: 10px 0; row-gap: 10px; }
  .img-logo { order: 1; }
  .tel-block { order: 2; }
  .nav-list { order: 3; width: 100%; justify-content: center; }
}
@media (max-width: 991.98px) {
  .menu-wrapper { flex-wrap: nowrap; padding: 0; min-height: 60px; }
  .burger-btn { order: 4; }
  .search-block { margin: 0 20px; }
  .users-block { gap: 16px; }
}
@media (max-width: 767.98px) {
  .burger-btn { width: 30px; height: 30px; }
  .under-menu { flex-wrap: wrap; padding: 32px 0 30px; row-gap: 20px; }
  .menu-catalog-btn { order: 0; }
  .users-block { order: 1; }
  .search-block { order: 2; flex: 0 0 100%; width: 100%; margin: 0; }
  .catalog-panel { max-height: none; overflow: visible; }
  .catalog-panel .row { --bs-gutter-y: .25rem; }
  .catalog-col { border-bottom: 1px solid #F1F1F1; padding-bottom: 6px; position: relative; }
  .catalog-col .catalog-group { margin: 6px 44px 6px 0; }
  .catalog-col.has-children .catalog-link { display: none; padding-left: 12px; }
  .catalog-col.is-open .catalog-link { display: block; }
  .catalog-col__toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--olv-green);
  }
  .catalog-col__toggle::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
  }
  .catalog-col.is-open .catalog-col__toggle::before { transform: rotate(-135deg); margin-top: 6px; }
}
@media (max-width: 575.98px) {
  .menu-catalog-btn { flex-basis: 106px; padding-left: 26px; }
  .menu-catalog-btn::before { left: 6px; }
  .users-block { gap: 12px; }
  .user-item { font-size: 13px; }
}
@media (max-width: 359.98px) {
  .menu-catalog-btn { flex-basis: 96px; font-size: 14px; }
  .users-block { gap: 8px; }
  .user-item { font-size: 12px; }
}

/* ---------- 12. Нижняя мобильная навигация ---------- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--olv-header);
  border-top: 3px solid var(--olv-green-2);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767.98px) {
  .mobile-bottom-nav { display: flex; align-items: stretch; }
  body { padding-bottom: 64px !important; }   /* main.css: body{padding:0!important} */
}
.mobile-bottom-nav__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  color: #C9CBCF;
}
.mobile-bottom-nav__item:hover { color: #fff; }
.mobile-bottom-nav__item--active, .mobile-bottom-nav__item--active:hover { color: var(--olv-green); }
.mobile-bottom-nav__icon { position: relative; display: inline-flex; }
.mobile-bottom-nav__icon svg { display: block; }
.mobile-bottom-nav__label { max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 500; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.mobile-bottom-nav__badge { position: absolute; top: -7px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; border-radius: 8px; }

/* ---------- 13. Подвал (demo footer.php) ---------- */
.olv-footer { padding: 40px; background: var(--olv-footer); color: var(--olv-bg); }
.olv-footer .img-logo { width: 111px; }
.footer-network { display: flex; gap: 15px; margin: 30px 0 40px; }
.footer-network a { display: block; width: 40px; height: 40px; transition: opacity .3s; }
.footer-network a:hover { opacity: .7; }
.footer-network img { width: 40px; height: 40px; }
.footer-title { margin-bottom: 30px; color: var(--olv-green-2); font-size: 18px; font-weight: 600; line-height: 1.2; text-transform: uppercase; }
.footer-link { display: block; margin-top: 15px; color: var(--olv-bg); font-size: 18px; line-height: 1.2; }
.footer-link:hover, .footer-link:focus { color: var(--olv-green-2); }
.footer-copy { color: var(--olv-bg); font-size: 16px; }
.footer-legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(245, 245, 247, .12); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.footer-legal a { color: #B9BBC1; }
.footer-legal a:hover { color: var(--olv-green-2); }
.footer-legal .footer-link { display: inline; margin: 0; font-size: 14px; color: #B9BBC1; }
@media (max-width: 575.98px) {
  .olv-footer { padding: 40px 40px 30px; }
}

/* ---------- 14. Утилиты ---------- */
.olv-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
.olv-mt-section { margin-top: 60px; }
.olv-rounded { border-radius: var(--olv-radius-card); }
.olv-bg-gray { background: var(--olv-bg); }
.olv-bg-white { background: #fff; }
.olv-text { color: var(--olv-text); }
.olv-fw-500 { font-weight: 500; }

/* Совместимость с классами Bootstrap 4 в шаблонах ядра/старых оверрайдах (ui.bootstrap4 убран).
   Временный мост: владельцы страниц заменяют классы на BS5 при переделке. */
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.float-right { float: right !important; }
.float-left { float: left !important; }
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.input-group-append, .input-group-prepend { display: flex; }
.input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-block { display: block; width: 100%; }
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; }
.ml-1 { margin-left: .25rem !important; } .mr-1 { margin-right: .25rem !important; }
.ml-2 { margin-left: .5rem !important; } .mr-2 { margin-right: .5rem !important; }
.ml-3 { margin-left: 1rem !important; } .mr-3 { margin-right: 1rem !important; }
.pl-2 { padding-left: .5rem !important; } .pr-2 { padding-right: .5rem !important; }
.pl-3 { padding-left: 1rem !important; } .pr-3 { padding-right: 1rem !important; }
.badge-primary { background-color: var(--olv-green); color: #fff; }
.badge-secondary { background-color: #6c757d; color: #fff; }
.custom-select { display: block; width: 100%; padding: .375rem 2.25rem .375rem .75rem; border: 1px solid var(--olv-border); border-radius: var(--olv-radius-sm); }
button.close, .close { padding: 0; background: transparent; border: 0; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; opacity: .5; }
.close:hover { opacity: .75; }

/* ---------- FX-F (круг 1) ---------- */
/* Swiper: палитра OLIVIN для всех слайдеров (по умолчанию у Swiper синий #007aff).
   Страничные стили (home.css и др.) могут переопределять переменные на своих контейнерах. */
:root {
  --swiper-theme-color: #A0D02E;
  --swiper-navigation-color: var(--olv-green);
  --swiper-pagination-color: var(--olv-green);
  --swiper-pagination-bullet-inactive-color: var(--olv-green-2);
  --swiper-pagination-bullet-inactive-opacity: .35;
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bullet-horizontal-gap: 5px;
}
.swiper-button-prev:hover, .swiper-button-next:hover { color: var(--olv-green-hover); }
.swiper-button-prev:focus-visible, .swiper-button-next:focus-visible,
.swiper-pagination-bullet:focus-visible { outline: 2px solid var(--olv-green-2); outline-offset: 2px; }

/* Кнопка «В корзине» (main.js ставит .btn--in-basket после добавления) — было inline в footer.php.
   Компоненты (карточка, детальная) уточняют вид у себя. */
.btn--in-basket,
.btn--in-basket:hover,
.btn--in-basket:focus,
.btn--in-basket:disabled {
  background: var(--olv-green-2);
  border-color: var(--olv-green-2);
  color: #fff;
  cursor: default;
  opacity: 1;
}

/* Пара кнопок «залитая + контурная»: одинаковый регистр (контурная .btn-main по умолчанию UPPERCASE) */
.olv-btn ~ .btn-main,
.btn-main[href^="mailto:"] { text-transform: none; }