/* ================================================================
   КАСТОМНЫЕ СТИЛИ ДЛЯ МАГАЗИНА TILDA
   ================================================================
   Содержит правила для:
   • карточек товаров в каталоге и блоке «Смотрите также»
   • попапа товара (быстрый просмотр)
   • цветовых свотчей (работает в паре с JS, который добавляет
     .block-color / .element-color / [data-name-color] / [data-activ-color])
   • опций размера и цвета
   • табов внутри попапа товара
   • слайдера фото (точки-полоски)
   • аккордеонов (T585) и кастомных стрелок
   • корзины (T706)
   • меню (T794) и блока «Покупателям» (#rec784926862)
   ============================================================ */


/* ----------------------------------------------------------------
   1. КАТАЛОГ — карточки товаров на мобильных
   ---------------------------------------------------------------- */

/* Отступ снизу у карточек на экранах ≤960px */
@media screen and (max-width: 960px) {
    .t-store__grid-cont .t-col,
    .t-store__grid-cont .t-store__stretch-col {
        margin-bottom: 28px;
    }
}

/* Пропорция картинки в карточке: высота 145% от ширины (вертикальная) */
.t-store__card__imgwrapper {
    position: relative;
    width: 100%;
    padding-bottom: 145%;
}

/* Расстояние между карточками в каталоге на мобилке (правка 19.11) */
@media screen and (max-width: 960px) {
    .t-store__grid-cont .t-store__card-list {
        row-gap: 15px !important;
    }
}


/* ----------------------------------------------------------------
   2. БЛОК «СМОТРИТЕ ТАКЖЕ» (рекомендуемые товары) на мобилке
   ---------------------------------------------------------------- */

/* Увеличиваем карточки рекомендуемых до 68% ширины (правка 19.11) */
@media screen and (max-width: 960px) {
    .t-store__relevants-grid-cont.t-store__grid-cont_mobile-one-row .t-col,
    .t-store__relevants-grid-cont.t-store__grid-cont_mobile-one-row .t-store__stretch-col {
        margin-bottom: 0 !important;
        min-width: 68%;
    }
}

/* Скрываем подсказку «прокрутите» в горизонтальном слайдере */
@media screen and (max-width: 960px) {
    .t-store__relevants__container .t-store__scroll-icon-wrapper {
        padding: 0 0 10px 0;
        display: none;
    }
}

/* Заголовок «Вам также понравится» — отступы на мобилке + размер подсказки доставки */
@media screen and (max-width: 960px) {
    .t-store__relevants__title { margin: 40px 0 30px; }
    #delivery-hint              { font-size: 13px; }
}


/* ----------------------------------------------------------------
   3. ПОИСК TILDA — отключаем выпадающие подсказки
   ---------------------------------------------------------------- */
.t985__searchvariants { display: none !important; }


/* ----------------------------------------------------------------
   4. ПАДДИНГИ КОЛОНОК НА МОБИЛКЕ — аккордеон T585 и попап поиска
   ---------------------------------------------------------------- */
