.product-detail-top{
    position: relative;
    height: 47vw;
    max-height: 760px;
    --top: 72%;
}
.product-detail-top>div{
    height: 100%;
    position: relative;
}
.product-detail-top>div.single-product-bg{
    position: absolute;
    inset: 0;
    z-index: 1;
}
.single-product-bg::before,
.single-product-bg::after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: var(--top);
    background-image:
        radial-gradient(circle 100vw at top right, rgba(214, 215, 219, 1), rgba(214, 215, 219, 0.8) 30% ,rgba(214, 215, 219, 0) 50%),
        radial-gradient(circle 100vw at top right, rgba(214, 215, 219, 0) 40%, rgba(220, 221, 225, 0.6) 60%, rgba(220, 221, 225, 0) 80%),
        radial-gradient(circle 100vw at top right, rgba(220, 221, 225, 0) 70%, rgba(230, 232, 235, 1), rgba(209, 210, 214, 0.6) 90%),
        radial-gradient(circle 100vw at top right, rgba(209, 210, 214, 0) 80%, rgba(209, 210, 214, .8) 100%);
}
.single-product-bg::after{
    top: var(--top);;
    height: calc( 100% - var(--top) );
    background: rgb(250, 251, 253);
}
.product-detail-top .container{
    position: relative;
    z-index: 2;
    top: var(--top);
    transform: translateY(-72%);
}
.product-detail-top .container .left{
    margin-top: 5rem;
    position: relative;
}
.product-detail-top .container .feature-list{
    width: 100%;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 2rem;
}
.product-detail-top .container .feature-list .item{
    width: calc( (100% - 2rem ) / 2);
    align-items: center;
    column-gap: 6px;
}
.product-detail-top .container .feature-list .item .icon-svg,
.product-detail-top .container .feature-list .item .icon-img{
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid #666;
    padding: 4px;
    border-radius: 50px;
    flex-grow: 0;
    flex-shrink: 0;
}
.product-detail-top .container .feature-list .item .icon-svg svg{
    max-width: 100%;
    aspect-ratio: 1 / 1;
}
.product-detail-top .container .right{
    width: 50%;
    flex-shrink: 0;
    margin-left: 4rem;
}
.product-detail-top .container .right .big-swiper{
    width: 80%;
    aspect-ratio: 1 / 1;
}
.product-detail-top .container .right  .big-swiper .swiper-button-next:after,
.product-detail-top .container .right  .big-swiper .swiper-button-prev:after {
    font-size: 11px;
    color: #fff;
    display: none;
    background-color: #787474;
    border-radius: 6rem;
    width: 21px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    display: block;
    opacity: 0.4;
    transition: all 0.2s;
}
.product-detail-top .container .right .big-swiper:hover .swiper-button-next:after,
.product-detail-top .container .right .big-swiper:hover .swiper-button-prev:after{
    display: block;
    opacity: 0.8;
}
/* 简述介绍 */
.product-detail-desc{
    position: relative;
}
.product-detail-desc .bread-crumbs{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transform: translateY(-100%);
    text-align: right;
    opacity: 0.8;
    transition: all 0.2s;
    border-bottom: 1px dashed transparent;
}
.product-detail-desc .bread-crumbs a{
    margin-inline-end:6px;
    mix-blend-mode: difference; /* 动态对比 */
    background-color: transparent; /* 避免背景叠加 */
    color: var(--color-gray);
}
.product-detail-desc .bread-crumbs a::after{
    content: "/";
    margin-inline-start: 5px;
}
.product-detail-desc .bread-crumbs a:last-child::after{
    content: "";
}
.product-detail-desc .bread-crumbs a:hover{
    border-bottom: 1px dashed var(--color-blue);
}

