/* These are all the styles to make the updated version of the site work */
html:has(.product-template-default) {
    scroll-padding: 90px;
}
/* ——————————————————————————————————————— */
/* Styles for the new sticky navigation    */
/* ——————————————————————————————————————— */
.product-template-default .pdp__tab {
    position       : fixed;
    padding-top    : 20px;
    padding-bottom : 30px;
    transform      : unset !important;
    transition     : transform 300ms ease;
    top            : 105px;
}

.product-template-default .pdp__tab::after {
    content    : "";
    position   : absolute;
    inset      : 0;
    background : linear-gradient(to bottom, rgba(0,0,0,0.7) , transparent);
    z-index    : -1;
    opacity    : 0;
    transition : opacity 300ms ease;
}

.product-template-default .pdp__tab:has(.black)::after {
    background : linear-gradient(to bottom, rgba(255,255,255,0.7) , transparent);
}


/* Move the tab bar at the top when the header is hidden */
.product-template-default:has(.headroom--unpinned) .pdp__tab {
    transform  : translateY(-105px) !important; 
}

.product-template-default:has(.headroom--unpinned) .pdp__tab::after,
.product-template-default:has(.headroom--not-top) .pdp__tab::after {
    opacity: 1;
}

/* Tablet Adjustment */
@media (width <= 1024px) {
    .product-template-default .pdp__tab {
        top : 75px;
    }
    .product-template-default:has(.headroom--unpinned) .pdp__tab {
        transform  : translateY(-75px) !important; 
    }
}


/* ——————————————————————————————————————— */
/* Styles for the new SPECS tab            */
/* ——————————————————————————————————————— */
#tab_specs {
    display          : block;
    padding-top      : 0;
}

.tab-content {
    transition : opacity 600ms ease;
    opacity    : 0;
}

.tab-content:first-child {
    opacity: 1;
}

@media (width <= 768px) {
    .pdp__tab .pdp-tab-main li:first-child {
        display: block;
        margin-right : 25px;
    }
    .pdp-tab-main {
        justify-content: flex-start;
    }
    .pdp__tab .pdp-tab-main li:last-child {
        margin-left : auto;
    }
}

/* ——————————————————————————————————————— */
/* Styles for the new variants accordions  */
/* ——————————————————————————————————————— */
.select_model {
    cursor : pointer;
}

.variant-name {
    font-family : "Helvetica_Now-Medium";
    font-size   : 2.4rem;
    color       : #131416;
    background  : transparent;
    border      : 0;
    box-shadow  : none;
    margin-left : 100px;
    position    : relative;
}

.variant-name::after {
    content           : "";
    transition        : .3s;
    position          : absolute;
    top               : 5px;
    right             : -35px;
    width             : 25px;
    height            : 25px;
    background-image  : url(img/icons/drop-down-black.svg);
    background-repeat : no-repeat;
    background-size   : 100%;
}

.model_specs_container[open] .variant-name::after {
    transform : rotate(180deg);
}

.product-template-default details summary::-webkit-details-marker{ display : none; }
.product-template-default details > summary { list-style : none; }

@media (width <= 768px) {
    .variant-name {
        margin-left : 0;
        margin-top : 10px;
    }
    .model_specs_container:last-child {
       padding-bottom : 36px;
    }
    #tab_specs {
        background-color : #F8F6F2;
    }
}

/* ——————————————————————————————————————— */
/* The new, post banner section            */
/* ——————————————————————————————————————— */
.pdp__after_banner {
    padding-top    : 100px;
    padding-bottom : 100px;
}

.pdp__after_banner .designer-name {
    display       : block;
    font-family   : "Helvetica_Now-Regular";
    font-size     : 2rem;
    line-height   : 2.8rem;
    color         : #666;
    margin-bottom : 15px;
}

.pdp__after_banner .link-border {
    display         : inline-block;
    border          : 2px solid #000;
    border-radius   : 29px;
    padding         : 8px 26px;
    font-family     : "Helvetica_Now-Medium";
    font-size       : 1.6rem;
    letter-spacing  : 1.6px;
    text-transform  : uppercase;
    color           : #000;
    text-align      : center;
    text-decoration : none;
    margin-top      : 100px;
    transition      : background 300ms, color 300ms;
}

.pdp__after_banner .link-border:hover {
    background : #000;
    color      : #fff;
}

@media (width <= 768px) {
    .pdp__after_banner .designer-name {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }
    .pdp__after_banner .link-border {
        font-size      : 1.2rem;
        letter-spacing : 1.2px;
        padding        : 8px 53px;
        margin-top     : 45px;
    }
}

/* ——————————————————————————————————————— */
/* Tweak the ON/OFF section                */
/* ——————————————————————————————————————— */
.product-template-default .wp-block-getwid-image-hotspot__tooltip-title {
    display: block;
    font-family: "Helvetica_Now-Medium";
    font-size: 1.2rem !important;
    line-height: 1.6rem !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 400;
}

/* The ON/OFF labels */
.product-template-default :is(.label-off,.label-on) {
    display: none !important;
}

.on_off_block .wp-block-getwid-image-hotspot__dot .wp-block-getwid-image-hotspot__dot-content {
    width       : 30px;
    height      : 30px;
    padding     : 7px;
    border      : 1px solid transparent;
    align-items : flex-start;
    transition  : all 300ms ease;
}

.on_off_block .wp-block-getwid-image-hotspot__dot .wp-block-getwid-image-hotspot__dot-content::after {
    width      : 14px;
    height     : 14px;
    transition : transform 300ms ease;
    position   : static;
}

.on_off_block .wp-block-getwid-image-hotspot__dot .wp-block-getwid-image-hotspot__dot-content.active {
    height        : 44px;
    border-radius : 9999px;
}

.on_off_block  .wp-block-getwid-image-hotspot__dot-content.off.active::after {
    transform : translateY(100%);
}