/* POVISON typography overrides for MetInfo clone — load last */
@import "fonts.css";
@import "site-responsive.css?v=pager-pc4";

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea,
.navbar,
.nav-link,
.dropdown-item,
.card,
.card-title,
.card p,
.desc,
footer,
.met-foot-info,
.onlinebox,
.copy {
  font-family: var(--font-sans) !important;
}

footer.met-foot {
  background: #212121 !important;
  color: #fff !important;
}
footer.met-foot a,
footer.met-foot p {
  color: #fff !important;
}

/* Compact navigation bar height (default theme: 60px) */
.met-nav {
  min-height: 40px !important;
}
.met-nav .navbar-toggler,
.met-nav .met-nav-toggler {
  height: 40px !important;
  line-height: 40px !important;
}
.met-nav .navbar-nav.navlist > .nav-item > .nav-link,
.met-nav .navbar-nav.navlist > .nav-item > .nav-link.dropdown-toggle {
  font-weight: 700 !important;
}

/* Home nav label removed — logo (.met-logo) links to homepage */
.met-nav .navlist > .nav-item:first-child:not(.dropdown) {
  display: none !important;
}

/* Horizontal L1 bar (≥1400): fixed bar height; below that use hamburger */
@media (min-width: 1400px) {
  .met-nav .navbar-nav.navlist > .nav-item > .nav-link,
  .met-nav .navbar-nav.navlist > .nav-item > .nav-link.dropdown-toggle {
    height: 40px !important;
    line-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .met-nav .nav-item .nav-link:after {
    height: 20px !important;
    margin-top: -10px !important;
  }
  .met-nav .nav-item:hover .nav-link:after,
  .met-nav .nav-item .nav-link.active::after {
    margin-top: -10px !important;
  }
}
.metlang {
  line-height: 40px !important;
}

/* Language switcher: globe → options directly below (no panel board) */
.metlang.st-lang-widget {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin-left: 12px !important;
  line-height: 1 !important;
  z-index: 1060;
}

/* Allow language list to paint below the black bar */
.met-head,
.met-head .met-nav,
.met-head #met-nav-collapse {
  overflow: visible !important;
}

.metlang.st-lang-widget .st-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  line-height: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.metlang.st-lang-widget .st-lang-btn:hover,
.metlang.st-lang-widget .st-lang-btn:focus,
.metlang.st-lang-widget.is-open .st-lang-btn {
  color: #fff;
}

.metlang.st-lang-widget .st-lang-globe {
  display: block;
  width: 20px;
  height: 20px;
}

.metlang.st-lang-widget .st-lang-panel {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: auto;
  min-width: 0;
  box-sizing: border-box;
  background: transparent;
  text-align: center;
  z-index: 1055;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}

.metlang.st-lang-widget.is-open .st-lang-panel,
.metlang.st-lang-widget:hover .st-lang-panel {
  height: auto;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
}

