/**
 * INTERTEX-FABRIC.COM — CSS FIXES
 * Файл с исправлениями вёрстки главной страницы
 * Дата: 2026-05-18
 *
 * Содержит только исправления, не дублирует базовый style.css
 * Подключается ПОСЛЕ style.css в index.php
 */

/* ======================================================
   ИСПРАВЛЕНИЕ 1: Изображения в каталоге-модуле
   ПРОБЛЕМА: .brilliant_module_prods_prods img { width: 150% }
   вызывает переполнение контейнера на 50%.
   ====================================================== */
.brilliant_module_prods_prods img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ======================================================
   ИСПРАВЛЕНИЕ 2а: Позиционирование метки категории
   ПРОБЛЕМА: .brilliant_module_prods_cats_category_name_pusher находился
   внутри .brilliant_module_prods_cats_menu, у которого overflow-x:hidden.
   Это обрезало .brilliant_module_prods_cats_category_name при right:-30px.
   РЕШЕНИЕ: Переместили pusher в .brilliant_module_prods_cats (вне меню).
   Pusher получает width:37% (= ширина меню), фиксируя правый край меню
   как опорную точку позиционирования метки.

   ИСПРАВЛЕНИЕ 2б: Дизайн «папочная вкладка»
   ПРОБЛЕМА: right:-30px давало badge, у которого 120px находилось ВНУТРИ
   меню и лишь 30px выступало наружу. До фикса это обрезалось overflow-x:hidden
   и выглядело как узкая полоска. После фикса весь badge (150px) стал виден
   внутри меню — слишком широко.
   РЕШЕНИЕ: right:-120px → 30px в меню + 120px над изображением = folder-tab.
   Ширина фиксируется 150px (из оригинального дизайна, не процент).
   ====================================================== */
.brilliant_module_prods_cats {
  position: relative;
}

/* Pusher — direct child левой панели, абсолютно позиционирован.
   width:37% = ширина меню (оба — 37% от .brilliant_module_prods_cats).
   Служит опорой для right:-120px на .category_name. */
.brilliant_module_prods_cats > .brilliant_module_prods_cats_category_name_pusher {
  position: absolute;
  top: 0;
  left: 0;
  width: 37%;
  height: 70px;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

/* Метка категории — дизайн «папочная вкладка»:
   30px заходит в меню (правый край), 120px выступает над изображением. */
.brilliant_module_prods_cats > .brilliant_module_prods_cats_category_name_pusher
.brilliant_module_prods_cats_category_name {
  pointer-events: auto;
  width: 150px;    /* фиксированная ширина, не процент */
  right: -120px;   /* folder-tab: 120px выступает за правый край меню */
}

/* Добавляем отступ сверху в меню, чтобы первый пункт не скрывался за меткой */
.brilliant_module_prods_cats_menu {
  padding-top: 70px;
  box-sizing: border-box;
}

/* ======================================================
   ИСПРАВЛЕНИЕ 2: Высота grid-блока каталога
   ПРОБЛЕМА: height: auto на родителе обнуляет высоту дочерних
   элементов с height: 100% / height: 50% (categ_image_wrapper),
   что делает правый столбец продуктов невидимым.
   ИСПРАВЛЕНИЕ: возвращаем явные vw-высоты — grid работает корректно.
   ====================================================== */
.brilliant_module_prods_cats_block {
  height: 40vw;
  max-height: 589px;
}

.brilliant_module_prods_prods_lines {
  height: 36vw;
  max-height: 540px;
}

.brilliant_module_prods_prods_line {
  height: 36vw;
  max-height: 540px;
}

/* ======================================================
   ИСПРАВЛЕНИЕ 3: Блок обратной связи — недостающий CSS
   ПРОБЛЕМА: .wrap-feedback и дочерние классы не имеют
   никаких правил в загружаемых CSS-файлах.
   Блок отображается как несколько обычных div без layout.
   ====================================================== */
.wrap-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background-color: #fffbf2;
  border: 1px solid #f0e7d3;
  border-radius: 4px;
  margin: 30px 0;
  padding: 30px 20px;
  box-sizing: border-box;
}

