/*
 * Wear US global commerce header v22.
 * Loaded after the historical child-theme and quote-selector layers so one
 * reviewed system wins on every Wear US route.
 */

html body.wu-brand-wearus {
  --wuh-red: #b5122b;
  --wuh-red-deep: #8f0e22;
  --wuh-ink: #111722;
  --wuh-muted: #5d6570;
  --wuh-paper: #f6f5f2;
  --wuh-white: #fff;
  --wuh-line: #d8d8d3;
  --wuh-focus: #0b66c3;
  --wd-primary-color: var(--wuh-red) !important;
  --wu-brand-accent: var(--wuh-red) !important;
  --wu-brand-accent-deep: var(--wuh-red-deep) !important;
}

/* Full-bleed site chrome. Content containers retain their own readable caps. */
html body.wu-brand-wearus .website-wrapper,
html body.wu-brand-wearus .whb-header,
html body.wu-brand-wearus .whb-main-header {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

html body.wu-brand-wearus .whb-main-header,
html body.wu-brand-wearus .whb-top-bar,
html body.wu-brand-wearus .whb-general-header,
html body.wu-brand-wearus .whb-header-bottom {
  margin: 0 !important;
}

html body.wu-brand-wearus .whb-top-bar > .container,
html body.wu-brand-wearus .whb-general-header > .container,
html body.wu-brand-wearus .whb-header-bottom > .container {
  width: 100% !important;
  max-width: 1720px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 2vw, 36px) !important;
}

/* Utility bar stays light and joins the main header without a void. */
html body.wu-brand-wearus .whb-top-bar,
html body.wu-brand-wearus .whb-top-bar > .container,
html body.wu-brand-wearus .whb-top-bar .whb-flex-row {
  border-color: var(--wuh-line) !important;
  background: var(--wuh-paper) !important;
  color: var(--wuh-ink) !important;
}

html body.wu-brand-wearus .whb-top-bar a,
html body.wu-brand-wearus .whb-top-bar .wd-tools-text,
html body.wu-brand-wearus .whb-top-bar .wd-tools-icon,
html body.wu-brand-wearus .whb-top-bar .wd-nav > li > a {
  color: var(--wuh-ink) !important;
}