@media screen and (max-width: 960px) {
    .t585 .t-col_12 {
        padding-left: 12px;
        padding-right: 12px;
    }
    .t-search-widget__popup-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.t585__accordion {
    padding-left: 0px;
    padding-right: 0px;
}


/* ----------------------------------------------------------------
   5. ТЕКСТОВАЯ ОБЁРТКА КАРТОЧКИ — отступы у названия и цены
   ---------------------------------------------------------------- */
.t-store__card__textwrapper { padding-top: 10px; }
.t-store__card__price-wrapper { margin-top: 2px; }


/* ----------------------------------------------------------------
   6. КНОПКА «ДОБАВИТЬ В КОРЗИНУ» T1002
   ---------------------------------------------------------------- */
.t1002__addBtn {
    width: 45px;
    height: 45px;
    padding-top: 2px;
    border: 0px solid #e4e4e4;
}

/* На очень узких экранах (≤561px) фиксированная панель «Купить» получает
   светлый фон вместо прозрачного — чтобы текст под ней не «просвечивал» */
@media screen and (max-width: 561px) {
    .t-popup .t-popup__container .t-store__prod-popup__btn-wrapper-fixed,
    .t-store__product-snippet .t-store__prod-popup__btn-wrapper-fixed {
        background: #f9f9f9;
    }
}


/* ================================================================
   7. ЦВЕТОВЫЕ СВОТЧИ В КАРТОЧКАХ ТОВАРА
   ================================================================
   Эти стили работают в паре с пользовательским JS, который добавляет:
   - .block-color   — контейнер для свотчей
   - .element-color — сам кружок цвета
   - [data-name-color] — заголовок опции «Цвет» с именем выбранного
   - [data-activ-color] — пометка активного варианта
   ================================================================ */

/* Контейнер свотчей в КАТАЛОГЕ */
.block-color {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    /* margin-top: 10px; */
    margin-bottom: 10px;
}

/* Сам кружок цвета: серый бордюр, круглый */
.element-color {
    /* width: 15px;  */ /* размер — см. ниже */
    /* height: 15px; */
    display: inline-flex;
    border: 1px solid #8e8e8e;
    border-radius: 50%;
}

/* В открытой карточке (попап) контейнер свотчей — крупнее, ниже */
.t-store__prod-popup__info .block-color {
    justify-content: left;
    margin-top: 10px;
    margin-bottom: 40px;
    gap: 10px;
}

/* Скрываем стандартные опции «Цвет» Tilda — мы рисуем свои свотчи поверх */
.t-store__prod-popup__info .t-product__option-variants_color { display: none !important; }
.t-store__prod-popup__info .t-store__prod-popup__sku         { display: none; }

/* Базовый размер свотча в каталоге */
.element-color {
    width: 8px;
    height: 8px;
}

/* === Имя выбранного цвета (data-name-color на заголовке опции) === */
[data-name-color] {
    position: relative;
    font-size: 0;        /* прячем исходный текст заголовка */
}
[data-name-color]::after {
    content: attr(data-name-color);    /* выводим название цвета через ::after */
}
[data-name-color]::after {
    position: absolute;
    content: attr(data-name-color);
    top: calc(35px + 1vw);
    left: 0;
    text-transform: initial;
    font-size: 12px;
    /* font-weight: bold; */
}

/* Заголовки опций «Размер» и «Цвет» — без UPPERCASE */
.js-product-edition-option[data-edition-option-id="Размер"],
[data-edition-option-id="Цвет"] {
    text-transform: initial;
}
.t-store__prod-popup__info .js-product-edition-option[data-edition-option-id="Размер"] * {
    font-size: 14px;
}

/* === Активный цвет: рисуем вокруг свотча круг-обводку через ::before === */
[data-activ-color] { position: relative; }
.t-store__prod-popup__info [data-activ-color]::before {
    content: '';
    width: 30px;
    height: 30px;
    border: 1px solid #8e8e8e;
    border-radius: 50%;
    position: absolute;
    left: -4px;
    top: -4px;
}

/* На широких экранах (≥500px) свотчи и обводка масштабируются через vw */
@media (min-width: 500px) {
    .t-store__prod-popup__info [data-activ-color]::before {
        content: '';
        width: calc(16px + 1vw);
        height: calc(16px + 1vw);
    }
    /* Приподнимаем табы в попапе товара */
    .t-store__prod-popup__info .js-store-tabs.t-store__tabs.t-store__tabs_accordion {
        margin-top: 0px;
    }
}

/* Размер свотчей в попапе товара */
.t-store__prod-popup__info .element-color {
    width: 24px;
    height: 24px;
}
@media (min-width: 500px) {
    .t-store__prod-popup__info .element-color {
        width: calc(10px + 1vw);
        height: calc(10px + 1vw);
    }
    /* Кнопка «Купить» растягивается на всю ширину фиксированной панели */
    .wbtn.t-store__card__btn { flex: 1; }
}


/* ----------------------------------------------------------------
   8. ОПЦИЯ «РАЗМЕР» — убираем рамки, оставляем подчёркивание
   ---------------------------------------------------------------- */
.js-product .t-product__option-variants_buttons .t-product__option-item_simple {
    border: initial;
}
.js-product .t-product__option-variants_buttons .t-product__option-item_simple.t-product__option-item_active {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .5);
}
.js-product .t-product__option-variants_buttons .t-product__option-item_simple:hover {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .5);
}


