/**
 * Moneysworth Toolkit — mobile audit fixes (August 2026)
 *
 * Everything here is inside a max-width query; desktop is untouched.
 * Findings closed: 01, 02, 03, 05, 06, 07, 08, 09, 10, 12, 15.
 * (04 and 14 are in mt-ux.js, 11 is a menu label, 13 is in mt-ux-fixes.php.)
 *
 * Rollback: remove the 'mt-mobile' enqueue in core-init.php.
 */


/* =========================================================================
 * 01 — Stop iOS zooming the page on focus
 *
 * Safari auto-zooms any focused field under 16px and does not zoom back.
 * Search was 13.3px, the checkout Country/State selects 14px, catalogue
 * sort 15px. This is the single highest-value rule in the file.
 * ====================================================================== */

@media (max-width: 980px) {
	body input[type="text"],
	body input[type="search"],
	body input[type="email"],
	body input[type="tel"],
	body input[type="number"],
	body input[type="password"],
	body input[type="url"],
	body input[type="date"],
	body input:not([type]),
	body select,
	body textarea,
	body select.orderby,
	body .woocommerce div.product form.cart .variations select,
	body form.mt-search input,
	body .woocommerce form .form-row input.input-text,
	body .woocommerce form .form-row select,
	body .woocommerce form .form-row textarea {
		font-size: 16px !important;
	}

	/* Comfortable field height to match the larger text. */
	body .woocommerce form .form-row input.input-text,
	body .woocommerce form .form-row select,
	body input[type="date"] {
		min-height: 48px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}


/* =========================================================================
 * 05 — The menu drawer stops scrolling sideways
 *
 * The child theme sets `overflow: scroll`, which enables both axes, so the
 * drawer could be dragged left and right over empty space.
 * ====================================================================== */

@media (max-width: 980px) {
	body .et_mobile_menu {
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		/* Leave room for the pinned header and the drawer's action row. */
		max-height: calc(100vh - var(--mt-header-total, 119px) - 80px) !important;
		overscroll-behavior: contain;
	}

	body .et_mobile_menu li,
	body .et_mobile_menu li a {
		max-width: 100%;
		overflow-wrap: break-word;
	}
}


/* =========================================================================
 * 04 / 10 — Drawer action row and destination context
 *
 * Markup injected by mt-ux.js. The drawer is the navigation on a phone, so
 * it needs a route back to the order and a reminder of which catalogue the
 * visitor is in — the utility bar is covered while the drawer is open.
 * ====================================================================== */

@media (max-width: 980px) {
	body .mt-drawer-dest {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 12px 18px;
		background: #eef2f7;
		border-bottom: 1px solid #dbe2e9;
		font-size: 13.5px;
		font-weight: 600;
		color: #15467b;
	}

	body .mt-drawer-dest a {
		margin-left: auto;
		font-size: 13px;
		font-weight: 600;
		color: #15467b !important;
		text-decoration: underline !important;
		padding: 6px 2px;
		min-height: 36px;
		display: inline-flex;
		align-items: center;
	}

	body .mt-drawer-actions {
		display: flex;
		gap: 10px;
		padding: 14px 18px;
		background: #f7f9fb;
		border-top: 1px solid #dbe2e9;
	}

	body .mt-drawer-actions a {
		flex: 1 1 0;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 7px;
		min-height: 50px;
		padding: 12px 10px !important;
		border-radius: 3px;
		font-size: 15px !important;
		font-weight: 700 !important;
		text-align: center;
		text-decoration: none !important;
		border-bottom: 0 !important;
	}

	body .mt-drawer-actions .mt-drawer-cart {
		background: #15467b;
		color: #fff !important;
	}

	body .mt-drawer-actions .mt-drawer-call {
		background: #fff;
		color: #15467b !important;
		border: 1px solid #15467b !important;
	}
}


/* =========================================================================
 * 02 — The mobile cart becomes scannable cards
 *
 * WooCommerce's responsive cart stacks each line into label/value rows and
 * hides the thumbnail, so five items ran to ~850px with nothing visual to
 * anchor them, and the only remove control was a 19px x.
 * ====================================================================== */

@media (max-width: 767px) {
	body.woocommerce-cart table.cart,
	body.woocommerce-cart table.cart tbody,
	body.woocommerce-cart table.cart tr {
		display: block !important;
		width: 100% !important;
	}

	body.woocommerce-cart table.cart thead { display: none !important; }

	body.woocommerce-cart table.cart tr.cart_item {
		position: relative;
		display: grid !important;
		grid-template-columns: 64px 1fr auto;
		grid-template-areas:
			"thumb name     name"
			"thumb price    subtotal"
			"thumb quantity remove";
		gap: 3px 12px;
		align-items: center;
		padding: 14px 0 !important;
		margin: 0 0 2px !important;
		border: 0 !important;
		border-bottom: 1px solid #e3e8ee !important;
	}

	body.woocommerce-cart table.cart tr.cart_item td {
		display: block !important;
		width: auto !important;
		border: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	/* WooCommerce prints the column name via a data attribute; suppress it,
	   the card layout makes each value self-evident. */
	body.woocommerce-cart table.cart tr.cart_item td::before {
		display: none !important;
	}

	body.woocommerce-cart td.product-thumbnail {
		grid-area: thumb;
		display: block !important;
		align-self: start;
	}

	body.woocommerce-cart td.product-thumbnail img {
		width: 64px !important;
		height: 64px !important;
		object-fit: cover;
		border: 1px solid #e3e8ee;
		border-radius: 3px;
		display: block;
	}

	body.woocommerce-cart td.product-name {
		grid-area: name;
		font-size: 15.5px;
		font-weight: 600;
		line-height: 1.35;
	}

	body.woocommerce-cart td.product-name a {
		color: #1c2b3a !important;
		text-decoration: none !important;
	}

	body.woocommerce-cart td.product-price {
		grid-area: price;
		font-size: 14px;
		color: #5a6672 !important;
	}

	body.woocommerce-cart td.product-quantity { grid-area: quantity; }

	/* The taller 16px fields from finding 01 would otherwise make each cart
	   row grow; keep the stepper compact but still a 44px target. */
	body.woocommerce-cart td.product-quantity input.qty {
		height: 44px !important;
		min-height: 44px;
		width: 72px !important;
		padding-top: 0;
		padding-bottom: 0;
	}

	body.woocommerce-cart td.product-subtotal {
		grid-area: subtotal;
		text-align: right !important;
		font-size: 17px;
		font-weight: 700;
		color: #0373ae !important;
	}

	/* The remove control becomes a labelled full-width action instead of a
	   19px x floating away from the item it deletes. */
	body.woocommerce-cart td.product-remove {
		grid-area: remove;
		justify-self: end;
	}

	body.woocommerce-cart td.product-remove a.remove {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: auto !important;
		height: 44px !important;
		min-height: 44px;
		padding: 0 14px !important;
		font-size: 0 !important;          /* hide the x glyph */
		line-height: 1 !important;
		border: 1px solid #d9c2be !important;
		border-radius: 3px;
		background: #fdf6f5 !important;
		color: #9d2f24 !important;
		text-decoration: none !important;
	}

	body.woocommerce-cart td.product-remove a.remove::after {
		content: "Remove";
		font-size: 14px;
		font-weight: 600;
		color: #9d2f24;
	}

	body.woocommerce-cart td.product-remove a.remove:hover {
		background: #f6e4e1 !important;
		color: #9d2f24 !important;
	}

	/* Actions row: coupon and update stack rather than crowd. */
	body.woocommerce-cart table.cart td.actions {
		display: block !important;
		padding: 18px 0 !important;
	}

	body.woocommerce-cart table.cart td.actions .coupon {
		display: flex;
		gap: 8px;
		margin-bottom: 12px;
	}

	body.woocommerce-cart table.cart td.actions .coupon .input-text {
		flex: 1 1 auto;
		width: auto !important;
	}

	body.woocommerce-cart table.cart td.actions .button {
		width: 100%;
		min-height: 48px;
	}
}


/* =========================================================================
 * 03 — A checkout step indicator that leaves room for the form
 *
 * Four (five as a guest) full-width stacked blocks ran to ~225px. With the
 * pinned header that pushed the first field below the fold. Laid out
 * horizontally the same information costs about 50px.
 * ====================================================================== */




/* =========================================================================
 * 06 / 07 / 08 — Targets that match the text they contain
 *
 * Nine links on a category page and twelve on a product page measured under
 * 40px tall. Breadcrumbs, the call link and the footer legal pair were the
 * worst, and all three are things people reach for.
 * ====================================================================== */

@media (max-width: 980px) {
	/* 06 — breadcrumbs */
	body.woocommerce .woocommerce-breadcrumb,
	body .woocommerce-breadcrumb {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 4px;
		font-size: 14px !important;
		margin-bottom: 10px !important;
	}

	body.woocommerce .woocommerce-breadcrumb a,
	body .woocommerce-breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 4px 2px;
	}

	/* 07 — the call row on the product page becomes a real button */
	body .mt-product-assurances__call {
		padding: 12px 0 0 0 !important;
	}

	body .mt-product-assurances__call::before { display: none !important; }

	body .mt-product-assurances__call a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-height: 50px;
		margin-top: 8px;
		padding: 12px;
		background: #fff;
		border: 1px solid #15467b;
		border-radius: 3px;
		font-size: 16px;
		font-weight: 700;
		text-decoration: none !important;
	}

	body .mt-product-assurances__call a::before {
		content: "\e090";
		font-family: ETmodules;
		font-size: 17px;
	}

	/* 08 — footer legal pair. The footer is a Theme Builder layout: a bare
	   <footer> with the links inside a .textwidget, not #main-footer. */
	body footer .textwidget a,
	body footer .et_pb_text a,
	body #main-footer .et_pb_text a,
	body .et-l--footer .et_pb_text a {
		display: inline-block;
		min-height: 44px;
		padding: 10px 2px;
		line-height: 24px;
	}
}


