:root {
  --h0-font-size:calc(var(--title-scale) * 70px);
  --h0-line-height:1.1;

  --h1-font-size:calc(var(--title-scale) * 70px);
  --h1-line-height:1.1;

  --h2-font-size:calc(var(--title-scale) * 48px);
  --h2-line-height:1.1;

  --h3-font-size:calc(var(--title-scale) * 30px);
  --h3-line-height:1.2;

  --h4-font-size:calc(var(--title-scale) * 22px);
  --h4-line-height:1.2;

  --h5-font-size:calc(var(--title-scale) * 16px);
  --h5-line-height:1.2;

  --text-1-font-size:calc(var(--body-scale) * 16px);
  --text-1-line-height:1.2;

  --text-2-font-size:calc(var(--body-scale) * 16px);
  --text-2-line-height:1.2;

  --text-3-font-size:calc(var(--body-scale) * 16px);
  --text-3-line-height:1.2;

  --text-4-font-size:calc(var(--body-scale) * 14px);
  --text-4-line-height:1.2;

  --text-5-font-size:calc(var(--body-scale) * 12px);
  --text-5-line-height:1.2;

  --text-price-font-size:calc(var(--body-scale) * 14px);
  --text-price-line-height:1.2;

  --text-button-font-size:calc(var(--body-scale) * 16px);
  --text-button-line-height:1.2;

  /* OS 3.0 utility typography tokens. */
  --title0-font-size:calc(var(--title-scale) * 70px);
  --title1-font-size:calc(var(--title-scale) * 70px);
  --title2-font-size:calc(var(--title-scale) * 48px);
  --title3-font-size:calc(var(--title-scale) * 30px);
  --title4-font-size:calc(var(--title-scale) * 22px);
  --title5-font-size:calc(var(--title-scale) * 16px);
  --title6-font-size:calc(var(--title-scale) * 14px);
  --body1-font-size:calc(var(--body-scale) * 16px);
  --body2-font-size:calc(var(--body-scale) * 16px);
  --body3-font-size:calc(var(--body-scale) * 16px);
  --body4-font-size:calc(var(--body-scale) * 14px);
  --body5-font-size:calc(var(--body-scale) * 12px);
  --body6-font-size:calc(var(--body-scale) * 12px);

  --type-blog-title-size:calc(var(--body-scale) * 16px);
  --type-product-title-size:calc(var(--body-scale) * 16px);
  --type-view-all-size:calc(var(--body-scale) * 16px);
  --type-auxiliary-size:calc(var(--body-scale) * 14px);
  --type-badge-size:calc(var(--body-scale) * 12px);

  --page-padding:40px;
}

html,
body{
  font-family: var(--body-font);
  font-size:var(--text-3-font-size);
  line-height:var(--text-3-line-height);
}

h1,h2,h3,h4,h5,h6,p{
  margin:0;
}

h1,h2,h3,h4,h5,h6,
.font-h0,.font-h1,.font-h2,.font-h3,.font-h4,.font-h5{
  font-style:var(--title-font-style, normal);
  font-weight:var(--title-font-weight, 600);
}

.font-h0{
  font-size:var(--h0-font-size);
  line-height:var(--h0-line-height);
  font-family: var(--title-font);
}

h1,.font-h1, .title1{
  font-size:var(--h1-font-size);
  line-height:var(--h1-line-height);
  font-family: var(--title-font);
}

h2,.font-h2, .title2{
  font-size:var(--h2-font-size);
  line-height:var(--h2-line-height);
  font-family: var(--title-font);
}

h3,.font-h3, .title3{
  font-size:var(--h3-font-size);
  line-height:var(--h3-line-height);
  font-family: var(--title-font);
}

h4,.font-h4, .title4{
  font-size:var(--h4-font-size);
  line-height:var(--h4-line-height);
  font-family: var(--title-font);
}

h5,.font-h5, .title5{
  font-size:var(--h5-font-size);
  line-height:var(--h5-line-height);
  font-family: var(--title-font);
}

.font-text-1{
  font-size:var(--text-1-font-size);
  line-height:var(--text-1-line-height);
  font-family: var(--body-font);
}

.font-text-2{
  font-size:var(--text-2-font-size);
  line-height:var(--text-2-line-height);
  font-family: var(--body-font);
}

.font-text-3{
  font-size:var(--text-3-font-size);
  line-height:var(--text-3-line-height);
  font-family: var(--body-font);
}

.font-text-4{
  font-size:var(--text-4-font-size);
  line-height:var(--text-4-line-height);
  font-family: var(--body-font);
}