/* ----------------------------------------------------------------
   9. ЗАГОЛОВОК ТОВАРА В ПОПАПЕ — кастомный шрифт Viaoda Libre
   ---------------------------------------------------------------- */
.t-store__prod-popup__title-wrapper > h1 {
    font-family: 'Viaoda Libre', Arial, sans-serif !important;
    font-size: 26px;
}


/* ----------------------------------------------------------------
   10. ТАБЫ ВНУТРИ ПОПАПА (Описание / Характеристики / Доставка)
   ---------------------------------------------------------------- */
@media screen and (max-width: 980px) {
    .t-store__prod-popup__info .js-store-tabs.t-store__tabs.t-store__tabs_accordion {
        padding: initial;
    }
}
@media screen and (min-width: 981px) {
    .t-container_fluid .t-col_12 {
        max-width: calc(100% - 40px);
        margin-left: 0;
    }
}

/* Тонкие серые линии-разделители между табами-аккордеонами */
#allrecords .t-store__prod-popup__info .t-store .t-store__tabs_accordion .t-store__tabs__item-button:not(.t-store__tabs__item-button_active),
#allrecords div.t-store .t-store__tabs.t-store__tabs_accordion .t-store__tabs__item-button {
    /* border-bottom: 1px solid #D8D7D7 !important; */
    border-top: 1px solid #D8D7D7 !important;
}
#allrecords .t-store .t-store__tabs_accordion .t-store__tabs__item-button:not(.t-store__tabs__item-button_active) {
    border-bottom: 1px solid #D8D7D7 !important;
}
#allrecords .t-store .t-store__tabs_accordion .t-store__tabs__item-button {
    padding: 10px;
    padding-left: 0px;
}


/* ----------------------------------------------------------------
   11. «ВАМ ПОНРАВИТСЯ» — сетка 4 колонки, узкий разделитель
   ---------------------------------------------------------------- */
.t-store__relevants__container .t-container {
    max-width: calc(100% - 40px);
}
.t-store__relevants__title {
    font-family: 'Viaoda Libre', Arial, sans-serif !important;
    font-size: 18px !important;
}
.t-store__relevants__container .t-container > .t-col { margin: 0; }
.t-store__relevants__container .t-clear.t-store__grid-separator { display: none; }

.t-store__relevants-grid-cont {
    /* display: grid !important; */
    /* grid-template-columns: repeat(4, 1fr); */
    gap: 10px;
    /* row-gap: 30px; */
}

@media screen and (min-width: 500px) {
    .t-store__card-list {
        grid-template-columns: repeat(4, 1fr);  /* 4 карточки в ряд */
        row-gap: 30px;
    }
    .t-store__relevants-grid-cont .t-store__card-list { gap: 10px; }
}

.t-store__relevants__container .t-store__card {
    margin: 0;
    flex: 1 20%;
    max-width: initial !important;
}


/* ----------------------------------------------------------------
   12. ЗАЛИВКА КНОПОК-РАЗМЕРОВ — прозрачная (а не серая)
   ---------------------------------------------------------------- */
.js-product .t-product__option-variants_buttons .t-product__option-item_simple {
    background-color: initial;
}


/* ----------------------------------------------------------------
   13. КОРЗИНА T706 — поля на мобилке
   ---------------------------------------------------------------- */
@media (max-width: 500px) {
    .t706__cartpage-content.t-container { /* max-width: calc(100% - 40px); */ }
    .t706__cartpage-open-form-wrap        { /* padding: 0px !important;     */ }
}


/* ----------------------------------------------------------------
   14. ФИЛЬТР МАГАЗИНА — поиск/сортировка
   ---------------------------------------------------------------- */
/* По умолчанию выводим как table-cell (для мобилки) */
div.t-store__filter__search-and-sort { display: table-cell; }