.product-detail-desc .container{
    column-gap: 5%;
}
.product-detail-desc .container>div{
    width: 50%;
    line-height: 1.8;
}
.product-detail-desc .media{
    width: 100%;
    aspect-ratio: 16 / 9;
    box-shadow: 2px 6px 8px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.product-detail-desc .media>div{
    width: 100%;
    height: 100%;
    position: relative;
}
.product-detail-desc .media img,
.product-detail-desc .media video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-detail-desc .media .video-mask{
    position: absolute;
    inset: 0;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    visibility: visible;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.product-detail-desc .media .video-mask::after{
    position: absolute;
    content: '';
    inset: 0;
    background-color: rgba(1, 1, 1, .2);
}
.product-detail-desc .media .video-mask .play-ico {
    cursor: pointer;
    width: 66px;
    height: 66px;
    position: relative;
    z-index: 12;
    border-radius: 50%;
    background-color: transparent;
    text-align: center;
    line-height: 66px;
    font-size: 0;
    color: var(--color-blue);
    /* opacity: 0.9; */
}
.product-detail-desc .text{
    text-align: justify;
}
.product-detail-desc .text a{
    border-bottom: 1px dashed var(--color-gray);
    transition: all 0.2s ease-in-out;
    margin-inline: 1px;
}
.product-detail-desc .text a:hover{
    color: var(--color-blue);
    border-bottom: 1px dashed var(--color-blue);
}
/* 详情介绍 */
.product-detail-info .full-page .container{
    position: relative;
}
.product-detail-info .full-page .bg,
.product-detail-info .full-page .mask{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.product-detail-info .full-page .bg video,
.product-detail-info .full-page .bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-detail-info .full-page .content{
    position: relative;
    z-index: 2;
    height: 100%;
    line-height: 1.8;
}

.product-detail-info .left-right-page .container{
    position: relative;
}
.product-detail-info .left-right-page .bg{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    font-size: 0;
}
.product-detail-info .left-right-page .bg video,
.product-detail-info .left-right-page .bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-detail-info .left-right-page .content{
    position: relative;
    z-index: 2;
}
.product-detail-info .left-right-page .content .text{
    line-height: 1.8;
}
.product-detail-info .left-right-page .image-is-bg .content,
.product-detail-info .left-right-page .image-is-content .content{
    column-gap: 6%;
    height: 100%;
}
.product-detail-info .left-right-page .image-is-bg .content>div,
.product-detail-info .left-right-page .image-is-content .content>div{
    width: 50%;
    overflow: hidden;
}
.product-detail-info .left-right-page .image-is-bg .media img, 
.product-detail-info .left-right-page .image-is-content .media img, 
.product-detail-info .left-right-page .image-is-content .media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-detail-info .left-right-page .image-is-bg .text.on-right,
.product-detail-info .left-right-page .image-is-content .text.on-right{
    order: 2;
}
.product-detail-info .left-right-page .image-is-bg .media.default{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-size: 0;
}
/* 应用场景 */
.product-detail-application .list{
    width: 100%;
    row-gap: 2rem;
    background-color: #f8f8f8;
    column-gap: 2rem;
}
.product-detail-application .item{
    --application-width: calc( ( 100% - 2rem ) / 5 );
    width: calc( var(--application-width) * 2 );
    position: relative;
}
.product-detail-application .item:first-child,
.product-detail-application .item:last-child{
    width: calc( var(--application-width) * 3);
}
.product-detail-application .item>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1214 / 480;
}
.product-detail-application .item>img:nth-child(2),
.product-detail-application .item>img:nth-child(3){
    aspect-ratio: 760 / 480;
}
.product-detail-application .item .text{
    position: absolute;
    inset: 0;
    cursor: pointer;
}
.product-detail-application .item .text>strong{
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    color: #fff;
    background-color: #1b1a1a94;
    padding: 5px 3rem;
    transition: all 0.2s ease-in-out;
}
.product-detail-application .item:hover .text.has-desc>strong{
    visibility: hidden;
    opacity: 0;
}

.product-detail-application .item .text .desc{
    position: absolute;
    inset: 0;
    background-color: #ebebebc9;
    padding: 0 10%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
}
.product-detail-application .item:hover .text .desc{
    visibility: visible;
    opacity: 1;
    pointer-events: unset;
}
.product-detail-application .list.default-list{
    background-color: transparent;
    row-gap: 2rem;
    column-gap: 2rem;
    justify-content: center;
}
.product-detail-application .list.default-list .item{
    display: flex;
    flex-direction: column;
}
.product-detail-application .list.default-list.scenario-length-2 .item{
    flex-basis: calc( (100% - 2rem ) / 2);
}
.product-detail-application .list.default-list.scenario-length-3 .item{
    flex-basis: calc( (100% - 4rem ) / 3);
}
.product-detail-application .list.default-list.scenario-length-5 .item:nth-child(1),
.product-detail-application .list.default-list.scenario-length-5 .item:nth-child(2){
    flex-basis: calc( (100% - 2rem ) / 2);
}
.product-detail-application .list.default-list.scenario-length-5 .item{
    flex-basis: calc( (100% - 4rem ) / 3);
}
.product-detail-application .list.default-list.scenario-length-6 .item{
    flex-basis: calc( (100% - 4rem ) / 3);
}
.product-detail-application .list.default-list .item>img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 9;
}
/* 
.product-detail-application .list.default-list .item .text {
    position: relative;
}
.product-detail-application .list.default-list .item .text>strong {
    display: none;
}
.product-detail-application .list.default-list .item .text .desc {
    position: relative;
    background-color: transparent;
    padding: 1rem 0;
    visibility: visible;
    opacity: 1;
    pointer-events: unset;
    color: var(--color-gray);
}
.product-detail-application .list.default-list .item .text .desc>h3{
    color: var(--color-blue);
} */


/* 规格参数 */
.product-detail-specs{
    background-color: #f9fafc;
}
.product-detail-specs .container{
    width: 100%;
    column-gap: 1rem;
    position: relative;
}
.product-detail-specs .notes{
    font-size: 0.8em;
    color: var(--color-gray);
    font-weight: 200;
}
.product-detail-specs .size-img{
    width: 100%;
    max-width: 380px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--nav-height)* 1);
    z-index: 2;
    margin-inline: auto;
}
.product-detail-specs .table{
    overflow-x: auto;
    width: 100%;
    position: relative;
}
.product-detail-specs .table table{
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    border-collapse: collapse;
}