/* =========================================================================
 * 09 — The rental unit stops being the smallest thing on the card
 * ====================================================================== */

@media (max-width: 980px) {
	body .price sub,
	body ul.products li.product .price sub,
	body.single-product div.product p.price sub,
	body .woocommerce ul.products li.product .price small,
	body .woocommerce ul.products li.product .price .woocommerce-price-suffix,
	body.single-product div.product p.price .woocommerce-price-suffix,
	body .woocommerce-price-suffix {
		font-size: 14px !important;
		color: #3d4854 !important;
		font-weight: 600;
	}
}


/* =========================================================================
 * 12 — The manual-address escape hatch reads as one line
 * ====================================================================== */

@media (max-width: 767px) {
	body .mt-v2 a[class*="manual"],
	body .mt-v2__manual-toggle,
	body .mt-v2 .mt-v2__combo + a {
		display: inline-block;
		text-align: left !important;
		min-height: 44px;
		padding: 11px 0;
		font-size: 15px;
		line-height: 1.4;
	}
}


/* =========================================================================
 * 15 — Sidebar supporting copy at a readable size once stacked
 *
 * Below 980px the sidebar drops under the content and becomes full width,
 * so there is no width pressure justifying 12.5px.
 * ====================================================================== */

@media (max-width: 980px) {
	body .mt-trust__body span,
	body .mt-trust__terms,
	body .mt-trust__hours,
	body .mt-trust__call-sub {
		font-size: 14px !important;
		line-height: 1.5;
	}

	body .mt-trust__cta-lead { font-size: 15px !important; }

	body .mt-trust__call-num { font-size: 26px !important; }

	body .mt-trust {
		max-width: 520px;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* The footer band's column headings are labels, not body copy, but 12.5px
	   uppercase is tight on a phone. */
	body .mt-footer-col h4 { font-size: 13px !important; }
}

/* =========================================================================
 * 03 (cont.) — kill the leftover icon stub above each step label
 *
 * The stub is the li's own navy/grey background plus a non-label child of
 * .timeline-wrapper. Neither carries information once the labels are pills.
 * ====================================================================== */




/* =========================================================================
 * 03 — Compact checkout step indicator (rewritten cleanly)
 *
 * Four full-width stacked blocks (five as a guest) cost ~264px before the
 * first field. Laid out as a row of small pills the same information costs
 * about 50px, and the form starts inside the first screen.
 *
 * YITH's frontend.css forces `#checkout_timeline { display:block !important }`
 * below 480px, so every rule here names the ID to outrank it.
 * ====================================================================== */

@media (max-width: 980px) {

	body ul#checkout_timeline {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		gap: 5px;
		margin: 0 0 20px !important;
		padding: 0 !important;
		list-style: none !important;
		background: none !important;
	}

	body ul#checkout_timeline li.timeline {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		background-color: transparent !important;
		border: 0 !important;
		list-style: none !important;
		height: auto !important;
		min-height: 0 !important;
	}

	body ul#checkout_timeline li.timeline::before,
	body ul#checkout_timeline li.timeline::after {
		display: none !important;
		content: none !important;
	}

	body ul#checkout_timeline li.timeline .timeline-wrapper {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		border: 0 !important;
		height: auto !important;
		min-height: 0 !important;
	}

	/* The icon stub carries no information once the labels are pills. */
	body ul#checkout_timeline li.timeline .timeline-step,
	body ul#checkout_timeline li.timeline .timeline-step.with-icon,
	body ul#checkout_timeline li.timeline .timeline-icon,
	body ul#checkout_timeline li.timeline i,
	body ul#checkout_timeline li.timeline img,
	body ul#checkout_timeline li.timeline svg {
		display: none !important;
	}

	body ul#checkout_timeline li.timeline a.timeline-label {
		display: flex !important;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100% !important;
		min-height: 48px;
		margin: 0 !important;
		padding: 7px 4px !important;
		background: #eef1f4 !important;
		color: #5a6672 !important;
		border: 0 !important;
		border-top: 3px solid #ccd3da !important;
		border-radius: 3px;
		font-size: 11.5px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		white-space: normal !important;
		overflow-wrap: anywhere;
		text-decoration: none !important;
	}

	/* Completed steps read as done, not disabled. */
	body ul#checkout_timeline li.timeline.done a.timeline-label {
		background: #e4eefa !important;
		color: #15467b !important;
		border-top-color: #7ba7d4 !important;
	}

	body ul#checkout_timeline li.timeline.current a.timeline-label,
	body ul#checkout_timeline li.timeline.active a.timeline-label {
		background: #15467b !important;
		color: #fff !important;
		border-top-color: #0f3560 !important;
	}
}

