/* ============================================================
   Printster — mobile pass 2 (header, navigation, legibility)
   Added 2026-08-31. Scoped to <=767px ONLY, so desktop is untouched.
   Reversible: remove the <link> from index.html + prerender/*.html,
   or empty this file.

   Follows /css/cart-mobile.css (2026-06-18), which already fixed the
   cart/configure flow and killed horizontal overflow. This pass fixes
   what that one left: the logo is display:none on phones, nothing is
   sticky on 7,000-16,000px pages, and the cart is buried inside the
   collapsed hamburger menu.

   Companion script: /js/mobile-shim.js (builds the bottom bar; CSS
   alone cannot surface the cart, which sits inside a display:none
   .navbar-collapse).
   ============================================================ */

@media (max-width: 767px) {

	/* --- 1. Logo: visible again ------------------------------------
	   Header.js renders <a class="standard-logo hidden-xs"> — Bootstrap 3's
	   .hidden-xs is display:none!important below 768px — plus a .retina-logo
	   that the Canvas theme hides at 1x. Net result on a phone: no brand and
	   no tap-to-home. Un-hide the standard one; leave retina hidden. */
	#header #logo .standard-logo.hidden-xs {
		display: block !important;
		float: none !important;
	}
	#header #logo .retina-logo {
		display: none !important;
	}
	#header #logo {
		float: left !important;
		height: auto !important;
		padding: 6px 0 !important;
	}
	#header #logo img {
		max-height: 38px !important;
		width: auto !important;
		max-width: 190px !important;
	}

	/* Keep the hamburger on the opposite edge of the restored logo. */
	#header .navbar .navbar-toggler {
		float: right !important;
		margin: 8px 0 !important;
	}
	#header .navbar {
		min-height: 54px;
	}

	/* --- 2. Legibility ----------------------------------------------
	   Form labels render at 11px (price calculator) and body copy at
	   12-14px. Nudge to a readable floor without touching the type
	   hierarchy — headings are left alone. */
	#content label,
	.rvsect label,
	.form-group label {
		font-size: 13px !important;
		line-height: 1.4 !important;
	}
	#content p,
	#content li,
	#content td {
		font-size: 15px !important;
		line-height: 1.55 !important;
	}

	/* --- 3. Tap targets ---------------------------------------------
	   Deliberately narrow: menu entries and real buttons only. A blanket
	   min-height on every <a> would wreck inline links inside paragraphs. */
	#header .navbar-collapse ul > li > a {
		min-height: 44px !important;
		display: flex !important;
		align-items: center !important;
	}
	.button,
	button:not(.navbar-toggler),
	input[type="submit"],
	input[type="button"],
	.btn {
		min-height: 44px !important;
	}

	/* --- 4. Room for the fixed bottom bar ---------------------------
	   Only applied once the shim has actually built the bar, so if the
	   script fails to run nothing reserves dead space at the page foot. */
	body.pmv2-bar-on {
		padding-bottom: 58px !important;
	}
	body.pmv2-bar-on #gotoTop {
		bottom: 68px !important;
	}
}

/* --- 5. The bottom action bar -------------------------------------
   Built by /js/mobile-shim.js. Hidden above 767px by the media query
   below so it can never appear on desktop, even if the script runs. */
#pmv2-bar {
	display: none;
}

@media (max-width: 767px) {
	#pmv2-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1040;
		height: 58px;
		margin: 0;
		padding: 0;
		list-style: none;
		background: #fff;
		border-top: 1px solid #e3e3e3;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
		font-family: inherit;
	}
	#pmv2-bar > li {
		flex: 1 1 0;
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#pmv2-bar > li > a,
	#pmv2-bar > li > button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 58px;
		padding: 0;
		border: 0;
		background: none;
		color: #333;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		text-decoration: none;
		position: relative;
	}
	#pmv2-bar > li > a:active,
	#pmv2-bar > li > button:active {
		background: #f2f2f2;
	}
	#pmv2-bar .pmv2-ico {
		font-size: 19px;
		line-height: 1;
		margin-bottom: 3px;
		display: block;
	}
	/* Cart count badge — mirrors .qty-header from the real header. */
	#pmv2-bar .pmv2-count {
		position: absolute;
		top: 6px;
		left: 50%;
		margin-left: 4px;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		border-radius: 9px;
		background: #1abc9c;
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 17px;
		text-align: center;
	}
	#pmv2-bar .pmv2-count[data-empty="1"] {
		display: none;
	}
}