.metlang.st-lang-widget .st-lang-panel > li {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.metlang.st-lang-widget .st-lang-panel > li + li {
  margin-top: 10px;
}

.metlang.st-lang-widget .st-lang-panel .st-lang-link,
.metlang.st-lang-widget .st-lang-panel a {
  display: inline-block;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  color: #a0a0a0 !important;
  text-decoration: none !important;
  background: transparent !important;
  line-height: 1.25 !important;
  padding: 0 !important;
  white-space: nowrap;
}

.metlang.st-lang-widget .st-lang-panel > li.is-active .st-lang-link,
.metlang.st-lang-widget .st-lang-panel > li.is-active a,
.metlang.st-lang-widget .st-lang-panel a[aria-current="true"] {
  color: #212121 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.metlang.st-lang-widget .st-lang-panel .st-lang-link:hover,
.metlang.st-lang-widget .st-lang-panel a:hover {
  color: #212121 !important;
  background: transparent !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .metlang.st-lang-widget {
    margin-left: 8px !important;
  }
  .metlang.st-lang-widget .st-lang-panel .st-lang-link,
  .metlang.st-lang-widget .st-lang-panel a {
    font-size: 12px !important;
  }
}

/* Nav search: magnifier → inline expand (Asquan-style), before language */
.st-nav-search {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  float: none !important;
  width: 28px;
  height: 40px;
  margin-left: 12px !important;
  line-height: 1 !important;
  overflow: hidden;
  transition: width 0.35s ease;
  z-index: 1060;
}

.st-nav-search.is-open {
  width: 228px;
  overflow: visible;
}

.st-nav-search-form {
  position: relative;
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.35s ease, flex-basis 0.35s ease, width 0.35s ease;
  box-sizing: border-box;
}

.st-nav-search.is-open .st-nav-search-form {
  flex: 1 1 auto;
  width: auto;
  opacity: 1;
}

.st-nav-search-submit {
  position: absolute;
  left: 6px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  line-height: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.st-nav-search.is-open .st-nav-search-submit {
  display: inline-flex;
}

.st-nav-search-input {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 14px 6px 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.st-nav-search.is-open .st-nav-search-input {
  display: block;
}

.st-nav-search-input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.st-nav-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.st-nav-search-toggle,
.st-nav-search-close {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  line-height: 0;
  outline: none;
  transition: color 0.2s ease, opacity 0.35s ease;
  -webkit-appearance: none;
  appearance: none;
}

.st-nav-search-toggle:hover,
.st-nav-search-toggle:focus,
.st-nav-search-close:hover,
.st-nav-search-close:focus {
  color: #fff;
}

.st-nav-search-close {
  display: none;
  opacity: 0;
}

.st-nav-search.is-open .st-nav-search-toggle {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.st-nav-search.is-open .st-nav-search-close {
  display: inline-flex;
  opacity: 1;
}

.st-nav-search-icon {
  display: block;
}

.st-nav-search-suggest {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, 70vw);
  max-height: 360px;
  overflow-y: auto;
  background: #212121;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  z-index: 1080;
  padding: 6px 0;
}

.st-nav-search.is-open .st-nav-search-suggest.is-visible {
  display: block;
}

.st-nav-search-hit {
  display: block;
  padding: 8px 14px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
}

.st-nav-search-hit:hover,
.st-nav-search-hit.is-active {
  background: rgba(255, 255, 255, 0.12);
}

.st-nav-search-kind {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 2px;
}

.st-nav-search-empty {
  padding: 12px 14px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

@media (max-width: 767px) {
  .st-nav-search {
    margin-left: 8px !important;
  }
  .st-nav-search.is-open {
    width: min(228px, calc(100vw - 120px));
  }
}

/* Auth links: always visible top-right (not inside main nav menu) */
#met-head-user-collapse,
#met-head-user-collapse.collapse,
#met-head-user-collapse.collapsing {
  display: flex !important;
  align-items: center;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  flex-shrink: 0;
  max-height: none !important;
}
#met-head-user-collapse .st-auth-nav {
  display: flex !important;
  padding: 0 12px 0 0;
  min-height: 40px;
  align-items: center;
}
/*
 * Hamburger mode up to 1399px (Bootstrap default is 767).
 * Long L1 labels (EN/ES/FR) wrap to two rows on mid widths otherwise.
 * Top bar stays a single proportional row: logo | auth | search/lang | toggler.
 */
@media (max-width: 1399px) {
  .met-head .met-nav {
    min-height: clamp(40px, 11vw, 52px) !important;
  }
  .met-head .met-nav .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(10px, 3vw, 20px) !important;
    padding-right: clamp(10px, 3vw, 20px) !important;
  }
  .met-head .met-nav .container > .row {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    min-height: clamp(40px, 11vw, 52px);
  }
  .met-head .met-nav-btn {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center;
  }
  .met-head .navbar-header {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(180px, 48vw);
  }
  .met-head .met-logo {
    max-width: 100%;
  }
  .met-head .met-logo .pclogo {
    max-height: clamp(26px, 4.5vw, 36px) !important;
    width: auto;
    max-width: 100%;
  }
  .met-nav .navbar-toggler,
  .met-nav .met-nav-toggler {
    display: block !important;
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    margin-left: auto;
    height: clamp(40px, 11vw, 52px) !important;
    line-height: clamp(40px, 11vw, 52px) !important;
  }
  /* Override Bootstrap md “always open” collapse — full menu only when toggled */
  .met-head #met-nav-collapse.collapse {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    float: none !important;
    width: 100% !important;
    clear: both;
  }
  .met-head #met-nav-collapse.collapse.in,
  .met-head #met-nav-collapse.collapsing {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1050;
    height: auto !important;
    overflow: visible !important;
    background-color: #212121 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .met-head #met-nav-collapse .navlist {
    display: block !important;
    float: none !important;
    width: 100%;
  }
  .met-head #met-nav-collapse .navlist > .nav-item {
    float: none !important;
    display: block;
    margin-left: 0 !important;
  }
  .met-head #met-nav-collapse .st-nav-search,
  .met-head #met-nav-collapse .metlang,
  .met-head #met-nav-collapse .metlang.st-lang-widget {
    float: none !important;
    display: inline-flex !important;
    margin: 8px 12px !important;
  }
  /* Shrink-wrap auth strip — metinfo sets .navbar-collapse { width:100% },
     which with absolute+right stretched a black layer over the logo. */
  #met-head-user-collapse,
  #met-head-user-collapse.collapse {
    position: absolute;
    right: clamp(48px, 14vw, 56px);
    top: 0;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    z-index: 2;
    display: flex !important;
    height: 100% !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  #met-head-user-collapse .st-auth-nav {
    padding: 0;
    font-size: clamp(10px, 2.6vw, 12px);
    gap: 4px;
  }
}