/* =========================================================================
 * Cart in the mobile header, and the location control moved to the menu
 *
 * Divi hides #et-secondary-menu below 980px, which took the cart with it —
 * so on a phone there was no cart anywhere in the chrome. The bar has room
 * for exactly one thing on the right, and that thing is the cart. "Switch
 * Locations" moves out: it already sits at the top of the menu drawer.
 * ====================================================================== */

@media (max-width: 980px) {
	body #top-header #et-secondary-menu {
		display: flex !important;
		align-items: center;
		margin-left: auto;
		float: none !important;
		flex: none;
	}

	body #top-header ul.account-links {
		display: flex !important;
		align-items: center;
		gap: 0;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Only the cart survives here; My Account lives in the drawer. */
	body #top-header ul.account-links li { display: none !important; }
	body #top-header ul.account-links li:last-child { display: inline-flex !important; }

	body #top-header .et-cart-info {
		display: inline-flex !important;
		align-items: center;
		gap: 7px;
		min-height: 38px;
		padding: 4px 6px !important;
		font-size: 0 !important;          /* drop the "Cart" word, keep the icon */
	}

	body #top-header .et-cart-info span {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 0 !important;
	}

	body #top-header .et-cart-info::before {
		content: "\e07a";                 /* ETmodules cart */
		font-family: ETmodules;
		font-size: 22px !important;
		color: #fff;
		line-height: 1;
	}

	body #top-header .mt-cart-badge {
		font-size: 12px !important;
		min-width: 20px;
		height: 20px;
	}

	/* Switch Locations is duplicated at the top of the drawer. */
	body #et-info a.change-destination,
	body #et-info .mt-sep {
		display: none !important;
	}

	/* With the switch link gone the pill can take the room it needs. */
	body #et-info a.mt-dest {
		max-width: calc(100vw - 110px);
	}
}


