/* ME-LIPS V8.0 – premium, high-resolution authentic packshots and education panels */
/* Product cards: never upscale or crop the supplied 1254px photographs. */
.v3-collection .v3-product-image {
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:#fff !important;padding:clamp(14px,3vw,25px) 0 !important;
  min-height:0 !important;height:auto !important;aspect-ratio:auto !important;
}
.v3-collection .v3-product-image > img {
  width:80% !important;max-width:460px !important;max-height:none !important;
  height:auto !important;aspect-ratio:1/1 !important;object-fit:contain !important;
  margin:0 auto !important;display:block;filter:none!important;image-rendering:auto;
}
/* Intro two-shade examples are small tiles; allow enough width for packaging to be seen. */
.v77-jar-pair figure{background:#fff !important}
.v77-jar-pair figure img{display:block;width:92%!important;max-width:360px!important;height:auto!important;aspect-ratio:1/1!important;object-fit:contain!important;margin:0 auto}
/* Detail pages show product without the large pale-pink empty area. */
.lx-product-image,.lx-product-image.lx-red,.lx-product-image.lx-pink,
body:not(.v3) .products .product-img{background:#fff!important}
.lx-product-image img,body:not(.v3) .products .product-img img{max-width:min(100%,520px)!important;margin-inline:auto!important;object-fit:contain!important}
/* Informational visual panels: deliberately preserve the source image's aspect ratio, never enlarge. */
.v80-learning,.v80-shades-guide{background:#fff;padding:clamp(38px,6vw,85px) 0;border-top:1px solid #f3e9e6;}
.v80-learning .v3-container,.v80-shades-guide .v3-container{max-width:1240px}
.v80-visual-heading{text-align:center;max-width:790px;margin:0 auto 26px}
.v80-visual-heading .v3-eyebrow{color:#a67b51}
.v80-visual-heading h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.75rem,3.6vw,3.2rem);font-weight:400;line-height:1.18;letter-spacing:-.025em;color:#342329;margin:10px auto 12px}
.v80-visual-heading p{line-height:1.75;color:#77646a;font-size:clamp(.91rem,1.3vw,1.04rem)}
.v80-graphic{margin:0 auto;max-width:1170px;background:white}
.v80-scroll-hint{display:none}
.v80-graphic img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;background:#fff}
.v80-graphic figcaption{text-align:center;font-size:.8rem;color:#817077;margin:12px auto 0;line-height:1.6;max-width:820px}
.v80-in-existing{margin:40px auto 8px;width:100%;}
.v80-in-existing img{border-radius:3px}
.v80-in-existing figcaption{padding:0 12px}
.v80-page-visual{margin:0 auto 42px}
.v80-page-visual .v80-graphic{max-width:1050px}
.v80-page-visual h2{font:400 clamp(1.75rem,3vw,2.4rem)/1.2 Georgia,serif;text-align:center;margin:0 0 22px}
.v80-page-visual .v80-scroll-hint{display:none}
@media(max-width:720px){
 .v3-collection .v3-product-image{padding:12px 0!important}
 .v3-collection .v3-product-image > img{width:84%!important;max-width:330px!important}
 .v77-jar-pair figure img{width:92%!important;max-width:350px!important}
 .v80-learning,.v80-shades-guide{padding:38px 0}
 .v80-visual-heading{padding:0 6px;margin-bottom:19px}
 /* Text within supplied landscape infographics is too fine when scaled to 350px.
    Allow touch scrolling at legible size instead of squishing the diagram. */
 .v80-scroll{overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-color:#d6b7b8 #fff;touch-action:pan-x pan-y}
 .v80-scroll img{width:800px;max-width:none;height:auto}
 .v80-scroll.v80-ingredients-scroll img{width:900px}
 .v80-scroll.v80-comparison-scroll img{width:720px}
 .v80-scroll-hint{display:block!important;margin:0 0 8px;color:#916d72;font-size:.77rem;letter-spacing:.03em;text-align:center}
 .v80-graphic figcaption{padding:0 6px;font-size:.74rem}
 .v80-page-visual{margin-bottom:28px}
}

/* Use the straight-on Pink Glow packshot on small shade detail pages. */
body:not(.v3) .products .product-img picture{display:block;width:100%}
body:not(.v3) .products .product-img picture img{display:block;width:100%;height:auto;object-fit:contain}
