/*
    Block: Product Specifications
    Note: Selectors must start with .block-product-specifications
*/

@layer blocks {
    .block-product-specifications {
        padding-inline: 6.25rem;
    }
    .block-product-specifications .tables-wrapper {
        margin-top: 3.75rem;
        gap: 3.75rem;
    }

    .block-product-specifications .accordion .ac-trigger {
        background-color: rgb(from var(--c-blue) r g b / 0.1);
        padding: 1.25rem 1.875rem;
    }

    .block-product-specifications .accordion .ac-icon svg {
        width: 0.8125rem !important;
    }

    .block-product-specifications .ac-title {
        font-size: var(--fs-18-22);
    }

    .block-product-specifications .table {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .block-product-specifications .row {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        border-bottom: 1px solid rgb(from var(--c-blue) r g b / 0.15);
    }

    .block-product-specifications .table.layout-4 .row {
        grid-template-columns: repeat(4,1fr);
    }
    

    .block-product-specifications .table.layout-3 .row {
        grid-template-columns: 1fr 1fr 2fr;
    }

    .block-product-specifications .table.layout-4 .row.header{
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    .block-product-specifications .row:last-of-type {
        border-bottom: 0;
    }

    .block-product-specifications .row span {
        padding: 1.25rem 1.875rem;
        color: var(--c-body-grey);
        font-size: var(--fs-14-16);
    }

    .block-product-specifications .row.header {
        background-color: rgb(from var(--c-blue) r g b / 0.05);
        font-size: var(--fs-17-16);
        
        color: var(--c-blue);
        font-weight: 500;
    }

    .block-product-specifications:has(.layout-3) .ac-title {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 100%;
    }

    .block-product-specifications:has(.layout-3) .ac-title span:nth-child(2) {
        padding-left: 1.875rem;
    }

    .block-product-specifications .accordion .scrollbar {
        display: none;
    }

    @media screen and (width <= 1100px) {
        .block-product-specifications {
            padding-inline: 0;
        }
    }

    @media screen and (width <= 620px) {
        .block-product-specifications .accordion {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
    
            margin-inline: calc(-1 * var(--page-padding, 1rem));
            padding-left: var(--page-padding, 1rem);
    
            --scroll-width: 620px; /* 2 columns */
        }
    
        .block-product-specifications .accordion:has(.layout-3),
        .block-product-specifications .accordion:has(.layout-4) {
            --scroll-width: 1240px; /* 4 columns */
        }

        .block-product-specifications .ac-content {
            margin-right: var(--page-padding, 1rem);
        }
    
        .block-product-specifications .ac-content,
        .block-product-specifications .ac-content-inner {
            overflow-x: visible;
        }
    
        .block-product-specifications .ac-trigger,
        .block-product-specifications .table {
            width: var(--scroll-width);
            min-width: var(--scroll-width);
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            -ms-flex-negative: 0;
                flex-shrink: 0;
            /* min-width: 1240px; */
        }
    
        .block-product-specifications .row {
            grid-template-columns: repeat(2, 310px);
        }
    
        .block-product-specifications .table.layout-4 .row {
            grid-template-columns: repeat(4, 310px);
        }
    
        .block-product-specifications .table.layout-4 .row.header {
            grid-template-columns: repeat(4, 310px);
        }
    
        .block-product-specifications .table.layout-4 .row.header span {
            -ms-grid-column-span: 2;
            grid-column: span 2;
        }
    
        .block-product-specifications .table.layout-3 .row {
            grid-template-columns: repeat(4, 310px);
        }
    
        .block-product-specifications .row.header {
            display: -ms-grid;
            display: grid;
            grid-template-columns: 1fr;
        }
    
        .block-product-specifications .row.header span {
            grid-column: 1 / -1;
        }
        
        .block-product-specifications .ac-trigger,
        .block-product-specifications .ac-content,
        .block-product-specifications .ac-content-inner {
            overflow-x: visible;
            min-width: var(--scroll-width);
        }
        .block-product-specifications .accordion {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            position: relative;
            padding-bottom: 1rem;
        }
        
        .block-product-specifications .accordion::-webkit-scrollbar {
            display: none;
        }

        @supports (animation-timeline: scroll()) {
            .block-product-specifications .accordion {
                scroll-timeline-name: --accordion-scroll;
                scroll-timeline-axis: x;
            }
        
            .block-product-specifications .accordion::after {
                content: "";
                position: sticky;
                left: 50%;
                bottom: 0;
                -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                        transform: translateX(-50%);
                display: block;
                width: 5rem;
                height: 0.25rem;
                margin-top: 0.75rem;
                border-radius: 2px;
            
                background-color: rgb(from var(--c-blue) r g b / 0.15);
                background-image: linear-gradient(var(--c-blue), var(--c-blue));
                background-repeat: no-repeat;
                background-position: left center;
                background-size: 15% 100%;
            
                -webkit-animation: scroll-progress linear;
            
                        animation: scroll-progress linear;
                animation-timeline: --accordion-scroll;
            }
            
            @-webkit-keyframes scroll-progress {
                from { background-size: 15% 100%; }
                to   { background-size: 100% 100%; }
            }
            
            @keyframes scroll-progress {
                from { background-size: 15% 100%; }
                to   { background-size: 100% 100%; }
            }

            .block-product-specifications .accordion:has(.ac-state:not(:checked))::after {
                display: none;
            }
        }

        @supports not (animation-timeline: scroll()) {
            .block-product-specifications .accordion .scrollbar {
                position: sticky;
                left: 50%;
                bottom: 0;
                -webkit-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                        transform: translateX(-50%);
                display: block;
                width: 5rem;
                height: 0.25rem;
                margin-top: 0.75rem;
                border-radius: 2px;
            
                background-color: rgb(from var(--c-blue) r g b / 0.15);
                background-image: linear-gradient(var(--c-blue), var(--c-blue));
                background-repeat: no-repeat;
                background-position: left center;
                background-size: 15% 100%;
            }

            .block-product-specifications .accordion .ac-state:not(:checked) ~ .scrollbar {
                display: none;
            }
        }
    }
}