/*
 * FEWLIST / Lumiere responsive hardening v4
 * Loaded AFTER lumiere.css; it does not replace the existing slider,
 * wishlist, navigation-transition, or search/cart layering patches.
 * Ranges: 320–359, 360–599, 600–820, 821–1199, 1200–1799, 1800–2560+.
 */

body.beauty-body {
    --lm-page-max: 1640px;
    --lm-gutter: clamp(14px, 3.1vw, 46px);
    overflow-x: clip;
}
body.beauty-body img { max-width: 100%; }
body.beauty-body .beauty-main,
body.beauty-body .beauty-main > *,
body.beauty-body .container,
body.beauty-body .lm-wrap,
body.beauty-body .sh-shop-layout,
body.beauty-body .sh-shop-content,
body.beauty-body .product-detail-layout,
body.beauty-body .checkout-layout { min-width: 0; }
body.beauty-body .lm-wrap,
body.beauty-body .beauty-footer-grid,
body.beauty-body .beauty-footer-bottom {
    width: min(calc(100% - 2 * var(--lm-gutter)), var(--lm-page-max));
    max-width: var(--lm-page-max);
}
body.beauty-body .beauty-footer-bottom { margin-inline: auto; }
body.beauty-body .beauty-utility,
body.beauty-body .beauty-nav-row { max-width: 1740px; }
body.beauty-body .beauty-header .beauty-brand img {
    display: block;
    height: auto;
    object-fit: contain;
}
/* Prevent desktop background from being forced into a mobile-style crop. */
body.beauty-home-page .lm-hero .lm-slide::before {
    background-position: center center !important;
}
/* Keep image-only campaigns image-only even when CMS retains older copy. */
body.beauty-home-page .lm-hero .lm-slide-shade,
body.beauty-home-page .lm-hero .lm-slide-content,
body.beauty-home-page .lm-hero .lm-hero-seal { display: none !important; }
body.beauty-home-page .lm-hero .lm-slide { isolation: isolate; }
body.beauty-home-page .lm-hero-controls { z-index: 5; }
body.beauty-body .beauty-up { z-index: 65; }
/* Keep cart/search click targets above dimming layer, including on mobile. */
body.beauty-body > .overlay { z-index: 200 !important; }
body.beauty-body .search-panel.beauty-search-panel,
body.beauty-body .cart-drawer.beauty-cart-drawer { z-index: 240 !important; }
/* Wishlist placement is owned by the existing Shop-style patch; never restyle it here. */

/* Responsive image grids and text sizes for the shopfront. */
body.beauty-body .lm-category-grid,
body.beauty-body .lm-product-grid,
body.beauty-body .lm-treatment-grid,
body.beauty-body .lm-story-grid,
body.beauty-body .lm-special-grid,
body.beauty-body .sh-shop-grid { min-width: 0; }
body.beauty-body .lm-category,
body.beauty-body .lm-product,
body.beauty-body .lm-treatment,
body.beauty-body .lm-story-grid > a,
body.beauty-body .sh-shop-grid > * { min-width: 0; }
body.beauty-body .lm-section-head h2 {
    font-size: clamp(24px, 2.1vw, 36px);
    line-height: 1.25;
}
body.beauty-body .lm-product-name,
body.beauty-body .lm-treatment strong { overflow-wrap: anywhere; }
body.beauty-body .lm-card-buttons > button[data-card-cart] { min-height: 34px; }
body.beauty-body .lm-product-grid { gap: clamp(10px, 1.5vw, 22px); }
body.beauty-body .lm-treatment-grid { gap: clamp(11px, 1.5vw, 22px); }
body.beauty-body .lm-story-grid img { display: block; object-fit: cover; }

