/* Reusable photo stage: a shared warm backdrop with complete, uncropped subjects.
   The darken blend joins light studio backgrounds to the stage without a hard seam.
   For dark/location photography, add product-showcase--natural to retain its colours. */
.product-showcase {
    --photo-stage: #e7e2d8;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 340px;
    padding: 20px 28px 42px;
    background: var(--photo-stage);
    isolation: isolate;
    overflow: hidden;
}
.product-showcase img {
    display: block;
    width: 100%;
    height: 278px;
    min-width: 0;
    object-fit: contain;
    mix-blend-mode: darken;
}
.product-showcase--paired {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(8px, 2vw, 28px);
}
.product-showcase--paired .product-showcase-product {
    height: 242px;
}
.product-showcase--natural img { mix-blend-mode: normal; }
.product-showcase-placeholder { display: grid; place-items: center; min-height: 278px; padding: 24px; }
.product-showcase:focus-visible { outline-offset: -5px; }
.product-showcase-index {
    position: absolute;
    bottom: 16px;
    left: 28px;
    color: var(--muted, #647467);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .16em;
    pointer-events: none;
}

@media (max-width: 600px) {
    .product-showcase { min-height: 264px; padding: 14px 18px 34px; }
    .product-showcase img { height: 216px; }
    .product-showcase--paired .product-showcase-product { height: 188px; }
    .product-showcase-index { left: 18px; bottom: 12px; font-size: .52rem; }
}