.wrap-feedback-info {
  flex: 1 1 40%;
  min-width: 260px;
  padding: 10px 30px 10px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrap-feedback-form {
  flex: 1 1 55%;
  min-width: 280px;
  padding: 10px;
  box-sizing: border-box;
}

.feedback-info-title .sscf-header {
  font-family: 'Philosopher', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #672814;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 15px;
}

.feedback-line {
  width: 60px;
  height: 2px;
  background-color: #CDB481;
  margin: 15px 0;
}

.feedback-text .sscf-footer {
  font-size: 15px;
  color: #726a57;
  line-height: 1.6;
}

.feedback-form-block {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #f0e7d3;
}

.feedback-form-title {
  font-family: 'Philosopher', Arial, sans-serif;
  font-size: 16px;
  color: #672814;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.wrap-feedback-pol {
  flex: 1 1 100%;
  font-size: 11px;
  color: #aaa;
  text-align: center;
  padding-top: 10px;
}

@media (max-width: 768px) {
  .wrap-feedback {
    flex-direction: column;
    padding: 20px 15px;
  }
  .wrap-feedback-info,
  .wrap-feedback-form {
    flex: 1 1 100%;
    padding: 10px 0;
  }
  .wrap-feedback-info {
    padding-right: 0;
  }
}

/* ======================================================
   ИСПРАВЛЕНИЕ 4: Устранение разрыва в точке 1025px
   ПРОБЛЕМА: desktop-элементы скрываются при max-width: 1024px,
   а мобильное меню появляется при max-width: 1025px.
   На ширине ровно 1025px — разрыв: desktop скрыт, мобиль тоже.
   ИСПРАВЛЕНИЕ: синхронизируем breakpoint.
   ====================================================== */
@media (max-width: 1025px) {
  .header_info,
  .header_search_brilliant,
  .lang,
  .header_product {
    display: none;
  }
  .burger {
    display: block;
  }
  .mob_icons {
    display: block;
  }
}

/* ======================================================
   ИСПРАВЛЕНИЕ 5: Адаптивность #pochemu
   ПРОБЛЕМА: 5 колонок на десктопе → 2 на мобиле без промежуточного.
   На планшете (769–1024px) 5 очень узких колонок = плохо.
   ====================================================== */
@media (max-width: 992px) and (min-width: 769px) {
  #pochemu .colums {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ======================================================
   ИСПРАВЛЕНИЕ 6: Изображения товаров (new products section)
   ПРОБЛЕМА: Нет object-fit на изображениях новинок —
   могут тянуться при нестандартных пропорциях.
   ====================================================== */
.product-image-wrapper img,
.featuredProductImage {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ======================================================
   ИСПРАВЛЕНИЕ 7: Мобильный вид каталога-модуля
   ПРОБЛЕМА: .brilliant_module_cats_block_image_wrapper имеет height: 50%
   При height: auto на родительских контейнерах это даёт 0 → фон не рендерится.
   ИСПРАВЛЕНИЕ 2026-05-19: flex-layout + явный vw для image_wrapper.
   Flex позволяет контейнерам расширяться, explicit vw не зависит от родителя.
   ====================================================== */
@media (max-width: 1024px) {
  .brilliant_module_prods_cats_block {
    height: auto;
    max-height: none;
  }
  .brilliant_module_prods_prods {
    height: auto;
    max-height: none;
    width: 100%;
  }
  .brilliant_module_prods_prods_lines {
    height: auto;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
  }
  .brilliant_module_prods_prods_line {
    height: auto;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  /* КЛЮЧЕВОЕ: explicit vw вместо height:50% (50% от auto = 0) */
  .brilliant_module_cats_block_image_wrapper {
    height: 44vw;
    max-height: 300px;
    width: 50%;
    float: none;
    display: flex;
  }
  .brilliant_module_cats_block_image {
    height: 100%;
    width: 100%;
  }
  .brilliant_module_prods_cats_main_image {
    height: 60vw;
    max-height: 400px;
    width: 100%;
    float: none;
  }
}

/* ======================================================
   ИСПРАВЛЕНИЕ 8: Изображение в main_img_block
   ПРОБЛЕМА: background-image без height → нулевая высота блока
   ====================================================== */
.brilliant_module_prods_cats_main_image .main_img_block {
  min-height: 300px;
}

@media (max-width: 1024px) {
  .brilliant_module_prods_cats_main_image .main_img_block {
    min-height: 50vw;
  }
}

/* ======================================================
   ИСПРАВЛЕНИЕ 9: Smart Slider — обрезка на мобиле
   ПРОБЛЕМА: Слои слайдера имеют абсолютные пиксельные координаты
   (left: 889px, left: 1152px), которые выходят за экран на мобиле.
   ====================================================== */
@media (max-width: 767px) {
  .n2-ss-layer {
    left: 50% !important;
    transform: translateX(-50%);
    width: 90% !important;
    max-width: 90vw;
    text-align: center;
  }
  #n2-ss-1 .n2-ss-slider-3 {
    overflow: hidden;
  }
}

/* ======================================================
   ИСПРАВЛЕНИЕ 10: Исправление overflow тела страницы на мобиле
   ПРОБЛЕМА: position: absolute у .all_content при перегрузке
   мобильного слайдера даёт горизонтальный скролл.
   ====================================================== */
body {
  overflow-x: hidden;
}

/* ======================================================
   ИСПРАВЛЕНИЕ 11: Категориальная сетка — планшет
   ПРОБЛЕМА: 4 колонки на планшете (768–992px) слишком узкие.
   ====================================================== */
@media (max-width: 991px) and (min-width: 577px) {
  .category-module .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .category-module .category-item .category-image {
    height: 280px;
  }
}

/* ======================================================
   ИСПРАВЛЕНИЕ 12: Footer flex на мобиле
   ПРОБЛЕМА: flex-menu position: absolute в footer может
   перекрывать другие элементы при уменьшении ширины.
   ====================================================== */
@media (max-width: 1024px) {
  .flex-menu {
    position: static;
    display: none;
  }
}


/* ======================================================
   ИСПРАВЛЕНИЕ 13: Скрытие статей блога на главной странице
   ПРОБЛЕМА: На /ro/ главная страница отображает 3 полные статьи блога
   с метаданными (автор, дата, счётчик, кнопки print/email).
   На EN/UA/RU страницах статьи в blog-featured отсутствуют.
   Это создаёт очень длинную страницу с нерелевантным layout'ом.
   ИСПРАВЛЕНИЕ: Скрываем список статей на главной, оставляем только H1.
   SEO-текст обеспечивается модулем seo_inmain (уже настроен для /ro/).
   ====================================================== */
.home-page .blog-featured .items-leading,
.home-page .blog-featured .items-intro,
.home-page .blog-featured .items-row {
  display: none !important;
}

/* ======================================================
   ИСПРАВЛЕНИЕ 14: Стилизация H1 на главной странице
   ПРОБЛЕМА: H1 внутри .page-header не имеет корректных отступов
   при отображении рядом со статьями блога.
   ИСПРАВЛЕНИЕ: Добавляем отступы и центрирование для page-header на главной.
   ====================================================== */
.home-page .blog-featured .page-header {
  text-align: center;
  padding: 20px 0 10px 0;
  margin-bottom: 0;
  border-bottom: none;
}

.home-page .blog-featured .page-header h1 {
  margin-bottom: 10px;
}


/* ======================================================
   ИСПРАВЛЕНИЕ 15: Типографика текстового блока на главной
   ПРОБЛЕМА: .text_block имеет line-height: 25px (фиксированный),
   без font-size, цвет — чёрный по умолчанию. h2/h3 внутри блока
   не имеют стилей и выглядят несогласованно с дизайном сайта.
   ИСПРАВЛЕНИЕ: Улучшаем типографику, добавляем отступы, цвета и
   шрифтовые правила для h2/h3 в духе общего стиля сайта.
   ====================================================== */

/* Base text block — readable body text */
.text_block {
  font-size: 15px;
  line-height: 1.78;
  color: #3d3830;
  letter-spacing: 0.01em;
}

/* Paragraphs inside .text_block */
.text_block p,
.text_block .all_txt > p,
.text_block .text_hidden > p {
  margin-bottom: 1.1em;
  margin-top: 0;
  line-height: 1.78;
}

/* H2 headings — Philosopher for elegance, gold accent */
.text_block h2,
.text_block .all_txt h2,
.text_block .text_hidden h2 {
  font-family: 'Philosopher', Georgia, serif;
  font-size: 19px;
  font-weight: normal;
  color: #7a5c3a;
  line-height: 1.4;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  letter-spacing: 0.02em;
}

/* First h2 (the main section title) — a touch larger */
.text_block > h2.all_txt,
.text_block h2:first-of-type {
  font-size: 21px;
  margin-top: 0;
  margin-bottom: 0.8em;
}

/* H3 subheadings — Century Gothic bold, muted dark */
.text_block h3,
.text_block .all_txt h3,
.text_block .text_hidden h3 {
  font-family: "Century Gothic Bold", CenturyGothicBold, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #5a4e40;
  line-height: 1.5;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Lists inside text block */
.text_block ul,
.text_block .text_hidden ul {
  padding-left: 1.4em;
  margin-bottom: 1.1em;
}

.text_block ul li,
.text_block .text_hidden ul li {
  margin-bottom: 0.45em;
  line-height: 1.68;
}

/* Links inside text block */
.text_block a,
.text_block .all_txt a,
.text_block .text_hidden a {
  color: #9b6d3a;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.text_block a:hover,
.text_block .all_txt a:hover {
  color: #bca77c;
}

/* "Read more / Collapse" button — keep consistent */
.text_block .text_button {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #9b6d3a;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .text_block {
    font-size: 14px;
    line-height: 1.72;
  }
  .text_block h2,
  .text_block .all_txt h2,
  .text_block .text_hidden h2 {
    font-size: 17px;
    margin-top: 1.5em;
  }
  .text_block h3,
  .text_block .all_txt h3,
  .text_block .text_hidden h3 {
    font-size: 13px;
  }
}

/* ======================================================
   ИСПРАВЛЕНИЕ 16: Типографика страниц "О нас" (.wrap_new)
   ПРОБЛЕМА: Контейнер .wrap_new (шаблон статей-партнёров)
   наследует только базовые стили из style.css — нет Philosopher,
   нет фирменного цвета #7a5c3a, неправильный font-size и line-height.
   ИСПРАВЛЕНИЕ: Приводим к общему стилю сайта.
   Дата: 2026-05-18
   ====================================================== */

/* H2 — Philosopher, warm golden-brown */
.wrap_new h2 {
  font-family: 'Philosopher', Georgia, serif;
  font-size: 22px;
  font-weight: normal;
  color: #7a5c3a;
  line-height: 1.4;
  margin-top: 1.8em;
  margin-bottom: 0.7em;
}

/* First h2 (section intro) — slightly smaller top margin */
.wrap_new > h2:first-of-type {
  margin-top: 0.5em;
}

/* H3 — Philosopher semibold, slightly darker */
.wrap_new h3 {
  font-family: 'Philosopher', Georgia, serif;
  font-size: 17px;
  font-weight: bold;
  color: #5a4230;
  line-height: 1.45;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Body paragraphs — Century Gothic, readable */
.wrap_new p {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 15px;
  line-height: 1.78;
  color: #3d3830;
  margin-bottom: 1.1em;
}

/* Italic emphasis — keep warm tone */
.wrap_new p em {
  color: #7a5c3a;
}

/* List items — match body text */
.wrap_new ul li,
.wrap_new ol li {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 15px;
  line-height: 1.78;
  color: #3d3830;
  margin-bottom: 0.35em;
}

/* List item paragraphs — keep body color */
.wrap_new ul li p,
.wrap_new ol li p {
  font-size: 15px;
  color: #3d3830;
}

/* Bold inside paragraphs and lists */
.wrap_new strong {
  color: #5a4230;
  font-weight: 600;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .wrap_new h2 {
    font-size: 18px;
    margin-top: 1.5em;
  }
  .wrap_new h3 {
    font-size: 15px;
    margin-top: 1.2em;
  }
  .wrap_new p,
  .wrap_new ul li,
  .wrap_new ol li {
    font-size: 14px;
    line-height: 1.7;
  }
}


/* ======================================================
   ИСПРАВЛЕНИЕ 18: Восстановление мобильных плиток категорий
   ПРОБЛЕМА: ИСПРАВЛЕНИЕ 7 ставит display:flex на .prods_line,
   но flex-item — это <a>-обёртка (без явной width), а не сам
   .brilliant_module_cats_block_image_wrapper. <a> по умолчанию
   inline и в flex-контексте шринкается до ~8px (видна только
   padding-left) → плитки невидимы, виден только пустой блок
   и ссылка «Дивитись все».
   РЕШЕНИЕ: задаём <a> внутри .brilliant_module_prods_prods_line
   как блочный flex-item с шириной 50%, а внутренний wrapper
   делаем 100% от <a>. Высота берётся из ИСПРАВЛЕНИЯ 7 (44vw).
   Десктоп не трогаем — там <a> уже работает через float'ы.
   Дата: 2026-05-22
   ====================================================== */
@media (max-width: 1024px) {
  .brilliant_module_prods_prods_line > a {
    display: block;
    width: 50%;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
  }
  .brilliant_module_prods_prods_line > a > .brilliant_module_cats_block_image_wrapper {
    width: 100%;
    float: none;
  }
}


/* ======================================================
   ИСПРАВЛЕНИЕ 17: Сетка подкатегорий VirtueMart
   ПРОБЛЕМА: vm-ltr-common.css и vm-ltr-site.css не загружаются
   на страницах категорий (template override отключает VM CSS).
   Без этих файлов классы .width33 и .floatleft не определены —
   подкатегории отображаются вертикально вместо сетки 3×N.
   ИСПРАВЛЕНИЕ: Добавляем минимально необходимые правила сетки.
   Дата: 2026-05-20
   ====================================================== */

/* Утилитарные классы VirtueMart для category grid (из vm-ltr-common.css) */
.category-view .category.floatleft {
  float: left;
}

.category-view .category.width33 {
  width: 33.333%;
  box-sizing: border-box;
}

/* clearfix для float-колонок */
.category-view .row {
  overflow: hidden;
}

.category-view {
  overflow: hidden;
}

/* Отступы внутри ячейки */
.category-view .row .category .spacer {
  padding: 8px;
  text-align: center;
}

/* Заголовок ячейки (название подкатегории) */
.category-view .row .category .spacer h2 {
  font-size: 14px;
  margin: 0 0 6px 0;
  padding: 0;
  text-align: center;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-weight: normal;
}

/* Ссылка внутри ячейки */
.category-view .row .category .spacer h2 a {
  display: block;
  color: #5a4230;
  text-decoration: none;
}

.category-view .row .category .spacer h2 a:hover {
  color: #9b6d3a;
}

/* Изображение подкатегории */
.category-view .row .category .spacer h2 a img {
  margin: 4px auto 0 auto;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Горизонтальный разделитель между рядами */
.category-view .horizontal-separator {
  clear: both;
  height: 12px;
}

/* Адаптивность: планшет — 2 колонки (577–992px) */
@media (max-width: 992px) and (min-width: 577px) {
  .category-view .category.width33 {
    width: 50%;
  }
}

/* Адаптивность: мобиль — 1 колонка (≤576px) */
@media (max-width: 576px) {
  .category-view .category.width33 {
    width: 100%;
    float: none;
  }
  .category-view .row {
    overflow: visible;
  }
}


/* ======================================================
   ИСПРАВЛЕНИЕ 19: Smart Slider #n2-ss-1/2/3/4 на мобиле
   ПРОБЛЕМА:
     • Слой-родитель .n2-ss-slide на 375px имеет только 127px
       высоты — текстовые слои не помещаются.
     • Все .n2-ss-layer получают глобальный left:50% + translateX(-50%)
       из ИСПРАВЛЕНИЯ 9, поэтому стекаются друг на друга в одной точке
       (визуальная каша поверх фото). Текст выходит за пределы
       слайда (Кнопка left:195, width:290 — кадрируется).
     • Декоративные «внутренние» логотипы (logo.png, logo2.png,
       7D900CB2*, 2065ACE1*) перекрывают основной заголовок и
       полностью дублируют логотип сайта в шапке.
     • ИСПРАВЛЕНИЕ 9 целится в #n2-ss-1 (не существует), поэтому
       overflow: hidden туда не приложился.
   РЕШЕНИЕ:
     1) Растягиваем .n2-ss-slide / .n2-ss-canvas до min-height 260px.
     2) Прячем декоративные image-слои (data-name содержит logo
        или хэш картинки), оставляем только текст + кнопку.
     3) Текстовые слои и кнопку центрируем горизонтально и
        раскладываем по вертикали через z-index селектор
        (Smart Slider пишет z-index прямо в инлайн-style).
     4) Используем !important — у Smart Slider все слои имеют
        инлайн-стили вида style="z-index:N;left:...px;top:...px",
        и часть JS-движка проставляет ещё и inset/transform.
   Десктоп (>=768px) не затронут.
   Дата: 2026-05-22
   ====================================================== */
@media (max-width: 767px) {
  /* 1. Высота слайда — даём место под 3 строки текста + кнопку.
        Smart Slider 3 ставит фиксированную высоту на саму #n2-ss-1/2/3/4
        и вложенные .n2-ss-slider-N, поэтому min-height нужно
        проставить на всю цепочку, иначе слайд (.n2-ss-canvas)
        переполняет видимую область слайдера и обрезается. */
  #n2-ss-1,
  #n2-ss-2,
  #n2-ss-3,
  #n2-ss-4,
  #n2-ss-1 .n2-ss-slider-1,
  #n2-ss-2 .n2-ss-slider-1,
  #n2-ss-3 .n2-ss-slider-1,
  #n2-ss-4 .n2-ss-slider-1,
  #n2-ss-1 .n2-ss-slider-2,
  #n2-ss-2 .n2-ss-slider-2,
  #n2-ss-3 .n2-ss-slider-2,
  #n2-ss-4 .n2-ss-slider-2,
  #n2-ss-1 .n2-ss-slider-3,
  #n2-ss-2 .n2-ss-slider-3,
  #n2-ss-3 .n2-ss-slider-3,
  #n2-ss-4 .n2-ss-slider-3,
  #n2-ss-1 .n2-ss-slide,
  #n2-ss-2 .n2-ss-slide,
  #n2-ss-3 .n2-ss-slide,
  #n2-ss-4 .n2-ss-slide,
  #n2-ss-1 .n2-ss-canvas,
  #n2-ss-2 .n2-ss-canvas,
  #n2-ss-3 .n2-ss-canvas,
  #n2-ss-4 .n2-ss-canvas {
    min-height: 280px !important;
  }
  #n2-ss-1 .n2-ss-slider-3,
  #n2-ss-2 .n2-ss-slider-3,
  #n2-ss-3 .n2-ss-slider-3,
  #n2-ss-4 .n2-ss-slider-3 {
    overflow: hidden;
  }

  /* 2. Прячем декоративные изображения внутри слайдов (логотип
        INTER TEX, бейджи). На 375px они не читаемы и перекрывают
        заголовок. Smart Slider JS в рантайме форсит display:block
        обратно через inline-стиль, поэтому надёжнее затаить через
        opacity+visibility+нулевую высоту/ширину и сдвинуть в угол. */
  #n2-ss-1 .n2-ss-layer[data-name*="logo"],
  #n2-ss-2 .n2-ss-layer[data-name*="logo"],
  #n2-ss-3 .n2-ss-layer[data-name*="logo"],
  #n2-ss-4 .n2-ss-layer[data-name*="logo"],
  #n2-ss-1 .n2-ss-layer[data-name*="7D900CB2"],
  #n2-ss-2 .n2-ss-layer[data-name*="7D900CB2"],
  #n2-ss-3 .n2-ss-layer[data-name*="7D900CB2"],
  #n2-ss-4 .n2-ss-layer[data-name*="7D900CB2"],
  #n2-ss-1 .n2-ss-layer[data-name*="2065ACE1"],
  #n2-ss-2 .n2-ss-layer[data-name*="2065ACE1"],
  #n2-ss-3 .n2-ss-layer[data-name*="2065ACE1"],
  #n2-ss-4 .n2-ss-layer[data-name*="2065ACE1"] {
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    top: -9999px !important;
    left: -9999px !important;
    transform: none !important;
  }
  /* На всякий случай — глушим содержимое скрытых слоёв тоже. */
  #n2-ss-1 .n2-ss-layer[data-name*="logo"] img,
  #n2-ss-2 .n2-ss-layer[data-name*="logo"] img,
  #n2-ss-3 .n2-ss-layer[data-name*="logo"] img,
  #n2-ss-4 .n2-ss-layer[data-name*="logo"] img,
  #n2-ss-1 .n2-ss-layer[data-name*="7D900CB2"] img,
  #n2-ss-2 .n2-ss-layer[data-name*="7D900CB2"] img,
  #n2-ss-3 .n2-ss-layer[data-name*="7D900CB2"] img,
  #n2-ss-4 .n2-ss-layer[data-name*="7D900CB2"] img,
  #n2-ss-1 .n2-ss-layer[data-name*="2065ACE1"] img,
  #n2-ss-2 .n2-ss-layer[data-name*="2065ACE1"] img,
  #n2-ss-3 .n2-ss-layer[data-name*="2065ACE1"] img,
  #n2-ss-4 .n2-ss-layer[data-name*="2065ACE1"] img {
    display: none !important;
  }

  /* 3. Центрируем оставшиеся слои (текст + кнопка) горизонтально.
        Используем !important — нужно бить инлайн left:NNNpx + inset.
        :not() исключает скрытые декоративные слои. */
  #n2-ss-1 .n2-ss-layer:not([data-name*="logo"]):not([data-name*="7D900CB2"]):not([data-name*="2065ACE1"]),
  #n2-ss-2 .n2-ss-layer:not([data-name*="logo"]):not([data-name*="7D900CB2"]):not([data-name*="2065ACE1"]),
  #n2-ss-3 .n2-ss-layer:not([data-name*="logo"]):not([data-name*="7D900CB2"]):not([data-name*="2065ACE1"]),
  #n2-ss-4 .n2-ss-layer:not([data-name*="logo"]):not([data-name*="7D900CB2"]):not([data-name*="2065ACE1"]) {
    left: 50% !important;
    right: auto !important;
    inset-inline-start: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 90vw !important;
    text-align: center !important;
  }
  #n2-ss-1 .n2-ss-layer p,
  #n2-ss-2 .n2-ss-layer p,
  #n2-ss-3 .n2-ss-layer p,
  #n2-ss-4 .n2-ss-layer p {
    text-align: center !important;
    margin: 0 !important;
  }

  /* Подгоняем размер заголовков под узкий экран. */
  #n2-ss-1 .n2-ss-layer p,
  #n2-ss-2 .n2-ss-layer p,
  #n2-ss-3 .n2-ss-layer p,
  #n2-ss-4 .n2-ss-layer p {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
    /* Кнопка "Детальніше" — нормальная ширина (не на весь экран). */
  #n2-ss-1 .nextend-smartslider-button-container,
  #n2-ss-2 .nextend-smartslider-button-container,
  #n2-ss-3 .nextend-smartslider-button-container,
  #n2-ss-4 .nextend-smartslider-button-container {
    display: inline-block !important;
    white-space: nowrap !important;
  }
}

