/* ═══════════════════════════════════════════════════════════════════════
   DONATI — IMAGE SIZING FIX (v24.5)
   Critical mobile fix: donati-mobile.css applies `max-height: 220px` and
   `aspect-ratio: auto` to .variant img inside @media (max-width: 768px),
   which kills any aspect-ratio override on the parent picture. v24.5
   neutralises that with matching !important rules inside the same media
   query, AND uses a dedicated CSS class (`variant-portrait`,
   `variant-landscape`, `variant-pendant-marg`) instead of relying solely
   on :has() — both selectors active for redundancy.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Default — square, contain, white background ─── */
.variant > picture,
.variant picture,
.sku-card-img,
.fam-chip-img,
.harmony-variant,
.ps-gallery figure,
.alta-gallery-grid figure,
.apiece-img,
.acoll-hero-img,
.fs-img,
.bc-card-img {
  overflow: hidden !important;
  background: #ffffff !important;
}
.sku-card-img, .fam-chip-img { padding: 0 !important; }

.variant img,
.sku-card-img img,
.fam-chip-img img,
.harmony-variant img,
.ps-gallery figure img,
.alta-gallery-grid figure img,
.apiece-img img,
.acoll-hero-img img,
.fs-img img,
.bc-card-img img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
  aspect-ratio: auto !important;   /* let parent's aspect-ratio drive shape */
}

/* ─── Portrait tiles (1:2) — necklaces & pendants ───
   Uses BOTH a dedicated class AND :has() for redundancy.        */
.variant.variant-portrait > picture,
.variant:has(img[src*="-NCK-FIOR"]) > picture,
.variant:has(img[src*="-NCK-VOL"])  > picture,
.variant:has(img[src*="-NCK-MARG"]) > picture,
.variant:has(img[src*="-PND-"])     > picture,
.variant:has(img[src*="LAVA-pendant-front"]) > picture,
.sku-card.sku-card-portrait .sku-card-img,
.sku-card:has(img[src*="-PND-"]) .sku-card-img,
.sku-card:has(img[src*="LAVA-pendant-front"]) .sku-card-img,
.alta-gallery-grid figure.figure-portrait,
.alta-gallery-grid figure:has(img[src*="-NCK-FIOR"]),
.alta-gallery-grid figure:has(img[src*="-NCK-VOL"]),
.alta-gallery-grid figure:has(img[src*="-PND-"]),
.alta-gallery-grid figure:has(img[src*="LAVA-pendant-front"]) {
  aspect-ratio: 1 / 2 !important;
}

/* ─── Margherita pendants (2:3) — wider than other pendants ─── */
.variant.variant-pendant-marg > picture,
.variant:has(img[src*="PND-MARG"]) > picture,
.sku-card.sku-card-pendant-marg .sku-card-img,
.sku-card:has(img[src*="PND-MARG"]) .sku-card-img,
.alta-gallery-grid figure.figure-pendant-marg,
.alta-gallery-grid figure:has(img[src*="PND-MARG"]) {
  aspect-ratio: 2 / 3 !important;
}

/* ─── Landscape (3:2) — pair-shot earrings & wide pieces ─── */
.variant.variant-landscape > picture,
.variant:has(img[src*="EAR-SOLE-FRONT"]) > picture,
.alta-gallery-grid figure.figure-landscape,
.alta-gallery-grid figure:has(img[src*="EAR-SOLE-FRONT"]) {
  aspect-ratio: 3 / 2 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — the critical bit. Override donati-mobile.css's max-height: 220px
   and aspect-ratio: auto that were limiting image height.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .variant img,
  .sku-card-img img,
  .fam-chip-img img,
  .harmony-variant img,
  .ps-gallery figure img,
  .alta-gallery-grid figure img,
  .apiece-img img,
  .acoll-hero-img img,
  .fs-img img,
  .bc-card-img img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: auto !important;
  }

  /* Re-apply the portrait/landscape aspect ratios on mobile too */
  .variant.variant-portrait > picture,
  .variant:has(img[src*="-NCK-FIOR"]) > picture,
  .variant:has(img[src*="-NCK-VOL"])  > picture,
  .variant:has(img[src*="-NCK-MARG"]) > picture,
  .variant:has(img[src*="-PND-"])     > picture,
  .variant:has(img[src*="LAVA-pendant-front"]) > picture {
    aspect-ratio: 1 / 2 !important;
  }
  .variant.variant-pendant-marg > picture,
  .variant:has(img[src*="PND-MARG"]) > picture {
    aspect-ratio: 2 / 3 !important;
  }
  .variant.variant-landscape > picture,
  .variant:has(img[src*="EAR-SOLE-FRONT"]) > picture {
    aspect-ratio: 3 / 2 !important;
  }
}

/* Lifestyle (worn) photos untouched. */