/* Стили страниц группы «home». Подключается в inc/_meta.php только на этих страницах, после components.css.
   Сначала — доставшееся от подрядчика, затем наше поверх. */
/* «О магазине»: текст и фото рядом, на планшете — друг под другом. Поверх фона подвала (он заходит вверх на ~255px). */
.kln-section_about { z-index: 2; padding-top: 84px; padding-bottom: 100px; }
.kln-section_about .kln-container { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 992px) {
    .kln-section_about .kln-container { flex-direction: column; }
    .kln-h-about-content { order: 1; }
    .kln-h-about-gallery { order: 2; }
}
.kln-sec-slider-home { position: relative; z-index: 10; }
.kln-sec-slider-home:before { width: 100%; height: 75%; content: ""; background: var(--kln-bg); position: absolute; left: 0; bottom: 0px; }
.kln-sec-slider-home .kln-container { position: relative; z-index: 5; }
.kln-trigers { display: flex; }
@media screen and (max-width: 768px) {
    .kln-trigers { flex-wrap: wrap; justify-content: center; }
}
.kln-trigers__el { flex: 1 1 auto; display: flex; }
.kln-trigers__el:last-child { padding-right: 0px; }
.kln-trigers__el .kln-trigers__icon { display: block; line-height: 0px; }
.kln-trigers__el .kln-trigers__icon img { max-width: 100%; }
.kln-h-about-content__desc p:last-child { margin-bottom: 0px; }


/* ---------- Главная: полоса «5000 бонусов за первый заказ» ---------- */
.kln-bonus-strip { padding: 12px 0 52px; }
.kln-bonus-strip__inner { display: flex; align-items: center; gap: 28px; padding: 28px 40px; border-radius: var(--kln-r-md); background: var(--kln-soft); }
.kln-bonus-strip__value { flex: 0 0 auto; font-family: var(--kln-font-head); font-weight: 600; line-height: 1; color: var(--kln-red); }
.kln-bonus-strip__text { flex: 1 1 auto; min-width: 0; }
.kln-bonus-strip__note { margin-top: 8px; font-size: var(--kln-fs-md); color: var(--kln-muted); }
.kln-bonus-strip__btn { flex: 0 0 auto; }
@media (max-width: 767px) {
    .kln-bonus-strip { padding-bottom: 36px; }
    .kln-bonus-strip__inner { flex-direction: column; gap: 12px; padding: 24px 20px; text-align: center; }
    .kln-bonus-strip__btn { width: 100%; } }
/* Полоса для гостей на главной: два предложения (промокод −10% и бонусы) и одна кнопка регистрации */
.kln-bonus-strip__offers { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; min-width: 0; }
.kln-bonus-strip__offer { display: flex; align-items: center; gap: 20px; min-width: 0; }
.kln-bonus-strip__offer + .kln-bonus-strip__offer { padding-left: 32px; } /* без разделителя — блоки разведены отступом */
.kln-bonus-strip__offers .kln-bonus-strip__value { font-size: var(--kln-fs-display); }
.kln-bonus-strip__link { color: var(--kln-red); text-decoration: underline; }
@media (max-width: 1023px) {
    .kln-bonus-strip__inner { flex-wrap: wrap; }
    .kln-bonus-strip__offers { flex-basis: 100%; grid-template-columns: 1fr; gap: 16px; }
    .kln-bonus-strip__offer { gap: 16px; text-align: left; }
    .kln-bonus-strip__offer + .kln-bonus-strip__offer { padding: 16px 0 0; }
    .kln-bonus-strip__offers .kln-bonus-strip__value { flex: 0 0 96px; font-size: var(--kln-fs-2xl); } }
.kln-bonus-strip__gift { display: block; width: 72px; height: 72px; margin: 0 auto; object-fit: contain; }
.kln-bonus-strip__offers .kln-bonus-strip__value { text-align: center; } /* на планшете подарок и «5000» по центру общей колонки 96px */
/* Телефон: каждое предложение столбиком по центру — цифра или подарок, под ними заголовок и пояснение */
@media (max-width: 767px) {
    .kln-bonus-strip__offer { flex-direction: column; gap: 8px; text-align: center; }
    .kln-bonus-strip__offers .kln-bonus-strip__value { flex: 0 0 auto; }
    .kln-bonus-strip__offers { gap: 20px; }
    .kln-bonus-strip__offer + .kln-bonus-strip__offer { padding-top: 20px; } }
.kln-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; padding-bottom: 0; }
/* ---------- Главная: хиты, новинки, акции — сеткой по 8 карточек вместо каруселей ---------- */
@media (min-width: 691px) and (max-width: 992px) {
    .kln-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 8 карточек в три колонки дают неполную последнюю строку — показываем ровно две строки (6) */
    .kln-products-grid .kln-card:nth-child(n+7) { display: none; } }
@media (max-width: 690px) {
    .kln-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Белый фон (иконки — прозрачные PNG), пункты ровными колонками: 3 или 4 в ряд, на телефоне по два. */
.kln-sec-slider-home:before { display: none; }
/* ---------- Главная: преимущества под слайдером ---------- */
.kln-sec-slider-home { padding-bottom: 16px; }
.kln-trigers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 32px; padding-top: 28px; }
.kln-trigers__el { display: flex; align-items: center; gap: 16px; width: auto; margin: 0; padding: 0; font-size: var(--kln-fs-md); line-height: 1.4; color: var(--kln-ink); }
.kln-trigers__el .kln-trigers__icon { max-width: none; }
.kln-trigers__el br { display: none; }
.kln-trigers__el .kln-trigers__icon img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 767px) {
    .kln-trigers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding-top: 20px; }
    .kln-trigers__el { gap: 12px; font-size: var(--kln-fs-sm); line-height: 1.4; }
    .kln-trigers__el br { display: none; } }
