:root {
    --rating-icon-size: 1.75em
}

.rating__control ul {
    display: inline-block;
    display: inline-flex;
    vertical-align: top
}

.rating__control li {
    position: relative;
    height: var(--rating-icon-size);
    width: var(--rating-icon-size);
    float: left;
    cursor: pointer
}

.rating__control li:focus {
    outline: none
}

.rating__control li:focus::before {
    transform: scale(1);
    opacity: .2
}

.rating__control li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: .2s
}

.rating__control li.rating__item--zero {
    display: none
}

.rating__control--hide {
    display: none
}

.rating__icon,
.rating__control li::before,
.rating[data-animation=on] .rating__control ul:hover .rating__icon {
    color: var(--color-primary)
}

.rating__icon--inactive,
.rating[data-animation=on] .rating__control li:hover~li .rating__icon,
.rating__item--checked~li .rating__icon {
    color: var(--color-contrast-lower)
}

.rating__icon {
    overflow: hidden
}

.rating__icon svg {
    display: block;
    height: var(--rating-icon-size);
    width: var(--rating-icon-size);
    max-width: var(--rating-icon-size);
    pointer-events: none
}

.rating--read-only .rating__control li {
    cursor: default
}

.rating__icon--inactive {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.rating__item--half .rating__icon:not(.rating__icon--inactive) {
    position: relative;
    z-index: 2;
    width: 50%
}

.rating[data-animation=on] .rating__control li:active .rating__icon {
    transform: scale(.8)
}

.rating[data-animation=on] .rating__icon {
    transition: .2s
}

.rating__select {
    display: none
}

.rating__link {
    display: inline-block;
    transition: opacity .2s
}

.rating__link:hover {
    opacity: .85
}

.prod-card-v2 {
    --rating-icon-size: 28px;
    position: relative;
    
}

.prod-card-v2__img-link {
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.prod-card-v2__img-link img {
    display: block;
    width: 100%;
    transition: .3s
}

.prod-card-v2__img-link img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0
}

.prod-card-v2__img-link:hover img:nth-child(1) {
    opacity: .85
}

.prod-card-v2__img-link:hover img:nth-child(2) {
    opacity: 1
}

.prod-card-v2__badge {
    position: absolute;
    z-index: 1;
    top: var(--space-sm);
    right: var(--space-sm);
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-md);
    pointer-events: none;
    font-size: var(--text-sm);
    color: var(--color-white);
    
}

.product-card-v2__title {
    color: var(--color-contrast-higher);
    text-decoration: none;
    font-weight: 700
}

.product-card-v2__title:hover {
    text-decoration: underline
}

.prod-card-v2__price {
    text-decoration: none
}

.prod-card-v2__old-price {
    color: var(--color-contrast-medium);
    text-decoration: line-through
}

.prod-card-v2__old-price::before {
    content: "original price";
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%)
}