/** Shopify CDN: Minification failed

Line 2080:9 Unexpected "{"
Line 2080:10 Expected identifier but found "%"
Line 2082:8 Unexpected "{"
Line 2082:9 Expected identifier but found "%"
Line 2155:6 Unexpected "{"
Line 2155:7 Expected identifier but found "%"
Line 2157:8 Unexpected "{"
Line 2157:9 Expected identifier but found "%"

**/
/* ========================================
   Product New Template Styles
   Merged from: general-font.css, full-product-info.css,
   c-product-info.css, and inline styles from main-product--new.liquid
   Updated: 2026-05-25
   ======================================== */

/* ---------- Breadcrumbs: relocated into the info column, directly above the
   product title (industry-standard PDP pattern). Lives as the first child of
   .product__primary-right, OUTSIDE the sticky .product__meta so it scrolls away
   normally. Selector is scoped to the right column so it beats the base
   theme.css `.product .product__breadcrumbs` rule on specificity. ---------- */
.product .product__primary-right .product__breadcrumbs {
  /* parent .product__details already applies `0 var(--space-outer)` on mobile —
     reset here to avoid double horizontal indent and keep flush with the title */
  padding: 0;
  margin: var(--spacing-4) 0 0;
  overflow: hidden;
}
@media (min-width: 960px) {
  .product .product__primary-right .product__breadcrumbs {
    /* desktop: flush at the top of the info column; the gap down to the title
       comes from .product__meta's own padding-top */
    margin: 0;
  }
}

/* ---------- 1. Font Utilities (from general-font.css) ---------- */

