/* Design-2 vial photos (owner approved Sep 28, 2026; src/lib/vial-photo.ts, backend src/lib/vial-photos.ts).
   The photo carries its own studio background, so the box gets the same dark slate at its edges and the picture
   fills it: cropped at the sides in tall or square boxes, whole (edges faded into the box) in wide ones. */
.prestige-packshot.prestige-packshot--photo {
  position: relative;
  overflow: hidden;
  container-type: size;
  background: linear-gradient(180deg, #2d343e 0%, #4f5764 22%, #646c79 50%, #56606e 82%, #3e4651 100%) !important;
  filter: none !important;
  isolation: isolate;
}
.prestige-packshot--photo > .pp-vial-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  object-fit: cover;
  object-position: 50% 52%;
  user-select: none;
  -webkit-user-drag: none;
}
@container (min-aspect-ratio: 11/10) {
  .prestige-packshot--photo > .pp-vial-photo {
    object-fit: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
}
/* cards and the other boxes that had a free-floating vial: a rounded photo */
.prestige-product-card .prestige-packshot--photo,
.prestige-pack__visual .prestige-packshot--photo,
.prestige-suggestions .prestige-packshot--photo {
  border-radius: 10px;
}
/* bag, checkout and order lines: small square photos */
.prestige-packshot--cart-thumbnail.prestige-packshot--photo,
.prestige-checkout__thumb .prestige-packshot--photo,
.prestige-cart-line__media .prestige-packshot--photo {
  border-radius: 8px;
}
/* home: the three vials float in soft light instead of three boxes */
.prestige-packshot--home.prestige-packshot--photo {
  background: none !important;
}
.prestige-packshot--home.prestige-packshot--photo > .pp-vial-photo {
  object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 50% at 50% 50%, #000 58%, transparent 100%);
}
/* the light sweep over the drawn home vials follows the drawn vial's outline: not for photos */
.prestige-home-vial.prestige-packshot--photo::after {
  display: none !important;
}
/* phones: a taller picture on the product page so the label reads (was 200 px for the drawn vial) */
@media (max-width: 749px) {
  body .prestige-product--mobile-redesign .prestige-product__gallery .prestige-packshot--product-page.prestige-packshot--photo {
    height: 270px;
  }
}
/* small squares (bag, checkout, order lines): a closer look at the vial */
.prestige-packshot--cart-thumbnail.prestige-packshot--photo > .pp-vial-photo,
.prestige-checkout__thumb .prestige-packshot--photo > .pp-vial-photo,
.prestige-cart-line__media .prestige-packshot--photo > .pp-vial-photo {
  transform: scale(1.3);
  transform-origin: 51% 51%;
}

/* home hero: brand-only vials (one picture, soft see-through edges so the studio light fades into the dark hero) */
body .prestige-home--mobile-refresh .prestige-home-vials.prestige-home-vials--brand {
  width: min(100%, 520px);
  height: 394px;
}
body .prestige-home--mobile-refresh .prestige-home-vials.prestige-home-vials--brand::before {
  display: none;
}
.prestige-home-vials--brand picture,
.prestige-home-vials--brand .prestige-home-brand {
  display: block;
  width: 100%;
  height: 100%;
}
.prestige-home-vials--brand .prestige-home-brand {
  object-fit: contain;
}
@media (max-width: 749px) {
  body .prestige-home--mobile-refresh .prestige-home-vials.prestige-home-vials--brand {
    width: 100%;
    height: 178px;
  }
}
@media (max-width: 359px) {
  body .prestige-home--mobile-refresh .prestige-home-vials.prestige-home-vials--brand {
    height: 164px;
  }
}