/**
 * Phase 5 (24 Sep 2026): tap targets and minimum text size.
 *
 * Audit A11Y-03: nearly two thirds of tap targets were under 44 px. Same rules as
 * BFG's RESP-01:
 *   - controls (buttons, fields, selects, tabs, icon links): at least 44 px, every width;
 *   - text links on phones (≤767 px): at least 24 px tall (WCAG 2.2 AA 2.5.8),
 *     reached with vertical padding so the layout doesn't move;
 *   - text on phones: at least 12 px, set only on the elements measured below it.
 * Links inside running sentences are exempt and untouched.
 *
 * Bricks prints element styles with #brxe-… ID selectors, so size properties that
 * compete with them carry !important. Everything here only enlarges.
 */

/* ---------- Controls, every width ---------- */

/* Header menu toggle (24×30 icon): 44×44 target, icon stays where it was. */
.dwc-nest-header__container .brxe-toggle.dwc-nest-toggle--open {
	min-width: 44px !important;
	min-height: 44px !important;
	margin: -10px -7px !important;
	justify-content: center;
	align-items: center;
}

/* Quantity: the field and its − / + spans. */
.brxe-product-add-to-cart form.cart .quantity {
	min-height: 44px;
	align-items: stretch;
}

.brxe-product-add-to-cart form.cart .quantity .qty {
	min-height: 44px !important;
}

.brxe-product-add-to-cart form.cart .quantity .action {
	min-width: 44px !important;
	min-height: 44px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* Add to cart (40 px). */
.brxe-product-add-to-cart form.cart .single_add_to_cart_button {
	min-height: 44px !important;
}

/* Tab titles (Description / Specifications / strip widths: 38–40 px). */
.brxe-tabs-nested > .tab-menu > .tab-title {
	min-height: 44px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Configurator selects (Uni CPO forces 36 px per node). */
html body .uni-module select.js-uni-cpo-field {
	height: 44px !important;
	min-height: 44px !important;
}

/* Carousel arrows (32 px circles): invisible 44 px hit area, same look. */
.brxe-slider-nested .splide__arrow::after {
	content: "";
	position: absolute;
	inset: -6px;
}

/* Email icon beside "Send Message" (20×20): 44 px target, icon stays put. */
.brxe-icon-box .icon > a[href^="mailto:"],
.brxe-icon-box .icon > a[href*="email-protection"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: -12px;
}

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

@media (max-width: 767px) {

	/* Header search field (30 px). */
	.aws-container .aws-search-form,
	.aws-container .aws-search-field {
		min-height: 44px !important;
	}

	/* Minimum text size 12 px (these measured 9–11 px). The homepage trust strip
	   sets 10px with "#brxe-gwpzkq .g-trust-lbl … !important" and the strip-kit
	   guarantee labels (#brxe-knqkrx…) drop to 10px on phones, hence the IDs. */
	.header-link-text,
	#brxe-251d74,
	#brxe-5a2696 a,
	.badge-text,
	body #brxe-gwpzkq .g-trust-lbl,
	#brx-content .brxe-social-icons .no-link span,
	#brxe-knqkrx,
	#brxe-igdkfe,
	#brxe-fftfax,
	.cbd-pill,
	.cbd-tag {
		font-size: 12px !important;
	}

	/* Icon-box text in the product info grid is 11 px on its .content wrapper;
	   1em here is that wrapper's size, so larger icon boxes elsewhere keep theirs. */
	.brxe-icon-box .content p {
		font-size: max(12px, 1em);
	}

	/* Text links: 24 px tall. These are flex items, so a minimum height does it. */
	.header-link-text,
	#brx-footer .bricks-nav-menu a,
	.brxe-woocommerce-breadcrumbs a {
		min-height: 24px !important;
		align-items: center;
	}

	/* Inline links: vertical padding enlarges the tap area without moving text. */
	.brxe-icon-box .content a,
	.brxe-text-basic > .textlink > a,
	li.brxe-block > a.brxe-text-basic,
	a[href^="tel:"],
	a[href^="mailto:"] {
		padding-block: 5px !important;
	}

	/* Product-card image links are inline around a block image; make the link
	   the image's box (no visual change). */
	ul.products li a:has(> img) {
		display: block;
	}
}