/* Configurator media: genuine overlay with shared grid cells, no canvas coordinates. */
.zedra-product__composition { display: grid; inline-size: 100%; block-size: 100%; aspect-ratio: 1; overflow: hidden; }
.zedra-product__composition > img { grid-area: 1 / 1; inline-size: 100%; block-size: 100%; min-inline-size: 0; min-block-size: 0; object-fit: contain; }
.zedra-product__main-image:has(.zedra-product__composition) { padding: 0; background: var(--zedra-bg-primary); border: 1px solid var(--zedra-border-subtle); }
.zedra-product__options .zedra-product__option-image { display: block; inline-size: 38px; block-size: 38px; object-fit: contain; border-radius: 4px; margin-inline: auto; }
.zedra-product__options:not(.zedra-product__options--swatches) .zedra-product__option-image { margin-block-end: 6px; }
.zedra-product__options--image-cards button { flex: 0 1 100px; }
.zedra-product__options--image-cards .zedra-product__option-image { inline-size: 64px; block-size: 48px; }
.zedra-product__options button:disabled { opacity: .45; }
.zedra-product__options button:focus-visible { outline: 2px solid var(--zedra-border-active); outline-offset: 3px; }
.zedra-product__media-status { margin-block-start: 12px; color: var(--zedra-text-secondary); font-size: 14px; line-height: 20px; }
.zedra-product__media-status:empty { display: none; }

/* A sample stays square even beside text-only finishes; its accessible name is in the button. */
.zedra-product__attribute .zedra-product__options .zedra-product__option--sample { display: grid; place-items: center; flex: 0 0 48px; inline-size: 48px; block-size: 48px; padding: 3px; border: 2px solid transparent; border-radius: 6px; }
.zedra-product__attribute .zedra-product__options .zedra-product__option--sample[aria-pressed="true"] { border-color: var(--zedra-border-active); box-shadow: none; }
.zedra-product__options .zedra-product__option--sample .zedra-product__option-image { margin-block-end: 0; }

/* Animate the decoded image or entire layer stack together, never individual layers. */
@media (prefers-reduced-motion: no-preference) {
    .zedra-product__main-image > :is(img, .zedra-product__composition) {
        animation: zedra-product-image-in 320ms ease-out;
    }
}
@keyframes zedra-product-image-in {
    from { opacity: .65; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}