/* =====================================================================
   Brina Marketplace — Global storefront header
   Styles the Bricks "Header" template (ID 35) via stable brina-* classes.
   Every rule is scoped under #brx-header (Bricks' header landmark) so it
   outranks generated #brxe-* element rules without !important.

   Three layers: dark top bar -> white main header -> soft neutral nav.

   Breakpoints mirror the Bricks settings:
     tablet landscape  <= 1200px
     tablet portrait   <=  991px
     phone             <=  767px  (mobile landscape + portrait)
     small phone       <=  478px
   ===================================================================== */

#brx-header {
	--bh-brand: #5b4cf0;
	--bh-brand-strong: #4a3bd6;
	--bh-brand-ink: #3a2cc0;
	--bh-brand-tint: #f1edff;
	--bh-brand-tint-strong: #e7e1ff;
	--bh-brand-line: #d9d1fd;
	--bh-ink: #111827;
	--bh-ink-2: #2b3445;
	--bh-muted: #6b7280;
	--bh-line: #e6e8ee;
	--bh-line-soft: #eceef3;
	--bh-search-bg: #f8f9fc;
	--bh-search-line: #d6dae3;
	--bh-hover: #f3f4f8;
	--bh-nav-bg: #f7f8fb;
	--bh-nav-hover: #eef0f6;
	--bh-topbar-bg: #101c3d;
	--bh-topbar-ink: rgba(255, 255, 255, 0.84);
	--bh-topbar-icon: #b9b2ff;
	--bh-topbar-line: rgba(255, 255, 255, 0.16);
	--bh-promo: #c92f55;
	--bh-promo-strong: #a8244a;
	--bh-gutter: 20px;
	/* Outer edge insets. Equal to the gutter everywhere except phones. */
	--bh-gutter-l: var(--bh-gutter);
	--bh-gutter-r: var(--bh-gutter);
	--bh-max: 1680px;

	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   Layer 1 — Top bar
   --------------------------------------------------------------------- */

#brx-header .brina-topbar {
	width: 100%;
	background-color: var(--bh-topbar-bg);
	color: var(--bh-topbar-ink);
}

#brx-header .brina-topbar__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: var(--bh-max);
	min-height: 36px;
	margin: 0 auto;
	padding: 0 var(--bh-gutter-r) 0 var(--bh-gutter-l);
}

#brx-header .brina-topbar__group {
	display: flex;
	align-items: center;
	min-width: 0;
}

#brx-header .brina-topbar__group--utility {
	flex: 0 0 auto;
}

#brx-header .brina-topbar__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	min-height: 36px;
	padding: 0 16px;
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.005em;
	white-space: nowrap;
	text-decoration: none;
}

#brx-header .brina-topbar__group > .brina-topbar__item:first-child {
	padding-left: 0;
}

#brx-header .brina-topbar__group > .brina-topbar__item:last-child {
	padding-right: 0;
}

/* Hairline separators between neighbouring items. */
#brx-header .brina-topbar__item + .brina-topbar__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 14px;
	margin-top: -7px;
	background-color: var(--bh-topbar-line);
}

#brx-header .brina-topbar__icon {
	flex: 0 0 auto;
	color: var(--bh-topbar-icon);
	font-size: 13px;
	line-height: 1;
}

#brx-header .brina-topbar__text {
	overflow: hidden;
	color: inherit;
	font: inherit;
	text-overflow: ellipsis;
}

/* "Sell on Brina" only: same text treatment as Track Order (inherits the
   top-bar ink like every top-bar item; regular 500 weight). */
#brx-header .brina-topbar__item--sell {
	color: inherit;
	font-weight: 500;
}

#brx-header .brina-topbar__link {
	transition: color 0.15s ease;
}

#brx-header .brina-topbar__link:hover {
	color: #fff;
}

#brx-header .brina-topbar__link:hover .brina-topbar__text,
#brx-header .brina-topbar__item--sell:hover {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.5);
	text-underline-offset: 3px;
}

#brx-header .brina-topbar__link:focus-visible {
	border-radius: 3px;
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/* ---------------------------------------------------------------------
   Layer 2 — Main header: brand -> search -> customer actions
   --------------------------------------------------------------------- */

#brx-header .brina-main-header {
	position: relative;
	display: flex;
	width: 100%;
	border-bottom: 1px solid var(--bh-line-soft);
	background-color: #fff;
}

#brx-header .brina-main-header__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: var(--bh-max);
	min-height: 64px;
	margin: 0 auto;
	padding: 8px var(--bh-gutter-r) 8px var(--bh-gutter-l);
}

/* Brand ------------------------------------------------------------- */

#brx-header .brina-brand {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 11px;
	min-width: 0;
	margin-right: 8px;
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
}

#brx-header .brina-brand:focus-visible {
	outline: 2px solid var(--bh-brand);
	outline-offset: 4px;
}

#brx-header .brina-brand__mark {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: var(--bh-brand);
	background-image: linear-gradient(180deg, #6a5cf6 0%, #5344e8 100%);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12), 0 4px 10px -4px rgba(91, 76, 240, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#brx-header .brina-brand__mark img {
	width: 28px;
	height: 28px;
}

#brx-header .brina-brand__mark-icon {
	color: #fff;
	font-size: 22px;
	line-height: 1;
}

/* If the original brand-mark image is restored, it takes precedence. */
#brx-header .brina-brand__mark:has(img) .brina-brand__mark-icon {
	display: none;
}

#brx-header .brina-brand__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

#brx-header .brina-brand__name {
	color: var(--bh-ink);
	font-size: 24px;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.025em;
}

#brx-header .brina-brand__tagline {
	color: var(--bh-muted);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Search ------------------------------------------------------------ */

#brx-header .brina-header-search {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 960px;
}

/* "All Categories" is static text with no selector or query behind it. */
#brx-header .brina-header-search__category {
	display: none;
}

#brx-header .brina-header-search__box,
#brx-header .brina-header-search__field {
	display: flex;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

#brx-header .brina-header-search__field form {
	display: flex;
	align-items: stretch;
	gap: 4px;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 4px 4px 4px 6px;
	border: 1px solid var(--bh-search-line);
	border-radius: 12px;
	background-color: var(--bh-search-bg);
	box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

#brx-header .brina-header-search__field form:hover {
	border-color: #b9bfcc;
}

#brx-header .brina-header-search__field form:focus-within {
	border-color: var(--bh-brand);
	background-color: #fff;
	box-shadow: 0 0 0 4px rgba(91, 76, 240, 0.16);
}

#brx-header .brina-header-search__field input[type="search"] {
	flex: 1 1 auto;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--bh-ink);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 400;
	line-height: normal;
	text-align: left;
	outline: none;
}

#brx-header .brina-header-search__field input[type="search"]::placeholder {
	color: var(--bh-muted);
	opacity: 1;
}

#brx-header .brina-header-search__field button[type="submit"] {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background-color: var(--bh-brand);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(17, 24, 39, 0.12);
	color: #fff;
	font-size: 17px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#brx-header .brina-header-search__field button[type="submit"]:hover {
	background-color: var(--bh-brand-strong);
}

