/* ANNEXX */ 
/* ANX014 внешний вид тела страницы */ 
.t-records { 
 background-color: #ffffff; 
} 
body.t-body { 
 background-color: #242424 !important; 
 background-image: url(https://static.tildacdn.com/tild6137-3533-4537-a436-333565343630/___.jpg); 
 background-repeat: repeat; 
 background-attachment: fixed; 
} 
 
@supports not (-webkit-touch-callout: none) { 
 body.t-body { 
 background-position: center; 
 } 
} 

/*===================================================================*/

/*Скроллбар для всего сайта*/
/* WebKit — Chrome, Safari, Edge, Яндекс.Браузер */
::-webkit-scrollbar {
  width: 10px;              /* толщина вертикального */
}

::-webkit-scrollbar-track {
  background: #F1F1F1;      /* фон под ползунком */
}

::-webkit-scrollbar-thumb {
  background: #D8D8D8;      /* цвет ползунка */
  border-radius: 20px;      /* скругление, убери если не нужно */
}

::-webkit-scrollbar-thumb:hover {
  background: #727272;      /* цвет ползунка при наведении */
}

/* Firefox */
html {
  scrollbar-width: thin;              /* auto | thin | none — точную ширину задать нельзя */
  scrollbar-color: #727272 #F1F1F1;   /* ползунок  трек */
}

/*===================================================================*/

/*Ховеры у карточек каталога в меню*/
@media screen and (min-width: 1200px) {
    .hover-catalog .tn-molecule {
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    }
    .hover-catalog:hover .tn-molecule {
        background-color: #e6e6e6 !important;
    }
}

/*===================================================================*/

/*Доработки поиска в меню*/
.t985__input {
    font-family: Roboto;
    letter-spacing: -0.8px;
}

/*Кнопка смотреть еще*/
.t-search-widget__loadmore-btn {
    font-family: Roboto;
    padding: 10px 20px;
    border-radius: 8px !important;
}

/*Вид подсказки сколько товаров найдено*/
.t-search-widget__query-result {
    background-color: #f1f1f1;
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 500;
    color: #242424;
    padding: 10px 15px;
    border-radius: 10px;
    width: fit-content;
    margin-bottom: 10px !important;
}

/*Секция с товарами*/
/*Вид общего контейнера*/
.t-search-widget__resultwrapper {
    background-color: #fafafa;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 15px;
    border: 1px solid #f1f1f1;
}
.t-search-widget__productwrapper {
    gap: 10px;
    margin-bottom: 0px !important;
}
.t-search-widget__result_product {
    width: 100%;
    margin-bottom: 0px !important;
}
.t-search-widget__result_product-link {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 10px;
    gap: 10px;
    width: 100%;
}
.t-search-widget__result_product-text {
    grid-column: 2 / 4;
}
.t-search-widget__thubmnail {
    margin-right: 0px !important;
}
.t-search-widget__result_product-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px;
    border: 1px solid #e6e6e6 !important;
}
.t-search-widget__result_product-title {
    font-weight: 300;
    color: #242424;
}
.t-search-widget__result_product-desc {
    font-family: 'Roboto';
    opacity: 1;
    line-height: 1.1;
    color: #727272;
    font-weight: 400;
    margin-top: 6px;
    margin-bottom: 20px;
}
.t-search-widget__result_product-price {
    font-family: 'Roboto';
    color: #727272;
    font-weight: 500 !important;
}

/*===================================================================*/

/* ===========================================
   ИЗБРАННОЕ TILDA (ST110) — СТИЛИЗАЦИЯ КАРТОЧЕК
   =========================================== */

/* 1. Общий контейнер карточки */
.t1002__product::before,
.t1002__product:before,
.t1002__product::after,
.t1002__product:after,
.t1002__product-title__option:last-child {
  display: none !important;
}

.t1002__product {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 1440px;
  height: fit-content !important;
  padding: 10px !important;
  margin: 0 0 6px 0 !important;
  background-color: #fafafa !important;
  border-radius: 10px !important;
  align-items: center; /* Центрирование по вертикали */
}

.t1002__product > * {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

/* Убираем стандартные разделители */
.t1002__product .t-clear,
.t1002__product .t-store__grid-separator {
  display: none !important;
}

/*Стили заголовка*/
.t1002__wishlistwin-heading {
    color: #242424;
    font-weight: 300;
}

/* 2. Grid-раскладка элементов */

/* Фото (Миниатюра) */
.t1002__product > .t1002__product-thumb:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  width: 100% !important;
  border-radius: 6px !important;
  height: 100%;
}
.t1002__product-imgdiv {
    width: 100%;
    height: 100%;
    border: none;
}

/* Название и характеристики */
.t1002__product > .t1002__product-title:nth-child(2) {
  grid-column: 2 / 5;
  grid-row: 1 / 2;
  align-self: end;
}

/* Цена */
.t1002__product > .t1002__product-amount:nth-child(3) {
  grid-column: 2 / 5;
  grid-row: 2 / 3;
  align-self: start;
}

/* Кнопка удаления */
.t1002__product > .t1002__product-del {
  grid-column: 5 / 6;
  grid-row: 1 / 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: fit-content !important;
  justify-self: end;
  align-self: start;
}

/* 3. Типографика и детали */

/* Стили заголовка */
.t1002__product-title a {
  font-weight: 300;
  color: #242424 !important;
  font-size: 16px;
  text-decoration: none;
}

/* Характеристики (Цвет, размер, артикул) */
.t1002__product-title__option {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #727272;
  margin-top: 2px !important;
  font-family: 'Roboto', sans-serif;
}

