/*
  Source-image integrity rules.
  Product labels and pack geometry are never re-drawn or stretched: source aspect
  ratios are preserved at every placement and high-resolution transparent packshots
  are used over moving footage.
*/
img { max-width: 100%; }

.hero-product,
.collection-product,
.brand-images img,
.audience-image,
.usage-art img,
.order-product img,
.ingredient-thumb {
  display: block;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* 2K transparent packshot: premium, legible, never upscaled beyond its source. */
.hero-product {
  width: min(430px, 86%);
  aspect-ratio: 1;
}

/* The original lifestyle photo belongs in its native square presentation. */
.gallery-frame { background: #eee9df; }
.gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The circular detail remains fully visible instead of being cropped. */
.ingredient-thumb {
  box-sizing: border-box;
  object-fit: contain !important;
  object-position: center;
  background: #fff;
}

/* Campaign artwork is 3:2; keep that ratio instead of forcing it into a card. */
.campaign-card { aspect-ratio: 3 / 2; }
.campaign-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.brand-images img,
.audience-image,
.usage-art img { aspect-ratio: 1; }

/* Small order summary uses the same transparent packshot without cropping it. */
.order-product img {
  flex: 0 0 70px;
  aspect-ratio: 1;
}

/* Premium packshot treatment over the supplied cliff video. */
.collection-showcase-inner { position: relative; }
.collection-showcase-inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: max(0px, 5%);
  width: min(520px, 44vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,210,149,.32), rgba(232,210,149,.08) 45%, transparent 72%);
  filter: blur(2px);
}
.collection-product {
  position: relative;
  z-index: 1;
  display: block;
  width: min(440px, 76vw);
  height: auto;
  aspect-ratio: 1;
  max-height: 560px;
  object-fit: contain;
  object-position: center;
  transform: translateY(8px);
}

@media (max-width: 760px) {
  .hero-product { width: min(350px, 82vw); }
  .collection-showcase-inner::after {
    inset-inline-end: 50%;
    transform: translateX(50%);
    width: min(380px, 92vw);
  }
}