#brx-header .brina-header-search__field button[type="submit"]:focus-visible {
	outline: 2px solid var(--bh-ink);
	outline-offset: 2px;
}

#brx-header .brina-header-search__field button[type="submit"] i {
	transition: transform 0.12s ease;
}

#brx-header .brina-header-search__field button[type="submit"]:active i {
	transform: translateY(1px);
}

/* Customer actions -------------------------------------------------- */

#brx-header .brina-header-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

#brx-header .brina-header-action {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 6px 12px 6px 10px;
	border-radius: 10px;
	color: var(--bh-ink);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

#brx-header .brina-header-action:hover {
	background-color: var(--bh-hover);
}

#brx-header .brina-header-action:focus-visible {
	outline: 2px solid var(--bh-brand);
	outline-offset: 1px;
}

/* Group separators: account | orders · wishlist | cart */
#brx-header .brina-header-actions > .brina-header-action--orders,
#brx-header .brina-header-actions > .brina-header-action--cart {
	margin-left: 9px;
}

#brx-header .brina-header-actions > .brina-header-action--orders::before,
#brx-header .brina-header-actions > .brina-header-action--cart::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -6px;
	width: 1px;
	height: 28px;
	margin-top: -14px;
	background-color: var(--bh-line);
	pointer-events: none;
}

#brx-header .brina-header-action__icon {
	flex: 0 0 auto;
	width: 24px;
	color: var(--bh-ink-2);
	font-size: 21px;
	line-height: 1;
	text-align: center;
	transition: color 0.15s ease;
}

#brx-header .brina-header-action:hover .brina-header-action__icon {
	color: var(--bh-brand);
}

#brx-header .brina-header-action__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
}

#brx-header .brina-header-action__eyebrow {
	color: var(--bh-muted);
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.1;
	white-space: nowrap;
}

#brx-header .brina-header-action__label {
	max-width: 14ch;
	overflow: hidden;
	color: var(--bh-ink);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Logged out: the first-name slot renders empty. */
#brx-header .brina-header-action__name:empty {
	display: none;
}

/* Logged in without a first name: fall back to a readable label. */
.logged-in #brx-header .brina-header-action__name:empty {
	display: block;
}

.logged-in #brx-header .brina-header-action__name:empty::before {
	content: "Account";
}

/* Cart quantity badge. The inner span.cart-count is rendered by the
   [brina_cart_count] shortcode and replaced by Bricks' add-to-cart
   fragment, which toggles .show / .hide. */
#brx-header .brina-header-action__badge {
	position: absolute;
	top: 3px;
	left: 25px;
	line-height: 0;
	pointer-events: none;
}

#brx-header .brina-header-action--cart .cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border: 2px solid #fff;
	border-radius: 999px;
	background-color: var(--bh-brand);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

#brx-header .brina-header-action--cart .cart-count.hide {
	display: none;
}

/* Phone-only elements (shown <= 767px): account + menu toggle, delivery /
   track row, category rail, wishlist link in the menu panel. */
#brx-header .brina-header-phone-actions,
#brx-header .brina-header-menu-toggle,
#brx-header .brina-phone-utility,
#brx-header .brina-phone-chips,
#brx-header .brina-market-nav__links > .brina-market-nav__phone-only {
	display: none;
}

/* ---------------------------------------------------------------------
   Layer 3 — Soft neutral navigation bar
   --------------------------------------------------------------------- */

#brx-header .brina-market-nav {
	position: relative;
	display: flex;
	width: 100%;
	height: auto;
	border-bottom: 1px solid var(--bh-line);
	background-color: var(--bh-nav-bg);
	box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
}

#brx-header .brina-market-nav__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	width: 100%;
	max-width: var(--bh-max);
	min-height: 48px;
	margin: 0 auto;
	padding: 0 var(--bh-gutter-r) 0 var(--bh-gutter-l);
}

#brx-header .brina-market-nav__department {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	min-width: 214px;
	height: 36px;
	padding: 0 12px 0 13px;
	border: 1px solid var(--bh-brand-line);
	border-radius: 9px;
	background-color: var(--bh-brand-tint);
	color: var(--bh-brand-ink);
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

#brx-header .brina-market-nav__department:hover {
	border-color: #c9bffc;
	background-color: var(--bh-brand-tint-strong);
}

#brx-header .brina-market-nav__department:has(> [data-department-open="true"]) {
	border-color: var(--bh-brand);
	background-color: var(--bh-brand-tint-strong);
}

#brx-header .brina-market-nav__department:focus-visible {
	outline: 2px solid var(--bh-brand);
	outline-offset: 2px;
}

#brx-header .brina-market-nav__department-icon {
	flex: 0 0 auto;
	color: var(--bh-brand);
	font-size: 16px;
	line-height: 1;
}

#brx-header .brina-market-nav__department-label {
	flex: 1 1 auto;
	color: var(--bh-brand-ink);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.005em;
	white-space: nowrap;
}

#brx-header .brina-market-nav__department-chevron {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--bh-brand-ink);
	font-size: 10px;
	line-height: 1;
	transition: transform 0.2s ease;
}

#brx-header .brina-market-nav__department:has(> [data-department-open="true"]) .brina-market-nav__department-chevron {
	transform: rotate(180deg);
}

/* Dropdown keeps its Bricks styling and open/close CSS; only spacing and
   row states are refined here. */
#brx-header .brina-market-nav__dropdown {
	top: calc(100% + 7px);
	left: -1px;
	cursor: default;
	box-shadow: 0 16px 32px -8px rgba(17, 24, 39, 0.16), 0 2px 6px rgba(17, 24, 39, 0.06);
}

#brx-header .brina-market-nav__dropdown > .brxe-div {
	transition: background-color 0.12s ease;
}

#brx-header .brina-market-nav__links {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 2px;
	min-width: 0;
	height: 48px;
	padding: 0 0 0 14px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

#brx-header .brina-market-nav__links::-webkit-scrollbar {
	display: none;
}

#brx-header .brina-market-nav__link {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	height: 48px;
	padding: 0 12px;
	color: var(--bh-ink-2);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.15s ease;
}

/* Underline indicator sits on the bar's bottom edge. */
#brx-header .brina-market-nav__link::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 0;
	left: 12px;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background-color: currentColor;
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

#brx-header .brina-market-nav__link:hover,
#brx-header .brina-market-nav__link[aria-current="page"] {
	color: var(--bh-brand);
}

#brx-header .brina-market-nav__link:hover::after,
#brx-header .brina-market-nav__link[aria-current="page"]::after {
	transform: scaleX(1);
}

#brx-header .brina-market-nav__link:focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--bh-brand);
	outline-offset: -8px;
}

/* Today's Deals: right-aligned accent, tied to the bar by a hairline. */
#brx-header .brina-market-nav__promo {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	height: 48px;
	margin-left: auto;
	padding-left: 10px;
}

#brx-header .brina-market-nav__promo::before {
	content: "";
	width: 1px;
	height: 20px;
	margin-right: 4px;
	background-color: var(--bh-line);
}

#brx-header .brina-market-nav__link--promo {
	gap: 8px;
	color: var(--bh-promo);
	font-weight: 600;
}

