/* ============================================================================
   09.10.2026 РЕДИЗАЙН «Тепло-Снаб» (макеты согласованы с заказчиком 02–08.10).
   Палитра: тёмно-зелёный #0f4a2c / #13552f, зелёный акцент #1e7a3e,
            фирменный красный #e6002a (кнопки действий), фон #f5f7f5.
   Префикс классов: ts-*. Подключается последним в include_after_body.html.
   ============================================================================ */

:root {
    --ts-green-900: #0b3a22;
    --ts-green-800: #0f4a2c;
    --ts-green-700: #13552f;
    --ts-green-600: #1e7a3e;
    --ts-green-100: #e9f5ec;
    --ts-green-50:  #f3faf5;
    --ts-red:       #e6002a;
    --ts-red-dark:  #c40023;
    --ts-text:      #1d2420;
    --ts-muted:     #6b746f;
    --ts-line:      #e4e9e5;
    --ts-bg:        #f5f7f5;
    --ts-radius:    12px;
    --ts-shadow:    0 2px 12px rgba(16, 40, 25, .06);
    --ts-shadow-h:  0 10px 28px rgba(16, 40, 25, .13);
    /* Дерево каталога — в зелёной гамме */
    --tepl-cat-bg: #13552f;
    --tepl-cat-bg-2: #0f4a2c;
    --tepl-cat-bg-hover: #1e7a3e;
    --tepl-cat-accent: #e6002a;
}

body.fnt_robot_teplo { color: var(--ts-text); }

