/* style_carmo_mobile_fixes.css — Carmo mobile layout fixes (2026-07-18)
 * Render-blocking via the edify style* auto-loader (html_header.php), so these
 * rules apply at FIRST PAINT — before the async devicecss.css arrives.
 * NEW filename on purpose: Cloudflare caches .css ~24h; never edit in place —
 * deploy changes under a new name and dot-rename this one.
 */

/* --- Fix #3: load-time column overlap ------------------------------------
 * templatecss.css sets the desktop 3-column offsets UNCONDITIONALLY
 * (.columnwith-left{left:25%} #left-column{right:75%} .two-column{left:25%}
 *  .three-columns{right:50% !important}) and devicecss.css only zeroes them
 * late (async, media="print" swap). Zero them here so mobile first paint is
 * already stacked. This file loads after templatecss.css, so the !important
 * ties resolve in our favour by source order.
 */
@media screen and (max-width: 991px) {
	.columnwith-left {
		left: 0 !important;
	}
	.two-column {
		left: 0 !important;
	}
	#left-column {
		right: 0 !important;
	}
	.three-columns {
		right: 0 !important;
	}
}

/* --- Fix #4: checkout-confirmation cards clipped -------------------------
 * stylesheet.css has .rowOdd{height:1.5em}; devicecss.css turns the
 * confirmation rows into display:block cards on <=767px, so that fixed
 * height breaks the card layout. Let the cards size to their content.
 */
@media screen and (max-width: 767px) {
	#checkoutConfirmDefault #cartContentsDisplay tr,
	#checkoutConfirmDefault #cartContentsDisplay tr.rowOdd,
	#checkoutConfirmDefault #cartContentsDisplay tr.rowEven {
		height: auto !important;
		min-height: 0 !important;
	}
}

/* --- Fix #36: category "years" span overlaps listing text ----------------
 * templatecss.css: .category-extra-info-years{position:absolute;right:5px}
 * but no ancestor is positioned, so on mobile it anchors to the page and
 * overlays the listing. Put it back in normal flow on small screens.
 */
@media screen and (max-width: 767px) {
	.category-extra-info-years {
		position: static !important;
		float: none !important;
	}
}