/* One photo surface; company marks sit directly on the original background. */
body .product-display[data-product-media] {
  --product-inset: 0%;
  --product-pad-y: 0%;
  --product-display-rotation: 0deg;
  display: block;
  position: relative;
  container-type: inline-size;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: transparent;
  color: #242729;
  isolation: isolate;
  text-align: left;
}
body .product-display[data-product-media] .product-display__stage {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: var(--product-pad-y) var(--product-inset);
  isolation: isolate;
  z-index: 0;
}
/* Only the added backdrop is softened to avoid stretching the image grain
   into lines. The complete product photo above it is never blurred/masked. */
body .product-display[data-product-media] .product-display__stage::before {
  content: none;
  position: absolute;
  inset: -1%;
  z-index: -1;
  border: 0 solid transparent;
  border-image-source: var(--product-photo);
  border-image-slice: 1;
  border-image-width: calc(var(--product-inset) + 3%);
  border-image-repeat: stretch;
  filter: blur(.65cqw);
}
body .product-display[data-product-expanded] .product-display__stage::before { content: ""; }
/* Do not let a CSS backdrop bypass the actual image's native lazy loading.
   Without scripting, the original background remains the working fallback. */
@media (scripting: enabled) {
  body .product-display[data-product-media] .product-display__stage::before {
    border-image-source: var(--product-loaded-photo, none);
  }
}
/* Outrank legacy descendant img styles without changing other site media. */
body .product-display.product-display[data-product-media] .product-display__stage > img.product-display__image {
  display: block;
  position: static;
  inset: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
  clip-path: none;
  transform: rotate(var(--product-display-rotation));
  transform-origin: center;
  transition: none;
}
body .product-display[data-product-media] .product-display__brand {
  display: block;
  position: absolute;
  z-index: 1;
  left: 4.5%;
  top: 5%;
  width: 23%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
body .product-display.product-display[data-product-media] .product-display__brand > img.product-display__logo {
  display: block;
  position: static;
  inset: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 700 / 145;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
  clip-path: none;
  transform: none;
  transition: none;
}
body .product-display[data-product-media] .product-display__caption {
  display: block;
  position: absolute;
  z-index: 1;
  left: 4.5%;
  bottom: 6%;
  margin: 0;
  padding: 0;
  font-size: 2.1cqw;
  font-weight: 700;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  line-height: 1.35;
  letter-spacing: .015em;
  pointer-events: none;
}
body .product-display[data-product-media] .product-display__caption > span {
  display: inline-block;
  padding-bottom: .32cqw;
  border-bottom: max(1px, .2cqw) solid #c51d1b;
}
body .product-display--rotate-90[data-product-media] { --product-display-rotation: 90deg; }
body .product-display--rotate-180[data-product-media] { --product-display-rotation: 180deg; }
body .product-display--rotate-270[data-product-media] { --product-display-rotation: 270deg; }
/* Parent links/frames must not crop or add a second background panel. */
body[class][data-page] :is(.product-image, .pc-card-image):has(.product-display[data-product-media]) {
  display: block;
  aspect-ratio: auto;
  height: auto;
  min-width: 0;
  overflow: hidden;
  background: transparent;
  mix-blend-mode: normal;
  filter: none;
}
body[class][data-page] :is(.product-image, .pc-card-image, .pc-hero-product, .pd-product-photo) > a:has(.product-display[data-product-media]) {
  display: block;
  aspect-ratio: auto;
  height: auto;
  padding: 0;
  background: transparent;
  mix-blend-mode: normal;
}
body[class][data-page] :is(.pc-hero-product, .pd-product-photo):has(.product-display[data-product-media]) {
  background: transparent;
  mix-blend-mode: normal;
}