/* ======================================================
   ИСПРАВЛЕНИЕ 19b: Smart Slider #n2-ss-1/2/3/4 — читабельный
   font-size на мобиле.
   ПРОБЛЕМА: контейнер #n2-ss-1/2/3/4 имеет inline font-size:4px
   (это base-unit Smart Slider'а для em-расчётов). Все
   text-слои наследуют 4px и рендерятся микроскопическими
   («Весільний», «Кращі матеріали для виготовлення...»,
   «Детальніше» — невидимы глазу на 375px).
   РЕШЕНИЕ: переопределяем font-size напрямую на <p>/<a>
   внутри .n2-ss-layer для мобильного брейкпоинта.
   Десктоп не затронут (там font-size: 20px на #n2-ss-1/2/3/4).
   Дата: 2026-05-22 (stepF)
   ====================================================== */
@media (max-width: 767px) {
  #n2-ss-1 .n2-ss-layer p,
  #n2-ss-2 .n2-ss-layer p,
  #n2-ss-3 .n2-ss-layer p,
  #n2-ss-4 .n2-ss-layer p,
  #n2-ss-1 .n2-ss-layer a,
  #n2-ss-2 .n2-ss-layer a,
  #n2-ss-3 .n2-ss-layer a,
  #n2-ss-4 .n2-ss-layer a,
  #n2-ss-1 .n2-ss-layer span,
  #n2-ss-2 .n2-ss-layer span,
  #n2-ss-3 .n2-ss-layer span,
  #n2-ss-4 .n2-ss-layer span,
  #n2-ss-1 .n2-ss-layer h1,
  #n2-ss-2 .n2-ss-layer h1,
  #n2-ss-3 .n2-ss-layer h1,
  #n2-ss-4 .n2-ss-layer h1,
  #n2-ss-1 .n2-ss-layer h2,
  #n2-ss-2 .n2-ss-layer h2,
  #n2-ss-3 .n2-ss-layer h2,
  #n2-ss-4 .n2-ss-layer h2,
  #n2-ss-1 .n2-ss-layer h3,
  #n2-ss-2 .n2-ss-layer h3,
  #n2-ss-3 .n2-ss-layer h3,
  #n2-ss-4 .n2-ss-layer h3,
  #n2-ss-1 .n2-ss-layer h4,
  #n2-ss-2 .n2-ss-layer h4,
  #n2-ss-3 .n2-ss-layer h4,
  #n2-ss-4 .n2-ss-layer h4 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  /* Кнопка "Детальніше" — меньший шрифт + читаемый padding */
  #n2-ss-1 .n2-ss-button-container a,
  #n2-ss-2 .n2-ss-button-container a,
  #n2-ss-3 .n2-ss-button-container a,
  #n2-ss-4 .n2-ss-button-container a,
  #n2-ss-1 .n2-ss-layer a[class*="button"],
  #n2-ss-2 .n2-ss-layer a[class*="button"],
  #n2-ss-3 .n2-ss-layer a[class*="button"],
  #n2-ss-4 .n2-ss-layer a[class*="button"],
  #n2-ss-1 .n2-ss-layer .n2-style,
  #n2-ss-2 .n2-ss-layer .n2-style,
  #n2-ss-3 .n2-ss-layer .n2-style,
  #n2-ss-4 .n2-ss-layer .n2-style {
    font-size: 14px !important;
    padding: 8px 18px !important;
  }
}