/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* Force the "Header link" menu (Sell on Sokomoja / Track / etc.) to stay on one line.
   Scoped to this exact menu instance only via its own unique wrapper class,
   so nothing else on the site is affected. */
.whb-u3o0s2f7vulyncy3ql4u {
	max-width: none !important;
}

.whb-u3o0s2f7vulyncy3ql4u .wd-nav {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
}

.whb-u3o0s2f7vulyncy3ql4u .wd-nav > li {
	display: flex !important;
}

/* Registration page: "I am a customer / I am a vendor" role picker.
   Dokan's own template hardcodes a <br> between the two labels with no
   layout styling around it, which is why it renders as overlapping text
   instead of two clean options. Scoped to this exact field only. */
.vendor-customer-registration {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	line-height: normal;
}

.vendor-customer-registration br {
	display: none;
}

.vendor-customer-registration label.radio {
	display: inline-flex !important;
	position: static !important;
	float: none !important;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding-left: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	white-space: nowrap;
}

.vendor-customer-registration label.radio input[type="radio"] {
	position: static !important;
	float: none !important;
	margin: 0 4px 0 0 !important;
	left: auto !important;
	top: auto !important;
	appearance: auto !important;
	-webkit-appearance: radio !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 16px !important;
	height: 16px !important;
	accent-color: #374492;
	border: 1px solid #8a8f9e;
	background-color: #fff;
}

/* Checkout page: "Ship to a different address?" toggle overlapping the
   Order Notes box below it. Same root cause as the registration radios,
   something in the theme's custom checkbox styling is positioning this
   toggle absolutely instead of leaving it in normal document flow.
   Reset both sections to plain static flow so they stack normally. */
.woocommerce-shipping-fields,
.woocommerce-shipping-fields h3,
.woocommerce-shipping-fields h3 label {
	position: static !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
}

.woocommerce-shipping-fields h3 label {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 0 1em !important;
}

.woocommerce-shipping-fields h3 label input[type="checkbox"] {
	position: static !important;
	float: none !important;
	margin: 0 !important;
	left: auto !important;
	top: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 16px !important;
	height: 16px !important;
	accent-color: #374492;
}

.woocommerce-additional-fields {
	position: static !important;
	clear: both !important;
	margin-top: 1.5em !important;
}

/* === CATEGORY ICONS === */
/* SIZE.
   WoodMart renders .wd-nav-img with width/height from CSS variables and then
   caps it with max-height: var(--nav-img-height, 18px). Setting width and
   height directly is silently defeated by that cap, so set the variables.
   .wd-nav-vertical covers both the header Browse Categories panel and the
   Elementor mega-menu widget used on the homepage. */
.wd-nav-vertical,
.wd-nav-vertical .wd-sub-menu,
.wd-menu .wd-nav,
.wd-menu .wd-sub-menu {
	--nav-img-width: 30px;
	--nav-img-height: 30px;
}

/* COLOUR.
   The SVG files carry brand navy, which reads correctly on the white menu
   panels. On a genuinely dark panel the icons flip to white so they track
   the menu font colour.
   Two WoodMart naming traps to respect here:
   1. .color-scheme-dark means DARK TEXT ON A LIGHT background. Targeting it
      is what made the subcategory icons invisible previously.
   2. .whb-color-light is on the navy header ROW, but the dropdown panel
      inside it is white. Targeting it would blank the panel icons.
   Only .color-scheme-light marks a real dark surface, and it is the class on
   the shop page title band and its subcategory flyout. */
.color-scheme-light .wd-nav-img {
	filter: brightness(0) invert(1);
}

/* Guard: the header and mega-menu panels are white in every state, so never
   let an inherited scheme class invert their icons. */
.wd-dropdown-cats .wd-nav-img,
.wd-menu .wd-nav-img {
	filter: none;
}


