/* Every product and existing promotional banner fills its original frame.
   This does not affect gallery, zoom, detail-sheet or product-card images. */
[data-toffee-banner] {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
[data-toffee-banner="product"] .productHeader__image img,
[data-toffee-banner="product"] .o-hero__bg img,
[data-toffee-banner="promotional"] .backgroundImageWrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--toffee-banner-position, center top) !important;
  transform: none !important;
}
[data-toffee-banner] picture { display: contents; }
/* The video stays inside the original hero, with its copy and CTA above it. */
.o-hero[data-toffee-home-hero] .o-hero__bgVideo video {
  object-fit: cover !important;
  object-position: center 30% !important;
}
[data-toffee-home-hero] .m-heroV4,
[data-toffee-banner="product"] .m-productHeader,
[data-toffee-banner="product"] > .o-hero__wrapper {
  min-height: 620px !important;
  height: calc(100svh - var(--toffee-header-height, 116px)) !important;
}
/* Stop the source zoom animation from undoing complete-width framing. */
[data-toffee-banner="product"] .bg__animation,
[data-toffee-banner="product"] .o-hero__bgImg {
  transform: none !important;
  animation: none !important;
}
[data-toffee-home-hero], [data-toffee-banner] { position: relative; isolation: isolate; }
[data-toffee-home-hero] > .o-hero__wrapper,
[data-toffee-banner="product"] > .o-hero__wrapper {
  margin-top: 0 !important;
  padding: 0 !important;
  z-index: auto !important;
}
[data-toffee-home-hero] .m-heroV4::after,
[data-toffee-banner="product"] .m-productHeader::after,
[data-toffee-banner="promotional"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 32%, rgb(0 0 0 / 32%) 68%, rgb(0 0 0 / 32%));
}
[data-toffee-home-hero] .m-heroV4::after,
[data-toffee-banner="promotional"]::after {
  background: linear-gradient(90deg, rgb(0 0 0 / 32%) 30%, transparent 70%);
}
[data-toffee-home-hero] .heroV4__content,
[data-toffee-banner="product"] .productHeader__content,
[data-toffee-banner="promotional"] .content_container { z-index: 3 !important; }
[data-toffee-banner="product"] .productHeader__contentWrapper {
  z-index: auto !important;
  background: none !important;
}
[data-toffee-theme] [data-toffee-copy-tone="dark"] :is(.productHeader__title,.productHeader__description,.productHeader__price) {
  color: var(--toffee-ink) !important;
  text-shadow: none !important;
}
[data-toffee-copy-tone="dark"] .m-productHeader::after {
  background: linear-gradient(90deg, transparent 32%, rgb(250 247 245 / 16%) 68%);
}
/* Match the copy side to each banner's actual negative space. Never mirror a product. */
@media (min-width:768px) {
  [data-toffee-copy-side="left"] .displayright { justify-content: flex-start !important; }
  [data-toffee-copy-side="left"] .m-productHeader::after {
    background: linear-gradient(90deg, rgb(0 0 0 / 32%) 30%, transparent 70%);
  }
  [data-toffee-copy-side="left"][data-toffee-copy-tone="dark"] .m-productHeader::after {
    background: linear-gradient(90deg, rgb(250 247 245 / 16%) 30%, transparent 70%);
  }
}
@media (max-width: 767px) {
  [data-toffee-banner="product"] .scrollAnimation { display: none; }
  [data-toffee-banner="product"] .productHeader__image img,
  [data-toffee-banner="product"] .o-hero__bg img,
  [data-toffee-banner="promotional"] .backgroundImageWrapper img {
    object-position: var(--toffee-banner-mobile-position, center top) !important;
  }
  [data-toffee-home-hero] .m-heroV4,
  [data-toffee-banner="product"] .m-productHeader,
  [data-toffee-banner="product"] > .o-hero__wrapper {
    min-height: 620px !important;
    height: calc(100svh - var(--toffee-header-height, 85px)) !important;
  }
  [data-toffee-home-hero] .m-heroV4::after,
  [data-toffee-banner="product"] .m-productHeader::after,
  [data-toffee-banner="promotional"]::after {
    background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 36%) 78%);
  }
  [data-toffee-banner="product"][data-toffee-copy-tone="dark"] :is(.productHeader__title,.productHeader__description) {
    color: var(--toffee-on-brand) !important;
  }
}