#brx-header .brina-market-nav__link--promo::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
	box-shadow: 0 0 0 3px rgba(201, 47, 85, 0.14);
}

#brx-header .brina-market-nav__link--promo::after {
	left: 26px;
}

#brx-header .brina-market-nav__link--promo:hover {
	color: var(--bh-promo-strong);
}

/* ---------------------------------------------------------------------
   Tablet landscape (<= 1200px): compact, stacked customer actions
   --------------------------------------------------------------------- */

@media (max-width: 1200px) {
	#brx-header .brina-main-header__inner {
		gap: 20px;
	}

	#brx-header .brina-brand {
		margin-right: 0;
	}

	#brx-header .brina-header-action {
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		min-width: 60px;
		padding: 5px 8px;
	}

	#brx-header .brina-header-actions > .brina-header-action--orders,
	#brx-header .brina-header-actions > .brina-header-action--cart {
		margin-left: 0;
	}

	#brx-header .brina-header-actions > .brina-header-action--orders::before,
	#brx-header .brina-header-actions > .brina-header-action--cart::before {
		display: none;
	}

	#brx-header .brina-header-action__text {
		align-items: center;
	}

	#brx-header .brina-header-action__eyebrow {
		display: none;
	}

	#brx-header .brina-header-action__label {
		max-width: 9ch;
		font-size: 11.5px;
	}

	#brx-header .brina-header-action__badge {
		top: 1px;
		left: calc(50% + 3px);
	}

	#brx-header .brina-market-nav__department {
		min-width: 200px;
	}

	/* Links scroll horizontally; fade the trailing edge as a cue. */
	#brx-header .brina-market-nav__links {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}
}

/* ---------------------------------------------------------------------
   Tablet portrait (<= 991px)
   --------------------------------------------------------------------- */

@media (max-width: 991px) {
	#brx-header {
		--bh-gutter: 16px;
	}

	#brx-header .brina-topbar__item {
		padding: 0 12px;
	}

	#brx-header .brina-topbar__item--support {
		display: none;
	}

	#brx-header .brina-main-header__inner {
		gap: 16px;
		min-height: 0;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	#brx-header .brina-brand__name {
		font-size: 21px;
	}

	#brx-header .brina-header-action {
		min-width: 56px;
		padding: 5px 6px;
	}

	#brx-header .brina-market-nav__department {
		min-width: 0;
	}

	#brx-header .brina-market-nav__links {
		padding-left: 4px;
	}

	#brx-header .brina-market-nav__link {
		padding: 0 10px;
	}

	#brx-header .brina-market-nav__link::after {
		right: 10px;
		left: 10px;
	}

	#brx-header .brina-market-nav__link--promo::after {
		left: 24px;
	}
}

