/* ================================================================
   O'Lay Final Site Navigation
   One canonical navigation layer for every public HTML page.
   Loaded after all page-specific styles.
   ================================================================ */

:root{
  --olay-nav-header-height:82px;
  --olay-nav-item-height:46px;
  --olay-nav-max-width:1240px;
  --olay-nav-navy:#061a38;
  --olay-nav-teal:#087b91;
  --olay-nav-line:#d7e7ef;
  --olay-nav-panel:#ffffff;
}

html{scrollbar-gutter:stable;}

/* The old top notice is hidden on every page so the first content block
   always begins at exactly the same vertical position. */
html body > .topbar.v7-topbar.olay-nav-topbar,
html body > .topbar.v7-topbar,
html body > .topbar.olay-nav-topbar,
html body > .topbar,
html body > .v7-topbar,
html body > .initi-topbar,
html body > .olay-topbar,
html body > .olay-nav-topbar{
  display:none!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
}

/* Header shell */
#site-header,
.site-header.olay-site-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  height:var(--olay-nav-header-height)!important;
  min-height:var(--olay-nav-header-height)!important;
  max-height:var(--olay-nav-header-height)!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  background:rgba(255,255,255,.98)!important;
  border:0!important;
  border-bottom:1px solid var(--olay-nav-line)!important;
  box-shadow:0 8px 26px rgba(6,26,56,.055)!important;
  backdrop-filter:saturate(140%) blur(12px)!important;
}

#site-header .header-inner,
#site-header > .container{
  position:relative!important;
  width:min(var(--olay-nav-max-width),calc(100% - 32px))!important;
  height:var(--olay-nav-header-height)!important;
  min-height:var(--olay-nav-header-height)!important;
  max-height:var(--olay-nav-header-height)!important;
  padding:0!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:22px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

/* Fixed logo box prevents late image loading from moving the menu. */
#site-header .logo,
#site-header .logo-image,
#site-header .olay-logo-link{
  flex:0 0 136px!important;
  width:136px!important;
  min-width:136px!important;
  max-width:136px!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
}
#site-header .logo img,
#site-header .logo-image img,
#site-header .olay-logo-link img{
  display:block!important;
  width:auto!important;
  max-width:132px!important;
  height:auto!important;
  max-height:54px!important;
  padding:0!important;
  margin:0!important;
  object-fit:contain!important;
  transform:none!important;
  filter:none!important;
}

/* Desktop navigation track */
#site-header .main-nav,
#site-header .olay-main-nav{
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  height:var(--olay-nav-header-height)!important;
  min-height:var(--olay-nav-header-height)!important;
  max-height:var(--olay-nav-header-height)!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
#site-header .nav-dropdown{
  position:relative!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:var(--olay-nav-header-height)!important;
  min-height:var(--olay-nav-header-height)!important;
  max-height:var(--olay-nav-header-height)!important;
  padding:0!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-sizing:border-box!important;
}

/* Every top-level item has identical geometry in default, hover and active states. */
#site-header .main-nav > a,
#site-header .nav-dropdown > a{
  position:relative!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:var(--olay-nav-item-height)!important;
  min-height:var(--olay-nav-item-height)!important;
  max-height:var(--olay-nav-item-height)!important;
  padding:0 13px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  box-shadow:none!important;
  color:var(--olay-nav-navy)!important;
  font-family:Inter,Manrope,Arial,Helvetica,sans-serif!important;
  font-size:15px!important;
  font-weight:750!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:none!important;
  text-decoration:none!important;
  transform:none!important;
  transition:color .16s ease,background-color .16s ease!important;
}
#site-header .main-nav > a:hover,
#site-header .nav-dropdown:hover > a,
#site-header .main-nav > a.active,
#site-header .nav-dropdown > a.active,
#site-header .main-nav > a[aria-current="page"],
#site-header .nav-dropdown > a[aria-current="page"]{
  width:auto!important;
  height:var(--olay-nav-item-height)!important;
  min-height:var(--olay-nav-item-height)!important;
  max-height:var(--olay-nav-item-height)!important;
  padding:0 13px!important;
  margin:0!important;
  background:transparent!important;
  border-color:transparent!important;
  border-radius:10px!important;
  box-shadow:inset 0 -2px 0 var(--olay-nav-teal)!important;
  color:var(--olay-nav-teal)!important;
  font-size:15px!important;
  font-weight:750!important;
  line-height:1!important;
  transform:none!important;
}