@media (min-width: 1800px) {
    body.beauty-body .lm-wrap,
    body.beauty-body .beauty-footer-grid,
    body.beauty-body .beauty-footer-bottom { --lm-page-max: 1760px; }
    body.beauty-body .beauty-nav-row,
    body.beauty-body .beauty-utility { max-width: 1820px; }
    body.beauty-home-page .lm-hero { height: clamp(690px, 35vw, 880px); }
    body.beauty-body .lm-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    body.beauty-body .lm-product-grid,
    body.beauty-body .sh-shop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    body.beauty-body .lm-treatment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.beauty-body .lm-product-img { aspect-ratio: 1.1; }
    body.beauty-body .lm-category img { aspect-ratio: 1.2; }
}
@media (min-width: 2300px) {
    body.beauty-body .lm-wrap,
    body.beauty-body .beauty-footer-grid,
    body.beauty-body .beauty-footer-bottom { --lm-page-max: 1820px; }
    body.beauty-home-page .lm-hero { height: clamp(790px, 35vw, 950px); }
    body.beauty-body .lm-product-grid,
    body.beauty-body .sh-shop-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 821px) and (max-width: 1199px) {
    body.beauty-body .lm-wrap { width: calc(100% - 48px); }
    body.beauty-body .beauty-utility-links { gap: 14px; }
    body.beauty-body .beauty-main-menu { gap: 14px; }
    body.beauty-body .beauty-nav-actions { gap: 10px; }
    body.beauty-body .lm-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.beauty-body .lm-category:nth-child(n+5) { display: none; }
    body.beauty-body .lm-product-grid,
    body.beauty-body .sh-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.beauty-body .lm-treatment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.beauty-body .beauty-footer-grid { grid-template-columns: 1.7fr repeat(3, 1fr); }
    body.beauty-body .beauty-footer-grid section:last-child { grid-column: 2 / -1; }
}