.font-text-5{
  font-size:var(--text-5-font-size);
  line-height:var(--text-5-line-height);
  font-family: var(--body-font);
}

.font-price{
  font-size:var(--text-price-font-size);
  line-height:var(--text-price-line-height);
  font-family: var(--body-font);
  font-weight: 600;
}

button,
.button{
  font-family: var(--button-font);
  font-size:var(--text-button-font-size);
  line-height:var(--text-button-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
}

.v-button{
  font-family: var(--button-font);
  font-size:var(--text-button-font-size);
  line-height:var(--text-button-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
  padding:16px 30px;
}

.font-button{
  font-family: var(--button-font);
  font-size:var(--text-button-font-size);
  line-height:var(--text-button-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
}

/* Global typography system --------------------------------------------------
 * Semantic heading elements win over legacy utility classes such as an H2
 * carrying .font-h1. Component-specific content then maps to the shared
 * blog/product/view-all/auxiliary/badge tokens below.
 */
h1 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
}

h2 {
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
}

h3 {
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
}

h4 {
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
}

p {
  line-height: var(--text-3-line-height);
}

.title0,
.title1 {
  line-height: 1.1;
}

.title2 {
  line-height: 1.2;
}

.title3 {
  line-height: 1.2;
}

.title4,
.title5 {
  line-height: 1.2;
}

.body1,
.body2,
.body3,
.body-font {
  line-height: 1.2;
}

.body4 {
  line-height: 1.2;
}

.body5,
.body6 {
  line-height: 1.2;
}

.block-article-card__title,
.product-card-title,
.block-product-card__title {
  font-family: var(--body-font);
  font-style: normal;
  font-size: var(--type-product-title-size);
  line-height: 1.2;
  font-weight: normal;
}

.block-article-card__title {
  font-size: var(--type-blog-title-size);
}
.product-section-title {font-size: var(--h3-font-size);font-weight: 600}
.recommend-product-item-info .recommend-product-item-price {justify-content: start!important;font-size: 16px!important;font-weight: 600;}
.recommend-product-item-info .recommend-product-item-title.display-2-row{font-size: var(--type-product-title-size)!important}
.button,
.v-button,
.font-button,
button {
  font-size: var(--text-button-font-size);
  line-height: 1.2 !important;
}

.heading-with-link__view-more {
  font-size: var(--type-view-all-size);
  line-height: 1.2 !important;
}

.media-grid__description,
.media-grid-card__description,
.block-richtext {
  font-size: var(--text-3-font-size);
  line-height: 1.2 !important;
}

.block-article-card__date-author{
  font-size: var(--type-auxiliary-size);
  line-height: 1.2;
}

.product-card_tag,
.block-product-card__discount-tag,
.block-product-card__sold-out {
  font-size: var(--type-badge-size);
  line-height: 1.2;
}

.empty-image-class{
  background-color: rgba(var(--color-text), 0.05);
  width:100%;
  height:100%;
}

section{
  background-color: rgba(var(--color-background));
}

img{
  width: 100%;
  height: 100%;
  object-fit:cover;
}

.fit-contain{
  object-fit:contain;
}
.fit-fill{
  object-fit: fill;
}
.min-w-full {
  min-width: 100%;
}

.max-w-full {
  max-width: 100%;
}

.max-w-2xs {
  max-width: 365px;
}

.max-w-xs {
  max-width: 530px;
}

.max-w-sm {
  max-width: 672px;
}

.max-w-md {
  max-width: 864px;
}

.max-w-lg {
  max-width: 1024px;
}

.max-w-xl {
  max-width: 1216px;
}

.max-w-2xl {
  max-width: 1376px;
}

.font-weight-700{
  font-weight: 700;
}
.font-weight-600{
  font-weight: 600;
}
.font-weight-500{
  font-weight: 500;
}
.font-weight-400{
  font-weight: 400;
}
.font-weight-300{
  font-weight: 300;
}

.opacity-10{
  opacity: 1;
}
.opacity-9{
  opacity: 0.9;
}
.opacity-8{
  opacity: 0.8;
}
.opacity-7{
  opacity: 0.7;
}
.opacity-6{
  opacity: 0.6;
}
.opacity-5{
  opacity: 0.5;
}
.opacity-4{
  opacity: 0.5;
}
.opacity-3{
  opacity: 0.3;
}
.opacity-2{
  opacity: 0.2;
}
.opacity-1{
  opacity: 0.1;
}

.page-padding{
    padding-inline: var(--page-padding);
}

.page-width{
    width: 100%;
    max-width: var(--page-width);
    margin: auto;
}

/*
 * --page-width represents the usable content width. When a page-width
 * container also owns the responsive gutter, include that gutter in the
 * outer shell so the inner content still tops out at --page-width.
 */
.page-width.page-padding{
    max-width: calc(var(--page-width) + var(--page-padding) * 2);
}

.page-width.page-width--fluid{
    max-width: 100%;
}
@media(min-width:1440px){
  :root {
    --h0-font-size:calc(var(--title-scale) * 70px);
    --h1-font-size:calc(var(--title-scale) * 70px);
    --h2-font-size:calc(var(--title-scale) * 48px);
    --h3-font-size:calc(var(--title-scale) * 30px);
    --h4-font-size:calc(var(--title-scale) * 22px);
    --h5-font-size:calc(var(--title-scale) * 16px);

    --text-1-font-size:calc(var(--body-scale) * 16px);
    --text-2-font-size:calc(var(--body-scale) * 16px);
    --text-3-font-size:calc(var(--body-scale) * 16px);
    --text-4-font-size:calc(var(--body-scale) * 14px);
    --text-5-font-size:calc(var(--body-scale) * 12px);

    --text-price-font-size:calc(var(--body-scale) * 18px);
    --text-button-font-size:calc(var(--body-scale) * 16px);
  }
}

@media (max-width: 1024px) {
  :root {
    --h0-font-size:calc(var(--title-scale) * 70px);
    --h1-font-size:calc(var(--title-scale) * 70px);
    --h2-font-size:calc(var(--title-scale) * 48px);
    --h3-font-size:calc(var(--title-scale) * 30px);
    --h4-font-size:calc(var(--title-scale) * 22px);
    --h5-font-size:calc(var(--title-scale) * 16px);

    --text-1-font-size:calc(var(--body-scale) * 16px);
    --text-2-font-size:calc(var(--body-scale) * 16px);
    --text-3-font-size:calc(var(--body-scale) * 16px);
    --text-4-font-size:calc(var(--body-scale) * 14px);
    --text-5-font-size:calc(var(--body-scale) * 12px);
    --text-price-font-size:calc(var(--body-scale) * 18px);
    --text-button-font-size:calc(var(--body-scale) * 16px);

    --page-padding:35px;
  }
}


@media (max-width: 768px) {
    :root {
        --h0-font-size:calc(var(--title-scale) * 38px);
        --h1-font-size:calc(var(--title-scale) * 38px);
        --h2-font-size:calc(var(--title-scale) * 28px);
        --h3-font-size:calc(var(--title-scale) * 22px);
        --h4-font-size:calc(var(--title-scale) * 18px);
        --h5-font-size:calc(var(--title-scale) * 14px);

        --text-1-font-size:calc(var(--body-scale) * 14px);
        --text-2-font-size:calc(var(--body-scale) * 14px);
        --text-3-font-size:calc(var(--body-scale) * 14px);
        --text-4-font-size:calc(var(--body-scale) * 12px);
        --text-5-font-size:calc(var(--body-scale) * 12px);
        --text-price-font-size:calc(var(--body-scale) * 16px);
        --text-button-font-size:calc(var(--body-scale) * 14px);

        --title0-font-size:calc(var(--title-scale) * 38px);
        --title1-font-size:calc(var(--title-scale) * 38px);
        --title2-font-size:calc(var(--title-scale) * 28px);
        --title3-font-size:calc(var(--title-scale) * 22px);
        --title4-font-size:calc(var(--title-scale) * 18px);
        --title5-font-size:calc(var(--title-scale) * 14px);
        --title6-font-size:calc(var(--title-scale) * 12px);
        --body1-font-size:calc(var(--body-scale) * 14px);
        --body2-font-size:calc(var(--body-scale) * 14px);
        --body3-font-size:calc(var(--body-scale) * 14px);
        --body4-font-size:calc(var(--body-scale) * 12px);
        --body5-font-size:calc(var(--body-scale) * 12px);
        --body6-font-size:calc(var(--body-scale) * 12px);

        --type-blog-title-size:calc(var(--body-scale) * 14px);
        --type-product-title-size:calc(var(--body-scale) * 14px);
        --type-view-all-size:calc(var(--body-scale) * 16px);
        --type-auxiliary-size:calc(var(--body-scale) * 12px);
        --type-badge-size:calc(var(--body-scale) * 12px);

        --page-padding:20px;
    }

    .v-button{
        padding:2.1333vw 4vw;
    }
    .mobile-text-left{
        text-align: left;
    }
    .mobile-text-center{
        text-align: center;
    }
    .mobile-text-right{
        text-align: right;
    }
}

/* Shared carousel pagination -------------------------------------------------
 * Keep every dot-based carousel on one visual system while allowing each
 * section to control its own placement, visibility, and spacing.
 */
:root {
    --carousel-pagination-spacing: 24px;
    --carousel-pagination-dot-size: 10px;
    --carousel-pagination-dot-active-width: 50px;
    --carousel-pagination-dot-radius: 5px;
    --carousel-pagination-dot-background: rgb(0 0 0 / 30%);
    --carousel-pagination-dot-active-background: #000000;
}

:is(
    [data-carousel-pagination],
    .swiper-pagination,
    .slideshow__pager--dots,
    .media-gallery__pagination
) {
    gap: 8px;
}

:is(
    [data-carousel-pagination] > button,
    .swiper-pagination .swiper-pagination-bullet,
    .slideshow__pager--dot,
    .media-gallery__pagination button[name="pager"]
) {
    box-sizing: border-box;
    flex: 0 0 auto !important;
    width: var(--carousel-pagination-dot-size) !important;
    min-width: var(--carousel-pagination-dot-size);
    max-width: none !important;
    height: var(--carousel-pagination-dot-size) !important;
    padding: 0;
    background: var(--carousel-pagination-dot-background) !important;
    border: 0;
    border-radius: var(--carousel-pagination-dot-radius) !important;
    opacity: 1 !important;
    transition: width 0.25s ease, background-color 0.25s ease;
}

:is(
    [data-carousel-pagination] > button[aria-current="true"],
    .swiper-pagination .swiper-pagination-bullet-active,
    .slideshow__pager--dot.is-active,
    .media-gallery__pagination button[name="pager"].is-active
) {
    width: var(--carousel-pagination-dot-active-width) !important;
    background: var(--carousel-pagination-dot-active-background) !important;
}

.swiper-pagination .swiper-pagination-bullet::after {
    background: transparent !important;
}

/* Shared carousel arrow interaction. */
:is(
    .swiper-controls .swiper-button,
    .block-collection-list__button,
    .product-tabs-carousel__button,
    .block-articles-carousel__button,
    .tilted-carousel__button,
    .video-moments-carousel__button
):not(:disabled):not(.swiper-button-disabled) {
    cursor: pointer;
}

:is(
    .swiper-controls .swiper-button,
    .block-collection-list__button,
    .product-tabs-carousel__button,
    .block-articles-carousel__button,
    .tilted-carousel__button,
    .video-moments-carousel__button
):is(:disabled, .swiper-button-disabled) {
    cursor: default;
}

.product-detail__description iframe {width: 100%; height: auto; aspect-ratio: 16 / 9}

.rte {
  overflow-wrap: anywhere;
}

.rte :first-child,
.rte .sr-only:first-child + * {
  margin-block-start: 0 !important;
}

.rte :last-child {
  margin-block-end: 0 !important;
}

.rte :is(.link, img) {
  display: inline-block;
}

.rte :is(.link + .link) {
  margin-inline-start: 0.75rem;
}

.rte > :is(.button, .button-group:has(.button)) {
  margin-block-start: 1rem;
}

.rte
  :is(
    p img:not([style*="float"]):only-child,
    div img:not([style*="float"]):only-child,
    figure,
    video,
    object,
    blockquote,
    table
  ) {
  margin-block: 1.6rem;
}

.rte
  :is(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"], iframe[data-src*="youtube"], iframe[data-src*="youtu.be"]){
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.rte .play-button {
  margin: 2rem auto;
  display: block;
}

.rte :is(ol, ul) :is(ol, ul) {
  margin-block-start: 0 !important;
}

.rte :is(ol, ul) {
  row-gap: 0.4em;
  display: grid;
}

.rte br {
  margin-block: 0 !important;
}

.rte figcaption {
  font-style: italic;
  font-size: var(--text-sm);
  color: rgb(var(--text-color) / 0.65);
  margin-block-start: 0.5em;
}

.rte blockquote {
  border-inline-start-width: 3px;
  padding: 1rem;
  line-height: 1.75;
  background-color: rgb(var(--text-color) / 0.05);
}

@media screen and (min-width: 1000px) {
  .rte:not(.rte--tight) > :where(:not(meta, span) + *) {
    margin-block-start: 1rem;
  }

  .rte:not(.rte--tight) > :is(.button, .button-group:has(.button)) {
    margin-block-start: 1rem;
  }

  .rte:not(.rte--tight) .play-button {
    margin-block: 2.5rem;
  }

  .rte:not(.rte--tight) blockquote {
    margin-inline-start: 2rem;
    padding-inline-start: 2rem;
  }
}

.rte :where(ol, ul):not(.unstyled-list) li {
  padding-inline-start: 0.25rem;
  margin-block-start: 0 !important;
}