/* Simple links never inherit an old underline. */
#site-header .main-nav > a::before,
#site-header .main-nav > a::after{
  content:none!important;
  display:none!important;
}

/* One fixed dropdown arrow for every dropdown item. */
#site-header .nav-dropdown > a::after,
#site-header .nav-dropdown > a.active::after,
#site-header .nav-dropdown > a[aria-current="page"]::after{
  content:""!important;
  position:static!important;
  flex:0 0 auto!important;
  display:inline-block!important;
  width:7px!important;
  height:7px!important;
  padding:0!important;
  margin:0 0 4px 9px!important;
  background:transparent!important;
  border:0!important;
  border-right:1.5px solid currentColor!important;
  border-bottom:1.5px solid currentColor!important;
  border-radius:0!important;
  box-shadow:none!important;
  opacity:.78!important;
  transform:rotate(45deg)!important;
}

/* Quote button */
#site-header .header-cta,
#site-header .olay-header-cta{
  flex:0 0 132px!important;
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  padding:0 18px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:var(--olay-nav-teal)!important;
  border:1px solid var(--olay-nav-teal)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  color:#fff!important;
  font-family:Inter,Manrope,Arial,Helvetica,sans-serif!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  transform:none!important;
  transition:background-color .16s ease!important;
}
#site-header .header-cta:hover,
#site-header .olay-header-cta:hover{
  background:#066b7e!important;
  border-color:#066b7e!important;
  color:#fff!important;
  transform:none!important;
}
#site-header .header-cta span{margin-left:6px!important;}

/* Dropdown panels */
#site-header .dropdown-panel{
  position:absolute!important;
  top:calc(100% - 7px)!important;
  left:50%!important;
  z-index:9999!important;
  width:max-content!important;
  min-width:260px!important;
  max-width:520px!important;
  height:auto!important;
  max-height:calc(100vh - 105px)!important;
  padding:12px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(150px,1fr))!important;
  gap:4px!important;
  overflow-y:auto!important;
  box-sizing:border-box!important;
  background:var(--olay-nav-panel)!important;
  border:1px solid var(--olay-nav-line)!important;
  border-radius:14px!important;
  box-shadow:0 20px 50px rgba(6,26,56,.14)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate(-50%,8px)!important;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease!important;
}
#site-header .nav-dropdown:hover .dropdown-panel,
#site-header .nav-dropdown:focus-within .dropdown-panel{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate(-50%,0)!important;
}
#site-header .dropdown-panel a{
  width:auto!important;
  min-width:0!important;
  min-height:38px!important;
  height:auto!important;
  padding:9px 11px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box!important;
  background:transparent!important;
  border:0!important;
  border-radius:9px!important;
  box-shadow:none!important;
  color:#2f4157!important;
  font-family:Inter,Manrope,Arial,Helvetica,sans-serif!important;
  font-size:13px!important;
  font-weight:650!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  transform:none!important;
}
#site-header .dropdown-panel a:hover{
  background:#edf7f9!important;
  color:var(--olay-nav-teal)!important;
  text-decoration:none!important;
  transform:none!important;
}

/* Toggle is reserved but hidden on desktop. */
#site-header .nav-toggle{
  flex:0 0 44px!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0!important;
  margin:0!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#fff!important;
  border:1px solid var(--olay-nav-line)!important;
  border-radius:10px!important;
  color:var(--olay-nav-navy)!important;
  font-size:21px!important;
  line-height:1!important;
  cursor:pointer!important;
}

