/*
 * Davtron mobile + tablet refinements (added 2026-10-25).
 * Loaded from inc/header.inc AFTER css/responsive.css.
 * EVERYTHING below lives inside max-width media queries (<= 980px), so the
 * desktop layout (>= 981px) is untouched.
 */

/* ---------- Tablet + phone (<= 980px): readability, tap targets, forms ---------- */
@media (max-width: 980px) {
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { font-size: 16px; line-height: 1.5; background-size: auto; overflow-x: hidden; }

	img { max-width: 100%; }
	#main img, #sub img, #header img { height: auto; }

	/* --- header: logo, search, menu --- */
	#header { background-image: none; background-color: #fff; }
	.content-box { box-sizing: border-box; max-width: 100%; }
	#header .form-holder { margin-bottom: 8px; }
	.search-form fieldset { display: flex; align-items: center; gap: 6px; }
	.search-form label { float: none; margin: 0; font-size: 16px; }
	.search-form .txt {
		float: none; flex: 1 1 auto; width: auto; min-width: 0; margin: 0;
		min-height: 44px; box-sizing: border-box; font-size: 16px; padding: 8px 10px;
	}
	.search-form .btn {
		float: none; flex: 0 0 auto; min-width: 48px; height: 44px; padding: 0 10px; font-size: 16px; line-height: 1;
	}
	.nav-toggle {
		min-height: 44px; min-width: 96px; font-size: 16px; padding: 10px 18px;
		-webkit-tap-highlight-color: transparent;
	}
	.nav li a { font-size: 16px; line-height: 44px; min-height: 44px; box-sizing: border-box; }

	/* --- headings / body copy --- */
	h1.title { font-size: 26px; }
	h1 { font-size: 24px; }
	#content h2, #content-wide h2 { font-size: 20px; line-height: 1.25; }
	h3, h4 { line-height: 1.3; }
	#main p, #main li, #main td, #main th, #main dd, #main dt, #main label,
	.content-box p, .tabs p, .info-holder p, .sidebox p, .descr p, .copy p {
		font-size: 16px; line-height: 1.5;
	}
	.tabs p { margin-bottom: 14px; }
	.info-holder p { line-height: 1.45; }
	.sidebox p { line-height: 1.45; }
	.breadcrumbs li, .breadcrumbs li span { font-size: 14px; }
	.photos .name { font-size: 14px; padding: 8px 16px; }

	/* --- buttons ("Learn More" etc.) --- */
	.more, #main .more {
		float: none; display: inline-block; box-sizing: border-box;
		min-height: 44px; padding: 10px 14px 10px 14px; font-size: 16px; line-height: 22px;
	}
	.more span { float: none; display: inline-block; padding-right: 24px; height: auto; }

	/* --- tabs --- */
	.tabs .tabset .tab { font-size: 16px; min-height: 44px; padding: 10px 12px; box-sizing: border-box; }
	.tabs .tabset .tab .less { font-size: 14px; }
	/* tabs: every tab fills its grid cell (no grey gap under short tabs) and is separated by white borders */
	.tabs .tabset li { margin: 0; display: flex; }
	.tabs .tabset .tab { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #fff; }

	/* --- sidebar nav / link lists --- */
	.accordion li a { padding: 12px 8px 12px 26px; font-size: 16px; line-height: 1.3; }
	.accordion li ul li a, .accordion li.active ul li a { padding: 12px 8px 12px 32px; font-size: 16px; }
	.accordion li .parent { background-position: 16px 50%; }
	.accordion li.active a { background-position: 13px 50%; }
	.accordion li ul li a, .accordion li.active ul li a { background-position: 0 0; }
	#sidepanel h3 { font-size: 20px; }
	.links li { padding: 0 18px; }
	.links a { display: block; padding: 12px 0; font-size: 16px; }

	/* --- footer --- */
	#footer, #footer .text p, #footer h4 { font-size: 15px; line-height: 1.5; }
	#footer h4 { font-size: 16px; margin-bottom: 4px; }
	.info-area .products ul li { padding: 0; }
	.info-area .products ul li a { display: inline-block; padding: 10px 0; font-size: 16px; }
	.bottomnav { display: flex; flex-wrap: wrap; overflow: visible; }
	.bottomnav li { float: none; margin: 0 6px 0 0; padding-left: 9px; background-position: 0 50%; }
	.bottomnav li a { display: inline-block; padding: 12px 6px; font-size: 16px; line-height: 20px; }

	/* --- forms (all form controls: >=16px stops iOS zoom, >=44px tap height) --- */
	input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
	input[type="password"], input[type="number"], input[type="url"], textarea, select {
		font-size: 16px; min-height: 44px; padding: 8px 10px; max-width: 100%; box-sizing: border-box;
	}
	input[type="submit"], input[type="button"], button { font-size: 16px; min-height: 44px; padding: 8px 16px; }
	input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-height: 0; margin: 0 8px 0 0; vertical-align: middle; }
	label { margin-top: 0; }
	textarea { width: 100%; }
	form.ddfm textarea.fmtextwide { float: none; width: 100%; }

	/* --- embedded media --- */
	iframe[src*="youtube"], iframe[src*="youtu.be"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
	.lightbox-content iframe { height: auto; aspect-ratio: 16 / 9; }
	.lightbox-overlay .lightbox-close {
		width: 44px; height: 44px; padding: 0; top: 6px; right: 6px; font-size: 30px; line-height: 44px; text-align: center;
	}

	/* --- inline-styled blocks on individual pages --- */
	.descr[style], .photos[style], #content[style], #content-wide[style], .row[style], #install-size { width: auto !important; max-width: 100%; }
	#content[style] { padding-right: 0 !important; }
	.descr img[style] { max-width: 100%; height: auto; }

	/* --- data tables: never let them push the page wider than the screen --- */
	.content-box table, .tabs-content table { max-width: 100%; }
	.tabs-content .frame table, .content-box table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	/* --- images that the CMS floats inside copy: stack them instead of squeezing the text --- */
	.content-box img[style*="float"], .content-box img[align], .content-box p img[style*="float"] {
		float: none !important; display: block; margin: 10px auto !important; max-width: 100%; height: auto;
	}
	.content-box img { max-width: 100%; height: auto; }

	/* --- overview: product thumbnails as a tidy grid --- */
	.copy .small { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px 12px; width: auto; }
	.copy .small br { display: none; }
	.copy .small .thumbnail { float: none; width: auto; height: auto; margin: 0; text-align: center; }
	.copy .small .thumbnail img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
	.thumbnail p { margin: 0; }
	.thumbnail p a { display: block; padding: 12px 0; font-size: 16px; }

	/* --- site search results page (search/search.php) --- */
	.searchBox, .searchBox table, .searchBox tbody { display: block; width: 100%; box-sizing: border-box; }
	.searchBox form table tr { display: flex; align-items: center; gap: 8px; }
	.searchBox form table td { display: block; padding: 0; }
	.searchBox form table td:first-child { flex: 1 1 auto; min-width: 0; }
	.searchBox input[type="text"] { width: 100%; }
	.searchBox input[type="submit"] { min-width: 80px; }
	#result_report, #did_you_mean { font-size: 16px; }
	/* --- part-number table on product pages -> stacked "cards".
	   Scoped to the generated table (the one with View Prices buttons) via :has(). Hand-authored
	   legacy tables (table.tbl, no a.button-10) are never touched; in browsers without :has()
	   these rules are dropped and every table just stays a normal horizontally scrollable table. --- */
	#tab1 table:has(a.button-10), #tab1 table:has(a.button-10) tbody { display: block; width: 100%; }
	#tab1 table:has(a.button-10) tr:first-child:has(th) { display: none; }
	#tab1 table:has(a.button-10) tr {
		display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px;
		align-items: center; padding: 10px 10px 12px;
	}
	#tab1 table:has(a.button-10) td { display: block; padding: 0; font-size: 16px; width: auto !important; box-sizing: border-box; }
	#tab1 table:has(a.button-10) td:nth-child(1) { grid-column: 1; font-weight: bold; overflow-wrap: break-word; min-width: 0; }
	#tab1 table:has(a.button-10) td:nth-child(2) { grid-column: 2; grid-row: 1; }
	#tab1 table:has(a.button-10) td:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; font-size: 15px; line-height: 1.4; }
	.button-10 {
		min-height: 44px; min-width: 112px; box-sizing: border-box; justify-content: center; font-size: 16px;
	}
	/* hand-authored tables: keep them tables, let them wrap to the screen and scroll if still too wide */
	#tab1 table.tbl { width: 100% !important; height: auto !important; }
	#tab1 table.tbl td, #tab1 table.tbl th { overflow-wrap: break-word; width: auto !important; min-width: 0; }

	/* --- tap targets --- */
	.breadcrumbs li a { display: inline-block; min-width: 44px; min-height: 44px; padding: 13px 6px; box-sizing: border-box; line-height: 18px; text-align: center; }
	.photos a { display: inline-block; min-height: 44px; box-sizing: border-box; }
	.thumbnail > a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
	.holder > a:not(.more) { display: inline-block; min-height: 44px; padding: 10px 4px; line-height: 24px; font-size: 16px; box-sizing: border-box; }
	.content-box a:has(> img) { display: inline-flex; align-items: center; min-height: 44px; }
	#footer a, .links a { min-height: 44px; box-sizing: border-box; }
	/* small text / tap targets found in the second QA pass */
	a.open-popup { display: inline-block; min-height: 44px; padding: 14px 0; box-sizing: border-box; }
	div.slide > ul > li > a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; font-size: 14px !important; }
	#tab1 table.tbl td, #tab1 table.tbl td * { font-size: 14px !important; }
	#subheader .info-holder p span, .top-holder .descr p span { font-size: 14px !important; }
	/* product search form */
	p.label_checkbox_pair { display: flex; align-items: center; min-height: 44px; margin: 0; position: relative; }
	/* the checkbox is not tied to its label in the markup, so make the invisible input cover the whole row
	   (full-width 44px tap area) and draw the visible box on the label */
	p.label_checkbox_pair input {
		position: absolute !important; left: 0 !important; top: 0 !important; width: 100%; height: 100%; margin: 0;
		opacity: 0; z-index: 2; cursor: pointer;
	}
	p.label_checkbox_pair label { display: flex !important; align-items: center; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; flex: 1 1 auto; min-height: 44px; }
	p.label_checkbox_pair label::before {
		content: ""; flex: 0 0 auto; width: 28px; height: 28px; margin: 0 12px 0 4px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='2' y='2' width='24' height='24' rx='4' fill='%23fff' stroke='%231965b1' stroke-width='2.5'/%3E%3C/svg%3E") center / 28px no-repeat;
	}
	p.label_checkbox_pair input:checked + label::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='2' y='2' width='24' height='24' rx='4' fill='%231965b1' stroke='%231965b1' stroke-width='2.5'/%3E%3Cpath d='M7 14.5l5 5 9-10' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E");
	}
	p.label_checkbox_pair input:focus-visible + label::before { outline: 2px solid #f90; outline-offset: 2px; }
	#install-size { border-left: 0 !important; }
	.size { width: 50% !important; box-sizing: border-box; padding: 4px 6px; }
	.size img { max-width: 100%; height: auto; }
	.size input[type="checkbox"] {
		-webkit-appearance: none; appearance: none; width: 44px !important; height: 44px !important; margin: 0 auto 6px !important; display: block;
		border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='2' y='2' width='24' height='24' rx='4' fill='%23fff' stroke='%231965b1' stroke-width='2.5'/%3E%3C/svg%3E") center / 28px no-repeat; cursor: pointer;
	}
	.size input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='2' y='2' width='24' height='24' rx='4' fill='%231965b1' stroke='%231965b1' stroke-width='2.5'/%3E%3Cpath d='M7 14.5l5 5 9-10' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E"); }

	/* search-form.php results (AJAX-loaded into #output): thumbnails in a 2-column grid on phones;
	   the "Product Search Results" heading, the no-results message and each size header stay full width because they sit outside .product-container */
	#output .row2 { display: block; }
	#output .size-box { margin: 16px 0 6px; }
	#output .size-box img { max-width: 100%; height: auto; }
	#output .product-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	#output .product-box { min-width: 0; }
	#output .product { text-align: center; }
	#output .product > a:first-child { display: block; padding: 4px 0; }
	#output .product img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
	#output .product p { margin: 0; }
	#output .product p a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; font-size: 16px; }

	/* newsletter popup + other popups.
	   main.js initPopups widens the fader to 1000px when the window is < 1000px and centres
	   the popup inside that, which pushes it off-screen on phones. Pin it to the real viewport. */
	#lightbox-overlay { width: 100% !important; }
	.popup, #popup-clock {
		width: calc(100% - 24px) !important; max-width: 420px !important; box-sizing: border-box; padding: 16px 14px 8px;
	}
	/* [style*="left"] = only once main.js has opened/positioned it (closed it stays parked off-screen by all.css) */
	#popup-email {
		width: calc(100% - 32px) !important;
		max-width: 440px !important;
		padding: 0 !important;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#popup-email[style*="left"] { position: fixed !important; left: 50% !important; top: 12px !important; transform: translateX(-50%); }
	@media (max-height: 460px) { #popup-email { max-height: 90vh; } #popup-email[style*="left"] { top: 5vh !important; } }
	.popup .popup-holder, #popup-clock .popup-holder { width: auto !important; }
	.popup .close { width: 44px; height: 44px; background-size: contain; }
	#popup-email .close { width: 36px; height: 36px; background: none; }
	.popup .close-holder { right: 4px; top: 4px; }
	#popup-email .close-holder { right: 8px; top: 8px; }
	#popup-email h2 { padding: 18px 52px 4px 20px; font-size: 18px; }
	#popup-email .popup-lead { padding: 0 20px 14px; }
	#popup-email form { padding: 16px 20px 18px; }
	#popup-email span.label, #popup-email span.spacer { float: none; display: block; width: auto; }
	#popup-email span.multiple { float: none; }
	#popup-email span.button { padding-left: 0; }
	#popup-email input[type="text"], #popup-email select { width: 100%; }
	#popup-clock { height: auto !important; }
}

