/* PMP Create Pro v43 — original, locally stored production-category photography. */

.product-stage.photo-backed {
  isolation: isolate;
  background-color: #0c1821;
  background-image: var(--product-photo, linear-gradient(135deg, #0c2933, #155a60 52%, #f29a43));
  background-position: var(--product-photo-position,center);
  background-size: var(--product-photo-size,cover);
}

.product-stage.photo-backed[data-photo-identity="product"] {
  padding: 10px;
  background-color: #edf3f4;
  background-origin: content-box;
  background-repeat: no-repeat;
}

.product-stage.photo-backed::before {
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(4, 13, 20, .04) 42%, rgba(4, 13, 20, .76) 100%),
    linear-gradient(90deg, rgba(4, 13, 20, .24), transparent 55%);
}

.product-stage.photo-backed::after {
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 0;
  background: rgba(255, 255, 255, .2);
  filter: none;
}

.product-stage.photo-backed .product-photo-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 77% 18%, rgba(255, 255, 255, .12), transparent 27%);
  pointer-events: none;
}

.product-stage.photo-backed:not([data-photo-loaded="true"]) .product-photo-shade {
  background: linear-gradient(108deg, transparent 30%, rgba(255,255,255,.14) 46%, transparent 62%);
  animation: pmp-product-photo-ready 1.25s ease-in-out infinite;
}

.product-stage.photo-backed[data-photo-loaded="error"] {
  background-image:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent), #102b35 58%), #0a222c 68%, #173843);
}

.product-stage.photo-backed[data-photo-loaded="error"] .product-photo-shade,
.product-stage.photo-backed[data-photo-loaded="reduced-data"] .product-photo-shade {
  animation: none;
  transform: none;
  opacity: 1;
  background: linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,.08) 46% 48%, transparent 48% 100%);
}

.product-stage.photo-backed[data-photo-loaded="error"] .product-photo-badge {
  border-color: rgba(255,205,135,.58);
  background: rgba(62,37,15,.78);
  color: #fff2dc;
}

@keyframes pmp-product-photo-ready {
  0%,100% { transform: translateX(-20%); opacity: .4; }
  50% { transform: translateX(20%); opacity: .86; }
}

.product-stage.photo-backed .product-object {
  z-index: 2;
  position: absolute;
  right: var(--product-object-right,12px);
  bottom: var(--product-object-bottom,16px);
  width: 64px;
  height: 46px;
  margin: 0;
  opacity: .92;
  transform: none;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .42));
}

.product-stage.photo-backed .product-photo-badge {
  position: absolute;
  z-index: 3;
  left: 11px;
  bottom: 10px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(7, 20, 29, .66);
  color: #fff;
  font: 850 6px/1 Inter, "Segoe UI", sans-serif;
  letter-spacing: .75px;
  backdrop-filter: blur(6px);
  max-width: calc(100% - 94px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-stage.photo-backed ~ .art-chip,
.product-stage.photo-backed ~ .format-ratio {
  z-index: 4;
}

/* Keep the photography itself editorially clean. Product, category, and size
   information remains available in the structured copy beneath each image. */
.format-art.photo-product-art > .art-chip,
.format-art.photo-product-art > .format-ratio,
.format-art.photo-product-art .product-photo-badge {
  display: none !important;
}

@media (max-width: 760px) {
  .product-stage.photo-backed .product-photo-badge { display: none; }
  .product-stage.photo-backed .product-object { right: 9px; bottom: 10px; transform: scale(.78); transform-origin: right bottom; }
}

@media (prefers-reduced-data: reduce) {
  .product-stage.photo-backed { background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent), #071a26 34%), #082331); }
}

@media (prefers-reduced-motion: reduce) {
  .product-stage.photo-backed:not([data-photo-loaded="true"]) .product-photo-shade { animation: none; }
}