/* MOBILE/TABLET: one compact row with hamburger, logo, and actions. */
@media (max-width: 820px) {
    body.beauty-body { --lm-gutter: clamp(12px, 3.5vw, 24px); }
    body.beauty-body .lm-wrap { width: calc(100% - 2 * var(--lm-gutter)); }
    body.beauty-home-page .beauty-header,
    body.beauty-home-page .beauty-header.is-scrolled,
    body.beauty-inner-page .beauty-header,
    body.beauty-inner-page .beauty-header.is-scrolled {
        position: sticky !important;
        inset: 0 0 auto !important;
        width: 100%;
        background: #fff !important;
        box-shadow: 0 1px 0 rgba(30, 25, 20, .09);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body.beauty-body .beauty-header { min-height: 62px; }
    body.beauty-body .beauty-masthead,
    body.beauty-body .beauty-header.is-scrolled .beauty-masthead {
        height: 0 !important;
        max-height: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: none;
    }
    body.beauty-body .beauty-utility {
        height: 0 !important;
        min-height: 0;
        padding: 0 !important;
        position: relative;
        overflow: visible;
    }
    body.beauty-body .beauty-brand {
        left: 53px !important;
        top: 8px !important;
        transform: none !important;
        position: absolute;
        display: flex;
        width: clamp(90px, 20vw, 142px);
        min-width: 0;
        height: 45px;
        align-items: center;
        justify-content: flex-start;
        opacity: 1;
        pointer-events: auto;
        transition: opacity .25s ease;
        z-index: 152;
    }
    body.beauty-body .beauty-brand .beauty-logo-img { max-width: 100%; max-height: 42px; width: auto; }
    body.beauty-body .beauty-brand strong { font-size: 17px; }
    body.beauty-body .beauty-brand small { display: none; }
    body.beauty-body .beauty-header.is-scrolled .beauty-brand { opacity: 0; pointer-events: none; }
    body.beauty-body .beauty-nav-wrap,
    body.beauty-body .beauty-header.is-scrolled .beauty-nav-wrap { background: #fff !important; }
    body.beauty-body .beauty-nav-row {
        min-height: 62px !important;
        height: 62px;
        max-height: 62px;
        padding: 0 12px !important;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
    }
    body.beauty-body .beauty-mobile-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        min-height: 44px;
        min-width: 36px;
        color: #24211e;
        padding: 0;
    }
    body.beauty-body .beauty-main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: min(68dvh, 610px);
        overflow-y: auto;
        background: #fff;
        padding: 9px 15px 14px;
        box-shadow: 0 22px 35px rgba(20, 16, 13, .14);
        border-top: 1px solid #eee8de;
        border-radius: 0 0 15px 15px;
        z-index: 160;
        flex-direction: column;
        white-space: normal;
    }
    body.beauty-body .beauty-header.menu-open .beauty-main-menu { display: flex; }
    body.beauty-body .beauty-main-menu a {
        width: 100%;
        min-height: 42px;
        margin: 0;
        padding: 10px 8px;
        font-size: 13px;
        color: #302824;
        border-bottom: 1px solid #f3f0ea;
    }
    body.beauty-body .beauty-main-menu a[aria-current] { margin: 0; padding: 10px 8px; border-bottom: 1px solid #f3f0ea; }
    body.beauty-body .beauty-nav-actions { display: flex; flex: 0 0 auto; margin-left: auto; align-items: center; gap: clamp(0px, 1vw, 9px); }
    body.beauty-body .beauty-nav-actions > a,
    body.beauty-body .beauty-nav-actions > button {
        min-width: 35px;
        min-height: 43px;
        display: grid;
        place-items: center;
        padding: 6px;
        font-size: 19px;
        color: #2a2725;
    }
    body.beauty-body .beauty-nav-actions .beauty-account { display: none !important; }
    body.beauty-body .beauty-nav-actions b { top: 2px; right: 0; }

    /* no desktop-header overlap; keep every part of each landscape slide visible */
    body.beauty-home-page .beauty-main { padding-top: 0 !important; }
    body.beauty-home-page .lm-hero {
        height: clamp(184px, 44vw, 345px);
        min-height: 184px;
        background: #f4f3f1;
        isolation: isolate;
    }
    body.beauty-home-page .lm-hero .lm-slide::before {
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        transform: none !important;
        transition: none !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;
    }
    /* CMS: all three portrait banners uploaded -> tall mobile-first slide. */
    body.beauty-home-page .lm-hero.lm-has-mobile-creative { height: clamp(380px, 112vw, 600px); }
    body.beauty-home-page .lm-hero-controls {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        gap: 14px;
        padding: 3px 8px;
        background: rgba(255,255,255,.83);
        border: 1px solid rgba(225,219,209,.74);
        border-radius: 24px;
        backdrop-filter: blur(10px);
    }
    body.beauty-body .lm-hero-controls button:not([data-lm-slide]) { width: 27px; height: 27px; font-size: 17px; }
    body.beauty-body .lm-hero-dots button { width: 8px; height: 8px; }
    body.beauty-body .lm-hero-dots button.active { width: 22px; }

    body.beauty-body .lm-section { padding-top: 31px; padding-bottom: 14px; }
    body.beauty-body .lm-section-head { margin-bottom: 15px; align-items: center; }
    body.beauty-body .lm-category-grid {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 2px;
        padding: 3px 2px 12px;
        scrollbar-width: none;
    }
    body.beauty-body .lm-category-grid::-webkit-scrollbar,
    body.beauty-body .lm-filter-nav::-webkit-scrollbar { display: none; }
    body.beauty-body .lm-category,
    body.beauty-body .lm-category:nth-child(n+6) {
        display: block;
        flex: 0 0 clamp(132px, 31vw, 190px);
        scroll-snap-align: start;
    }
    body.beauty-body .lm-category h3 { font-size: 12px; }
    body.beauty-body .lm-category span { font-size: 10px; }
    body.beauty-body .lm-filter-nav { flex-wrap: nowrap; gap: 7px; overflow-x: auto; margin: 0 0 13px; padding-bottom: 6px; scrollbar-width: none; }
    body.beauty-body .lm-filter-nav a { white-space: nowrap; padding: 6px 11px; }
    body.beauty-body .lm-product-grid,
    body.beauty-body .sh-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 9px; }
    body.beauty-body .lm-treatment-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
    body.beauty-body .lm-product-img { aspect-ratio: 1; }
    body.beauty-body .lm-product-info { padding: 10px 9px; }
    body.beauty-body .lm-product-name { min-height: 43px; font-size: 12px !important; line-height: 1.4; }
    body.beauty-body .lm-product-prices { flex-wrap: wrap; gap: 3px 7px; }
    body.beauty-body .lm-product-prices strong { font-size: 13px; }
    body.beauty-body .lm-rating { font-size: 10px; }
    body.beauty-body .lm-rating small { display: block; padding-left: 0; }
    body.beauty-body .lm-card-buttons > button[data-card-cart] { min-height: 35px; width: 100%; font-size: 11px; }
    body.beauty-body .lm-media-section { padding-block: 26px 25px; }
    body.beauty-body .lm-press-names { overflow-x: auto; gap: 16px; justify-content: flex-start; padding: 12px 0; }
    body.beauty-body .lm-press-names span { flex-shrink: 0; font-size: 15px; }
    body.beauty-body .lm-values { grid-template-columns: repeat(2, minmax(0,1fr)); }
    body.beauty-body .lm-story-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    body.beauty-body .lm-editorial { grid-template-columns: 1fr; }
    body.beauty-body .lm-special-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    body.beauty-body .beauty-footer { padding-top: 32px; padding-bottom: 88px; }
    body.beauty-body .beauty-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
    body.beauty-body .beauty-footer-grid section:first-child { grid-column: 1 / -1; }
    body.beauty-body .beauty-footer-bottom { margin-top: 26px; padding-block: 15px; flex-direction: column; gap: 8px; }
    body.beauty-body .beauty-up { bottom: 85px; right: 15px; width: 39px; height: 39px; }
    body.beauty-body .beauty-mobile-bar {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        left: 10px; right: 10px;
        bottom: max(9px, env(safe-area-inset-bottom));
        height: 58px;
        border-radius: 16px;
        z-index: 125;
        box-shadow: 0 8px 28px rgba(20, 18, 15, .13);
    }
    body.beauty-body .beauty-mobile-bar a { color: #4e4540; min-width: 0; }
    body.beauty-body .beauty-mobile-bar a i { font-size: 16px; }

    /* Shop, product details, checkout, contact forms */
    body.beauty-body .container,
    body.beauty-body .section > .container,
    body.beauty-body .sh-shop-section > .container { width: calc(100% - 2 * var(--lm-gutter)) !important; max-width: 100%; }
    body.beauty-body .sh-shop-layout { grid-template-columns: minmax(0,1fr); }
    body.beauty-body .sh-shop-toolbar,
    body.beauty-body .sh-shop-toolbar-v3 { flex-wrap: wrap; gap: 10px; }
    body.beauty-body .sh-shop-search { flex: 1 1 100%; min-width: 0; }
    body.beauty-body .sh-shop-search input { min-width: 0; width: 100%; }
    body.beauty-body .sh-shop-results,
    body.beauty-body .sh-sort-form { min-width: 0; }
    body.beauty-body .sh-sort-form select { max-width: 180px; }
    body.beauty-body .sh-shop-grid .product-card,
    body.beauty-body .sh-shop-grid .gb-product-card { min-width: 0; }
    body.beauty-body .checkout-layout { grid-template-columns: 1fr; }
    body.beauty-body .lm-form-wrap { margin: 20px var(--lm-gutter); padding: 18px; }
    body.beauty-body .lm-form-wrap input,
    body.beauty-body .lm-form-wrap select,
    body.beauty-body .lm-form-wrap textarea { font-size: 16px; }
    body.beauty-body .page-hero h1 { font-size: clamp(25px, 6vw, 37px) !important; }
    body.beauty-body .lm-page-hero { padding: 34px var(--lm-gutter); }

    /* Actual click-safe and viewport-safe overlay geometry */
    body.beauty-body .beauty-search-panel.search-panel {
        width: min(calc(100vw - 24px), 560px) !important;
        left: 50%;
        top: clamp(72px, 12dvh, 110px);
        padding: 14px;
        max-height: min(75dvh, 660px);
        overflow-y: auto;
    }
    body.beauty-body .beauty-search-panel .searchbar { gap: 7px; }
    body.beauty-body .beauty-search-panel .searchbar input { width: 0; min-width: 0; flex: 1 1 auto; font-size: 16px; }
    body.beauty-body .beauty-search-panel .searchbar button { flex-shrink: 0; padding-inline: 12px; }
    body.beauty-body .beauty-cart-drawer.cart-drawer {
        width: min(100vw, 420px) !important;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    body.beauty-body .beauty-cart-drawer .drawer-body { min-height: 0; overflow-y: auto; }
    body.beauty-body .beauty-cart-drawer .drawer-foot { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (max-width: 599px) {
    body.beauty-body .beauty-brand { left: 52px !important; top: 9px !important; width: 116px; }
    body.beauty-body .beauty-brand .beauty-logo-img { max-height: 39px; }
    body.beauty-body .lm-section-head h2 { font-size: clamp(22px, 6vw, 27px); }
    body.beauty-body .lm-section-head a { font-size: 11px; }
    body.beauty-body .lm-treatment strong { font-size: 12px; }
    body.beauty-body .lm-treatment img { aspect-ratio: 1.1; }
    body.beauty-body .lm-treatment small,
    body.beauty-body .lm-treatment span { font-size: 10px; }
    body.beauty-body .lm-editorial img { height: 245px; }
    body.beauty-body .beauty-footer-grid h3 { font-size: 12px; }
    body.beauty-body .beauty-footer-grid section > a:not(.beauty-footer-brand) { font-size: 11px; margin: 8px 0; }
}
@media (max-width: 359px) {
    body.beauty-body .beauty-nav-row { padding-inline: 8px !important; }
    body.beauty-body .beauty-mobile-toggle { flex-basis: 33px; min-width: 33px; }
    body.beauty-body .beauty-brand { left: 43px !important; width: 102px; }
    body.beauty-body .beauty-nav-actions { gap: 0; }
    body.beauty-body .beauty-nav-actions > a,
    body.beauty-body .beauty-nav-actions > button { min-width: 33px; padding: 5px; font-size: 18px; }
    body.beauty-body .lm-category { flex-basis: 126px; }
    body.beauty-body .lm-product-grid,
    body.beauty-body .sh-shop-grid { gap: 9px 7px; }
    body.beauty-body .lm-product-info { padding-inline: 7px; }
    body.beauty-body .lm-rating small { font-size: 9px; }
    body.beauty-body .lm-card-buttons > button[data-card-cart] { font-size: 10px; }
    body.beauty-body .lm-special-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    body.beauty-body .beauty-brand,
    body.beauty-body .lm-hero .lm-slide::before,
    body.beauty-body .beauty-header,
    body.beauty-body .beauty-nav-row { transition: none !important; }
}

/* Keep the back-to-top action away from the hero until the visitor scrolls. */
body.beauty-body .beauty-up {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
body.beauty-body .beauty-up.lm-show-up {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
body.beauty-home-page .lm-hero { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) {
    body.beauty-body .beauty-up { transition: none; }
}

/* SCommerce core declares !important column counts: explicitly override them
 * in our last-loaded file for consistent breakpoint behavior. */
@media (max-width: 820px) {
    body.beauty-body .sh-shop-grid.sh-shop-grid-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 821px) and (max-width: 1199px) {
    body.beauty-body .sh-shop-grid.sh-shop-grid-v3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1800px) and (max-width: 2299px) {
    body.beauty-body .sh-shop-grid.sh-shop-grid-v3 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 2300px) {
    body.beauty-body .sh-shop-grid.sh-shop-grid-v3 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}