/*
 * Maglula Final UX Fix Round 1 (2026-10-07) - STAGING
 * Loaded site-wide by maglula-final-ux.php (after maglula-site-fixes.css).
 * Rollback: delete maglula-final-ux.php / .css / .js.
 *
 * Sections:
 *   1. O-2  Keyboard focus indicator
 *   2. O-3  Review CAPTCHA legibility + answer input
 *   3. O-23 Rating-star hit areas
 *   4. O-4/O-5 Review status message
 *   5. O-7  Where To Buy zero-result guidance
 *   6. O-8  Contact links + header hit areas
 *   7. O-9  "Can't find your fit?" expectation copy
 *   8. O-10 "Where to buy" anchor (all widths since RD-3)
 *
 * Real-Device UX Fix Round (2026-10-10):
 *   9. RD-1 Find Your Fit: no iOS focus auto-zoom (controls >= 16px)
 *  10. RD-2 Home Latest Products carousel arrows (< 1024 px)
 *  11. RD-4 Rotate overlay: never for the keyboard / a real portrait device
 *  12. RD-5 Catalog card image box (<= 1024 px)
 *  13. RD-6 All public text-entry fields >= 16px on phones (no iOS zoom)
 *  14. RD-6b Footer / Squeal / For Dealers: placeholder keeps its old size
 *  15. RD-7 Where To Buy hero image fills its banner (<= 1024)
 */

/* ------------------------------------------------------------------ */
/* 1. O-2 Keyboard focus indicator                                     */
/* main-style.css sets ":focus { outline: none }" site-wide. Restore a */
/* visible ring for keyboard users only. #D9480F has >= 3:1 contrast   */
/* against both white (4.3:1) and black (4.9:1) backgrounds.          */
/* Buttons/links use :focus-visible (keyboard modality by the browser).*/
/* Text fields match :focus-visible on tap too, so they only get the   */
/* ring while the JS has seen a Tab key (html.mx-kbd).                 */
/* ------------------------------------------------------------------ */
html body :focus-visible:not(input):not(textarea):not(select),
html.mx-kbd body input:focus-visible,
html.mx-kbd body textarea:focus-visible,
html.mx-kbd body select:focus-visible {
	outline: 3px solid #D9480F !important;
	outline-offset: 2px !important;
}

/* ------------------------------------------------------------------ */
/* 2. O-3 Review CAPTCHA (WP Captcha built-in math image, 45x15 px)    */
/* CSS only; plugin markup and order unchanged:                         */
/* text "Are you human? Please solve:" -> image -> answer input.       */
/* ------------------------------------------------------------------ */
#commentform .comment-form-cookies-consent {
	float: none !important;
	clear: both;
	width: 100% !important;
}
#commentform img.wpcaptcha-captcha-img {
	display: inline-block !important;
	float: none !important;
	width: 126px !important;      /* 2.8x the 45x15 source */
	height: auto !important;
	max-width: none !important;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	box-sizing: content-box;
	padding: 1px 6px;
	margin: 8px 10px 12px 8px !important;
	background: #fff;
	border: 1px solid #c8c8c8;
	border-radius: 6px;
	vertical-align: middle !important;
}
#commentform input#wpcaptcha_captcha {
	display: inline-block !important;
	float: none !important;
	box-sizing: border-box;
	width: 120px !important;
	min-height: 44px !important;
	height: 46px !important;
	margin: 8px 0 12px 0 !important;
	padding: 0 12px !important;
	font-size: 16px !important;
	line-height: 44px !important;
	text-align: center;
	vertical-align: middle !important;
	color: #141414;
	background: #fff !important;
	border: 1px solid #8a8a8a !important;
	border-radius: 6px !important;
}
#commentform input#wpcaptcha_captcha + input + p,
#commentform .comment-form-comment {
	clear: both;
}

