/* Sunny home: первый экран главной — баннер, категории, популярные товары.
   Селекторы привязаны к фактическим корням блоков главной
   (.drag-block.container.BIG_BANNER_INDEX / CATALOG_SECTIONS / CATALOG_TAB),
   поэтому CSS автоматически действует и на AJAX-подгрузку блоков.
   PHP-шаблоны при этом не менялись (план H/I/J, вариант «CSS и штатный вид»). */

/* ================ КОНТЕЙНЕР ГЛАВНОЙ ================ */
/* Эталон: контейнер 1408px, поля 64px на 1536 (план D). У Aspro на главной
   двойные горизонтальные отступы (wrapper_inner 30px + maxwidth-theme 30px) —
   на главной сводим их к эталону. Другие страницы не затрагиваются. */
.wrapper1.front_page .wrapper_inner.front {
  padding-left: 0;
  padding-right: 0;
}
.wrapper1.front_page .container_inner {
  max-width: var(--sunny-container);
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}
.wrapper1.front_page .drag-block.container {
  padding-left: 0;
  padding-right: 0;
}
.wrapper1.front_page .drag-block.container .maxwidth-theme {
  padding-left: 0;
  padding-right: 0;
}
.wrapper1.front_page .header-wrapper .maxwidth-theme {
  padding-left: 0;
  padding-right: 0;
}

/* ================= БАННЕР ================= */

/* Светло-жёлтая подложка вместо фоновой картинки слайда.
   Инлайн-фон слайда перекрывается адресно (документировано в sunny-selectors.md);
   радиус задаёт обёртка top_big_banners (у неё уже есть overflow:hidden в разметке). */
.BIG_BANNER_INDEX .main-slider__item,
.BIG_BANNER_INDEX .main-slider__item .main_info {
  background-color: var(--sunny-hero-bg);
  background-image: none !important;
}
.BIG_BANNER_INDEX .top_big_banners {
  border-radius: var(--sunny-radius-hero);
  overflow: hidden;
}
.BIG_BANNER_INDEX .top_slider_wrapp {
  background: transparent;
}

/* Две колонки: текст слева ~44%, изображение справа ~56% (план D). */
.BIG_BANNER_INDEX .main_info {
  display: flex;
  align-items: stretch;
}
.BIG_BANNER_INDEX td.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 44%;
  min-width: 0;
  padding: 30px 0 28px 52px;
}
.BIG_BANNER_INDEX td.img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56%;
  min-width: 0;
  padding: 12px;
}
.BIG_BANNER_INDEX td.img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 316px;
  object-fit: contain;
}

/* Заголовок баннера — живой HTML. H1 на главной остаётся в SEO-интро index.php,
   поэтому баннерный заголовок (TITLE_H1=N → span.head-title) оформляем как крупный H2. */
.BIG_BANNER_INDEX .banner_title {
  width: auto;
  max-width: none;
  padding-right: 24px;
}
.BIG_BANNER_INDEX .head-title {
  margin: 0 0 12px;
  font-size: clamp(40px, 3.7vw, 56px);
  line-height: 1.08;
  font-weight: 700;
  color: var(--sunny-text);
}
.BIG_BANNER_INDEX .banner_text {
  margin: 0 0 20px;
  font-size: 22px;
  line-height: 1.35;
  color: var(--sunny-text);
}
.BIG_BANNER_INDEX .banner_buttons {
  display: flex;
  gap: var(--sunny-space-2);
}
.BIG_BANNER_INDEX .banner_buttons .btn {
  min-height: 46px;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
}

/* Служебные элементы слайдера не выводим для одиночного баннера */
.BIG_BANNER_INDEX .swiper-pagination,
.BIG_BANNER_INDEX .swiper-button-prev,
.BIG_BANNER_INDEX .swiper-button-next {
  display: none;
}

/* ================= КАТЕГОРИИ ================= */

/* Заголовок блока (если задан TITLE_BLOCK): 28–30px + ссылка справа */
.CATALOG_SECTIONS .top_block_title {
  font-size: 28px;
  font-weight: 700;
  color: var(--sunny-text);
}

/* Сетка: 4 колонки от 1280px. Перезаписываем bootstrap-колонки внутри блока.
   Специфичность повышена префиксом .wrapper1, чтобы побеждать правила темы вида
   .wrapper1.with_left_block .front_sections_only ... (min-width:1200px). */