/* ---------------------------------------------------------------------
   Phone (<= 767px)
   Row 1  top bar: shipping message · Sell on Brina
   Row 2  brand .................. account · menu
   Row 3  search ........................ cart
   Row 4  Deliver to | Track Order
   Row 5  horizontal category chip rail
   The marketplace nav becomes an in-flow panel opened by the menu toggle.
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
	#brx-header {
		--bh-gutter: 16px;
		/* Phone header sits a little closer to the glass, more so on the right. */
		--bh-gutter-l: calc(var(--bh-gutter) - 2px);
		--bh-gutter-r: calc(var(--bh-gutter) - 5px);
		/* Rows 1-2 (logo/account/menu, search/cart) sit a touch wider still. */
		--bh-head-l: calc(var(--bh-gutter-l) - 1px);
		--bh-head-r: calc(var(--bh-gutter-r) - 4px);
		--bh-phone-surface: #fafafd;
		--bh-chip-line: #e2e0ef;
	}

	/* Row 1 — top bar ---------------------------------------------------- */

	#brx-header .brina-topbar__inner {
		gap: 12px;
		min-height: 34px;
	}

	#brx-header .brina-topbar__item {
		min-height: 34px;
		padding: 0 12px;
	}

	#brx-header .brina-topbar__item--returns,
	#brx-header .brina-topbar__item--track {
		display: none;
	}

	/* Row 2-5 grid --------------------------------------------------------- */

	#brx-header .brina-main-header__inner {
		display: grid;
		grid-template-areas:
			"brand account menu"
			"search search cart"
			"utility utility utility"
			"chips chips chips";
		grid-template-columns: minmax(0, 1fr) 44px 44px;
		align-items: center;
		gap: 0 1px;
		padding: 9px var(--bh-head-r) 0 var(--bh-head-l);
	}

	/* Row 2 — brand · account · menu;  Row 3 — search · cart ------------- */

	#brx-header .brina-brand {
		grid-area: brand;
		justify-self: start;
		gap: 9px;
		max-width: 100%;
		margin-left: 0;
	}

	#brx-header .brina-brand__mark {
		width: 38px;
		height: 38px;
		border-radius: 10px;
	}

	#brx-header .brina-brand__mark-icon {
		font-size: 19px;
	}

	#brx-header .brina-brand__name {
		font-size: 21px;
	}

	#brx-header .brina-brand__tagline {
		font-size: 9px;
	}

	#brx-header .brina-header-phone-actions {
		display: contents;
	}

	#brx-header .brina-header-action--phone {
		grid-area: account;
	}

	#brx-header .brina-header-actions {
		grid-area: cart;
		margin-top: 9px; /* Matches the search row offset so both centre on one line. */
		margin-left: 0;
		margin-right: -6px;
	}

	#brx-header .brina-header-actions > .brina-header-action:not(.brina-header-action--cart) {
		display: none;
	}

	/* Icon-only 44px targets; labels stay available to assistive tech. */
	#brx-header .brina-header-action {
		justify-content: center;
		width: 44px;
		min-width: 44px;
		height: 44px;
		min-height: 44px;
		padding: 0;
	}

	#brx-header .brina-header-action__icon {
		font-size: 22px;
	}

	#brx-header .brina-header-action--cart .brina-header-action__icon {
		font-size: 24px;
	}

	#brx-header .brina-header-action__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Bricks gives .brxe-shortcode width: 100%; at this offset that 44px box
	   pokes past the viewport edge and widens the page. Shrink it to the pill. */
	#brx-header .brina-header-action__badge {
		top: 3px;
		left: calc(50% + 2px);
		width: auto;
	}

	#brx-header .brina-header-menu-toggle {
		grid-area: menu;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -6px;
		border-radius: 10px;
		color: var(--bh-ink);
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
		transition: background-color 0.15s ease;
	}

	#brx-header .brina-header-menu-toggle[aria-expanded="true"] {
		background-color: var(--bh-hover);
	}

	@media (hover: hover) {
		#brx-header .brina-header-menu-toggle:hover {
			background-color: var(--bh-hover);
		}
	}

	#brx-header .brina-header-menu-toggle:focus-visible {
		outline: 2px solid var(--bh-brand);
		outline-offset: 1px;
	}

	/* Row 3 — search (1px column gap + the cart glyph's 11px inset in its
	   44px target leaves a 12px visual gap between the field and the cart) - */

	#brx-header .brina-header-search {
		grid-area: search;
		max-width: none;
		margin-top: 9px;
		margin-right: 0;
	}

	#brx-header .brina-header-search__field form {
		height: 41px;
		padding: 3px 4px 3px 6px;
		border-color: #dcd9ea;
		border-radius: 11px;
		background-color: var(--bh-search-bg);
	}

	/* 16px prevents iOS zoom-on-focus. */
	#brx-header .brina-header-search__field input[type="search"] {
		padding: 0 10px;
		font-size: 16px;
	}

	#brx-header .brina-header-search__field button[type="submit"] {
		width: 38px;
		border-radius: 8px;
		font-size: 16px;
	}

	/* Row 4 — Deliver to | Track Order ---------------------------------- */

	#brx-header .brina-phone-utility {
		grid-area: utility;
		display: flex;
		align-items: center;
		min-width: 0;
		max-width: none; /* Bricks caps [class*="brxe-"] at 100%, which stopped the bleed 2 x gutter short of the right edge. */
		margin: 8px calc(-1 * var(--bh-head-r)) 0 calc(-1 * var(--bh-head-l)); /* Bleed past the row padding. */
		padding: 0 var(--bh-gutter-r) 0 var(--bh-gutter-l);
		border-top: 1px solid var(--bh-line-soft);
		border-bottom: 1px solid var(--bh-line-soft);
		background-color: var(--bh-phone-surface);
	}

	#brx-header .brina-phone-utility__deliver {
		flex: 1 1 auto;
		min-width: 0;
	}

	#brx-header .brina-deliver,
	#brx-header .brina-phone-utility__track {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 34px;
		color: var(--bh-ink-2);
		font-size: 13px;
		line-height: 1.2;
		white-space: nowrap;
		text-decoration: none;
	}

	#brx-header .brina-deliver {
		min-width: 0;
		padding-right: 12px;
	}

	#brx-header .brina-deliver__icon,
	#brx-header .brina-phone-utility__icon {
		flex: 0 0 auto;
		color: var(--bh-brand);
		font-size: 15px;
		line-height: 1;
	}

	#brx-header .brina-deliver__label {
		flex: 0 0 auto;
		color: var(--bh-muted);
	}

	#brx-header .brina-deliver__value {
		min-width: 0;
		overflow: hidden;
		color: var(--bh-ink);
		font-weight: 600;
		text-overflow: ellipsis;
	}

	#brx-header .brina-deliver__value--empty {
		color: var(--bh-brand-ink);
	}

	#brx-header .brina-phone-utility__track {
		position: relative;
		flex: 0 0 auto;
		padding-left: 14px;
		color: var(--bh-ink);
		font-weight: 600;
	}

	/* Hairline divider between the two halves. */
	#brx-header .brina-phone-utility__track::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 1px;
		height: 18px;
		margin-top: -9px;
		background-color: var(--bh-line);
	}

	#brx-header .brina-deliver:focus-visible,
	#brx-header .brina-phone-utility__track:focus-visible {
		border-radius: 6px;
		outline: 2px solid var(--bh-brand);
		outline-offset: -2px;
	}

	/* Row 5 — category chip rail (only this row scrolls horizontally) ---- */

	#brx-header .brina-phone-chips {
		grid-area: chips;
		display: block;
		width: auto; /* Bricks sets .brxe-shortcode { width: 100% }; let the bleed margins widen it. */
		min-width: 0;
		max-width: none; /* Same Bricks 100% cap as the utility row; lets the rail reach both edges. */
		margin: 0 calc(-1 * var(--bh-head-r)) 0 calc(-1 * var(--bh-head-l));
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#brx-header .brina-phone-chips::-webkit-scrollbar {
		display: none;
	}

	#brx-header .brina-chips__list {
		display: flex;
		gap: 8px;
		width: max-content;
		margin: 0;
		padding: 8px var(--bh-gutter-r) 10px var(--bh-gutter-l);
		list-style: none;
	}

	#brx-header .brina-chips__list > li {
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
	}

	#brx-header .brina-chips__chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 32px;
		padding: 0 14px;
		border: 1px solid var(--bh-chip-line);
		border-radius: 999px;
		background-color: #fff;
		color: var(--bh-ink-2);
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}

	#brx-header .brina-chips__chip--all,
	#brx-header .brina-chips__chip[aria-current="page"] {
		border-color: var(--bh-brand-line);
		background-color: var(--bh-brand-tint);
		color: var(--bh-brand-ink);
		font-weight: 600;
	}

	#brx-header .brina-chips__icon {
		font-size: 13px;
		line-height: 1;
	}

	@media (hover: hover) {
		#brx-header .brina-chips__chip:hover {
			border-color: var(--bh-brand-line);
			color: var(--bh-brand-ink);
		}
	}

	#brx-header .brina-chips__chip:focus-visible {
		outline: 2px solid var(--bh-brand);
		outline-offset: 2px;
	}

	/* Navigation becomes a panel opened by the menu toggle. */
	#brx-header .brina-market-nav {
		display: none;
	}

	#brx-header .brina-market-nav[data-brina-nav-open="true"] {
		display: block;
	}

	#brx-header .brina-market-nav__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	#brx-header .brina-market-nav__department {
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		min-height: 44px;
		padding: 0 14px;
	}

	#brx-header .brina-market-nav__department-label {
		line-height: 44px;
	}

	#brx-header .brina-market-nav__dropdown {
		position: static;
		display: none;
		flex-basis: 100%;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0 -14px;
		padding: 6px 0;
		border: 0;
		border-top: 1px solid var(--bh-brand-line);
		border-radius: 0 0 8px 8px;
		box-shadow: none;
		transform: none;
	}

	#brx-header .brina-market-nav__dropdown > .brxe-div {
		min-height: 44px;
	}

	#brx-header .brina-market-nav__dropdown[data-department-open="true"] {
		display: flex;
	}

	#brx-header .brina-market-nav__links {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		height: auto;
		padding: 0;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	#brx-header .brina-market-nav__link {
		height: 44px;
		padding: 0 14px;
		border-radius: 8px;
	}

	#brx-header .brina-market-nav__link::after {
		display: none;
	}

	#brx-header .brina-market-nav__link:hover {
		background-color: var(--bh-nav-hover);
	}

	/* Wishlist moved out of the primary row; reachable from the menu. */
	#brx-header .brina-market-nav__links > .brina-market-nav__phone-only {
		display: inline-flex;
		gap: 10px;
		order: -1;
		color: var(--bh-ink);
		font-weight: 600;
	}

	#brx-header .brina-market-nav__phone-icon {
		color: var(--bh-brand);
		font-size: 16px;
		line-height: 1;
	}

	#brx-header .brina-market-nav__link:focus-visible {
		outline-offset: -2px;
	}

	#brx-header .brina-market-nav__promo {
		height: auto;
		margin-left: 0;
		padding: 4px 0 0;
		border-top: 1px solid var(--bh-line);
	}

	#brx-header .brina-market-nav__promo::before {
		display: none;
	}

	#brx-header .brina-market-nav__promo .brina-market-nav__link {
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------------
   Small phone (<= 478px)
   --------------------------------------------------------------------- */

