/* Preserve the complete approved homepage series images on the product directory. */
.product-directory-page .product-series-lead__media {
  align-self: start;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
}

.product-directory-page .product-series-lead__media picture {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
}

.product-directory-page .product-series-lead__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.product-directory-page .product-series-lead__media:hover img {
  transform: none;
}

/* The scrub jar uses a wide 3:2 cutout, so it needs more breathing room than
   the taller bottles and oils in the same product grid. */
.product-directory-page #product-lavender-scrub .product-image {
  display: grid;
  place-items: center;
}

.product-directory-page #product-lavender-scrub .product-image img {
  display: block;
  width: 72%;
  height: 72%;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
}

.product-directory-page #product-lavender-scrub:hover .product-image img {
  transform: scale(1.015);
}

@media (max-width: 760px) {
  .product-directory-page #product-lavender-scrub .product-image img {
    width: 68%;
    height: 68%;
  }
}

/* 2026-09-01: ENITA silver-paper packshot stages and equal mobile rhythm.
   Only the media viewport uses the brand silver; the product information
   remains on the soft-white card canvas. */
.product-directory-page .product-series-chapter .editorial-product-list .product-card,
.product-directory-page .product-series-chapter .editorial-product-list .product-card:last-child {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.product-directory-page .product-series-chapter .product-card--packshot .product-image {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  background: var(--stone, #d3d5d1);
}

.product-directory-page .product-series-chapter .product-card--packshot .product-image img,
.product-directory-page .product-series-chapter .product-card--packshot:hover .product-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  background: transparent;
  object-fit: contain;
  object-position: center;
  transform: scale(var(--directory-packshot-scale, 1));
}

/* The renewal serum artwork has a broader, full-canvas silhouette and reads
   larger than the two oil packshots even at the same geometric height. Use a
   perceptual correction so the three 30 ml products share one visual scale.
   The id-level rule also neutralizes legacy hover scaling. */
.product-directory-page #product-muguang .product-image img,
.product-directory-page #product-muguang:hover .product-image img {
  transform: scale(0.81);
}

/* Jars are physically shorter than bottles, but need a little more visual
   weight so they do not disappear inside the shared 4:5 product stage. */
.product-directory-page #product-avocado-body-butter,
.product-directory-page #product-lavender-body-butter {
  --directory-packshot-scale: 1.18;
}

.product-directory-page #product-lavender-scrub {
  --directory-packshot-scale: 1.08;
}

.product-directory-page #product-lavender-scrub .product-image img,
.product-directory-page #product-lavender-scrub:hover .product-image img {
  width: 100%;
  height: 100%;
  transform: scale(var(--directory-packshot-scale));
}

.product-directory-page .product-series-chapter .editorial-product-list .product-card > strong {
  flex: 0 0 auto;
}

.product-directory-page .product-card-benefit,
.product-directory-page .product-card-meta {
  flex: 0 0 auto;
}

.product-directory-page .product-card-cta {
  align-self: stretch;
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
}

@media (max-width: 760px) {
  .product-directory-page .product-series-chapter .editorial-product-list .product-card,
  .product-directory-page .product-series-chapter .editorial-product-list .product-card + .product-card,
  .product-directory-page .product-series-chapter .editorial-product-list .product-card:last-child {
    min-height: 100%;
    padding: 20px 14px 26px;
  }

  .product-directory-page .product-series-chapter .editorial-product-list .product-card > strong {
    min-height: 3em;
  }

  .product-directory-page .product-card-benefit {
    min-height: 3.3em;
  }

  .product-directory-page .product-card-meta {
    min-height: 1.65em;
  }

  .product-directory-page .product-card-cta {
    padding-top: 20px;
  }
}