.wpb-card {
    &.wpb-card--product { container-name: productCard; container-type: inline-size; border: 1px solid var(--clr-border);
        .card-title { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; margin-bottom: auto; }

        .prd-attributes { display: grid; border-top: .1rem solid var(--clr-border); border-bottom: .1rem solid var(--clr-border); padding: var(--padding); margin: var(--padding) calc(var(--padding) * -1) 0; column-gap: var(--padding); margin-top: 1.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; 
            img { width: .9rem; height: .9rem; margin-right: .4rem; }
            .prd-attribute { line-height: 1;
                &:has(+ .prd-attribute) { border-right: 1px solid var(--clr-border);}
            }
            .prd-attribute__label { display: flex; align-items: center; padding-bottom: .4rem; }
            small { display: block; font-size: 1.1rem; line-height: 1; font-weight: 600; color: var(--clr-text);}
            span { font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--clr-headings); display: block; }
        }

        .wpb-card__header { flex-direction: column;
            .badge-group { padding: var(--padding) var(--padding) 0 var(--padding); z-index: 2;
                > span:not(.prd-sku) { height: 2.4rem; width: 2.4rem; border-radius: .3rem; background-color: var(--clr-dark); display: flex; align-items: center; justify-content: center;
                    .wpb-icon { --width: 1.8rem; --height: 1.8rem; }
                }
                span.prd-voedselgeschikt { background-color: var(--clr-green); }
                .prd-sku { margin-right: auto; }
                .btn.btn--bookmark { z-index: 2; padding: .5rem; margin-right: -.5rem;
                    .fa-solid { display: none; }
                    &.selected {
                        .fa-regular { display: none; }
                        .fa-solid { display: inline-block; }
                    }
                }
            }
            .wpb-card__ratio { --ratio: 66.6667%; max-height: 16rem;
                img { transition: transform .12s ease; object-fit: contain; max-height: 16rem; }
            }
        }

        .wpb-card__body { display: flex; flex-direction: column; }
        .wpb-card__footer { display: flex; column-gap: 1.6rem;
            .price { display: flex; flex-direction: column;
                > strong { font-size: 2rem; line-height: 1.1; }
                > small { font-size: 1.1rem; line-height: 1.2; }

                &.is-placeholder { display: flex; flex-direction: column; row-gap: .3rem; 
                    .large-price-placeholder { width: 10rem; height: 2.2rem; border-radius: .3rem; background-color: var(--clr-border); display: inline-block; }
                    .small-price-placeholder { width: 8rem; height: 1.4rem; border-radius: .3rem; background-color: var(--clr-border); display: inline-block; }
                }
            }
            .btn { flex-grow: 1; }
        }
    }

    @container productCard (width < 290px) {
        &.wpb-card--product {
            .wpb-card__footer {
                .price {
                    > strong { font-size: 1.6rem; }
                }
                .btn { margin-left: auto; flex-grow: 0; border: none; min-height: unset; padding: 0; --color: var(--clr-headings); --bg-color: transparent; --border: none; --hover-bg-color: transparent; --hover-color: var(--clr-headings); --hover-border: none;
                    .btn__text { display: none; }
                    .wpb-icon-wrapper { --w: 2.2rem; --h: 2.2rem; }
                }
            }
        }
    }

    @media (max-width: 575.98px) {
        &.wpb-card--product {
            .prd-attributes { grid-template-columns: 1fr; margin-inline: 0; padding-inline: 0;
                .prd-attribute:has(+ .prd-attribute) { border-right: 0; border-bottom: 1px solid var(--clr-border); margin-bottom: 1.2rem; padding-bottom: 1.2rem; }
            }
        }
    }

    @media (min-width: 576px) {
        &.wpb-card--product { 
            &:hover {
                .wpb-card__ratio img { transform: scale(1.04); }
            }
        }
    }

    @media (min-width: 768px) {
        &.wpb-card--product { --padding: 1.6rem; }
    }
}