/* ===== ШИРИНА БЛОКА КАТАЛОГА (десктоп + мобилка) ===== */
#rec2642732601 .t-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}
#rec2642732601 .t396 {
    max-width: 100% !important;
    width: 100% !important;
}
@media screen and (max-width: 980px){
    #rec2642732601 .t-container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }
    #rec2642732601 .t396 {
        max-width: 100% !important;
        width: 100% !important;
    }
}
@media screen and (max-width: 640px){
    #rec2642732601 .t-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===== ПЕРЕМЕННЫЕ ИКОНКИ ИЗБРАННОГО ===== */
:root{
    --favIconIdle:   url(https://static.tildacdn.com/tild3365-3964-4630-a162-373633333465/not_hover.svg);
    --favIconHover:  url(https://static.tildacdn.com/tild3633-3261-4666-b035-376566333964/touch.svg);
    --favIconActive: url(https://static.tildacdn.com/tild3734-3638-4437-b062-343138343166/hover.svg);
    --favIconSize: 32px;
    --favIconRadius: 0px;
    --favIconTransition: all .3s ease-in-out;
}
.t-catalog__card{ position: relative !important; }

/* ===== ИКОНКА В КАТАЛОГЕ (сетка + "Ещё товары" + кнопка рядом с "В корзину" на странице товара) ===== */
body a.t1002__addBtn:not(.t-popup .t1002__addBtn),
body a.t1002__addBtn:not(.t-popup .t1002__addBtn):hover,
body a.t1002__addBtn.t1002__addBtn_active:not(.t-popup .t1002__addBtn){
    width: var(--favIconSize) !important;
    height: var(--favIconSize) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: rgba(0,0,0,0) !important;
    box-shadow: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    display: inline-block !important;
    transition: var(--favIconTransition);
}
.t1002__addBtn:not(.t-popup .t1002__addBtn) svg{ display:none; }
.t1002__addBtn:not(.t-popup .t1002__addBtn)::before{ display:none !important; }
a.t1002__addBtn:not(.t-popup .t1002__addBtn)::after{
    content:"";
    position:absolute;
    top:0; left:0;
    width: var(--favIconSize);
    height: var(--favIconSize);
    background-image: var(--favIconIdle);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center !important;
    border-radius: var(--favIconRadius);
    transition: var(--favIconTransition);
}
a.t1002__addBtn:not(.t1002__addBtn_active):not(.t-popup .t1002__addBtn):hover::after{
    background-image: var(--favIconHover);
}
a.t1002__addBtn.t1002__addBtn_active:not(.t-popup .t1002__addBtn)::after,
a.t1002__addBtn.t1002__addBtn_active:not(.t-popup .t1002__addBtn):hover::after{
    background-image: var(--favIconActive);
}
@media screen and (max-width: 640px){
    :root{
        --favIconSize: 22px;
    }
}

/* ===== ИКОНКА В ПОПАПЕ ТОВАРА (на случай, если "Открывать товары в окне" когда-нибудь включат) ===== */
.t-popup a.t1002__addBtn{
    position: relative;
}
.t-popup a.t1002__addBtn,
.t-popup a.t1002__addBtn:hover,
.t-popup a.t1002__addBtn.t1002__addBtn_active{
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.t-popup .t1002__addBtn svg{ display:none; }
.t-popup .t1002__addBtn::before{ display:none !important; }
.t-popup a.t1002__addBtn::after{
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    background-image: var(--favIconIdle);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    border-radius: var(--favIconRadius);
    transition: var(--favIconTransition);
}
.t-popup a.t1002__addBtn:not(.t1002__addBtn_active):hover::after{
    background-image: var(--favIconHover);
}
.t-popup a.t1002__addBtn.t1002__addBtn_active::after,
.t-popup a.t1002__addBtn.t1002__addBtn_active:hover::after{
    background-image: var(--favIconActive);
}

/* ===== ФИКС "УБЕГАЮЩЕГО" СЕРДЕЧКА НА СТРАНИЦЕ ТОВАРА (не-попап шаблон Tilda) =====
   Товары сейчас открываются отдельной страницей (без .t-popup), поэтому у кнопки
   избранного рядом с "В корзину" не было ни одного спозиционированного родителя —
   сердечко "улетало" в левый верхний угол страницы поверх шапки.
   Этот же блок (.t-catalog__prod-popup__btn-wrapper-fixed) на самом деле содержит
   ВСЕ ТРИ элемента разом: счётчик количества, кнопку "В корзину" и сердечко —
   поэтому justify-content обязательно flex-start (слева), а не flex-end, иначе
   вся группа целиком уезжает к правому краю колонки. */
/* Один фиксированный размер сердечка, ОДИНАКОВЫЙ на любой ширине экрана —
   без разных значений под десктоп/мобилку. display:flex стоит без media-query,
   поэтому раскладка (сердечко ровно рядом с "В корзину", по левому краю)
   работает одинаково везде, а не только там, где Тильда сама включает
   flex своим родным кодом. Ширина/высота ссылки и её ::after всегда совпадают
   друг с другом и никогда не переопределяются повторно — поэтому сердечко
   не может "уехать" в сторону или обрезаться с одного края. */
.t-catalog__prod-popup__btn-wrapper-fixed {
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
}
/* "html body" в начале — не украшение, а обязательная часть селектора.
   Причина: когда сердечко УЖЕ в избранном (класс t1002__addBtn_active —
   именно это было на скриншотах, чёрный квадрат), в самом начале файла
   (строка 46) есть отдельное правило именно под этот класс, и оно
   специфичнее, чем просто ".t-catalog__prod-popup__btn-wrapper-fixed a...".
   Даже с !important оно всё равно побеждало более узкий, но менее
   специфичный селектор — поэтому раньше на уже-избранных товарах размер
   и позиция иконки не менялись, а на НЕ избранных всё было ок (отсюда и
   путаница). "html body" добавляет специфичность, которая гарантированно
   перебивает оба варианта (и активное, и неактивное состояние) без
   разделения на два отдельных правила. */
html body .t-catalog__prod-popup__btn-wrapper-fixed a.t1002__addBtn:not(.t-popup .t1002__addBtn) {
    position: relative !important;
    box-sizing: border-box !important;
    flex: none !important;
    width: 45px !important;
    height: 45px !important;
}
html body .t-catalog__prod-popup__btn-wrapper-fixed a.t1002__addBtn:not(.t-popup .t1002__addBtn)::after {
    top: 0 !important;
    left: 0 !important;
    width: 45px !important;
    height: 45px !important;
    background-size: contain !important;
    background-position: center !important;
}

/* ===== ФИКС ПРОПОРЦИЙ КАРТОЧЕК В "ЕЩЁ ТОВАРЫ" =====
   Виджет похожих товаров (класс js-product-relevant) не наследует модификатор
   3:4 от основного каталога и по умолчанию рисует карточки почти квадратными —
   отсюда обрезанные фото. Возвращаем те же пропорции, что и в каталоге. */
#rec2642732601 .js-product-relevant .t-catalog__card__imgwrapper {
    padding-bottom: 133.33% !important;
}