/* One shared frame for the three product photos (Band, Card, Slim).
   Same light backdrop (#fdfdfd, matches the photos), same padding, and a per-product
   scale so the band, card and slim read at a similar visual size. Loaded last. */
:root{--pf-bg:#fdfdfd;--pf-band:.68;--pf-card:1.1;--pf-slim:.84}

.hv-prod__img,
.pp-stage--photo,
.acc-card__photo,
.app-shop-card__photo,
.app-shop-card__photo--band{background:var(--pf-bg) !important}

.hv-prod__img img,
.pp-stage--photo img,
.acc-card__photo .carousel__slide img,
.acc-card__photo img:not([data-combo-img]):not([data-multi-img]):not([data-slot]),
.app-shop-card__photo img:not([data-combo-img]):not([data-multi-img]):not([data-slot]){
  width:100% !important;height:100% !important;max-width:none !important;
  object-fit:contain !important;padding:0 !important;filter:none !important;
  background:transparent !important;
  transform:scale(var(--pf,1)) !important;
}
img[src*="/band-"][src$="-v2.png"]{--pf:var(--pf-band)}
img[src*="bnu-card-v3"]{--pf:var(--pf-card)}
img[src*="/slim-"][src$=".jpg"]{--pf:var(--pf-slim)}
.hv-prod:hover .hv-prod__img img{transform:scale(calc(var(--pf,1) * 1.04)) !important}

/* Band product page: same light frame as card and slim (no dark glow, no oversized crop) */
.pp-stage--band{background:var(--pf-bg) !important}
.pp-stage--band .pp-glow,.pp-stage--band .hv-ring{display:none !important}
.pp-stage--band img.pp-band{width:100% !important;height:100% !important;object-fit:contain !important;
  filter:none !important;animation:none !important;transform:scale(var(--pf,1)) !important}

/* the slim photos sit on pure white (the others on #fdfdfd): match the frame to each so no faint box shows */
.hv-prod__img:has(img[src*="/slim-"]),.pp-stage--photo:has(img[src*="/slim-"]),
.acc-card__photo:has(img[src*="/slim-"]),.app-shop-card__photo:has(img[src*="/slim-"]){background:#fff !important}

/* the photos carry a faint baked-in backdrop box: fade their outer edges into the frame */
img[src*="/band-"][src$="-v2.png"],img[src*="bnu-card-v3"],img[src*="/slim-"][src$=".jpg"]{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  mask-composite:intersect}
.pp-stage--band img.pp-band{--pf:.56}