/* Start:/include/advantages/css/product.css?178809700213874*/
<?php

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");

/**
 * @global CMain $APPLICATION
 */

$APPLICATION->SetTitle("product.css");
?>/* =========================================================
   SANSTOP — PRODUCT ADVANTAGES / PREMIUM FINAL

   Доработка блока преимуществ в карточке товара.
   Назначение:
   — убрать ощущение обычной таблицы;
   — сделать линии деликатнее;
   — улучшить типографическую иерархию;
   — сохранить лёгкий premium-hover;
   — не использовать лишний фирменный цвет.
   ========================================================= */


/* =========================================================
   CONTAINER
   ========================================================= */

.sanstop-product-advantages {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 100% !important;

    /* SANSTOP:
       Чуть больше воздуха между кнопками покупки
       и сервисной информацией. */
    margin-top: 24px !important;

    /* SANSTOP:
       Более светлая сетка — меньше ощущения таблицы. */
    border-top: 1px solid #ECECE8;
    border-left: 1px solid #ECECE8;

    background: #fff;

    box-sizing: border-box;
}


/* =========================================================
   ITEM
   ========================================================= */

.sanstop-product-advantages__item {
    position: relative;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    /* SANSTOP:
       Немного больше высоты и воздуха. */
    min-height: 80px !important;

    margin: 0 !important;

    padding: 17px 42px 17px 18px !important;

    box-sizing: border-box;

    border-right: 1px solid #ECECE8;
    border-bottom: 1px solid #ECECE8;

    background: #fff;

    color: #181818 !important;
    text-decoration: none !important;

    transition:
        background-color .22s ease,
        border-color .22s ease;
}


/* SANSTOP:
   Hover очень мягкий — без тени,
   подъёма карточки и лишней декоративности. */
.sanstop-product-advantages__item:hover {
    background: #F6F6F4;

    color: #181818 !important;
    text-decoration: none !important;
}


/* SANSTOP:
   Keyboard focus показываем отдельно.
   Не используем :focus вместе с hover,
   чтобы фон не зависал после клика мышью. */
.sanstop-product-advantages__item:focus-visible {
    outline: 1px solid #F36A10;
    outline-offset: -1px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.sanstop-product-advantages__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    min-width: 0 !important;
}


/* SANSTOP:
   Заголовок делаем medium вместо semibold.
   Он остаётся заметным, но не конкурирует с ценой и CTA. */
.sanstop-product-advantages__title {
    display: block !important;

    margin: 0 0 4px !important;

    font-size: 14px;
    line-height: 19px;
    font-weight: 500;

    letter-spacing: -0.01em;

    color: #181818 !important;
}


/* SANSTOP:
   Подпись чуть контрастнее исходного #858580. */
.sanstop-product-advantages__text {
    display: block !important;

    margin: 0 !important;

    font-size: 12px;
    line-height: 17px;
    font-weight: 400;

    color: #777772 !important;
}


/* =========================================================
   ARROW
   ========================================================= */

.sanstop-product-advantages__arrow {
    position: absolute;

    top: 16px;
    right: 16px;

    display: block !important;

    width: 12px;
    height: 12px;

    color: #9A9A95 !important;

    transition:
        transform .22s ease,
        color .22s ease;
}


/* SANSTOP:
   Верхняя и правая части тонкой editorial-стрелки. */
.sanstop-product-advantages__arrow::before {
    content: "";

    position: absolute;

    top: 1px;
    right: 0;

    width: 8px;
    height: 8px;

    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;

    box-sizing: border-box;
}


/* SANSTOP:
   Диагональный штрих стрелки. */
.sanstop-product-advantages__arrow::after {
    content: "";

    position: absolute;

    top: 6px;
    left: 1px;

    width: 10px;
    height: 1px;

    background: currentColor;

    transform: rotate(-45deg);
    transform-origin: center;
}


/* SANSTOP:
   При hover стрелка становится тёмной,
   а не оранжевой.
   Так блок выглядит дороже и спокойнее. */
