/**
 * Header v2 (hidden tests ?gm_v2=1 and ?gm_pdp=v2).
 * Miguel, 11 Nov 2026: menu icons too small, the four contact buttons too big,
 * tagline not fitted to the logo width (that one is fixed in inc/pages-v2.php:
 * the logo scale goes from 1.15 to 1, so logo and tagline share one width).
 */

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header__top {
	min-height: 0;
	padding-block: 8px 6px;
	align-items: center;
}

/* Contact buttons: smaller icon blocks, same reading size */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header__actions {
	gap: 4px 6px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-site-header__contact, .gm-site-header__quote) {
	min-height: 0;
	padding: 4px 6px;
	gap: 8px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header .gm-site-header__icon {
	flex: 0 0 30px;
	width: 30px !important;
	height: 30px !important;
	min-width: 0;
	box-shadow: none;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header .gm-site-header__icon .gm-icon {
	width: 20px;
	height: 20px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header__action-copy span {
	font-size: 11px;
}

/* Menu: icons that can be read, labels a size up */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu :is(.gm-primary-menu__link, .gm-primary-menu__summary) {
	gap: 7px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu :is(.gm-primary-menu__link, .gm-primary-menu__summary),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu .gm-primary-menu__label {
	font-size: 12px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu .gm-menu-icon--top {
	flex: 0 0 24px;
	width: 24px !important;
	height: 24px !important;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu .gm-menu-icon--top :is(svg, img) {
	width: 24px;
	height: 24px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu.gm-primary-menu--mega {
	gap: 0 4px;
	justify-content: space-between;
}


/* "Logo grande" (Miguel, 11 Nov): the logo keeps its full 285 px and the tagline is set
   larger and tracked out to that same width. The fit script then locks both together. */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header .gm-wordmark__tagline {
	font-size: 12px !important;
	letter-spacing: 0.42px !important;
}

@media (max-width: 782px) {
	:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header .gm-wordmark__tagline {
		font-size: 11px !important;
		letter-spacing: 0.5px !important;
	}
}

/* Official lockup (Miguel, 11 Nov: "tiene que quedar así como en el logo"): the header shows the
   brand's own vector, exported from Grosmac.ai, with the tagline drawn as part of the logo.
   The live text tagline stays in the page for screen readers and search engines. */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header .gm-wordmark {
	gap: 0;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header :is(.gm-wordmark__mark, .gm-wordmark__picture) {
	display: block;
	width: auto !important;
	max-width: none !important;
	height: auto;
	overflow: visible;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header .gm-wordmark__image {
	content: url("../brand/grosmac-logo-horizontal.svg");
	display: block;
	width: 300px !important;
	max-width: 62vw !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: 527.42 / 98.53;
	object-fit: contain;
	transform: none;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header .gm-wordmark__tagline {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 782px) {
	:is(body.gm-site-v2, body.gm-pdp-v2) .gm-site-header .gm-wordmark__image {
		width: 230px !important;
	}
}

/* =====================================================================
   Menu, second pass (Miguel, 11 Nov with screenshot): bigger menu icons;
   no grey or dark text on black; more of the brand palette in the
   drop-down families.
   ===================================================================== */

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu .gm-menu-icon--top {
	flex: 0 0 30px;
	width: 30px !important;
	height: 30px !important;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu .gm-menu-icon--top :is(svg, img) {
	width: 30px;
	height: 30px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu :is(.gm-primary-menu__link, .gm-primary-menu__summary) {
	gap: 6px;
}

/* Small labels in the panels: readable size, normal tracking */
:is(body.gm-site-v2, body.gm-pdp-v2) :is(.gm-mega-menu__lead, .gm-mega-menu__cta) > span:not(.gm-menu-icon) {
	font-size: 11px;
	letter-spacing: 0.08em;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card a span:not(.gm-menu-icon) small,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card a p {
	font-size: 12px;
}

/* Buttons on black: palette colour for the text, never grey */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link:visited {
	background: var(--gm-color-ink, #221f20);
	border-color: var(--gm-color-ink, #221f20);
	color: var(--gm-palette-honey-yellow, #f9b233) !important;
	font-size: 12px;
	opacity: 1;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link:hover,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link:focus-visible {
	background: var(--gm-color-brand, #f39200);
	border-color: var(--gm-color-ink, #221f20);
	color: var(--gm-color-ink, #221f20) !important;
}

/* Dark advice panel: light text, honey label, orange button that fits its box */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__cta {
	min-width: 0;
	overflow: hidden;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__cta > span {
	color: var(--gm-palette-honey-yellow, #f9b233) !important;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__cta strong {
	color: #fff !important;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__cta p {
	color: #f7f7f5 !important;
	opacity: 1;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__cta a,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__cta a:visited {
	display: flex;
	justify-content: center;
	width: 100%;
	min-width: 0;
	min-height: 40px;
	padding: 8px 10px;
	background: var(--gm-color-brand, #f39200);
	border-color: var(--gm-color-brand, #f39200);
	color: var(--gm-color-ink, #221f20) !important;
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 1.15;
	text-align: center;
	white-space: normal;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__cta a:hover {
	background: var(--gm-palette-honey-yellow, #f9b233);
	border-color: var(--gm-palette-honey-yellow, #f9b233);
}

/* Families: each card carries one tone of the brand palette on its top edge and icon chip */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card {
	--gm-family-tone: var(--gm-color-brand, #de881f);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9n + 1) { --gm-family-tone: var(--gm-palette-rufous, #aa230e); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9n + 2) { --gm-family-tone: var(--gm-palette-persimmon, #ea5b0c); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9n + 3) { --gm-family-tone: var(--gm-palette-honey-yellow, #f9b233); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9n + 4) { --gm-family-tone: var(--gm-palette-liver-dogs, #b2640c); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9n + 5) { --gm-family-tone: var(--gm-palette-sinopia, #ca3f0d); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9n + 6) { --gm-family-tone: var(--gm-color-brand, #de881f); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9n + 7) { --gm-family-tone: var(--gm-palette-chocolate, #804108); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9n + 8) { --gm-family-tone: var(--gm-palette-harvest-gold, #d68b20); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card:nth-child(9n + 9) { --gm-family-tone: var(--gm-palette-seal-brown, #4e1e04); }

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a {
	border-top: 4px solid var(--gm-family-tone);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a .gm-menu-icon {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	background: color-mix(in srgb, var(--gm-family-tone) 14%, #fff);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a .gm-menu-icon :is(svg, img) {
	width: 32px;
	height: 32px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible {
	background: color-mix(in srgb, var(--gm-family-tone) 10%, #fff);
}

/* The icon graphic itself was held at 18 px by the icon rules; force it, and keep the bar on one line */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu .gm-menu-icon--top,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu .gm-menu-icon--top > :is(svg, img) {
	flex: 0 0 28px;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px;
	max-width: none;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu.gm-primary-menu--mega {
	gap: 0;
	overflow: visible;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu :is(.gm-primary-menu__link, .gm-primary-menu__summary) {
	gap: 5px;
	padding-inline: 4px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu :is(.gm-primary-menu__link, .gm-primary-menu__summary),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu .gm-primary-menu__label {
	font-size: 11.5px;
	letter-spacing: 0.04em;
}

/* =====================================================================
   Menu, third pass (Miguel, 11 Nov): stronger contrast between elements
   and dark combinations for the selected states.
   ===================================================================== */

/* Family cards at rest: dark icon block, firm carbon edge, palette tone on top */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a {
	border: 1px solid var(--gm-color-ink, #221f20);
	border-top: 4px solid var(--gm-family-tone);
	background: #fff;
	box-shadow: none;
	transform: none;
	transition: background-color 0.14s ease-out, color 0.14s ease-out;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a .gm-menu-icon {
	background: var(--gm-color-ink, #221f20);
	color: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a .gm-menu-icon > .gm-icon {
	--gm-icon-paper: var(--gm-color-ink, #221f20);
}

/* Family card selected (hover / keyboard): the whole card goes carbon, icon block takes the tone */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible {
	background: var(--gm-color-ink, #221f20);
	border-color: var(--gm-color-ink, #221f20);
	border-top-color: var(--gm-family-tone);
	color: #fff;
	box-shadow: none;
	transform: none;
	outline: none;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover :is(strong, span, small, p),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible :is(strong, span, small, p) {
	color: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover .gm-menu-icon,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible .gm-menu-icon {
	background: var(--gm-color-brand, #f39200);
	color: var(--gm-color-ink, #221f20);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover .gm-menu-icon > .gm-icon,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible .gm-menu-icon > .gm-icon {
	--gm-icon-paper: var(--gm-color-brand, #f39200);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible {
	outline: 3px solid var(--gm-color-brand, #f39200);
	outline-offset: 2px;
}

/* Lead box: carbon instead of cream, so it reads as the head of the panel */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead {
	background: var(--gm-color-ink, #221f20);
	color: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead > span:not(.gm-menu-icon) {
	color: var(--gm-palette-honey-yellow, #f9b233);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead strong {
	color: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead p {
	color: #f7f7f5;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead .gm-menu-icon {
	background: var(--gm-color-brand, #f39200);
	color: var(--gm-color-ink, #221f20);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead .gm-menu-icon > .gm-icon {
	--gm-icon-paper: var(--gm-color-brand, #f39200);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link:visited {
	background: var(--gm-color-brand, #f39200);
	border-color: var(--gm-color-brand, #f39200);
	color: var(--gm-color-ink, #221f20) !important;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link:hover,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead-link:focus-visible {
	background: var(--gm-palette-honey-yellow, #f9b233);
	border-color: var(--gm-palette-honey-yellow, #f9b233);
}

/* The advice panel on the right changes to the deep brown of the palette, so the two dark blocks differ */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__cta {
	background: var(--gm-palette-seal-brown, #4e1e04);
	border-color: var(--gm-palette-seal-brown, #4e1e04);
}

/* Top bar: the open or current item is a carbon block with white label */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega > .gm-mega-menu__item > .gm-primary-menu__link[aria-current="page"],
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega > .gm-mega-menu__item > .gm-primary-menu__details[open] > .gm-primary-menu__summary,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega > .gm-mega-menu__item.current-menu-ancestor > .gm-primary-menu__details > .gm-primary-menu__summary {
	background: var(--gm-color-ink, #221f20);
	color: #fff;
	box-shadow: inset 0 -4px 0 var(--gm-color-brand, #f39200);
	border-color: transparent;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega > .gm-mega-menu__item > .gm-primary-menu__link[aria-current="page"] :is(.gm-primary-menu__label, .gm-menu-icon, .gm-primary-menu__chevron),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega > .gm-mega-menu__item > .gm-primary-menu__details[open] > .gm-primary-menu__summary :is(.gm-primary-menu__label, .gm-menu-icon, .gm-primary-menu__chevron),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega > .gm-mega-menu__item.current-menu-ancestor > .gm-primary-menu__details > .gm-primary-menu__summary :is(.gm-primary-menu__label, .gm-menu-icon, .gm-primary-menu__chevron) {
	color: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-primary-menu--mega > .gm-mega-menu__item > :is(.gm-primary-menu__link[aria-current="page"], .gm-primary-menu__details[open] > .gm-primary-menu__summary) .gm-menu-icon > .gm-icon {
	--gm-icon-paper: var(--gm-color-ink, #221f20);
}

@media (prefers-reduced-motion: reduce) {
	:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a {
		transition: none;
	}
}

/* Selected card: every line of text turns light (the description kept its dark colour) */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover > :not(.gm-menu-icon),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover > :not(.gm-menu-icon) *,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible > :not(.gm-menu-icon),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible > :not(.gm-menu-icon) * {
	color: #fff !important;
	opacity: 1;
}

/* Selected card or lead box: the icon sits on an orange block, so its orange detail turns white */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover .gm-menu-icon > .gm-icon,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible .gm-menu-icon > .gm-icon,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead .gm-menu-icon > .gm-icon {
	--gm-icon-mass: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover .gm-menu-icon .gm-icon__accent,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible .gm-menu-icon .gm-icon__accent,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead .gm-menu-icon .gm-icon__accent {
	stroke: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover .gm-menu-icon :is(circle, ellipse, rect, polygon).gm-icon__accent,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:hover .gm-menu-icon path.gm-icon__accent:is([d$="Z" i], .gm-icon__solid),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible .gm-menu-icon :is(circle, ellipse, rect, polygon).gm-icon__accent,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:focus-visible .gm-menu-icon path.gm-icon__accent:is([d$="Z" i], .gm-icon__solid),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead .gm-menu-icon :is(circle, ellipse, rect, polygon).gm-icon__accent,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__lead .gm-menu-icon path.gm-icon__accent:is([d$="Z" i], .gm-icon__solid) {
	fill: #fff;
}

/* =====================================================================
   Phone menu in the approved direction (11 Nov 2026): tighter rows,
   open section as a black block, families with their palette tone,
   black icon blocks, no cream fills or side bars.
   ===================================================================== */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu {
	gap: 6px;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu :is(.gm-mobile-menu__link, .gm-mobile-menu__summary) {
	min-height: 48px;
	padding-block: 6px;
	border: 1px solid #111;
	background: #fff;
	color: #111;
	font-family: var(--gm-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	box-shadow: none;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu .gm-menu-icon {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	background: #111;
	color: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu .gm-menu-icon > .gm-icon {
	--gm-icon-paper: #111;
	width: 26px;
	height: 26px;
}

/* Open section and current page: black block, white label, amber icon block */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu :is(.gm-mobile-menu__details[open] > .gm-mobile-menu__summary, .gm-mobile-menu__item.is-active > .gm-mobile-menu__link, .gm-mobile-menu__link[aria-current="page"]) {
	background: #111;
	color: #fff;
	box-shadow: inset 0 -4px 0 var(--gm-color-brand);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu :is(.gm-mobile-menu__details[open] > .gm-mobile-menu__summary, .gm-mobile-menu__item.is-active > .gm-mobile-menu__link, .gm-mobile-menu__link[aria-current="page"]) :is(.gm-mobile-menu__label, .gm-mobile-menu__chevron) {
	color: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu :is(.gm-mobile-menu__details[open] > .gm-mobile-menu__summary, .gm-mobile-menu__item.is-active > .gm-mobile-menu__link, .gm-mobile-menu__link[aria-current="page"]) > .gm-menu-icon {
	background: var(--gm-color-brand);
	color: #111;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu :is(.gm-mobile-menu__details[open] > .gm-mobile-menu__summary, .gm-mobile-menu__item.is-active > .gm-mobile-menu__link, .gm-mobile-menu__link[aria-current="page"]) > .gm-menu-icon > .gm-icon {
	--gm-icon-paper: var(--gm-color-brand);
	--gm-icon-mass: #fff;
}

/* Children: no side bar, no cream; one palette tone per family on the top edge */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children {
	gap: 5px;
	margin: 0;
	padding: 6px 0 6px 10px;
	border: 0;
	background: none;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children :is(a, summary) {
	min-height: 44px;
	padding-block: 4px;
	border: 1px solid #111;
	border-top: 4px solid var(--gm-color-brand);
	background: #fff;
	color: #111;
	font-family: var(--gm-font-display);
	font-size: 15px;
	font-weight: 700;
	box-shadow: none;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children li:nth-child(9n + 1) > :is(a, details > summary) { border-top-color: var(--gm-palette-rufous, #aa230e); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children li:nth-child(9n + 2) > :is(a, details > summary) { border-top-color: var(--gm-palette-persimmon, #ea5b0c); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children li:nth-child(9n + 3) > :is(a, details > summary) { border-top-color: var(--gm-palette-honey-yellow, #f9b233); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children li:nth-child(9n + 4) > :is(a, details > summary) { border-top-color: var(--gm-palette-liver-dogs, #b2640c); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children li:nth-child(9n + 5) > :is(a, details > summary) { border-top-color: var(--gm-palette-sinopia, #ca3f0d); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children li:nth-child(9n + 6) > :is(a, details > summary) { border-top-color: var(--gm-color-brand); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children li:nth-child(9n + 7) > :is(a, details > summary) { border-top-color: var(--gm-palette-chocolate, #804108); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children li:nth-child(9n + 8) > :is(a, details > summary) { border-top-color: var(--gm-palette-harvest-gold, #d68b20); }
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children li:nth-child(9n + 9) > :is(a, details > summary) { border-top-color: var(--gm-palette-seal-brown, #4e1e04); }

/* "Open section": the action of the panel, as an amber button */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu__children .gm-mobile-menu__section-link {
	justify-content: center;
	min-height: 40px;
	border: 2px solid #111;
	background: var(--gm-color-brand);
	color: #111;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Touch feedback */
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu :is(a, summary):active {
	background: #111;
	color: #fff;
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mobile-menu :is(.gm-mobile-menu__list, .gm-mobile-menu__children ul) {
	margin: 0;
	padding-left: 0;
	border-left: 0;
}