.wpb-product-group-topbar { padding: 3.2rem 0 1rem 0; }  

/*** ---------- ProductSubgroups ---------- ***/
.wpb-block--productsubgroups { --gc: 2;
    .wpb-block__header {
        .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }   
    }
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 1.4rem; grid-auto-flow: dense; }

    .card-container--hygiene-scan { grid-column: 1 / -1; margin-block: .8rem; }
    
    @media (min-width: 992px) { 
        --gc: 3;
        .wpb-block__header .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .wpb-block__body .container { gap: 2rem; }
    }

    @media (min-width: 1200px) { 
        --gc: 3;
        .wpb-block__header .container { grid-template-columns: minmax(0, 1fr) minmax(0, 44rem); column-gap: 4.8rem; }
    }

    @media (min-width: 1400px) { 
        --gc: 4;
        .wpb-block__header .container { column-gap: 12rem; }
    }

    @media (min-width: 1600px) { 
        .wpb-block__header .container { column-gap: 36rem; }
    }
}

.wpb-block--productsubgroups-featured { 
    .wpb-block__header {
        .container { display: flex; align-items: end; justify-content: space-between; row-gap: 1em; column-gap: 2.4rem; flex-wrap: wrap; }
        .wpb-text { max-width: clamp(40rem, 38vw, 52rem); }
    }
    .wpb-block__body { --gc: 1; --gap: 1rem;
        .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
    }

    @media (min-width: 576px) { 
        .wpb-block__body { --gc: 2; 
            .card-container:first-child { grid-column: span 2; }
        }
    }
    @media (min-width: 768px) { 
        .wpb-block__body { --gc: 3; 
            .card-container:first-child { grid-column: span 1; }
        }
    }
}

.wpb-block--productsubgroups-slider { --swiper-navigation-size: 4rem; --swiper-scrollbar-size: .2rem; --swiper-scrollbar-bg-color: var(--clr-secondary); --swiper-scrollbar-drag-bg-color: var(--clr-primary); overflow: hidden;

    .wpb-swiper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem;
        .wpb-text { position: relative; z-index: 2; }
        .swiper-buttons { display: flex; align-items: center; 
            .swiper-button-prev, .swiper-button-next { --p: 0; margin-top: 0; border: none!important; display: inline-flex; justify-content: center; position: static; min-height: var(--swiper-navigation-size); 
                &.swiper-button-disabled { opacity: 1; --bg-clr: var(--clr-secondary); --clr: var(--clr-text); } 
            }
            .swiper-button-prev { border-top-right-radius: 0; border-bottom-right-radius: 0; }
            .swiper-button-next { border-top-left-radius: 0; border-bottom-left-radius: 0; }
            .swiper-scrollbar { position: static; margin-left: 2.4rem; max-width: 12rem; }
        } 
        .swiper { width: 100%; overflow: inherit;
            .swiper-wrapper { display: flex; 
                .swiper-slide { flex: 0 0 90%; height: auto; margin-right: 2rem; }
            }
            .card-container { height: 100%; }
        }
    }

    @media (min-width: 576px) {
        .wpb-swiper .swiper .swiper-wrapper { 
            .swiper-slide { flex: 0 0 calc(50% - 1rem); }
        }
    }

    @media (min-width: 992px) {
        .wpb-swiper { --gap: 4.8rem; --pad: 18px; --grid-width: calc(var(--wpb-width) - (var(--pad) * 2)); --col1-width: calc((var(--grid-width) - var(--gap)) * 0.33); grid-template-columns: var(--col1-width) minmax(0, 1fr); gap: var(--gap); align-items: center;
            &::after { 
                --gradient-offset: calc(
                    (100vw - var(--wpb-width)) / 2 
                    + var(--pad) 
                    + var(--col1-width)
                    + var(--gap)
                );                       
                
                --gradient-clr: #FFFF; content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 100vw; height: calc(100% + 2px); transform: translate(-50%, -50%); background: linear-gradient(to right, var(--gradient-clr) var(--gradient-offset), transparent var(--gradient-offset)); pointer-events: none; z-index: 1; 
            }

            .wpb-block__body:has(&){ position: relative; 
                .wpb-bg-clr--transparent & { --block-bg: #FFFF; }
                &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(10rem, 16vw, 24rem); background: linear-gradient(to right, transparent, var(--block-bg)); z-index: 5; pointer-events: none; }
            }
        }
    }
}

/*** ---------- ProductVariants ---------- ***/
.wpb-block--productvariants { --gc: 1;
    .wpb-block__header {
        .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: end; }   
    }
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 1rem; }

    @media (min-width: 576px) { 
        --gc: 2;
    }
    
    @media (min-width: 992px) { 
        --gc: 3;
    }

    @media (min-width: 1200px) { 
        --gc: 3;
    }

    @media (min-width: 1400px) { 
        --gc: 4;

        .wpb-block__header .container { column-gap: 12rem; }
    }

    @media (min-width: 1600px) { 
        .wpb-block__header .container { column-gap: 36rem; }
    }
}

/*** ---------- Cards ----------  ***/
.wpb-card.wpb-card--productvariant { padding: var(--p);
    .card-title { --fs: 2rem; }
    .card-description { display: block; font-size: 1.4rem; opacity: .5; line-height: 1.2; margin-top: .5em; }
    [data-target="#productsheet-modal"] { position: absolute; top: 1.8rem; right: 1.8rem; z-index: 2; min-height: 3.6rem; --icon-clr: var(--clr-text); }
    .wpb-card__header { --ratio: 50%;
        img { object-fit: contain; }
    }
    .wpb-card__body { padding: var(--p) 0 1.2rem; flex-grow: 0; margin-top: auto;
        .card-specs { margin-bottom: 0;
            tbody {
                tr {
                    td { font-size: 1.4rem; padding: 1rem;
                        &:first-of-type { padding-left: 0; font-weight: 400; }
                        &:last-of-type { padding-right: 0; font-weight: 500; text-align: right; }
                    }
                }
            }
        }
    }
    .wpb-card__footer { display: flex; flex-direction: column; padding: 0; gap: 1.2rem;
        .btn.btn--link { --hover-clr: var(--clr-primary); font-weight: 400; justify-content: center; min-height: 3.6rem; }
    }

    &:hover { 
        .wpb-card__footer a { --clr: var(--clr-primary); }
    }

    .wpb-bg-clr--light & { background: #fff; }
}

@container card-container (min-width: 40rem) {
    .wpb-card.wpb-card--productvariant { --p: 3.2rem; }
}