

/* Start:/bitrix/templates/aspro-lite/components/bitrix/catalog/main/style.min.css?17216549991064*/
.group_description_block.bottom{padding:40px 0 0;margin-bottom:30px}.no_goods{padding:30px 30px 0}.js-load-wrapper>.no_goods{margin-top:-1px}.no_goods .no_products{position:relative}.no_goods .no_products:before{content:"";position:relative;width:117px;height:117px;background:url(/bitrix/templates/aspro-lite/components/bitrix/catalog/main/../../../../images/empty_catalog.png) 0 0 no-repeat;display:block;margin:auto auto 23px}.no_goods .button{float:right;margin:17px 0 0}.wrap_text_empty{padding:10px 0 15px 0;text-align:center}.wrap_text_empty .middle_text{padding:16px 0 0;display:inline-block}#main .catalog-maxwidth .bottom-links-block,#main .catalog-maxwidth .catalog-detail__bottom-info .detail-block:not(.tizers){margin-left:auto;margin-right:auto}html.bx-ie #main .catalog-maxwidth .bottom-links-block,html.bx-ie #main .catalog-maxwidth .catalog-detail__bottom-info .detail-block:not(.tizers){flex-basis:auto}.section-content-wrapper .text_after_items{margin-top:49px}.ordered-block--hide-icons .btn-fast-view,.ordered-block--hide-icons .catalog-block__info-tech,.ordered-block--hide-icons .sticker{display:none}
/* End */