/* =========================================================================
 * The drawer's cart stays in view
 *
 * The action row was appended inside the scrolling list, so it sat below
 * six category rows and was never seen. Pin it to the bottom of the drawer.
 * ====================================================================== */

@media (max-width: 980px) {
	body .mt-drawer-actions {
		position: sticky;
		bottom: 0;
		z-index: 2;
		box-shadow: 0 -6px 14px rgba(16, 38, 62, .10);
	}

	body .mt-drawer-dest {
		position: sticky;
		top: 0;
		z-index: 2;
	}
}


/* =========================================================================
 * Vertical rhythm on a phone
 *
 * The child theme sets `#main-content .container { padding: 58px 0 }`, which
 * spends 116px of a 844px screen on empty space before anything is read.
 * Category descriptions then run to ~370px, pushing products off-screen.
 * ====================================================================== */

@media (max-width: 980px) {
	body #main-content .container {
		padding: 20px 0 32px !important;
	}

	body .woocommerce .woocommerce-breadcrumb {
		margin-bottom: 4px !important;
	}

	body .woocommerce .page-title,
	body.tax-product_cat h1.page-title,
	body .woocommerce-products-header h1 {
		font-size: 26px !important;
		line-height: 1.2;
		margin: 0 0 8px !important;
		padding-bottom: 0 !important;
	}

	body .term-description {
		margin: 0 0 14px !important;
		font-size: 15px !important;
		line-height: 1.55 !important;
	}

	body .term-description p { margin: 0 0 8px !important; }
	body .term-description p:last-child { margin-bottom: 0 !important; }

	body .mt-readmore {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0 0 16px;
		padding: 8px 0;
		min-height: 40px;
		background: none;
		border: 0;
		color: #15467b;
		font-size: 14.5px;
		font-weight: 700;
		text-decoration: underline;
		cursor: pointer;
	}

	body .mt-shop-bar {
		padding-bottom: 10px !important;
		margin-bottom: 16px !important;
	}

	/* Divi section padding inside Theme Builder pages. */
	body .et_pb_section { padding-top: 22px !important; padding-bottom: 22px !important; }
	body .et_pb_row { padding-top: 0 !important; padding-bottom: 14px !important; }

	/* Cart page furniture */
	body.woocommerce-cart .cart-collaterals { margin-top: 18px; }
	body.woocommerce-cart h2 { font-size: 20px !important; margin-bottom: 10px !important; }
}