@media (max-width: 478px) {
	#brx-header {
		--bh-gutter: 14px;
	}

	#brx-header .brina-topbar__item {
		gap: 6px;
		font-size: 11.5px;
	}

	#brx-header .brina-brand {
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#brx-header .brina-header-search__field form,
	#brx-header .brina-header-action,
	#brx-header .brina-header-action__icon,
	#brx-header .brina-market-nav__link,
	#brx-header .brina-market-nav__link::after,
	#brx-header .brina-market-nav__department,
	#brx-header .brina-market-nav__department-chevron,
	#brx-header .brina-market-nav__dropdown,
	#brx-header .brina-chips__chip {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   EXPERIMENT (2026-09-28) — Shop page, phone only: navy header + red top bar.
   The logo/search block is a softer navy-blue (#172b55 -> #234a78) with a
   faint drop onto the Deliver row; the top bar turns red. Colour-only; the
   Deliver row keeps its own surface and the chip rail is held at white.
   Restore point: BRINA_SHOP_MOBILE_HEADER_PRE_BACKGROUND_TEST_2026-09-27
   Remove this block to revert.
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
	body.woocommerce-shop #brx-header .brina-topbar {
		background-color: #d90429;
		color: #fff;
	}

	body.woocommerce-shop #brx-header .brina-topbar__icon {
		color: #fff;
	}

	/* Slimmer bar: 34px -> 30px (height comes from min-height, not padding). */
	body.woocommerce-shop #brx-header .brina-topbar__inner,
	body.woocommerce-shop #brx-header .brina-topbar__item {
		min-height: 30px;
	}

	body.woocommerce-shop #brx-header .brina-main-header {
		background-color: #193669;
		background-image: linear-gradient(110deg, #172b55 0%, #193669 55%, #1a4175 100%);
	}

	/* Search action: quiet neutral well instead of the purple button. */
	body.woocommerce-shop #brx-header .brina-header-search__field button[type="submit"] {
		background-color: #eef1f5;
		box-shadow: none;
		color: #1f3f6d;
	}

	body.woocommerce-shop #brx-header .brina-header-search__field button[type="submit"]:hover {
		background-color: #e6eaf0;
	}

	/* Track Order reads as a secondary action (was --bh-ink / 600). */
	body.woocommerce-shop #brx-header .brina-phone-utility__track {
		color: var(--bh-ink-2);
		font-weight: 500;
	}

	/* Soft depth under the navy block. The Deliver row is inside the same
	   section, so the shadow is cast inward at its top edge (no size change). */
	body.woocommerce-shop #brx-header .brina-phone-utility {
		box-shadow: inset 0 4px 12px -4px rgba(8, 24, 52, 0.1);
	}

	body.woocommerce-shop #brx-header .brina-phone-chips {
		background-color: #fff;
	}

	/* Wordmark text only (the mark keeps its artwork); dark ink would vanish on navy. */
	body.woocommerce-shop #brx-header .brina-brand__name,
	body.woocommerce-shop #brx-header .brina-brand__tagline {
		color: #e4eaf4;
	}

	body.woocommerce-shop #brx-header .brina-header-action__icon,
	body.woocommerce-shop #brx-header .brina-header-action:hover .brina-header-action__icon,
	body.woocommerce-shop #brx-header .brina-header-menu-toggle {
		color: #e4eaf4;
	}

	/* Light hover/open fills would hide the white icons; use a translucent white. */
	body.woocommerce-shop #brx-header .brina-header-action:hover,
	body.woocommerce-shop #brx-header .brina-header-menu-toggle:hover,
	body.woocommerce-shop #brx-header .brina-header-menu-toggle[aria-expanded="true"] {
		background-color: rgba(255, 255, 255, 0.14);
	}

	body.woocommerce-shop #brx-header .brina-brand:focus-visible,
	body.woocommerce-shop #brx-header .brina-header-action:focus-visible,
	body.woocommerce-shop #brx-header .brina-header-menu-toggle:focus-visible {
		outline-color: #fff;
	}
}

/* ---- Header actions: one modern outline icon family (2026-09-30) ---------
   Owner request: modernise ONLY the icons of Account, Orders, Wishlist and
   Cart. The Bricks template, links, labels, sizes and positions are
   unchanged: each Themify glyph (::before) is replaced by an original 24px
   outline drawing (1.7 stroke, round caps/joins) painted with currentColor
   through a mask, inside the same 1em box — so every existing colour, hover
   and responsive rule (21px desktop, 22/24px phone, navy shop header) still
   applies and nothing can shift. Orders uses a parcel instead of a truck. */
#brx-header .brina-header-action .brina-header-action__icon:is(.ti-user, .ti-truck, .ti-heart, .ti-shopping-cart)::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: top;
	background-color: currentColor;
	-webkit-mask: var(--brina-header-icon) center / contain no-repeat;
	mask: var(--brina-header-icon) center / contain no-repeat;
	pointer-events: none;
}

#brx-header .brina-header-action .brina-header-action__icon.ti-user {
	--brina-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.9'/%3E%3Cpath d='M4.6 20.2c.8-3.8 3.8-6 7.4-6s6.6 2.2 7.4 6'/%3E%3C/svg%3E");
}

#brx-header .brina-header-action .brina-header-action__icon.ti-truck {
	--brina-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.9 20.1 7.3v9.4L12 21.1l-8.1-4.4V7.3Z'/%3E%3Cpath d='M3.9 7.3 12 11.7l8.1-4.4'/%3E%3Cpath d='M12 11.7v9.4'/%3E%3Cpath d='m7.9 5.1 8.1 4.5v3'/%3E%3C/svg%3E");
}

#brx-header .brina-header-action .brina-header-action__icon.ti-heart {
	--brina-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.6s-7.6-4.5-7.6-10.1A4.2 4.2 0 0 1 12 7.1a4.2 4.2 0 0 1 7.6 2.4c0 5.6-7.6 10.1-7.6 10.1Z'/%3E%3C/svg%3E");
}

#brx-header .brina-header-action .brina-header-action__icon.ti-shopping-cart {
	--brina-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.9 4.1h2.4l2.2 10.6a1.6 1.6 0 0 0 1.6 1.3h8.1a1.6 1.6 0 0 0 1.6-1.2l1.6-6.9H6.2'/%3E%3Ccircle cx='9.6' cy='19.6' r='1.25'/%3E%3Ccircle cx='17.2' cy='19.6' r='1.25'/%3E%3C/svg%3E");
}

/* ---- Page shell: footer at the bottom of short pages (2026-09-30) -------
   Bricks lays every page out as a flex column (header, main with flex: 1,
   footer), but the body had no minimum height, so on short pages (empty
   cart, wishlist, checkout, filtered shop…) the footer ended mid-screen
   with blank space below it. With the body at least one viewport tall
   (minus the WordPress admin bar when shown) the main area takes the spare
   space; on taller pages nothing changes and the footer stays in normal
   document flow. The footer itself is untouched (not fixed / sticky). */
body {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

/* Header nav "Best Sellers" / "Brands" link to these homepage sections;
   leave breathing room above the heading when the anchor is followed. */
#brina-m-best-sellers-title,
#brina-m-brands-title {
	scroll-margin-top: 24px;
}