@media(max-width:1180px){
  #site-header .header-inner,
  #site-header > .container{gap:14px!important;}
  #site-header .main-nav{gap:2px!important;}
  #site-header .main-nav > a,
  #site-header .nav-dropdown > a,
  #site-header .main-nav > a:hover,
  #site-header .nav-dropdown:hover > a,
  #site-header .main-nav > a.active,
  #site-header .nav-dropdown > a.active,
  #site-header .main-nav > a[aria-current="page"],
  #site-header .nav-dropdown > a[aria-current="page"]{
    padding-left:9px!important;
    padding-right:9px!important;
    font-size:14px!important;
  }
  #site-header .logo,
  #site-header .logo-image,
  #site-header .olay-logo-link{
    flex-basis:126px!important;
    width:126px!important;
    min-width:126px!important;
    max-width:126px!important;
  }
  #site-header .logo img,
  #site-header .logo-image img,
  #site-header .olay-logo-link img{max-width:122px!important;}
  #site-header .header-cta,
  #site-header .olay-header-cta{
    flex-basis:116px!important;
    width:116px!important;
    min-width:116px!important;
    max-width:116px!important;
    padding:0 12px!important;
    font-size:14px!important;
  }
}

@media(max-width:900px){
  :root{
    --olay-nav-header-height:72px;
    --olay-nav-item-height:42px;
  }
  html{scrollbar-gutter:auto;}
  #site-header .header-inner,
  #site-header > .container{
    width:calc(100% - 24px)!important;
    gap:12px!important;
  }
  #site-header .logo,
  #site-header .logo-image,
  #site-header .olay-logo-link{
    flex:0 0 124px!important;
    width:124px!important;
    min-width:124px!important;
    max-width:124px!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
  }
  #site-header .logo img,
  #site-header .logo-image img,
  #site-header .olay-logo-link img{
    max-width:120px!important;
    max-height:48px!important;
  }
  #site-header .nav-toggle{display:inline-flex!important;margin-left:auto!important;}
  #site-header .header-cta,
  #site-header .olay-header-cta{display:none!important;}
  #site-header .main-nav,
  #site-header .olay-main-nav{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:0!important;
    right:0!important;
    z-index:10000!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100vh - 96px)!important;
    padding:12px!important;
    margin:0!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:3px!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid var(--olay-nav-line)!important;
    border-radius:14px!important;
    box-shadow:0 22px 55px rgba(6,26,56,.18)!important;
  }
  #site-header.nav-open .main-nav,
  #site-header .main-nav.open{display:flex!important;}
  #site-header .nav-dropdown{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:block!important;
  }
  #site-header .main-nav > a,
  #site-header .nav-dropdown > a,
  #site-header .main-nav > a:hover,
  #site-header .nav-dropdown:hover > a,
  #site-header .main-nav > a.active,
  #site-header .nav-dropdown > a.active,
  #site-header .main-nav > a[aria-current="page"],
  #site-header .nav-dropdown > a[aria-current="page"]{
    width:100%!important;
    height:var(--olay-nav-item-height)!important;
    min-height:var(--olay-nav-item-height)!important;
    max-height:var(--olay-nav-item-height)!important;
    padding:0 12px!important;
    justify-content:flex-start!important;
    border-radius:9px!important;
    font-size:14px!important;
  }
  #site-header .dropdown-panel{
    position:static!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    max-height:none!important;
    padding:6px!important;
    margin:3px 0 7px!important;
    display:none!important;
    grid-template-columns:1fr!important;
    gap:2px!important;
    overflow:visible!important;
    background:#f6fafc!important;
    border:0!important;
    border-radius:10px!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    transition:none!important;
  }
  #site-header .nav-dropdown:hover .dropdown-panel,
  #site-header .nav-dropdown:focus-within .dropdown-panel{
    display:grid!important;
    transform:none!important;
  }
  #site-header .dropdown-panel a{
    min-height:36px!important;
    padding:8px 10px!important;
    font-size:13px!important;
    white-space:normal!important;
  }
}

@media(max-width:420px){
  #site-header .header-inner,
  #site-header > .container{width:calc(100% - 20px)!important;}
  #site-header .main-nav{left:0!important;right:0!important;}
}