/* === CATEGORY MENU TYPE === */
/* Category menu links: 14px to 15px, #333 resting, brand navy on rollover.
   Scoped to .wd-nav-vertical, which is the header Browse Categories panel
   and the Elementor mega-menu widget on the homepage. Both are white
   panels. The shop page category band is deliberately excluded: its text is
   white on a black band, and forcing #333 there would make it unreadable.
   !important is needed because WoodMart injects its nav part stylesheets
   inline in the body, after this file loads in the head. */
.wd-nav-vertical > li > a,
.wd-nav-vertical .wd-sub-menu li > a {
	color: #333 !important;
	font-size: 15px !important;
}

.wd-nav-vertical > li > a:hover,
.wd-nav-vertical > li:hover > a,
.wd-nav-vertical > li.current-menu-item > a,
.wd-nav-vertical .wd-sub-menu li > a:hover,
.wd-nav-vertical .wd-sub-menu li.current-menu-item > a {
	color: #1D3198 !important;
}


/* === HOMEPAGE CATEGORY MENU: PANEL AND HOVER === */
/* Matches the header Browse Categories dropdown: the flyout panel takes the
   cream tint, and the parent row is brand blue for as long as its panel is
   showing. li:hover and li:focus-within are correct for a flyout, because the
   panel sits inside the item, so keeping the row lit while the cursor is in
   the panel is the wanted behaviour. */
.widget_nav_mega_menu .wd-nav-vertical .wd-dropdown-menu {
	background-color: #fffaeb !important;
}

.widget_nav_mega_menu .wd-nav-vertical > li:hover > a,
.widget_nav_mega_menu .wd-nav-vertical > li:focus-within > a {
	background-color: #1D3198 !important;
	color: #fff !important;
}

/* Navy icons would vanish against the navy bar. This has to outweigh the
   filter: none guard set on .wd-menu .wd-nav-img earlier. */
.widget_nav_mega_menu .wd-nav-vertical > li:hover > a .wd-nav-img,
.widget_nav_mega_menu .wd-nav-vertical > li:focus-within > a .wd-nav-img {
	filter: brightness(0) invert(1) !important;
}

/* The theme colours the chevron from its own variable, so it needs saying. */
.widget_nav_mega_menu .wd-nav-vertical > li:hover > a:after,
.widget_nav_mega_menu .wd-nav-vertical > li:focus-within > a:after {
	color: #fff !important;
}


/* === HEADER BROWSE CATEGORIES: PANEL AND HOVER === */
/* Same treatment as the homepage widget, but this menu keeps its sideways
   flyout rather than becoming an accordion, so nothing here touches layout.
   li:hover is correct in this case, unlike on the homepage widget: the
   panel opens to the side, so keeping the parent row lit while the cursor
   is inside the panel is exactly the wanted behaviour. */
.wd-dropdown-cats .wd-nav-vertical .wd-dropdown-menu {
	background-color: #fffaeb !important;
}

/* Parent row: brand blue while hovered and for as long as its panel shows. */
.wd-dropdown-cats .wd-nav-vertical > li:hover > a,
.wd-dropdown-cats .wd-nav-vertical > li:focus-within > a {
	background-color: #1D3198 !important;
	color: #fff !important;
}

/* Navy icons would vanish against the navy bar. This has to outweigh the
   filter: none guard set on .wd-dropdown-cats .wd-nav-img earlier. */
.wd-dropdown-cats .wd-nav-vertical > li:hover > a .wd-nav-img,
.wd-dropdown-cats .wd-nav-vertical > li:focus-within > a .wd-nav-img {
	filter: brightness(0) invert(1) !important;
}

/* The theme colours the chevron from its own variable, so it needs saying. */
.wd-dropdown-cats .wd-nav-vertical > li:hover > a:after,
.wd-dropdown-cats .wd-nav-vertical > li:focus-within > a:after {
	color: #fff !important;
}

/* Subcategory rows inside the flyout. */
.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu li > a:hover,
.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu li > a:focus-visible {
	background-color: #1D3198 !important;
	color: #fff !important;
}