/* На широких экранах добавляем боковые отступы каталогу
   и скрываем встроенный «поиск + сортировка» */
@media screen and (min-width: 1190px) {
    .t-store__grid-cont_col-width_stretch.t-container_100[data-col-gap="10"] {
        padding: 0 22px 0 22px;
    }
    div.t-store__filter__search-and-sort { display: none; }
}


/* ----------------------------------------------------------------
   15. ФИКСИРОВАННАЯ ПАНЕЛЬ «КУПИТЬ» — растягиваем кнопку на десктопе
   ---------------------------------------------------------------- */
@media screen and (min-width: 680px) {
    .t-store__prod-popup__btn-wrapper.t-store__prod-popup__btn-wrapper-fixed {
        display: flex;
        align-items: center;
    }
    .t-store__prod-popup__btn-wrapper.t-store__prod-popup__btn-wrapper-fixed .t-btn {
        flex: 1;
    }
}


/* ----------------------------------------------------------------
   16. МЕЛКИЕ ПРАВКИ ДЛЯ МОБИЛКИ ≤960px
   ---------------------------------------------------------------- */
@media screen and (max-width: 960px) {
    .t-store__relevants-grid-cont.t-store__grid-cont_mobile-one-row .t-col {
        margin-right: initial;
        margin-left:  initial;
    }
    .t-store__filter { margin-bottom: 0 !important; }
    .t-store__prod-popup__info .t-store__tabs__content { font-size: 12px; }
    .t-store__tabs__item h2 { font-size: 14px; }
    .t-store__prod-popup__title-wrapper { margin-bottom: 5px; }
}


/* ----------------------------------------------------------------
   17. БЛОК «ПОКУПАТЕЛЯМ» (#rec784926862) — растягиваем кнопки до 1200px
   ---------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    #rec784926862 .t-container { max-width: 100%; }
    #rec784926862 .t-width_6   { max-width: 100%; }
}


/* ----------------------------------------------------------------
   18. ВЫПАДАЮЩИЙ СПИСОК T397 — цвета стрелки и обводки
   ---------------------------------------------------------------- */
.t397__wrapper_mobile::after {
    border-color: #9d9d9d transparent transparent transparent !important;
}
.t397__select {
    border: 1px solid #9d9d9d !important;
    color: #666 !important;
    font-weight: normal;
}


/* ----------------------------------------------------------------
   19. МЕНЮ T794 — отступ между пунктами
   ---------------------------------------------------------------- */
.t794__list_item { margin-bottom: 5px; }


/* ----------------------------------------------------------------
   20. КОНТЕЙНЕРЫ — общие ширины на разных разрешениях
   ---------------------------------------------------------------- */
@media screen and (min-width: 981px) {
    .t-container_fluid .t-col_12 { max-width: initial; }
}

/* На планшетах сужаем общий контейнер на 26px */
@media (min-width: 500px) and (max-width: 960px) {
    .t-container { max-width: calc(100% - 26px); }
}


/* ----------------------------------------------------------------
   21. АККОРДЕОНЫ — прячем стандартную иконку, рисуем свою стрелку
   ---------------------------------------------------------------- */
.t585 .t-col .t585__icon  { display: none; }
.t-store__tabs__item       { position: relative; }
.t-store__tabs__close svg  { display: none; }

/* Иконка-стрелка для аккордеона T585 (через юникод-символ ⏷) */
.t585 .t585__header::after {
    content: '\23F7';
    position: absolute;
    transform: translateY(50%);
    font-size: 15px;
    right: 0;
    color: #9d9d9d;
}

/* Та же стрелка для табов магазина (Описание / Доставка / ...) */
.t-store__tabs__item::after {
    content: '\23F7';
    position: absolute;
    transform: translateY(50%);
    font-size: 15px;
    right: 0;
    color: #9d9d9d;
    top: 0;
}


/* ----------------------------------------------------------------
   22. БЛОК «ВАМ ПОНРАВИТСЯ» — обнуляем падинги колонок
   ---------------------------------------------------------------- */
.t-store__relevants__container .t-col { padding: 0; }


