/* V1 and V8/V9 retain their layouts; all placements share playback controls. */
html:has(body.has-video-bands), body.has-video-bands { overflow-x: clip; }
body main section.video-band.video-module {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  padding: 72px 24px;
  border: 0;
  border-radius: 0;
  background: #004740;
}
.video-band-inner { width: 100%; max-width: 960px; margin: 0 auto; }
.video-band + section { border-top: 0; }
.video-band + .atv-gains { margin-top: -1px; }
.video-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  isolation: isolate;
}
/* Desktop portrait size is 270 x 480; keep mobile sizing independent below. */
.video-stage:has(.video-frame-new--portrait) { width: 270px; max-width: 100%; }
.video-stage::before {
  content: none;
  position: absolute;
  top: -16px;
  left: -18px;
  width: 120px;
  height: 96px;
  background: #0b6b5f;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 82%);
  transform: rotate(-7deg);
  z-index: -1;
}
.video-band .video-frame-new {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  flex: none;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 24, 21, .22);
}
.video-band .video-frame-new--portrait { aspect-ratio: 9/16; }
.video-band .video-frame-new > picture > img { object-fit: contain; }
/* Detail films use a landscape photo on desktop; overview and mobile stay portrait. */
@media (min-width: 720px) {
  .video-stage:has(.video-frame-new--detail-landscape) { width: 100%; }
  .video-band .video-frame-new--detail-landscape { aspect-ratio: 16/9; }
  .video-band .video-frame-new--detail-landscape > picture > img { object-fit: cover; }
  .video-module--atv .video-frame-new--detail-landscape > picture > img { object-position: 50% 32%; }
}
.video-module--brand-review .video-frame-new > picture > img { object-fit: cover; object-position: center; }
.video-cover-trigger {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.video-play-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 24, 21, .2);
}
.video-play-symbol svg { display: block; width: 100%; height: 100%; }
.video-play-symbol .disc { transition: fill .16s ease; }
.video-cover-trigger:hover:not(:disabled) .disc { fill: var(--palette-action); fill-opacity: 1; }
.video-cover-trigger:focus-visible {
  outline: 3px solid var(--palette-focus);
  outline-offset: 5px;
}
.video-cover-trigger[hidden] { display: none; }
.video-coming-soon {
  position: absolute;
  z-index: 5;
  top: calc(50% + 50px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(0, 71, 64, .94);
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}
.video-coming-soon[hidden] { display: none; }
.video-stage--care::before { display: none; }
.video-stage--care { padding-block: 72px; }
.video-frame-new.video-frame-new--care { aspect-ratio: 1; border-radius: 8px; }
.video-frame-new--care > picture > img { object-fit: cover; }
.video-frame-new--care .video-cover-title { display: grid; }
.video-frame-new--care .video-cover-duration { display: block; }
.product-care .care-poster-grid .video-cover-title strong { font-size: 18px; }
.product-care .care-poster-grid .video-cover-title span { font-size: 15px; }
.care-poster-grid > .expect-care-video { margin: 0; min-width: 0; }
.video-stage .video-placement-error { margin-top: 16px; color: #fff; }
.home-video-hero-facts span { display: inline-block; white-space: nowrap; }
.products-line.products-feature.products-line-with-video,
.products-line.products-feature.products-line-with-video.products-feature-reverse {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border-radius: 0;
}
.products-line.products-line-with-video > .products-feature-copy { padding: 40px; }
/* Product copy and its portrait film belong in one desktop row. */
@media (min-width: 860px) {
  .products-line.products-feature.products-line-with-video,
  .products-line.products-feature.products-line-with-video.products-feature-reverse {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: center;
    gap: 64px;
    padding: 72px 64px;
  }
  .products-line.products-line-with-video > .products-feature-copy { order: 0; padding: 0; min-width: 0; }
  body main .products-line.products-line-with-video > section.video-band.video-module {
    order: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
  }
}
@media (prefers-reduced-motion: reduce) { .video-play-symbol .disc { transition: none; } }
@media (max-width: 719px) {
  .video-stage--care { padding-block: 48px; }
  .video-play-symbol, .home-video-hero .video-play-symbol { width: 56px; height: 56px; }
  .video-coming-soon { top: calc(50% + 42px); }
  body main section.video-band.video-module { padding: 48px 24px; }
  .video-stage:has(.video-frame-new--portrait) { width: 70vw; }
  .products-line.products-line-with-video > .products-feature-copy { padding: 28px 24px; }
}