:root{
    --base-width: 750;
    --base-font-family: var(--font-body, "Open Sans", sans-serif);
}
.font-32,.font-32 *{
    font-size: 32px;
    font-family: var(--base-font-family);
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
}
.font-28,.font-28 *{
    font-size: 28px;
    font-family: var(--base-font-family);
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
}
.font-22,.font-22 *{
    font-family: var(--base-font-family);
    font-size: 22px;
    font-style: normal;
    line-height: 1.3;
}
.font-20,.font-20 *{
    font-family: var(--base-font-family);
    font-size: 20px;
    font-style: normal;
    line-height: 1.3;
}
.font-18,.font-18 *{
    font-family: var(--base-font-family);
    font-size: 18px;
    font-style: normal;
    line-height: 1.4;
}
.font-16,.font-16 *{
    font-family: var(--base-font-family);
    font-size: 16px;
    font-style: normal;
    line-height: 1.4;
}
.font-14,.font-14 *{
    font-family: var(--base-font-family);
    font-size: 14px;
    font-style: normal;
    line-height: 1.5;
}
.font-12,.font-12 *{
    font-family: var(--base-font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}
.font-10,.font-10 *{
    font-family: var(--base-font-family);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

@media(max-width: 750px){
    .font-28,.font-28 *{
         font-size: calc(100vw * 38 / var(--base-width));
        line-height: calc(100vw * 38 / var(--base-width));
    }
    .font-22,.font-22 *{
        font-size: calc(100vw * 36 / var(--base-width));
        line-height: calc(100vw * 42 / var(--base-width));
    }
    .font-20,.font-20 *{
         font-size: calc(100vw * 28 / var(--base-width));
        line-height: calc(100vw * 32 / var(--base-width));
    }
    .font-18,.font-18 *{
       font-size: calc(100vw * 28 / var(--base-width));
        line-height: calc(100vw * 32 / var(--base-width));
    }
    .font-16,.font-16 *{
         font-size: calc(100vw * 24 / var(--base-width));
        line-height: calc(100vw * 28 / var(--base-width));
    }
    .font-14,.font-14 *{
        font-size: calc(100vw * 24 / var(--base-width));
        line-height: calc(100vw * 28 / var(--base-width));
    }
    .font-12,.font-12 *{
        font-size: calc(100vw * 20 / var(--base-width));
        line-height: calc(100vw * 26 / var(--base-width));
    }
    .font-10,.font-10 *{
         font-size: calc(100vw * 20 / var(--base-width));
        line-height: calc(100vw * 20 / var(--base-width));
    }
    .font-32,.font-32 *{
        font-size: calc(100vw * 38 / var(--base-width));
        line-height: calc(100vw * 38 / var(--base-width));

    }
}
/* ---------- 2. Product Base + FAQ + Fabric Guide (from full-product-info.css) ---------- */

@media(max-width: 1024px){
    :root{
        --base-width: 1024;
    }

}
@media(max-width: 750px){
    :root{
        --base-width: 750;
    }

}
.product .product-badge{
    display: flex;
    padding: 5.5px 8.5px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: fit-content;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    border-radius: 8px;
    background: #000;
    color: rgba(247, 238, 228, 1);
    border: 0px;
    margin-bottom: 14px;
}
.product .product__title{
    font-size: var(--font-size-heading-2-base);
    font-style: normal;
    font-weight: var(--font-heading-weight, 500);
    line-height: var(--line-height-heading);
    color: var(--color-text);
    margin-bottom: 0;
}
/* Rating, price, short-description, and installments styles
   are now shared via product-block-header.liquid inline <style>. */
.product__controls-group.product__controls-group-quantity{
    margin-top: var(--spacing-6);
}
.product__controls-group-quantity .product__item{
    margin-top: var(--spacing-3);
}
.product__block--product-header{
    margin-bottom: var(--spacing-5);
}
.product__primary-right .shopify-app-block{
    margin-bottom: 0px;
}
.product__label_price {
    color: var(--color-text);
    font-size: var(--font-size-body-100);
    font-style: normal;
    font-weight: var(--font-body-bold-weight, 600);
    line-height: var(--line-height-body);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.product__label_price  .gpo_index{
    position: static;
  
}
.product .quantity-input{
    border-radius: 8px;
    border: 1px solid #D3D6D9;
    width: 97px;
height: 35px;
flex-shrink: 0;
}
.product__label-wrapper-price{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--spacing-3);
}
.product .quantity-input__button{
   display: flex;
    align-items: center;
    justify-content: center;
}
.product .quantity-input input{
    flex: 1;
    font-size: var(--font-size-body-75);
    font-style: normal;
    font-weight: var(--font-body-weight, 400);
    line-height: var(--line-height-body);
    color: var(--color-text);
}


/* details list */
/* ─── Details FAQ accordion (PDP) ───────────────────────────────────────────
   Scoped tokens — single source of truth for the block. Override per-section
   by setting these on .details_faq if needed.                              */
.details_faq{
    --details-faq-divider: 1px solid var(--color-border);
    --details-faq-title-color: var(--color-text);
    --details-faq-body-color: var(--color-text);
    --details-faq-link-underline: var(--color-border);

    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}
.details_faq_heading{
    font-size: var(--font-size-body-150);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}
.details_faq_item{
    border-top: var(--details-faq-divider);
}
.details_faq .details_faq_item:last-child{
    border-bottom: var(--details-faq-divider);
}

/* Accordion trigger row */
.details_faq_item_top{
    padding: var(--spacing-4) 0;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.details_faq_item_top_title{
    font-size: var(--font-size-body-150);
    line-height: 1.4;
    font-weight: 500;
    color: var(--details-faq-title-color);
    letter-spacing: var(--font-body-base-letter-spacing);
}
/* Chevron icon rotates 180deg when accordion item is active */
.details_faq_item_top_icon svg{
    transition: transform var(--duration-fast, 0.2s) ease;
}
.details_faq_item.active .details_faq_item_top_icon svg{
    transform: rotate(180deg);
}

/* Accordion content panel */
.details_faq_item_content{
    padding-bottom: var(--spacing-6);
    display: none;
}

/* Body copy inside the panel */
.details_faq_item_content_desc1,
.details_faq_item_content_desc2{
    margin: 0;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-body-100);
    font-style: normal;
    font-weight: var(--font-body-weight);
    line-height: 1.5;
    color: var(--details-faq-body-color);
}
.details_faq_item_content_desc2{
    margin-top: var(--spacing-3);
}
.details_faq_item_content_desc1 .metafield-rich_text_field,
.details_faq_item_content_desc2 .metafield-rich_text_field{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}
.details_faq_item_content_desc1 strong,
.details_faq_item_content_desc2 strong{
    color: var(--details-faq-title-color);
}
.details_faq_item_content_desc1 ul,
.details_faq_item_content_desc2 ul{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin: 0;
    padding: 0;
    padding-inline-start: var(--spacing-4);
}

/* Inline links from rich-text metafields — subtle underline using text color
   (no browser-default blue). Variants below override text-decoration.       */
.details_faq .details_faq_item a{
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--details-faq-link-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s ease;
}
.details_faq .details_faq_item a:hover{
    text-decoration-color: currentColor;
}

/* Icon list row (custom.product_info_list.list items) */
.details_faq .ic_list_item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-2);
}
.details_faq .ic_list_item .ic_list_item_lt{
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.details_faq .ic_list_item_img{
    width: var(--spacing-3);
}
.ic_list_item_titlt2{
    font-size: var(--font-size-body-100);
    font-style: normal;
    line-height: 1.5;
    color: var(--details-faq-body-color);
}
.ic_list_item_titlt2 strong{
    color: var(--details-faq-title-color);
    font-weight: var(--font-body-bold-weight);
}
.ic_list_item_subtitle{
    color: var(--details-faq-title-color);
    font-size: var(--font-size-body-100);
    font-style: normal;
    font-weight: var(--font-body-bold-weight);
    line-height: 1.5;
}

/* ── Link variants (unified visual system) ──
   All three share base text color and hover affordance. Differences:
   - inline rich-text <a>   : underline (handled above)
   - .ic_list_item_true     : border-bottom CTA, full-row block
   - .content_link          : border-bottom CTA, inline w/ arrow         */
.details_faq .ic_list_item_true,
.details_faq_item_content_link{
    border-bottom: var(--details-faq-divider);
    color: var(--details-faq-title-color);
    text-decoration: none;
    transition: border-bottom-color 0.2s ease;
}
.details_faq .ic_list_item_true:hover,
.details_faq_item_content_link:hover{
    border-bottom-color: currentColor;
}

.details_faq .ic_list_item_true{
    padding-bottom: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    cursor: pointer;
}

.details_faq_item_content_link{
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-top: var(--spacing-4);
    padding-bottom: 1px;
    width: fit-content;
}
.details_faq_item_content_link span{
    color: var(--details-faq-title-color);
    font-size: var(--font-size-body-100);
    font-style: normal;
    font-weight: var(--font-body-weight);
    line-height: 1.5;
}


.mopio-fabic-guide{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(6px);
    display: none;
    z-index: 1000;
}

.mopio-fabic-guide .mopio-fabic-guide-container{
    width: 629px;
    background: #FFF;
    height: 100%;
    margin-left: auto;
  
   
    transform: translateX(100%);
    transition: transform var(--duration-normal) ease;
    max-height: 98vh;
    overflow-y: auto;
}
.mopio-fabic-guide.active .mopio-fabic-guide-container{
    transform: translateX(0%);
    transition: transform var(--duration-normal) ease;
}
.mopio-fabic-guide-container-top{
    margin-bottom: var(--spacing-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: #FFF;
    padding: 0 var(--spacing-6);
    padding-top: 30px;
}
.mopio-fabic-guide-container-top svg{
    cursor: pointer;
}
.mopio-fabic-guide-container-list{
    display: flex;
    gap: 14px;
    margin-bottom: var(--spacing-9);
}
.mopio-fabic-guide-container-title{

}
.mopio-fabic-guide .fabic-guide-item{
  
}
.mopio-fabic-guide-images{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 var(--spacing-6);
}
.mopio-fabic-guide-images-inner{
    width: 81px;
    height: 34px;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: all var(--duration-fast) ease;
    border-radius: 8px;
    cursor: pointer;
}

.mopio-fabic-guide-images-inner.active{
    border-radius: 8px;
    border: 1px solid var(--color-text);
    padding: var(--spacing-1);
}
.mopio-fabic-guide-images-inner-img{
     border-radius: 8px;
    width: 100%;
    height: 100%;
     object-fit: cover;
       transition: all var(--duration-fast) ease;
}
.mopio-fabic-guide-images-inner.active img{
   
  
   
}

.mopio-fabic-guide-container-content{
    display: flex;
    gap: var(--spacing-5);
    padding: 0 var(--spacing-6);
}
.mopio-fabic-guide-container-content{

}
.mopio-fabic-guide-images{
    margin-bottom: var(--spacing-9);
}

.fabic-guide-item-title{
    font-weight: 600;
    color: var(--color-text);
    margin: 0px;
    margin-bottom: 7px;
}
.fabic-guide-item-desc{
    color: rgba(70, 71, 74, 0.80);
    margin: 0px;
    margin-bottom: 23px;

}
.fabic-guide-item-subtitle{
    font-weight: 600;
    color: var(--color-text);
    margin: 0px;
    margin-bottom: 10px;
}
.fabic-guide-item-subdesc{
    margin-bottom: 10px;
    color: rgba(70, 71, 74, 0.80);
     margin: 0px;
    margin-bottom: 10px;
}
.fabic-guide-item-list{
   display: grid;
    grid-template-columns: 3fr 5fr;
}
.fabic-guide-item-list-cell{
    
}
.fabic-guide-item-list-cell-title{
    font-weight: 600;
    color: var(--color-text);
}
.fabic-guide-item-list-cell-desc{
    color: rgba(70, 71, 74, 0.80);
}
.fabic-guide_specification_label{
    display: flex;
    flex-direction: column;

}
.fabic-guide_specification_label p{
    height: 34px;
    display: flex;
    align-items: center;
    color: var(--color-text);
    font-weight: 600;
    border-top: 1px solid rgba(70, 71, 74, 0.30)
}
.fabic-guide_specification_value p{
    color: rgba(70, 71, 74, 0.80);
    height: 34px;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(70, 71, 74, 0.30);
}
.fabic-guide_specification_value p a{
   color: blue;
   margin-left: 5px;
}
.mopio-fabic-guide-container-content-cell{
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: var(--spacing-5);
    height: 118px;
    display: none;
}
.mopio-fabic-guide-container-content-cell.active{
    display: grid;
}
.fabic-guide-item-imgbox img{
    width: 100%;
    flex-shrink: 0;
    height: 118px;
}
.mopio-fabic-guide-container-content-cell.active .fabic-guide-item-imgbox img{
    display: block;
}
.fabic-guide-item-list-cell{
     display: grid;
    grid-template-columns: 3fr 5fr;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(70, 71, 74, 0.30);
    padding: 9px 0;
}
.fabic-guide-item-list-cell:last-child{
    border-bottom: 1px solid rgba(70, 71, 74, 0.30);
}
.variant-radio-input{
    display: none;
}
.variant-radio-image{
    width: 97px;
    height: 68px;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.configurations_index_item{
    position: relative;
}
.variant-radio-group{
    display: flex;
    gap: var(--spacing-3);
    padding-left: 0px;
}
.variant-radio-text{
    display: none;
}
.variant-radio-label{
    width: fit-content;
    cursor: pointer;
}
.variant-radio-group-option{
    border: 0px;
}
.variant-radio-input:checked +  .variant-radio-image{
    border: 1px solid var(--color-text);
}
.configurations_index_item{
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.configurations_index_item_index{
    position: static;

}
.option_item_name{
    font-weight: var(--font-body-bold-weight, 600);
    font-size: var(--font-size-body-100);
    color: var(--color-text);
}

@media(max-width: 1024px){
    .mopio-fabic-guide .mopio-fabic-guide-container{
        width: 70%;
    }
}
@media(max-width: 768px){
    .mopio-fabic-guide .mopio-fabic-guide-container{
        width: 100%;
        margin-left: 0px;
        padding-top: 0px;
    }
    .mopio-fabic-guide-container-content-cell{
        grid-template-columns: 1fr;
    }
    .mopio-fabic-guide-container-top{
    

    }
    .variant-radio-group{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: calc(100vw * 20 / var(--base-width));
        row-gap: calc(100vw * 16 / var(--base-width));
    }
    .variant-radio-label{
        width: 100%;
    }
    .variant-radio-image{
        width: 100%;
        height: calc(100vw * 112 / var(--base-width));
    }
    .fabic-guide-item-imgbox img{
        height: auto;
    }
    .mopio-fabic-guide-container-content-cell{
        height: auto;
    }
   
}

@media(max-width: 750px){
     .product .product__title{
            font-size: calc(100vw * 36 / var(--base-width));
            line-height: calc(100vw * 42 / var(--base-width));
        font-weight: var(--font-heading-weight, 600);
        color: var(--color-text);
    }
    .product .product__short-description *{
         font-size: calc(100vw * 20 / var(--base-width));
        line-height: calc(100vw * 26 / var(--base-width));
    }
    /* Price area + FAQ accordion typography use --font-size-body-* tokens which
       clamp responsively across 375px–1280px; no fluid override needed here. */
    .specifications-rt-list-item-title{
        font-size: calc(100vw * 20 / var(--base-width));
        line-height: calc(100vw * 24 / var(--base-width));
        font-weight: 600;
        color: var(--details-faq-title-color);
    }
    .specifications-rt-list-item-desc{
        font-size: calc(100vw * 20 / var(--base-width));
        line-height: calc(100vw * 24 / var(--base-width));
        color: var(--details-faq-title-color);
    }
    .product .quantity-input{
        /* width: calc(100vw * 142 / var(--base-width));
        height: calc(100vw * 57 / var(--base-width)); */
    }
    .color_fabic_child_list .gpo-swatches .gpo-swatch__inner{
        width: calc(100vw * 79 / var(--base-width));
        height: calc(100vw * 51 / var(--base-width));   

    }
    
    .gpo-group{
        margin-bottom:  calc(100vw * 48 / var(--base-width));   
    }
}
/* ---------- 3. GPO Swatches + Variant Picker + Sticky ATC (from c-product-info.css) ---------- */

.color_fabic_box {
     display: flex;
    margin-bottom: 0px;
    flex-wrap: wrap;
        column-gap: 9px;
}
.color_fabic_box  .gpo-ov-wrapper{
     width: 100%;
     gap: 0px;
     flex-shrink: 0;
     margin-top: var(--spacing-3);
     padding-top: 0;
     border-top: none;
     position: relative;
}
.color_fabic_box>label{
    padding-left: 0;
}
.color_fabic_box  .gpo-swatches{
    gap: 0px;
}
.color_fabic_box .gpo-swatches.buttons input:checked+label{
    background: rgba(70, 71, 74, 1) !important;
    color: #fff !important;
}
.color_fabic_box  .gpo-swatches input:checked+label{
    border-color: rgba(70, 71, 74, 1) !important;
   
}
.color_fabic_child_list{
    margin-left: 5px;
    padding-top: 25px !important;
    padding-bottom: var(--spacing-3) !important;
    border-radius: 0 0 8px 8px;
    border: 1px solid #E1E1E2;
    margin-bottom: 0px;
}
.gpo_index{
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: rgba(70, 71, 74, 1);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    color: #fff;
}
.color_fabic_index{
 
}
.color_fabic_box  .gpo-swatches.buttons input+label{
    border-bottom: 0px;
    border-left: 0px;
}

.color_fabic_box  .gpo-ov-item{

     border-radius: 8px 0 0 0;
}
.color_fabic_box .label-content{
    color: var(--color-text);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
}
.color_fabic_box  .gpo-selected-values{
     color: var(--color-text);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 0px;
}
.color_fabic_box  .gpo-swatches.buttons input+label:hover{
    color: var(--color-text) !important;
}
.color_fabic_box .gpo-swatches.buttons input:checked+label:hover{
    color: #fff !important;
}
.color_fabic_box  .gpo-tooltip{
    display: none !important;
}
.color_fabic_box .label-content::after{
    display: none;
}
.color_fabic_box .gpo-swatches.buttons input+label span{
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; 
}
.color_fabic_box .gpo-ov-item:first-child label{
    border-left: 1px solid #E1E1E2 !important;
}
 .fabic_guide_popup_btn_box, .color_fabic_index_box,.type_configurations_index,.bundle_configurations_index,.configurations_index_box{
    position: absolute;
}

.color_fabic_child_list   .gpo-tooltip{
    position: static;
    color: #333;
    opacity: 1;
    -webkit-transform: translate(0%, 0);
    width: fit-content;
    max-width: 100%;
    display: flex;
    visibility: visible;
    margin: 0 auto;
    background: transparent;
}

.color_fabic_child_list   .gpo-tooltip::before{
    display: none;
}
.color_fabic_child_list   .gpo-tooltip::after{
    display: none;
}
.color_fabic_child_list .swatch-image{

}
.color_fabic_child_list .gpo-swatches input+label{
    border: 0px !important;
}
.color_fabic_child_list .gpo-swatches input:checked+label {
    border-color: transparent;
}

.color_fabic_child_list .gpo-swatches input+label:hover{
    border: 0px !important;
}

.color_fabic_child_list .gpo-swatches{

    outline: 0px !important;
}
.color_fabic_child_list .gpo-swatches .gpo-swatch__inner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 34px;
    overflow: hidden;
     border: 1px solid transparent;
}
.color_fabic_child_list .gpo-tooltip__title{
    max-width: 67px;
   font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; 
}
.color_fabic_child_list .gpo-swatches input:checked+label .gpo-swatch__inner,.color_fabic_child_list .gpo-swatches input+label:hover .gpo-swatch__inner{
    padding: var(--spacing-1);
    box-sizing: border-box;
     border-radius: 8px;
    border-color: var(--color-text);
}
.color_fabic_child_list .gpo-tooltip__title span{

}
.color_fabic_child_list .gpo-swatch__inner .swatch-image{
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
}
.color_fabic_child_list  .gpo-selected-values{
    display: none !important;

}

.color-section-box{
    position: relative;
}
.color-section-box .fabic_guide_popup_btn{
    position: absolute;
    top: 57px;
    right: 0px;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    cursor: pointer;
}
.color-section-box .fabic_guide_popup_btn span{
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-text);
}


/* configurations-info settings */
.configurations-info{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0px !important;
    margin-bottom: 0px;
}
.configurations-footer-container{
    margin-bottom: 0px;
}
.configurations-info .gpo-ov-wrapper{
    display: grid;
     grid-template-columns: repeat(5,1fr);
     gap: var(--spacing-3);
      margin-top: var(--spacing-3);
    padding-top: 0;
    border-top: none;
    flex-shrink: 0;
    width: 100%;
    height: 170px;
    overflow: hidden;
    transition: height var(--duration-fast) ease;
}
.configurations-info .gpo-ov-wrapper.active{
    height: auto;
    transition: height var(--duration-fast) ease;
}
.configurations-info .gpo-swatches{
    gap: 0px;
}
.configurations-info .gpo-swatches input+label{
    width: 100%;
    display: flex;
}
.configurations-info .gpo-swatches input+label .swatch-image{
    width: 90% !important;
}
.configurations-info .gpo-selected-values{
    margin-left: 9px;
    margin-bottom: 0px;
}
.configurations-info .gpo-tooltip{
    display: none !important;

}
.configurations-info .gpo-swatches input:checked+label{
    border-color: var(--color-text);
}
 .configurations-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-3);
}
.configurations-footer .configurations-more{
    display: none;
    align-items: center;
    border-bottom: 1px solid var(--color-text);
    gap: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; 
    color: var(--color-text);
    cursor: pointer;
}
.configurations-footer .configurations-build-sofa{
     display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-text);
    gap: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; 
    color: var(--color-text);
    cursor: pointer;
}
.configurations-info>label{
    padding-left: 0;
    margin-bottom: 0;
}
.configurations-section-box{
    position: relative;
}
.configurations-section-box .configurations_index{

}


