/* Scarlet palette and presentation. Existing hooks, controls and behavior remain intact. */
body { --scarlet-ink: #533f29; --scarlet-gold: #806132; --scarlet-cream: #ece8df; }
.beautys-header, .beautys-header button, .beautys-header input, .beautys-announcement { font-family: Arial, Helvetica, sans-serif; }
.beautys-header { color: var(--scarlet-ink); background: #fff; }
.beautys-header__nav .ps-mainmenu__tree-link { color: var(--scarlet-ink); }
.beautys-header__nav .ps-mainmenu__tree-link:hover,
.beautys-header__nav .ps-mainmenu__tree-link:focus-visible { color: var(--scarlet-gold); }
.beautys-header__actions .header-block__badge, .beautys-menu-badge { background: var(--scarlet-gold); color: #fff; }
.beautys-header .ps-searchbar__form { border-color: #b8aa96; background: transparent; }
.beautys-header .ps-searchbar__form:focus-within { border-color: var(--scarlet-gold); }
.beautys-header .ps-searchbar__input { color: var(--scarlet-ink); }
.beautys-header .ps-searchbar__input::placeholder { color: #826f5a; }
.beautys-header__actions .header-block__icon,
.beautys-header-icons__heart { filter: sepia(1) saturate(.6) brightness(.65); }
.beautys-header__nav .submenu { background: #fff; color: var(--scarlet-ink); }
.beautys-header__nav .submenu a { color: var(--scarlet-ink); }
.beautys-header__nav .submenu a:hover { color: var(--scarlet-gold); }
.beautys-menu-badge::after { border-top-color: var(--scarlet-gold); }
.beautys-announcement { --beautys-announcement-height: 47px; background: var(--scarlet-gold); color: #fff; border-bottom: 1px solid rgb(255 255 255 / 20%); }
.beautys-locale--desktop { color: inherit; font-family: inherit; right: 45px; }
.beautys-locale__select option { background: #fff; color: #533f29; }
.beautys-locale--desktop .beautys-locale__divider { background: rgb(255 255 255 / 35%); }
.beautys-locale--desktop .beautys-locale__item.is-selectable:hover,
.beautys-locale--desktop .beautys-locale__item.is-selectable:focus-within { color: #fff1d8; }
/* Only the homepage header overlays the banner; sticky classes retain their existing logic. */
#index > .beautys-announcement { position: absolute; top: 0; left: 0; z-index: 110; background: transparent; }
#index #header.header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) { position: absolute; top: 47px; left: 0; width: 100%; z-index: 100; background: transparent; }
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .beautys-header { background: transparent; color: #fff; }
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .beautys-header__logo,
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .header-block__icon,
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .beautys-header-icons__heart,
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .ps-searchbar__magnifier { filter: brightness(0) invert(1); }
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .ps-mainmenu__tree-link,
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .ps-mainmenu__tree-dropdown-toggle,
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .menu-toggle,
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .ps-searchbar__input { color: #fff; }
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .ps-searchbar__input::placeholder { color: rgb(255 255 255 / 85%); }
#index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .ps-searchbar__form { border-color: rgb(255 255 255 / 60%); background: rgb(0 0 0 / 8%); }
#header.beautys-header--compact .beautys-header,
#header.beautys-header--mobile-sticky .beautys-header { background: #ece8df; }
/* The banner stays managed by beautysheroslider, including text, links and playback. */
#index .beautys-hero { --beautys-hero-accent: #806132; --beautys-hero-button: #fff; font-family: Arial, Helvetica, sans-serif; background: #79500e; }
#index .beautys-hero__viewport, #index .beautys-hero__slides { aspect-ratio: 1920 / 936; }
#index .beautys-hero__content { left: 80px; bottom: 80px; width: min(700px, calc(100% - 160px)); color: #fff; }
#index .beautys-hero__title-bold, #index .beautys-hero__title-light { font-family: inherit; font-size: clamp(36px, 3vw, 60px); font-weight: 700; line-height: 1.12; white-space: normal; }
#index .beautys-hero__button { color: #533f29; background: #fff; min-height: 50px; padding: 0 38px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
#index .beautys-hero__button:hover, #index .beautys-hero__button:focus-visible { color: #fff; background: #806132; }
@media (min-width: 1200px) {
  #header.header .beautys-header__main, #header.header .beautys-header__nav-inner { width: 100%; max-width: none; padding-left: 45px; padding-right: 45px; }
  #header.header .beautys-header__main { min-height: 80px; }
  #header.header.beautys-header--compact .beautys-header__main { min-height: 70px; }
}
@media (max-width: 1199px) {
  #index .beautys-hero__content { left: 35px; bottom: 50px; width: calc(100% - 70px); }
  .beautys-locale--desktop { right: 24px; }
}
@media (max-width: 767px) {
  #index .beautys-hero__viewport, #index .beautys-hero__slides { aspect-ratio: 750 / 1050; }
  #index .beautys-hero__slides { display: block; }
  #index .beautys-hero__slide { position: absolute; inset: 0; }
  #index .beautys-hero__picture { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  #index .beautys-hero__image { object-fit: cover; }
  #index .beautys-hero__content { position: absolute; left: 20px; bottom: 70px; width: calc(100% - 40px); padding: 0; background: transparent; align-items: flex-start; text-align: left; }
  #index .beautys-hero__title { margin-bottom: 20px; }
  #index .beautys-hero__title-bold, #index .beautys-hero__title-light { font-size: 28px; }
  #index .beautys-hero__button { min-height: 42px; padding: 0 26px; font-size: 12px; }
}
/* Keep the announcement behind open native drawers and their close buttons. */
#index:has(.offcanvas.show) > .beautys-announcement,
#index:has(.offcanvas.showing) > .beautys-announcement { z-index: 90; }
.beautys-header__compact-search-toggle { color: #806132; }
.beautys-header__compact-search-icon { filter: sepia(1) saturate(.6) brightness(.65); }
@media (max-width: 1199.98px) {
  #mobileMenu { background: #fff; color: #533f29; }
  .beautys-mobile-menu__header, .beautys-mobile-menu__account { background: #ece8df; border-color: #d5cabb; color: #533f29; }
  .beautys-mobile-menu__title, .beautys-mobile-menu__row, .beautys-mobile-menu__account-icon,
  .beautys-mobile-menu__account-arrow { color: #533f29; }
  .beautys-mobile-menu__row { border-color: #ded6c9; }
  .beautys-mobile-menu__row:hover, .beautys-mobile-menu__row:focus-visible,
  .beautys-mobile-menu__account:hover, .beautys-mobile-menu__close:hover { background: #f4f0e9; color: #806132; }
  .beautys-mobile-menu__account-icon { border-color: #d5cabb; }
}
/* Image navigation is generated from the same backend-managed slides. */
#index .beautys-hero__thumbnails {
  left: auto; right: 30px; bottom: 40px; gap: 12px; padding: 0; background: transparent; align-items: stretch;
}
#index .beautys-hero__thumbnails .beautys-hero__dot {
  position: relative; width: 50px; height: 180px; flex: 0 0 auto; padding: 0;
  overflow: hidden; border: 2px solid rgb(255 255 255 / 35%); border-radius: 0;
  background: transparent; transition: width .4s ease, border-color .25s ease; cursor: pointer;
}
#index .beautys-hero__thumbnails .beautys-hero__dot.is-active { width: 140px; border-color: #fff; }
#index .beautys-hero__thumbnail-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#index .beautys-hero__thumbnails .beautys-hero__dot:hover { border-color: #fff; }
#index .beautys-hero__thumbnails .beautys-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
  #index .beautys-hero__thumbnails { right: 20px; bottom: 10px; gap: 7px; }
  #index .beautys-hero__thumbnails .beautys-hero__dot { width: 34px; height: 90px; }
  #index .beautys-hero__thumbnails .beautys-hero__dot.is-active { width: 70px; }
  #index .beautys-hero__content { bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  #index .beautys-hero__thumbnails .beautys-hero__dot { transition: none; }
}
/* Keep captions readable when thumbnail hover pauses the existing autoplay timer. */
#index .beautys-hero__slide.is-entering .beautys-hero__title,
#index .beautys-hero__slide.is-entering .beautys-hero__eyebrow,
#index .beautys-hero__slide.is-entering .beautys-hero__button-wrap { animation: none; transform: none; }
/* Desktop search: fixed icon before wishlist, existing search form expands to its left. */
@media (min-width: 1200px) {
  #header.header .beautys-header__search,
  #header.header.beautys-header--compact .beautys-header__search,
  #header.header.beautys-header--compact.beautys-header--search-open .beautys-header__search {
    position: absolute; top: 50%; right: 180px; z-index: 6; width: 42px;
    transform: translateY(-50%); pointer-events: auto;
  }
  #header.header.beautys-header--compact .beautys-header__search { right: 180px; }
  #header.header .beautys-header__compact-search-toggle,
  #header.header.beautys-header--compact.beautys-header--search-open .beautys-header__compact-search-toggle {
    display: grid; width: 42px; height: 42px; padding: 0; place-items: center;
    border: 0; border-radius: 50%; background: transparent; color: #806132; cursor: pointer;
  }
  #header.header .beautys-header__compact-search-icon { filter: none; }
  #index #header:not(.beautys-header--compact) .beautys-header__compact-search-toggle { color: #fff; }
  #header.header .beautys-header__compact-search-toggle:hover { background: rgb(128 97 50 / 12%); }
  #header.header .beautys-header__compact-search-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  #header.header .beautys-header__search #_desktop_ps_searchbar,
  #header.header.beautys-header--compact .beautys-header__search #_desktop_ps_searchbar {
    display: flex !important; position: absolute; top: 50%; right: calc(100% + 10px); left: auto;
    width: min(260px, 22vw); height: auto; overflow: visible;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translate(10px, -50%);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  #header.header.beautys-header--search-open .beautys-header__search #_desktop_ps_searchbar,
  #header.header.beautys-header--compact.beautys-header--search-open .beautys-header__search #_desktop_ps_searchbar {
    position: absolute; width: min(260px, 22vw); height: auto; opacity: 1;
    visibility: visible; pointer-events: auto; transform: translate(0, -50%);
  }
  #header.header.beautys-header--search-open .beautys-header__search .ps-searchbar__form { height: 44px; }
  #header.header.beautys-header--compact.beautys-header--search-open .beautys-header__nav { visibility: visible; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #header.header .beautys-header__search #_desktop_ps_searchbar { transition: none; }
}
/* One stationary magnifier opens the field and then submits the native search form. */
@media (min-width: 1200px) {
  #header.header .beautys-header__search #_desktop_ps_searchbar,
  #header.header.beautys-header--compact .beautys-header__search #_desktop_ps_searchbar,
  #header.header.beautys-header--search-open .beautys-header__search #_desktop_ps_searchbar,
  #header.header.beautys-header--compact.beautys-header--search-open .beautys-header__search #_desktop_ps_searchbar {
    right: 0; width: min(300px, 25vw);
  }
  #header.header .beautys-header__compact-search-toggle { position: relative; z-index: 2; }
  #header.header .beautys-header__search .ps-searchbar__form { padding: 0 44px 0 16px; }
  #header.header .beautys-header__search .ps-searchbar__magnifier { display: none; }
  #header.header.beautys-header--search-open .beautys-header__compact-search-toggle:hover { background: transparent; }
}
/* Keep only the white carousel chevrons; screen removes the source PNG black matte. */
#index .beautys-hero__arrow,
#index .beautys-hero__arrow:hover,
#index .beautys-hero__arrow:focus-visible { background: transparent; }
#index .beautys-hero__source-icon { mix-blend-mode: screen; }
/* Match the reference's actual menu face, including its single 700 font file. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-bold.woff2") format("woff2");
}
@media (min-width: 1200px) {
  #header.header .beautys-header__nav .ps-mainmenu__tree-link,
  #header.header.beautys-header--compact .beautys-header__nav .ps-mainmenu__tree-link {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 18.9px;
    letter-spacing: .675px;
  }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  #header.header .beautys-header__nav .ps-mainmenu__tree,
  #header.header.beautys-header--compact .beautys-header__nav .ps-mainmenu__tree { gap: 10px; }
}

/* Match the fixed header icons to Scarlet's palette. */
#header.header.beautys-header--compact .beautys-header__logo,
#header.header.beautys-header--mobile-sticky .beautys-header__logo { content:url("../img/beauty-logo-sticky.svg?v=20261028-scarlet"); }
#header.header.beautys-header--compact .beautys-header__compact-search-toggle,
#header.header.beautys-header--compact .beautys-header__compact-search-toggle:hover,
#header.header.beautys-header--compact .beautys-header__compact-search-toggle:focus-visible { color:#806132; }
#header.header.beautys-header--compact .beautys-header__compact-search-toggle:focus-visible { outline-color:#806132; }
#header.header.beautys-header--compact .beautys-header__compact-search-icon,
#header.header.beautys-header--mobile-sticky .beautys-header__compact-search-icon { filter:none; }
#header.header.beautys-header--compact .ps-searchbar__magnifier,
#header.header.beautys-header--mobile-sticky .ps-searchbar__magnifier { background-color:#806132; }
#index .beautys-hero__subtitle { margin:0 0 28px; color:#fff; font:400 18px/1.5 Arial,sans-serif; }
@media (max-width:749px) { #index .beautys-hero__subtitle { font-size:14px; margin-bottom:18px; } }

@font-face { font-family:"Scarlet Hero Heading"; src:url("../fonts/bricolage-grotesque-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Scarlet Hero Text"; src:url("../fonts/geist-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
#index .beautys-hero__title-bold, #index .beautys-hero__title-light { font-family:"Scarlet Hero Heading",sans-serif; font-size:62px; font-weight:700; line-height:1.05; letter-spacing:-.01em; }
#index .beautys-hero__subtitle { font-family:"Scarlet Hero Text",sans-serif; font-size:17px; font-weight:400; line-height:1.3; letter-spacing:.3px; }
@media (max-width:749px) { #index .beautys-hero__title-bold, #index .beautys-hero__title-light { font-size:28px; } #index .beautys-hero__subtitle { font-size:14px; } }@media (max-width:1199.98px) {
  #mobileMenu, #mobileMenu .beautys-mobile-menu, #mobileMenu .beautys-mobile-menu__list .beautys-mobile-menu__list { background:#f7f4ee; }
  #mobileMenu .beautys-mobile-menu__header, #mobileMenu .ps-mainmenu__additionnals, #mobileMenu .beautys-mobile-menu__account { background:#ece8df; border-color:#d5cabb; }
  #mobileMenu .beautys-mobile-menu__view-all { color:#533f29; }
}

/* Mobile menu and search controls use the shared header palette. */
@media (max-width:1199.98px) {
  #header.header .beautys-header__nav .menu-toggle,
  #header.header .beautys-header__nav .menu-toggle:is(:hover,:focus-visible,:active) { color:#806132; }
  #header.header .beautys-header__search .header-block__action-btn .material-icons { background-color:#806132; }
  #index #header:not(.beautys-header--compact):not(.beautys-header--mobile-sticky) .beautys-header__search .header-block__action-btn .material-icons { background-color:#fff; }
}