/* ---------------------------------------------------------------------
   Tablet top bar (768–1200px): Brina red + one "Ship to" item
   ---------------------------------------------------------------------
   Header 35: element brship (.brina-topbar__shipto-slot, [brina_ship_to])
   is the first child of .brina-topbar__inner. It is hidden on desktop and
   phone (display:none takes no flex space, so those layouts are
   unchanged). On tablet the left promo group (free shipping / returns /
   support) gives way to the Ship-to item; the right group (Sell on Brina,
   Track Order) is untouched apart from the icon tint needed on red. */
#brx-header .brina-topbar__shipto-slot {
	display: none;
}

@media (min-width: 768px) and (max-width: 1200px) {
	#brx-header .brina-topbar {
		--bh-topbar-icon: rgba(255, 255, 255, 0.9);
		background-color: #a8192e;
	}

	/* Slimmer utility strip: 36px -> 30px (height comes from min-height). */
	#brx-header .brina-topbar__inner,
	#brx-header .brina-topbar__item {
		min-height: 30px;
	}

	#brx-header .brina-topbar__group--info {
		display: none;
	}

	#brx-header .brina-topbar__shipto-slot {
		display: flex;
		flex: 0 1 auto;
		align-items: center;
		min-width: 0;
		width: auto;
	}

	#brx-header .brina-topbar__item--shipto {
		max-width: 100%;
		padding-left: 0;
	}

	#brx-header .brina-shipto__place {
		color: #fff;
		font-weight: 600;
	}
}

/* ---------------------------------------------------------------------
   Tablet main header (768–1200px): premium navy surface
   ---------------------------------------------------------------------
   Colour / finish only — no size, spacing or position changes. Main header
   (Bricks 35 element likqvf .brina-main-header) only; the top bar and the
   navigation row are not targeted. Colour family = the global footer
   (#brxe-whshys, flat #071a2b): the footer colour shading into the same
   colour mixed 88/12 with the pale off-white of the search field (#f4f6fa)
   = #233444. No second hue.
   Hierarchy: icons + brand name soft white · labels / tagline muted
   off-white · dividers low-opacity · search = the light surface. */
@media (min-width: 768px) and (max-width: 1200px) {
	#brx-header .brina-main-header {
		--bh-mh-ink: #f1f4fa;                       /* level 1: icons, brand name */
		--bh-mh-label: rgba(232, 237, 247, 0.92);   /* level 2: labels */
		--bh-mh-muted: #d3dbea;                     /* level 2b: tagline */
		--bh-mh-focus: rgba(244, 246, 250, 0.85);   /* pale off-white focus ring */
		border-bottom-color: #071a2b;
		background-color: #152738;
		background-image: linear-gradient(100deg, #071a2b 0%, #233444 100%);
		box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.05);
	}

	/* A little more vertical room (uniform 81px at every tablet width). */
	#brx-header .brina-main-header .brina-main-header__inner {
		min-height: 0;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	/* Logo: mark box unchanged; wordmark and tagline in light neutrals. */
	#brx-header .brina-main-header .brina-brand__name {
		color: var(--bh-mh-ink);
	}

	#brx-header .brina-main-header .brina-brand__tagline {
		color: var(--bh-mh-muted);
	}

	#brx-header .brina-main-header .brina-brand:focus-visible {
		outline-color: var(--bh-mh-focus);
	}

	/* Search: the light surface inside the dark header. */
	#brx-header .brina-main-header .brina-header-search__field form {
		border-color: rgba(255, 255, 255, 0.22);
		background-color: #f4f6fa;
		box-shadow: 0 1px 2px rgba(7, 26, 43, 0.35);
	}

	#brx-header .brina-main-header .brina-header-search__field form:hover {
		border-color: rgba(255, 255, 255, 0.4);
	}

	#brx-header .brina-main-header .brina-header-search__field form:focus-within {
		border-color: #ffffff;
		background-color: #ffffff;
		box-shadow: 0 0 0 3px rgba(244, 246, 250, 0.4);
	}

	#brx-header .brina-main-header .brina-header-search__field input[type="search"] {
		color: #071a2b;
	}

	#brx-header .brina-main-header .brina-header-search__field input[type="search"]::placeholder {
		color: #5b6577;
	}

	#brx-header .brina-main-header .brina-header-search__field button[type="submit"]:focus-visible {
		outline-color: var(--bh-mh-focus);
	}

	/* Actions: one light system — soft-white icons, slightly softer labels. */
	#brx-header .brina-main-header .brina-header-action {
		color: var(--bh-mh-label);
	}

	#brx-header .brina-main-header .brina-header-action__icon {
		color: var(--bh-mh-ink);
	}

	#brx-header .brina-main-header .brina-header-action__label {
		color: var(--bh-mh-label);
	}

	#brx-header .brina-main-header .brina-header-action:hover {
		background-color: rgba(255, 255, 255, 0.08);
	}

	#brx-header .brina-main-header .brina-header-action:hover .brina-header-action__icon,
	#brx-header .brina-main-header .brina-header-action:hover .brina-header-action__label {
		color: #ffffff;
	}

	#brx-header .brina-main-header .brina-header-action:focus-visible {
		outline-color: var(--bh-mh-focus);
		background-color: rgba(255, 255, 255, 0.08);
	}
}

/* ---------------------------------------------------------------------
   Tablet main header — structure (768–1200px)
   [ logo ] [ ——— search (flex-grow) ——— ] [ Account ] [ Cart ]
   Orders and Wishlist are hidden from the tablet header only (their pages,
   data and the desktop/phone headers are untouched). The freed width goes
   to the search, which already flexes (flex: 1 1 auto) between the logo and
   the actions; gaps are explicit, not space-between.
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1200px) {
	#brx-header .brina-main-header .brina-main-header__inner {
		gap: clamp(16px, 2.1vw, 24px);              /* logo ↔ search ↔ actions */
	}

	#brx-header .brina-main-header .brina-header-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	#brx-header .brina-main-header .brina-header-actions > .brina-header-action--orders,
	#brx-header .brina-main-header .brina-header-actions > .brina-header-action--wishlist {
		display: none;
	}

	/* Account + Cart: a matched pair (same box, icon, gap, label line). */
	#brx-header .brina-main-header .brina-header-actions {
		align-items: center;
		gap: 6px;
	}

	#brx-header .brina-main-header .brina-header-actions > .brina-header-action {
		box-sizing: border-box;
		min-width: 62px;
		padding: 4px 8px;                           /* was 5px: absorbs the +2px icon */
		gap: 4px;
	}

	#brx-header .brina-main-header .brina-header-actions > .brina-header-action .brina-header-action__icon {
		width: 24px;
		height: 23px;
		font-size: 23px;                            /* was 21px */
		line-height: 23px;
	}
}