/* Цена */
.t1002__product-amount {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: #727272;
  font-size: 16px;
}

/* Валюта */
.t1002__product-amount .t1002__product-amount-currency {
  font-weight: 300;
  margin-left: 2px;
}

/* 4. Адаптив */

@media (max-width: 640px) {
  .t1002__product {
    grid-template-columns: 1.2fr repeat(4, 1fr);
    gap: 8px;
  }
  
  .t1002__product-title a {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .t1002__product {
    max-width: 100%;
    margin: 0 auto 6px auto !important;
  }
}

/*===================================================================*/

/* ===========================================
   Стилизация товаров и формы корзины
   =========================================== */

/* -------------------------------------------
   1. Общие стили карточки товара
      (попап + страница корзины)
   ------------------------------------------- */
.t706__product::before,
.t706__product:before,
.t706__product::after,
.t706__product:after {
  display: none !important;
}

.t706__product {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 1440px;
  height: fit-content !important;
  padding: 10px !important;
  margin: 0 0 6px 0 !important;
  background-color: #fafafa !important;
  border-radius: 10px !important;
}

.t706__product > * {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
}

.t706__product .t-clear,
.t706__product .t-store__grid-separator {
  display: none !important;
}

.t706__product .t-store__card-list,
.t706__product.t-store__card-list {
  display: contents !important;
}

/* -------------------------------------------
   2. Grid-раскладка элементов карточки
   ------------------------------------------- */

/* Миниатюра — левая колонка, 2 строки */
.t706__product > .t706__product-thumb:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  width: 100% !important;
  border-radius: 6px !important;
}

/* Название — строка 1, колонки 2–4 */
.t706__product > .t706__product-title:nth-child(2) {
  grid-column: 2 / 5;
  grid-row: 1 / 2;
}

/* +/− — строка 2, правый край */
.t706__product > .t706__product-plusminus:nth-child(3) {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
  box-sizing: border-box !important;
  padding: 0 !important;
  width: fit-content !important;
  justify-self: end;
}

/* Сумма — строка 2, колонки 2–4 */
.t706__product > .t706__product-amount:nth-child(4) {
  grid-column: 2 / 5;
  grid-row: 2 / 3;
}

/* Удаление — строка 1, правый край */
.t706__product > .t706__product-del-wrapper:nth-child(5) {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
  margin: 0 !important;
  width: fit-content !important;
  justify-self: end;
}

/* Фото в карточке */
.t706__product-imgdiv {
  width: 100%;
  height: 100%;
}


/* -------------------------------------------
   3. Переопределения для страницы корзины
      (только отличия от попапа)
   ------------------------------------------- */
.t706__cartpage-products > .t706__product {
  background-color: #f1f1f1 !important;
}

.t706__cartpage-products > .t706__product > .t706__product-thumb:nth-child(1) {
  height: 110px !important;
}


/* -------------------------------------------
   4. Страница оформления заказа — layout
   ------------------------------------------- */
.t706__cartpage-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.t706__cartpage-content::before {
  display: none;
}

.t706__cartpage-form,
.t706__cartpage-info {
  background-color: #fafafa;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 15px;
  margin: 0;
  max-width: 100%;
  border: 1px solid #f1f1f1;
}

.t706__cartpage-totals {
  margin-top: 20px;
  border-radius: 10px;
  border: 1px solid #f1f1f1;
  box-sizing: border-box;
}


/* -------------------------------------------
   5. Форма заказа — поля, списки, чекбоксы
   ------------------------------------------- */

/* Отступы у первых двух полей */
.t-form__inputsbox .t-input-group:nth-child(2),
.t-form__inputsbox .t-input-group:nth-child(3) {
  margin-bottom: 6px;
}

/* Шрифт в полях ввода */
.t706 .t-form input.t-input,
.t-input-group .t-input-phonemask__select-code {
  font-family: 'Roboto';
}

/* Выпадающие списки */
.t706 .searchbox-list:not(:empty) {
  border-radius: 10px;
  box-shadow: 0 4px 20px 0 #8080802e;
  margin-top: 4px;
  scrollbar-width: none;
}

.t706 .searchbox-list:not(:empty)::-webkit-scrollbar {
  display: none;
}

/* Чекбоксы */
.t706 .t-input-group_cb .t-checkbox__control span {
  font-size: 14px;
}

.t706 .t-input-group_cb .t-checkbox__indicator {
  border: 1px solid #b1b1b1 !important;
  border-radius: 4px;
}

.t706 .t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator {
  border-color: #242424 !important;
  background-color: #242424;
}

.t706 .t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator:after {
  border-color: #fafafa !important;
  left: 7px;
}

/* Долями */
.digi-dolyame-scheme-plus__tabs,
.digi-dolyame-modal__scheme {
  background-color: #f1f1f1 !important;
}

.digi-dolyame-scheme-plus {
  gap: 6px !important;
}

/* Сообщение об ошибке */
.js-errorbox-all.t-form__errorbox-wrapper {
  border-radius: 10px;
  background: #AB1C1C;
}


/* -------------------------------------------
   6. Типографика и ручные настройки
   ------------------------------------------- */
.t706__product-title a {
  font-weight: 300;
}

.t706__product-title__option:last-child {
  display: none;
}

.t706__cartwin-prodamount-price {
  font-weight: 500;
  color: #727272;
  font-family: 'Roboto';
}

.t706__cartwin-prodamount-currency {
  font-family: 'Roboto';
  color: #242424;
  font-weight: 300;
}

