/* FEWLIST V6 — scoped presentation-only patch.
   Loaded after V5. No changes to sliders, product cards, wishlist, search/cart layers or catalog.
*/
body.beauty-body {
    --fl-gold: #be8b39;
    --fl-deep-gold: #926321;
}

/* A dedicated brand image in the footer, falling back to the header logo when
   no footer logo has been uploaded in the CMS. Preserve the entire logo. */
body.beauty-body .beauty-footer-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: min(100%, 300px);
    min-height: 48px;
    text-decoration: none;
    vertical-align: top;
}
body.beauty-body .beauty-footer-brand .beauty-footer-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 210px);
    max-height: 86px;
    object-fit: contain !important;
    object-position: left center;
    filter: none;
}
body.beauty-body .beauty-footer-brand .beauty-footer-name {
    color: var(--fl-gold);
    font-size: clamp(22px, 2vw, 27px);
}

@media (min-width: 821px) {
    /* Translucent nav is legible on both very bright and very dark hero images.
       Do not remove the photo behind the glass-like navigation strip. */
    body.beauty-body .beauty-header .beauty-nav-wrap {
        background: rgba(255,255,255,.28) !important;
        /* border-top: 1px solid rgba(255,255,255,.25); */
        /* border-bottom: 1px solid rgba(63,43,20,.10); */
        /* -webkit-backdrop-filter: blur(110px) saturate(25%) !important; */
        backdrop-filter: blur(5px) saturate(125%) !important;
        /* box-shadow: 0 2px 10px rgba(35,25,12,.055); */
        transition: background-color .35s ease, box-shadow .35s ease;
    }
    body.beauty-body .beauty-header.is-scrolled .beauty-nav-wrap {
        background: rgba(255,255,255,.95) !important;
        box-shadow: 0 5px 20px rgba(31,23,15,.075);
    }
    /* Center exact relative to the full nav row (not the leftover space
       before the account/cart/search tools). Balance with a virtual spacer. */
    body.beauty-body .beauty-nav-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
        align-items: center;
        column-gap: 0;
    }
    body.beauty-body .beauty-nav-row::before {
        content: '';
        display: block;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    body.beauty-body .beauty-main-menu {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
        flex: none;
        width: max-content;
        max-width: 100%;
        overflow: visible;
        gap: clamp(3px, .65vw, 12px);
    }
    body.beauty-body .beauty-nav-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        margin-left: 0;
        position: relative;
        z-index: 2;
    }
    body.beauty-body .beauty-main-menu > a {
        color: #24201d !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.62);
    }
    body.beauty-body .beauty-main-menu > a[aria-current="page"],
    body.beauty-body .beauty-main-menu > a.is-current {color:#8b571d!important;}
}

/* Compact desktop: retain full menu and actions without collision. A narrow
   viewport may horizontally scroll the main links rather than hiding controls. */
@media (min-width: 821px) and (max-width: 1199px) {
    body.beauty-body .beauty-nav-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }
    body.beauty-body .beauty-nav-row::before { display: none; }
    body.beauty-body .beauty-main-menu {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        justify-content: safe center;
        gap: clamp(2px, .35vw, 6px);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }
    body.beauty-body .beauty-main-menu > a {
        font-size: clamp(11px, 1vw, 13px);
        padding: 8px 7px !important;
    }
    body.beauty-body .beauty-nav-actions {grid-column:2;grid-row:1;}
}

/* Mobile: logo remains visible while scrolling, in the same compact header
   row as hamburger/wishlist/cart/search. Respect V4 geometry. */
@media (max-width: 820px) {
    body.beauty-body .beauty-header .beauty-brand,
    body.beauty-body .beauty-header.is-scrolled .beauty-brand {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: flex !important;
        transform: none !important;
    }
    body.beauty-body .beauty-header .beauty-masthead,
    body.beauty-body .beauty-header.is-scrolled .beauty-masthead {
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }
    body.beauty-body .beauty-mobile-bar a,
    body.beauty-body .beauty-mobile-bar a span,
    body.beauty-body .beauty-mobile-bar a i {
        color: var(--fl-gold) !important;
        -webkit-text-fill-color: var(--fl-gold);
        transition: color .2s ease, transform .2s ease;
    }
    body.beauty-body .beauty-mobile-bar a:hover,
    body.beauty-body .beauty-mobile-bar a:hover span,
    body.beauty-body .beauty-mobile-bar a:hover i,
    body.beauty-body .beauty-mobile-bar a:focus-visible,
    body.beauty-body .beauty-mobile-bar a:focus-visible span,
    body.beauty-body .beauty-mobile-bar a:focus-visible i {
        color: var(--fl-deep-gold) !important;
        -webkit-text-fill-color: var(--fl-deep-gold);
    }
    body.beauty-body .beauty-mobile-bar a:focus-visible {
        outline: 2px solid var(--fl-gold);
        outline-offset: -4px;
        border-radius: 9px;
    }
    body.beauty-body .beauty-footer-brand .beauty-footer-logo {
        max-width: min(100%, 170px);
        max-height: 65px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.beauty-body .beauty-header .beauty-nav-wrap,
    body.beauty-body .beauty-mobile-bar a,
    body.beauty-body .beauty-mobile-bar a span,
    body.beauty-body .beauty-mobile-bar a i { transition: none !important; }
}