/* Keep complete images; reviewed standalone frames follow the supplied composition. */
.media-slot.has-image,
.product-card:hover .media-slot.has-image,
.catalog-card:hover .media-slot.has-image,
.product-card:focus-within .media-slot.has-image,
.catalog-card:focus-within .media-slot.has-image{background:#fff}
.media-slot.has-image{border:1px solid #e7edf1}
.media-slot.has-image picture{position:absolute;inset:0;display:block}
.media-slot.has-image img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;padding:8px}
.polo-main-media.has-image img{padding:clamp(12px,2vw,24px)}
/* A square sample composition stays square on tablet instead of floating in a tall empty frame. */
.polo-sample-media.has-image{aspect-ratio:1}
.detail-media.has-image{aspect-ratio:1.08}
.branding-media.has-image{aspect-ratio:1.5;align-self:start}
.detail-media.has-image img,.branding-media.has-image img{padding:0}
.media-slot.has-image[data-fit=cover] img{object-fit:cover}
.branding-illustration-note{font-size:13px;color:#c5d3dd;margin:18px 0 0;line-height:1.7}
/* Filled single-image placements use their intrinsic ratio at every breakpoint.
   Empty placeholders and uniform product/comparison grids retain their own ratios. */
.media-slot.has-image[data-asset][data-frame=natural]{aspect-ratio:var(--media-aspect);height:auto;min-height:0;align-self:start}
.media-slot.has-image[data-frame=square]{aspect-ratio:1;height:auto;min-height:0;align-self:start}
.media-slot.has-image[data-frame] img{padding:0;object-fit:contain}
/* A flex-column child needs an explicit width when its picture is absolutely positioned. */
.detail-visual>.detail-media.has-image[data-frame=natural]{width:100%;flex-shrink:0}
/* Keep long garments readable without making a whole first screen a single image. */
.polo-hero-visual:has(> .media-portrait[data-frame=natural]){width:100%;max-width:440px;justify-self:center}
.development-visuals[data-visual-count="1"]:has(.media-portrait[data-frame=natural]){width:100%;max-width:440px;margin-inline:auto}
.article-shell>.article-figure:has([data-frame=natural]){max-width:620px}
.ordering-detail-pair:has([data-frame=square]){max-width:988px;margin-inline:auto}
@media(max-width:760px){
  .media-slot.has-image img{padding:5px}
  .polo-main-media.has-image img{padding:12px}
  .detail-media.has-image{aspect-ratio:1.35}
  .detail-media.has-image img,.branding-media.has-image img{padding:0}
  .media-slot.has-image[data-mobile-fit=contain] img{object-fit:contain}
  .media-slot.has-image[data-mobile-fit=cover] img{object-fit:cover}
}