/* The same product source is used by small catalog cards and large detail media. */
:root {
    /* Context frames use the same small source; these are not upload sizes. */
    --sf-product-image-row-size: 72px;
    --sf-product-image-row-mobile-ratio: 4 / 5;
    --sf-product-image-small-max: 250px;
    --sf-product-image-small-ratio: 15 / 16;
    --sf-product-image-large-max: 560px;
    --sf-product-image-large-desktop-max: 340px;
    --sf-product-image-large-current-max: var(--sf-product-image-large-max);
    --sf-product-image-large-ratio: 1 / 1;
}
.sf-product-media,
.sf-product-image {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.sf-product-media--small,
.sf-product-image--small {
    max-width: var(--sf-product-image-small-max);
    aspect-ratio: var(--sf-product-image-small-ratio);
}
.sf-product-media--large,
.sf-product-image--large {
    max-width: var(--sf-product-image-large-max);
    aspect-ratio: var(--sf-product-image-large-ratio);
}
.sf-product-media {
    position: relative;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--sfui-control-radius, 12px);
    background: var(--sfui-control, #121720);
}
.sf-product-image {
    height: auto;
    object-fit: contain;
    object-position: center;
    background: transparent;
}
.sf-product-media > .sf-product-image {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: inherit;
}
@media (min-width: 1100px) {
    :root { --sf-product-image-large-current-max: var(--sf-product-image-large-desktop-max); }
    .sf-product-media--large,
    .sf-product-image--large {max-width: var(--sf-product-image-large-desktop-max);}
}
.sf-product-gallery { min-width: 0; }
.sf-product-gallery__thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sfui-space-8); }
.sf-product-gallery__thumb { width: var(--sfui-badge-large); padding: 0; cursor: pointer; }
.sf-product-gallery__thumb .sf-product-image { aspect-ratio: var(--sf-product-image-large-ratio); }
.sf-product-gallery__thumb[aria-pressed="true"] { border-color: var(--sfui-focus-border); box-shadow: var(--sfui-focus-ring); }