/*  */





.type-section-box{
    position: relative;
}

.gpo-group{
    margin-bottom: var(--spacing-7);
}
/* configurations-info settings */
.type-info{
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 0px !important;
    margin-bottom: 0px;
}
.type-info .gpo-ov-wrapper{
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
    padding-top: 0;
    border-top: none;
    flex-shrink: 0;
    width: 100%;
}

.type-info .gpo-swatches{
    gap: 0px;
}
.type-info .gpo-swatches input+label{
    width: 100%;
    display: flex;
    width: fit-content;
    gap: 9px;
    padding: var(--spacing-1) 11px;
    border-radius: 8px;
    height: 100%;
    align-items: center;
}
.type-info .gpo-tooltip{
    position: static !important;
    visibility: visible;
    opacity: 1;
    display: flex;
    background: transparent;
    color: var(--color-text);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    width: fit-content;
    height: auto;
    -webkit-transform: translate(0%, 0);
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;

}
.type-section-box .gpo-swatches input+label:hover .gpo-tooltip{
    display: flex;
    align-items: center;
    
}
.type-info .gpo-tooltip .gpo-tooltip__title{
    height: fit-content;
}
.type-info .gpo-tooltip::after{
    display: none;
}
.type-info .gpo-swatches input+label .swatch-image{
    width: 26px !important;
    height: 26px !important;
}
.type-info .gpo-selected-values{
    margin-left: 9px;
    margin-bottom: 0px;
}
.type-info .gpo-tooltip{
    position: static !important;
}
.type-info .gpo-swatches input:checked+label{
    border: 1px solid var(--color-text);
    width: fit-content;
}
.type-section-box .type-info .gpo-ov-item{
    width: fit-content;
    height: 35px;
}

 .configurations-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-3);
}
.configurations-footer .configurations-more{
    display: none;
    align-items: center;
    border-bottom: 1px solid var(--color-text);
    gap: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; 
    color: var(--color-text);
    cursor: pointer;
}
.configurations-footer .configurations-build-sofa{
     display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-text);
    gap: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; 
    color: var(--color-text);
    cursor: pointer;
}
.type-info>label{
    padding-left: 0;
    margin-bottom: 0;
}

