/* FEWLIST V5: media fill + premium current-page nav.
   Safe to load after lumiere-responsive-v4.css and lumiere-social-header.css.
   Never force-fit brand logos, icons, review avatars, or editor content paragraphs. */
body.beauty-body { --fl-active:#bc8739; --fl-active-bg:rgba(191,139,57,.12); }
/* Uploaded images fill fixed-card areas without white/blank letterboxing.
   Cropping is intentional; use purpose-designed portrait hero assets on mobile. */
body.beauty-body .lm-category img,
body.beauty-body .lm-product-img img,
body.beauty-body .lm-treatment img,
body.beauty-body .lm-special-card>img,
body.beauty-body .lm-editorial img,
body.beauty-body .lm-story-grid img,
body.beauty-body .sh-pdp-rec-media img,
body.beauty-body .sh-pdp-stage .sh-pdp-slide img,
body.beauty-body .sh-pdp-thumb img,
body.beauty-body .product-media img,
body.beauty-body .gb-product-card .gb-product-image img,
body.beauty-body .gb-product-card .product-media img,
body.beauty-body .sh-product-card img,
body.beauty-body .sh-card-image img {
    display:block; width:100%; height:100%; max-width:100%; object-fit:cover!important;
    object-position:var(--fl-image-focus,center center);
}
body.beauty-body .lm-category img{aspect-ratio:1.22;max-height:none;}
body.beauty-body .lm-product-img{overflow:hidden;}
body.beauty-body .lm-product-img img{aspect-ratio:1.06;}
body.beauty-body .lm-treatment img{aspect-ratio:1.18;}
body.beauty-body .lm-story-grid img{aspect-ratio:1.25;}
body.beauty-body .lm-special-card>img{aspect-ratio:1.5;}
body.beauty-body .sh-pdp-rec-media img{aspect-ratio:1;}
/* Hero campaign asset always covers the stage (no blank sides). */
/* Desktop remains immersive cover. V4 mobile intentionally preserves the full banner. */
@media(min-width:821px){
    body.beauty-home-page .lm-hero .lm-slide::before{
        background-size:cover!important;
        background-position:var(--fl-image-focus,center center)!important;
        background-repeat:no-repeat!important;
    }
}
/* On narrow screens, show the entire banner over a full-frame copy of itself.
   This avoids letterbox-colored strips without sacrificing the image details. */
@media(max-width:820px){
    body.beauty-home-page .lm-hero .lm-slide:not(.has-mobile-photo)::before{
        background-image:var(--lm-photo),var(--lm-photo)!important;
        background-size:contain,cover!important;
        background-position:center,center!important;
        background-repeat:no-repeat!important;
    }
    body.beauty-home-page .lm-hero .lm-slide.has-mobile-photo::before{
        background-image:var(--lm-mobile-photo)!important;
        background-size:cover!important;
        background-position:center 35%!important;
    }
}
/* Keep uploaded logo whole; it's NOT a cropped promotional image. */
body.beauty-body .beauty-brand img,
body.beauty-body .beauty-logo-img {object-fit:contain!important;}
/* Premium active state, consistent while sticky/scrolled. */
body.beauty-body .beauty-main-menu > a {
    position:relative; padding:9px 13px!important; margin:0!important;
    border:1px solid transparent!important; border-radius:24px;
    color:#292724; text-decoration:none;
    transition:background-color .24s ease,color .24s ease,border-color .24s ease,box-shadow .24s ease!important;
}
body.beauty-body .beauty-main-menu > a:hover {
    background:rgba(191,139,57,.07);color:#985f22;
}
body.beauty-body .beauty-main-menu > a[aria-current="page"],
body.beauty-body .beauty-main-menu > a.is-current {
    color:#8b571d!important;
    background:var(--fl-active-bg)!important;
    border:1px solid rgba(185,130,48,.20)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)!important;
}
body.beauty-body .beauty-main-menu > a[aria-current="page"]::after {
    content:"";position:absolute;left:21%;right:21%;bottom:3px;height:2px;
    border-radius:5px;background:var(--fl-active);
}
body.beauty-body .beauty-main-menu > a:focus-visible{
    outline:2px solid var(--fl-active);outline-offset:2px;
}
@media(max-width:820px){
    body.beauty-body .beauty-main-menu > a,
    body.beauty-body .beauty-main-menu > a[aria-current="page"] {
        display:block;width:100%;border-radius:10px!important;
        padding:12px 14px!important;margin:0!important;
    }
    body.beauty-body .beauty-main-menu > a[aria-current="page"]::after{
        left:0;top:20%;bottom:20%;height:auto;width:3px;right:auto;
    }
}
@media(prefers-reduced-motion:reduce){
    body.beauty-body .beauty-main-menu > a{transition:none!important;}
}

body.beauty-body .beauty-utility-links a[aria-current="page"] {
    color:#9c6a2b!important;text-decoration:underline;text-decoration-color:#c8a16d;
    text-decoration-thickness:2px;text-underline-offset:5px;
}