.CATALOG_SECTIONS .list.items > .row.flexbox::before,
.CATALOG_SECTIONS .list.items > .row.flexbox::after,
.CATALOG_TAB .catalog_block.items::before,
.CATALOG_TAB .catalog_block.items::after {
  display: none;
  content: none;
}
.CATALOG_SECTIONS .list.items > .row.flexbox {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sunny-space-2);
}
.wrapper1 .CATALOG_SECTIONS .list.items > .row.flexbox > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* Горизонтальная карточка раздела: изображение слева ~45%, название справа */
.CATALOG_SECTIONS .item.section_item,
.CATALOG_SECTIONS .sections_wrapper .item.bg-white {
  display: flex;
  align-items: center;
  min-height: 144px;
  background-color: var(--sunny-surface);
  border: 1px solid var(--sunny-border);
  border-radius: var(--sunny-radius-card);
  box-shadow: none;
  overflow: hidden;
}
.CATALOG_SECTIONS .item .img.shine {
  flex: 0 0 45%;
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px 16px 16px;
}
.CATALOG_SECTIONS .item .img.shine .thumb {
  display: block;
  width: 100%;
}
.CATALOG_SECTIONS .item .img.shine img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  max-height: 112px;
  object-fit: contain;
  margin: 0;
}
.CATALOG_SECTIONS .item .name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 16px 16px 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.CATALOG_SECTIONS .item .name a {
  color: var(--sunny-text);
  text-decoration: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.CATALOG_SECTIONS .item .name a:hover,
.CATALOG_SECTIONS .item .name a:focus {
  color: var(--sunny-primary);
}
.CATALOG_SECTIONS .item:hover {
  border-color: var(--sunny-primary);
}
/* Подразделы, пока включён SHOW_SUBSECTIONS: аккуратный список под названием
   (после интеграции SHOW_SUBSECTIONS=N строки .sect исчезают из разметки). */
.CATALOG_SECTIONS .item .section_info {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 16px 12px 12px;
}
.CATALOG_SECTIONS .item .section_info ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.CATALOG_SECTIONS .item .section_info li.sect {
  display: none;
}
.CATALOG_SECTIONS .item:has(.section_info) {
  flex-wrap: wrap;
}
.CATALOG_SECTIONS .item:has(.section_info) .img.shine {
  flex: 0 0 45%;
}
.CATALOG_SECTIONS .item:has(.section_info) .name {
  flex-basis: 100%;
  padding-bottom: 0;
}
/* Вертикальная компоновка карточки (без .section_info) на средних ширинах — ниже, в медиазапросах */

/* ================= ПОПУЛЯРНЫЕ ТОВАРЫ ================= */

/* Тема схлопывает ul.tabs_content (height:0), панели li.tab позиционирует
   абсолютно и показывает активную через JS. Переводим активную панель в поток:
   класс cur (переключение вкладок Aspro) сохраняется как контракт. */
.CATALOG_TAB ul.tabs_content {
  height: auto !important;
}
.CATALOG_TAB ul.tabs_content li.tab {
  position: static;
}
.CATALOG_TAB ul.tabs_content li.tab:not(.cur) {
  display: none;
}

/* Заголовок блока + «Смотреть все» справа */
.CATALOG_TAB .top_block_title {
  font-size: 28px;
  font-weight: 700;
  color: var(--sunny-text);
}
.CATALOG_TAB .top_block .right_block_wrapper a.font_upper {
  color: var(--sunny-primary);
  font-weight: 600;
}

/* Вкладки-подборки: спокойные пилюли, активная — фиолетовая */
.CATALOG_TAB .tabs_wrapper ul.tabs {
  gap: 6px;
}
.CATALOG_TAB .tabs_wrapper ul.tabs li {
  border: 1px solid var(--sunny-border);
  border-radius: 999px;
  background-color: var(--sunny-surface);
  color: var(--sunny-muted);
}
.CATALOG_TAB .tabs_wrapper ul.tabs li.cur {
  border-color: var(--sunny-primary);
  background-color: var(--sunny-primary);
  color: #FFFFFF;
}
.CATALOG_TAB .tabs_wrapper ul.tabs li.cur span {
  color: #FFFFFF;
}

/* Сетка товаров: 4 колонки от 1280px */
.CATALOG_TAB .catalog_block.items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sunny-space-2);
}
.wrapper1 .CATALOG_TAB .catalog_block.items > .item_block[class*="col-"] {
  width: auto;
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* Горизонтальная карточка товара: фото слева ~44%, данные справа.
   Все исходные классы, id и data-атрибуты сохраняются — только геометрия. */
.CATALOG_TAB .item_block .catalog_item_wrapp {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 254px;
  background-color: var(--sunny-surface);
  border: 1px solid var(--sunny-border);
  border-radius: var(--sunny-radius-card);
  box-shadow: none;
  overflow: hidden;
}
.CATALOG_TAB .item_block .inner_wrap {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  grid-template-areas:
    "media content"
    "media footer";
  grid-template-rows: 1fr auto;
  flex: 1 1 auto;
  min-width: 0;
}
.CATALOG_TAB .item_block .image_wrapper_block {
  grid-area: media;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16px 8px;
  background: transparent;
}
.CATALOG_TAB .item_block .image_wrapper_block img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: contain;
  margin: 0;
}
.CATALOG_TAB .item_block .item_info {
  grid-area: content;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 16px 8px 8px;
}
.CATALOG_TAB .item_block .item_info--top_block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.CATALOG_TAB .item_block .item-title a {
  color: var(--sunny-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.CATALOG_TAB .item_block .item-title a:hover {
  color: var(--sunny-primary);
}
.CATALOG_TAB .item_block .item_info--bottom_block {
  margin-top: auto;
}
.CATALOG_TAB .item_block .cost.prices .price {
  color: var(--sunny-text);
  font-weight: 700;
}
.CATALOG_TAB .item_block .cost.prices .price_old {
  color: var(--sunny-muted);
}
.CATALOG_TAB .item_block .footer_button {
  grid-area: footer;
  min-width: 0;
  padding: 8px 16px 16px 8px;
}
.CATALOG_TAB .item_block .footer_button .button_block .btn,
.CATALOG_TAB .item_block .footer_button .btn {
  width: 100%;
  min-height: 44px;
  border-radius: 6px;
  font-weight: 600;
}
/* Метка скидки — только фактическая скидка из данных, цвет danger */
.CATALOG_TAB .item_block .stickers .sticker_sale,
.CATALOG_TAB .item_block .sale_number,
.CATALOG_TAB .item_block .sticker_sale_text {
  background-color: var(--sunny-danger);
  color: #FFFFFF;
}

/* ================= АДАПТИВНОСТЬ (план K) ================= */

@media (max-width: 1279px) {
  .CATALOG_SECTIONS .list.items > .row.flexbox,
  .CATALOG_TAB .catalog_block.items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .BIG_BANNER_INDEX td.text {
    padding: 24px 0 20px 32px;
  }
  .BIG_BANNER_INDEX .head-title {
    font-size: clamp(32px, 4.4vw, 44px);
  }
  .BIG_BANNER_INDEX .banner_text {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  /* Баннер: текст сверху, изображение снизу */
  .BIG_BANNER_INDEX .main_info {
    flex-direction: column;
  }
  .BIG_BANNER_INDEX td.text {
    width: 100%;
    padding: 24px 20px 8px;
  }
  .BIG_BANNER_INDEX td.img {
    width: 100%;
    padding: 12px 20px 20px;
  }
  .BIG_BANNER_INDEX .head-title {
    font-size: 32px;
    line-height: 1.1;
  }
  .BIG_BANNER_INDEX .banner_text {
    font-size: 17px;
  }

  /* Категории: 2 колонки, фото над названием (вертикальная карточка) */
  .CATALOG_SECTIONS .list.items > .row.flexbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .CATALOG_SECTIONS .item.section_item,
  .CATALOG_SECTIONS .sections_wrapper .item.bg-white {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .CATALOG_SECTIONS .item .img.shine {
    width: 100%;
    flex-basis: auto;
    padding: 16px 16px 0;
  }
  .CATALOG_SECTIONS .item .img.shine img {
    max-width: 100%;
    max-height: 96px;
  }
  .CATALOG_SECTIONS .item .name {
    padding: 10px 16px 16px;
    font-size: 15px;
  }

  /* Товары: 1 колонка, карточка остаётся горизонтальной */
  .CATALOG_TAB .catalog_block.items {
    grid-template-columns: minmax(0, 1fr);
  }
  .CATALOG_TAB .item_block .catalog_item_wrapp {
    min-height: 220px;
  }
  .CATALOG_TAB .top_block_title {
    font-size: 24px;
  }
}

@media (max-width: 359px) {
  .CATALOG_SECTIONS .list.items > .row.flexbox {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Уважение к системной настройке анимаций */
@media (prefers-reduced-motion: reduce) {
  .BIG_BANNER_INDEX *,
  .CATALOG_SECTIONS *,
  .CATALOG_TAB * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}