.configurations-section-box .configurations_index{

}

.Bundle-section-box .gpo-swatches .gpo-swatch__inner{
    display: none !important;

}
.Bundle-section-box .gpo-swatches input+label{
    gap: 0px;
}
.product .gpo-app{
    margin-bottom: 0px
}


@media(max-width: 750px){
    .gpo-label, .gpo-label span.label-content, .gpo-label span.addOn, .gpo-label.required span.label-content::after{
         font-size: calc(100vw * 24 / var(--base-width)) !important;   
        line-height: calc(100vw * 24 / var(--base-width)) !important;
        font-weight: 600;
    }
      .gpo-label+.gpo-selected-values.has-value{
         font-size: calc(100vw * 24 / var(--base-width));   
        line-height: calc(100vw * 24 / var(--base-width));
        font-weight: 400;
      }
      .configurations-footer .configurations-more,.configurations-footer .configurations-build-sofa{

        font-size: calc(100vw * 24 / var(--base-width));   
        line-height: calc(100vw * 24 / var(--base-width));
        font-weight: 400;
      }
      .color_fabic_box .gpo-swatches.buttons input+label span{

         font-size: calc(100vw * 20 / var(--base-width));   
        line-height: calc(100vw * 20 / var(--base-width));
         font-weight: 400;
      }
      .color_fabic_child_list .gpo-tooltip__title{
            font-size: calc(100vw * 20 / var(--base-width));   
            line-height: calc(100vw * 20 / var(--base-width));
            font-weight: 400;
      }
      .color-section-box .fabic_guide_popup_btn span{
            font-size: calc(100vw * 20 / var(--base-width));   
            line-height: calc(100vw * 20 / var(--base-width));
            font-weight: 400;
      }
      .type-info .gpo-tooltip .gpo-tooltip__title{
            font-size: calc(100vw * 20 / var(--base-width));   
            line-height: calc(100vw * 20 / var(--base-width));
            font-weight: 400;
      }
      .product__label_price{
        font-size: calc(100vw * 24 / var(--base-width)) !important;   
        line-height: calc(100vw * 24 / var(--base-width)) !important;
          font-weight: 600;
      }
      .type-info .gpo-swatches input+label{
        padding: calc(100vw * 9 / var(--base-width)) calc(100vw * 24 / var(--base-width));
      }
}










