/* Product Images CSS */

/* Product Detail - Images should show complete with contain */
.ratio-4x3 .card-img-top {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* Product thumbnails in detail page */
.img-thumbnail {
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
}

/* Product detail info hierarchy: category badge -> bold dark title ->
   softer-toned description, so the three read as distinct steps instead
   of a flat stack of same-weight text (matches the card-level hierarchy
   already used in product-card / service-card). */
.product-detail-title {
    font-weight: 700;
    color: var(--text-ink);
}

.product-detail-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-ink-soft);
}