/* ---------------------------------------------------------------------
   Phone header structure (<= 767px only; owner, 2026-10-04)
   ---------------------------------------------------------------------
   Phone only — tablet (768–1200) and desktop (>= 1201) are not matched.
   1. The top bar (free shipping · Sell on Brina) is hidden: display:none,
      so the section takes no space.
   2. Row 1 becomes  [menu]  [logo mark]  [account]: the existing menu
      toggle moves to the left column, the account control to the right
      column, and the logo spans the whole row, centred on the header width
      (the row's left/right paddings differ, so it is shifted back by half
      that difference — geometric centre of the screen). The wordmark
      ("Brina" / "Marketplace") is hidden; the mark keeps its 38px size.
      Row 2 (search · cart) keeps its widths: columns 44 · 1fr · 44 give the
      search the same 1fr + 44px span as before.
   3. The main header uses the exact tablet header colours (see the
      768–1200 block above: #152738 + linear-gradient(100deg, #071a2b,
      #233444). On phone the header's bottom edge sits under the chip row,
      so its existing light hairline is kept. The Deliver row keeps its own surface; the
      chip row gets its current visible white explicitly so it is unchanged.
      Icons use the tablet header ink (#f1f4fa) so they stay visible.
   Selectors use :is(body, body.woocommerce-shop) so the shop page's own
   phone header colours (earlier block) are replaced by the same treatment.
   Markup, links, menu JS and search/cart behaviour are unchanged. */
@media (max-width: 767px) {
	#brx-header .brina-topbar {
		display: none;
	}

	/* Row 1 — menu · logo · account; Row 2 — search · cart (unchanged widths). */
	#brx-header .brina-main-header__inner {
		grid-template-areas:
			"menu brand account"
			"search search cart"
			"utility utility utility"
			"chips chips chips";
		grid-template-columns: 44px minmax(0, 1fr) 44px;
	}

	#brx-header .brina-header-menu-toggle {
		grid-area: auto;
		grid-row: 1;
		grid-column: 1;
		justify-self: start;
		margin-right: 0;
		margin-left: -6px;
	}

	#brx-header .brina-header-action--phone {
		grid-area: auto;
		grid-row: 1;
		grid-column: 3;
		margin-right: -6px; /* Same slot the menu toggle used: aligned above the cart. */
	}

	#brx-header .brina-brand {
		grid-area: auto;
		grid-row: 1;
		grid-column: 1 / -1;
		justify-self: center;
		transform: translateX(calc((var(--bh-head-r) - var(--bh-head-l)) / 2));
	}

	#brx-header .brina-brand__text {
		display: none;
	}

	/* Exact tablet header colour. */
	:is(body, body.woocommerce-shop) #brx-header .brina-main-header {
		background-color: #152738;
		background-image: linear-gradient(100deg, #071a2b 0%, #233444 100%);
		box-shadow: inset 0 1px 0 rgba(244, 246, 250, 0.05);
	}

	/* Category rail wrapper: cool grey behind the (unchanged) white pills —
	   owner 2026-10-04 (#fff -> #F1F3F6 -> #D9DEE7 -> #EEEAFE lavender);
	   2026-10-05 -> #EEF1FF cool blue-lavender (navy header -> canvas). */
	:is(body, body.woocommerce-shop) #brx-header .brina-phone-chips {
		background-color: #EEF1FF;
	}

	:is(body, body.woocommerce-shop) #brx-header .brina-header-action__icon,
	:is(body, body.woocommerce-shop) #brx-header .brina-header-action:hover .brina-header-action__icon,
	:is(body, body.woocommerce-shop) #brx-header .brina-header-menu-toggle {
		color: #f1f4fa;
	}

	:is(body, body.woocommerce-shop) #brx-header .brina-header-action:hover,
	:is(body, body.woocommerce-shop) #brx-header .brina-header-menu-toggle:hover,
	:is(body, body.woocommerce-shop) #brx-header .brina-header-menu-toggle[aria-expanded="true"] {
		background-color: rgba(255, 255, 255, 0.14);
	}

	:is(body, body.woocommerce-shop) #brx-header .brina-brand:focus-visible,
	:is(body, body.woocommerce-shop) #brx-header .brina-header-action:focus-visible,
	:is(body, body.woocommerce-shop) #brx-header .brina-header-menu-toggle:focus-visible {
		outline-color: #f1f4fa;
	}
}

/* ---------------------------------------------------------------------
   Phone header refinement (<= 767px only; owner, 2026-10-04)
   ---------------------------------------------------------------------
   Builds on "Phone header structure" above. Phone only.
   - Row 1: [menu]  [logo]  [account][cart]. The existing cart control
     (.brina-header-actions, cart action + live badge) moves into row 1,
     right of the account control. The logo still spans the whole row and
     is centred on the header width (see the translateX above), so the
     uneven left/right groups cannot move it.
   - Controls: tap targets 44 → 48px; glyphs hamburger 28 → 31px,
     account 22 → 24px, cart 24 → 26px (about +8–11%). Logo unchanged.
   - Row 2: search alone, full width, equal left/right margins (the row's
     right padding is narrower than the left, so the right margin adds
     the difference); pill shape (999px) on the field and its button.
   - The Deliver to / Track Order row is not shown (display: none — no
     height, margin, border or gap remains). Tablet and desktop keep it.
   - Rhythm: 10px above and 12px below the search (navy), then the chips
     row (unchanged) moves up.
   Header colour, chips, hero and all markup / behaviour are unchanged. */
@media (max-width: 767px) {
	#brx-header .brina-main-header__inner {
		grid-template-areas:
			"menu brand account cart"
			"search search search search"
			"chips chips chips chips";
		grid-template-columns: 48px minmax(0, 1fr) 48px 48px;
	}

	#brx-header .brina-phone-utility {
		display: none;
	}

	/* Controls: 48px targets, slightly larger glyphs. */
	#brx-header .brina-header-action,
	#brx-header .brina-header-menu-toggle {
		width: 48px;
		min-width: 48px;
		height: 48px;
		min-height: 48px;
	}

	#brx-header .brina-header-menu-toggle {
		font-size: 31px;
	}

	#brx-header .brina-header-action__icon {
		font-size: 24px;
	}

	#brx-header .brina-header-action--cart .brina-header-action__icon {
		font-size: 26px;
	}

	/* Account: right group, now followed by the cart. */
	#brx-header .brina-header-action--phone {
		grid-column: 3;
		margin-right: 0;
	}

	/* Cart: moved from the search row into row 1 (same element). */
	#brx-header .brina-header-actions {
		grid-area: auto;
		grid-row: 1;
		grid-column: 4;
		margin-top: 0;
	}

	/* Search: alone on row 2, centred with equal side margins. */
	#brx-header .brina-header-search {
		grid-area: auto;
		grid-row: 2;
		grid-column: 1 / -1;
		margin-top: 10px;
		margin-right: calc(var(--bh-head-l) - var(--bh-head-r));
		margin-bottom: 12px;
	}

	/* padding-right 4 -> 3px: the circle below then sits 4px from the
	   field's top, bottom and right edge (field width/height unchanged). */
	#brx-header .brina-header-search__field form {
		padding-left: 10px;
		padding-right: 3px;
		border-radius: 999px;
	}

	/* Search button: true circle (33 x 33 = the field's inner height,
	   41 - 2 border - 6 padding), icon centred (owner 2026-10-04). */
	#brx-header .brina-header-search__field button[type="submit"] {
		display: flex;
		flex: 0 0 33px;
		align-items: center;
		justify-content: center;
		align-self: center;
		width: 33px;
		min-width: 33px;
		height: 33px;
		aspect-ratio: 1 / 1;
		padding: 0;
		border-radius: 50%;
	}

	#brx-header .brina-header-search__field button[type="submit"] > i {
		display: block;
		margin: 0;
		line-height: 1;
		transform: none;
	}

	#brx-header .brina-phone-chips {
		grid-row: 3;
	}
}