.product-detail-specs .table tr th:first-child,
.product-detail-specs .table tr td:first-child{
    max-width: 31% !important;
    width: 31%;
    position: sticky;
    left: -1px; 
    font-weight: 700;
}
.product-detail-specs .table th{
    padding: 10px 1rem;
    /* background-color: rgb(1 144 151 / 13%); */
    font-weight: 700;
    color: var(--color-blue);
    text-align: left;
}
.product-detail-specs .table tr,
.product-detail-specs .table tr td:first-child {
    background-color: #fff
}
.product-detail-specs .table tr:nth-child(2n) ,
.product-detail-specs .table tr:nth-child(2n) td:first-child {
    background-color: rgba(248, 249, 251, 1);
}
.product-detail-specs .table td {
    padding: 10px 1rem;
}
.product-detail-specs .table th a,
.product-detail-specs .table td a{
    display: inline-block;
    color: inherit;
    border-bottom: 1px dashed var(--color-blue);
}
/* 产品推荐 购样 */
.product-detail-related .get-samples .samle-product .img{
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / ;
    border: 1px solid var(--color-blue);
    border-radius: 200px;
    padding: 1rem;
    position: relative;
}
.product-detail-related .get-samples .samle-product .img::before,
.product-detail-related .get-samples .samle-product .img::after{
    position: absolute;
    inset: 0;
    content: '';
    border: 1px solid var(--color-blue);
    transform: scale(1.1);
    border-radius: 200px;
    opacity: 0.5;
    animation: warn 1.2s ease-out 0s infinite;
}
.product-detail-related .get-samples .samle-product .img::after{
    transform: scale(1.2);
    opacity: 0.3;
    animation: warn2 1.2s ease-out 0s infinite;
}
.product-detail-related .get-samples .samle-product .img img{
    aspect-ratio: 1 / 1;
}
@keyframes warn {
    0% {
        transform: scale(1.1);
        opacity: 0.5;
    }
    30% {
        opacity: 0.5;
    }
    100% {
        transform: scale(1.2);
        opacity: 0.2;
    }
}
@keyframes warn2 {
    0% {
        transform: scale(1.2);
        opacity: 0.3;
    }
    30% {
        opacity: 0.3;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}
.product-detail-related .get-samples .samle-product>a{
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    margin: 0 auto;
    padding: 5px 4rem;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    z-index: 2;
    transform: translateY(-1rem);
}
.product-detail-related .get-samples .samle-product>a:hover{
    border: 1px solid var(--color-blue);
    background-color: var(--color-blue);
    color: #fff;
}



.product-detail-related .related .list{
    row-gap: 2rem;
    width: 100%;
    column-gap: 2rem;
}
.product-detail-related .related .product-tags{
    column-gap: 1rem;
}
.product-detail-related .related .item{
    width: calc( ( 100% - 6rem ) / 4 );
    background-color: #fff;
    padding: 1rem 1rem;
    box-shadow: 0 1px 10px rgb(2 31 26 / 10%);
}
.product-detail-related .related .item .title{
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.2em;
    height: 2.4em;
}
.product-detail-related .related .item img{
    max-width: 220px;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.product-detail-related .related .item .feature{
    text-align: left;
}
.product-detail-related .related .item .feature span{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}



/* 修改默认的变体 提示样式 */
.woo-variation-items-wrapper [data-wvstooltip]:before{
   box-shadow: none; 
   border-radius: 50px;
   background-color: #ade1f650;
   color: var(--color-highlight);
}
.woo-variation-items-wrapper [data-wvstooltip]:after{
    border-top-color: #ade1f650;
}

.woo-variation-swatches .wvs-style-squared.color-variable-items-wrapper .variable-item:not(.radio-variable-item),
.woo-variation-swatches .wvs-style-squared.color-variable-items-wrapper .variable-item-span-color,
.woo-variation-swatches .color-variable-items-wrapper .variable-item .variable-item-contents{
    border-radius: 50px !important;
}
/* 颜色定制化的情况 */
.woo-variation-swatches .wvs-style-squared.color-variable-items-wrapper .variable-item.color-variable-item-customize span{
    background: conic-gradient(
        from -90deg, 
        red 0%, 
        orange 10%, 
        yellow 20%, 
        green 30%, 
        cyan 40%, 
        blue 50%, 
        violet 60%, 
        purple 70%, 
        magenta 80%, 
        pink 90%, 
        red 100%
    ); /* 沿着圆心的调色板 */
}

/* 属性Button样式 */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item){
    border: 1px solid #a1a1a150;
    box-shadow: none !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected, 
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover{
    border: 0px;
    background-color: #ade1f650 !important;
    color: var(--color-highlight) !important;
}

.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item{
    font-size: 0.96rem !important;
    height: auto !important;
    letter-spacing: -.6px;
}

.woo-variation-items-wrapper .button-variable-item[data-wvstooltip]:before{
    display: none !important;
}
/* 产品评价区块 */
#reviews{
    background-color: #fff;
    padding: 2rem;
    flex-grow: 1;
    max-width: 100%;
}
#reply-title,
#reviews label{
    font-family: var(--font-bold);
    font-size: 16px;
}
#reviews .comment-form-rating{
    display: flex;
    column-gap: 2rem;
    align-items: center;
    margin: 10px 0;
}
#reviews .comment-form-rating .stars{
    margin: 0 !important;
}
#reviews .comment-form-rating .stars a{
    height: 1.3em;
    width: 1.3em;
}
#reviews .comment-form-rating .stars a::before{
    height: 100%;
    width: 100%;
    color: #f59b00;
    font-size: 1.3em;
}
#reviews .comment-form-rating .stars a:hover {
    color: var(--color-highlight);
}
#review_form #respond textarea{
    border-radius: 5px;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 1rem;
    background-color: #f7f9fc;
    outline: none;
    border: 0;
    padding: 0.8rem 1rem;
    color: #999;
    box-sizing: border-box;
    font-family: 'MULI-Regular';
}
#reviews .form-submit{
    margin: 0;
    text-align: right;
}
#reviews .form-submit input[type=submit]{
    background-color: var(--color-highlight);
    color: #fff;
    padding: 10px 3rem;
    border: 0;
    border-radius: 5px;
    font-family: var(--font-bold);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
#reviews .form-submit input[type=submit]:hover{
    /* background-color: var(--color-darkblue); */
}
.woocommerce #reviews #comments ol.commentlist li img.avatar{
    display: none;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text{
    margin: 0 0 0 0;
    padding: 1em;
    position: relative;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-radius: unset;
}
.woocommerce .star-rating{
    float: none;
}
.woocommerce .star-rating{
    font-size: 1.25em;
    margin-bottom: 0.5em;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta{
    font-size: 1em;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__published-date{
    float: right;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text .description{
    font-family: var(--font-bold);
}