/* Produktseiten 2026-09: Safari-Clips in der Feature-Story, ausgewogene Raster (Owner-Vorgabe 12.09.2026). */
.feature-media video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border-radius: .55rem; }
.legacy-content .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legacy-content .looks-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.legacy-content .look picture { display: block; }
.legacy-content .look img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 900px) { .legacy-content .looks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .legacy-content .live-grid { grid-template-columns: minmax(0, 1fr); }
  .legacy-content .bento { grid-template-columns: minmax(0, 1fr); }
  .legacy-content .bento .tile { grid-column: auto; }
}
@media (max-width: 560px) { .legacy-content .looks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legacy-content .looks-grid + .bento--looks { margin-top: clamp(2rem, 5vw, 3.5rem); }
.legacy-content .bento--looks .tile.img-only picture { display: block; height: 100%; }
.legacy-content .bento--looks .tile.img-only img { object-position: right top; }
/* Select-Hero 12.09. (Owner): das Video wirkt als komplettes App-Fenster — dezente Titelleiste
   mit drei Fensterpunkten, Rundung und Schatten kommen vom versionierten product-frame.css. */
[data-app="selra"] .product-frame .product-frame-media { --window-bar: clamp(1.1rem, 2.4vw, 1.75rem); position: relative; padding-top: var(--window-bar); }
[data-app="selra"] .product-frame .product-frame-media::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--window-bar); background: #171917; border-bottom: 1px solid var(--photo-line); }
[data-app="selra"] .product-frame .product-frame-media::after { content: ""; position: absolute; top: calc(var(--window-bar) / 2); left: calc(var(--window-bar) * .5); width: calc(var(--window-bar) * .3); height: calc(var(--window-bar) * .3); border-radius: 50%; transform: translateY(-50%); background: #ff5f57; box-shadow: calc(var(--window-bar) * .55) 0 0 #febc2e, calc(var(--window-bar) * 1.1) 0 0 #28c840; }