html body.wu-brand-wearus .whb-general-header,
html body.wu-brand-wearus .whb-header-bottom,
html body.wu-brand-wearus .whb-sticky-row {
  border-color: var(--wuh-line) !important;
  background: rgba(255, 255, 255, .985) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

html body.wu-brand-wearus .whb-header-bottom {
  box-shadow: 0 12px 28px rgba(17, 23, 34, .085) !important;
}

/* Approved Wear + Canadian maple leaf + US wordmark. */
html body.wu-brand-wearus .site-logo {
  padding-inline: 0 !important;
}

html body.wu-brand-wearus .site-logo .wd-logo::before,
html body.wu-brand-wearus .site-logo .wd-logo::after {
  content: none !important;
  display: none !important;
}

html body.wu-brand-wearus .site-logo .wd-logo[href] > img,
html body.wu-brand-wearus img.wearus-mobile-logo {
  content: url("/wp-content/mu-plugins/wearus-header-v22/wearus-wordmark-transparent.png") !important;
  display: block !important;
  width: 224px !important;
  max-width: 224px !important;
  height: auto !important;
  max-height: 54px !important;
  padding: 0 !important;
  object-fit: contain !important;
}

/* Main desktop row: logo, category opener, aligned search, cart. */
@media (min-width: 1025px) {
  html body.wu-brand-wearus .whb-general-header .whb-column8 {
    flex: 0 0 224px !important;
    justify-content: flex-start !important;
  }

  html body.wu-brand-wearus .whb-general-header .whb-column9 {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 14px !important;
  }

  html body.wu-brand-wearus .whb-general-header .whb-column10 {
    flex: 0 0 auto !important;
  }

  html body.wu-brand-wearus .whb-general-header .whb-column9 > .wd-header-sticky-nav {
    flex: 0 0 auto !important;
  }

  html body.wu-brand-wearus .whb-general-header .whb-column9 > .wd-header-search-form,
  html body.wu-brand-wearus .whb-general-header .whb-column9 > .wd-search-form {
    flex: 1 1 auto !important;
    min-width: 190px !important;
    max-width: none !important;
  }
}

/* All Categories gets physical depth without the stray red underline. */
html body.wu-brand-wearus .wd-header-sticky-nav {
  min-width: 204px !important;
  min-height: 50px !important;
  border: 1px solid #959a9f !important;
  border-radius: 10px !important;
  background: var(--wuh-white) !important;
  color: var(--wuh-ink) !important;
  box-shadow: 0 4px 0 #d1d2cf, 0 10px 22px rgba(17, 23, 34, .10) !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

html body.wu-brand-wearus .wd-header-sticky-nav > a {
  min-height: 50px !important;
  padding-inline: 20px !important;
  color: var(--wuh-ink) !important;
}

html body.wu-brand-wearus .wd-header-sticky-nav > a .wd-tools-inner {
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

html body.wu-brand-wearus .wd-header-sticky-nav .wd-tools-icon,
html body.wu-brand-wearus .wd-header-sticky-nav .wd-tools-text {
  color: var(--wuh-ink) !important;
}

html body.wu-brand-wearus .wd-header-sticky-nav .wd-tools-text {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

html body.wu-brand-wearus .wd-header-sticky-nav:hover,
html body.wu-brand-wearus .wd-header-sticky-nav:focus-within {
  border-color: var(--wuh-ink) !important;
  box-shadow: 0 5px 0 #c6c7c4, 0 13px 26px rgba(17, 23, 34, .13) !important;
  transform: translateY(-1px);
}

html body.wu-brand-wearus .wd-header-sticky-nav.wd-opened {
  border-color: var(--wuh-red) !important;
  box-shadow: 0 2px 0 #d1d2cf, 0 7px 16px rgba(17, 23, 34, .10) !important;
  transform: translateY(2px);
}

/* Restore the owner-authored dimensional search: a raised pill with a
   centred prompt and a physically separate red action. */
html body.wu-brand-wearus .whb-main-header .wd-header-search-form,
html body.wu-brand-wearus .whb-main-header .wd-search-form {
  height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.wu-brand-wearus .whb-main-header .wd-header-search-form form.searchform,
html body.wu-brand-wearus .whb-main-header .wd-search-form form.searchform {
  position: relative !important;
  height: 64px !important;
  min-height: 64px !important;
  border: 1px solid rgba(17, 23, 34, .22) !important;
  border-radius: 999px !important;
  background: var(--wuh-white) !important;
  box-shadow: 0 5px 0 #d5d6d2, 0 18px 42px rgba(17, 23, 34, .15), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
  overflow: hidden !important;
}

html body.wu-brand-wearus .whb-main-header .wd-header-search-form form.searchform:focus-within,
html body.wu-brand-wearus .whb-main-header .wd-search-form form.searchform:focus-within {
  border-color: var(--wuh-focus) !important;
  box-shadow: 0 0 0 4px rgba(181, 18, 43, .14), 0 4px 0 #d5d6d2, 0 18px 42px rgba(17, 23, 34, .15) !important;
}

html body.wu-brand-wearus .whb-main-header .wd-header-search-form input.s,
html body.wu-brand-wearus .whb-main-header .wd-search-form input.s {
  width: 100% !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 0 80px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--wuh-ink) !important;
  font-size: 20px !important;
  font-weight: 650 !important;
  line-height: 62px !important;
  text-align: center !important;
}

html body.wu-brand-wearus .whb-main-header .wd-header-search-form button.searchsubmit,
html body.wu-brand-wearus .whb-main-header .wd-search-form button.searchsubmit {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 8px !important;
  display: flex !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--wuh-red) !important;
  color: var(--wuh-white) !important;
  line-height: 1 !important;
  box-shadow: 0 4px 0 #8f0e22, 0 9px 18px rgba(143, 14, 34, .24) !important;
  transform: translateY(-50%) !important;
}

html body.wu-brand-wearus .whb-main-header .wd-header-search-form button.searchsubmit:hover,
html body.wu-brand-wearus .whb-main-header .wd-header-search-form button.searchsubmit:focus-visible,
html body.wu-brand-wearus .whb-main-header .wd-search-form button.searchsubmit:hover,
html body.wu-brand-wearus .whb-main-header .wd-search-form button.searchsubmit:focus-visible {
  background: var(--wuh-red-deep) !important;
  color: var(--wuh-white) !important;
  box-shadow: 0 3px 0 #710b1b, 0 7px 15px rgba(113, 11, 27, .22) !important;
}

html body.wu-brand-wearus .whb-main-header .wd-header-search-form button.searchsubmit:active,
html body.wu-brand-wearus .whb-main-header .wd-search-form button.searchsubmit:active {
  box-shadow: 0 1px 0 #710b1b, 0 4px 10px rgba(113, 11, 27, .18) !important;
  transform: translateY(calc(-50% + 3px)) !important;
}

/* Dedicated department row, visible and stable at every desktop width. */
@media (min-width: 1025px) {
  html body.wu-brand-wearus .whb-header-bottom .whb-column12 {
    justify-content: center !important;
  }

  html body.wu-brand-wearus .whb-header-bottom .wd-header-secondary-nav,
  html body.wu-brand-wearus .whb-header-bottom .wd-header-secondary-nav > .wd-nav {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(12px, 2.2vw, 34px) !important;
  }

  html body.wu-brand-wearus .whb-header-bottom .wd-header-secondary-nav > .wd-nav > li {
    display: flex !important;
  }

  html body.wu-brand-wearus .whb-header-bottom .wd-header-secondary-nav > .wd-nav > li > a {
    min-height: 46px !important;
    padding-inline: 4px !important;
    border-bottom: 2px solid transparent !important;
    color: var(--wuh-ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
  }

  html body.wu-brand-wearus .whb-header-bottom .wd-header-secondary-nav > .wd-nav > li > a:hover,
  html body.wu-brand-wearus .whb-header-bottom .wd-header-secondary-nav > .wd-nav > li > a:focus-visible,
  html body.wu-brand-wearus .whb-header-bottom .wd-header-secondary-nav > .wd-nav > li.current-menu-item > a {
    border-bottom-color: var(--wuh-red) !important;
    color: var(--wuh-red) !important;
  }

  html body.wu-brand-wearus .whb-header-bottom .wd-nav-img {
    display: none !important;
  }
}

/* Category drawer: large visual entries on one light storefront surface. */
@media (min-width: 1025px) {
  html body.wu-brand-wearus .wd-sticky-nav {
    width: min(392px, 92vw) !important;
    border: 0 !important;
    border-right: 1px solid var(--wuh-line) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .99) !important;
    color: var(--wuh-ink) !important;
    box-shadow: 24px 0 54px rgba(17, 23, 34, .14) !important;
  }
}

html body.wu-brand-wearus .wd-sticky-nav .wd-sticky-nav-title {
  min-height: 72px !important;
  height: 72px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wuh-line) !important;
  border-radius: 0 !important;
  background: var(--wuh-white) !important;
  color: var(--wuh-ink) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  box-shadow: none !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-sticky-nav-title::after {
  content: none !important;
  display: none !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky,
html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky > li,
html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky > li > a {
  background: transparent !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky {
  padding: 10px 0 18px !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky > li > a {
  display: flex !important;
  min-height: 72px !important;
  padding: 8px 22px !important;
  align-items: center !important;
  gap: 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wuh-line) !important;
  border-radius: 0 !important;
  color: var(--wuh-ink) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky > li > a > img.wd-nav-img {
  display: block !important;
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--wuh-line) !important;
  border-radius: 10px !important;
  background: var(--wuh-paper) !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky > li.wu-menu-quote > a::before {
  content: "QUOTE" !important;
  display: flex !important;
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--wuh-line) !important;
  border-radius: 10px !important;
  background: var(--wuh-paper) !important;
  color: var(--wuh-red-deep) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky > li:is(:hover, .wd-opened, :focus-within) > a {
  background: #f9e9ed !important;
  color: var(--wuh-red-deep) !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky > li.wu-menu-service-first {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--wuh-line) !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-nav-sticky > li.wu-menu-service > a {
  color: var(--wuh-red-deep) !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-dropdown-menu,
html body.wu-brand-wearus .wd-sticky-nav .wd-dropdown-inner,
html body.wu-brand-wearus .wd-sticky-nav .wd-scroll-content,
html body.wu-brand-wearus .wd-sticky-nav .wd-entry-content {
  border-color: var(--wuh-line) !important;
  background: var(--wuh-white) !important;
  color: var(--wuh-ink) !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-dropdown-menu a {
  background: transparent !important;
  color: var(--wuh-ink) !important;
}

html body.wu-brand-wearus .wd-sticky-nav .wd-dropdown-menu a:hover,
html body.wu-brand-wearus .wd-sticky-nav .wd-dropdown-menu a:focus-visible {
  background: #f9e9ed !important;
  color: var(--wuh-red-deep) !important;
}

/* Mobile category navigation is a full-width, light storefront surface. */
@media (max-width: 1024px) {
  html body.wu-brand-wearus .whb-general-header {
    box-shadow: 0 9px 24px rgba(17, 23, 34, .09) !important;
  }

  html body.wu-brand-wearus .whb-general-header .whb-flex-row {
    min-height: 68px !important;
  }

  /* WoodMart renders these controls from the header builder. Keep the
     three-column row explicit so stale layout rules cannot collapse it into
     an empty strip. */
  html body.wu-brand-wearus .whb-general-header .whb-column_mobile2,
  html body.wu-brand-wearus .whb-general-header .whb-column_mobile3,
  html body.wu-brand-wearus .whb-general-header .whb-column_mobile4 {
    display: flex !important;
    align-items: center !important;
  }

  html body.wu-brand-wearus .whb-general-header .whb-column_mobile2 {
    flex: 0 0 48px !important;
    justify-content: flex-start !important;
  }

  html body.wu-brand-wearus .whb-general-header .whb-column_mobile3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  html body.wu-brand-wearus .whb-general-header .whb-column_mobile4 {
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }

  html body.wu-brand-wearus .whb-general-header .site-logo,
  html body.wu-brand-wearus .whb-general-header .site-logo .wd-logo {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
  }

  html body.wu-brand-wearus .whb-general-header .site-logo .wd-logo[href] > img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 184px !important;
    max-width: 184px !important;
    height: 58px !important;
    max-height: 58px !important;
  }

  html body.wu-brand-wearus .whb-general-header .wd-header-mobile-nav > a,
  html body.wu-brand-wearus .whb-general-header .wd-header-search-mobile > a,
  html body.wu-brand-wearus .whb-general-header .wd-header-cart > a {
    display: flex !important;
    align-items: center !important;
    color: var(--wuh-ink) !important;
  }

  html body.wu-brand-wearus .whb-general-header .wd-tools-icon::before,
  html body.wu-brand-wearus .whb-general-header .wd-tools-icon::after {
    color: var(--wuh-ink) !important;
  }

  html body.wu-brand-wearus .mobile-nav {
    width: 100vw !important;
    max-width: 100vw !important;
    background: var(--wuh-white) !important;
    color: var(--wuh-ink) !important;
  }

  html body.wu-brand-wearus .mobile-nav .wearus-mobile-header,
  html body.wu-brand-wearus .mobile-nav .wd-heading,
  html body.wu-brand-wearus .mobile-nav .wd-nav-mobile,
  html body.wu-brand-wearus .mobile-nav .menu-item,
  html body.wu-brand-wearus .mobile-nav .sub-menu {
    background: transparent !important;
  }

  html body.wu-brand-wearus .mobile-nav .wd-nav-mob-tab,
  html body.wu-brand-wearus .mobile-nav .wd-nav-mob-tab > li,
  html body.wu-brand-wearus .mobile-nav .wd-nav-mob-tab > li > a {
    background: var(--wuh-paper) !important;
  }

  html body.wu-brand-wearus .mobile-nav .wd-nav-mob-tab > li > a {
    min-height: 56px !important;
    color: var(--wuh-muted) !important;
    font-weight: 750 !important;
  }

  html body.wu-brand-wearus .mobile-nav .wd-nav-mob-tab > li.wd-active {
    border-bottom: 3px solid var(--wuh-red) !important;
  }

  html body.wu-brand-wearus .mobile-nav .wd-nav-mob-tab > li.wd-active > a {
    color: var(--wuh-ink) !important;
  }

  html body.wu-brand-wearus .mobile-nav .wearus-mobile-header,
  html body.wu-brand-wearus .mobile-nav .wd-heading {
    border: 0 !important;
    border-bottom: 1px solid var(--wuh-line) !important;
    color: var(--wuh-ink) !important;
  }

  html body.wu-brand-wearus .mobile-nav img.wearus-mobile-logo {
    width: 170px !important;
    max-width: 170px !important;
    max-height: 44px !important;
  }

  html body.wu-brand-wearus .mobile-nav .wd-close-side,
  html body.wu-brand-wearus .mobile-nav .wd-close-side:before,
  html body.wu-brand-wearus .mobile-nav .wd-close-side:after {
    color: var(--wuh-ink) !important;
  }

  html body.wu-brand-wearus .mobile-nav .wearus-mobile-heading,
  html body.wu-brand-wearus .mobile-nav .wd-nav-mob-tab > li > a,
  html body.wu-brand-wearus .mobile-nav .wd-nav-mobile > li > a,
  html body.wu-brand-wearus .mobile-nav .menu-item > a,
  html body.wu-brand-wearus .mobile-nav .wd-nav-opener,
  html body.wu-brand-wearus .mobile-nav .wd-drilldown-back a {
    color: var(--wuh-ink) !important;
  }

  html body.wu-brand-wearus .mobile-nav .wd-nav-mobile > li > a,
  html body.wu-brand-wearus .mobile-nav .menu-item > a {
    min-height: 72px !important;
    padding-block: 8px !important;
    border-bottom: 1px solid var(--wuh-line) !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 750 !important;
  }

  html body.wu-brand-wearus .mobile-nav .wd-nav-mobile > li > a > img.wd-nav-img {
    display: block !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    margin-right: 16px !important;
    padding: 0 !important;
    border: 1px solid var(--wuh-line) !important;
    border-radius: 10px !important;
    background: var(--wuh-paper) !important;
    object-fit: contain !important;
    filter: none !important;
  }

  html body.wu-brand-wearus .mobile-nav .menu-item > a:hover,
  html body.wu-brand-wearus .mobile-nav .menu-item > a:focus-visible {
    background: #f9e9ed !important;
    color: var(--wuh-red-deep) !important;
  }
}

html body.wu-brand-wearus header a:focus-visible,
html body.wu-brand-wearus header button:focus-visible,
html body.wu-brand-wearus .wd-sticky-nav a:focus-visible,
html body.wu-brand-wearus .mobile-nav a:focus-visible {
  outline: 3px solid var(--wuh-focus) !important;
  outline-offset: 3px !important;
}

@media (max-width: 390px) {
  html body.wu-brand-wearus .whb-top-bar > .container,
  html body.wu-brand-wearus .whb-general-header > .container,
  html body.wu-brand-wearus .whb-header-bottom > .container {
    padding-inline: 12px !important;
  }

  html body.wu-brand-wearus .whb-general-header .site-logo,
  html body.wu-brand-wearus .whb-general-header .site-logo .wd-logo,
  html body.wu-brand-wearus .whb-general-header .site-logo .wd-logo > img {
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.wu-brand-wearus .wd-header-sticky-nav,
  html body.wu-brand-wearus .wd-sticky-nav,
  html body.wu-brand-wearus .mobile-nav {
    transition: none !important;
  }
}