.t706__sidebar-totalamount-label,
.t706__cartwin-totalamount-info_label,
.t706__product-title__option div,
.t706__cartwin-totalamount-label {
  font-family: 'Roboto';
  color: #242424;
  font-weight: 500;
}

.t706__sidebar-heading,
.t-radio__wrapper-delivery .t-name {
  color: #242424;
  font-weight: 300;
}

.t706__sidebar-top {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}


/* -------------------------------------------
   7. Адаптив
   ------------------------------------------- */

/* Планшет ≤ 1000px */
@media (max-width: 1000px) {
  .t706__product {
    max-width: calc(100% - 40px);
  }

  .t706__cartpage-products > .t706__product {
    max-width: 100%;
  }

  .t706__cartpage-totals {
    border-top: 1px solid #f1f1f1 !important;
    padding: 20px !important;
    border-radius: 10px !important;
  }
}

/* Планшет/мобилка ≤ 960px — одна колонка на странице заказа */
@media (max-width: 960px) {
  .t706__cartpage-content {
    grid-template-columns: 1fr;
  }
}

/* Малый планшет ≤ 768px */
@media (max-width: 768px) {
  .t706__product > .t706__product-plusminus:nth-child(3) {
    padding: initial !important;
    box-sizing: initial !important;
    margin: initial !important;
    width: initial !important;
    max-width: initial !important;
    height: initial !important;
    max-height: initial !important;
    border-radius: initial !important;
    position: initial !important;
    top: initial !important;
    left: initial !important;
    right: initial !important;
    bottom: initial !important;
    align-self: initial;
    justify-self: initial;
    overflow: initial !important;
  }

  .t706__product-del {
    position: relative;
  }
}

/* Мобилка ≤ 480px */
@media (max-width: 480px) {
  .t706__product {
    max-width: calc(100% - 20px);
    gap: 6px;
  }

  .t706__cartpage-products > .t706__product {
    margin: 0 0 4px 0 !important;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 10px;
  }
}

/*===================================================================*/

/*Стилизация отметки международной доставки в корзине*/

.t706__cartpage-form-wrapper .t-input-group:nth-child(5) {
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 10px;
}

.t706__cartpage-form-wrapper .t-input-group:nth-child(5) .t-text span {
    color: #242424 !important;
    font-family: 'Roboto' !important;
    font-size: 18px;
}

.t706__cartpage-form-wrapper .t-input-group:nth-child(5) .t-text a {
    background-color: #fafafa;
    margin-top: 20px !important;
    display: flex;
    width: fit-content;
    text-align: center;
    padding: 12px 20px;
    font-family: 'Roboto' !important;
    color: #242424 !important;
    transition: all 0.2s ease-in;
    font-weight: 500;
    border-radius: 8px;
}

.t706__cartpage-form-wrapper .t-input-group:nth-child(5) .t-text a:hover {
    background-color: #242424;
    color: #fafafa !important;
}

/*Стиллизация баннера о задержке изготовления*/
/*.t706__cartpage-form-wrapper .t-input-group:nth-child(6) {*/
/*    background-color: #8E2D2D;*/
/*    padding: 20px 40px;*/
/*}*/
/*.t706__cartpage-form-wrapper .t-input-group:nth-child(6) .t-text strong {*/
/*    color: #F1F1F1 !important;*/
/*    font-family: 'Russo One' !important;*/
/*    font-size: 16px;*/
/*    font-weight: 500 !important;*/
/*}*/

/*===================================================================*/

/*Кастомизация кнопки активации промокода в корзине*/

.t-inputpromocode__wrapper {
    width: calc(100% + 20px) !important;
    position: relative;
    left: -10px;
    border-collapse: separate;
    border-spacing: 10px 0px;
}
.t-inputpromocode__btn.t-btn {
    color: #fafafa !important;
    background-color: #242424 !important;
    border: 0px solid ;
    width: 30%;
    font-family: 'Roboto';
    font-weight: 500;
}

/*===================================================================*/

/* Скрываем скроллбар для сайдбара в блоке каталога t951 */
.t951__sidebar-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Для Chrome, Safari и новых версий Edge (Webkit) */
.t951__sidebar-wrapper::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}

/*===================================================================*/

/*Стилизация окна куки*/
.t886__wrapper {
    border: 1px solid #f1f1f1;
}

.t886__btn {
    padding: 8px 20px;
}

@media screen and (max-width: 1200px) {
.t886__wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
}

/*===================================================================*/

/*Скругляем углы у попапов с таблицами размеров*/
.uc-size-popup .t-slds__wrapper {
    border-radius: 15px;
    overflow: hidden;
}

/*===================================================================*/

