/*
 * PM header overrides: CSS on top of Mega Menu Pro and Tabbed Navigation.
 * Loaded by wp-content/mu-plugins/pm-header-overrides.php
 */

/* Mobile slide-in: show the item count as a pill on the right of the back bar.
   pm-header-overrides.js copies the count into data-count on the tab button. */
.bricks-is-frontend [data-slide-in="true"]:not([data-submenu-reveal="expand"] *) .dwc-tabbed-nav-list__li.active > button[data-count]:not([data-count=""])::after {
	content: attr(data-count);
	position: fixed;
	inset-block-start: calc(var(--dwc-nest-header-height) / 2);
	inset-inline-end: var(--menu-item-inline-padding);
	transform: translateY(-50%);
	z-index: 1001;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 22px;
	padding: 2px 8px;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	background: #fff;
	color: #64748b;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
}

/* Mobile: the "view all" link sits under the title instead of overlapping it. */
.dwc-mobile .tn-view-all {
	position: static;
	inset: auto;
	white-space: normal;
	align-self: flex-start;
}

/* Header icon row (search, account, wishlist, cart): one row on narrow phones. */
@media (max-width: 420px) {
	#brx-header .brxe-block:has(> .mini-cart-trigger) {
		flex-wrap: nowrap;
		column-gap: 4px;
		padding-left: 4px;
		padding-right: 4px;
	}

	#brx-header .brxe-block:has(> .mini-cart-trigger) svg.brxe-icon {
		width: 40px;
		height: 40px;
		min-width: 0;
		max-height: none;
	}

	#brx-header .brxe-block:has(> .mini-cart-trigger) .bricks-link-wrapper {
		flex: 0 0 auto;
	}
}

@media (max-width: 340px) {
	#brx-header .brxe-block:has(> .mini-cart-trigger) svg.brxe-icon {
		width: 36px;
		height: 36px;
	}
}
/* Desktop: centre the menu on the page. The logo and the icon group take equal space
   (flex 1 1 0), so the menu in the middle sits at the true page centre whatever their widths. */
@media (min-width: 1201px) {
	#brx-header .dwc-nest-header__container > .dwc-nest-menu__logo {
		flex: 1 1 0;
		min-width: 0;
	}

	#brx-header .dwc-nest-header__container > .dwc-menu-wrap {
		flex: 0 0 auto;
		margin-left: 0;
		margin-right: 0;
	}

	#brx-header .dwc-nest-header__container > .brxe-block:has(> .mini-cart-trigger) {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		justify-content: flex-end;
	}
}