/* Основной стиль для карточки товара */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 0.78125vw; /* 15px/1920 */
    height: auto;
    width: min-content;
    position: relative;
}
.booking-btn-down{
display: none;
}
.product-card.tattoo {
    align-self: stretch; /* ключевое свойство - растягиваем по высоте */
    height: auto; /* важно! */
}

.product-image {
    display: flex;
    position: relative;
    overflow: hidden;
}
.product-card.tattoo .product-image:hover.product-image::before {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), var(--bg-url);
}
.product-image {
    transition: width 0.5s ease, height 0.5s ease; /* Плавный переход для ширины и высоты */
}

.product-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--bg-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    transform: scale(1);
    z-index: 0;
}

/* Зум при наведении */
.product-card:hover .product-image::before {
    transform: scale(1.25);
}
.booking-btn-in_card{
display: none;
}
.product-image:hover .booking-btn-in_card{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: var(--40, 2.08333vw);
border: 0.05208vw solid var(--Accent-Colors-Red, #F00);
background: var(--White-White-Text, #FFF);
display: flex;
padding: var(--8, 0.41667vw) var(--25, 1.30208vw);
justify-content: center;
align-items: center;
gap: 0.52083vw;
color: var(--Accent-Colors-Red, #F00);

/* Desktop/Card Text/Caption Basic */
font-family: "Inter";
font-size: 1.04167vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 1.14583vw */
letter-spacing: -0.02083vw;
text-transform: uppercase;
z-index: 150;
}
.product-image:hover .booking-btn-in_card:hover{
background:  #F00;
color:  #FFF;
}
/* Описание товара */
.product-description-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Название товара и бренд */
.product-title-brand {
    display: flex;
    flex-direction: column;
    gap: 0.26042vw; /* 5px/1920 */
}
.product-name{
    color: #777;
    /* Desktop/Card Text/Caption Basic */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 1.04167vw; /* 20px/1920 */
    line-height: 110%;
    /* or 22px */
    display: flex;
    align-items: center;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    /* Black/Black Basic */
    color: #0A0A0A;
}
.product-card.tattoo .product-name{
color: #FFF;
}
.product-card.tattoo .product-brand .product-price{
color: #FFF;
opacity: 0.4;
}
/* Бренд товара */
.product-brand {
    /* Desktop/Text/Text Small */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 0.9375vw; /* 18px/1920 */
    line-height: 110%;
    /* identical to box height, or 20px */
    display: flex;
    align-items: center;
    letter-spacing: -0.02em;
    
    /* Gray/Gray Dark */
    color: #999999;
}

/* Цена */
.product-price {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    gap: 0.26042vw;
}

.product-price .current-price {
    /* Desktop/Card Text/Caption Basic */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 1.04167vw;
    line-height: 110%;
    /* identical to box height, or 22px */
    display: flex;
    align-items: center;
    text-align: right;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    
    /* Gray/Gray Dark */
    color: #999999;
}

.product-price .old-price {
    text-decoration: line-through;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 1.04167vw; /* 18px/1920 */
    line-height: 110%;
    /* identical to box height, or 20px */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.02em;
    
    /* Gray/Gray Dark */
    color: #999999;

}
.product-card.tattoo .cart-icon-button{
    display: none;
}
/* Иконка корзины */
.cart-icon-button {
    width: 2.5vw; /* 48px/1920 */
    height: 2.5vw;
    margin-top: 1.04167vw; /* 20px/1920 */
    margin-right: 1.04167vw;
    background: transparent url('../images/card-products.svg') center/contain no-repeat;  
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 150;
}
.cart-icon-button.in-cart {
    background: transparent url('../images/card-products-full.svg') center/contain no-repeat; 
}

.volume-switcher {
    display: flex;
    gap: 0.52083vw; /* 10px/1920 */
    margin-bottom: 1.04167vw; /* 20px/1920 */
    margin-left: 1.04167vw;
    margin-right: 1.04167vw;
    z-index: 100;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-end;   /* Элементы выравниваются по нижнему краю */
}
.volume-option{
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.41667vw 1.30208vw; /* 8px/1920 и 25px/1920 */
    border: 0.05208vw solid #0A0A0A; /* 1px/1920 */
    border-radius: 2.08333vw; /* 40px/1920 */
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9375vw; /* 18px/1920 */
    line-height: 110%;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #0A0A0A;
    text-align: center;
    cursor: pointer;
    background: none;
    transition: background 0.3s ease, color 0.3s ease;
    text-decoration: none;
}


/* Стиль для кнопки, если она активна */
.volume-option.is-active {
    background: #0A0A0A;
    color: #FFFFFF;
}

.product-card:hover .volume-option{
    display: flex;
}

.badges-card {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}

.badge-card {
    width: 3.90625vw; /* 75px/1920 */
    height: 3.90625vw;
}

.badge-card.sale-badge {
    background: transparent url('../images/sale_card.svg') center/contain no-repeat;  
}

.badge-card.new-badge {
    background: transparent url('../images/new_card.svg') center/contain no-repeat;  
}

@media (max-width: 1024px) {
    .product-image:hover .booking-btn-in_card{
        display: none;
}
.booking-btn-down{
position: relative;
margin-top: auto;
margin-bottom: 0;
bottom: 0;
border-radius: var(--40, 3.90625vw);
border: 0.09766vw solid var(--Accent-Colors-Red, #FFF);
background: var(--White-White-Text, #0A0A0A);
display: flex;
padding: var(--8, 0.78125vw) var(--25, 2.44141vw);
justify-content: center;
align-items: center;
gap: 0.97656vw;
color: var(--Accent-Colors-Red, #FFF);

/* Desktop/Card Text/Caption Basic */
font-family: "Inter";
font-size: 1.36719vw;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 2.14844vw */
letter-spacing: -0.03906vw;
text-transform: uppercase;
z-index: 150;
}
.booking-btn-down:hover{
background:  #FFF;
color:  #0A0A0A;
}
.product-card.tattoo .product-image:hover.product-image::before {
    background-image:  var(--bg-url);
}
    .product-card {
        gap: 0.98vw; /* 10px/1024 */
    }

    .product-title-brand {
        gap: 0.49vw; /* 5px/1024 */
    }
    .product-name{
        font-size: 1.37vw; /* 14px/1024 */
    }

    .product-brand {
        font-size: 1.37vw; /* 14px/1024 */
    }

    .product-price {
        gap: 0.20vw;
    }

    .product-price .current-price {
        font-size: 1.37vw;
    }

    .product-price .old-price {
        font-size: 1.37vw; /* 12px/1024 */
    }

    .cart-icon-button {
        width: 4.69vw; /* 48px/1024 */
        height: 4.69vw;
        margin-top: 1.46vw; /* 15px/1024 */
        margin-right: 1.46vw;
    }

    .volume-switcher {
        gap: 0.68vw; /* 7px/1024 */
        margin-bottom: 1.46vw; /* 15px/1024 */
        margin-left: 1.46vw;
        margin-right: 1.46vw;
    }
    .volume-option{
        display: flex;
        padding: 0.78vw 1.46vw; /* 8px и 15px/1024 */
        border: 0.10vw solid #0A0A0A; /* 1px/1024 */
        border-radius: 3.91vw; /* 40px/1024 */
        font-size: 1.37vw; /* 14px/1024 */
    }


    .badge-card {
        width: 6.25vw; /* 64px/1024 */
        height: 6.25vw;
    }
}

@media (max-width: 375px) {
    .booking-btn-down{
border-radius: var(--40, 10.66667vw);
border: 0.26667vw solid var(--Accent-Colors-Red, #FFF);
padding: var(--8, 2.13333vw) var(--25, 6.66667vw);
gap: 2.66667vw;

/* Desktop/Card Text/Caption Basic */
font-size: 3.73333vw;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 4.10667vw */
letter-spacing: -0.07467vw;
z-index: 150;
}

    .product-card {
        gap: 1.87vw; /* 7px/375 */
    }

    .product-title-brand {
        gap: 1.33vw; /* 5px/375 */
    }
    .product-name{
        font-size: 3.73vw; /* 14px/375 */
    }

    .product-brand {
        font-size: 3.73vw; /* 14px/375 */
    }

    .product-price {
        gap: 0.53vw; /* 2px/375 */
    }

    .product-price .current-price {
        font-size: 3.73vw; /* 14px/375 */
    }

    .product-price .old-price {
        font-size: 3.73vw; /* 14px/375 (оригинал: 12px) */
    }

    .cart-icon-button {
        width: 12.8vw; /* 48px/375 */
        height: 12.8vw;
        margin-top: 4vw; /* 15px/375 */
        margin-right: 4vw;
    }

    .volume-switcher {
        gap: 1.87vw; /* 7px/375 */
        margin-bottom: 4vw; /* 15px/375 */
        margin-left: 4vw;
        margin-right: 4vw;
    }
    .volume-option{
        padding: 2.13vw 4vw; /* 8px и 15px/375 */
        border: 0.27vw solid #0A0A0A; /* 1px/375 */
        border-radius: 10.67vw; /* 40px/375 */
        font-size: 3.73vw; /* 14px/375 */
    }

    .badge-card {
        width: 17.07vw; /* 64px/375 */
        height: 17.07vw;
    }
}