/* ------------------------------------------------------------------ */
/* 3. O-23 Rating stars: 44x44 hit area, star glyph size unchanged     */
/* (WooCommerce draws each star as a 1em ::before glyph).              */
/* ------------------------------------------------------------------ */
#commentform p.stars {
	height: auto !important;   /* was a fixed 23 px line that clipped 44 px targets */
	min-height: 44px;
	overflow: visible;
}
body.woocommerce #review_form #respond p.stars span a,
body #commentform p.stars span a {
	width: 44px !important;
	height: 44px !important;
	vertical-align: middle;
}
body.woocommerce #review_form #respond p.stars span a::before,
body #commentform p.stars span a::before {
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------------ */
/* 4. O-4 / O-5 Review status message (inserted by JS above the form)  */
/* ------------------------------------------------------------------ */
.mx-review-status {
	clear: both;
	margin: 12px 0 18px;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.45;
	font-weight: 600;
	text-align: left;
	scroll-margin-top: 170px;
}
.mx-review-status:focus {
	outline: none;
}
.mx-review-status--success {
	color: #0f5132;
	background: #e7f5ec;
	border: 1px solid #8cc9a4;
}
.mx-review-status--error {
	color: #8a1c13;
	background: #fdecea;
	border: 1px solid #ef9a92;
}
.mx-review-status small {
	display: block;
	margin-top: 4px;
	font-weight: 500;
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* 5. O-7 Where To Buy zero-result guidance                            */
/* ------------------------------------------------------------------ */
#dealers-search-results .mx-wtb-empty {
	max-width: 640px;
	margin: 8px auto 24px;
	padding: 0 16px;
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
	color: #141414;
}

/* Shared "contact us" text link (WTB, FYF modal) */
.mx-contact-link {
	color: inherit !important;
	font-weight: 700;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* 6. O-8 Tappable phone / email links + header hit areas              */
/* ------------------------------------------------------------------ */
a.mx-tel,
a.mx-mail {
	display: inline !important;   /* footer theme styles give links inline-block + 37px margin */
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font: inherit;
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	word-break: break-word;
}
/* Invisible 44x44 hit area centred on the existing icon; layout and  */
/* appearance unchanged.                                               */
a.trigger-go-to-contact-form.mx-hit,
.hamburger a.trigger-open-mobile-nav.mx-hit {
	position: relative;
}
a.trigger-go-to-contact-form.mx-hit::after,
.hamburger a.trigger-open-mobile-nav.mx-hit::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	background: transparent;
}

/* ------------------------------------------------------------------ */
/* 7. O-9 "Can't find your fit?" expectation copy (inside the modal)   */
/* ------------------------------------------------------------------ */
.mx-fyf-note {
	max-width: 560px;
	margin: 10px auto 18px;
	padding: 0 12px;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	color: #e6e6e6 !important;   /* the modal background is dark (#222) */
}
.mx-fyf-note a.mx-contact-link {
	color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/* 8. O-10 "Where to buy" anchor (not sticky). RD-3 (2026-10-10): the  */
/*    link is now shown at every width (was desktop-only). The JS     */
/*    inserts it once, after the P/N row, only when the product has a */
/*    populated dealer section. >= 1024 px styling is unchanged.       */
/* ------------------------------------------------------------------ */
.mx-wtb-anchor-row {
	display: block;
	margin: 2px 0 10px;
}
.mx-wtb-anchor-row a.mx-wtb-anchor {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* touch target */
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #141414;
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Phone header is 74 px and tablet header 83 px (fixed). */
#mx-product-dealers {
	scroll-margin-top: 100px;
}
@media (min-width: 1024px) {
	.mx-wtb-anchor-row {
		margin: 6px 0 14px;
	}
	.mx-wtb-anchor-row a.mx-wtb-anchor {
		display: inline-block;
		min-height: 0;
		padding: 6px 0;
		line-height: inherit;
	}
	.mx-wtb-anchor-row a.mx-wtb-anchor:hover {
		color: #D9480F;
	}
	#mx-product-dealers {
		scroll-margin-top: 170px;
	}
}

