<!--https://dsgnmax.ru/useful/custom-favourites-->

<style>
:root{
    --bgColorBlock: #232323; /*Цвет фона всего попапа*/
    --colorTitleBlock: #ffffff; /*ЦВет заголовка попапа "Избранное"*/
    --colorIconClose: #ffffff; /*Цвет иконки закрытия*/
    --bgColorCard: #ffffff; /*Цвет фона карточек*/
    --borderRadiusCard: 16px; /*Радиус скругления углов у карточек*/
    --paddingCard: 10px; /*Отступ вокруг карточек, если нужно*/
    --quantityCards1920: repeat(6, 1fr); /* 6 - это количество карточек от 1920*/
    --quantityCardsDesktop: repeat(5, 1fr); /* 5 - это количество карточек на десктопе*/
    --quantityCardsTablet: repeat(3, 1fr); /* 3 - это количество карточек на планшете*/
    --quantityCardsMobile: repeat(1, 1fr); /* 1 - это количество карточек на мобилке*/
    --gapCards1920: 30px; /*Отступ между карточками от 1920*/
    --gapCardsDesktop: 30px; /*Отступ между карточками на десктопе*/
    --gapCardsTablet: 20px; /*Отступ между карточками на планшете*/
    --gapCardsMobile: 10px; /*Отступ между карточками на мобилке*/
    --bgSizeImg: cover; /*Стиль отображения изображение, можно задать ещё значение contain*/
    --borderRadiusImg: 12px; /*Радиус скругления углов у картинки*/
    --heightImg1920: 300px; /*Высота изображения от 1920*/
    --heightImgDesktop: 250px; /*Высота изображения на десктопе*/
    --heightImgTablet: 350px; /*Высота изображения на планшете*/
    --heightImgMobile: 200px; /*Высота изображения на мобилке*/
    --imgClose: url("https://static.tildacdn.com/tild3730-3863-4661-b964-633334353131/close.svg");
    
    
}
/*Ширина и цвет фона*/
.t1002__wishlistwin-content {
    max-width: 100vw;
    background-color: var(--bgColorBlock);
}
/*----------------*/

/*Цвет заголовка*/
.t1002__wishlistwin-heading{
    color: var(--colorTitleBlock) !important;
}
/*----------------*/

/*Цвет иконки закрытия*/
.t1002__wishlistwin-close-icon g{
    fill: var(--colorIconClose);    
}
/*----------------*/

/*Количество карточек*/
.t1002__wishlistwin-products {
    display: grid;
    grid-template-columns: var(--quantityCards1920);
    gap: 20px;
}
/*----------------*/

/*Стиль карточки товара*/
.t1002__product{
    display: flex;
    height: auto;
    margin: 0 !important;
    width: 100%;
    flex-wrap: wrap;
    padding: var(--paddingCard);
    background-color: var(--bgColorCard);
    justify-content: space-between;
    border-radius: var(--borderRadiusCard);
}
/*------------*/

/*Изображение товара*/
.t1002__product-thumb{
    padding: 0px;
    padding-bottom: 20px;
}
.t1002__product-imgdiv {
    background-repeat: no-repeat;
    background-size: var(--bgSizeImg);
    border-radius: var(--borderRadiusImg);
    border: 0px solid rgba(0,0,0,.1);
}
.t1002__product-thumb, .t1002__product-imgdiv{
    width: 100%;
    height: var(--heightImg1920);
}
/*------------*/

/*Убираем отступы у названия товара*/
.t1002__product-title{
    padding: 0px 10px 20px 10px;
    margin-right: 0 !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.t1002__product-link{
    width: 100%;
}
.t1002__product-amount{
    margin-left: inherit;
}
/*----------*/

/*Иконка удаления*/
.t1002__product-del:before{
    content:"";
    display: block;
    width: 20px;
    height: 20px;
    background-image: var(--imgClose);
    background-size: cover;
    background-repeat: no-repeat;
}
.t1002__product-del img{
    content:"";
    display: none;
}
.t1002__product-del {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0 !important;
    opacity: 1;
    margin: 0 !important;
    width: 20px;
    height: 20px;
    transition: all 0.2s ease-in;
}
.t1002__product-del:hover {
    opacity: 0.7;
    transform: scale(0.8);
}
.t1002__product {
    position: relative;
}
/*----------------*/

.t1002__wishlistwin-top {
    border-bottom: 0px solid rgba(255,255,255,.2);
}

@media screen and (max-width:1919px){
    /*Количество карточек*/
.t1002__wishlistwin-products {
    display: grid;
    grid-template-columns: var(--quantityCardsDesktop);
    gap: 20px;
}
.t1002__product-thumb, .t1002__product-imgdiv{
    width: 100%;
    height: var(--heightImgDesktop);
}
}

@media screen and (max-width:1200px){
    /*Количество карточек*/
.t1002__wishlistwin-products {
    display: grid;
    grid-template-columns: var(--quantityCardsTablet);
    gap: 20px;
}
.t1002__product-thumb, .t1002__product-imgdiv{
    width: 100%;
    height: var(--heightImgTablet);
}
}
@media screen and (max-width:960px){
    /*Количество карточек*/
.t1002__wishlistwin-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.t1002__product-thumb, .t1002__product-imgdiv{
    width: 100%;
    height: 200px;
}
}

@media screen and (max-width:480px){
    /*Количество карточек*/
.t1002__wishlistwin-products {
    display: grid;
    grid-template-columns: var(--quantityCardsMobile);
    gap: 20px;
}
.t1002__product-thumb, .t1002__product-imgdiv{
    width: 100%;
    height: var(--heightImgMobile);
}
}
</style>