/* Desktop horizontal nav: one row, scales with viewport */
@media (min-width: 1400px) {
  .met-nav .navbar-toggler,
  .met-nav .met-nav-toggler {
    display: none !important;
  }
  .met-head .met-nav .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(12px, 1.5vw, 28px) !important;
    padding-right: clamp(12px, 1.5vw, 28px) !important;
  }
  .met-head .met-nav .container > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    min-height: 40px;
  }
  .met-head .met-nav-btn {
    flex: 0 1 auto;
    min-width: 0;
    max-width: clamp(120px, 14vw, 200px);
  }
  .met-head .met-logo .pclogo {
    max-height: clamp(28px, 2vw, 38px) !important;
    width: auto;
    max-width: 100%;
  }
  .met-head #met-nav-collapse,
  .met-head #met-nav-collapse.collapse {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    align-items: center;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    height: auto !important;
    overflow: visible !important;
  }
  .met-head #met-head-user-collapse {
    position: static;
    float: none !important;
    margin-left: clamp(4px, 0.5vw, 10px);
    order: 3;
    flex: 0 0 auto;
  }
  .met-head #met-nav-collapse .navlist {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto;
    min-width: 0;
    float: none !important;
  }
  .met-head #met-nav-collapse .navlist > .nav-item {
    float: none !important;
    flex: 0 1 auto;
    margin-left: clamp(0px, 0.35vw, 8px) !important;
  }
  .met-nav .navbar-nav.navlist > .nav-item > .nav-link,
  .met-nav .navbar-nav.navlist > .nav-item > .nav-link.dropdown-toggle {
    white-space: nowrap !important;
    font-size: clamp(11px, 0.42vw + 5.5px, 15px) !important;
    padding-left: clamp(4px, 0.4vw, 14px) !important;
    padding-right: clamp(4px, 0.4vw, 14px) !important;
  }
  .met-head #met-nav-collapse .st-nav-search,
  .met-head #met-nav-collapse .metlang,
  .met-head #met-nav-collapse .metlang.st-lang-widget {
    position: static !important;
    float: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    flex: 0 0 auto;
    margin-left: clamp(4px, 0.5vw, 12px) !important;
  }
}