/*
    ST340: карточка товара

    Где стоит: Настройки сайта → Ещё → Пользовательские CSS стили, отдельной секцией.
    Действует везде, где есть каталог ST340: сетка, попап товара, страница товара,
    «Вам также понравится».

    Что делает:
      · прячет артикул, характеристики, выбор цвета и подписи опций;
      · оформляет кнопки размеров: вид, выбранный размер, ховер только с мышью;
      · в карточках ставит размеры в одну строку с прокруткой (≤960px);
      · отступы внутри карточки, цена, кнопка «в корзину» во всю ширину —
        в сетке и в «Вам также понравится»;
      · оформляет вкладки под описанием товара (под описание их ставит
        скрипт в секции head «ST340: вкладки»);
      · крупные заголовки: название товара и «Вам также понравится»;
      · ховер карточек (только с мышью): фон, картинка ужимается, выезжают
        размеры — в сетке и в «Вам также понравится»;
      · «Вам также понравится» — галерея на всю ширину; на странице товара
        карточкам рекомендаций тот же вид, что в сетке;
      · цвета виджета «Долями» в карточке товара;
      · цена SALE: новая цена и зачёркнутая старая (их ставит скрипт в секции
        head «Цена SALE»), в корзине — без значка «?» у скидки.

    Не здесь: раскладка сетки — блок T123 на странице каталога.

    Зависит от настроек блока:
      · «цвет фона карточки при наведении» — пустой, иначе спорит с ховером;
      · пропорция картинки 3:4. Сменили — поправить --jgImgRatio;
      · фон, бордер, радиус и паддинг карточки — повторены ниже для страницы
        товара (там блок их не печатает). Сменили в блоке — поправить и здесь.

    Все селекторы начинаются с .t-catalog — этот класс есть только у нового
    каталога, старый блок на /all правила не видит. Исключение — значок
    скидки в корзине: корзина общая для всего сайта.
*/

:root{
    /* Кнопки размеров */
    --jgSizeBg:          #fafafa;  /* бордер в покое — в цвет подложки карточки,
                                      чтобы кнопка не «прыгала» на ховере */
    --jgSizeBgActive:    #e6e6e6;
    --jgSizeBorderHover: #e6e6e6;
    --jgSizeBorderActive:#d8d8d8;
    --jgSizeRadius:      8px;
    --jgSizeGap:         2px;

    /* Кнопка «в корзину» на ≤480. На десктопе высоту не трогаем — нативные 45px */
    --jgCardBtnHeightMob: 36px;

    /* Ховер карточки */
    --jgCardBgHover: #e6e6e6;
    --jgHoverDur:    0.3s;                       /* плавность со старого сайта */
    --jgHoverEase:   cubic-bezier(0.4, 0, 0.2, 1);
    /* Картинка ужимается ровно на высоту, на которую выезжают размеры, —
       карточка при наведении не меняет высоту. */
    --jgImgRatio:    133%;   /* 3:4 из настроек блока, как нативный …imgwrapper_3-4 */
    --jgSizesOpen:   60px;   /* кнопки ~33px + ссылка «Таблица размеров» с отступом */

    /* Карточка на странице товара — значения из настроек блока (сетка) */
    --jgCardBg:        #f1f1f1;
    --jgCardBorder:    #e6e6e6;
    --jgCardRadius:    15px;   /* 10px на ≤480 */
    --jgCardPadding:   15px;   /* 10px на ≤480 */

    /* Галерея «Вам также понравится» */
    --jgRelGap:      10px;   /* между карточками, как в сетке */
    --jgRelArrowOut: 15px;   /* насколько стрелка выходит за край галереи */
}


/* ════════════════════════════════════════════════════════════════════════
   ЧТО СКРЫВАЕМ — в карточке сетки, в попапе и на странице товара
   ════════════════════════════════════════════════════════════════════════ */

/* Артикул: в попапе и на странице товара — строка «Артикул: …», в карточках
   сетки и «Вам также понравится» — своя строка карточки. Tilda переключает
   их видимость инлайном только значением "" или "none", то есть наш
   display:none ей не мешает. Нативных правил с display у них нет */
.t-catalog .t-catalog__prod-popup__sku,
.t-catalog .t-catalog__card__sku{
    display: none;
}

/* Характеристики товара. Tilda пишет им инлайн только margin-top и
   display:none, показать поверх нас не пытается */
.t-catalog .js-catalog-prod-all-charcs{
    display: none;
}

/* Подписи опций («Размер», «Цвет»). Три класса (0,3,0): в библиотеке есть
   .t-catalog .t-align_center .t-product__option-title{display:table-cell}
   (0,3,0) — сработало бы у карточек с выравниванием по центру. Библиотека
   подключена раньше /custom.css, ничью выигрываем мы */
.t-catalog .js-product-edition-option .js-product-edition-option-name{
    display: none;
}

/* Опция «Цвет» целиком.
   ⚠️ В движке 1.2 атрибута data-option-type нет: опции рисует новый
   рендерер, он ставит только data-edition-option-id. Старый хук
   [data-option-type="color"] молча не сработал бы. Живая зацепка — класс
   варианта: контейнер получает t-product__option-variants_<тип>, для цвета
   это _color (так же _image и _simple). (0,3,0) против нативного
   display:flex у .t-product__option (0,1,0) */
.t-catalog .js-product-edition-option:has(.t-product__option-variants_color){
    display: none;
}


/* ════════════════════════════════════════════════════════════════════════
   КНОПКИ РАЗМЕРОВ — одинаковые в сетке, попапе и на странице товара
   Разметку рисует общий рендерер опций: контейнер
   .t-product__option-variants_custom.t-product__option-variants_buttons
   .t-product__option-variants_simple, кнопка — .t-product__option-item_simple
   (+ _active, + _disabled). Нативно: padding 7px, min 30×30,
   margin-right/-bottom 7px, фон #fff, бордер 1px #ddd.

   С чем сравниваем — самые сильные нативные правила кнопки:
     библиотека:  .js-product .t-product__option-variants_buttons
                  .t-product__option-item_simple:hover            (0,4,0)
     рендерер:    .t-product__option-variants_buttons
                  .t-product__option-item_simple:hover            (0,3,0)
   Рендерер стоит в head ПОСЛЕ нас, поэтому везде ниже не меньше (0,4,0).
   ════════════════════════════════════════════════════════════════════════ */

