.wpb-offcanvas.wpb-offcanvas--filters {

    .wpb-woocommerce__sorting { padding: 0 2rem 2rem 2rem; }

    .wpb-woocommerce__filters { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));
        .filter-row { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: .6rem;
            &.filter-row--2 { --gc: 2; }
            &.filter-row--4 { --gc: 4; } 
        }
        
        [type="text"], [type="number"], [type="select"] { background-color: #fff; width: 100%; color: #3F4C58; border: none; }

        .expandable { max-height: 260px; overflow: hidden; }
        .btn.btn--expand {
            span { color: var(--clr-blue); font-size: 1.5rem; }
            &.expandable .reset { display: none; }
            &:not(.expandable) .expand { display: none; }
            .wpb-icon { background-color: var(--clr-blue); width: 1.4rem; height: 1.4rem; }
        } 

        .option {
            &.option--color { margin: 0; padding: 0;
                input { position: absolute; left: -9999rem; opacity: 0; 
                    &:checked + label { background-color: rgba(var(--clr-blue-rgb), .15); border-color: var(--clr-blue); 
                        .wpb-icon-wrapper { opacity: 1; } 
                    }
                }
                label { user-select: none; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; border: .1rem solid var(--clr-border); border-radius: .6rem; padding: 1rem 0 .8rem; transition: var(--ts-15) ease; text-align: center;
                    &::before { content: ''; display: block; width: 4rem; min-width: 4rem; height: 4rem; border-radius: 50%; background: var(--c); border: 0.1rem solid var(--clr-border); margin-bottom: .5rem;}
                    .wpb-icon-wrapper { width: 2.2rem; height: 2.2rem; background-color: var(--clr-blue); align-self: center; margin-left: auto; opacity: 0; pointer-events: none; transition: opacity var(--ts-15) ease; 
                        i { --color: #ffffff; }
                    }
                }
            }

            &.option--checkbox { display: flex; align-items: center; column-gap: .4rem;
                label { cursor: pointer; } 
            }

            &.option--icon-label { padding: 0; margin: 0; width: 100%;
                input { position: absolute; left: -9999rem; opacity: 0; 
                    &:checked + label { background-color: rgba(var(--clr-blue-rgb), .15); border-color: var(--clr-blue);
                        .wpb-icon-wrapper { opacity: 1; } 
                    }
                }
                label { user-select: none; position: relative; cursor: pointer; min-height: 4.3rem; line-height: 4.3rem; display: flex; font-weight: 500; border: .1rem solid var(--clr-border); border-radius: .5rem; padding: 0 1.2rem 0 0; transition: var(--ts-15) ease; 
                    .wpb-icon-wrapper { width: 2.2rem; height: 2.2rem; background-color: var(--clr-blue); align-self: center; margin-left: auto; opacity: 0; pointer-events: none; transition: opacity var(--ts-15) ease; 
                        i { color: #ffffff; }
                    }
                    &::before { content: ''; display: block; width: 5.2rem; min-height: 100%; border-radius: .5rem 0 0 .5rem; margin: -0.1rem 0.8rem -0.1rem -0.1rem; background-color: var(--clr-dark); }
                    &::after {width: 5.2rem; height: 1.8rem; position: absolute; left: 0; height: 100%; content: ''; display: block; background-color: #fff; -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: 24px; mask-size: 24px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; }
                } 

                &.is-green label::before { background-color: var(--clr-green); }
                &.is-red label::before { background-color: var(--clr-red); }
            }

            &.option--draagvermogen {
                label::after { -webkit-mask-size: 3.6rem; mask-size: 3.6rem; }
                .input-controller--0::after { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-1.svg'); }
                .input-controller--1::after { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-2.svg'); }
                .input-controller--2::after { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-3.svg'); }
                .input-controller--3::after { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-4.svg'); }
                .input-controller--4::after { --src: url('/app/themes/transoplast-core/public/icons/draagvermogen-5.svg'); }
            }

            &.option--voedselgeschiktheid {
                label::after {width: 5.2rem; height: 1.8rem; position: absolute; left: 0; height: 100%; content: ''; display: block; background-color: #fff; --src: url('/app/themes/transoplast-core/public/icons/voedselgeschiktheid.svg'); -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: 26px; mask-size: 26px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; }
                .is-126::before { background-color: var(--clr-red); }
                .is-127::before { background-color: var(--clr-green); }
            }
        }

        .outer-size { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; row-gap: 1rem; border-radius: .8rem .8rem 0 0;
            .default-dimensions-wrapper { grid-column: span 2;
                &::after { background-color: #3F4C58; }
            }
        }
        
        .form-check { display: block; 
            label {user-select: none;}
            &.form-check-inline label { font-size: 1.5rem; line-height: 1.2; }
        }

        select { background-color: #fff; width: 100%; font-size: 1.4rem; font-weight: 500; border: none; color: #3F4C58; 
            > option { background-color: #fff; } 
            &:focus { outline: none; }
        }

        .has-floating-label { position: relative; background-color: #fff; border: 1px solid var(--clr-border); cursor: pointer; 
            label { color: rgba(63, 76, 88, 0.65); }
            input[disabled] { color: rgba(63, 76, 88, 0.65); }
            &:has(input[disabled])::after { content: ''; width: 1rem; height: 1rem; position: absolute; top: 50%; right: 1.4rem; transform: translateY(-50%); --src: url('/app/themes/transoplast-core/public/icons/lock.svg'); -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inline-block; background-color: rgba(63, 76, 88, 0.65); }
        }
    }

    .wpb-accordion { padding-bottom: 2rem; padding: 2rem; border-radius: 0;
        .accordion__item {
            .accordion__header {
                .accordion__button { padding: 0;
                    span { font-size: 1.8rem; }
                    .wpb-icon-wrapper { --w: 2.3rem; --h: 2.3rem; }
                }
            }
            .accordion__collapse { 
                .accordion__body { padding: .8rem 0 0 0; }
            }
        }

        + .wpb-accordion { border-top: 1px solid var(--clr-border); }
    }

    .wpb-offcanvas__body { padding: 0; }

    .wpb-offcanvas__footer { border-top: 1px solid var(--clr-border);
        .btn { justify-content: center; }
    }
}

.wpb-product-archive { padding: 12px 0 32px; background-color: #fff; 

    .wpb-product-archive__header { margin-bottom: 1.6rem;
        img {display: none;}
    }

    .wpb-product-archive__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }

    .wpb-subcategories { display: none; padding-bottom: 2.2rem;
        .wpb-subcategories__ancestors { display: flex; flex-direction: column; row-gap: .8rem; margin-bottom: 1rem; 
            .wpb-ancestor { font-size: 1.4rem; line-height: 1; display: flex; align-items: center; color: var(--clr-headings); text-decoration: none;
                i { --color: var(--clr-headings); --width: 1.2rem; --height: 1.2rem; vertical-align: middle; }
                &:hover { text-decoration: underline; }
            }
            
        }
        .wpb-subcategories__current-category {font-size: 1.6rem; font-weight: 700; display: inline-block; color: var(--clr-headings); text-decoration: none; margin-bottom: .8rem;}
        .wpb-subcategories__terms {display: flex; flex-direction: column; row-gap: 1.2rem; border-left: 2px solid var(--clr-border); padding-left: 1.5rem; 
            a {text-decoration: none; font-size: 1.4rem; line-height: 1;
                &.current { font-weight: 700; color: var(--clr-blue); }
                &:hover { text-decoration: underline; }
            }
        }
    }

    .wpb-product-archive__toolbar { margin-bottom: 1.8rem; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1.6rem; 
        .wpb-result-count { font-weight: 500; color: var(--clr-headings); display: none; }
        .wpb-woocommerce-filter-toggle { display: flex; width: 100%; justify-content: center; }

        .form-select { --border-radius: .6rem; --padding: 0 1.4rem; border: 1px solid var(--clr-border); min-width: 16rem;}
        
        .form-wrapper { display: flex; align-items: center; column-gap: .8rem; grid-row: 3;  justify-content: flex-end; 
            span { font-size: 1.4rem; font-weight: 500; white-space: nowrap; }
        }

        .wpb-woocommerce__sorting { display: none; } 
    }

    @media(min-width: 768px) { 
        padding: 3.2rem 0 6.4rem;
    }

    @media (min-width: 992px) {
        .wpb-product-archive__header {
            h1 { margin-top: 0!important; }
            .woocommerce-breadcrumb { display: none; }
        }

        .wpb-product-archive__toolbar { justify-content: start; margin-bottom: 2.4rem;
            .form-wrapper {grid-row: 2;}
            .wpb-result-count {display: inline-block;}
            .wpb-woocommerce-filter-toggle { order: -1; width: auto; }
            .form-select { --padding: 0 1.6rem 0 1.4rem; }
        }

        &.wpb-product-archive--sidebar {
            .wpb-product-archive__body { gap: 2.8rem; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
        
            .wpb-offcanvas.wpb-offcanvas--filters { position: static; display: block!important; opacity: 1; z-index: inherit;
                .wpb-offcanvas__header, .wpb-offcanvas__footer, .wpb-woocommerce__sorting { display: none; }  
            
                .wpb-accordion { padding-inline: 0; }
            }
    
            .wpb-product-archive__toolbar {
                .wpb-woocommerce-filter-toggle { display: none; }
                .wpb-woocommerce__sorting { display: flex; margin-left: auto; } 
            }

            .wpb-subcategories { display: block; }
        }
    }
    
    @media (min-width: 1200px) {
        &.wpb-product-archive--sidebar {
            .wpb-product-archive__body { gap: 5.4rem; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); }
        }
    }
}

.wpb-product-archive__product-loop { container-name: productLoop; container-type: inline-size;
    .wpb-product-archive__products { list-style: none; --gc: 2; list-style: none; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); column-gap: .9rem; row-gap: 1.4rem; }
   
    @media (max-width: 575.98px) {
        margin-inline: -1.8rem;
        .wpb-product-archive__products { gap: 0;
            .wpb-card.wpb-card--product { border-radius: 0; border: none; border-top: .1rem solid var(--clr-border);
                &:nth-child(2n) { border-left: .1rem solid var(--clr-border); }
            }
        }
    }

    @container productLoop (width > 992px) { 
        .wpb-product-archive__products { --gc: 3; }
    }

    @container productLoop (width > 1200px) { 
        .wpb-product-archive__products { --gc: 3; }
    }

    @container productLoop (width > 1400px) { 
        .wpb-product-archive__products { --gc: 4; }
    }
}