/* ----------------------------------------------------------------
   23. КОРЗИНА T706 — типографика полей и заголовков
   ---------------------------------------------------------------- */
.t706__cartpage-content .t-name,
.t706__cartpage-content [data-input-lid="1496239431201"] span,
.t706__cartpage-content .t-input-group_pm .t-input-title,
#field-title_1681815262492 {
    font-family: 'Inter', Arial, sans-serif !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    font-size: 16px;
}

/* Малые экраны: панель «Купить» поверх всего + мелкая лейбл-надпись в корзине */
@media screen and (max-width: 561px) {
    .t-popup .t-popup__container .t-store__prod-popup__btn-wrapper-fixed,
    .t-store__product-snippet .t-store__prod-popup__btn-wrapper-fixed {
        z-index: 999;
    }
    .t706__cartpage-content label { font-size: 12px; }
}

/* Планшет 640–980 — правый отступ колонке инфо в попапе товара */
@media (min-width: 640px) and (max-width: 980px) {
    .t-store__prod-popup__info.t-align_left.t-store__prod-popup__col-right.t-col.t-col_5 {
        padding-right: 40px;
    }
}

.t706__cartpage-content .t-text { font-family: 'Inter', Arial, sans-serif; }


/* ----------------------------------------------------------------
   24. КОЛОНКИ ПОПАПА ТОВАРА — точные ширины на десктопе
   ---------------------------------------------------------------- */
@media screen and (min-width: 981px) {
    .t-container_fluid .t-col_5 {
        max-width: calc(5 / 12 * 100% - 50px);
    }
    .t-store .js-store-tabs .t-store__tabs__item {
        max-width: calc(100% - 44px);
    }
}


/* ----------------------------------------------------------------
   25. АДРЕСА И ХОВЕР ТАБОВ — мелочи
   ---------------------------------------------------------------- */
#addresses-wrapper p { font-size: 14px !important; }

/* Прячем стандартную «крестик»-иконку при ховере таба */
.t-store .t-store__tabs_accordion .t-store__tabs__item-button:hover .t-store__tabs__close::after {
    display: none !important;
}


/* ================================================================
   26. СЛАЙДЕР ФОТО ТОВАРА — точки-полоски (вместо круглых булитов)
   ================================================================
   Делаем bullet'ы вытянутыми полосками, ширина которых = равная доля
   контейнера. Активный bullet — белый, остальные — серые #8e8e8e.
   ================================================================ */
.t-slds__bullet_wrapper {
    display: flex;
    gap: 2px;
    padding: 0;
    margin-top: 0;
    top: -7px;
    max-width: 98%;
    margin: 0 auto;
}
.t-slds__bullet {
    flex: auto;
    padding: 0;
}
.t-slds__bullet_body {
    width: 100%;
    height: 3px;
    background-color: #8e8e8e !important;
    border: 1px solid #8e8e8e !important;
}

.t-slds__bullet.t-slds__bullet_active { /* зарезервировано для активного — стили в правилах ниже */ }

.t-slds__bullet_active .t-slds__bullet_body {
    background-color: #fff !important;
    border: 1px solid #fff !important;
}

/* Точечные правки для конкретных bullet'ов */
div.t-slds__bullet:nth-child(3) > div:nth-child(1) {
    border: 1px solid #fff;
}
div.t-slds__bullet:nth-child(2) > div:nth-child(1) {
    /* background-color: #f9f9f9; */
    /* border: 1px solid #d0d0d0; */
}

/* Активный bullet + ховер — белый */
.t-slds__bullet_wrapper .t-slds__bullet_active .t-slds__bullet_body { background-color: #fff !important; }
.t-slds__bullet_wrapper .t-slds__bullet:hover .t-slds__bullet_body  {
    background-color: #fff !important;
    border: 1px solid #fff;
}


/* ----------------------------------------------------------------
   27. ПОСЛЕДНЯЯ ПРАВКА — горизонтальный gap в мобильной одной строке
   ---------------------------------------------------------------- */
@media screen and (max-width: 960px) {
    .t-store__grid-cont_mobile-one-row .t-store__card-list {
        column-gap: 10px;
    }
}