/* Расстояние между кнопками — гэпом контейнера (он нативно flex-wrap),
   нативные марджины кнопок снимаем ниже, иначе складываются оба */
.t-catalog .t-product__option-variants{
    gap: var(--jgSizeGap);
}

/* Кнопка в покое. (0,4,0): бьёт нативные марджины (0,2,0) и бордер
   рендерера (0,2,0), а заодно оба нативных ховера — рендерера (0,3,0)
   и библиотеки (0,4,0, она раньше нас) */
.t-catalog .js-product .t-product__option-variants_buttons .t-product__option-item_simple{
    margin: 0;
    border-radius: var(--jgSizeRadius);
    border: 1px solid var(--jgSizeBg);
    transition: all 0.2s ease-out;
}

/* Активный размер. (0,5,0) против нативной пары …item_simple.…item_active
   (0,3,0 у рендерера, 0,4,0 у библиотеки).
   ⚠️ Горизонтальный паддинг 14px против нативных 7px — так на старом сайте:
   активная кнопка шире соседних. Перенесено как есть */
.t-catalog .js-product .t-product__option-variants_buttons .t-product__option-item_simple.t-product__option-item_active{
    padding: 7px 14px;
    background-color: var(--jgSizeBgActive);
    border-color: var(--jgSizeBorderActive);
    transition: all 0.2s ease-in;
}

/* Ховер — только там, где есть настоящий указатель. Ширина экрана для этого
   плохой признак: у ноутбука 1100px мышь есть, у планшета 1200px её нет.

   :not(…_active) обязателен: без него селектор ховера (0,5,0) — ровно как
   у активной кнопки выше, а стоит ниже и выигрывает. Наведение на ВЫБРАННЫЙ
   размер осветляло бы его обводку. :hover весит как класс */
@media (hover: hover){
    .t-catalog .js-product .t-product__option-variants_buttons .t-product__option-item_simple:not(.t-product__option-item_active):hover{
        border-color: var(--jgSizeBorderHover);
    }
}

/* На тач-экранах ховер «залипает» после тапа. Правило покоя выше уже
   перебивает оба нативных ховера, но только пока библиотека подключена
   раньше /custom.css — это правило держит цвет покоя без опоры на порядок.
   :not(…_active) — чтобы выбранный размер при тапе не терял обводку */
@media (hover: none){
    .t-catalog .js-product .t-product__option-variants_buttons .t-product__option-item_simple:not(.t-product__option-item_active):hover{
        border-color: var(--jgSizeBg);
    }
}

/* ── Размеры в одну строку с прокруткой — только в карточках ─────────────
   Перенос на вторую строку ломает высоту карточек в ряду, поэтому в сетке
   и в «Вам также понравится» (у них та же разметка .t-catalog__card)
   размеры идут в одну строку, лишнее пролистывается вбок.

   В попапе и на странице товара — нет: там одна широкая колонка, соседних
   карточек, чью высоту можно сломать, нет, а спрятанные за край размеры
   в подробной карточке только мешают выбрать. Там кнопки переносятся.

   Граница ≤960 — мобильная граница Tilda; при 480–960 в сетке уже 2–3
   колонки и карточка узкая.

   flex-wrap с !important: нативный wrap приходит из
   .t-product__option-variants_custom, а контейнер вариантов в движке 1.2 —
   это тег form, за его раскладку может взяться и браузерный дефолт */