/* ---------- Phones + small tablets (<= 767px) ---------- */
@media (max-width: 767px) {
	#header { padding-left: 12px; padding-right: 12px; }
	.nav-toggle { width: 100%; text-align: left; }
	.nav li { margin: 0 0 2px; }
	.nav li a { display: block; padding: 0 14px; line-height: 44px; }

	h1.title { font-size: 24px; padding-top: 32px; }
	#main { padding-left: 10px; padding-right: 10px; }
	.content-box { padding: 12px; }
	.tabs .tabs-content .frame { padding: 14px 12px 24px; }

	/* other tabs: tables scroll sideways inside their box rather than the whole page */
	#tab2 table, #tab3 table, #tab4 table, #tab5 table { display: block; overflow-x: auto; }




	/* tables on pages with lots of columns */
	#cat_table, #results { font-size: 16px; }
}

/* ---------- Tablet (768px - 980px) ---------- */
@media (min-width: 768px) and (max-width: 980px) {
	.nav { display: flex; flex-wrap: wrap; }
	.nav li { margin: 0 2px 4px 0; }
	.nav li a { padding: 0 18px; }
	.size { width: 25% !important; box-sizing: border-box; }
	#output .product-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#main { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Very small phones (<= 360px) ---------- */
@media (max-width: 360px) {
	.search-form fieldset { min-width: 0; }
	.search-form .txt { min-width: 0; width: auto; }
	.search-form label { font-size: 14px; }
	.search-form .btn { min-width: 48px; padding: 0 10px; }

	/* legacy parts tables only (not the a.button-10 card tables): the first cell holds a hard run of &nbsp;
	   that cannot wrap, so tighten the run (word-spacing also applies to nbsp) and the padding so the row fits at 320 */
	#tab1 table.tbl td { padding-left: 3px; padding-right: 3px; }
	#tab1 table.tbl td:not(:first-child) { overflow-wrap: anywhere; }
	#tab1 table.tbl td:first-child { word-spacing: -1px; }
}