/**
 * Mobile header and form fields (24 Sep 2026). Layout "C", chosen by Mark from
 * three options rendered on the live product page.
 *
 * Phones (≤767 px), one dark bar:
 *   row 1  [menu] [logo] ........ [search*] [call] [cart]
 *   row 2  [ search part # or model #              | 🔍 ]
 * The two Bricks rows of header template 54935 (top bar #brxe-cokmxc and logo row
 * #brxe-b51bb2) are flattened with display:contents and their elements placed on
 * one grid, so the header's menu script and markup are untouched. While the
 * shopper scrolls down, assets/gx-mobile.js adds .gx-compact: row 2 hides and a
 * search button (*) appears in row 1 (56 px instead of 112 px); scrolling up or
 * returning to the top shows row 2 again.
 *
 * Tablets (768–1199 px) keep their layout. The header switches to the hamburger
 * below 1200 px (the menu script's own breakpoint), where the cart was reachable
 * only from inside the menu, so the new header cart (#brxe-gxcart) shows there
 * too.
 *
 * Form fields on phones are 16 px: iOS zooms the page when a field under 16 px
 * gets focus (header search 14 px, checkout 14 px, coupon 13 px, Uni CPO
 * selects 13–15 px).
 */

/* ---------- Header cart and search button: hidden unless enabled below ---------- */

#brxe-gxcart,
.gx-search-toggle {
	display: none;
}