/* ---------------------------------------------------------------------
   Brand mark: owner-approved "B" logo (attachment 4077, trimmed to
   assets/img/brina-b-mark.*) replaces the bag tile at every breakpoint.
   The mark box keeps its existing size per breakpoint; the B is
   contained inside it at its own aspect ratio.  2026-10-05.
   --------------------------------------------------------------------- */

#brx-header .brina-brand__mark {
	border-radius: 0;
	background: url("../img/brina-b-mark.webp") center / contain no-repeat;
	box-shadow: none;
}

#brx-header .brina-brand__mark-icon {
	display: none;
}

/* Desktop + tablet: B-to-text spacing 11px -> 6px (the B leaves ~4px of
   its square slot empty on each side). The 5px moves to the end of the
   text block so the brand box width, and everything after it, is unchanged.
   Phone / small phone (text hidden) untouched. 2026-10-05. */
@media (min-width: 768px) {
	#brx-header .brina-brand {
		gap: 6px;
	}

	#brx-header .brina-brand__text {
		padding-right: 5px;
	}
}

/* Phone (<= 767px; Bricks mobile landscape + portrait), owner 2026-10-05:
   row 1 = [B]  ·  empty  ·  [account][cart]. The hamburger trigger is not
   shown on phone (display: none — no box, no click, no tab stop; the nav
   panel and its JS stay in place). The B leaves the centred row-spanning
   slot (and its centring translateX) for the former menu column, aligned
   with the search field's left edge. Column tracks unchanged, so account,
   cart and search keep their positions. Tablet / desktop untouched. */
@media (max-width: 767px) {
	#brx-header .brina-header-menu-toggle {
		display: none;
	}

	#brx-header .brina-brand {
		grid-column: 1;
		justify-self: start;
		transform: none;
	}
}

/* Phone Account label (owner 2026-10-05): first name / "Log in" to the left
   of the Account icon, inside the same link (inc/brina-phone-account-label.php).
   Hidden outside phone. On phone the account column becomes auto-width: the
   label grows into the empty middle column (never under the B), the icon
   keeps its 48px box at the same position. One line, ellipsis when long. */
#brx-header .brina-header-action__phone-label {
	display: none;
}

@media (max-width: 767px) {
	#brx-header .brina-main-header__inner {
		grid-template-columns: 48px minmax(0, 1fr) auto 48px;
	}

	#brx-header .brina-header-action--phone {
		flex-direction: row;
		justify-self: end;
		width: auto;
		max-width: 100%;
		gap: 0;
		padding-left: 8px;
	}

	#brx-header .brina-header-action--phone .brina-header-action__icon {
		width: 48px;
		min-width: 48px;
	}

	#brx-header .brina-header-action__phone-label {
		display: block;
		max-width: 7.5em;
		overflow: hidden;
		color: rgba(232, 237, 247, 0.92);
		font-size: 13.5px;
		font-weight: 600;
		line-height: 1.15;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* Phone (<= 478px) action group, owner 2026-10-05: [name] [account] [cart].
   Account and cart are two independent 44 x 44 controls (own hover/focus),
   4px apart, no divider, no shared background. Glyphs enlarged so both read
   ~24px (themify ink is ~75% of font-size: account 16 -> 24, cart 20 -> 24).
   Row 1 stays 48px tall, so the search row does not move. A saved profile
   photo (inc/brina-phone-account-label.php) replaces the account glyph as a
   36px circle in the same 44px box; without one — or if it fails to load —
   the glyph shows. The name keeps its 7.5em ellipsis and is the part that
   gives way; the brand column absorbs the rest. */
#brx-header .brina-header-action__avatar {
	display: none;
}

@media (max-width: 478px) {
	#brx-header .brina-main-header__inner {
		grid-template-rows: 48px auto auto;
		grid-template-columns: 48px minmax(0, 1fr) auto 44px;
	}

	#brx-header .brina-header-action--phone,
	#brx-header .brina-header-actions .brina-header-action--cart {
		height: 44px;
		min-height: 44px;
	}

	#brx-header .brina-header-action--phone {
		margin-right: 3px;
	}

	#brx-header .brina-header-action--phone .brina-header-action__icon,
	#brx-header .brina-header-action--phone .brina-header-action__avatar {
		flex: 0 0 auto;
	}

	#brx-header .brina-header-action--phone .brina-header-action__icon {
		width: 44px;
		min-width: 44px;
		font-size: 33px;
	}

	#brx-header .brina-header-actions,
	#brx-header .brina-header-actions .brina-header-action--cart {
		width: 44px;
		min-width: 44px;
	}

	#brx-header .brina-header-actions .brina-header-action--cart .brina-header-action__icon {
		width: auto;
		font-size: 31px;
	}

	#brx-header .brina-header-action__phone-label {
		min-width: 0;
		flex: 0 1 auto;
	}

	#brx-header .brina-header-action--phone:has(.brina-header-action__avatar) .brina-header-action__icon {
		display: none;
	}

	/* The photo's ring sits closer to the name than the glyph's ink did. */
	#brx-header .brina-header-action--phone:has(.brina-header-action__avatar) .brina-header-action__phone-label {
		margin-right: 4px;
	}

	#brx-header .brina-header-action--phone .brina-header-action__avatar {
		display: block;
		width: 36px;
		height: 36px;
		margin: 0 4px;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
		box-shadow: 0 0 0 1.5px rgba(241, 244, 250, 0.35);
	}
}

/* Phone (<= 767px) sticky main header (owner 2026-10-05). The main header
   section (logo · account · cart row + search row) stays at the top of the
   viewport while scrolling either way; the category chip rail is NOT sticky.
   - inc/brina-header-chips-position.php renders the rail right after the
     section (still inside #brx-header) instead of as the grid's last row.
   - #brx-header becomes display: contents, so the section's sticky range is
     the whole page (body, a flex column) instead of the 171px header box;
     the header element itself has no box styles on phone (transparent, no
     border/shadow/margin), so nothing visual is lost.
   - z-index 100: above all page content (highest content z-index is 9),
     below every overlay (sticky bars 899/900, shop filter drawer 999/1000,
     account flyout 1100).
   - The section's 1px bottom border moves to the rail, so the stack looks
     exactly as before at the top of the page (rail ends at the same 171px).
   No JavaScript, no new shadow/animation; tablet and desktop unchanged. */
@media (max-width: 767px) {
	#brx-header {
		display: contents;
	}

	#brx-header .brina-main-header {
		position: sticky;
		top: 0;
		z-index: 100;
		border-bottom-width: 0;
	}

	/* Now a block after the section: no grid placement, no bleed margins. */
	#brx-header .brina-phone-chips {
		margin: 0;
		border-bottom: 1px solid var(--bh-line-soft);
	}
}