/* Shared grid track prevents the page from jumping between product heights.
   Keep the outgoing layer painted until its dissolve has completed. */
.js .cinema-stage{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.js .cinema-hero .product-slide,
.js .cinema-hero .product-slide[data-position=center]{
 display:flex;grid-area:1/1;min-width:0;width:100%;margin:0;
 opacity:0;visibility:hidden;pointer-events:none;transform:none;animation:none;
 transition:opacity 2600ms cubic-bezier(.4,0,.6,1),visibility 0s linear 2600ms;
 will-change:opacity;
}
.js .cinema-hero .product-slide[data-position=center]{
 opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s;
}
.cinema-visual,.cinema-frame,.cinema-line>span{will-change:auto}
@media(max-width:700px){.js .cinema-stage{align-items:start}}
/* The user explicitly requested automatic, slow product dissolves.
   Override the legacy global reduced-motion reset for this carousel only. */
@media(prefers-reduced-motion:reduce){
 .js .cinema-hero .product-slide{
  transition:opacity 2600ms cubic-bezier(.4,0,.6,1),visibility 0s linear 2600ms!important;
 }
 .js .cinema-hero .product-slide[data-position=center]{transition-delay:0s,0s!important}
}