/* header-alert.css */

/* Base */
.redesign .alert-banner a, .redesign .alert-banner p { font-size: 12px; line-height: 12px; padding: 12px 10px 11px; color: #fff;}

header {z-index: 999; top: 0; width: 100%; height: auto;}
header.home {position: fixed; background: #0001; backdrop-filter: blur(5px); transition: 0.3s;}
header.inner {}
header .logo {display: block; width: 186px; margin: 0 auto; padding: 22px 0 18px; height: 20px; transition: 0.3s; filter: invert(0);}

.header-top {position: relative; border-bottom: 1px solid #fff3; transition: 0.3s;}
.shop-links {position: absolute; margin: 0; right: 20px; top: 50%; transform: translateY(-50%);}

.dm-main-nav .mega-nav__control {font-size: 15px; padding: 17px 0; line-height: 16px;}
header.home .dm-main-nav .mega-nav__control {color: #fff;}
.mega-nav--desktop .mega-nav__items {justify-content: center;}
.mega-nav--desktop .mega-nav__items li:last-child { display: none;}
.mega-nav--desktop .mega-nav__item:nth-child(2) button {margin-left: 20px;}

header.home .search-icon img, header.home .account-icon img {transition: 0.3s; filter: invert(1);}
header.home .mini-cart {background: #fff; color: #000!important; margin-left: 15px; transition: 0.3s;}

.show-search {top: 111px; border-top: 1px solid #0001; transition: 0.3s; opacity: 0;}
.show-search.active {opacity: 1;}

.alert-banner ~ .show-search {top: 146px;}

header.home.menu-open, header.home.sticky, header.inner {background: #fff;}
header.home.menu-open .header-top, header.home.sticky .header-top, header.inner .header-top, header.inner .header-bottom {border-bottom: 1px solid #0001;}
header.home.menu-open .logo, header.home.sticky .logo, header.inner .logo {filter: invert(1);}
header.home.menu-open .mini-cart, header.home.sticky .mini-cart, header.inner .mini-cart {background: #000; color: #fff!important;}
header.home.menu-open .dm-main-nav .mega-nav__control, header.home.sticky .dm-main-nav .mega-nav__control, header.inner .dm-main-nav .mega-nav__control {color: #000;}
header.home.menu-open .search-icon img, header.home.menu-open .account-icon img, header.home.sticky .account-icon img, header.home.sticky .search-icon img, header.inner .account-icon img, header.inner .search-icon img {filter: invert(0);}


/* Responsive (pulled from your media CSS because they touch the same header/alert/nav items) */
@media screen and (max-width: 1024px) {

  :root {
    --mega-nav-height: 52px!important;
  }

  .shop-links {display: none;}
  .mega-nav__icon-btn, .dm-main-nav button {margin: 5px 0; color: #000;}

  header .logo {position: absolute; padding: 17px 0 14px; height: 20px; left: 50%; transform: translateX(-50%);}
  header.home .dm-main-nav .mega-nav__control {color: #000;}
  header.home.menu-open .header-bottom, header.home.sticky .header-bottom {border-bottom: 1px solid #0001;}

  .menu-open .mega-nav__icon-btn, .menu-open .dm-main-nav button, .sticky .mega-nav__icon-btn, .sticky .dm-main-nav button {color: #000;}

}
@media screen and (max-width: 767px) {

  .alert-banner a, .alert-banner p {font-size: 10px !important; line-height: 10px !important;}

  :root { --mega-nav-height: 85px !important; }

    .mega-nav__icon-btn, .dm-main-nav button {margin: 5px 0; color: #000;}

}