<!--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>