/* Header colors also apply to the mobile navigation, without recoloring its cart drawer. */
html body.tc-theme-frontend .site-header
:is(a, button):not(.wp-block-woocommerce-mini-cart-contents *) {
	transition: color 240ms ease;
}

html body.tc-theme-frontend .site-header
:is(a, button):not(.wp-block-woocommerce-mini-cart-contents *):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
	color: #cdff09 !important;
}

html body.tc-theme-frontend .site-header
:is(a, button):not(.wp-block-woocommerce-mini-cart-contents *):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) :is(span, svg):not(.wc-block-mini-cart__badge) {
	color: inherit !important;
}

/* Keep the count legible independently of the button's hover color. */
html body.tc-theme-frontend .wc-block-mini-cart__badge {
	background-color: #cdff09 !important;
	color: #000 !important;
}

html body.tc-theme-frontend .wc-block-mini-cart__quantity-badge {
	/* Reserve room for the count before the price, including two-digit counts. */
	margin-inline-end: 8px;
}

@media (max-width: 600px) {
	/* Restore the bag icon and place a compact count at its top-right corner. */
	html body.tc-theme-frontend .wc-block-mini-cart__quantity-badge {
		position: relative;
		flex: 0 0 32px;
		width: 32px;
		height: 32px;
		margin-inline-end: 6px;
	}

	html body.tc-theme-frontend .wc-block-mini-cart__quantity-badge svg.wc-block-mini-cart__icon {
		display: block !important;
		width: 32px;
		height: 32px;
		margin: 0;
	}

	html body.tc-theme-frontend .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge {
		position: absolute;
		top: -2px;
		right: -6px;
		bottom: auto;
		left: auto;
		width: auto;
		min-width: 18px;
		height: 18px;
		margin: 0 !important;
		padding: 0 4px;
		border-radius: 999px;
		transform: none;
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
	}

	html body.tc-theme-frontend .wc-block-mini-cart__button {
		gap: 8px;
	}
}

html body.tc-theme-frontend .site-header
.wc-block-mini-cart__button {
	opacity: 1;
}

/* Animate the underline's width rather than retaining invisible transform layers. */
@media (min-width: 1025px) {
	html body.tc-theme-frontend .site-header .wp-block-navigation-item__content::after {
		background-color: #cdff09 !important;
		transform: none !important;
		will-change: auto !important;
		width: 0 !important;
		transition: width 240ms ease !important;
	}

	html body.tc-theme-frontend .site-header
	.wp-block-navigation-item__content:is(:hover, :focus-visible, .has-focus)::after {
		width: 100% !important;
	}
}

html body.tc-theme-frontend .site-header > svg.wmw-header-border {
	display: none !important;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	/* Retain the original border width to keep the header's height unchanged. */
	html body.tc-theme-frontend .site-header.wmw-header-border-ready {
		border-bottom-color: transparent !important;
	}

	html body.tc-theme-frontend .site-header.wmw-header-border-ready > svg.wmw-header-border {
		display: block !important;
		position: absolute !important;
		top: auto !important;
		right: auto !important;
		/* Align the path's y=8 baseline with the center of the 2px border. */
		bottom: -13px;
		left: 0 !important;
		width: 100% !important;
		max-width: none;
		height: 20px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible;
		pointer-events: none;
		transition: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body.tc-theme-frontend .site-header
	:is(a, button):not(.wp-block-woocommerce-mini-cart-contents *) {
		transition: none;
	}

	html body.tc-theme-frontend .site-header .wp-block-navigation-item__content::after {
		transition: none !important;
	}
}