/* A shared calm stage behind product photos. The product pixels are never blended or filtered. */
:is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ui-border);
  background: #eef0ec;
  color: #384039;
}
:is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media] .product-image-btn { position: relative; z-index: 1; }
:is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media] .product-image-btn img { mix-blend-mode: normal; }
:is(.native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media] > img { position: relative; z-index: 1; mix-blend-mode: normal; }
.v-editorial-visual[data-catalog-media] > :is(.v-editorial-product-label, .v-editorial-visual-foot, .v-editorial-empty) { position: relative; z-index: 2; color: inherit; }
.v-editorial-visual[data-catalog-media] .v-round-arrow { color: inherit !important; border-color: currentColor; }
.v-editorial-empty { margin: auto; text-align: center; font-size: clamp(20px, 2.5vw, 32px); line-height: 1.4; }
.v-editorial-visual[data-catalog-media] > [hidden] { display: none; }

:is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media] .card-tech { z-index: 2; }
:is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media] .card-tools { z-index: 3; }
:is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media].is-opaque { background: #fff; }

:root:is([data-theme="dark"], :not([data-theme])) :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]:not(.is-opaque) {
  background: transparent;
  border-color: transparent;
  color: #e7eef2;
  color-scheme: dark;
  box-shadow: none;
}
:root:is([data-theme="dark"], :not([data-theme])) :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]:not(.is-opaque)::before,
:root:is([data-theme="dark"], :not([data-theme])) :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]:not(.is-opaque)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
:root:is([data-theme="dark"], :not([data-theme])) :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]:not(.is-opaque)::before {
  inset: 0;
  background: url("../graphics/catalog-haze.webp") center / 112% 112% no-repeat;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 60%, #000 0%, #000 42%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 60%, #000 0%, #000 42%, transparent 100%);
}
:root:is([data-theme="dark"], :not([data-theme])) :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]:not(.is-opaque)::after {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 44%, #809caf38 0%, #809caf14 38%, transparent 72%),
    radial-gradient(ellipse at 53% 86%, #a0b5c220 0%, transparent 56%);
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0%, #000 32%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0%, #000 32%, transparent 100%);
}
:root:is([data-theme="dark"], :not([data-theme])) :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]:not(.is-opaque) .card-tech {
  color: #dde8ee;
  background: #25323a;
  border: 1px solid #50616c;
}
:root:is([data-theme="dark"], :not([data-theme])) :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]:not(.is-opaque) .card-tools .icon-btn {
  color: #e7eef2;
  background: #25323a;
  border: 1px solid #50616c;
}
:root:is([data-theme="dark"], :not([data-theme])) :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]:not(.is-opaque) .card-tools .icon-btn:hover {
  background: #344550;
}
:root:is([data-theme="dark"], :not([data-theme])) :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]:not(.is-opaque) .card-tools .icon-btn.active {
  color: #ffab8f;
  background: #3a2925;
  border-color: #a9654d;
}

@keyframes mobiat-catalog-haze-drift {
  from { background-position: 44% 54%; background-size: 112% 112%; }
  to { background-position: 62% 42%; background-size: 115% 115%; }
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root:is([data-theme="dark"], :not([data-theme])) :is(.product-card:hover .card-media, .native-pdp .pdp-photo:hover, .native-related-media:hover, .v-editorial-visual:hover, .native-image-canvas:hover)[data-catalog-media].is-transparent::before {
    animation: mobiat-catalog-haze-drift 12s ease-in-out infinite alternate;
  }
}
.motion-off :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]::before { animation: none !important; }
@media (forced-colors: active) {
  :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media] { background: Canvas !important; border-color: CanvasText !important; color: CanvasText !important; box-shadow: none !important; }
  :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]::before,
  :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media]::after { display: none !important; }
  :is(.product-card .card-media, .native-pdp .pdp-photo, .native-related-media, .v-editorial-visual, .native-image-canvas)[data-catalog-media] :is(.card-tech, .card-tools .icon-btn) { background: Canvas !important; color: CanvasText !important; border-color: CanvasText !important; }
}

/* Screen-size infographic stays in the stage centre, independent of photo alpha fitting. */
.mobiat-screen-diagonal {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100% - 32px); padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  background: rgba(19,25,25,.79); color: #f7f8f5;
  box-shadow: 0 2px 12px rgba(0,0,0,.08); pointer-events: none;
  font-family: inherit; text-align: left; line-height: 1.1;
}
.mobiat-screen-diagonal[hidden] { display: none; }
.mobiat-screen-diagonal > svg { flex: 0 0 36px; width: 36px; height: 26px; stroke: #d5ded8; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mobiat-screen-diagonal > span { display: grid; gap: 3px; }
.mobiat-screen-diagonal strong { font-family: inherit; font-size: 24px; font-weight: 650; letter-spacing: -.03em; color: inherit; }
.mobiat-screen-diagonal small { font-size: 10px; font-weight: 450; color: #d5ded8; white-space: nowrap; }
.native-pdp .pdp-photo .mobiat-screen-diagonal { padding: 12px 18px; gap: 12px; }
.native-pdp .pdp-photo .mobiat-screen-diagonal strong { font-size: clamp(26px, 3vw, 36px); }
.native-pdp .pdp-photo .mobiat-screen-diagonal small { font-size: 11px; }
@media (max-width: 480px) {
  .product-card .mobiat-screen-diagonal { padding: 6px 9px; gap: 6px; border-radius: 10px; }
  .product-card .mobiat-screen-diagonal > svg { flex-basis: 24px; width: 24px; height: 18px; }
  .product-card .mobiat-screen-diagonal strong { font-size: 21px; }
  .product-card .mobiat-screen-diagonal small { display: none; }
}