/*
 * Productfoto's als <img> (WebP-bestanden uit uploads/resized) in plaats van een base64-achtergrond.
 * Zelfde plaats en maat als de vroegere achtergronden in assets/all/all.min.css.
 */

/* Overzichten en home-tegels: de foto op ware grootte, gecentreerd in het vak van 200px */
.grid-item a .foto,
.modal-foto .foto {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-item a .foto img,
.modal-foto .foto img,
.alternatieven-tabel .detailbeeld img,
#product-detail .merk-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.grid-item.custom-item a .foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Productpagina: groot beeld en galerij passend in hun vak (vroeger background-size: contain) */
#product-detail .detail-afbeelding #detail-afbeelding img,
#product-detail .detail-afbeelding #thumb-container a .image-small img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Specificaties van de variant als tabel (productpagina) */
#product-detail ~ .container .specificaties h2,
.specificaties h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 10px 0 15px;
}

.specificaties table th {
    width: 40%;
    font-weight: 400;
    color: #878787;
    text-transform: uppercase;
}