.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu li > a:hover .wd-nav-img,
.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu li > a:focus-visible .wd-nav-img {
	filter: brightness(0) invert(1) !important;
}


/* === SUBCATEGORY ROWS: FULL BLEED HOVER === */
/* The hover bar was inset because the panel itself carried the padding
   (12px 20px from .wd-dropdown-menu.wd-design-default). Moving that padding
   off the panel and onto the links lets the bar run to the panel edges
   while the text keeps the same breathing room. */
.wd-dropdown-cats .wd-nav-vertical .wd-dropdown-menu.wd-design-default {
	padding: 0 !important;
}

.wd-dropdown-cats .wd-nav-vertical .wd-dropdown-menu.wd-design-default > .container {
	padding: 0 !important;
}

.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu {
	padding: 0 !important;
	margin: 0 !important;
}

.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu li > a {
	padding: 10px 20px !important;
}

/* Same on the homepage category menu, so its flyout rows match the header's. */
.widget_nav_mega_menu .wd-nav-vertical .wd-dropdown-menu.wd-design-default {
	padding: 0 !important;
}

.widget_nav_mega_menu .wd-nav-vertical .wd-dropdown-menu.wd-design-default > .container {
	padding: 0 !important;
}

.widget_nav_mega_menu .wd-nav-vertical .wd-sub-menu {
	padding: 0 !important;
	margin: 0 !important;
}

.widget_nav_mega_menu .wd-nav-vertical .wd-sub-menu li > a {
	padding: 10px 20px !important;
}

/* === MOBILE: HOMEPAGE CATEGORY MENU AS AN ACCORDION === */
/* Below 1024px there is no room for a sideways flyout, so the same menu
   opens inline instead: subcategories drop indented under their parent.
   Desktop keeps the flyout defined above. Everything here sits inside the
   media query so the two behaviours never collide. Visibility is driven by
   display, which the theme's opacity/visibility rules cannot override. The
   open state is set by js/category-accordion.js, which also only runs
   below this width. */