/* Normal header + hero flow — hero below nav, not overlapping */
.met-head,
.met-nav.navbar-fixed-top {
  position: relative !important;
  top: auto !important;
}
body.met-navfixed {
  padding-top: 0 !important;
}
.met-banner {
  position: relative !important;
  margin-top: 0 !important;
  top: auto !important;
  clear: both;
}
.met-banner .carousel-inner {
  position: relative;
}

/* Black navigation bar */
.met-head,
.met-head .met-nav,
.met-head .navbar-default,
.met-head .met-nav-btn,
.met-head .navbar-header,
.met-head .navbar {
  background-color: #212121 !important;
  border-color: #212121 !important;
}

.met-nav .navbar-nav.navlist > .nav-item > .nav-link,
.met-nav .navbar-nav.navlist > .nav-item > .nav-link.dropdown-toggle,
.met-nav .nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
}

.met-nav .nav-link:hover,
.met-nav .nav-link:focus,
.met-nav .nav-item.active > .nav-link,
.met-nav .nav-item.open > .nav-link {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.met-nav .nav-link .fa {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Remove dropdown arrow boxes after L1 category labels */
.met-nav .navlist > .nav-item > .nav-link .fa-angle-down {
  display: none !important;
}

.met-lang-links a,
.metlang a {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none;
  font-size: 13px;
}

.metlang a[aria-current="true"] {
  color: #fff !important;
}

.met-head .met-logo {
  padding: 1px 0;
}

/*
 * Logo art is a white-background JPG. invert(1) turns that white into a
 * solid #000 plate, which shows against the #212121 bar.
 * Use the transparent white PNG on every width instead.
 */
.met-head .navbar-header {
  position: relative;
  z-index: 3;
}
.met-head .met-logo {
  display: block !important;
  position: relative;
  z-index: 3;
  width: min(172px, 46vw);
  height: 40px;
  margin: 0;
  background: url("logo-nav-white.png") left center / contain no-repeat;
  filter: none !important;
}
.met-head .met-logo .vertical-align-middle,
.met-head .met-logo .mblogo,
.met-head .met-logo .pclogo {
  display: none !important;
}

@media (max-width: 767px) {
  .met-head .navbar-header {
    max-width: min(128px, 36vw);
  }
  .met-head .met-logo {
    width: min(118px, 34vw) !important;
    height: 26px !important;
  }
}

.met-head .st-auth-nav .st-auth-user-btn,
.met-head .st-auth-nav .st-auth-user-icon {
  color: #fff !important;
}
.met-head .st-auth-nav .st-auth-user-icon path {
  fill: #fff !important;
}

.met-nav-toggler.hamburger .hamburger-bar,
.met-nav-toggler.hamburger .hamburger-bar::before,
.met-nav-toggler.hamburger .hamburger-bar::after {
  background-color: #fff !important;
}

/* Desktop nav dropdowns (horizontal L1 ≥1400):
   1) unlock overflow so L3 flyouts are not clipped
   2) theme only animated plain .dropdown-item (submenu rows skipped) + broken stagger
   3) re-apply slide-left only while open/hover so EVERY row restarts together */
@media (min-width: 1400px) {
  .met-nav .dropdown-menu.animate {
    overflow: visible !important;
  }

  /* Kill always-on / staggered theme animation */
  .met-nav .dropdown-menu.animate > .dropdown-item,
  .met-nav .dropdown-menu.animate > .dropdown-submenu > .dropdown-item,
  .met-nav .dropdown-menu.animate.animate-reverse > .dropdown-item,
  .met-nav .dropdown-menu.animate.animate-reverse > .dropdown-submenu > .dropdown-item {
    -webkit-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
  }

  /* L1 open: slide only for non-mega menus (Information / About / etc.) */
  .met-nav .nav-item.dropdown:not(.st-cat-mega).open > .dropdown-menu.animate > .dropdown-item,
  .met-nav .nav-item.dropdown:not(.st-cat-mega).open > .dropdown-menu.animate > .dropdown-submenu > .dropdown-item,
  .met-nav .nav-item.dropdown:not(.st-cat-mega):hover > .dropdown-menu.animate > .dropdown-item,
  .met-nav .nav-item.dropdown:not(.st-cat-mega):hover > .dropdown-menu.animate > .dropdown-submenu > .dropdown-item {
    -webkit-animation: slide-left 0.45s ease both !important;
    -o-animation: slide-left 0.45s ease both !important;
    animation: slide-left 0.45s ease both !important;
    -webkit-animation-delay: 0s !important;
    -o-animation-delay: 0s !important;
    animation-delay: 0s !important;
  }

  /* L2 hover: slide only outside product mega panels */
  .met-nav .nav-item.dropdown:not(.st-cat-mega) .dropdown-submenu:hover > .dropdown-menu.animate > .dropdown-item,
  .met-nav .nav-item.dropdown:not(.st-cat-mega) .dropdown-submenu.open > .dropdown-menu.animate > .dropdown-item {
    -webkit-animation: slide-left 0.45s ease both !important;
    -o-animation: slide-left 0.45s ease both !important;
    animation: slide-left 0.45s ease both !important;
    -webkit-animation-delay: 0s !important;
    -o-animation-delay: 0s !important;
    animation-delay: 0s !important;
  }

  /* Near right edge: open L3 to the left so flyouts stay on-screen */
  .met-nav .navlist > .nav-item.dropdown:nth-last-child(-n+3)
    > .dropdown-menu
    > .dropdown-submenu
    > .dropdown-menu {
    left: auto !important;
    right: 100%;
  }

  /* ========== Category mega menu ==========
     Beauty / Hygiene / Home Detergents as independent L1.
     Hover → static full panel; all L2 columns in ONE row. */
  .met-head .met-nav,
  .met-head .met-nav .container,
  .met-head .met-nav .container > .row {
    position: relative;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega {
    position: static;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 100%;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 18px 20px 20px;
    display: none;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0 18px;
    box-sizing: border-box;
    overflow: visible !important;
    border-radius: 0;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    -webkit-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:hover > .dropdown-menu,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega.open > .dropdown-menu,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:focus-within > .dropdown-menu {
    display: flex !important;
  }

  /* Mega: force static show (beat theme slide-left / animate classes) */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu .dropdown-item,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu .dropdown-submenu,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu .dropdown-menu,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:hover > .dropdown-menu.animate > .dropdown-item,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:hover > .dropdown-menu.animate > .dropdown-submenu > .dropdown-item,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega.open > .dropdown-menu.animate > .dropdown-item,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega.open > .dropdown-menu.animate > .dropdown-submenu > .dropdown-item,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega .dropdown-submenu:hover > .dropdown-menu.animate > .dropdown-item,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega .dropdown-submenu.open > .dropdown-menu.animate > .dropdown-item {
    -webkit-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
    -webkit-animation-delay: 0s !important;
    -o-animation-delay: 0s !important;
    animation-delay: 0s !important;
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }

  /* Hide mobile-only parent link duplicates */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-item.nav-parent {
    display: none !important;
  }

  /* L2 leaf titles (e.g. Seasonal Gifting / Male / Laundry Pods) — bold, same row */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > a.dropdown-item {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 !important;
    font-weight: 700 !important;
    font-size: 13.8px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.35;
    color: #212121 !important;
    white-space: normal;
  }

  /* Global Supply Chain: keep the two L2 titles on one line (EN / ES / FR) */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:has(> a.nav-link[href*="factory"]) > .dropdown-menu > a.dropdown-item:not(.nav-parent),
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:has(> a.nav-link[href*="factory"]) > .dropdown-menu > .dropdown-submenu > a.dropdown-item {
    white-space: nowrap !important;
    flex: 0 0 auto;
    min-width: max-content;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:has(> a.nav-link[href*="factory"]) > .dropdown-menu > .dropdown-submenu {
    flex: 0 0 auto;
    min-width: max-content;
  }

  /* Each L2 group = one column in the single row */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu {
    position: static !important;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* L2 category name — always bold */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-item,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > a.dropdown-item {
    font-weight: 700 !important;
    font-size: 13.8px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.35;
    color: #212121 !important;
    padding: 0 0 6px !important;
    white-space: normal;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-item::after {
    display: none !important;
  }

  /* Always show the group's full tree (no hover flyout) */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-menu {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    float: none !important;
    min-width: 0 !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-item {
    padding: 2px 0 !important;
    font-weight: 400 !important;
    font-size: 13px;
    line-height: 1.5525;
    color: #333 !important;
    white-space: normal;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-item.nav-parent {
    display: none !important;
  }

  /* Nested L3 group: heading + always-open children */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-submenu {
    position: static !important;
    margin: 0 0 4px;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-item {
    padding: 3px 0 1px !important;
    font-weight: 700 !important;
    font-size: 12px;
    line-height: 1.5525;
    color: #212121 !important;
    white-space: normal;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-item::after {
    display: none !important;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-menu {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    min-width: 0 !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 0 0 8px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-menu > .dropdown-item {
    padding: 2px 0 !important;
    font-weight: 400 !important;
    font-size: 12px;
    line-height: 1.5525;
    color: #555 !important;
    white-space: normal;
  }

  /* Mega subcategory hover: underline only, no gray background */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu .dropdown-item:hover,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu .dropdown-item:focus,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu .dropdown-item.active,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu .dropdown-item.active:hover,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega > .dropdown-menu .dropdown-item.active:focus {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
  }

  /* Beauty: L2 columns within homepage content width (1520 / 100% - 2.5rem) */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega.st-cat-mega-dense > .dropdown-menu {
    justify-content: space-between;
    gap: 0;
    padding-top: 16px;
    padding-bottom: 18px;
    padding-left: calc((100vw - min(100vw - 2.5rem, 1520px)) / 2);
    padding-right: calc((100vw - min(100vw - 2.5rem, 1520px)) / 2);
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega.st-cat-mega-dense > .dropdown-menu > .dropdown-submenu,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega.st-cat-mega-dense > .dropdown-menu > a.dropdown-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  /* Hygiene / Home Detergents: full-bleed panel, content centered */
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:not(.st-cat-mega-dense) > .dropdown-menu {
    justify-content: center;
    gap: 0 22px;
    padding: 16px 22px 18px;
  }

  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:not(.st-cat-mega-dense) > .dropdown-menu > .dropdown-submenu,
  .met-nav .navlist > .nav-item.dropdown.st-cat-mega:not(.st-cat-mega-dense) > .dropdown-menu > a.dropdown-item {
    flex: 0 0 auto;
    min-width: 110px;
    max-width: 160px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.met-index-product h2,
.met-index-producto h2,
.met-index-products h2,
.met-index-abouts h2,
.met-footnav h4,
.met-editor strong,
.font-size-26 {
  font-family: var(--font-display) !important;
}

.met-banner .carousel-caption,
.met-banner .banner-text {
  font-family: var(--font-display) !important;
}

/* Remove floating right-side contact rail (WhatsApp / Contact / Email / LinkedIn) */
#onlinebox,
.onlinebox,
.st-onlinebox {
  display: none !important;
}

.st-back-top,
.wwd-showroom-icon__mark,
.fh-card__btn,
.st-contact-float-launch {
  background: #CFB080 !important;
}

.wwd-showroom-icon:hover .wwd-showroom-icon__mark,
.wwd-showroom-icon:focus-visible .wwd-showroom-icon__mark {
  background: #B89560 !important;
}

.wwd-sc-cta a,
.wwd-showroom-icon,
.wwd-showroom-icon__label {
  color: #CFB080 !important;
}

.wwd-sc-cta a:hover,
.wwd-showroom-icon:hover,
.wwd-showroom-icon:focus {
  color: #B89560 !important;
}

.st-intro-card__title::after {
  background: #CFB080 !important;
}

.st-intro-card:hover .st-intro-card__title::after,
.st-intro-card:focus-visible .st-intro-card__title::after {
  background: #B89560 !important;
}