/* Start:/bitrix/templates/aspro-lite/components/bitrix/catalog.section.list/main/style.min.css?17216549992039*/
.sections-block__item-link{--item-pl:20px;--item-pr:20px;--item-pt:32px;--item-pb:27px;padding:var(--item-pt) var(--item-pr) var(--item-pb) var(--item-pl);text-align:center;display:block}.items-6 .sections-block__item-link{--item-pt:36px;--item-pb:31px}.items-5 .sections-block__item-link{--item-pt:40px;--item-pb:35px}.items-4 .sections-block__item-link{--item-pt:44px;--item-pb:39px}.sections-block__item-image-wrapper{--section-image-width:80px;--section-image-height:80px;width:var(--section-image-width);height:var(--section-image-height);margin:auto auto 14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sections-block__item-image{max-width:100%;max-height:100%}.sections-block__item-image-wrapper--ICONS{--section-image-width:40px;--section-image-height:40px}.sections-block__item-image-wrapper--ICONS svg{width:var(--section-image-width);height:var(--section-image-height)}.sections-block__item-text{display:block}@media (min-width:1200px){.items-6 .sections-block__item-image-wrapper--PICTURES{--section-image-width:104px;--section-image-height:104px}.items-4 .sections-block__item-image-wrapper--PICTURES,.items-5 .sections-block__item-image-wrapper--PICTURES{--section-image-width:120px;--section-image-height:120px}}@media (max-width:600px){.sections-block__item-image-wrapper--PICTURES{--section-image-width:70px;--section-image-height:70px}.sections-block__item-link{--item-pl:16px;--item-pr:16px;--item-pt:16px;--item-pb:16px}.normal .sections-block__item-image-wrapper{--section-image-width:auto;--section-image-height:auto}.sections-block--mobile-compact.grid-list{grid-gap:12px}.sections-block--mobile-compact.mobile-scrolled{grid-gap:0}.sections-block--mobile-compact .sections-block__item-image-wrapper{--section-image-width:32px;--section-image-height:32px;margin:0 18px 0 0}.sections-block--mobile-compact .sections-block__item-inner{display:flex;flex-direction:row;align-items:center;text-align:left}.sections-block--mobile-compact .sections-block__item-link{--item-pt:16px;--item-pb:16px}}
/* End */


/* Start:/local/css/otzyvy.css?17891639709405*/
/*
 * Блок отзывов в каталоге — local/php_interface/blok_otzyvov.php.
 *
 * Ни одного своего шрифта и ни одного своего цвета: всё из темы.
 *   акцент          --theme-base-color (#a447bf)
 *   заголовки       --theme-font-title-family (Inter), вес 600
 *   текст           --theme-font-family (Manrope)
 *   радиус          --theme-outer-border-radius (8px)
 *   линии           #ededed — токен --stroke_black темы
 * Переменные объявляет тема в <style> страницы; запасные значения на случай,
 * если её перенастроят.
 *
 * ⚠️ ПРИЗНАК ЧУЖОЙ РЕЧИ — ПУЗЫРЬ СООБЩЕНИЯ. Владелец дважды сказал, что не
 * видно, что это отзывы. Пробовали по очереди: просто рамки с текстом, потом
 * родную цитату темы (вертикальная полоса `blockquote:before`), потом полосу
 * плюс крупную кавычку. Все три раза мимо, и разбор объяснил почему:
 * вертикальная полоса — условность документации, обычный читатель видит в ней
 * «примечание», а белая карточка с рамкой 8px — это буквально та же форма, что
 * у плиток разделов выше, то есть элемент интерфейса магазина.
 *
 * Честных знаков «это сказал человек» в наших данных всего два: крупная кавычка
 * и пузырь сообщения. Взят пузырь: наши отзывы и есть сообщения («Доброго дня!
 * Мех получили, благодарю!»), аудитория читает эту форму мгновенно, и она
 * использует идею владельца про фон по делу — тон становится телом реплики,
 * а не просто подложкой.
 *
 * ⚠️ Тон пузыря — акцент темы с прозрачностью 10% (#a447bf1a). Хвостик красим
 * ПЛОТНЫМ #f6edf9 — это тот же цвет, посчитанный поверх белого. Полупрозрачный
 * хвостик наложился бы на пузырь и дал тёмный уголок.
 *
 * ⚠️ Подпись стоит СНАРУЖИ пузыря, на белом. Это и отделяет блок от сиреневого
 * подвала: между тоном пузыря и тоном подвала всегда есть белая строка. */

.tfu-otzyvy {
    /* Снизу больше, чем сверху: блок последний на странице, и тонированные
       пузыри не должны прилипать к сиреневому подвалу. */
    margin: 48px 0 64px;
    color: #222;
}

/*
 * Свой контейнер, а не `maxwidth-theme` темы.
 *
 * ⚠️ Блок вставляется в пять разных мест, и вложенность там разная: на корне
 * каталога он оказывается ВНУТРИ `maxwidth-theme`, и вторая такая обёртка
 * давала двойной отступ — блок стоял на 32px правее сетки страницы. Поэтому
 * контейнер свой, а внутри темы он гасится следующим правилом.
 */
.tfu-otzyvy__vnutri {
    max-width: var(--theme-page-width, 1500px);
    margin: 0 auto;
    padding: 0 var(--theme-page-width-padding, 32px);
}

.maxwidth-theme .tfu-otzyvy__vnutri,
.container .tfu-otzyvy__vnutri {
    max-width: none;
    padding: 0;
}

.tfu-otzyvy__shapka {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.tfu-otzyvy__zagolovok {
    margin: 0;
    font-family: var(--theme-font-title-family, Inter), Arial, sans-serif;
    font-weight: var(--theme-font-title-weight, 600);
    font-size: 24px;
    line-height: 1.25;
    color: #222;
}

.tfu-otzyvy__vse {
    color: var(--theme-base-color, #a447bf);
    font-family: var(--theme-font-family, Manrope), Arial, sans-serif;
    font-size: 15px;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.tfu-otzyvy__vse:hover {
    color: var(--theme-base-color, #a447bf);
    border-bottom-color: currentColor;
}

.tfu-otzyvy__vse:focus-visible {
    outline: 2px solid var(--theme-base-color, #a447bf);
    outline-offset: 4px;
    border-bottom-color: transparent;
}

.tfu-otzyvy__setka {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    /* Пузыри разной высоты — это нормально для сообщений, не растягиваем. */
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * ⚠️ Тема рисует всем `ul li` серую чёрточку через `li:before` — глобальное
 * правило без ограничения по контексту. В карточке отзыва она висела над
 * текстом мусорным знаком. Помнить для любого своего списка.
 */
.tfu-otzyvy__setka > li:before {
    content: none;
    display: none;
}

/*
 * Рамки и белого прямоугольника больше нет: их роль играет пузырь. Именно
 * сходство с плитками разделов и мешало опознать отзывы.
 */
.tfu-otzyvy__karta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

/* Пузырь. Полосу темы гасим — вместо неё форма реплики. */
.tfu-otzyvy blockquote.tfu-otzyvy__citata {
    position: relative;
    margin: 0;
    padding: 18px 22px;
    border: 0;
    border-radius: var(--theme-outer-border-radius, 8px);
    background: #a447bf1a;
    font-size: 15px;
    line-height: 1.6;
    font-style: normal;
}

.tfu-otzyvy blockquote.tfu-otzyvy__citata:before {
    content: none;
    display: none;
}

/* Хвостик. Треугольник, а не повёрнутый квадрат: квадрат налез бы на пузырь. */
.tfu-otzyvy blockquote.tfu-otzyvy__citata:after {
    content: "";
    position: absolute;
    left: 24px;
    bottom: -10px;
    width: 18px;
    height: 10px;
    background: #f6edf9;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.tfu-otzyvy__tekst {
    margin: 0;
    font-family: var(--theme-font-family, Manrope), Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #222;
    /* Ширина строки: держим ближе к читаемым 60–70 знакам. */
    max-width: 34em;
    overflow-wrap: anywhere;
}

/* Имя и дата — снаружи пузыря, под хвостиком, как подпись под репликой. */
.tfu-otzyvy__kto {
    display: flex;
    align-items: baseline;
    gap: 6px 10px;
    flex-wrap: wrap;
    margin: 0;
    padding-left: 24px;
    font-family: var(--theme-font-family, Manrope), Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.tfu-otzyvy__imya {
    font-weight: 600;
    color: #222;
}

.tfu-otzyvy__data {
    color: #999;
}

/*
 * ⚠️ Третий отзыв на планшете НЕ прячем. Раньше он скрывался на средней ширине
 * и снова появлялся на телефоне — количество содержания зависело от размера
 * экрана, а это читается как сбой. Вместо этого он занимает вторую строку
 * целиком. Находка Codex при разборе оформления 11.09.2026.
 */
@media (max-width: 991px) {
    .tfu-otzyvy__setka {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tfu-otzyvy__karta:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .tfu-otzyvy {
        margin: 32px 0 48px;
    }

    /*
     * ⚠️ Шапка в столбец. На телефоне ссылку справа перекрывали плавающие
     * кнопки мессенджеров — она была видна, но не нажималась.
     */
    .tfu-otzyvy__shapka {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .tfu-otzyvy__zagolovok {
        font-size: 20px;
    }

    .tfu-otzyvy__vse {
        font-size: 14px;
    }

    .tfu-otzyvy__setka {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tfu-otzyvy__karta,
    .tfu-otzyvy__karta:last-child:nth-child(odd) {
        grid-column: auto;
        padding: 0;
    }

    .tfu-otzyvy blockquote.tfu-otzyvy__citata {
        padding: 16px 18px;
    }
}

/* End */
/* /bitrix/templates/aspro-lite/components/bitrix/catalog/main/style.min.css?17216549991064 */
/* /bitrix/templates/aspro-lite/components/bitrix/catalog.section.list/main/style.min.css?17216549992039 */
/* /local/css/otzyvy.css?17891639709405 */
