/* ML Category / Manufacturer Switcher — sibling-term dropdown.
   >=481px: in-header PILL (ALWAYS visible from page load, all iPads + desktop). <=480px: inline bar (phones).
   Excluded from Perfmatters RUCSS via the PHP filter. Updated 2026-07-05 (always-on; was scroll-revealed).
   =============================================================================
   EDIT THESE px VALUES LIVE IN DEVTOOLS (each is a real number you can nudge),
   then tell me the value(s) per breakpoint and I'll bake them into media queries.
   They all live on the two rules tagged  /* <<< TUNE >>> */  below.
   ============================================================================= */

:root{ --ml-catsw-stick:60px; --ml-catsw-stickgap:40px; } /* JS overwrites with the live sticky-header height */

.ml-catsw{ display:none; box-sizing:border-box; position:relative; }
.ml-catsw *{ box-sizing:border-box; }

/* The toggle — mirrors the grey hero search box */
.ml-catsw-toggle{
	display:block; width:100%; height:47px; text-align:left;
	border:1px solid transparent; border-radius:40px; background-color:#f3f4f6;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:20px center; background-size:22px 22px;
	padding:0 18px 0 50px; cursor:pointer;
	font-size:16px; letter-spacing:.5px; color:#9ca3af; text-transform:capitalize;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ml-catsw-toggle:focus{ outline:none; }
.ml-catsw-toggle::after{ content:' ......'; }

/* <<< TUNE >>> in-header pill TEXT + ICON (real px you can edit in DevTools) */
.ml-catsw--header .ml-catsw-toggle{
	height: 45px;               /* BOX HEIGHT */
	font-size: 17px;            /* TEXT SIZE */
	background-position: 20px center;  /* ICON: 1st number = distance from left */
	padding: 0 18px 0 50px;     /* TEXT left padding = LAST number (gap after icon) */
	text-align: left;           /* left | center */
}

/* Dropdown panel */
.ml-catsw-panel{
	position:absolute; z-index:1100; background:#fff;
	border:1px solid var(--siteBlueBorder,#cdd6db); border-radius:14px;
	box-shadow:0 12px 30px rgba(0,0,0,.14);
	max-height:62vh; overflow-y:auto; padding:6px 0; min-width:260px;
}
.ml-catsw-panel[hidden]{ display:none; }
.ml-catsw-panel-head{ display:none; }
.ml-catsw-panel ul{ list-style:none; margin:0; padding:0; }
.ml-catsw-panel li a{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 18px; font-size:17px; line-height:1.3; color:#9ca3af; text-decoration:none; white-space:nowrap; }
.ml-catsw-panel li a:hover{ background:rgba(243,243,243,.9); color:var(--siteOrange,#ea6e15); }
.ml-catsw-name{ overflow:hidden; text-overflow:ellipsis; }
.ml-catsw-count{ flex:0 0 auto; color:#9ca3af; font-size:13px; font-weight:400; }
.ml-catsw-count::before{ content:'('; }
.ml-catsw-count::after{ content:')'; }

/* ===== IN-HEADER pill (>=481px): all iPads + desktop; ALWAYS visible from load ===== */
@media screen and (min-width:481px){
	.ml-catsw--inline{ display:none !important; }
	body.ml-catsw-active header{ display:flex; align-items:center; position:relative; padding:31px 26px 30px 43px !important; }
	body.ml-catsw-active header .logo{ flex:0 0 auto; }
	body.ml-catsw-active header nav{ flex:0 0 auto; margin-left:auto; }
	/* <<< TUNE >>> in-header pill BOX (real px you can edit in DevTools) */
	body.ml-catsw-active .ml-catsw--header{
		display:block;
		position:absolute; top:50%;
		left: calc(50% - 75px);   /* HORIZONTAL: + = right, - = left */
		transform: translate(-50%, -50%);
		width: 297px;            /* BOX WIDTH */
		animation:mlCatswFade .25s ease;
	}
	.ml-catsw--header .ml-catsw-panel{ top:calc(100% + 8px); left:0; width:100%; }
}

/* ===== iPad 11 (portrait ~834px) ===== */
@media screen and (min-width:821px) and (max-width:1023px){
	body.ml-catsw-active .ml-catsw--header{ left: calc(50% - 37px); width: 292px; }
	.ml-catsw--header .ml-catsw-toggle{ height: 43px; font-size: 16px; }
}

/* ===== iPad Mini / Air (744-820px) ===== */
@media screen and (min-width:744px) and (max-width:820px){
	body.ml-catsw-active .ml-catsw--header{ left: calc(50% - 56px); width: 269px; }
	.ml-catsw--header .ml-catsw-toggle{ height: 42px; font-size: 16px; }
}

/* ===== PHONE inline bar (<=480px): full-width below the search box ===== */
@media screen and (max-width:480px){
	.ml-catsw--header{ display:none !important; }
	/* header-unpin 2026-07-10 (user choice): on phones the header scrolls away with the page - only the grey box pins, at the very top */
	body.ml-catsw-active .sticky_header{ position:static !important; }
	.ml-catsw--inline{
		display:block; position:sticky; top:30px; z-index:900; /* LITERAL, not var() — var top suspected in the real-iPhone unstick (iPhone-11 pinned with literal top:0 at 11:02; store 14/16/17 failed after the var change). Tune the gap by editing this number. */ /* white space above the stuck box; the ::before plate reaches the same distance up, so the gap is solid white */
		width:100%; max-width:359px; margin:28px 0 -3px 23px; padding:0;
		animation:mlCatswFade .25s ease;
	}
	.ml-catsw--inline .ml-catsw-panel{ top:calc(100% + 4px); left:0; right:11%; } /* matches the 89% pill */
	/* stickmask 2026-07-10: white backing plate — covers the stickgap strip + rounded-corner notches so scrolled content hides behind the stuck box */
	.ml-catsw--inline::before{
		content:''; position:absolute; left:-23px; width:100vw;
		top:-30px; bottom:0; /* keep equal to the negative of the sticky top above */
		background:#fff; z-index:-1;
	}
	.ml-catsw--inline .ml-catsw-toggle{ font-size:19px; width:89%; }
	.ml-catsw--inline .ml-catsw-w1{ display:none; } /* phone bar reads 'More Categories ......' */
}

@keyframes mlCatswFade{ from{opacity:0;} to{opacity:1;} }

/* Archive: never shrink the header on scroll (kills reduceHeader at all widths) */
body.ml-catsw-active header.reduceHeader,
body.ml-catsw-active header.defaultHeader,
body.ml-catsw-active header{ animation:none !important; }

/* Hide the orange section icons (user request 2026-06-28) - page2 titles + page3 search/country */
.inSearchCategory .currentCat .title img, .sByCats h2 img, .sBycountry h2 img{ display:none; }

/* ml-hide-nav-categories 2026-07-08: portrait iPads (Mini/Air/Pro-11) - nav Categories collided with the switcher pill */
@media (min-width:744px) and (max-width:834px){
	nav ul.desktopMenu li:has(> a[href="/category"]),nav ul.tabMenu li:has(> a[href="/category"]){display:none !important;}
}