:root {
    --global-color-ash: 55, 56, 56;
    --global-color-ash-hex: #373838;

    --global-color-green: 58, 77, 56;
    --global-color-green-hex: #3A4D38;

    --global-color-ochre: 85, 151, 126;
    --global-color-ochre-hex: #B9977E;

    --global-color-beige: 224, 218, 211;
    --global-color-beige-hex: #E0DAD3;

    --global-color-stategrey: 130, 143, 141;
    --global-color-stategrey-hex: #828f8d;

    --global-color-mistgrey: 228, 235, 235;
    --global-color-mistgrey-hex: #e5eaeb;

    --global-color-white: 255, 255, 255;
    --global-color-white-hex: #FFFFFF;
}

.font-h1 {
    font-family: var(--sort-title-font);
    font-size: 96px;
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: 0.03em;
    text-transform: none;
}

.font-h2 {
    font-family: var(--sort-title-font);
    font-size: 60px;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: 0.03em;
    text-transform: none;
}

.font-h3 {
    font-family: var(--sort-title-font);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: 0.03em;
    text-transform: none;
}

.font-h4 {
    font-family: var(--sort-title-font);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: none;
}

.font-h5 {
    font-family: var(--sort-title-font);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: none;
}

.font-h6 {
    font-family: var(--sort-title-font);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: 0.02em;
    text-transform: none;
}

