/* Vella Edit V5.5 | adaptive product and editorial photography
   The complete item remains visible at every viewport size. Grid dimensions are
   stable even while the image loads. Orientation metadata is enhancement only. */

/* A consistent pure-white canvas lets white-background fashion product photos blend in. */
:where(.journal-cover,.vella-editorial-photo,.vella-editorial-inline-photo,
       .p-card .photo,.v52-product-image,.v52-related-visual,
       .vella-bottom-photo,.cmp-visual,.matrix-thumb,.custom-visual,
       .v5-compare-feature,.v52-related-piece .photo) {
  background:#fff!important;
}

/* JOURNAL CARDS: do not crop handbag handles, coat hems or tall silhouettes.
   Reserve the same frame height for every card, so the article titles align. */
.journal-card .journal-cover {
  width:100%;
  height:clamp(220px,25vw,350px)!important;
  min-height:0;
  aspect-ratio:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  padding:clamp(3px,.6vw,10px);
  border:0!important;
  border-bottom:1px solid #eeeae4!important;
  margin-bottom:19px;
}
.journal-card .journal-cover img {
  display:block;
  width:100%;height:100%;
  max-width:100%;max-height:100%;
  object-fit:contain!important;
  object-position:center!important;
  padding:0;
  transform:none!important; /* zooming on hover must not crop a product again */
}
.journal-card:hover .journal-cover img {transform:none!important}
.journal-card .journal-cover[data-media-shape="tall"] img,
.journal-card .journal-cover[data-media-shape="portrait"] img {object-fit:contain!important}

/* PRODUCT CARDS: stable frames, with the exact item always fully visible. */
.p-card .photo,
.p-photo .photo {display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;background:#fff!important}
.p-card .photo img,.p-photo .photo img,
.v52-related-visual img,.vella-bottom-photo img,
.cmp-visual img,.compare-matrix .matrix-thumb img,
.custom-visual img {
  display:block;width:100%;height:100%;object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
.p-card .photo:hover img,.p-photo:hover .photo img {transform:none!important}

/* ARTICLES: the feature and gallery may use portrait, landscape or square assets.
   Images follow their natural proportions but cannot expand indefinitely. */
.vella-article-lead-media {min-width:0}
.vella-editorial-photo {
  margin:0!important;
  max-width:100%;
  border:0!important;
  background:#fff!important;
  text-align:center;
  overflow:hidden;
}
.vella-editorial-photo img {
  display:block;
  width:100%;height:clamp(245px,29vw,380px)!important;
  max-height:380px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
.vella-editorial-inline-photo {
  display:block;
  width:min(100%,730px);
  max-width:100%;
  margin:26px auto 31px!important;
  padding:0;
  background:#fff!important;
  border:0!important;
  overflow:visible!important;
  text-align:center;
}
.vella-editorial-inline-photo img {
  display:block;
  width:100%;
  height:auto!important;
  max-height:min(62vh,480px)!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
/* Tall images receive a more compact readable column, without clipping. */
.vella-editorial-inline-photo[data-media-shape="tall"],
.vella-editorial-inline-photo[data-media-shape="portrait"] {width:min(100%,570px)}
.vella-editorial-inline-photo[data-media-shape="wide"] {width:min(100%,730px)}
.vella-editorial-photo figcaption,
.vella-editorial-inline-photo figcaption {
  background:#fff!important;
  border:0!important;
  padding:7px 3px!important;
  font-size:11px;
  line-height:1.5;
  color:#726d66;
  text-align:left;
}

/* RETAILER COMPARISON AND PRODUCT FEATURE MEDIA */
.v52-product-image img,.v5-compare-feature img,
.v52-related-visual .photo img {
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}

@media(max-width:800px){
  .journal-card .journal-cover {height:clamp(210px,41vw,310px)!important}
  .vella-editorial-photo img{height:min(65vw,315px)!important;max-height:315px!important}
  .vella-editorial-inline-photo img{max-height:420px!important}
}
@media(max-width:520px){
  .journal-card .journal-cover {height:clamp(205px,67vw,320px)!important;padding:3px}
  .vella-editorial-photo img{height:clamp(220px,63vw,305px)!important}
  .vella-editorial-inline-photo{width:100%;margin:20px auto 26px!important}
  .vella-editorial-inline-photo img{max-height:350px!important}
}