@media (max-width: 1199px) {
	#brxe-1d43d4 > #brxe-gxcart {
		display: flex;
		order: 2;
		margin-left: auto;
	}

	#brxe-1d43d4 > #brxe-3324e1 {
		order: 3;
	}

	#brxe-gxcart .mini-cart-link {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: #1f1f1f;
		font-size: 22px;
	}

	#brxe-gxcart .cart-icon {
		position: static;
		display: inline-flex;
	}

	/* Anchored to the 44 px tap area so it stays on screen at the right edge. */
	#brxe-gxcart .cart-count {
		position: absolute;
		top: 3px;
		right: 1px;
		transform: none;
		width: auto;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 9px;
		background: #E8431A;
		color: #fff;
		font: 700 11px/18px Sora, sans-serif;
		text-align: center;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {

	body {
		padding-top: 112px !important;
	}

	#brx-header {
		display: grid !important;
		grid-template-columns: auto 1fr auto auto auto;
		grid-template-areas:
			"menu logo find call cart"
			"search search search search search";
		align-items: center;
		padding: 0 6px;
		background: #212121;
	}

	#brx-header > #brxe-cokmxc,
	#brx-header #brxe-2dd149,
	#brx-header #brxe-9e43a1,
	#brx-header #brxe-4d90b8,
	#brx-header #brxe-b9e566,
	#brx-header > #brxe-b51bb2,
	#brx-header #brxe-1d43d4 {
		display: contents !important;
	}

	/* Phone icon div, email and "Made in the USA" stay on tablet/desktop only. */
	#brx-header #brxe-4faf53,
	#brx-header #brxe-855f61,
	#brx-header #brxe-1ce168 {
		display: none !important;
	}

	/* Menu button (white on dark). */
	#brx-header #brxe-3324e1 {
		grid-area: menu;
		display: flex;
		align-items: center;
		height: 56px;
	}

	#brx-header #brxe-595e8b {
		margin: 0 !important;
	}

	#brx-header #brxe-595e8b .brxa-inner,
	#brx-header #brxe-595e8b .brxa-inner::before,
	#brx-header #brxe-595e8b .brxa-inner::after {
		background-color: #fff !important;
	}

	/* Logo: the light logo drawn white (same look as the dark-mode logo file). */
	#brx-header #brxe-aeb999 {
		grid-area: logo;
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 6px;
	}

	#brx-header #brxe-0b7258 {
		width: 132px !important;
		height: auto;
		filter: invert(1) hue-rotate(180deg) saturate(1.1);
	}

	/* Call: the link keeps its text for screen readers; shown as a phone icon. */
	#brx-header #brxe-edca27 {
		grid-area: call;
		width: 44px;
		height: 44px;
		min-height: 44px !important;
		padding: 0 !important;
		overflow: hidden;
		color: transparent;
		font-size: 0 !important;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / 22px no-repeat;
	}

	/* Cart. */
	#brx-header #brxe-gxcart {
		grid-area: cart;
		display: flex;
		margin: 0;
	}

	#brx-header #brxe-gxcart .mini-cart-link {
		color: #fff;
	}

	/* Search button, shown only while compact. */
	#brx-header .gx-search-toggle {
		grid-area: find;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
	}

	#brx-header.gx-compact .gx-search-toggle {
		display: flex;
	}

	/* Row 2: full-width search. */
	#brx-header #brxe-a9ea68 {
		grid-area: search;
		width: auto !important;
		padding: 0 6px 10px;
	}

	#brx-header.gx-compact #brxe-a9ea68 {
		display: none;
	}

	#brx-header .header-search-form .aws-search-form,
	#brx-header .header-search-form .bricks-search-form {
		height: 46px !important;
	}

	#brx-header .header-search-form .aws-wrapper {
		padding: 0 !important;
		border: 0 !important;
	}

	#brx-header .header-search-form .aws-search-field,
	#brx-header .header-search-form .bricks-search-form input {
		width: 100%;
		height: 46px !important;
		padding: 0 12px !important;
		border: 0;
		background: #fff !important;
		font-size: 16px !important;
	}

	#brx-header .header-search-form .aws-search-btn.aws-form-btn {
		flex: 0 0 52px !important;
		width: 52px !important;
		min-width: 52px !important;
	}

	#brx-header .header-search-form .aws-search-btn_icon::after {
		display: none !important;
	}

	#brx-header .header-search-form .aws-search-btn_icon {
		flex: 0 0 24px !important;
		width: 24px !important;
		height: 24px !important;
	}

	#brx-header .header-search-form .aws-search-btn_icon svg {
		display: block !important;
		flex: 0 0 24px;
		width: 24px !important;
		height: 24px !important;
		fill: #fff;
	}

	#brx-header .header-search-form .aws-search-clear {
		right: 4px !important;
	}

	/* Zoho form embeds (code elements holding a #zf_div_…): in the centred page
	   columns they shrank to ~250 px on phones; use the full column width. */
	.brxe-code:has(> [id^="zf_div_"]) {
		align-self: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Small tap targets found by the phone audit (login, checkout, gallery). */
	.woocommerce form .password-input input {
		min-height: 44px;
	}

	.woocommerce form .password-input .show-password-input {
		top: 0 !important;
		right: 0 !important;
		width: 44px;
		height: 100%;
	}

	.woocommerce-form__label-for-checkbox {
		padding-block: 6px;
	}

	.woocommerce form input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}

	.woocommerce-form-login-toggle .showlogin,
	.woocommerce-form-coupon-toggle .showcoupon,
	.woocommerce-LostPassword a,
	.lost_password a {
		display: inline-block;
		padding-block: 10px;
	}

	.brx-thumbnail-slider-wrapper .woocommerce-product-gallery__image > a,
	.flex-control-thumbs li > a {
		display: block;
	}

	/* Chat bubble and review badge covered the bottom of the open menu. */
	body:has(#brxe-2d67a9.brx-open) :is([id^="zsiq"], .zsiq_floatmain, #merchantwidgetiframe) {
		display: none !important;
	}

	/* ---------- Form fields: 16 px so iOS doesn't zoom on focus ----------
	   Page-level CSS sets 13–15 px with ID selectors and !important (checkout
	   "v2 Fixes" code element, the login snippet), so :is(#gx-a#gx-b, …) lifts
	   this rule to two-ID specificity; the IDs themselves never match anything. */

	:is(#gx-a#gx-b, input):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
	:is(#gx-a#gx-b, select),
	:is(#gx-a#gx-b, textarea) {
		font-size: 16px !important;
	}
}