/* =========================================================================
 * Category copy moves below the grid on mobile
 *
 * The description earns its keep for search, but a shopper landing here is
 * looking for products, and on a phone the copy pushed every product below
 * the fold. Reordering with flex `order` leaves the HTML source untouched —
 * crawlers see exactly the same document — while a shopper sees products
 * first and the copy underneath, which is where category SEO text sits on
 * most large retail sites anyway.
 *
 * `display: contents` promotes the <h1> and the description out of
 * .woocommerce-products-header so both can take part in the ordering.
 * ====================================================================== */

@media (max-width: 980px) {
	body #left-area {
		display: flex;
		flex-direction: column;
	}

	body #left-area > .woocommerce-products-header {
		display: contents;
	}

	body #left-area > nav.woocommerce-breadcrumb        { order: 1; }
	body #left-area > .woocommerce-products-header h1,
	body #left-area h1.page-title                       { order: 2; }
	body #left-area > .woocommerce-notices-wrapper      { order: 3; }
	body #left-area > .mt-shop-bar                      { order: 4; }
	body #left-area > ul.products                       { order: 5; }
	body #left-area > .woocommerce-pagination,
	body #left-area > nav.woocommerce-pagination        { order: 6; }
	body #left-area .term-description                   { order: 9; }

	/* Presented as an "about" note rather than an orphaned paragraph. */
	body #left-area .term-description {
		margin: 30px 0 0 !important;
		padding: 20px 0 0;
		border-top: 1px solid #e3e8ee;
		font-size: 15px !important;
		line-height: 1.6 !important;
		color: #5a6672;
	}

	body #left-area .term-description::before {
		content: "About these rentals";
		display: block;
		margin-bottom: 10px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: #7b8794;
	}

	/* The Read more toggle is redundant now the copy is out of the way. */
	body .mt-readmore { display: none !important; }
}

/* =========================================================================
 * Category meta block — breadcrumb, title, count and sort as one group
 *
 * These four elements were spending ~200px before the first product: the
 * count and the sort control each took their own row because the bar
 * wrapped, and every element carried desktop-sized margins.
 *
 * Target: one compact group that reads top-to-bottom without a pause.
 * ====================================================================== */

@media (max-width: 980px) {
	/* Nothing above the breadcrumb but the header. */
	body #main-content #content-area,
	body #main-content #left-area {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	body #left-area > nav.woocommerce-breadcrumb {
		font-size: 13.5px !important;
		margin: 0 0 2px !important;
		line-height: 1.3;
	}

	body #left-area > nav.woocommerce-breadcrumb a {
		min-height: 40px;
		padding: 3px 2px;
	}

	body #left-area h1.page-title,
	body #left-area > .woocommerce-products-header h1 {
		font-size: 24px !important;
		line-height: 1.15 !important;
		margin: 0 0 6px !important;
	}

	/* Count and sort share one row — the bar was wrapping to two. */
	body .mt-shop-bar {
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 12px;
		padding: 0 0 10px !important;
		margin: 0 0 14px !important;
	}

	/* Short enough now (see mt_ux_compact_result_count) that it never needs
	   to be truncated. */
	body .mt-shop-bar .woocommerce-result-count {
		font-size: 13.5px !important;
		white-space: nowrap;
		flex: 0 0 auto;
	}

	/* The "Sort by" label is kept — mt-shop.css wins the cascade for it and
	   the row fits comfortably with it in place. */

	body .mt-shop-bar .woocommerce-ordering {
		flex: 0 0 auto;
		margin-left: auto !important;
	}

	body .mt-shop-bar select.orderby {
		height: 40px !important;
		min-height: 40px !important;
		max-width: 178px;
		/* 16px keeps iOS from zooming the page on focus (finding 01). */
		font-size: 16px !important;
		padding: 4px 30px 4px 10px !important;
		background-position: right 10px center !important;
	}

	/* A single hairline closes the group; the grid starts straight after. */
	body #left-area > .woocommerce-notices-wrapper:empty {
		display: none !important;
	}
}