.sanstop-product-advantages__item:hover
.sanstop-product-advantages__arrow {
    color: #181818 !important;

    transform: translate(2px, -2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .sanstop-product-advantages {
        margin-top: 26px !important;
    }

    .sanstop-product-advantages__item {
        min-height: 76px !important;

        padding:
            15px
            40px
            14px
            16px !important;
    }

    .sanstop-product-advantages__arrow {
        top: 15px;
        right: 15px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    /* SANSTOP:
       На мобильном одна колонка —
       текст остаётся читаемым и не сжимается. */
    .sanstop-product-advantages {
        grid-template-columns: 1fr !important;

        margin-top: 22px !important;
    }

    .sanstop-product-advantages__item {
        min-height: 70px !important;

        padding:
            14px
            38px
            13px
            15px !important;
    }

    .sanstop-product-advantages__title {
        margin-bottom: 4px !important;

        font-size: 14px;
        line-height: 19px;
    }

    .sanstop-product-advantages__text {
        font-size: 12px;
        line-height: 17px;
    }

    .sanstop-product-advantages__arrow {
        top: 14px;
        right: 14px;

        color: #9A9A95 !important;
    }

    .sanstop-product-advantages__item:active
    .sanstop-product-advantages__arrow {
        color: #181818 !important;

        transform: translate(2px, -2px);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sanstop-product-advantages__item,
    .sanstop-product-advantages__arrow {
        transition: none;
    }
}

/* =========================================================
   SANSTOP — PRODUCT ADVANTAGES / GRID FIX
   Доработка: принудительно фиксируем сетку преимуществ 2×2.
   Защита от стилей шаблона SkyShop, растягивающих элементы
   на всю ширину строки.
   ========================================================= */

.sanstop-product-advantages {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
}


/* SANSTOP:
   Сбрасываем возможное растягивание элементов
   на всю строку со стороны шаблона. */
.sanstop-product-advantages >
.sanstop-product-advantages__item {
    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
}


/* SANSTOP:
   Явно фиксируем расположение четырёх преимуществ. */
.sanstop-product-advantages >
.sanstop-product-advantages__item:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.sanstop-product-advantages >
.sanstop-product-advantages__item:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.sanstop-product-advantages >
.sanstop-product-advantages__item:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

.sanstop-product-advantages >
.sanstop-product-advantages__item:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    /* SANSTOP:
       На телефоне преимущества снова идут вертикально. */
    .sanstop-product-advantages {
        grid-template-columns: 1fr !important;
    }

    .sanstop-product-advantages >
    .sanstop-product-advantages__item:nth-child(n) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

/* =========================================================
   SANSTOP — PRODUCT CONTACT / MESSENGERS
   Доработка: связь с менеджером из карточки товара.

   Задача:
   — дать быстрый доступ к мессенджерам;
   — не конкурировать с основными CTA;
   — сохранить минималистичный стиль SANSTOP.
   ========================================================= */

.sanstop-product-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px 16px;

    width: 100%;

    margin: 18px 0 0;

    font-size: 13px;
    line-height: 18px;
}


/* SANSTOP:
   Вопрос покупателю — спокойный вторичный текст. */
.sanstop-product-contact__label {
    color: #777772;
    font-weight: 400;
}


/* SANSTOP:
   Мессенджеры располагаются одной компактной строкой. */
.sanstop-product-contact__messengers {
    display: flex;
    align-items: center;

    gap: 10px;
}


/* SANSTOP:
   Ссылки намеренно без фирменных цветов мессенджеров.
   Так они не конкурируют с кнопкой "В корзину". */
.sanstop-product-contact__link {
    position: relative;

    color: #181818 !important;

    font-size: 13px;
    line-height: 18px;
    font-weight: 500;

    text-decoration: none !important;

    transition: color .2s ease;
}


/* SANSTOP:
   Тонкое подчёркивание появляется только при наведении. */
.sanstop-product-contact__link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -2px;

    width: 100%;
    height: 1px;

    background: #181818;

    opacity: 0;

    transform: scaleX(.6);
    transform-origin: left center;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.sanstop-product-contact__link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}


/* SANSTOP:
   Вместо символа "|" используем тонкий
   нейтральный разделитель. */
.sanstop-product-contact__separator {
    display: block;

    width: 1px;
    height: 11px;

    background: #D8D8D4;
}


/* SANSTOP:
   Доступный keyboard focus. */
.sanstop-product-contact__link:focus-visible {
    outline: 1px solid #F36A10;
    outline-offset: 4px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .sanstop-product-contact {
        margin-top: 16px;

        gap: 6px 14px;
    }

    .sanstop-product-contact__messengers {
        gap: 9px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sanstop-product-contact__link,
    .sanstop-product-contact__link::after {
        transition: none;
    }
}

/* =========================================================
   SANSTOP — PRODUCT CONTACT / SERVICE ICON
   Доработка: нейтральная иконка консультации перед текстом.
   ========================================================= */

.sanstop-product-contact__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #777772;
}

.sanstop-product-contact__icon {
    display: block;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    color: #777772;
}

/* SANSTOP — финальный контраст блока консультации */
.sanstop-product-contact__label,
.sanstop-product-contact__icon {
    color: #666662;
}

/* =========================================================
   SANSTOP — PRODUCT ADVANTAGES / SPACING FIX
   Доработка: увеличиваем расстояние между строкой
   мессенджеров и блоком преимуществ.
   ========================================================= */

.sanstop-product-advantages {
    margin-top: 26px !important;
}
/* End */
/* /include/advantages/css/product.css?178809700213874 */