/* ------------------------------------------------------------------ */
/* 9. RD-1 Find Your Fit: no iOS focus auto-zoom.                      */
/*    iOS zooms the page when a focused text control is < 16px (these  */
/*    computed 12.48px / 13.33px on phones; #search-* are the "Can't  */
/*    find your fit?" fields). Phones/tablets and touch-               */
/*    only devices only; desktop typography is unchanged. The viewport */
/*    meta is NOT touched, so pinch-zoom stays available.              */
/* ------------------------------------------------------------------ */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
	#item_search_caliber,
	#item_search_manufacturer,
	#item_search_model,
	#search-caliber,
	#search-manufactures,
	#search-model {
		font-size: 16px !important;
	}
}
/* At 16px the side-by-side Manufacturer / Model fields need more of
   their column: names such as "American Tactical" (151px) were clipped
   by the theme's 12.8px column + 12.8px input side padding. */
@media (max-width: 1023.98px) {
	.second-search-block .search-field-row .search-field-column {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
	.second-search-block #item_search_manufacturer,
	.second-search-block #item_search_model {
		padding-left: 2px !important;
		padding-right: 2px !important;
	}
}

/* ------------------------------------------------------------------ */
/* 10. RD-2 Home "Latest Products" carousel arrows (< 1024 px).        */
/*    The theme already outputs .prev/.next wired to this Swiper as   */
/*    its navigation, but hides .swiper-arrows below 1024 px. Reveal  */
/*    those same elements (no new markup, no new listeners) in the    */
/*    testimonial-arrow style: 32 px white circle, 44 px hit area,    */
/*    centred in the side gutter and on the product image.           */
/*    top: 57.6cqw = image centre (image is 83.3% of the card width,  */
/*    ratio 365:505) capped at 252px (image max 505px tall); 47% is   */
/*    the theme fallback where container units are unsupported.      */
/* ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
	.products-slider .swiper-wrap {
		container-type: inline-size;
	}
	.products-slider .swiper-arrows {
		display: block !important;
	}
	.products-slider .swiper-arrows .prev,
	.products-slider .swiper-arrows .next {
		position: absolute;
		top: 47%;
		top: min(57.6cqw, 252px);
		z-index: 2;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		transform: translateY(-50%);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.products-slider .swiper-arrows .prev {
		left: max(-60px, calc((100% - 100vw) / 4 - 22px));
		right: auto;
	}
	.products-slider .swiper-arrows .next {
		right: max(-60px, calc((100% - 100vw) / 4 - 22px));
		left: auto;
	}
	.products-slider .swiper-arrows .prev img,
	.products-slider .swiper-arrows .next img {
		display: none !important;
	}
	.products-slider .swiper-arrows .prev::before,
	.products-slider .swiper-arrows .next::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 6px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.88) center / 15px 15px no-repeat;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
	}
	.products-slider .swiper-arrows .prev::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
	}
	.products-slider .swiper-arrows .next::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
	}
	/* Swiper adds this when there is nothing to scroll (1 product). */
	.products-slider .swiper-arrows .swiper-button-lock {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* 11. RD-4 Rotate overlay. The theme shows .mobile-orientation-image  */
/*    via @media (orientation: landscape), i.e. viewport width >       */
/*    height. The iOS keyboard shrinks the viewport, so a portrait     */
/*    phone matched "landscape". final-ux.js sets html.mx-real-portrait*/
/*    from the device orientation API and html.mx-input-focus while a  */
/*    text control is focused; either one hides the overlay. A real    */
/*    landscape rotation (no text focus) still shows it.               */
/* ------------------------------------------------------------------ */
html.mx-real-portrait .mobile-orientation-image,
html.mx-input-focus .mobile-orientation-image {
	display: none !important;
}
/* CSS-only backup if the script has not run (own rule: browsers without */
/* :has() drop only this rule). */
html:has(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]):focus, textarea:focus, select:focus) .mobile-orientation-image {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* 12. RD-5 Catalog card image box (<= 1024 px). Desktop uses a fixed  */
/*    object-fit box, but at <= 1024 px style2.css and an inline       */
/*    "body img { height: auto !important }" let every thumbnail use   */
/*    its own ratio (KUNA 246x340, Mini-14 199x340, G36 275x83), so    */
/*    titles in a row started at different heights. Give every card    */
/*    the dominant 275:301 box; the image is contained, never cropped.*/
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.woocommerce ul.products li.product .thumbnail-container img {
		aspect-ratio: 275 / 301 !important;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* ------------------------------------------------------------------ */
/* 13. RD-6 No iOS focus auto-zoom on ANY public text-entry field.    */
/*    Follow-up to RD-1 (2026-10-10). iOS zooms the page when a        */
/*    focused text control is < 16px; footer, newsletter, review,     */
/*    Where To Buy, Squeal, For Dealers, Testimonials and search      */
/*    fields computed 11.4-15.4px on phones. Phones / small tablets   */
/*    only (< 1024 px; iPhones are < 1024 CSS px in both orientations)*/
/*    so desktop typography is unchanged. Viewport meta untouched:    */
/*    pinch-zoom stays available. Excluded: checkbox, radio, buttons, */
/*    file, range, color, hidden (not in the list), off-screen        */
/*    honeypots (tabindex="-1") and the reCAPTCHA response textarea.  */
/* ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
	input:not([type]):not([tabindex="-1"]),
	input[type="text"]:not([tabindex="-1"]),
	input[type="email"]:not([tabindex="-1"]),
	input[type="search"]:not([tabindex="-1"]),
	input[type="tel"]:not([tabindex="-1"]),
	input[type="url"]:not([tabindex="-1"]),
	input[type="number"]:not([tabindex="-1"]),
	input[type="password"]:not([tabindex="-1"]),
	textarea:not([tabindex="-1"]):not(.g-recaptcha-response),
	select:not([tabindex="-1"]),
	[contenteditable="true"],
	[contenteditable=""] {
		font-size: 16px !important;
	}
}

/* ------------------------------------------------------------------ */
/* 14. RD-6b (owner decision, option B). The fields themselves stay   */
/*    16px (section 13: what iOS checks, so no focus zoom; typed text */
/*    is 16px). Only the PLACEHOLDER of these three forms returns to  */
/*    the theme size it had before RD-6, so the empty forms look as   */
/*    designed: theme .f-m-22 = 2.93vw (< 600px) and 12.89px          */
/*    (600-1023px, maglula-tablet-ux.css).                            */
/*    .footer-form   = footer Contact (every page)                    */
/*    #dealers-form  = Squeal (Where To Buy) + For Dealers signup     */
/* ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
	.footer-form input::placeholder,
	.footer-form textarea::placeholder,
	#dealers-form input::placeholder,
	#dealers-form textarea::placeholder {
		font-size: 2.93vw !important;
	}
}
@media (min-width: 600px) and (max-width: 1023.98px) {
	.footer-form input::placeholder,
	.footer-form textarea::placeholder,
	#dealers-form input::placeholder,
	#dealers-form textarea::placeholder {
		font-size: 12.89px !important;
	}
}

/* ------------------------------------------------------------------ */
/* 15. RD-7 Hero banner image must cover the whole banner (<= 1024px). */
/*    additional.css lays .distributors-banner out in normal flow     */
/*    (padding + static .text) and paints the dark photo with an      */
/*    absolutely positioned .img { inset: 0 } whose picture/img are   */
/*    height: 100% + object-fit: cover. At <= 1024px style2.css and   */
/*    the inline "body img { height: auto !important }" override that */
/*    height, so the photo stops at its natural ratio (390x400 at     */
/*    390px) while the banner content is taller (481px): the white    */
/*    "Squeal on your local dealer" button (white border/text) fell    */
/*    onto the white page below the photo and looked cut off. Restore  */
/*    the intended 100% height; object-fit: cover crops the photo     */
/*    sides. No size or position hard-coding.                         */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.distributors-banner .img picture,
	.distributors-banner .img img {
		height: 100% !important;
	}
}