.ts-wrap { max-width: 1460px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.ts-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Кнопки ---------------- */
.ts-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 8px; padding: 11px 20px;
    font-size: 15px; font-weight: 700; line-height: 1.1; cursor: pointer;
    text-decoration: none !important; white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ts-btn--red { background: var(--ts-red); color: #fff !important; }
.ts-btn--red:hover { background: var(--ts-red-dark); box-shadow: 0 6px 16px rgba(230,0,42,.28); }
.ts-btn--outline { background: #fff; color: var(--ts-green-700) !important; border-color: var(--ts-green-600); }
.ts-btn--outline:hover { background: var(--ts-green-50); }
.ts-btn--outline-red { background: #fff; color: var(--ts-red) !important; border-color: #f2a3b1; }
.ts-btn--outline-red:hover { background: #fff3f5; }

/* ============================================================================
   ШАПКА
   ============================================================================ */
.ts-topbar { background: var(--ts-green-800); color: #fff; font-size: 13px; line-height: 1.3; }
.ts-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 50px; padding-top: 6px; padding-bottom: 6px; }
.ts-topbar__item { display: flex; align-items: center; gap: 10px; }
.ts-topbar__item > i { font-size: 19px; color: #9fd3ad; width: 20px; text-align: center; }
.ts-topbar__item a { color: #fff; text-decoration: none; font-weight: 700; }
.ts-topbar__item a:hover { color: #ffd9df; }
.ts-topbar__muted { color: #b9d6c2; }
.ts-topbar__socials { display: flex; align-items: center; gap: 8px; }
.ts-topbar__socials a {
    width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); transition: transform .15s ease;
}
.ts-topbar__socials a:hover { transform: scale(1.1); }
.ts-topbar__socials img { width: 22px; height: 22px; border-radius: 6px; display: block; }
.ts-topbar__socials .ts-soc-vk { background: #0077ff; color: #fff; font-size: 15px; }

.ts-head { background: #fff; border-bottom: 1px solid var(--ts-line); }
.ts-head__in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.ts-logo { display: flex; align-items: center; gap: 12px; text-decoration: none !important; flex-shrink: 0; }
.ts-logo img { width: 74px; height: auto; display: block; }
.ts-logo__txt { display: flex; flex-direction: column; }
.ts-logo__name { font-size: 27px; font-weight: 900; color: var(--ts-red); letter-spacing: -.5px; line-height: 1; }
.ts-logo__sub { font-size: 11px; color: var(--ts-muted); margin-top: 5px; max-width: 210px; line-height: 1.25; }

/* Поиск (переопределяет старые стили .tepl-top-search) */
.ts-search { flex: 1 1 auto; min-width: 0; }
.ts-search form {
    display: flex !important; border: 1px solid #d9e0db !important; border-radius: 9px !important;
    box-shadow: none !important; background: #fff; position: relative;
}
.ts-search form:focus-within { border-color: var(--ts-green-600) !important; box-shadow: 0 0 0 3px rgba(30,122,62,.12) !important; }
.ts-search input[type=search] {
    flex: 1 1 auto; min-width: 0; border: 0 !important; outline: none; background: transparent;
    padding: 13px 16px !important; font-size: 15px !important; border-radius: 9px 0 0 9px;
}
.ts-search button[type=submit] {
    flex: 0 0 auto; width: 54px; border: 0; border-radius: 0 8px 8px 0 !important;
    background: var(--ts-green-700) !important; color: #fff; font-size: 18px; padding: 0 !important; cursor: pointer;
}
.ts-search button[type=submit]:hover { background: var(--ts-green-900) !important; }
.ts-search--mobile { display: none; }

.ts-head__actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.ts-head__phone { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--ts-text); }
.ts-head__phone > i { font-size: 22px; color: var(--ts-red); }
.ts-head__phone b { display: block; font-size: 17px; font-weight: 800; white-space: nowrap; color: var(--ts-text); }
.ts-head__phone-cb { display: block; font-size: 13px; color: var(--ts-red); text-decoration: underline; cursor: pointer; }
.ts-icon-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ts-text) !important; text-decoration: none !important; font-size: 12px; }
.ts-icon-btn__ico { position: relative; font-size: 25px; line-height: 1; color: var(--ts-green-800); }
.ts-icon-btn:hover .ts-icon-btn__ico { color: var(--ts-red); }
.ts-badge {
    position: absolute; top: -8px; right: -12px; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 10px; background: var(--ts-red); color: #fff; font-size: 11px; font-weight: 800;
    line-height: 19px; text-align: center; border: 2px solid #fff; box-sizing: content-box;
    transition: transform .18s ease;
}
.ts-icon-btn--phone { display: none; }
.ts-burger { display: none; }

/* Навигация (sticky) */
.ts-nav, .ts-nav.tepl-sticky-bar { background: var(--ts-green-700) !important; position: sticky !important; top: 0; z-index: 1100; padding: 0 !important; }
.ts-nav.is-stuck { box-shadow: 0 6px 18px rgba(0,0,0,.18) !important; padding: 0 !important; }
.ts-nav__in { display: flex; align-items: stretch; gap: 4px; min-height: 52px; width: 100%; }
.ts-nav.tepl-sticky-bar { display: block !important; justify-content: initial !important; }
.ts-nav__link {
    display: flex !important; align-items: center; gap: 8px; padding: 0 18px !important;
    color: #fff !important; font-size: 15px !important; font-weight: 600; text-decoration: none !important;
    white-space: nowrap; background: transparent; border-radius: 0 !important; transition: background .15s ease;
}
.ts-nav__link:hover, .ts-nav__link.is-active { background: rgba(255,255,255,.12); }
.ts-nav__link--catalog { background: var(--ts-green-900) !important; padding: 0 22px !important; }
.ts-nav__link--catalog:hover { background: #062a17 !important; }
.ts-nav__caret { font-size: 14px; opacity: .8; }
.ts-nav__dd { position: relative; display: flex !important; align-self: stretch !important; width: auto !important; }
.ts-nav__dd .tepl_catalog_tree { top: 100%; }
.ts-nav__drop {
    position: absolute; left: 0; top: 100%; z-index: 9000; min-width: 260px; background: #fff;
    border-radius: 0 0 10px 10px; box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 8px 0;
    border-top: 3px solid var(--ts-red); opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.ts-nav__dd--simple:hover .ts-nav__drop { opacity: 1; visibility: visible; transform: none; }
.ts-nav__drop a { display: block; padding: 10px 18px; color: var(--ts-text); text-decoration: none; font-size: 14.5px; }
.ts-nav__drop a:hover { background: var(--ts-green-50); color: var(--ts-green-700); }

/* Старые элементы шапки, которые больше не нужны */
.tmm-toggle { display: none !important; }

@media (max-width: 1360px) { .ts-hide-lg { display: none !important; } .ts-head__cta { display: none; } }
@media (max-width: 1180px) {
    .ts-nav__link { padding: 0 12px !important; font-size: 14px !important; }
    .ts-head__phone { display: none; }
}
@media (max-width: 900px) {
    .ts-topbar { display: none; }
    .ts-head__in { min-height: 62px; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
    .ts-head > .ts-head__in .ts-search { display: none; }
    .ts-search--mobile { display: block; padding-bottom: 10px; }
    .ts-logo img { width: 48px; }
    .ts-logo__name { font-size: 21px; }
    .ts-logo__sub { display: none; }
    .ts-head__actions { margin-left: auto; gap: 18px; }
    .ts-icon-btn__lbl { display: none; }
    .ts-icon-btn--phone { display: flex; }
    .ts-icon-btn--phone i { font-size: 23px; color: var(--ts-red); }
    .ts-burger {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 40px; height: 40px; padding: 8px; border: 0; background: transparent; cursor: pointer;
    }
    .ts-burger span { display: block; height: 2.5px; background: var(--ts-green-800); border-radius: 2px; }
    .ts-nav__in { overflow-x: auto; scrollbar-width: none; min-height: 46px; }
    .ts-nav__in::-webkit-scrollbar { display: none; }
    .ts-nav__dd--simple .ts-nav__drop { display: none; }
    .ts-nav__dd { position: static !important; }
    .ts-nav__dd .tepl_catalog_tree { left: 8px; position: fixed !important; top: auto !important; }
}

/* ============================================================================
   ОБЩИЕ СЕКЦИИ
   ============================================================================ */
.tepl-main-content { max-width: 1460px !important; padding: 0 20px; box-sizing: border-box; }
.ts-section { margin: 36px 0; }
.ts-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ts-h2 { font-size: 26px; font-weight: 800; color: var(--ts-text); margin: 0; letter-spacing: -.3px; }
.ts-h2--line { position: relative; padding-bottom: 10px; }
.ts-h2--line::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--ts-red); border-radius: 2px; }
.ts-more { color: var(--ts-red) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
.ts-more:hover { text-decoration: underline !important; }

/* Ряд категорий с иконками (tepl-cat-strip) — под зелёным меню, как в макете:
   белая полоса на ВСЮ ширину экрана, иконки категорий в один ряд. */
.tepl-top-fullwidth { background: #fff; border-bottom: 1px solid var(--ts-line); }
.tepl-cat-strip {
    max-width: 1460px; margin: 0 auto !important; padding: 10px 20px !important; box-sizing: border-box;
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
}
.tepl-cat-strip__track { gap: 6px !important; scrollbar-width: none; }
.tepl-cat-strip__track::-webkit-scrollbar { display: none; }
.tepl-cat-strip__chip {
    flex: 1 1 0 !important; min-width: 92px; max-width: 150px; width: auto !important; padding: 6px 4px !important;
    font-size: 12px !important; font-weight: 600; color: var(--ts-text) !important;
}
.tepl-cat-strip__chip:hover, .tepl-cat-strip__chip.is-active { background: var(--ts-green-50) !important; border-color: var(--ts-green-600) !important; color: var(--ts-green-700) !important; }
.tepl-cat-strip__ico { width: 64px !important; height: 52px !important; flex-basis: 52px !important; border: 0 !important; background: transparent !important; padding: 0 !important; object-fit: contain; }
.tepl-cat-strip__count { display: none !important; }

/* ---------------- Во всю ширину страницы ----------------
   .ts-bleed растягивает блок из центральной колонки до краёв экрана
   (правка 09.10.2026: «почему баннеры не во всю ширину»). */
.ts-bleed {
    width: 100vw; max-width: 100vw; position: relative; left: 50%; margin-left: -50vw !important;
    box-sizing: border-box;
}

/* ---------------- Баннер-слайдер (картинки заказчика) ---------------- */
.ts-slider {
    position: relative; margin-top: 0; border-radius: 0; overflow: hidden;
    aspect-ratio: 1024 / 401; max-height: 640px; background: var(--ts-green-900);
}
.ts-slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .6s ease, visibility .6s; display: flex; justify-content: center;
}
.ts-slide.is-active { opacity: 1; visibility: visible; }
/* Заливка «по краям» размытой копией картинки — у слайдов разные пропорции */
.ts-slide__bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) brightness(.8); }
.ts-slide__frame { position: relative; height: 100%; aspect-ratio: var(--ar, 2.55); max-width: 100%; box-shadow: 0 0 60px rgba(0,0,0,.35); }
.ts-slide__frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ts-slide__link { position: absolute; inset: 0; z-index: 2; }
/* «Горячие зоны» поверх нарисованных на баннере кнопок (в % от картинки) */
.ts-hot { position: absolute; z-index: 3; border-radius: 8px; cursor: pointer; background: transparent; border: 0; padding: 0; }
.ts-hot:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.ts-slider__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px;
    border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ts-text);
    box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; font-size: 18px;
}
.ts-slider__nav--prev { left: max(14px, calc(50vw - 720px)); }
.ts-slider__nav--next { right: max(14px, calc(50vw - 720px)); }
.ts-slider__dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.ts-slider__dot { width: 10px; height: 10px; border-radius: 5px; border: 0; padding: 0; background: rgba(255,255,255,.6); cursor: pointer; transition: width .2s ease; }
.ts-slider__dot.is-active { background: var(--ts-red); width: 26px; }

/* ---------------- Полоса преимуществ ---------------- */
.ts-benefits {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #fff;
    border: 1px solid var(--ts-line); border-radius: var(--ts-radius); margin-top: 18px; box-shadow: var(--ts-shadow);
}
.ts-benefit { display: flex; align-items: center; gap: 12px; padding: 18px; font-size: 13.5px; line-height: 1.3; }
.ts-benefit + .ts-benefit { border-left: 1px solid var(--ts-line); }
.ts-benefit i { font-size: 28px; color: var(--ts-green-600); flex-shrink: 0; width: 32px; text-align: center; }

/* ---------------- Карусель товаров ---------------- */
.ts-carousel { position: relative; }
.ts-carousel__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 16px) / 6);
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 4px 2px 10px; scrollbar-width: none;
}
.ts-carousel__track::-webkit-scrollbar { display: none; }
.ts-carousel__btn {
    position: absolute; top: 40%; z-index: 3; transform: translateY(-50%); width: 38px; height: 38px;
    border-radius: 50%; border: 1px solid var(--ts-line); background: #fff; box-shadow: var(--ts-shadow);
    cursor: pointer; font-size: 17px; color: var(--ts-text);
}
.ts-carousel__btn--prev { left: -18px; }
.ts-carousel__btn--next { right: -18px; }
.ts-pcard {
    position: relative; scroll-snap-align: start; background: #fff; border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius); padding: 14px; display: flex; flex-direction: column; min-width: 0;
    transition: box-shadow .15s ease, transform .15s ease;
}
.ts-pcard:hover { box-shadow: var(--ts-shadow-h); transform: translateY(-2px); }
.ts-pcard__img { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ts-pcard__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ts-pcard__stock { font-size: 12px; color: var(--ts-green-600); font-weight: 700; margin-bottom: 4px; }
.ts-pcard__stock--order { color: #c47a00; }
.ts-pcard__name {
    font-size: 14px; line-height: 1.3; font-weight: 600; margin-bottom: 12px; color: var(--ts-text);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 54px;
}
.ts-pcard__bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ts-pcard__price { font-size: 17px; font-weight: 800; white-space: nowrap; }
.ts-pcard__price small { font-size: 12px; font-weight: 500; color: var(--ts-muted); }
.ts-pcard__cart {
    position: relative; z-index: 2; width: 38px; height: 38px; border-radius: 8px; background: var(--ts-red);
    color: #fff !important; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.ts-pcard__cart:hover { background: var(--ts-red-dark); }
.ts-pcard__link { position: absolute; inset: 0; z-index: 1; }

/* ---------------- Баннеры-картинки (промо) ---------------- */
.ts-promo2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ts-promo2 .ts-imgban, .ts-consult .ts-imgban { border-radius: 0; }
.ts-promo2 .ts-imgban:hover, .ts-consult .ts-imgban:hover { transform: none; box-shadow: none; filter: brightness(1.04); }
.ts-consult .ts-imgban { aspect-ratio: auto; height: clamp(180px, 21.8vw, 420px); background: #8b0b14; }
.ts-consult .ts-imgban img { object-fit: cover; object-position: center; }
.ts-imgban {
    position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--ts-green-900);
    transition: box-shadow .15s ease, transform .15s ease;
}
.ts-imgban:hover { box-shadow: var(--ts-shadow-h); transform: translateY(-2px); }
.ts-imgban img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.ts-promo2 .ts-imgban { aspect-ratio: 1024 / 450; }
.ts-dirs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ts-dirs .ts-imgban { aspect-ratio: 1024 / 449; border-radius: 12px; }

/* ---------------- Почему выбирают ---------------- */
.ts-why {
    list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow);
}
.ts-why__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 14px; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--ts-text); }
.ts-why__item + .ts-why__item { border-left: 1px solid var(--ts-line); }
.ts-why__ico {
    width: 62px; height: 62px; border-radius: 50%; background: var(--ts-green-50); border: 1px solid #d5eadb;
    display: inline-flex; align-items: center; justify-content: center; color: var(--ts-green-600);
    transition: background .15s ease, color .15s ease;
}
.ts-why__item:hover .ts-why__ico { background: var(--ts-green-700); color: #fff; }
.ts-ico { width: 32px; height: 32px; display: block; }

/* ---------------- О компании ---------------- */
.ts-about { display: grid; grid-template-columns: 1.1fr 1.2fr .7fr; gap: 24px; align-items: stretch; }
.ts-about__img { border-radius: var(--ts-radius); background-size: cover; background-position: center; min-height: 250px; }
.ts-about__body p { color: var(--ts-muted); font-size: 15px; line-height: 1.6; margin: 12px 0 20px; }
.ts-about__stats { background: var(--ts-bg); border-radius: var(--ts-radius); padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ts-stat { display: flex; align-items: center; gap: 12px; }
.ts-stat i { font-size: 26px; color: var(--ts-green-600); width: 30px; text-align: center; }
.ts-stat b { display: block; font-size: 19px; font-weight: 900; line-height: 1.1; }
.ts-stat span { font-size: 12.5px; color: var(--ts-muted); }

/* ---------------- Бренды ---------------- */
.ts-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ts-brand {
    height: 74px; background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
    display: flex; align-items: center; justify-content: center; padding: 12px 18px;
}
.ts-brand img { max-width: 100%; max-height: 42px; object-fit: contain; }
.ts-brand--txt { font-weight: 900; font-size: 19px; color: var(--ts-green-800); letter-spacing: .5px; }

/* ---------------- Полезные статьи и новости ---------------- */
.ts-articles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ts-article {
    position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius); overflow: hidden; text-decoration: none !important; color: var(--ts-text) !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
.ts-article:hover { box-shadow: var(--ts-shadow-h); transform: translateY(-2px); }
.ts-article__img { aspect-ratio: 16 / 9; background: var(--ts-green-50) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #b7cfbe; font-size: 40px; }
.ts-article__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.ts-article__date { font-size: 12.5px; color: var(--ts-muted); display: flex; align-items: center; gap: 6px; }
.ts-article__title { font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.ts-article__lead { font-size: 13.5px; color: var(--ts-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-article__go { margin-top: auto; padding-top: 6px; color: var(--ts-red); font-size: 14px; font-weight: 700; }

/* ---------------- SEO-блок ---------------- */
.tepl-seo-text { max-width: none !important; background: var(--ts-bg) !important; }
.tepl-seo-text__btn { background: var(--ts-green-700) !important; }
.tepl-home-h1 { max-width: none !important; padding: 0 !important; }

@media (max-width: 1200px) {
    .ts-carousel__track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
    .ts-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ts-benefit:nth-child(4) { border-left: 0; }
    .ts-benefit:nth-child(n+4) { border-top: 1px solid var(--ts-line); }
    .ts-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ts-why__item:nth-child(4) { border-left: 0; }
    .ts-why__item:nth-child(n+4) { border-top: 1px solid var(--ts-line); }
    .ts-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-about { grid-template-columns: 1fr 1fr; }
    .ts-about__stats { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .ts-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ts-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .tepl-main-content { padding: 0 12px; }
    .ts-section { margin: 26px 0; }
    .ts-h2 { font-size: 21px; }
    .ts-slide__frame { box-shadow: none; }
    .ts-slider__nav { display: none; }
    .ts-slider__dots { bottom: 6px; }
    .ts-slider__dot { width: 7px; height: 7px; }
    .ts-slider__dot.is-active { width: 18px; }
    .ts-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-benefit { border-left: 0 !important; border-top: 1px solid var(--ts-line); padding: 12px; font-size: 12.5px; }
    .ts-benefit:nth-child(-n+2) { border-top: 0; }
    .ts-benefit:nth-child(even) { border-left: 1px solid var(--ts-line) !important; }
    .ts-carousel__track { grid-auto-columns: calc((100% - 16px) / 2.2); }
    .ts-carousel__btn { display: none; }
    .ts-promo2 { grid-template-columns: 1fr; }
    .ts-dirs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .ts-dirs .ts-imgban { scroll-snap-align: start; }
    .ts-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-why__item { padding: 16px 10px; font-size: 13px; border-left: 0 !important; border-top: 1px solid var(--ts-line); }
    .ts-why__item:nth-child(-n+2) { border-top: 0; }
    .ts-why__item:nth-child(even) { border-left: 1px solid var(--ts-line) !important; }
    .ts-why__ico { width: 52px; height: 52px; }
    .ts-ico { width: 26px; height: 26px; }
    .ts-about { grid-template-columns: 1fr; }
    .ts-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-articles { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .ts-article { scroll-snap-align: start; }
}

/* ============================================================================
   ПОДВАЛ
   ============================================================================ */
.tepl-footer.ts-footer { background: var(--ts-green-900) !important; color: #c8dccf; padding: 44px 0 0 !important; font-family: inherit !important; margin-top: 50px !important; }
.ts-footer a { color: #c8dccf; text-decoration: none; }
.ts-footer a:hover { color: #fff; text-decoration: underline; }
.ts-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 28px; }
.ts-footer__brand p { font-size: 13.5px; line-height: 1.55; margin: 14px 0 16px; color: #a9c4b2; }
.ts-footer__logo { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 6px 12px 6px 6px; text-decoration: none !important; }
.ts-footer__logo img { width: 52px; height: auto; }
.ts-footer__logo span { font-size: 21px; font-weight: 900; color: var(--ts-red); }
.ts-footer .ts-footer__title { color: #fff; font-size: 15px; font-weight: 800; margin: 4px 0 14px; }
.ts-footer ul { list-style: none; padding: 0; margin: 0; }
.ts-footer .ts-footer__title a { color: #fff; }
.ts-footer__all { color: #fff !important; font-weight: 700; }
.ts-footer li { margin-bottom: 9px; font-size: 14px; }
.ts-footer__contact { display: flex; gap: 10px; margin-bottom: 12px; font-size: 14px; line-height: 1.4; }
.ts-footer__contact i { color: #9fd3ad; font-size: 17px; width: 18px; text-align: center; margin-top: 1px; }
.ts-footer__contact b a { color: #fff; font-size: 16px; }
.ts-footer__socials { display: flex; gap: 10px; }
.ts-footer__socials a {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1);
    display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px;
}
.ts-footer__socials a:hover { background: var(--ts-red); text-decoration: none; }
.ts-footer__socials img, .ts-footer__socials svg { width: 22px; height: 22px; border-radius: 6px; display: block; }
.ts-footer__bottom {
    margin-top: 36px; border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #8fae9a;
}
@media (max-width: 1100px) { .ts-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .ts-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ts-footer__grid { grid-template-columns: 1fr 1fr; } .ts-footer__contacts { grid-column: 1 / -1; } }

/* ============================================================================
   ХЛЕБНЫЕ КРОШКИ
   ============================================================================ */
.ts-crumbs { font-size: 13px; color: var(--ts-muted); margin: 16px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.ts-crumbs a { color: var(--ts-muted); text-decoration: none; }
.ts-crumbs a:hover { color: var(--ts-green-600); text-decoration: underline; }
.ts-crumbs__sep { margin: 0 8px; color: #b5bdb8; font-size: 11px; }
.ts-crumbs__cur { color: var(--ts-text); }

/* Старое правило sv_styles_4.css давало кнопке «Каталог» margin-left: 80px */
.ts-nav .tepl_main_cat_but { margin-left: 0 !important; border-radius: 0 !important; height: auto !important; }

/* ============================================================================
   КАРТОЧКА ТОВАРА (макет 02.10.2026)
   ============================================================================ */
.tepl-card.ts-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; transition: none; }
.tepl-card.ts-card:hover { transform: none; box-shadow: none; }
.ts-card { max-width: 1460px; margin: 0 auto; padding: 0 20px 20px; box-sizing: border-box; }

.ts-card__top {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px;
    background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
    box-shadow: var(--ts-shadow); padding: 24px;
}

/* --- галерея --- */
.ts-card__gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ts-card__main {
    position: relative; background: #fff; border: 1px solid var(--ts-line); border-radius: 10px;
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ts-card__main img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ts-card__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-card__thumbs .tepl-gallery__thumb {
    width: 84px; height: 84px; padding: 4px; border: 2px solid var(--ts-line); border-radius: 8px;
    background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s;
}
.ts-card__thumbs .tepl-gallery__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ts-card__thumbs .tepl-gallery__thumb:hover,
.ts-card__thumbs .tepl-gallery__thumb.is-active { border-color: var(--ts-green-600); }
.ts-card__video {
    width: 84px; height: 84px; border-radius: 8px; background: var(--ts-green-700); color: #fff !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-size: 11px; font-weight: 700; text-decoration: none;
}
.ts-card__video i { font-size: 28px; }
.ts-card__video:hover { background: var(--ts-green-600); }

/* --- инфо --- */
.ts-card__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ts-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ts-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 6px;
    font-size: 13px; font-weight: 600; background: #f1f3f2; color: var(--ts-muted);
}
.ts-chip--ok { background: var(--ts-green-100); color: var(--ts-green-700); }
.ts-chip--ok::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ts-green-600); }
.ts-chip--order { background: #fff4e5; color: #b26a00; }
.ts-card__brand {
    margin-left: auto; display: inline-flex; align-items: center; height: 40px; padding: 4px 10px;
    border: 1px solid var(--ts-line); border-radius: 8px; background: #fff; font-weight: 800; color: var(--ts-green-700);
}
.ts-card__brand img { max-height: 30px; max-width: 130px; object-fit: contain; display: block; }
.ts-card__title { font-size: 28px; line-height: 1.2; font-weight: 800; margin: 0; color: var(--ts-text); letter-spacing: -.3px; }
.ts-card__lead { font-size: 15px; line-height: 1.55; color: #4a524d; }
.ts-card__lead p { margin: 0 0 6px; }
.ts-card__lead > *:nth-child(n+3) { display: none; } /* в шапке — только начало описания; полностью — во вкладке */

.ts-card__feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ts-feat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px;
    background: var(--ts-green-50); border: 1px solid #dcebe0; border-radius: 10px; font-size: 13px; line-height: 1.3; color: var(--ts-text);
}
.ts-feat i { font-size: 22px; color: var(--ts-green-600); }
.ts-feat span { font-weight: 700; }
.ts-feat small { display: block; font-weight: 400; color: var(--ts-muted); font-size: 12px; margin-top: 2px; }

.ts-card__price {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
    padding: 16px 18px; border-radius: 10px; background: #fafbfa; border: 1px solid var(--ts-line);
}
.ts-card__price-main { font-size: 34px; font-weight: 800; color: var(--ts-text); line-height: 1; white-space: nowrap; }
.ts-card__price-main small { font-size: 18px; font-weight: 600; color: var(--ts-muted); }
.ts-card__price-main em, .ts-card__price-sub em { font-style: normal; font-size: 16px; font-weight: 500; color: var(--ts-muted); margin-left: 4px; }
.ts-card__price-sub { font-size: 18px; font-weight: 700; color: #4a524d; white-space: nowrap; }
.ts-card__price-sub em { font-size: 14px; }
.ts-card__stock { flex-basis: 100%; font-size: 14px; font-weight: 600; color: var(--ts-green-600); }
.ts-card__stock--order { color: #b26a00; }
.ts-card__price-note { font-size: 13px; color: var(--ts-muted); margin-top: -6px; }
.ts-card__price-note a { color: var(--ts-green-600); font-weight: 600; }

.ts-card__buy { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.ts-card__tocart { flex: 1 1 220px; padding: 15px 22px; font-size: 17px; text-decoration: none; }
.ts-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--ts-line); border-radius: 8px; overflow: hidden; background: #fff; }
.ts-qty button { width: 46px; border: 0; background: #f1f3f2; font-size: 20px; font-weight: 700; cursor: pointer; color: var(--ts-text); }
.ts-qty button:hover { background: var(--ts-green-100); color: var(--ts-green-700); }
.ts-qty input { width: 64px; border: 0; text-align: center; font-size: 17px; font-weight: 700; -moz-appearance: textfield; }
.ts-qty input::-webkit-outer-spin-button, .ts-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ts-card__btns2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ts-card__btns2 .ts-btn { padding: 13px 16px; }
.ts-card__supply { font-size: 14px; color: var(--ts-muted); }
.ts-card__supply i { color: var(--ts-green-600); margin-right: 6px; }

/* --- полоса сервисов --- */
.ts-card__services {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 18px 0 0;
    background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow);
}
.ts-card__services > div { display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-size: 13px; line-height: 1.3; font-weight: 600; }
.ts-card__services > div + div { border-left: 1px solid var(--ts-line); }
.ts-card__services i { font-size: 26px; color: var(--ts-green-600); width: 30px; text-align: center; flex: 0 0 auto; }

/* --- таблица вариантов в зелёной гамме --- */
.ts-card .tepl-pvar { margin: 18px 0 0; border-color: var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); }
.ts-card .tepl-pvar__title { font-size: 24px; color: var(--ts-text); }
.ts-card .tepl-pvar__table thead th { background: var(--ts-green-700); color: #fff; border-bottom: 0; }
.ts-card .tepl-pvar__table thead th:first-child { border-top-left-radius: 8px; }
.ts-card .tepl-pvar__table thead th:last-child { border-top-right-radius: 8px; }
.ts-card .tepl-pvar__row--current { background: var(--ts-green-50); }
.ts-card .tepl-pvar__price-pack { font-weight: 800; color: var(--ts-text); }
.ts-card .tepl-pvar__chip:hover { border-color: var(--ts-green-600); color: var(--ts-green-700); }
.ts-card .tepl-pvar__chip.is-active { background: var(--ts-green-700); border-color: var(--ts-green-700); color: #fff; }

/* --- вкладки (без ограничения высоты) --- */
.ts-tabs { margin: 18px 0 0; background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); }
.ts-tabs__bar { display: flex; gap: 4px; border-bottom: 1px solid var(--ts-line); padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.ts-tabs__bar::-webkit-scrollbar { display: none; }
.ts-tabs__btn {
    background: none; border: 0; border-bottom: 3px solid transparent; padding: 16px 16px 13px; margin-bottom: -1px;
    font-size: 15px; font-weight: 700; color: var(--ts-muted); cursor: pointer; white-space: nowrap;
}
.ts-tabs__btn:hover { color: var(--ts-green-700); }
.ts-tabs__btn.is-active { color: var(--ts-green-700); border-bottom-color: var(--ts-red); }
.ts-tabs__panel { display: none; padding: 24px; height: auto !important; max-height: none !important; overflow: visible !important; }
.ts-tabs__panel.is-active { display: block; }
.ts-h3 { font-size: 20px; font-weight: 800; margin: 0 0 14px; color: var(--ts-text); }
.ts-h4 { font-size: 16px; font-weight: 800; margin: 18px 0 10px; }
.ts-h4:first-child { margin-top: 0; }
.ts-muted { color: var(--ts-muted); }
.ts-linkbtn { background: none; border: 0; padding: 0; color: var(--ts-green-600); font-weight: 700; cursor: pointer; font-size: 14px; }
.ts-linkbtn:hover { text-decoration: underline; }
.ts-more { margin-top: 12px; }

.ts-desc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
.ts-desc__body { font-size: 15px; line-height: 1.65; color: #3a423d; }
.ts-desc__body img { max-width: 100%; height: auto; }
.ts-chars { width: 100%; border-collapse: collapse; font-size: 14px; }
.ts-chars td { padding: 9px 12px; border-bottom: 1px solid var(--ts-line); vertical-align: top; }
.ts-chars tr:nth-child(odd) td { background: #fafbfa; }
.ts-chars td:first-child { color: var(--ts-muted); width: 55%; }
.ts-chars td:last-child { font-weight: 600; }
.ts-chars small { display: block; font-size: 12px; color: #9aa29d; }
.ts-chars--full td:first-child { width: 45%; }

.ts-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ts-docs a {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ts-line); border-radius: 10px;
    text-decoration: none; color: var(--ts-text); transition: border-color .15s, background .15s;
}
.ts-docs a:hover { border-color: var(--ts-green-600); background: var(--ts-green-50); }
.ts-docs__ext { flex: 0 0 auto; min-width: 44px; padding: 6px 4px; border-radius: 6px; background: var(--ts-red); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.ts-docs a > span:nth-child(2) { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
.ts-docs small { display: block; font-weight: 400; color: var(--ts-muted); font-size: 12px; }
.ts-docs i { color: var(--ts-green-600); }

.ts-delivery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.ts-delivery > div { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 10px; background: var(--ts-green-50); border: 1px solid #dcebe0; font-size: 14px; line-height: 1.45; }
.ts-delivery i { font-size: 26px; color: var(--ts-green-600); }
.ts-delivery b { font-size: 16px; }
.ts-delivery a, .ts-tabs .ts-muted a { color: var(--ts-green-600); }

.ts-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ts-videos figure { margin: 0; }
.ts-videos video { width: 100%; border-radius: 10px; background: #000; display: block; }
.ts-videos figcaption { font-size: 14px; font-weight: 600; margin-top: 6px; }

.ts-card > .ts-section { padding-left: 0; padding-right: 0; }

@media (max-width: 1100px) {
    .ts-card__top { grid-template-columns: 1fr; gap: 22px; }
    .ts-card__services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ts-card__services > div:nth-child(4) { border-left: 0; }
    .ts-card__services > div:nth-child(n+4) { border-top: 1px solid var(--ts-line); }
    .ts-desc { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .ts-card { padding: 0 12px 12px; }
    .ts-card__top { padding: 14px; }
    .ts-card__title { font-size: 22px; }
    .ts-card__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-card__price-main { font-size: 28px; }
    .ts-card__brand { margin-left: 0; }
    .ts-card__thumbs .tepl-gallery__thumb, .ts-card__video { width: 64px; height: 64px; }
    .ts-card__services { grid-template-columns: 1fr 1fr; }
    .ts-card__services > div { border-left: 0 !important; border-top: 1px solid var(--ts-line); padding: 12px; }
    .ts-card__services > div:nth-child(-n+2) { border-top: 0; }
    .ts-card__services > div:nth-child(even) { border-left: 1px solid var(--ts-line) !important; }
    .ts-card__services > div:last-child { grid-column: 1 / -1; border-left: 0 !important; }
    .ts-tabs__panel { padding: 16px; }
    .ts-delivery { grid-template-columns: 1fr; }
    .ts-card__btns2 { grid-template-columns: 1fr; }
    .ts-card .tepl-pvar { padding: 16px 12px; }
}

/* Полоса категорий — тоже на всю ширину экрана (сама обёртка стоит
   внутри центральной колонки .tepl-main-content). */
body.tepl-is-main-page .tepl-main-content > .tepl-top-fullwidth {
    width: 100vw; position: relative; left: 50%; margin-left: -50vw;
}

/* ============================================================================
   КАРТОЧКА — итерация 2 (09.10.2026): «убрать ограничение по полям»
   Карточка занимает всю ширину рабочей колонки (как шапка, 1460px),
   никаких узких 900–1000px коробок и пустых полей по бокам.
   Ближе к макету: превью — колонкой справа от фото, крупная цена,
   «− N + | В корзину» в одну строку, плитки характеристик — иконка сверху.
   ============================================================================ */
.ts-card { max-width: none; padding: 0 0 20px; }
.ts-card__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding: 22px 26px; }

.ts-card__gallery { flex-direction: row; align-items: flex-start; gap: 12px; }
.ts-card__main { flex: 1 1 auto; aspect-ratio: 1 / .82; }
.ts-card__thumbs { order: 2; flex-direction: column; flex-wrap: nowrap; flex: 0 0 92px; }
.ts-card__thumbs .tepl-gallery__thumb, .ts-card__video { width: 92px; height: 82px; }
.ts-card__flag {
    position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--ts-red); color: #fff;
    font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 6px; letter-spacing: .3px; text-transform: uppercase;
}

.ts-card__title { font-size: 30px; }
.ts-feat { align-items: center; text-align: center; padding: 14px 10px; background: #fff; border-color: var(--ts-line); }
.ts-feat i { font-size: 28px; color: var(--ts-red); }
.ts-feat span { font-weight: 600; font-size: 12.5px; }
.ts-card__price { background: transparent; border: 0; padding: 4px 0; }
.ts-card__price-main { font-size: 38px; color: var(--ts-green-700); }
.ts-card__price-sub { font-size: 20px; color: var(--ts-green-600); }
.ts-card__stock { flex-basis: auto; margin-left: auto; }
.ts-card__buy { flex-wrap: nowrap; }
.ts-card__buy .ts-qty { flex: 0 0 auto; }
.ts-card__buy .ts-qty input { width: 56px; }
.ts-btn--green { background: var(--ts-green-700); color: #fff !important; }
.ts-btn--green:hover { background: var(--ts-green-900); }

/* Список преимуществ в описании — зелёными галочками (как в макете) */
.ts-checklist ul { list-style: none; padding: 0; margin: 12px 0; }
.ts-checklist li { position: relative; padding-left: 28px; margin: 7px 0; }
.ts-checklist li::before {
    content: '\f00c'; font-family: FontAwesome; position: absolute; left: 0; top: 1px; width: 19px; height: 19px;
    border-radius: 50%; background: var(--ts-green-600); color: #fff; font-size: 10px; line-height: 19px; text-align: center;
}
/* В шапке карточки — только первый абзац описания (полностью — во вкладке) */
.ts-card__lead > *:nth-child(n+2) { display: none; }

@media (max-width: 1100px) {
    .ts-card__stock { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 760px) {
    .ts-card { padding: 0 0 12px; }
    .ts-card__gallery { flex-direction: column; }
    .ts-card__main { width: 100%; }
    .ts-card__thumbs { flex-direction: row; flex: 0 0 auto; }
    .ts-card__thumbs .tepl-gallery__thumb, .ts-card__video { width: 64px; height: 58px; }
    .ts-card__price-main { font-size: 30px; }
    .ts-card__buy { flex-wrap: wrap; }
    .ts-card__buy .ts-card__tocart { flex: 1 1 160px; }
}
/* Обёртка контента публичных страниц: без внутренних полей и скруглений —
   блоки страницы сами задают свои карточки. */
.tepl-public-content-wrap { padding: 0 !important; margin-top: 0 !important; border-radius: 0 !important; background: transparent !important; }

/* Блок «Размеры» (палетные данные) — в зелёной гамме редизайна */
.ts-card .tepl-rsize { margin-top: 18px !important; border: 1px solid var(--ts-line) !important; border-radius: var(--ts-radius) !important; box-shadow: var(--ts-shadow) !important; padding: 22px 24px !important; }
.ts-card .tepl-rsize__title { font-size: 22px !important; font-weight: 800 !important; }
.ts-card .tepl-rsize__table thead th { background: var(--ts-green-50) !important; color: var(--ts-green-700) !important; border-bottom-color: #d5eadb !important; }
.ts-card .tepl-rsize__chip.is-active { background: var(--ts-green-700) !important; border-color: var(--ts-green-700) !important; color: #fff !important; }
.ts-card .tepl-rsize__chip:hover { border-color: var(--ts-green-600) !important; color: var(--ts-green-700) !important; }
.ts-card .tepl-rsize__chip.is-active:hover { color: #fff !important; }

/* Адаптив для итерации 2 (должен идти ПОСЛЕ правил итерации 2) */
@media (max-width: 1100px) {
    .ts-card__top { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 760px) {
    .ts-card__top { padding: 14px; }
    .ts-card__title { font-size: 23px; }
    .ts-card__brand { margin-left: 0; }
    .ts-card__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ts-card__thumbs { order: 2; }
    /* Баннер консультации на телефоне — целиком, без обрезки */
    .ts-consult .ts-imgban { height: auto; aspect-ratio: 1024 / 223; }
    .ts-consult .ts-imgban img { object-fit: contain; }
    .ts-why { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ts-articles { grid-template-columns: none; }
}

/* Блок «Размеры» из include_product_card_sizes.html (.tepl-size) — тоже в зелёной гамме */
.ts-card .tepl-size { margin-top: 18px !important; border: 1px solid var(--ts-line) !important; border-radius: var(--ts-radius) !important; box-shadow: var(--ts-shadow) !important; padding: 22px 24px !important; background: #fff; }
.ts-card .tepl-size__title { font-size: 22px !important; font-weight: 800 !important; }
.ts-card .tepl-size__table thead th { background: var(--ts-green-50) !important; color: var(--ts-green-700) !important; border-bottom-color: #d5eadb !important; }
.ts-card .tepl-size__chip.is-active { background: var(--ts-green-700) !important; border-color: var(--ts-green-700) !important; color: #fff !important; }
.ts-card .tepl-size__chip:hover { border-color: var(--ts-green-600) !important; color: var(--ts-green-700) !important; }
.ts-card .tepl-size__chip.is-active:hover { color: #fff !important; }
@media (max-width: 760px) { .ts-card .tepl-size, .ts-card .tepl-rsize { padding: 16px 12px !important; } }

/* ============================================================================
   ИТЕРАЦИЯ 3 (09.10.2026, правки заказчика)
   1) Сайт не должен «разъезжаться» между 1080p и 2K: весь контент — в одной
      колонке фиксированной максимальной ширины (1460px), высоты баннеров
      считаются от ширины КОЛОНКИ, а не экрана (никаких vw).
   2) Горизонтальная прокрутка из-за .ts-imgban/.ts-bleed (100vw включал
      ширину полосы прокрутки) — приём full-bleed отключён полностью.
   3) Промо-баннеры и «О компании» — как в макете: две скруглённые карточки
      с отступом; «О компании» — фото | текст | колонка показателей.
   ============================================================================ */
.ts-bleed { width: auto !important; max-width: none !important; left: auto !important; margin-left: 0 !important; position: static !important; }
body.tepl-is-main-page, html:has(body.tepl-is-main-page) { overflow-x: clip; }

/* Полоса категорий: фон на всю ширину без 100vw — через box-shadow-«полосу» */
body.tepl-is-main-page .tepl-main-content > .tepl-top-fullwidth {
    width: auto !important; left: auto !important; margin-left: 0 !important; position: relative;
    background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax);
    border-bottom: 0;
}

/* Слайдер — в колонке, скругление как в макете; высота от ширины колонки */
.ts-slider { margin-top: 14px; border-radius: 14px; aspect-ratio: 1024 / 401; max-height: none; height: auto; }
.ts-slider__nav--prev { left: 14px; }
.ts-slider__nav--next { right: 14px; }
.ts-slide__frame { box-shadow: none; }

/* Промо: 2 карточки с отступом и скруглением */
.ts-promo2 { gap: 18px; }
.ts-promo2 .ts-imgban { border-radius: 14px; aspect-ratio: 1024 / 470; }
.ts-promo2 .ts-imgban img { object-position: left center; }

/* Баннер консультации — в колонке, со скруглением, целиком */
.ts-consult .ts-imgban { border-radius: 14px; height: auto; aspect-ratio: 1024 / 223; }
.ts-consult .ts-imgban img { object-fit: cover; }

/* Все баннеры-картинки — не шире своей ячейки (без вылезания) */
.ts-imgban { max-width: 100%; min-width: 0; }
.ts-imgban img { max-width: 100%; }

/* «О компании» по макету: фото | текст | колонка показателей */
.ts-about { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(220px, .62fr); gap: 26px; align-items: stretch; }
.ts-about__img { border-radius: 14px; min-height: 0; aspect-ratio: 16 / 9; background-color: var(--ts-green-50); }
.ts-about__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ts-about__body p { margin: 10px 0 18px; font-size: 14.5px; }
.ts-about__stats { background: #f6f8f6; border: 1px solid var(--ts-line); border-radius: 14px; padding: 16px 18px; gap: 14px; }
.ts-stat { gap: 14px; }
.ts-stat__ico { flex: 0 0 auto; width: 34px; height: 34px; color: var(--ts-green-600); display: inline-flex; align-items: center; justify-content: center; }
.ts-stat__ico .ts-ico { width: 30px; height: 30px; }
.ts-stat b { font-size: 17px; }

@media (max-width: 1200px) {
    .ts-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ts-about__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .ts-slider { border-radius: 10px; margin-top: 10px; }
    .ts-promo2 { grid-template-columns: 1fr; gap: 12px; }
    .ts-promo2 .ts-imgban, .ts-consult .ts-imgban { border-radius: 10px; }
    .ts-about { grid-template-columns: 1fr; gap: 16px; }
    .ts-about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 4) Карточка товара: рабочая колонка — на ВСЮ ширину страницы */
body.tepl-is-product-page .tepl-main-content { max-width: none !important; width: 100%; padding: 0 24px; }
@media (max-width: 900px) { body.tepl-is-product-page .tepl-main-content { padding: 0 12px; } }

/* 6) Мобильная версия: при прокрутке прилипает белая шапка .ts-head
      (логотип, поиск, корзина), а зелёное меню — нет. На ПК — как было. */
@media (max-width: 900px) {
    .ts-nav, .ts-nav.tepl-sticky-bar, .ts-nav.tepl-sticky-bar.is-stuck { position: relative !important; top: auto !important; box-shadow: none !important; }
    .ts-head { position: -webkit-sticky; position: sticky; top: 0; z-index: 1101; box-shadow: 0 1px 0 var(--ts-line); transition: box-shadow .18s ease; }
    .ts-head.is-stuck { box-shadow: 0 6px 18px rgba(16, 40, 25, .14); }
    body.tepl-menu-open .ts-head { z-index: 990; }
}

/* ============================================================================
   ИТЕРАЦИЯ 4 (12.10.2026) — «автоформат» по ширине экрана
   1) Контент занимает ширину окна (поля 16–32px), максимум 1840px —
      на 1920×1080 сайт заполняет экран, как на макете, без пустых полей.
   2) На экранах шире ~2100px (2K, 4K) вся страница пропорционально
      увеличивается (zoom), поэтому на 2K выглядит ровно как на 1080p,
      только крупнее — компоновка не «разъезжается».
   3) Баннеры — просто картинки (без кнопок/горячих зон), единый формат
      слайдера 1920×560; высота ограничена, чтобы на первом экране были
      видны шапка, категории, баннер и полоса преимуществ.
   4) Меню и ряд категорий распределены на всю ширину полосы.
   ============================================================================ */
:root { --ts-max: 1840px; --ts-pad: clamp(16px, 1.7vw, 32px); }

.ts-wrap,
.tepl-main-content,
.tepl-cat-strip { max-width: var(--ts-max) !important; padding-left: var(--ts-pad) !important; padding-right: var(--ts-pad) !important; }
.tepl-main-content { width: 100%; margin-left: auto !important; margin-right: auto !important; }
/* Полоса категорий стоит внутри .tepl-main-content — свои поля ей не нужны */
.tepl-main-content .tepl-cat-strip { padding-left: 0 !important; padding-right: 0 !important; }
body.tepl-is-product-page .tepl-main-content { max-width: var(--ts-max) !important; padding-left: var(--ts-pad) !important; padding-right: var(--ts-pad) !important; }

/* Пропорциональное увеличение на больших мониторах (эталон — 1920px) */
/* Итоговый масштаб = авто-масштаб по ширине экрана × «Масштаб сайта» из
   настроек (админка → Настройки сайта → Внешний вид). Только на публичных
   страницах (с новой шапкой .ts-head) и только шире 900px — телефоны всегда 1:1. */
@media (min-width: 2100px) { html { --ts-auto-zoom: 1.1; } }
@media (min-width: 2300px) { html { --ts-auto-zoom: 1.2; } }
@media (min-width: 2500px) { html { --ts-auto-zoom: 1.3333; } }
@media (min-width: 2850px) { html { --ts-auto-zoom: 1.5; } }
@media (min-width: 3400px) { html { --ts-auto-zoom: 1.75; } }
@media (min-width: 3800px) { html { --ts-auto-zoom: 2; } }
@media (min-width: 901px) {
    html:has(body .ts-head) { zoom: calc(var(--ts-auto-zoom, 1) * var(--ts-site-zoom, 1)); }
}

/* ---------- Слайдер: единый формат, картинка кадрируется ---------- */
.ts-slider {
    aspect-ratio: 1920 / 560; height: auto;
    max-height: clamp(240px, calc(100vh - 400px), 560px);
    background: var(--ts-green-50);
}
.ts-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ts-slide__bg, .ts-slide__frame, .ts-hot, .ts-slide__link { display: none !important; }

/* Баннеры-картинки — без «кнопочных» эффектов, раз они не кликабельны */
div.ts-imgban { cursor: default; }
div.ts-imgban:hover { transform: none !important; box-shadow: none !important; filter: none !important; }
.ts-promo2 .ts-imgban { aspect-ratio: 960 / 440; }
.ts-consult .ts-imgban { aspect-ratio: 1920 / 420; height: auto; }
.ts-dirs .ts-imgban { aspect-ratio: 800 / 350; }

/* ---------- Меню: пункты распределены на всю ширину полосы ---------- */
@media (min-width: 901px) {
    .ts-nav__in { justify-content: space-between; }
    .ts-nav__in > .ts-nav__link { flex: 1 1 auto; justify-content: center; max-width: 260px; }
}

/* ---------- Ряд категорий: на всю ширину, при переполнении — стрелки ---------- */
.tepl-cat-strip { position: relative; }
.tepl-cat-strip__track { justify-content: safe center; scroll-behavior: smooth; }
.tepl-cat-strip__chip { flex: 1 1 0 !important; min-width: 108px; max-width: 190px; }
.tepl-cat-strip__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ts-line);
    background: #fff; color: var(--ts-text); box-shadow: var(--ts-shadow); cursor: pointer;
    display: none; align-items: center; justify-content: center; font-size: 16px;
}
.tepl-cat-strip__nav--prev { left: -6px; }
.tepl-cat-strip__nav--next { right: -6px; }
.tepl-cat-strip.is-overflow .tepl-cat-strip__nav { display: inline-flex; }
.tepl-cat-strip.is-overflow .tepl-cat-strip__track { justify-content: flex-start; padding-left: 30px; padding-right: 30px; }

@media (max-width: 900px) {
    .ts-slider { max-height: none; }
    .tepl-cat-strip__chip { flex: 0 0 auto !important; min-width: 0; }
    .tepl-cat-strip__nav { display: none !important; }
    .tepl-cat-strip.is-overflow .tepl-cat-strip__track { padding-left: 2px; padding-right: 2px; }
}
/* Полосу прокрутки ряда категорий не показываем — листаем стрелками/свайпом */
.tepl-cat-strip .tepl-cat-strip__track { scrollbar-width: none !important; }
.tepl-cat-strip .tepl-cat-strip__track::-webkit-scrollbar { display: none !important; height: 0 !important; }

/* ============================================================================
   ИТЕРАЦИЯ 5 (12.10.2026)
   - слайдер на главной — от края до края экрана (вне колонки, без 100vw);
   - у полосы преимуществ (.ts-benefits) убрана рамка;
   - блок .ts-dirs убран с главной (его не было на макете).
   ============================================================================ */
.ts-fulltop { width: 100%; background: #fff; }
.ts-fulltop .tepl-cat-strip { margin-left: auto !important; margin-right: auto !important; padding-left: var(--ts-pad) !important; padding-right: var(--ts-pad) !important; }
.ts-fulltop .ts-slider { margin: 0; border-radius: 0; width: 100%; max-height: clamp(260px, calc(100vh - 380px), 620px); }
.ts-fulltop .ts-slider__nav--prev { left: var(--ts-pad); }
.ts-fulltop .ts-slider__nav--next { right: var(--ts-pad); }
/* Старый «трюк» на всю ширину для полосы категорий больше не нужен */
body.tepl-is-main-page .tepl-main-content > .tepl-top-fullwidth:empty { display: none; }

.ts-benefits { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; }
.ts-benefits .ts-benefit, .ts-benefits .ts-benefit:nth-child(n) { border: 0 !important; }

@media (max-width: 900px) {
    .ts-fulltop .ts-slider { max-height: none; }
    .ts-fulltop .tepl-cat-strip { padding-left: 12px !important; padding-right: 12px !important; }
}

/* 12.10.2026 Финальные картинки заказчика (1024px): пропорции блоков —
   по самим картинкам, чтобы текст на баннерах не обрезался. */
.ts-promo2 .ts-imgban { aspect-ratio: 1024 / 566; }
.ts-promo2 .ts-imgban img { object-position: center; }
.ts-consult .ts-imgban { aspect-ratio: 1024 / 342; }
.ts-consult .ts-imgban img { object-fit: cover; object-position: center; }
.ts-about__img { aspect-ratio: 1024 / 442; background-size: cover; background-position: center; align-self: center; }

/* 12.10.2026 Баннеры главной кликабельны целиком: «Оптовые поставки» и
   «Помощь в расчёте» — окно «Заказать звонок», «Собственный склад» — /dostavka/.
   Лёгкий отклик при наведении, чтобы было понятно, что на баннер можно нажать. */
a.ts-imgban { cursor: pointer; text-decoration: none; }
a.ts-imgban:hover { transform: translateY(-2px); box-shadow: var(--ts-shadow-h); filter: brightness(1.03); }
a.ts-imgban:focus-visible { outline: 3px solid var(--ts-green-600); outline-offset: 3px; }
.ts-consult .ts-imgban { aspect-ratio: 2170 / 725; }

/* 12.10.2026 Шапка: e-mail под номером телефона */
.ts-head__phone-num { text-decoration: none !important; color: var(--ts-text) !important; }
.ts-head__phone-num:hover b { color: var(--ts-red); }
.ts-head__mail { display: block; font-size: 13px; line-height: 1.35; color: var(--ts-green-700) !important; text-decoration: none !important; white-space: nowrap; }
.ts-head__mail:hover { color: var(--ts-red) !important; text-decoration: underline !important; }

/* 12.10.2026 Стрелки ряда категорий — внутри полосы (раньше right:-6px
   выталкивало кнопку за край окна → лишняя горизонтальная прокрутка). */
.tepl-cat-strip__nav--prev { left: 0; }
.tepl-cat-strip__nav--next { right: 0; }
/* То же для стрелок карусели «Популярные товары»: на узких экранах поля
   меньше 18px, и right:-18px выходило за край окна. */
@media (max-width: 1200px) {
    .ts-carousel__btn--prev { left: -6px; }
    .ts-carousel__btn--next { right: -6px; }
}

/* ============================================================================
   14.10.2026 — правки Константина
   ============================================================================ */
/* «Популярные товары»: цена за упаковку и под ней — за м³ (как в карточке) */
.ts-pcard__price--two { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; white-space: normal; min-width: 0; }
.ts-pcard__price--two .ts-pcard__price-pack { font-size: 17px; font-weight: 800; white-space: nowrap; }
.ts-pcard__price--two .ts-pcard__price-unit { font-size: 13px; font-weight: 600; color: var(--ts-muted); white-space: nowrap; }

/* Карточка товара: фото не выше колонки информации (без пустоты справа)
   и единый «потолок» для слишком крупных фото (Эковер и др.) —
   картинка вписывается целиком (contain), не растягиваясь. */
/* Высоту ряда задаёт колонка информации; фото растягивается ровно до неё
   (картинка — absolute, сама на высоту ряда не влияет). */
@media (min-width: 761px) {
    .ts-card__top { align-items: stretch; }
    .ts-card__gallery { align-self: stretch; align-items: stretch; min-height: 320px; }
    .ts-card__main { aspect-ratio: auto; height: auto; min-height: 320px; max-height: 620px; }
    .ts-card__main img { position: absolute; inset: 0; margin: auto; }
    .ts-card__thumbs { max-height: 620px; overflow: hidden; }
}
.ts-card__main img { width: auto; height: auto; max-width: 92%; max-height: 92%; object-fit: contain; }
@media (max-width: 760px) {
    .ts-card__main { aspect-ratio: 4 / 3; max-height: 340px; }
}
@media (max-width: 600px) {
    .ts-pcard__price--two .ts-pcard__price-pack { font-size: 15px; white-space: normal; }
    .ts-pcard__price--two .ts-pcard__price-unit { font-size: 12px; }
}