/* 自定义后的 product info */
.product-option-inputs{
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}
.product__label-wrapper{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.product__label-wrapper--has-action{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.option-label-position-1{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.option-label-position-1:hover{
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--color-background, #fff), 0 0 0 3px rgba(70, 71, 74, 0.3);
}
.option-label-position-1 .product-option-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.product-option-inputs .product-option-input{
    display: none;
}
.product-option-inputs-1{
    gap: var(--spacing-3);
}
.product-option-inputs-1{
    padding-top: var(--spacing-4);
}
.product__option+.product__option{
    margin-top: var(--spacing-6) !important;

}
 input[type=radio]:checked + .option-label{
    border: 1.5px solid var(--color-text);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Circular color/fabric swatch: outer halo ring on select — keeps image at full size, no layout shift */
.productOption2 input[type=radio]:checked + .option-label-position-1{
    border: 1px solid transparent;
    padding: 0;
    box-shadow:
        0 0 0 2px var(--color-background, #fff),
        0 0 0 3.5px var(--color-text);
}
.option-label-position-2,.option-label-position-3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    border-radius: 8px;
    border: 1px solid var(--color-border, rgba(70, 71, 74, 0.30));
    padding: 5px 11px;
    min-width: 40px;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.option-label-position-2:hover,.option-label-position-3:hover {
    border-color: var(--color-text);
    background-color: rgba(70, 71, 74, 0.04);
}
.productOption .option-label-position-2{
    height: 35px;
     padding: 5px 11px;

}
/* Circular swatch: keep native size on select */
.productOption2 input[type=radio]:checked+.option-label-position-1{
    width: 35px;
    height: 35px;
}
.productOption2 label{
    border: 1px solid var(--color-border, rgba(70, 71, 74, 0.30));
}
.option-label-position-2 .option-label-text,.option-label-position-3 .option-label-text{
    color: var(--color-text);
}
.option-label-position-2  .product-option-image,.option-label-position-3  .product-option-image{
    width: 26px;
    height: 26px;
    aspect-ratio: 1/1;
    
}
.product-option-inputs-1 label.disabled,.product-option-inputs-2 label.disabled,.product-option-inputs-3 label.disabled,.configuration-option-link label{
    /* cursor: not-allowed; */
    /* opacity: 0.5; */
    position: relative;
    overflow: hidden;
}
.product-option-inputs-1 label,.product-option-inputs-2 label,.configuration-option-link label{
     border: 1px solid var(--color-border, rgba(70, 71, 74, 0.30));
}
.product-option-inputs label{
     --line-angle: 45deg;
      --line-length: 100%;
}
.product-option-inputs-1 label.disabled::before,.product-option-inputs-2 label.disabled::before,.product-option-inputs-3 label.disabled::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 0.3px;
    width: var(--line-length);
      transform: rotate(var(--line-angle));
      transform-origin: top left;
      pointer-events: none;
      background-color: rgba(70, 71, 74, 0.7);
}

.product-option-inputs-2 .option-label-position-no-image{
        padding: 10px 15px;
}
.product-option-group-2,.product-option-group-3{
    padding-top: var(--spacing-3);
}
.product-option-inputs .configuration-option-label{

}
.productOption1{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: var(--spacing-3);
    max-height: 170px;
    overflow: hidden;
    transition: max-height var(--duration-fast) ease;
}
.configuration-product-option-inputs{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-3);
    max-height: 168px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-top: var(--spacing-4);
}
.configuration-product-option-inputs:has(.option-badge){
    padding-top: calc(var(--spacing-4) + 10px);
    padding-right: 10px;
    max-height: 180px;
}
.productOption1.active,.configuration-product-option-inputs.active{
    max-height: 100%;
    transition: max-height var(--duration-fast) ease;
}
 .configuration-btm-box-more svg{
    transition: transform var(--duration-fast) ease;
    transform: rotate(0deg);
 }
 .configuration-btm-box-more.active svg{
    transform: rotate(180deg);
    transition: transform var(--duration-fast) ease;
}

.configuration-option-link{
    cursor: pointer;
}
.configuration-option-link label,.configuration-option-link{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 68px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.configuration-option-link:hover label{
    border-color: var(--color-text);
}
.configuration-option-link:hover{
    transform: translateY(-1px);
}
.configuration-product-option-inputs .configuration-option-link input[type=radio]:checked+.option-label{
    border: 1.5px solid var(--color-text);
}
/* Configuration option badge (Bestseller / Sale / New) */
/* Configuration option badge — MUI-style, rides on top-right corner */
.configuration-option-link:has(.option-badge){
    position: relative;
    overflow: visible;
}
.option-badge{
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 2;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
    background-color: var(--color-accent, #c0553a);
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.configuration-option-link img{
    max-width: 90%;
    max-height: 90%;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
}
.productOption1{
    padding-top: var(--spacing-4);
}

.configuration-btm-box{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--spacing-3);
}
.configuration-btm-box-build-you-sofa,.configuration-btm-box-more{
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding-bottom: 1.5px;
    border-bottom: 1px solid var(--color-border, rgba(70, 71, 74, 0.30));
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--font-size-body-75);
    transition: opacity 0.15s ease;
}
.configuration-btm-box-build-you-sofa:hover,.configuration-btm-box-more:hover{
    opacity: 0.7;
}
.configuration-btm-box-more{
    display: none;
}
.configuration-btm-box-more.configuration-more-active10,
.configuration-btm-box-more.configuration-more-active8{
    display: flex;
}
.configurations_index_item{
    margin-right: 0px;
}
.configurations_index_item_lt{
        display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.configurations_index_item_1,.configurations_index_item_2,.configurations_index_item_3{
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.configurations_index_item_rt .fabic_guide_popup_btn{
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    cursor: pointer;
}
.configurations_index_item_rt .fabic_guide_popup_btn span{
    color: var(--color-text);
    padding-bottom: 1.5px;
    border-bottom: 1px solid var(--color-border, rgba(70, 71, 74, 0.30));
    font-size: var(--font-size-body-75);
    transition: opacity 0.15s ease;
}
.configurations_index_item_rt .fabic_guide_popup_btn:hover{
    opacity: 0.7;
}
.configuration-product-option-inputs .configuration-option-link input[type=radio]:checked+.option-label{
    opacity: 1;
}
/* trust badges */
.trust-badges {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}
.trust-badges__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.trust-badges__icon {
    width: var(--tb-icon, 16px);
    height: var(--tb-icon, 16px);
    flex-shrink: 0;
    object-fit: contain;
}
.trust-badges__text {
    color: var(--color-text-secondary, var(--color-text));
    font-size: var(--tb-font, 12px);
    line-height: calc(var(--tb-icon, 16px) + 2px);
}
.trust-badges--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 0;
}
.trust-badges__sep {
    width: 3px;
    height: 3px;
    margin: 0 6px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.35;
    flex-shrink: 0;
}
@media (max-width: 719px) {
    .trust-badges--horizontal {
        gap: 4px 0;
    }
    .trust-badges__sep {
        margin: 0 4px;
    }
}
 .configuration-option-link label, .configuration-option-link{
    width: 100%;
 }

@media(max-width: 1024px){
    .product__media-container.above-mobile .product__media_box{
        
    }
      .configuration-option-link label, .configuration-option-link{
        width: 100%;
       height: 61.238px;
    }
    .configuration-product-option-inputs{

    }
    .product-option-inputs-1 label.disabled:before, .product-option-inputs-2 label.disabled:before, .product-option-inputs-3 label.disabled:before{
        /* width: 145%; */
        /* transform: translate(-50%, -50%) rotate(45deg); */

    }
    /* .product-option-inputs-3 label.disabled:before{
        transform: translate(-50%, -50%) rotate(45deg);
    } */
}
@media(max-width: 750px){
    .configuration-product-option-inputs{
        grid-template-columns: repeat(4, 1fr);
        /* 1 row visible: item height + padding-top + border room */
        max-height: calc(56px + var(--spacing-4) + 4px);
        gap: var(--spacing-2);
        padding-bottom: 0;
    }
    .configuration-product-option-inputs:has(.option-badge){
        max-height: calc(56px + var(--spacing-4) + 4px + 8px);
        padding-top: calc(var(--spacing-4) + 8px);
        padding-right: 8px;
    }
    .configuration-product-option-inputs.active{
        max-height: none;
        padding-bottom: var(--spacing-2);
    }
    .configuration-option-link label, .configuration-option-link{
        width: 100%;
        height: 56px;
    }
    .option-badge{
        top: -5px;
        right: -5px;
        padding: 1px 5px;
        font-size: 9px;
    }
    /* Mobile: show More for 5+ items (only 1 row of 4 visible) */
    .configuration-btm-box-more.configuration-more-active5,
    .configuration-btm-box-more.configuration-more-active8{
        display: flex;
    }
    .productOption1{
        grid-template-columns: repeat(4, 1fr);
        max-height: calc(56px + var(--spacing-4) + 4px);
        gap: var(--spacing-2);
        padding-bottom: 0;
    }
    .productOption1.active{
        max-height: none;
        padding-bottom: var(--spacing-2);
    }
}
/* ---------- 4. Inline Gallery + Layout Styles (from main-product--new.liquid) ---------- */

  .product__media_box{
    position: relative;
    height: fit-content;
   }
    .carousel-item-switch-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-background, #fff);
        color: var(--color-text);
        cursor: pointer;
        box-shadow: var(--box-shadow);
    }
    .carousel-item-switch-icon svg {
        width: 18px;
        height: 18px;
    }
    .carousel-item-switch-icon.swiper-button-disabled {
        opacity: 0;
        pointer-events: none;
    }
    .carousel-left-switch-icon {
        left: 12px;
    }
    .carousel-right-switch-icon {
        right: 12px;
    }

    /* Watch Video button styles moved to snippets/video-watch-btn.liquid */

    /* Video indicator on thumbnails */
    .video-indicator-thumb-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 24px;
        height: 24px;
        overflow: hidden;
        pointer-events: none;
        z-index: 2;
        line-height: 0;
    }
    .video-indicator-thumb-overlay svg {
        display: block;
        width: 24px;
        height: 24px;
    }
    .product_thumbnail_item:hover .video-indicator-thumb-overlay svg {
        transform: scale(1.1);
        transition: transform 250ms ease;
    }

    /* ---------- UGC thumbnail: square crop, inheriting size from .product_thumbnail_item ----------
       Design principle: DO NOT redefine width/height. The base `.product_thumbnail_item`
       rule scales width with the viewport on mobile via calc(100vw * 80 / var(--base-width)).
       Hardcoding 80px would override that and break mobile sizing.
       Instead we only enforce aspect-ratio + overflow so portrait UGC crops to whatever
       square dimension the base rule decides — desktop 80px, mobile vw-scaled, future
       breakpoints automatically. The compound selector boosts specificity to (0,2,0)
       so `aspect-ratio` cleanly wins over base's `height: auto`. */
    .product_thumbnail_item.product_thumbnail_item--ugc {
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
    .product_thumbnail_item.product_thumbnail_item--ugc > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* Platform icon overlay — centered in the thumbnail, mirroring the .video-indicator-thumb-overlay
       pattern (white rounded rect background, centered icon). This makes "this is UGC" instantly
       recognizable at thumbnail scale instead of a tiny corner badge.
       Scoped tightly so it can't collide with shop-the-feed section's own .ugc-platform-icon class. */
    .product_thumbnail_item--ugc .ugc-platform-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 4px;
        z-index: 2;
        pointer-events: none;
        line-height: 0;
    }
    .product_thumbnail_item--ugc .ugc-platform-overlay img {
        width: 18px !important;
        height: 18px !important;
        object-fit: contain !important;
        display: block;
    }
    .product_thumbnail_item--ugc:hover .ugc-platform-overlay {
        transform: translate(-50%, -50%) scale(1.08);
        transition: transform 200ms ease;
    }

    /* ---------- UGC main slide: square frame + cover crop for consistency ----------
       The product gallery slide is square (aspect-ratio: 1). UGC content (often portrait
       9:16) must crop to fill that frame so it visually matches product images and
       variant videos — anything else looks like a layout glitch. */
    .product__media-item--ugc {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: #f4f4f4;
    }
    .product__media-item--ugc .media,
    .product__media-item--ugc .media > a,
    .product__media-item--ugc .media > div {
        width: 100%;
        height: 100%;
        display: block;
    }
    .product__media-item--ugc .media img,
    .product__media-item--ugc .ugc-slide-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block;
    }

    /* ---------- UGC caption (bottom-left of main slide) ---------- */
    .product__media-item--ugc .ugc-caption {
        position: absolute;
        left: 12px;
        bottom: 12px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        background: rgba(0, 0, 0, 0.62);
        color: #fff;
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.2px;
        border-radius: 999px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .product__media-item--ugc .ugc-caption img {
        width: 14px !important;
        height: 14px !important;
        object-fit: contain !important;
        display: block;
        flex-shrink: 0;
    }
    .product__media-item--ugc .ugc-caption__handle {
        font-weight: 500;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .product__media-item--ugc .ugc-caption__time {
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
        margin-left: 4px;
    }
    @media (max-width: 750px) {
        .product__media-item--ugc .ugc-caption { left: 8px; bottom: 8px; font-size: 11px; padding: 5px 8px; }
        .product__media-item--ugc .ugc-caption img { width: 12px !important; height: 12px !important; }
        .product__media-item--ugc .ugc-caption__handle { max-width: 140px; }
        /* Scale icon overlay with viewport on mobile (matches base thumbnail vw-scaling).
           Stays centered via the desktop transform; only the box dimensions change. */
        .product_thumbnail_item--ugc .ugc-platform-overlay {
            width: calc(100vw * 28 / var(--base-width));
            height: calc(100vw * 28 / var(--base-width));
        }
        .product_thumbnail_item--ugc .ugc-platform-overlay img {
            width: calc(100vw * 18 / var(--base-width)) !important;
            height: calc(100vw * 18 / var(--base-width)) !important;
        }
    }
    /* Video Facade — poster + play button, replaces <video> until user interaction */
    .product-video-facade {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: #e0e0e0;
      cursor: pointer;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .product-video-facade img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .product-video-facade__play-wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, transform 0.2s;
      z-index: 2;
      pointer-events: none;
    }
    .product-video-facade:hover .product-video-facade__play-wrap {
      background: rgba(0, 0, 0, 0.75);
      transform: translate(-50%, -50%) scale(1.08);
    }
    /* Replaced video inside slide */
    .product_media_box .swiper-slide video.product-video-facade__video {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: #000;
    }

     .product__media_box .animation--lazy-load{
      background-color: #F2F2F2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
       .product__media_box .animation--lazy-load img{
        max-width: 80%;
      }
    .product__media_box   .product__media-item[data-aspect-ratio=square] .media{
        height: fit-content;
      }


    .product__primary-left{
      display: grid;
      grid-template-columns: 80px 1fr;
      position: sticky;
      top: calc(var(--height-header, 0px) + var(--announcement-height, 0px) + 20px);
      gap: var(--spacing-3);
      height: fit-content;
      min-width: 0;
      transition: top 0.3s ease;
    }
    .product_thumbnails--new{
      width: 80px;
      display: flex;
      flex-direction: column;
      max-height: 730px;
    }
    .product_thumbnails_viewport{
      display: flex;
      flex-direction: column;
      gap: var(--spacing-3);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: none;
      /* scroll-behavior handled in JS scrollBy({ behavior }) */
    }
    .product_thumbnails_viewport::-webkit-scrollbar{
      display: none;
    }
    .product_thumb_arrow{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 30px;
      background: var(--color-background);
      border: none;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      color: currentColor;
      opacity: 0.5;
      transition: opacity var(--duration-fast) ease;
    }
    .product_thumb_arrow:hover{
      opacity: 1;
    }
    .product_thumb_arrow[hidden]{
      display: none;
    }
    .product_thumb_arrow--up{
      box-shadow: 0 1px 0 rgba(0,0,0,0.09);
    }
    .product_thumb_arrow--down{
      box-shadow: 0 -1px 0 rgba(0,0,0,0.09);
    }
    .product_media_box{
      height: fit-content;
      background-color: #fff;
      min-width: 0;
      overflow: hidden;
      outline: none;
      border-radius: 12px;
    }
    .product_media_box_swiper{
        position: relative;
        outline: none;
        border: none;
    }
    /* Mask sub-pixel bleed from adjacent slides at the right edge.
       Swiper rounds slide widths to integers (e.g. 663px) while the container
       can be fractional (e.g. 663.26px), leaving a <1px sliver of the next
       slide visible inside .product_media_box_swiper's overflow:hidden box. */
    .product_media_box_swiper::after{
        content: '';
        position: absolute;
        inset-block: 0;
        right: 0;
        width: 1px;
        background: var(--color-background, #fff);
        pointer-events: none;
        z-index: 1;
    }
    .product_thumbnail_item{
      width: 80px;
      height: auto;
      position: relative;
      cursor: pointer;
      flex-shrink: 0;
      border-radius: 8px;
      overflow: hidden;
    }
    .product_thumbnail_item::after{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      border: 1px solid transparent;
      border-radius: 8px;
      transition: border-color var(--duration-fast) ease;
    }
    .product_thumbnail_item video,.product_thumbnail_item img{
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .product_thumbnail_item > .image {
      width: 100%;
      aspect-ratio: 1 / 1;
    }
    .product_thumbnail_item.active::after{
      border-color: currentColor;
    }
    .product_media_box .swiper-slide{
      display:flex;
      align-items: center;
      justify-content: center;
      height: auto;
    }
    .product_media_box .product__media-item,
    .product_media_box .media,
    .product_media_box .image {
      width: 100%;
    }
    .product_media_box .swiper-slide img {
      display: block;
      object-fit: contain !important;
      object-position: center !important;
      width: 100%;
      height: auto;
    }
    .product_media_box video,.product_media_box img{
      width: 100%;
    }
    .product_media_box video{
      height:  100%;
      object-fit: cover;
    }
.carousel-item-switch-icon{
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background, #fff);
  color: var(--color-text);
  box-shadow: var(--box-shadow);
}
.carousel-item-switch-icon svg{
  width: 18px;
  height: 18px;
}
.carousel-item-switch-icon.swiper-button-disabled{
  opacity: 0;
  pointer-events: none;
}
.carousel-left-switch-icon{
  left: 10px;
}
.carousel-right-switch-icon{
  right: 10px;
}


      @media(max-width: 1024px){
        .product_thumbnails_mobile-item{
          width: 80px;
          height: 80px;
          flex-shrink: 0;
          aspect-ratio: 1/1;
          border: 1px solid #B8B3B1;
          opacity: 0.5;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8px;
          overflow: hidden;
        }
         .product_thumbnails_mobile-item img{
           max-width: 100%;
           max-height: 100%;
           object-fit: cover;
           object-position: center;
         
         }
         .product_thumbnails_mobile-item.active{
           opacity: 1;
           border: 1px solid #000000;
      }
         {% comment %} .product-thumbnails,.product__media_box{
        display: none;
      } {% endcomment %} 
  
      .product_thumbnails_mobile{
        display: flex;
        gap: var(--spacing-3);
        overflow: hidden;
        overflow-x: auto;
        margin-top: 18px;

      }
      .below-mobile .product__media .media .animation--lazy-load{
          background-color: #F2F2F2;
      }
        .product__primary-left{
          display: flex;
          flex-direction: column;
          /* override the desktop sticky declared at top level */
          position: static;
          top: auto;
          transition: none;
        }
        .product__primary-left .product_thumbnails--new{
          order: 2;
          width: 100%;
          max-height: none;
          flex-direction: row;
        }
        .product__primary-left .product_thumbnails--new .product_thumbnails_viewport{
          flex-direction: row;
          flex: 1;
          min-width: 0;
          gap: 14px;
          overflow-x: auto;
          overflow-y: hidden;
          max-height: none;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }
        .product__primary-left .product_thumbnails--new .product_thumbnails_viewport::-webkit-scrollbar{
          display: none;
        }
      .product__primary-left  .product_media_box{
          order: 1;
          width: 100%;
          aspect-ratio: 1 / 1;
          overflow: hidden;
        }
      .product__primary-left .product_media_box_swiper{
          height: 100%;
        }
      .product__primary-left .product_media_box .product__media-item,
      .product__primary-left .product_media_box .media,
      .product__primary-left .product_media_box .image {
          height: 100%;
        }
      .product__primary-left .product_media_box .swiper-slide img {
          height: 100%;
        }
      .product__primary-left .product_thumbnails--new .product_thumb_arrow{
          display: none !important;
        }
      .product_thumbnail_item{
          width: calc(100vw * 80 / var(--base-width));
          height: calc(100vw * 80 / var(--base-width));
          flex-shrink: 0;
        }
      .product_thumbnail_item img{
          height: 100%;
        }
      .product__primary-left .product_media_box .swiper-slide{
        height: 100%;
        overflow: hidden;
      }
      {% comment %} .product_media_box img{
        aspect-ratio: 1 / 1;
      } {% endcomment %}


    }
    
     @media(max-width: 750px){
       .product_thumbnails_mobile-item{
          width: calc(100vw * 80 / var(--base-width));
          height: calc(100vw * 80 / var(--base-width));
       }
     
       .product_thumbnails_mobile{
          gap: calc(100vw * 12 / var(--base-width));
        }
        .product__meta{
          padding-top: calc(100vw * 44 / var(--base-width));
        }
        .product_thumbnail_item{
          width: calc(100vw * 80 / var(--base-width));
          height: calc(100vw * 80 / var(--base-width));
        }
      }
  
  .sb_ETA{
    display: none !important;
  }

  .product-policy-notice{
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #C31818;
  }
  .product-policy-notice p{
    margin: 0;
  }
  .product-policy-notice p + p{
    margin-top: var(--spacing-2);
  }
  .product-policy-notice a{
    color: inherit;
    text-decoration: underline;
    transition: opacity 0.2s ease;
  }
  .product-policy-notice a:hover{
    opacity: 0.7;
  }
  .product-policy-notice ul{
    margin: 0;
    padding-left: var(--spacing-4);
  }
  .product-policy-notice li + li{
    margin-top: var(--spacing-1);
  }

  @media(max-width: 750px){
    .product-policy-notice{
      margin-top: calc(100vw * 14 / var(--base-width));
      font-size: calc(100vw * 20 / var(--base-width));
      line-height: calc(100vw * 26 / var(--base-width));
    }

    .product__mobile-ugc{
      width: 100%;
      margin-top: calc(100vw * 20 / var(--base-width));
      padding-top: calc(100vw * 20 / var(--base-width)) !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important;
      padding-left: 0 !important;
      border-top: 1px solid rgba(70, 71, 74, 0.15);
    }

    .product__mobile-ugc .shop-the-feed-top{
      align-items: flex-start;
      gap: var(--spacing-3);
      margin-bottom: calc(100vw * 14 / var(--base-width));
    }

    .product__mobile-ugc .shop-the-feed-top h2{
      font-size: calc(100vw * 22 / var(--base-width));
      line-height: 1.1;
    }

    .product__mobile-ugc .shop-the-feed-top-icon{
      gap: var(--spacing-2);
      flex-shrink: 0;
    }

    .product__mobile-ugc .shop-the-feed-slide__media{
      margin-bottom: calc(100vw * 10 / var(--base-width));
      border-radius: 10px;
    }

    .product__mobile-ugc .shop-the-feed-info{
      gap: var(--spacing-2);
      align-items: flex-start;
    }

    .product__mobile-ugc .shop-the-feed-info-name{
      font-size: calc(100vw * 16 / var(--base-width));
      line-height: 1.2;
    }

    .product__mobile-ugc .shop-the-feed-info-time{
      white-space: nowrap;
      font-size: calc(100vw * 11 / var(--base-width));
    }

    .details_faq_item--specifications{
      display: block;
    }

    .details_faq_item--specifications .details_faq_item_content{
      padding-top: calc(100vw * 6 / var(--base-width));
    }

    .details_faq_item--specifications .details_faq_item_content_specifications{
      display: grid;
      gap: calc(100vw * 18 / var(--base-width));
    }

    .details_faq_item--specifications .details_faq_item_content_specifications_media picture,
    .details_faq_item--specifications .details_faq_item_content_specifications_media img{
      display: block;
      width: 100%;
    }

    .details_faq_item--specifications .details_faq_item_content_specifications_media .lightbox-image{
      display: block;
      cursor: zoom-in;
    }

    .details_faq_item--specifications .details_faq_item_content_specifications_media img{
      border-radius: 12px;
      background: var(--color-input);
    }

    .details_faq_item--specifications .specifications-rt-list{
      display: grid;
    }

    .details_faq_item--specifications .specifications-rt-list-item{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--spacing-4);
      padding-top: calc(100vw * 14 / var(--base-width));
      padding-bottom: calc(100vw * 14 / var(--base-width));
      border-bottom: var(--details-faq-divider);
      color: var(--details-faq-title-color);
    }

    .details_faq_item--specifications .specifications-rt-list-item:first-child{
      padding-top: 0;
    }

    .details_faq_item--specifications .specifications-rt-list-item h3,
    .details_faq_item--specifications .specifications-rt-list-item p,
    .details_faq_item--specifications .specifications-rt-list-item div{
      font-size: calc(100vw * 20 / var(--base-width));
      line-height: calc(100vw * 24 / var(--base-width));
    }

    .details_faq_item--specifications .specifications-rt-list-item h3{
      font-weight: 600;
    }

    .details_faq_item--specifications .specifications-rt-list-item div:last-child{
      max-width: 58%;
      text-align: right;
    }
  }

  @media(min-width: 751px){
    /* .details_faq_item_top_title — desktop sizing handled by root rule. */
    .details_faq_item--specifications{
      display: block;
    }
    .details_faq_item--specifications .details_faq_item_content_specifications{
      display: grid;
      gap: 18px;
    }
    .details_faq_item--specifications .details_faq_item_content_specifications_media picture,
    .details_faq_item--specifications .details_faq_item_content_specifications_media img{
      display: block;
      width: 100%;
      border-radius: 12px;
      background: var(--color-input);
    }
    .details_faq_item--specifications .specifications-rt-list{
      display: grid;
    }
    .details_faq_item--specifications .specifications-rt-list-item{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--spacing-4);
      padding-top: 14px;
      padding-bottom: 14px;
      border-bottom: var(--details-faq-divider);
      color: var(--details-faq-title-color);
    }
    .details_faq_item--specifications .specifications-rt-list-item:first-child{
      padding-top: 0;
    }
    .details_faq_item--specifications .specifications-rt-list-item h3,
    .details_faq_item--specifications .specifications-rt-list-item p,
    .details_faq_item--specifications .specifications-rt-list-item div{
      font-size: 14px;
      line-height: 18px;
    }
    .details_faq_item--specifications .specifications-rt-list-item h3{
      font-weight: 600;
    }
    .details_faq_item--specifications .specifications-rt-list-item div:last-child{
      max-width: 58%;
      text-align: right;
    }
    .details_faq_item--specifications .specifications-rt-list-item-title,
    .details_faq_item--specifications .specifications-rt-list-item-desc{
      font-size: 14px;
      line-height: 18px;
      color: var(--details-faq-title-color);
    }
    .details_faq_item--specifications .specifications-rt-list-item-title{
      font-weight: 600;
    }
    .details_faq_item--specifications .specifications-rt-list-item-desc{
      max-width: 58%;
      text-align: right;
    }
    .product__desktop-ugc{
      width: 100%;
      margin-top: var(--spacing-6);
      padding-top: var(--spacing-6) !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important;
      padding-left: 0 !important;
      border-top: 1px solid rgba(70, 71, 74, 0.15);
    }
    .product__desktop-ugc .shop-the-feed-top{
      align-items: center;
      gap: 10px;
      margin-bottom: var(--spacing-3);
    }
    .product__desktop-ugc .shop-the-feed-top h2.font-32{
      font-size: 15px;
      line-height: 1.3;
      font-weight: 400;
      color: rgba(70, 71, 74, 0.7);
    }
    .product__desktop-ugc .shop-the-feed-top-icon{
      gap: var(--spacing-2);
    }
    .product__desktop-ugc .shop-the-feed-top-icon img{
      max-width: 14px;
      height: auto;
    }
    .product__desktop-ugc .shop-the-feed-slide__media{
      margin-bottom: var(--spacing-2);
      border-radius: 8px;
    }
    .product__desktop-ugc .shop-the-feed-info{
      gap: 2px;
      align-items: flex-start;
    }
    .product__desktop-ugc .shop-the-feed-info-name{
      font-size: 12px;
      line-height: 1.3;
    }
    .product__desktop-ugc .shop-the-feed-info-time{
      white-space: nowrap;
      font-size: 11px;
      color: rgba(70, 71, 74, 0.5);
    }
    .product__desktop-ugc .swiper-pagination{
      margin-top: var(--spacing-3);
    }
  }

/* ==========================================================================
   New Template Overrides (from theme-new.css diff)
   These override theme.css defaults for the new product template design.
   ========================================================================== */

/* ---------- Gallery Layout ---------- */

/* Product container needs stacking context for gallery sticky behavior */
.product {
  position: relative;
  z-index: 10;
}

/* Match Stiletto grid ratios — minmax(0, *) prevents internal grid overflow */
@media (min-width: 960px) {
  .product[data-gallery-size="small"] .product__primary {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: 3.3vw;
  }
  .product[data-gallery-size="medium"] .product__primary {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: 3.3vw;
  }
  .product[data-gallery-size="large"] .product__primary {
    grid-template-columns: minmax(0, 64fr) minmax(0, 36fr);
    gap: 3.3vw;
  }
  .product[data-gallery-size="xlarge"] .product__primary {
    grid-template-columns: minmax(0, 72fr) minmax(0, 28fr);
    gap: 3.3vw;
  }
}

/* Allow hidden media items to show (controlled by JS) */
.product__media-item.hidden {
  display: block;
}

/* Video-native support for aspect ratio containers */
.product__media-item[data-aspect-ratio="square"] .media[data-media-type="video-native"],
.product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="video-native"],
.product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="video-native"] {
  width: 100%;
  height: 100%;
}
.product__media-item[data-aspect-ratio="square"] .media[data-media-type="video-native"] video,
.product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="video-native"] video,
.product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="video-native"] video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Thumbnails ---------- */

/* Inactive thumbnails are dimmed */
.product-thumbnails__item-link {
  opacity: 0.5;
}
.product-thumbnails__item-link.active {
  opacity: 1;
}

/* ==========================================================================
   Desktop: Scrollable Grid Gallery (Koala-style)
   Hero carousel (with arrows) + 2-column image grid below.
   Product details column becomes sticky via align-self (page-level scroll).
   Mobile (<= 1024px) is untouched — keeps carousel + horizontal thumbnails.
   ========================================================================== */

/* Grid container — hidden on mobile, populated by JS on desktop */
.product-gallery-grid {
  display: none;
}

/* "View Gallery" button — hidden by default; shown inside the sticky block on desktop (>=1025) */
.gallery-view-all {
  display: none;
}

@media (min-width: 1025px) {
  /* ---- Hide thumbnail sidebar ---- */
  .product_thumbnails--new {
    display: none !important;
  }

  /* ---- Gallery column: the WHOLE left block is sticky, with its OWN internal
     scroll. Hero carousel on top + the 2-col grid below, pinned as one unit;
     when the cursor is over this block, scrolling browses the gallery images
     independently (the right info column scrolls with the page). Capped to ~1
     viewport; releases at the bottom of the info column. ---- */
  .product__primary-left {
    display: block;
    position: sticky;
    top: calc(var(--height-header, 0px) + var(--announcement-height, 0px) + 20px);
    align-self: start;
    max-height: calc(100vh - var(--height-header, 0px) - var(--announcement-height, 0px) - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    /* No overscroll-behavior: when the gallery reaches its top/bottom, scrolling
       chains to the page so the whole page keeps scrolling naturally. */
    scrollbar-width: none;          /* hide scrollbar (Firefox) */
    transition: none;
  }
  .product__primary-left::-webkit-scrollbar {
    display: none;                  /* hide scrollbar (WebKit) */
  }

  /* ---- Product details: now the SCROLLING column (no longer sticky) ---- */
  .product__primary-right {
    position: static;
  }

  /* ---- 2-col image grid: visible below the hero, scrolls inside the pinned
     block (independent of the page scroll) ---- */
  .product-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
  }

  /* ---- "View Gallery" pill — sticky to the visible bottom of the scrolling
     gallery. position:sticky inside the overflow:auto scroll container keeps it
     pinned at the viewport bottom while gallery images scroll under it. ---- */
  .product__primary-left .gallery-view-all {
    display: flex;
    align-items: center;
    gap: 7px;
    position: sticky;
    bottom: 16px;
    width: fit-content;
    margin-inline: auto;
    z-index: 3;
    padding: 10px 22px;
    background: #fff;
    color: var(--color-text, #1a1a1a);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--rounded-pill, 999px);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    transition: background var(--duration-fast, 0.15s) ease;
  }
  .product__primary-left .gallery-view-all:hover {
    background: var(--color-background, #f4f4f4);
  }

  /* Odd last item spans full width */
  .product-gallery-grid__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .product-gallery-grid__item {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
  }

  .product-gallery-grid__item .product__media-item,
  .product-gallery-grid__item .media {
    width: 100%;
  }

  .product-gallery-grid__item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
  }

  @media (hover: hover) {
    .product-gallery-grid__item:hover img {
      transform: scale(1.02);
    }
  }

  .product-gallery-grid__item video {
    width: 100%;
    height: auto;
    display: block;
  }
}