/* ==========================================================================
   Troys Squad - dark header
   Scoped to .ts-dark pages, so the live light shop is untouched until we flip
   it. Woodmart builds the header from .whb-* rows; everything below overrides
   those, nothing replaces them, so the theme keeps working.
   ========================================================================== */

body.ts-dark .whb-header,
body.ts-dark .whb-main-header,
body.ts-dark .whb-general-header,
body.ts-dark .whb-row,
body.ts-dark .whb-column,
body.ts-dark .whb-top-bar{
  background-color:transparent !important;
  border-color:var(--ts-edge) !important;
}

body.ts-dark .whb-header{
  background:linear-gradient(180deg,rgba(16,20,28,.92),rgba(11,14,20,.82)) !important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--ts-edge) !important;
}
body.ts-dark .whb-sticked .whb-main-header{
  background:rgba(11,14,20,.94) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.5) !important;
}

/* ---------- announcement / top bar ---------- */
body.ts-dark .whb-top-bar{
  background:rgba(0,0,0,.4) !important;
  border-bottom:1px solid var(--ts-edge) !important;
}
body.ts-dark .whb-top-bar,
body.ts-dark .whb-top-bar a,
body.ts-dark .whb-top-bar .wd-nav>li>a{color:var(--ts-mute) !important}
body.ts-dark .whb-top-bar a:hover{color:#fff !important}

/* ---------- main nav ---------- */
body.ts-dark .wd-nav>li>a,
body.ts-dark .whb-header .wd-nav>li>a{
  color:rgba(255,255,255,.88) !important;
  font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:.06em;
}
body.ts-dark .wd-nav>li>a:hover,
body.ts-dark .wd-nav>li.current-menu-item>a,
body.ts-dark .wd-nav>li.current-menu-ancestor>a{color:#fff !important}

/* the underline that marks the current page and hover */
body.ts-dark .wd-nav.wd-style-underline>li>a>span:after,
body.ts-dark .wd-nav>li>a>span:after{background-color:var(--ts-red-ink) !important}

/* ---------- dropdown ---------- */
body.ts-dark .wd-dropdown,
body.ts-dark .wd-dropdown-menu,
body.ts-dark .wd-design-default .wd-dropdown-menu{
  background:rgba(16,20,28,.97) !important;
  border:1px solid var(--ts-edge) !important;
  border-radius:14px !important;
  box-shadow:0 18px 44px rgba(0,0,0,.6) !important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
body.ts-dark .wd-dropdown-menu .wd-nav>li>a,
body.ts-dark .wd-dropdown .wd-nav>li>a{
  color:rgba(255,255,255,.82) !important;font-size:15px}
body.ts-dark .wd-dropdown-menu .wd-nav>li>a:hover{
  color:#fff !important;background:rgba(162,4,3,.28) !important;border-radius:8px}
body.ts-dark .wd-dropdown:after,
body.ts-dark .wd-dropdown:before{border-bottom-color:rgba(16,20,28,.97) !important}

/* ---------- tools: search, account, wishlist, cart ---------- */
body.ts-dark .wd-tools-element>a,
body.ts-dark .wd-tools-element .wd-tools-icon,
body.ts-dark .wd-tools-element .wd-tools-text{color:rgba(255,255,255,.88) !important}
body.ts-dark .wd-tools-element>a:hover .wd-tools-icon{color:#fff !important}
body.ts-dark .wd-tools-element .wd-tools-count,
body.ts-dark .wd-cart-number{
  background:linear-gradient(165deg,var(--ts-red-fill-lit),var(--ts-red-fill)) !important;
  color:#fff !important;box-shadow:0 0 12px rgba(162,4,3,.7)}

/* ---------- search field ---------- */
body.ts-dark .wd-search-form input[type="text"],
body.ts-dark .whb-header .searchform input[type="text"],
body.ts-dark .wd-search-form .searchform input{
  background:rgba(0,0,0,.36) !important;
  border:1px solid var(--ts-edge) !important;
  color:#fff !important;border-radius:999px !important}
body.ts-dark .wd-search-form input::placeholder{color:var(--ts-mute-2) !important}
body.ts-dark .wd-search-form input:focus{
  border-color:var(--ts-red-ink) !important;
  box-shadow:0 0 0 3px rgba(255,59,74,.18) !important}
body.ts-dark .wd-search-form button,
body.ts-dark .whb-header .searchsubmit{color:#fff !important}

/* ---------- browse-categories button ---------- */
body.ts-dark .wd-header-cats .menu-opener,
body.ts-dark .wd-header-cats>a{
  background:linear-gradient(165deg,var(--ts-red-fill-lit),var(--ts-red-fill)) !important;
  color:#fff !important;border:1px solid rgba(255,59,74,.5) !important;
  border-radius:8px !important;
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;letter-spacing:.08em;
  box-shadow:0 8px 24px rgba(162,4,3,.5)}
body.ts-dark .wd-header-cats .wd-nav-cat{
  background:rgba(16,20,28,.97) !important;border:1px solid var(--ts-edge) !important}
body.ts-dark .wd-header-cats .wd-nav-cat>li>a{color:rgba(255,255,255,.85) !important}
body.ts-dark .wd-header-cats .wd-nav-cat>li>a:hover{
  color:#fff !important;background:rgba(162,4,3,.28) !important}

/* ---------- logo ---------- */
body.ts-dark .wd-logo img{
  /* the stock logo is black artwork on an opaque white rectangle, which
     shows as a white slab on a dark header. Until it is replaced, blend it
     so the white ground drops away. */
  mix-blend-mode:screen;
}
body.ts-dark .wd-logo.ts-logo-ready img{mix-blend-mode:normal}

/* ---------- mobile ---------- */
body.ts-dark .wd-side-hidden,
body.ts-dark .mobile-nav,
body.ts-dark .wd-nav-mobile{
  background:#10141C !important;color:#fff !important}
body.ts-dark .wd-nav-mobile>li>a,
body.ts-dark .mobile-nav a{color:rgba(255,255,255,.88) !important;
  border-color:var(--ts-edge) !important}
body.ts-dark .wd-nav-mobile>li>a:hover{color:#fff !important}
body.ts-dark .whb-mobile-header .wd-tools-element .wd-tools-icon{color:#fff !important}