.font-subtitle-1 {
    font-family: var(--sort-body-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: 0.02em;
    text-transform: none;
}

.font-subtitle-2 {
    font-family: var(--sort-body-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: 0.01em;
    text-transform: none;
}

.font-subtitle-3 {
    font-family: var(--sort-body-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.26;
    letter-spacing: 0.01em;
    text-transform: none;
}

.font-subtitle-4 {
    font-family: var(--sort-body-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.26;
    letter-spacing: 0.01em;
    text-transform: none;
}

.font-text-1 {
    font-family: var(--sort-body-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: 0.01em;
    text-transform: none;
}

.font-button {
    font-family: var(--sort-body-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.26;
    letter-spacing: 0.02em;
    text-transform: none;
}

.font-caption {
    font-family: var(--sort-body-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.26;
    letter-spacing: 0.01em;
    text-transform: none;
}

.font-overline {
    font-family: var(--sort-body-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.26;
    letter-spacing: 0.01em;
    text-transform: none;
}

.hidden-desktop {
    display: none;
}

@media (max-width: 1024px) {
    .tablet\:font-h1 {
        font-family: var(--sort-title-font);
        font-size: 96px;
        font-weight: 600;
        line-height: 1.03;
        letter-spacing: 0.03em;
        text-transform: none;
    }

    .tablet\:font-h2 {
        font-family: var(--sort-title-font);
        font-size: 60px;
        font-weight: 600;
        line-height: 1.06;
        letter-spacing: 0.03em;
        text-transform: none;
    }

    .tablet\:font-h3 {
        font-family: var(--sort-title-font);
        font-size: 48px;
        font-weight: 600;
        line-height: 1.06;
        letter-spacing: 0.03em;
        text-transform: none;
    }

    .tablet\:font-h4 {
        font-family: var(--sort-title-font);
        font-size: 34px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .tablet\:font-h5 {
        font-family: var(--sort-title-font);
        font-size: 24px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .tablet\:font-h6 {
        font-family: var(--sort-title-font);
        font-size: 20px;
        font-weight: 500;
        line-height: 1.14;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .tablet\:font-subtitle-1 {
        font-family: var(--sort-body-font);
        font-size: 20px;
        font-weight: 600;
        line-height: 1.34;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .tablet\:font-subtitle-2 {
        font-family: var(--sort-body-font);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.28;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .tablet\:font-subtitle-3 {
        font-family: var(--sort-body-font);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.26;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .tablet\:font-subtitle-4 {
        font-family: var(--sort-body-font);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.26;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .tablet\:font-text-1 {
        font-family: var(--sort-body-font);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.28;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .tablet\:font-button {
        font-family: var(--sort-body-font);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.26;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .tablet\:font-caption {
        font-family: var(--sort-body-font);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.26;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .tablet\:font-overline {
        font-family: var(--sort-body-font);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.26;
        letter-spacing: 0.01em;
        text-transform: none;
    }
}

@media (max-width: 768px) {
    .mobile\:font-h1 {
        font-family: var(--sort-title-font);
        font-size: 96px;
        font-weight: 600;
        line-height: 1.03;
        letter-spacing: 0.03em;
        text-transform: none;
    }

    .mobile\:font-h2 {
        font-family: var(--sort-title-font);
        font-size: 60px;
        font-weight: 600;
        line-height: 1.06;
        letter-spacing: 0.03em;
        text-transform: none;
    }

    .mobile\:font-h3 {
        font-family: var(--sort-title-font);
        font-size: 48px;
        font-weight: 600;
        line-height: 1.06;
        letter-spacing: 0.03em;
        text-transform: none;
    }

    .mobile\:font-h4 {
        font-family: var(--sort-title-font);
        font-size: 34px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .mobile\:font-h5 {
        font-family: var(--sort-title-font);
        font-size: 24px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .mobile\:font-h6 {
        font-family: var(--sort-title-font);
        font-size: 20px;
        font-weight: 500;
        line-height: 1.14;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .mobile\:font-subtitle-1 {
        font-family: var(--sort-body-font);
        font-size: 20px;
        font-weight: 600;
        line-height: 1.34;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .mobile\:font-subtitle-2 {
        font-family: var(--sort-body-font);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.28;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .mobile\:font-subtitle-3 {
        font-family: var(--sort-body-font);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.26;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .mobile\:font-subtitle-4 {
        font-family: var(--sort-body-font);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.26;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .mobile\:font-text-1 {
        font-family: var(--sort-body-font);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.28;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .mobile\:font-button {
        font-family: var(--sort-body-font);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.26;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .mobile\:font-caption {
        font-family: var(--sort-body-font);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.26;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .mobile\:font-overline {
        font-family: var(--sort-body-font);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.26;
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .hidden-mobile {
        display: none;
    }

    .hidden-desktop {
        display: block;
    }

    :root {
        --page-padding: 12px;
    }

}

.swiper,
.swiper *,
.swiper-slide {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.product-price__item--compare {
    color: rgb(var(--color-original-price));
}
.product-price__item--compare::after{
    transform:unset;
    --color-discount:var(--color-original-price) ;
}
.media img {
    width: 100%;
    height: 100%;
}
.search-icon {
    position: relative;
    z-index: 1;
}

.v-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    gap: 8px;
    padding: 15px 24px;
    /* color: rgba(var(--global-color-ash)); */
}

.v-button svg {
    width: 18px;
    min-width: 18px;
    height: 18px;
}

.v-button:has(svg) {
    padding-right: 20px;
}

.v-button.filled {
    background-color: rgba(var(--global-color-ash));
    color: rgba(var(--global-color-white));
}

.v-button.filled:disabled {
    background-color: rgba(var(--global-color-mistgrey));
}

.v-button.outlined {
    border: 1px solid rgba(var(--global-color-ash));
}

.v-button.outlined:disabled {
    border: 1px solid rgba(var(--global-color-mistgrey));
}

.v-button.text {}

.shopline-section>.page-section::before {
    background-color: rgba(var(--background-color));
}

.v-button.icons-filled {
    padding: 16px;
    background-color: rgba(var(--global-color-ash));
}

.v-button.icons-filled:disabled {
    background-color: rgba(var(--global-color-mistgrey));
}

.v-button.icons-outlined {
    padding: 16px;
    border: 1px solid rgba(var(--global-color-ash));
}

.v-button.icons-outlined:disabled {
    border: 1px solid rgba(var(--global-color-mistgrey));
}

.v-button:disabled {
    color: rgba(var(--global-color-ash), 0.4);
}

.product-price__item--compare {
    font-size: 80%;
}

.product-card .media {
    background-color: rgba(var(--color-image-background));
}

/* footer */
.footer__payment-icons .payment-icons {
    gap: 4px;
}

.footer-payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 18px;
    padding: 0;
    color: rgb(var(--global-color-ash));
    background-color: rgb(var(--background-svg, var(--global-color-mistgrey)));
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    overflow: hidden;
    line-height: 1;
}

.footer-payment-icon svg {
    display: block;
    width: auto;
    height: 18px;
    color: rgb(var(--global-color-ash));
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: grayscale(1) contrast(1.4);
    mix-blend-mode: multiply;
}

.footer__payment-icons .payment-icons--grayscale svg {
    filter: grayscale(1) contrast(1.4);
}

@media (min-width:768px) and (max-width:1024px) {
    .footer-copyright-section .footer-copyright {
        gap: 30px;
    }

    .shopline-section .page-section {
        padding-block-start: var(--page-section-top, calc(var(--s-padding-block-start) * 0.75));
        padding-block-end: var(--page-section-bottom, calc(var(--s-padding-block-end) * 0.75));
    }
}

@media (max-width:767px) {
    .footer-copyright-section .footer-copyright {
        gap: 18px;
    }
}

/* footer */

/* rating */

.preview-ratings .star-rating {
    display: flex;
    gap: 1px;
}

.preview-ratings .star {
    position: relative;
    width: 20px;
    height: 20px;
}

.preview-ratings .star svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 空星 */
.preview-ratings .star-base {
    position: absolute;
    top: 0;
    left: 0;
}

/* 实心裁剪层 */
.preview-ratings .star-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100%;
}

.preview-ratings .star {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.preview-ratings .star svg {
    width: 100%;
    height: 100%;
    display: block;
}

.preview-ratings .star-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    /* ⭐关键：裁切 */
}

.preview-ratings .star-fill svg {
    width: 20px;
    height: 20px;
}

/* rating */