/* The related and upsell lists below a product's description, spaced like the order form. */
.shop-related-products { margin-top: 2.5rem; }
.shop-service-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.shop-service-product-card { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; border: 1px solid var(--shop-border); background: #fff; }
.shop-service-product-link { display: block; flex: 1; }
.shop-service-product-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; margin-bottom: 1.25rem; }
.shop-service-product-card h3 { margin: 0 0 1.25rem; font-size: 1.25rem; overflow-wrap: anywhere; }
.shop-service-product-price { margin-bottom: 1.25rem; }
.shop-service-product-price strong { display: block; color: var(--shop-brand); font-size: 1.5rem; }
.shop-service-product-price small { color: var(--shop-muted); }
/* A teaser in a column (e.g. four columns with one product each) lists its products below each other. */
.contentcontainer-column .shop-service-products { grid-template-columns: 1fr; }
/* A teaser alone in its column fills it, so cards in neighbouring columns end at the same height. */
.contentcontainer-column > .frame-type-shop_teaser:only-child,
.contentcontainer-column > .frame-type-shop_teaser:only-child :is(.frame-group-container, .frame-group-inner, .frame-container, .frame-inner, .shop-service-products) { height: 100%; }

@media (max-width: 991px) {
    .shop-service-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .shop-service-products { grid-template-columns: 1fr; }
    .shop-service-product-image { max-width: 15rem; margin-inline: auto; }
}