.ecoflow-main-product{
    background-color: var(--light-gray-bg);
    padding: 16px 24px;

    .main-product-atc{
        span{
            margin-right: 8px;
        }
        &:not(:disabled):hover, &{
            span{
                margin-left: 0;
            }
        }
    }

    .desktop{
        display: none;
    }

    .main-product-container{
        background-color: var(--light-gray-bg);
        padding: 0;
    }
    .page-width{
        max-width: 1440px;
        padding: 0;
    }

    /* Product Media styles */
    .product-media-container{
        background: transparent;
        border: 0;
    }
    .product__media-wrapper{
        max-width: 616px;
    }
    slider-component{
        margin-bottom: 40px;
    }
    .product__media-list{
        overflow: hidden;

    }
    .product__media-list, .product__media, .thumbnail-list__item button.thumbnail{
        border-radius: 16px;
    }

    /* Below Product media */

    .product-perks--wrapper{
        max-width: 949px;
        margin: 0 auto;
    }
    .product-perks-flex{
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .perks-items{
        display: flex;
        gap: 6px;
        align-items: center;

        span{
            height: 24px;
        }
    }
    .perks-text{
        font-weight: 500;
        font-size: 16.5px;
        line-height: 145%;
        letter-spacing: 0%;
        color: var(--dark-paragraphs);
    }

    @media (min-width: 750px) {
        .footer-perks-flex{
            justify-content: space-between;
        }
        
    }

    /* Product Info styles */
    .product__info-wrapper{
        max-width: none;
    }
    .product-form__quantity{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 100%;
    }
    .product-title-container{

        &.mobile{
            margin-bottom: 53px;
        }
    } 
    .price{
        margin-bottom: 12px;
    }
    .product-additional-info{
        font-weight: 500;
        font-size: 16.5px;
        line-height: 145%;
        margin-bottom: 8px;

        color: var(--light-gray-text);
    }

    .product__description{
        font-weight: 500;
        font-size: 16.5px;
        line-height: 145%;
        color: var(--dark-paragraphs);

    }
    .quantity__label{
        font-weight: 700;
        font-size: 20px;
        line-height: 120%;
    }
    .quantity{
        max-width: 120px;
        border-radius: 32px;
        border: 1px solid #E0E0E0;

        &::before, &::after{
            content: none;
        }
    }
    .quantity__button{

        .svg-wrapper{
            width: 20px;
        }
    } 

    /*Variant Filters*/
    .variant-filters{
        margin-bottom: 32px;
        display: flex;
        gap: 6px;

        .filter-selection{
            position: relative;
            cursor: pointer;
            transition: .3s;
            border-color: var(--subtle-borders);
            min-width: auto;

            &:hover, &:has(input:checked){
                color: var(--light-headings);
                background-color: var(--eco-blue);
                border-color: var(--eco-blue);
            }

            &[data-filter-value="all"]::before{
                content: "All";
                position: unset;
                z-index: unset;
                color: inherit;
            }
            &[data-filter-value="international"]::before, &[data-filter-value="int"]::before{
                content: "International Ver.";
                position: unset;
                z-index: unset;
                color: inherit;
            }
            &[data-filter-value="europe"]::before, &[data-filter-value="eu"]::before{
                content: "Europe Ver.";
                position: unset;
                z-index: unset;
                color: inherit;
            }
        }

        input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }
    }

    /* New product variants Styling*/
    .variant-select-item{
        border: 1px solid var(--light-headings);
        background-color: var(--light-headings);
        padding: 12px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 6px;
        gap: 16px;
        cursor: pointer;
        margin-bottom: 12px;
        
        .image-container{
            border-radius: 6px;
        }
        /* On mouse-over, add a grey background color */
        &:hover input ~ .custom-radio-orb {
            background-color: #ccc;
        }

        &:has(input:checked), &:hover{
            border-color: var(--eco-blue);
        }
    }
    .product-form__input, .product-form__buttons{
        max-width: unset; 
    }

    .variant-title{
        font-weight: 700;
        font-size: 16.5px;
        line-height: 145%;
        letter-spacing: 0%;
    }

    .variant-price{
        font-weight: 500;
        font-size: 16.5px;
        line-height: 145%;
        letter-spacing: 0%;
        margin-left: auto;
    }
    /* For Custom Radio Button */
    .radio-input-container{
        
        /* Hide the browser's default radio button */
        input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }
        
        /* Create a custom radio button */
        .custom-radio-orb {
            display: block;
            top: 0;
            left: 0;
            height: 12px;
            width: 12px;
            background-color: #eee;
            border-radius: 50%;
        }
        
        /* When the radio button is checked, add a blue background */
        input:checked ~ .custom-radio-orb {
            background-color: var(--eco-blue);
        }
        
    }

    /*Product Form Buttons */
    .product-form__buttons{
        display: flex;
        flex-wrap: wrap;
        gap: 22px 12px;
    }
    .button--secondary{
        border-color: var(--subtle-borders);
    }

    @media (min-width: 750px) {
        padding: 80px 64px;
        .desktop{
            display: block;
        }
        .mobile{
            display: none;
        }

        .page-width{
            max-width: 1440px;
        }
        /* Product Media styles */
        .product__media-wrapper{
            max-width: 616px;
        }


        /* Product Info styles */
        .product__info-wrapper{
            max-width: none;
        }

        .product-title-container{
        } 


        /*Variant Filters*/
        .variant-filters{
            margin-bottom: 32px;
            display: flex;
            gap: 6px;

            .filter-selection{
                &[data-filter-value="all"]::before{
                    content: "All Versions";
                }
                &[data-filter-value="international"]::before, &[data-filter-value="int"]::before{
                    content: "International Versions";
                }
                &[data-filter-value="europe"]::before, &[data-filter-value="eu"]::before{
                    content: "Europe Versions";
                }
            }
        }

        /*Product Form Buttons */
        .product-form__buttons{
            .button{
                flex: 1;
            }
        }
    }
}


/* For Collpasible Description Section */
.product-collapsible-information{
    p{
        margin: 0;
        color: var(--dark-paragraphs);
    }
    .icon-caret{
        width: 16px;
        height: 10px;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
    }

    .page-width{
        max-width: 1440px;
    }

    .collapsible-content-wrapper{
        max-width: 902px;
        margin-left: 0;
    }
    .accordion{
        border-radius: 8px;
    }
    .collapsible-row-layout .accordion{
        summary, .accordion__content {
            padding: 24px;
            position: relative;

            .accordion__title:hover{
                text-decoration: none;
            }
            
        }
        summary[aria-expanded="true"]::before{
            content: "";
            position: absolute;
            width: calc(100% - 48px);
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            border-bottom: 1px solid var(--subtle-borders)
        }

        .accordion__content{
            padding-bottom: 32px;
        }
    }

    .accordion__title{
        font-weight: 500;
        font-size: 20px;
        line-height: 120%;
        text-transform: capitalize;
        color: var(--dark-headings);
    }

    .accordion-text-content{
        margin-bottom: 24px;
    }

    img{
        width: 100%;
    }
    .accordion-image-content{
        display: flex;
        gap: 24px;

    }
    .img-cont{
        width: 100%;
        
        img{
            border-radius: 12px;
        }

        &:not(:only-child):first-child{
            display: none;
        }
    }

    @media (min-width: 750px) {
        .img-cont{
            &:not(:only-child){
                width: 50%;
            }

            &:not(:only-child):first-child{
                display: block;
            }
        }
    
        
    }
}