/* Карусель давала блоку нижний отступ, сетка — нет: возвращаем, чтобы следующий блок не прилипал. */
.kln-section_slider:has(.kln-products-grid) { padding-bottom: 44px; }
.kln-bonus-strip { padding-top: 32px; }
@media (max-width: 767px) {
    .kln-section_slider:has(.kln-products-grid) { padding-bottom: 32px; }
    .kln-bonus-strip { padding-top: 20px; } }
/* Заголовок блока товаров на главной: карусель давала воздух под заголовком, сетка — нет. */
.kln-section_slider:has(.kln-products-grid) .kln-sec-head { margin-bottom: 36px; }
@media (max-width: 767px) {
    .kln-section_slider:has(.kln-products-grid) .kln-sec-head { margin-bottom: 24px; } }
/* Две колонки на всю ширину. Слева — заголовок, вступление и финальная фраза курсивом; справа — четыре группы
   тегов таблицей с тонкими разделителями: название и подпись группы слева, теги справа.
   Обёртка описания (h-about-content__desc) раскрыта display: contents, чтобы её части встали в сетку. */
.kln-h-about-content { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: 80px; align-items: start; max-width: none; }
/* ---------- Главная: текст о магазине ---------- */
.kln-h-about-content .kln-title_section { grid-column: 1; grid-row: 1; margin: 0 0 28px; text-align: left; }
.kln-h-about-content__desc { display: contents; font-size: var(--kln-fs-md); line-height: 1.5; color: var(--kln-text); }
.kln-h-about-content__desc .kln-about__lead { grid-column: 1; grid-row: 2; max-width: 34em; margin: 0; font-size: var(--kln-fs-lg); line-height: 1.5; color: var(--kln-ink); }
.kln-h-about-content__desc .kln-about__outro { grid-column: 1; grid-row: 3; max-width: 26em; margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--kln-line); font-size: var(--kln-fs-md); line-height: 1.5; color: var(--kln-text); }
/* Вопрос — заголовком Jun отдельной строкой, ответ — обычным текстом (Google Sans). Курсив Jun не подключается. */
.kln-about__outro-q { display: block; font-family: var(--kln-font-head); margin-bottom: 8px; font-size: var(--kln-fs-xl); font-weight: 600; line-height: 1.2; color: var(--kln-ink); }
.kln-about__grid { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; border-top: 1px solid var(--kln-line); }
.kln-about__group { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; column-gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--kln-line); }
.kln-h-about-content .kln-about__title { grid-column: 1; margin: 8px 0 0; }
.kln-h-about-content__desc .kln-about__text { grid-column: 1; margin: 8px 0 0; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-muted); }
.kln-h-about-content .kln-about__tags { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kln-h-about-content .kln-about__tags li { margin: 0; padding: 0; }
.kln-h-about-content .kln-about__tags li:before { display: none; }
.kln-about__tags a,
.kln-about__tags span { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 16px; border: 1px solid var(--kln-line); border-radius: var(--kln-r-sm); background: #fff; font-size: var(--kln-fs-sm); line-height: 1.4; color: var(--kln-ink); text-decoration: none; transition: border-color .15s, color .15s, background-color .15s; }
.kln-about__tags a:hover { border-color: var(--kln-red); color: var(--kln-red); text-decoration: none; }
.kln-about__tags_plain span { border-color: transparent; background: var(--kln-surface); color: var(--kln-text); }
@media (max-width: 1100px) {
    .kln-h-about-content { column-gap: 48px; }
    .kln-about__group { grid-template-columns: 1fr; row-gap: 12px; }
    .kln-h-about-content .kln-about__title { margin-top: 0; }
    .kln-h-about-content .kln-about__tags { grid-column: 1; grid-row: auto; } }
@media (max-width: 767px) {
    .kln-h-about-content { display: block; }
    .kln-h-about-content__desc .kln-about__lead { margin-bottom: 28px; font-size: var(--kln-fs-md); }
    .kln-h-about-content__desc .kln-about__outro { margin-top: 28px; padding-top: 0; border-top: 0; }
    .kln-about__group { padding: 20px 0; }
    .kln-about__tags a,
.kln-about__tags span { min-height: 32px; padding: 4px 12px; font-size: var(--kln-fs-sm); } }
/* Преимущества: линейные иконки Davooda — 48px без отрицательных отступов (они были под объёмные 3D-иконки). */
.kln-trigers__el .kln-trigers__icon { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; }
@media (max-width: 767px) {
    .kln-trigers__el .kln-trigers__icon { flex-basis: 40px; width: 40px; height: 40px; margin: 0; } }
/* Телефон: в две колонки по 4 строки было тесно — текст 13px, значки 36px, ближе к баннеру */
@media (max-width: 767px) {
    .kln-trigers { gap: 16px 12px; padding-top: 12px; }
    .kln-trigers__el { gap: 10px; font-size: 13px; line-height: 1.35; }
    .kln-trigers__el .kln-trigers__icon { flex-basis: 36px; width: 36px; height: 36px; } }
.kln-trigers__cont,
.kln-about__lead,
.kln-about__outro,
.kln-bonus-strip__text,
.kln-bonus-strip__note { text-wrap-style: balance; }
/* У секции не было своих отступов: до карточек товаров сверху оставалось 45px, до брендов — 55px. Теперь ~90px, как между каруселями. */
.kln-sec-stories { padding: 44px 0; }
@media (max-width: 767px) {
    .kln-sec-stories { padding: 28px 0; } }