/* DT desktop header fit — keeps both centre menus (HER SHOP … GIFT SHOP / LEAVE A REVIEW! … FLAVORS) on one line
   from 1025 px (Woodmart's desktop header starts there) to 1700 px. Above 1700 px nothing changes.
   Owner: 22_NAVIGATION/Master/dt-header.css · loader: 34_Design_System/deploy/30-design-css-loader.php §10 · 2026-11-06
   Why: header_561203 needs 1,019 px for the top menu and 966 px for the bottom one; below ~1,650 px they wrap and the
   second line runs into the row under it. Woodmart sizes these with its own variables (--nav-gap, --nav-img-width/height,
   --wd-tools-icon-width), set once per header-builder element for every desktop width, so we override them per width.
   1536–1700: same look, tighter · 1240–1535: icon above label, 13 px · 1025–1239: 12 px, smaller logo, no menu arrows.
   Proof + before/after: 22_NAVIGATION/Old/FINDINGS/2026-11-06_header_fit/ */
@media (min-width:1025px) and (max-width:1700px){
.whb-general-header .wd-header-secondary-nav>.wd-nav{--nav-gap:8px}
.whb-header-bottom .wd-header-secondary-nav>.wd-nav{--nav-gap:14px}
.whb-general-header .wd-header-secondary-nav>.wd-nav>li>a .wd-nav-img{--nav-img-width:24px;--nav-img-height:24px;margin-inline-end:5px}
.whb-header-bottom .wd-header-secondary-nav>.wd-nav>li>a .wd-nav-img{--nav-img-width:30px;--nav-img-height:30px;margin-inline-end:5px}
.whb-general-header .site-logo .wd-logo img{max-width:210px!important}
.whb-general-header .whb-col-right .wd-tools-element{--wd-tools-icon-width:40px}
}
@media (min-width:1025px) and (max-width:1535px){
.whb-general-header .wd-header-secondary-nav>.wd-nav>li>a,
.whb-header-bottom .wd-header-secondary-nav>.wd-nav>li>a{display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:center;align-items:center;row-gap:2px;font-size:13px}
.whb-general-header .wd-header-secondary-nav>.wd-nav>li>a .wd-nav-img,
.whb-header-bottom .wd-header-secondary-nav>.wd-nav>li>a .wd-nav-img{grid-column:1/-1;margin-inline-end:0}
.whb-general-header .wd-header-secondary-nav>.wd-nav{--nav-gap:12px}
.whb-general-header .site-logo .wd-logo img{max-width:190px!important}
.whb-header-bottom .wd-header-cats{width:240px}
.whb-header-bottom .wd-header-cats .menu-opener{min-width:0}
.whb-header-bottom .whb-col-right .wd-header-cats .wd-dropdown{left:auto;right:0}
}
@media (min-width:1025px) and (max-width:1239px){
.whb-general-header .wd-header-secondary-nav>.wd-nav>li>a,
.whb-header-bottom .wd-header-secondary-nav>.wd-nav>li>a{font-size:12px}
.whb-general-header .wd-header-secondary-nav>.wd-nav>li>a::after,
.whb-header-bottom .wd-header-secondary-nav>.wd-nav>li>a::after{display:none}
.whb-general-header .wd-header-secondary-nav>.wd-nav{--nav-gap:5px}
.whb-header-bottom .wd-header-secondary-nav>.wd-nav{--nav-gap:6px}
.whb-general-header .site-logo .wd-logo img{max-width:140px!important}
.whb-general-header .whb-col-right .wd-tools-element{--wd-tools-icon-width:32px}
.whb-header-bottom .wd-header-cats{width:200px}
.whb-header-bottom .wd-header-cats .menu-open-label{white-space:normal;font-size:12px}
}