@media screen and (max-width: 960px){
    .t-catalog .t-catalog__card .t-product__option-variants_buttons{
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* старый Edge / IE */
    }

    .t-catalog .t-catalog__card .t-product__option-item{
        flex-shrink: 0;
    }

    .t-catalog .t-catalog__card .t-product__option-variants_buttons::-webkit-scrollbar{
        display: none;                  /* Chrome, Safari, новый Edge */
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ВКЛАДКИ — в попапе и на странице товара, после переноса под описание
   ════════════════════════════════════════════════════════════════════════
   Под описание вкладки ставит скрипт «ST340: вкладки» в head. Стили здесь,
   а не рядом со скриптом: head сайта вшивается в каждую страницу товара,
   и после роста head на ~8 КБ Tilda начала обрывать страницы товара.

   Оформление написано под вид вкладок «аккордеон» (настройка блока).
   CSS вкладок Tilda (tilda-catalog-tabs-1.1) грузится позже /custom.css,
   его селекторы до (0,3,0) — у наших не меньше (0,4,0). */

/* Колонка вкладок. Tilda рисует вкладки на всю ширину товара с классами
   сетки t-col t-col_12 (боковые поля, свой отступ сверху) — внутри правой
   колонки они лишние */
.t-catalog .t-catalog__prod-popup__info .t-catalog__tabs.t-catalog__tabs_accordion{
    margin: 40px 0 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

/* Пока грузятся вкладки следующего товара, Tilda держит пустой контейнер —
   без этого правила под описанием мелькала бы пустая полоса */
.t-catalog .t-catalog__prod-popup__info .t-catalog__tabs.t-catalog__tabs_accordion:empty{
    display: none;
}

/* Заголовок вкладки. Жирность не задаём: у Tilda свои 500, и на странице
   товара старого блока видны именно они */
.t-catalog .t-catalog__prod-popup__info .t-catalog__tabs_accordion .t-catalog__tabs__item-title{
    font-family: 'Roboto', Arial, sans-serif;
}

/* Линии между вкладками. !important: на странице товара Tilda может
   напечатать цвет линий правилом с #rec… — его классами не перебить */
.t-catalog .t-catalog__prod-popup__info .t-catalog__tabs_accordion .t-catalog__tabs__item-button{
    border-top: 1px solid #e6e6e6 !important;
}
.t-catalog .t-catalog__prod-popup__info .t-catalog__tabs_accordion .t-catalog__tabs__item:last-child{
    border-bottom: 1px solid #e6e6e6;
}

/* Текст вкладки. Цвет с !important: на странице товара Tilda печатает
   цвет текста вкладок правилом #rec… .t-catalog__tabs__content из
   настроек типографики блока */
.t-catalog .t-catalog__prod-popup__info .t-catalog__tabs_accordion .t-catalog__tabs__content{
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
    color: #727272 !important;
}

/* Ссылка внутри вкладки — кнопкой («Перейти» в «Доставке и оплате»).
   Цвет с !important: редактор текста Tilda может записать ссылке цвет
   прямо в разметку, а его перебивает только !important */
.t-catalog .t-catalog__prod-popup__info .t-catalog__tabs_accordion .t-catalog__tabs__content a{
    display: inline-block;
    margin-top: 10px;
    padding: 8px 24px;
    background-color: #e6e6e6;
    color: #242424 !important;
    border-radius: 8px;
    transition: background-color 0.1s ease-in, color 0.1s ease-in;
}
@media (hover: hover){
    .t-catalog .t-catalog__prod-popup__info .t-catalog__tabs_accordion .t-catalog__tabs__content a:hover{
        background-color: #242424;
        color: #f1f1f1 !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ЗАГОЛОВКИ — название товара (попап, страница товара)
   и заголовок «Вам также понравится»
   ════════════════════════════════════════════════════════════════════════
   Блок каталога ставит обоим типографику названия карточки из сетки
   (18px, шрифт текста) правилами #rec… .t-catalog__prod-popup__name и
   #rec… .t-catalog__relevants__title — их классами не перебить, отсюда
   !important. Жирность, цвет и межбуквенный интервал остаются от блока —
   так же было и у старого блока. */
.t-catalog .t-catalog__prod-popup__title-wrapper .js-catalog-prod-name,
.t-catalog .t-catalog__relevants__title{
    font-family: 'Russo One', Arial, sans-serif !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
}
@media screen and (max-width: 899px){
    .t-catalog .t-catalog__prod-popup__title-wrapper .js-catalog-prod-name,
    .t-catalog .t-catalog__relevants__title{
        font-size: 24px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   КАРТОЧКА: отступы, цена, кнопка — сетка и «Вам также понравится»
   ════════════════════════════════════════════════════════════════════════
   Внутри карточки — только .t-catalog__card: попап и страница товара
   карточкой не являются и сохраняют нативные отступы.
   От этих отступов зависит высота выезжающих размеров в ховере
   (--jgSizesOpen): поменяли отступы — проверить ховер. */

/* Блок опций. Нативно .t-catalog__card__prod-controls-wrapper:has(*)
   {padding-top:20px} — это (0,2,0): :has(*) весит как класс. Наш (0,3,0) */
.t-catalog .t-catalog__card__prod-controls-wrapper:has(*){
    padding-top: 0;
}

/* Отступ от текста до опций */
.t-catalog .t-catalog__card__textwrapper{
    padding-bottom: 10px;
}

/* Вертикальные поля вокруг размеров. Нативно .t-product__option{margin:10px 0}
   — его кладёт в head рендерер опций, уже после /custom.css, (0,1,0); и
   библиотечное .t-catalog .t-product__option (0,2,0). Отступ до опций уже
   даёт padding-bottom текста выше. Наш (0,3,0) */
.t-catalog .t-catalog__card .t-product__option{
    margin-top: 0;
    margin-bottom: 0;
}

/* Ссылка «Таблица размеров» в карточке — только отрыв от кнопок. Секция head
   даёт ей margin:10px 0 (0,1,0) и стоит после нас — у нас (0,3,0). В попапе
   и на странице товара её отступы остаются из head */
.t-catalog .t-catalog__card .uc-size-chart-link-popup{
    margin-top: 6px;
    margin-bottom: 0;
}

/* Зазор от опций до кнопки «в корзину».
   ⚠️ Это МИНИМАЛЬНЫЙ зазор: при «выравнивании кнопок по низу» (настройка
   блока) Tilda прижимает кнопку margin-top:auto!important, и в карточках
   ниже соседей зазор задаёт свободное место — правка значения там не видна */
.t-catalog .t-catalog__card__wrap_txt-and-opts.t-catalog__card__has-btns{
    margin-bottom: 20px;
}

/* Цена. Нативно margin-top:12px */
.t-catalog .t-catalog__card__price-wrapper{
    margin-top: 5px;
}

/* Кегль цены по брейкпоинтам. Блок печатает размер на родителе
   (#rec… .t-catalog__card .t-catalog__card__price{font-size:18px}), мы
   задаём его дочерним узлам — наследование до них не доходит */
@media screen and (max-width: 1199px){
    .t-catalog .t-catalog__card .js-product-price,
    .t-catalog .t-catalog__card .t-catalog__card__price-currency{ font-size: 16px; }
}
@media screen and (max-width: 639px){
    .t-catalog .t-catalog__card .js-product-price,
    .t-catalog .t-catalog__card .t-catalog__card__price-currency{ font-size: 14px; }
}

/* Кнопка «в корзину» во всю ширину. Нативно
   .t-align_left .t-catalog__card__btn{margin:0 8px 8px 0} (0,2,0), наш (0,3,0).
   Кнопка — t-btnflex: высоты как свойства у неё нет, вертикальные паддинги
   считаются из --height (нативно 45px, на ≤480 — 50px). Поэтому на мобилке
   меняем --height, а не height */
.t-catalog .t-catalog__card__btns-wrapper .t-catalog__card__btn_second{
    width: 100%;
    margin: 0;
}
@media screen and (max-width: 480px){
    .t-catalog .t-catalog__card__btns-wrapper .t-catalog__card__btn_second{
        --height: var(--jgCardBtnHeightMob);
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ХОВЕР КАРТОЧКИ — сетка и «Вам также понравится» (попап, страница товара)
   ════════════════════════════════════════════════════════════════════════
   У карточек рекомендаций та же разметка, что в сетке (.t-catalog__card,
   простая структура), поэтому один набор правил на все три места.

   Только там, где есть указатель — (hover: hover). Ширина экрана для этого
   плохой признак: у ноутбука 1100px мышь есть, у планшета 1200px её нет. */

/* Нативный transition карточки — opacity и box-shadow, фона в нём нет, и фон
   менялся рывком. transition задаётся целиком, поэтому нативные свойства
   перечислены заново */
.t-catalog .t-catalog__card{
    transition: background-color var(--jgHoverDur) var(--jgHoverEase),
                opacity 0.2s ease-out,
                box-shadow 0.3s ease-in-out;
}

@media (hover: hover){

    /* !important: фон карточки в покое блок печатает правилом
       #rec… .t-catalog__card (1,1,0), и оно действует и во время наведения.
       ID-селектор классами не перебить */
    .t-catalog .t-catalog__card:hover{
        background-color: var(--jgCardBgHover) !important;
    }

    .t-catalog .t-catalog__card .t-catalog__card__imgwrapper{
        transition: padding-bottom var(--jgHoverDur) var(--jgHoverEase);
    }

    /* Размеры в покое: схлопнуты и прозрачны, но остаются в DOM — скрипт
       «Таблицы размеров» ищет этот блок и дописывает в него ссылку.
       Высота точная (height, не max-height): сколько выехало размеров,
       ровно на столько ужимается картинка.
       Только блок с кнопками-размерами (…variants_simple): у товара без
       размеров картинка не ужимается впустую */
    .t-catalog .t-catalog__card .js-product-edition-option:has(.t-product__option-variants_simple){
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: height  var(--jgHoverDur) var(--jgHoverEase),
                    opacity var(--jgHoverDur) var(--jgHoverEase);
    }

    .t-catalog .t-catalog__card:has(.t-product__option-variants_simple):hover .js-product-edition-option:has(.t-product__option-variants_simple){
        height: var(--jgSizesOpen);
        opacity: 1;
    }

    /* (0,5,0) — выше нативной пропорции (0,2,0) и пропорции рекомендаций
       на странице товара ниже (0,4,0) */
    .t-catalog .t-catalog__card:has(.t-product__option-variants_simple):hover .t-catalog__card__imgwrapper{
        padding-bottom: calc(var(--jgImgRatio) - var(--jgSizesOpen));
    }
}


/* ════════════════════════════════════════════════════════════════════════
   «ВАМ ТАКЖЕ ПОНРАВИТСЯ» — галерея на всю ширину (попап и страница товара)
   ════════════════════════════════════════════════════════════════════════
   Рекомендации — слайдер tilda-slds (t_sldsInit): ширину слайда он берёт
   из .t-slds__container (ширина / 4, на ≤960 — / 2, на ≤640 — / 1) и
   пишет её инлайном каждому .t-slds__item. Поэтому ширину задаём
   контейнерам, а карточке — только поля внутри слайда.

   Нативно слайдер зажат в .t-slds__main.t-container (1200 / 960 / 640px),
   а карточка — .t-col.t-col_3 (max-width 260 / 220px) — при любой ширине
   экрана галерея остаётся узкой по центру. */

/* Ширина слайдера — строго по контейнеру. На странице товара контейнер
   рекомендаций — флекс (.t-catalog__valign-buttons.js-catalog-grid-cont),
   и слайдер в нём — флекс-элемент шириной «по содержимому». Содержимое —
   лента всех слайдов, которой скрипт пишет ширину в px. Нативно её
   сдерживал потолок .t-slds__main, который мы снимаем ниже; без явной
   ширины слайдер растянулся бы по ленте */
.t-catalog .t-catalog__relevants__container .t-slds{
    width: 100%;
    min-width: 0;
}

/* Снимаем потолок слайдера. Отрицательные поля на половину зазора: карточки
   встают краями ровно по краям галереи (заголовка и колонок товара) */
.t-catalog .t-catalog__relevants__container .t-slds__main{
    width: auto;
    max-width: none;
    margin-left:  calc(var(--jgRelGap) / -2);
    margin-right: calc(var(--jgRelGap) / -2);
}

/* Карточка во всю ширину слайда, зазор — полями. padding: 0 — на мобилке
   Tilda делает зазор паддингом карточки (.t-col и правила ≤960), а у нашей
   карточки есть фон: паддинг лёг бы полосой внутри неё */
.t-catalog .t-catalog__relevants__container .t-slds__wrapper > .js-product-relevant{
    width: calc(100% - var(--jgRelGap));
    max-width: none;
    margin: 0 calc(var(--jgRelGap) / 2);
    padding: 0;
}

/* Страница товара: рекомендации лежат в своём .t-container (1200 / 960 /
   640px), хотя сам товар над ними — во всю ширину. Снимаем потолок; .t-col
   с нативными полями 20px (10px на <1200) ставит края галереи по краям
   колонок товара. float и width:100% у .t-col вместе с полями вылезали бы
   за контейнер — переводим в обычный блок */
.t-catalog.t-catalog__prod-snippet__container .t-catalog__relevants__container > .t-container{
    max-width: none;
}
.t-catalog.t-catalog__prod-snippet__container .t-catalog__relevants__container > .t-container > .t-col{
    display: block;
    float: none;
    width: auto;
}

/* Стрелки — наполовину на краю галереи, как было на старом сайте.
   Нативно на ≥1040 они вынесены за край (right:200% от узкой обёртки) —
   у галереи во всю ширину они уехали бы за экран.
   (0,3,0) против (0,2,0) у библиотеки каталога */
@media screen and (min-width: 961px){
    .t-catalog .t-catalog__relevants__container .t-slds__arrow-left{
        left: calc(var(--jgRelArrowOut) * -1);
        right: auto;
    }
    .t-catalog .t-catalog__relevants__container .t-slds__arrow-right{
        left: auto;
        right: calc(var(--jgRelArrowOut) * -1);
    }
}
/* На 961–1199 край галереи на странице товара в 10px от края экрана —
   стрелка на 15px ушла бы за экран */
@media screen and (min-width: 961px) and (max-width: 1199px){
    .t-catalog .t-catalog__relevants__container{
        --jgRelArrowOut: 10px;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   «ВАМ ТАКЖЕ ПОНРАВИТСЯ» — карточки
   ════════════════════════════════════════════════════════════════════════ */

/* Отступ над названием. Нативно у рекомендаций +20px сверху, у карточек
   сетки — нет: название стояло бы ниже, чем в сетке. (0,3,0) против (0,2,0) */
.t-catalog .t-catalog__relevants__container .t-catalog__card__textwrapper{
    padding-top: 0;
}

/* ── Страница товара ─────────────────────────────────────────────────────
   В попапе вид карточке даёт блок: фон, бордер, радиус и паддинг он
   печатает правилами #rec… .t-catalog__card на странице каталога, а попап
   лежит внутри этой записи. На странице товара этих правил нет — карточки
   там голые. Повторяем значения из настроек блока только здесь.
   .t-catalog__prod-snippet__container есть только на странице товара */
.t-catalog.t-catalog__prod-snippet__container .js-product-relevant{
    background-color: var(--jgCardBg);
    border: 1px solid var(--jgCardBorder);
    border-radius: var(--jgCardRadius);
    overflow: hidden;
}
.t-catalog.t-catalog__prod-snippet__container .js-product-relevant .t-catalog__card__wrap_txt-and-btns{
    padding: var(--jgCardPadding);
}
@media screen and (max-width: 480px){
    .t-catalog.t-catalog__prod-snippet__container .js-product-relevant{
        --jgCardRadius:  10px;
        --jgCardPadding: 10px;
    }
}

/* Пропорция картинки. На странице товара Tilda рисует рекомендации с
   isFlexCols:false — класс пропорции …imgwrapper_3-4 не ставится, и
   картинка получает библиотечные 110% вместо 3:4, как в сетке и в попапе.
   Ховер ужимает картинку от 3:4 — без этого правила карточка при наведении
   прыгала бы. (0,4,0) против (0,1,0) */
.t-catalog.t-catalog__prod-snippet__container .t-catalog__relevants__container .t-catalog__card__imgwrapper{
    padding-bottom: var(--jgImgRatio);
}

/* Скругление картинки. Страница товара печатает (в body, после нас)
   .t-catalog__relevants__container .t-catalog__card__bgimg{border-radius:10px}
   — нижние углы картинки скруглились бы внутри карточки. Углы карточки
   обрезает её overflow:hidden. (0,4,0) против (0,2,0) */
.t-catalog.t-catalog__prod-snippet__container .t-catalog__relevants__container .t-catalog__card__bgimg{
    border-radius: 0;
}


/* ════════════════════════════════════════════════════════════════════════
   ВИДЖЕТ «ДОЛЯМИ» в карточке товара
   ════════════════════════════════════════════════════════════════════════
   Свой CSS виджет кладёт в head скриптом — после /custom.css, поэтому
   на класс больше, чем у него: .digi-dolyame-product--3 (0,1,0),
   ховер (0,2,0) */
.t-catalog .digi-dolyame-product{
    background-color: #f1f1f1;
}
@media (hover: hover){
    .t-catalog .digi-dolyame-product:hover{
        background-color: #e6e6e6;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ЦЕНА SALE
   ════════════════════════════════════════════════════════════════════════
   Скрипт в секции head «Цена SALE» ставит перед ценой её копию
   (.t-price-sale-clone, цена −15%), а саму цену помечает .old-price-styled.
   Обе — пункты флекс-обёртки цены (нативно column-gap 6px) */
.t-catalog .t-price-sale-clone{
    display: inline-block !important;
    margin-right: 12px !important;
}

/* Старая цена: бледнее и зачёркнута линией-псевдоэлементом */
.t-catalog .old-price-styled{
    position: relative !important;
    display: inline-block !important;
    opacity: 0.4 !important;
    font-weight: 400 !important;
}
.t-catalog .old-price-styled::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 55% !important;               /* чуть ниже середины строки */
    width: 100% !important;
    height: 1px !important;
    background-color: currentColor !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

/* Корзина: скидку SALE считает Tilda и ставит рядом значок «?» с пустой
   подсказкой — прячем. Убрать, когда Tilda это исправит */
.t706__cartwin-discounts__description-wrapper{
    display: none !important;
}