/* ============================================================
   Новая главная по образцу (HITE-162), включена для всех 21.10.2026.
   Файл подключается на всех страницах (index.tpl). Правила главной
   заскоуплены под .layout--home2; на всех страницах действуют шапка
   (.htx-home2-chrome), меню кнопки «Каталог» (.catdrop--home2) и единые
   карточки товаров (раздел «Карточки товаров»).
   Переменные цвета и тени — общие, из hitech-redesign.css.
   ============================================================ */

/* ── 1. Верхняя полоса: светлая, как на образце ── */
.htx.htx-home2-chrome .topbar { background: var(--bg-soft); color: var(--ink-2); border-bottom: 1px solid var(--border-soft); }
.htx.htx-home2-chrome .topbar__link { color: var(--ink-2); }
.htx.htx-home2-chrome .topbar__link:hover,
.htx.htx-home2-chrome .topbar__item--drop:hover > .topbar__link { color: var(--brand-dark); background: transparent; }
.htx.htx-home2-chrome .topbar__phone { color: var(--ink-1); }
.htx.htx-home2-chrome .topbar__phone:hover { color: var(--brand-dark); }
.htx.htx-home2-chrome .topbar__msgr-link:hover { color: #fff; background: var(--brand); }
/* Переключатель языка h-t.md (RU / RO) был рассчитан на тёмную полосу —
   белые буквы на светлой полосе пропадали */
.htx.htx-home2-chrome .langsw--topbar { background: var(--bg); border: 1px solid var(--border-soft); }
.htx.htx-home2-chrome .langsw--topbar .langsw__item { color: var(--ink-2); }
.htx.htx-home2-chrome .langsw--topbar a.langsw__item:hover { color: var(--brand-dark); }
.htx.htx-home2-chrome .langsw--topbar .langsw__item.is-active { color: #fff; }

/* ── 2. Шапка: кнопка поиска с надписью «Найти» ── */
.htx.htx-home2-chrome .search__btn { font-size: 14px; font-weight: 600; }
@media (max-width: 760px) {
  .htx.htx-home2-chrome .search__btn { padding: 0 16px; }
  .htx.htx-home2-chrome .search__btn-text { display: none; }
}

/* Кнопка «Каталог» в прилипшей шапке. Пока каталог слева виден, кнопка
   свёрнута в ноль; когда он уезжает за экран (класс is-catbtn ставит скрипт
   в htx_home.tpl), место под кнопку плавно раскрывается, поиск сдвигается,
   а сама кнопка «въезжает» следом — меню будто перебирается в шапку. */
.htx.htx-home2-chrome .catbtn-wrap--home2 {
  max-width: 0; margin-right: -20px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-14px) scale(.9); transform-origin: left center;
  transition:
    max-width .45s cubic-bezier(.2,.7,.2,1),
    margin-right .45s cubic-bezier(.2,.7,.2,1),
    opacity .2s ease,
    transform .35s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear .45s;
}
.htx.htx-home2-chrome.is-catbtn .catbtn-wrap--home2 {
  max-width: 220px; margin-right: 0;
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition:
    max-width .45s cubic-bezier(.2,.7,.2,1),
    margin-right .45s cubic-bezier(.2,.7,.2,1),
    opacity .3s ease .15s,
    transform .45s cubic-bezier(.2,.7,.2,1) .12s,
    visibility 0s;
}
.htx.htx-home2-chrome .catbtn-wrap--home2 .catbtn { white-space: nowrap; }
.htx.htx-home2-chrome .catbtn-wrap--home2 .catbtn__burger { transform: rotate(-90deg); transition: transform .45s cubic-bezier(.2,.7,.2,1) .15s; }
.htx.htx-home2-chrome.is-catbtn .catbtn-wrap--home2 .catbtn__burger { transform: none; }
.htx.htx-home2-chrome.is-catbtn .catbtn-wrap--home2.is-open .catbtn__burger { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .htx.htx-home2-chrome .catbtn-wrap--home2,
  .htx.htx-home2-chrome.is-catbtn .catbtn-wrap--home2,
  .htx.htx-home2-chrome .catbtn-wrap--home2 .catbtn__burger { transition: none; }
}

/* ── Сетка: каталог + баннер верхним рядом, дальше — во всю ширину ── */
.htx .layout--home2 { display: block; }
.htx .layout--home2 .home2-top {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 24px;
  /* колонки независимы по высоте: баннеры фиксированной пропорции, и на
     средних экранах каталог бывает выше баннера с полосой преимуществ */
  align-items: start;
  margin-bottom: 16px;
}
.htx .layout--home2 .home2-top__main { min-width: 0; }
.htx .layout--home2 .home2-top__main .hero { margin-bottom: 0; }

/* ── 3. Каталог товаров: белая карточка с зелёным заголовком ──
   Пункты оформлены одинаково в карточке слева и в меню кнопки «Каталог»
   прилипшей шапки (.catdrop--home2). */
.htx .sidebar--home2 {
  position: relative; top: auto; align-self: start;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.htx .catdrop--home2 { background: #fff; border: 1px solid var(--border-soft); }
.htx .sidebar--home2 .sidebar__title,
.htx .catdrop--home2 .sidebar__title { background: var(--brand); padding: 11px 16px; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.htx .sidebar--home2 .catnav,
.htx .catdrop--home2 .catnav { padding: 6px 8px; flex: 1; }
.htx .sidebar--home2 .catnav__item,
.htx .catdrop--home2 .catnav__item {
  grid-template-columns: 20px 1fr auto; gap: 11px;
  padding: 4px 10px;
  font-size: 13px; font-weight: 600; line-height: 1.35;
  color: var(--ink-1);
}
.htx .sidebar--home2 .catnav__row + .catnav__row > .catnav__item::after,
.htx .catdrop--home2 .catnav__row + .catnav__row > .catnav__item::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 0;
  border-top: 1px solid var(--border-soft);
}
.htx .sidebar--home2 .catnav__item::before,
.htx .catdrop--home2 .catnav__item::before { background: var(--brand); }
.htx .sidebar--home2 .catnav__row:hover > .catnav__item,
.htx .catdrop--home2 .catnav__row:hover > .catnav__item,
.htx .sidebar--home2 .catnav__row.is-open > .catnav__item,
.htx .catdrop--home2 .catnav__row.is-open > .catnav__item { background: var(--brand-soft); color: var(--brand-dark); }
.htx .sidebar--home2 .catnav__row:hover > .catnav__item::after,
.htx .catdrop--home2 .catnav__row:hover > .catnav__item::after,
.htx .sidebar--home2 .catnav__row.is-open > .catnav__item::after,
.htx .catdrop--home2 .catnav__row.is-open > .catnav__item::after,
.htx .sidebar--home2 .catnav__row:hover + .catnav__row > .catnav__item::after,
.htx .catdrop--home2 .catnav__row:hover + .catnav__row > .catnav__item::after,
.htx .sidebar--home2 .catnav__row.is-open + .catnav__row > .catnav__item::after,
.htx .catdrop--home2 .catnav__row.is-open + .catnav__row > .catnav__item::after { border-top-color: transparent; }
.htx .sidebar--home2 .catnav__icon,
.htx .catdrop--home2 .catnav__icon { width: 20px; height: 20px; color: var(--brand); }
.htx .sidebar--home2 .catnav__icon--mask,
.htx .catdrop--home2 .catnav__icon--mask {
  display: block;
  background: var(--brand);
  /* адрес — в style пункта (--htx-icon), см. htx_catnav.tpl */
  -webkit-mask-image: var(--htx-icon); mask-image: var(--htx-icon);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.htx .sidebar--home2 .catnav__row:hover > .catnav__item .catnav__icon,
.htx .catdrop--home2 .catnav__row:hover > .catnav__item .catnav__icon,
.htx .sidebar--home2 .catnav__row.is-open > .catnav__item .catnav__icon,
.htx .catdrop--home2 .catnav__row.is-open > .catnav__item .catnav__icon { color: var(--brand-dark); }
.htx .sidebar--home2 .catnav__row:hover > .catnav__item .catnav__icon--mask,
.htx .catdrop--home2 .catnav__row:hover > .catnav__item .catnav__icon--mask,
.htx .sidebar--home2 .catnav__row.is-open > .catnav__item .catnav__icon--mask,
.htx .catdrop--home2 .catnav__row.is-open > .catnav__item .catnav__icon--mask { background: var(--brand-dark); }
.htx .sidebar--home2 .catnav__chev,
.htx .catdrop--home2 .catnav__chev { color: var(--ink-4); }
.htx .sidebar--home2 .catnav__row:hover > .catnav__item .catnav__chev,
.htx .catdrop--home2 .catnav__row:hover > .catnav__item .catnav__chev,
.htx .sidebar--home2 .catnav__row.is-open > .catnav__item .catnav__chev,
.htx .catdrop--home2 .catnav__row.is-open > .catnav__item .catnav__chev { color: var(--brand-dark); }

/* «Акции и скидки» — выделенный пункт внизу каталога */
.htx .layout--home2 .sidebar__promo {
  display: flex; align-items: center; gap: 11px;
  margin: 2px 8px 8px; padding: 7px 10px;
  border-radius: 9px;
  background: #fff1ea; color: #e0442b;
  font-size: 13px; font-weight: 700;
  transition: background .15s, color .15s;
}
.htx .layout--home2 .sidebar__promo svg { flex: none; }
/* иконка, загруженная в хабе (Меню каталога), — в своих цветах */
.htx .layout--home2 .sidebar__promo-icon { flex: none; width: 20px; height: 20px; object-fit: contain; }
.htx .layout--home2 .sidebar__promo:hover { background: #ffe2d4; color: #c9371f; }

/* подсветка после ссылки «Все категории» */
.htx .layout--home2 .sidebar--home2.is-flash { animation: htx-home2-flash 1.4s ease; }
@keyframes htx-home2-flash {
  0%, 100% { box-shadow: var(--shadow-sm); }
  30%      { box-shadow: 0 0 0 4px rgba(0,159,180,.35), var(--shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .htx .layout--home2 .sidebar--home2.is-flash { animation: none; }
}

/* ── 4. Баннер: те же баннеры из админки, только скругление как у карточек ── */
.htx .layout--home2 .hero { border-radius: var(--radius-lg); }
/* Баннеры без тени (владелец, 21.10.2026): и главный слайдер, и промо-плитки */
.htx .layout--home2 .hero,
.htx .layout--home2 .quick-promo__card,
.htx .layout--home2 .quick-promo__card:hover { box-shadow: none; }

/* ── 5. Полоса преимуществ: во всю ширину, шесть пунктов в ряд ── */
.htx .layout--home2 .services--home2 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  margin-bottom: 40px;
}
.htx .layout--home2 .services--home2 .service { gap: 10px; min-width: 0; }
.htx .layout--home2 .services--home2 .service__icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-tint); box-shadow: none;
}
.htx .layout--home2 .services--home2 .service__icon svg { width: 22px; height: 22px; }
.htx .layout--home2 .services--home2 .service__title { font-size: 13px; line-height: 1.25; }
.htx .layout--home2 .services--home2 .service__sub { font-size: 12px; line-height: 1.25; }
/* порядок — как на образце: доставка, гарантия, рассрочка, бренды, поддержка, возврат */
.htx .layout--home2 .service--delivery { order: 1; }
.htx .layout--home2 .service--warranty { order: 2; }
.htx .layout--home2 .service--credit   { order: 3; }
.htx .layout--home2 .service--brands   { order: 4; }
.htx .layout--home2 .service--support  { order: 5; }
.htx .layout--home2 .service--return   { order: 6; }

/* ── 6. Категории товаров — как на образце: широкая картинка от края до края
   карточки, под ней короткая подпись. Фон картинки белый, как у плиток до
   редизайна главной (владелец, 21.10.2026). Стикер скидки — компактнее,
   чтобы не закрывал товар. ── */
.htx .layout--home2 .catgrid { gap: 14px; }
.htx .layout--home2 .catcard {
  padding: 0; overflow: hidden;
  align-items: stretch; text-align: left;
  background: #fff;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.htx .layout--home2 .catcard__img {
  height: auto; aspect-ratio: 2.15 / 1;
  margin: 0; padding: 10px 14px;
  border-radius: 0;
  background-color: #fff;
  background-origin: content-box;
  background-position: center;
  border-bottom: 1px solid var(--border-soft);
}
.htx .layout--home2 .catcard:hover .catcard__img { transform: scale(1.04); }
.htx .layout--home2 .catcard__title {
  padding: 10px 12px 11px; margin: 0;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.htx .layout--home2 .catcard > .catcard__sticker { zoom: .8; top: 8px; left: 8px; }

/* Плитка с фото товара в интерьере (images/htx_home2_cats/<category_id>.jpg,
   1200×750, см. index.post.php): фото на всю картинку, пропорция 16:10 —
   у узкой полосы 2,15:1 высокая техника (холодильник, минимойка) обрезалась. */
.htx .layout--home2 .catcard--photo .catcard__img {
  aspect-ratio: 16 / 10;
  padding: 0;
  background-size: cover; background-position: center;
  background-color: #f4f4f4;
  border-bottom: 0; mix-blend-mode: normal;
}

/* ── 7. Слайдеры товаров: значок у заголовка, «Смотреть все» рядом со стрелками ── */
.htx .layout--home2 .section__title { display: inline-flex; align-items: center; gap: 8px; }
.htx .layout--home2 .section__icon { flex: none; }

/* ── Карточки товаров (на всех страницах): одинаковый верх ──
   У товара со сгенерированным фото (HITE-160) картинка — квадрат во всю
   ширину без строки с кодом, у обычного — строка «КОД» и картинка 200 px.
   Из-за этого названия и цены в ряду стояли на разной высоте. Здесь у всех
   карточек верх — такой же квадрат: строка с кодом ложится поверх белого поля
   картинки, метки опускаются под неё, фото товара — по центру квадрата. */
.htx .product > .product__top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding-right: 54px; pointer-events: none;
}
.htx .product > .product__top ~ .product__img {
  height: auto; aspect-ratio: 1 / 1;
  padding: 38px 16px 16px;
}
.htx .product > .product__top ~ .product__img .labels_group { top: 36px; }

/* ── Слайдеры товаров: на одну карточку больше в ряду, новости — по четыре ──
   Шаги те же, что в общей теме (4.25 → 3.25 → 2.25 → 82%), только каждый
   на карточку шире: хвостик следующей карточки показывает, что ряд листается. */
.htx .layout--home2 .products > form { flex-basis: calc((100% - 4 * 16px) / 5.25); }
.htx .layout--home2 .news { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1400px) {
  .htx .layout--home2 .products > form { flex-basis: calc((100% - 3 * 16px) / 4.25); }
}
@media (max-width: 1100px) {
  .htx .layout--home2 .products > form { flex-basis: calc((100% - 2 * 16px) / 3.25); }
  .htx .layout--home2 .news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px)  { .htx .layout--home2 .products > form { flex-basis: calc((100% - 16px) / 2.25); } }
@media (max-width: 480px)  { .htx .layout--home2 .products > form { flex-basis: 82%; } }
@media (max-width: 900px)  { .htx .layout--home2 .news { grid-template-columns: 1fr; } }

/* ── Равные расстояния между секциями ──
   У слайдеров товаров под карточками был невидимый запас (поле под тень
   при наведении 14 px + отступ 8 px), и от карточек до следующего блока
   выходило ~58 px, а от остальных блоков — 36 px. Запас под тень оставляем,
   но компенсируем его, и все секции разделяем одинаково — 40 px. */
.htx .layout--home2 .products { margin-bottom: -14px; }
.htx .layout--home2 .htx-content > section,
.htx .layout--home2 .htx-content > .htx > section { margin-bottom: 40px; }
.htx .layout--home2 .section--news { margin-top: 0; }
@media (max-width: 960px) {
  .htx .layout--home2 .htx-content > section,
  .htx .layout--home2 .htx-content > .htx > section { margin-bottom: 28px; }
}

/* ── Каталог и баннер одной высоты (компьютеры) ──
   Высоту ряда задаёт баннер — по пропорции картинок. Каталог стоит в своей
   ячейке абсолютно и тянется на ту же высоту, а пункты делят её поровну.
   Чтобы пунктам всегда хватало места, у ряда есть минимальная высота; если
   баннер по пропорции ниже неё, он растягивается с обрезкой краёв (cover),
   без искажения. Уже 1280 px так не делаем: там баннер стал бы заметно
   обрезаться — колонки остаются независимыми, как раньше. */
@media (min-width: 1281px) {
  .htx .layout--home2 .home2-top { position: relative; align-items: stretch; }
  /* у абсолютного элемента сетки незаданные концы линий — это края всей
     сетки, поэтому ячейку указываем полностью: строка 1–2, колонка 1–2 */
  /* align-self: stretch обязателен: у абсолютного элемента сетки «start»
     ужимает его по содержимому даже при inset: 0 */
  .htx .layout--home2 .home2-top > .sidebar--home2 { grid-area: 1 / 1 / 2 / 2; position: absolute; inset: 0; align-self: stretch; justify-self: stretch; }
  /* h-t.md: баннеры шире, чем у образца (2500×567 против ~3:1), и по пропорции
     ряд выходил ~310 px — пункты каталога сжимались. Ряд — 400 px, как у образца;
     баннер заполняет его с обрезкой краёв (владелец, 21.10.2026). */
  .htx .layout--home2 .home2-top__main { grid-area: 1 / 2 / 2 / 3; display: flex; flex-direction: column; min-height: 400px; }
  .htx .layout--home2 .home2-top__main .hero {
    flex: 1 0 auto;
    aspect-ratio: var(--hero-ratio, 2500 / 567);
    display: flex; flex-direction: column;
  }
  .htx .layout--home2 .home2-top__main .hero__track { flex: 1 1 auto; }
  .htx .layout--home2 .home2-top__main .hero__slide { aspect-ratio: auto; background-size: cover; }
  .htx .layout--home2 .sidebar--home2 .catnav { display: flex; flex-direction: column; min-height: 0; }
  .htx .layout--home2 .sidebar--home2 .catnav__row { flex: 1 1 0; min-height: 24px; display: flex; flex-direction: column; }
  .htx .layout--home2 .sidebar--home2 .catnav__item { flex: 1 1 auto; }
}

/* Названия разделов — в одну строку: при переносе пункт становился выше
   соседних и обрезался. Длинное название, если не влезет, кончается «…». */
.htx .sidebar--home2 .catnav,
.htx .catdrop--home2 .catnav { padding-left: 6px; padding-right: 6px; }
.htx .sidebar--home2 .catnav__item,
.htx .catdrop--home2 .catnav__item { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 9px; }
.htx .sidebar--home2 .catnav__item > span,
.htx .catdrop--home2 .catnav__item > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Планшеты и телефоны ── */
@media (max-width: 1200px) {
  .htx .layout--home2 .services--home2 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
}
@media (max-width: 960px) {
  /* Каталог слева на телефоне и планшете не показываем: там его открывает
     кнопка «Каталог» в шапке и в нижней панели. Общее правило темы
     (.htx .sidebar { display: none }) перебивалось display: flex выше —
     поэтому скрываем явно. Баннер — во всю ширину. */
  .htx .layout--home2 .sidebar--home2 { display: none; }
  .htx .layout--home2 .home2-top { grid-template-columns: minmax(0, 1fr); }
  .htx .layout--home2 .services--home2 { margin-bottom: 28px; }
}
@media (max-width: 640px) {
  .htx .layout--home2 .services--home2 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 12px 10px; }
  .htx .layout--home2 .services--home2 .service__icon { width: 36px; height: 36px; }
  .htx .layout--home2 .services--home2 .service__icon svg { width: 19px; height: 19px; }
  .htx .layout--home2 .services--home2 .service__sub { display: none; }
  .htx .layout--home2 .catgrid { gap: 10px; }
  /* в две колонки длинные названия («Компьютерные кресла») не влезают в строку —
     на телефоне переносим, а не обрезаем многоточием */
  .htx .layout--home2 .catcard__title { padding: 8px 10px 9px; font-size: 12px; white-space: normal; }
  .htx .layout--home2 .section__head { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  /* промо-плитки на телефоне — лента с точками под ней: точки прижимаем к
     ленте, а отступ до следующей секции переносим под точки */
  .htx .layout--home2 .htx-content > section.quick-promo { margin-bottom: 0; }
  .htx .layout--home2 .promo-dots { margin-bottom: 28px; }
}