@media (max-width: 1024px) {
	.widget_nav_mega_menu .wd-nav-vertical > li {
		position: relative;
	}

	.widget_nav_mega_menu .wd-nav-vertical .wd-dropdown {
		position: static !important;
		display: none;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	/* the theme's invisible hover bridge would sit over the rows below */
	.widget_nav_mega_menu .wd-nav-vertical .wd-dropdown:after {
		content: none !important;
	}

	/* Hover must not open anything on a touch screen: the panel opens on tap,
	   and a stuck hover would leave it open afterwards. */
	.widget_nav_mega_menu .wd-nav-vertical > li:hover > .wd-dropdown,
	.widget_nav_mega_menu .wd-nav-vertical > li:focus-within > .wd-dropdown {
		display: none;
	}

	.widget_nav_mega_menu .wd-nav-vertical > li.wd-opened > .wd-dropdown {
		display: block !important;
		background-color: #fffaeb !important;
	}

	/* The parent row stays brand blue for as long as its panel is open. */
	.widget_nav_mega_menu .wd-nav-vertical > li.wd-opened > a {
		background-color: #1D3198 !important;
		color: #fff !important;
	}

	.widget_nav_mega_menu .wd-nav-vertical > li.wd-opened > a .wd-nav-img {
		filter: brightness(0) invert(1) !important;
	}

	.widget_nav_mega_menu .wd-nav-vertical .wd-dropdown .container {
		width: 100% !important;
		max-width: none !important;
		padding: 0 !important;
	}

	/* Nested rows read as one level down. */
	.widget_nav_mega_menu .wd-nav-vertical .wd-sub-menu li > a {
		padding: 10px 20px 10px 34px !important;
	}

	/* Replace the theme chevron with a tappable opener, so the row label still
	   links through to the parent category page. */
	.widget_nav_mega_menu .wd-nav-vertical > li.menu-item-has-children > a:after {
		content: none !important;
	}

	.wd-accordion-opener {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		background-color: transparent !important;
		cursor: pointer;
		z-index: 2;
	}

	.wd-accordion-opener:before {
		display: block;
		color: #333;
		font-size: 10px;
		font-family: "woodmart-font";
		content: "\f113";
		transition: transform .25s ease;
	}

	.wd-accordion-opener:hover:before {
		color: #1D3198;
	}

	.wd-opened > .wd-accordion-opener:before {
		transform: rotate(90deg);
		color: #fff !important;
	}
}


/* === SUPPRESS THE THEME'S OWN MOBILE OPENERS === */
/* Two separate theme controls collide with our accordion on mobile.

   1. .wd-nav-opener is injected by categoriesMenu.js. On every load and
      resize it appends one span per parent item below 1024px wide and
      strips them above it. That is the theme's own mobile accordion
      toggle, so on a phone the row carried two openers: theirs and ours.
      It is JS-injected, which is why it never appeared in the page source.

   2. li.wd-drilldown-back holds a back arrow and a Back link, for the
      hamburger drawer where tapping a category slides you into a sub-panel.
      It has no role in an inline accordion or a sideways flyout.

   Scoped to these two menus only. The hamburger drawer is a separate nav
   (.wd-nav-mobile) and still needs both of these to work. */
.widget_nav_mega_menu .wd-nav-vertical .wd-nav-opener,
.widget_nav_mega_menu .wd-nav-vertical .wd-drilldown-back,
.wd-dropdown-cats .wd-nav-vertical .wd-nav-opener,
.wd-dropdown-cats .wd-nav-vertical .wd-drilldown-back {
	display: none !important;
}

/* === HOMEPAGE HERO ROW: MOBILE STACKING === */
/* The menu is transparent. It reads as a white card on desktop only because
   the page behind it is white. Giving it a real background stops anything
   showing through if it ever overlaps something. */
.widget_nav_mega_menu .wd-nav-vertical {
	background-color: #fff;
}

/* The hero row holds the category menu and the slideshow side by side. Three
   things break it on a phone, all from desktop-only values that were never
   given a mobile counterpart:

   1. The row stays flex-direction: row. Elementor's mobile stylesheet sets
      both children to width 100% but never switches the row to column.
   2. justify-content: space-around is harmless across a horizontal row, but
      once stacked it spreads free space above and between the items.
   3. The slideshow widget has a -44px top margin, a deliberate desktop
      overlap, which on mobile drags it up over the last menu rows and clips
      them. The menu container's -45px top margin does the same.

   768px matches Elementor's own mobile breakpoint for this page.
   These belong in Elementor as mobile values on the row, the menu container
   and the slideshow widget. Set them there and this block can come out. */
@media (max-width: 768px) {
	.elementor-element-104979e {
		flex-direction: column !important;
		justify-content: flex-start !important;
		gap: 16px !important;
	}

	.elementor-element-3f7b193,
	.elementor-element-e8f138e {
		margin-block-start: 0 !important;
		margin-top: 0 !important;
	}
}

/* === MOBILE DRAWER: ARROW TO THE RIGHT === */
/* Each category carried a second arrow on a blank row of its own: a
   .wd-nav-opener sitting as a direct child of the item and wrapping to a new
   line. Hidden here, and the accompanying script forwards a tap on the
   category row to it, so drilling into subcategories still works.
   Only direct children of a top-level item are targeted, so the Back control
   inside an opened sub-panel keeps its own opener. */
.mobile-nav .wd-nav-mobile > li > .wd-nav-opener {
	display: none !important;
}

/* The theme suppresses the chevron on mobile category rows
   (.wd-nav-mobile > li.menu-item-has-children > a:after { content: none }).
   Put it back and push it to the end of the row. The link is display: flex,
   so margin-inline-start: auto takes up the free space. */
.mobile-nav .wd-nav-mobile > li.menu-item-has-children > a:after {
	content: "\f113" !important;
	margin-inline-start: auto;
	color: #333;
	font-weight: 400;
	font-size: 12px;
	font-family: "woodmart-font";
	line-height: 1;
}


/* === MOBILE DRAWER: BRAND TREATMENT === */
/* Matches the desktop menus: icons at 30px, brand blue active row with white
   label, icon and arrow, cream sub-panels. */
.mobile-nav .wd-nav-mobile {
	--nav-img-width: 30px;
	--nav-img-height: 30px;
}

.mobile-nav .wd-nav-mobile > li > a {
	transition: background-color .2s ease, color .2s ease;
}

/* There is no hover on a touch screen, so the blue has to come from states
   that actually occur: the press itself, the category you are currently in,
   and the item whose sub-panel is open. The theme keeps marking its opener
   .wd-active while a panel is open even though we hide that opener, so it
   is still a reliable signal for which row is current. */
.mobile-nav .wd-nav-mobile > li > a:active,
.mobile-nav .wd-nav-mobile > li > a:focus-visible,
.mobile-nav .wd-nav-mobile > li.current-menu-item > a,
.mobile-nav .wd-nav-mobile > li.current-menu-ancestor > a,
.mobile-nav .wd-nav-mobile > li:has(> .wd-nav-opener.wd-active) > a {
	background-color: #1D3198 !important;
	color: #fff !important;
}

.mobile-nav .wd-nav-mobile > li > a:active .wd-nav-img,
.mobile-nav .wd-nav-mobile > li > a:focus-visible .wd-nav-img,
.mobile-nav .wd-nav-mobile > li.current-menu-item > a .wd-nav-img,
.mobile-nav .wd-nav-mobile > li.current-menu-ancestor > a .wd-nav-img,
.mobile-nav .wd-nav-mobile > li:has(> .wd-nav-opener.wd-active) > a .wd-nav-img {
	filter: brightness(0) invert(1) !important;
}

.mobile-nav .wd-nav-mobile > li > a:active:after,
.mobile-nav .wd-nav-mobile > li > a:focus-visible:after,
.mobile-nav .wd-nav-mobile > li.current-menu-item > a:after,
.mobile-nav .wd-nav-mobile > li.current-menu-ancestor > a:after,
.mobile-nav .wd-nav-mobile > li:has(> .wd-nav-opener.wd-active) > a:after {
	color: #fff !important;
}

/* Sub-panels pick up the same cream as the desktop flyout. The drilldown
   stylesheet paints them white, hence the override. */
.mobile-nav .wd-nav-mobile .wd-sub-menu {
	background-color: #fffaeb !important;
}

.mobile-nav .wd-nav-mobile .wd-sub-menu li > a:active,
.mobile-nav .wd-nav-mobile .wd-sub-menu li > a:focus-visible,
.mobile-nav .wd-nav-mobile .wd-sub-menu li.current-menu-item > a {
	background-color: #1D3198 !important;
	color: #fff !important;
}

.mobile-nav .wd-nav-mobile .wd-sub-menu li > a:active .wd-nav-img,
.mobile-nav .wd-nav-mobile .wd-sub-menu li > a:focus-visible .wd-nav-img,
.mobile-nav .wd-nav-mobile .wd-sub-menu li.current-menu-item > a .wd-nav-img {
	filter: brightness(0) invert(1) !important;
}

/* The Back row sits on the cream panel, so it gets the brand blue arrow and
   label rather than the theme grey. */
.mobile-nav .wd-nav-mobile .wd-drilldown-back > a {
	color: #1D3198 !important;
}

.mobile-nav .wd-nav-mobile .wd-drilldown-back .wd-nav-opener {
	color: #1D3198 !important;
}

/* === CUSTOM HEADER ICONS === */
/* WoodMart draws these as a font glyph:
     .wd-tools-icon:before { content: var(--wd-tools-icon); font-size: var(--wd-tools-icon-base-width) }
   The first attempt masked the .wd-tools-icon span and removed the glyph.
   That made both icons vanish: the span has no size of its own, the glyph
   was giving it one, so the mask had a zero-sized box to paint into.
   Masking the pseudo-element instead keeps a box we control, and reusing the
   theme variable for its dimensions keeps them the same size as the wishlist
   heart beside them.
   A mask rather than a background image, so the icon still takes its colour
   from the element: the same markup sits on the cream header and on the dark
   mobile toolbar, where a fixed-colour image would be wrong in one of them. */
.wd-header-cart .wd-tools-icon:before,
.wd-header-compare .wd-tools-icon:before {
	content: "" !important;
	display: block;
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	line-height: 1;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wd-header-cart .wd-tools-icon:before {
	-webkit-mask-image: url(https://sokomoja.co.ke/wp-content/uploads/2026/08/sokomoja-icon-cart.svg);
	mask-image: url(https://sokomoja.co.ke/wp-content/uploads/2026/08/sokomoja-icon-cart.svg);
}

.wd-header-compare .wd-tools-icon:before {
	-webkit-mask-image: url(https://sokomoja.co.ke/wp-content/uploads/2026/08/sokomoja-icon-compare.svg);
	mask-image: url(https://sokomoja.co.ke/wp-content/uploads/2026/08/sokomoja-icon-compare.svg);
}

.wd-header-cart .wd-tools-icon,
.wd-header-compare .wd-tools-icon {
	overflow: visible;
}


/* === SUBCATEGORY HOVER: GREY PANEL, BLUE TEXT === */
/* Subcategory rows previously took the same navy bar as their parent, which
   made a child look as prominent as the category heading it sits under.
   They now get a light grey bar with brand blue text instead: still clearly
   the hovered row, but visibly one level down.
   The grey is very slightly blue-tinted so it sits with the navy rather than
   reading as dirty against the cream panel.
   Applied to all three menus so a subcategory behaves the same wherever it
   appears. These override the earlier navy rules, so they must stay after
   them in this file. */
.widget_nav_mega_menu .wd-nav-vertical .wd-sub-menu li > a:hover,
.widget_nav_mega_menu .wd-nav-vertical .wd-sub-menu li > a:focus-visible,
.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu li > a:hover,
.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu li > a:focus-visible,
.mobile-nav .wd-nav-mobile .wd-sub-menu li > a:active,
.mobile-nav .wd-nav-mobile .wd-sub-menu li > a:focus-visible {
	background-color: #E9EAF2 !important;
	color: #1D3198 !important;
}

/* The icons are navy already, so the white-out used on the navy bars would
   erase them against light grey. */
.widget_nav_mega_menu .wd-nav-vertical .wd-sub-menu li > a:hover .wd-nav-img,
.widget_nav_mega_menu .wd-nav-vertical .wd-sub-menu li > a:focus-visible .wd-nav-img,
.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu li > a:hover .wd-nav-img,
.wd-dropdown-cats .wd-nav-vertical .wd-sub-menu li > a:focus-visible .wd-nav-img,
.mobile-nav .wd-nav-mobile .wd-sub-menu li > a:active .wd-nav-img,
.mobile-nav .wd-nav-mobile .wd-sub-menu li > a:focus-visible .wd-nav-img {
	filter: none !important;
}


/* === SHOP BAND SUBCATEGORY FLYOUT === */
/* The subcategory flyout on the category archive band was near black. This
   brings it to the same deep blue as the footer, so the dark surfaces on the
   site match rather than one being black and the other blue. */
.wd-nav-product-cat .wd-dropdown-menu,
.wd-nav-product-cat .wd-sub-menu,
.wd-page-title .wd-nav-product-cat .wd-dropdown {
	background-color: #000C5C !important;
}


/* === MOBILE: CATEGORY BAND ON BRAND BLUE === */
/* On the category archive the subcategory list sits in a panel the theme
   tints with rgba(0,0,0,.4), which reads as a black box over the band
   photo. It takes brand blue instead, so the panel belongs to the brand
   rather than looking like a dimmed overlay. The nested list keeps the
   deeper navy set further up, which is what separates the two levels.
   The band itself also carries a black base underneath its photo, which
   shows on any category with no image, so that goes blue too. */
@media (max-width: 1024px) {
	.wd-nav-product-cat,
	.wd-page-title .wd-nav-product-cat {
		background-color: rgba(0, 12, 92, 0.4) !important;
	}

	/* The nested list paints nothing of its own, so the panel reads as one
	   translucent surface rather than a darker box inside a lighter one. The
	   indent and the icons are what mark the level. */
	.wd-nav-product-cat .wd-sub-menu,
	.wd-nav-product-cat .wd-dropdown-menu,
	.wd-page-title .wd-nav-product-cat .wd-dropdown {
		background-color: transparent !important;
	}

	.wd-page-title {
		background-color: #000C5C !important;
	}

	/* The open section is one solid block, parent row and its children
	   together, in a blue darker than the translucent panel around it. It runs
	   the full width of the panel, so the whole section reads as the thing
	   being looked at rather than a bar sitting on top of a list. The row
	   itself paints nothing: the block behind it does the work. */
	.wd-nav-product-cat > li:has(> ul.child-open),
	.wd-nav-product-cat > li:has(> .wd-nav-opener.wd-active),
	.wd-nav-product-cat > li.wd-active {
		background-color: #000A47 !important;
		margin-inline: 0 !important;
		margin-block: 10px !important;
	}

	/* The panel carried 15px of side padding, which held every row away from
	   its edges. The padding moves onto the rows themselves, so the open block
	   reaches the panel edges while the text keeps the same inset. */
	.wd-nav-product-cat {
		padding-inline: 0 !important;
		padding-block: 22px !important;
		margin-block-start: 14px !important;
	}

	.wd-nav-product-cat > li > a,
	.wd-nav-product-cat > li > .wd-nav-opener {
		padding-inline: 15px !important;
	}

	.wd-nav-product-cat .wd-sub-menu,
	.wd-nav-product-cat > li > ul {
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}

	.wd-nav-product-cat .wd-sub-menu li > a,
	.wd-nav-product-cat > li > ul li > a {
		padding-inline: 35px 15px !important;
	}

	.wd-nav-product-cat li:has(> ul.child-open) > a,
	.wd-nav-product-cat li:has(> .wd-nav-opener.wd-active) > a,
	.wd-nav-product-cat > li.wd-active > a {
		background-color: transparent !important;
		color: #fff !important;
	}

	.wd-nav-product-cat li:has(> ul.child-open) > a .category-nav-link-count,
	.wd-nav-product-cat li:has(> .wd-nav-opener.wd-active) > a .category-nav-link-count,
	.wd-nav-product-cat > li.wd-active > a .category-nav-link-count {
		color: rgba(255, 255, 255, 0.75) !important;
	}

	/* The opener is a sibling of the link, so it needs saying separately or the
	   arrow stays grey on the blue row. */
	.wd-nav-product-cat li > .wd-nav-opener.wd-active,
	.wd-nav-product-cat li > .wd-nav-opener.wd-active:before {
		color: #fff !important;
	}
}


/* === NAV UNDERLINE ACCENT === */
/* The sliding underline on the category band is a 2px :after bar that takes
   var(--wd-primary-color), which is the brand navy. On the dark band that
   left navy on navy, so the marker for the category you are actually in was
   barely visible. Amber reads clearly against both the dark band and a light
   header.
   Scoped to the underline style only, so it does not repaint anything else
   that uses the primary colour. */
.wd-nav[class*="wd-style-underline"] .nav-link-text:after {
	background-color: #FEC22C !important;
	height: 2px;
}