/*
Theme Name:  MulchPros Classic
Theme URI:   https://mulchpros.com
Description: Theme for MulchPros.com.
Author:      Mulch Pros Landscape Supply
Version:     0.3.29
Requires PHP: 8.2
License:     GPL-2.0-or-later
Text Domain: mulchpros-classic
*/

/* ══════════════════════════════════════════════════════════════════
   Brand tokens — ported from brand/tokens/*.css via the child theme.
   Blue is the ground, red is the accent band, white is the type.
   Orange is CTA-only — never a field, never behind the logo.
   Flat fills only; no gradients except photo protection.
   Width system: content 1440 / reading 900 / narrow 720; section
   sides = ONE fluid gutter clamp. Single-sourced here AND in
   theme.json (settings.custom + layout sizes) — keep the two in sync.
   ══════════════════════════════════════════════════════════════════ */
:root {
	--mp-content-max: 1440px;
	--mp-reading-max: 900px;
	--mp-narrow-max: 720px;
	--mp-gutter: clamp(16px, 4vw, 64px);

	/* Core */
	--blue: #003365;
	--red: #C6121F;
	--white: #FFFFFF;
	--orange: #FBA152;
	--blue-hover: #002347;
	--red-hover: #A50E19;
	--orange-hover: #E8862F;

	/* Neutrals (white surfaces only) */
	--ink: #1E2A38;
	--ink-2: #5A6B7E;
	--border: #C7D0DA;
	--panel: #F2F5F8;

	/* Type */
	--font-headline: 'Josefin Sans', Arial, sans-serif;
	--font-body: 'Open Sans', Arial, sans-serif;
	--leading-body: 1.55;
	--leading-headline: 1.15;
	--tracking-caps: 0.06em;

	/* Radii — 4px inputs/buttons, 8px cards; brand fields stay square */
	--radius-sm: 4px;
	--radius-md: 8px;

	/* Shadows — one soft card shadow on white UI, none on brand fields */
	--shadow-card: 0 1px 3px rgba(30, 42, 56, 0.10), 0 4px 16px rgba(30, 42, 56, 0.08);
	--shadow-dialog: 0 8px 40px rgba(30, 42, 56, 0.25);

	/* Photo protection — the ONLY permitted gradient */
	--photo-protect-bottom: linear-gradient(to top, rgba(0, 35, 71, 0.85), rgba(0, 35, 71, 0));
	--photo-protect-left: linear-gradient(to right, rgba(0, 35, 71, 0.85), rgba(0, 35, 71, 0));
}

/* ── Base type ─────────────────────────────────────────────────── */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 15px; /* --text-base per typography tokens */
	line-height: var(--leading-body);
	color: var(--ink);
	background: var(--white);
	/* Divi forces antialiased; macOS default subpixel AA renders every
	   glyph visibly HEAVIER — the owner read the whole menu as a bolder
	   font before this matched (visual pass 2026-07-29). */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	font-family: var(--font-headline);
	font-weight: 600;
	line-height: var(--leading-headline);
	color: var(--ink);
}
h1 { font-size: 38px; }

a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
::selection { background: var(--blue); color: var(--white); }
img { max-width: 100%; height: auto; }

/* ALL-CAPS utility — Josefin Sans Bold + 6% tracking (stripes, nav, CTAs) */
.mp-caps {
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
}

/* ── Layout primitives (the width system as classes) ──────────────
   Sections span the viewport; .mp-wrap caps content at a PURPOSE
   token with the fluid gutter for sides. Templates and block
   patterns use these instead of ad-hoc widths — never hardcode. */
.mp-section { padding: 36px var(--mp-gutter) 56px; }
.mp-section--panel { background: var(--panel); }
.mp-wrap { max-width: var(--mp-content-max); margin-left: auto; margin-right: auto; }
.mp-wrap--reading { max-width: var(--mp-reading-max); }
.mp-wrap--narrow { max-width: var(--mp-narrow-max); }

/* Block-editor alignment: content pages cap at reading width via
   theme.json layout; wide/full snap to the content cap / viewport. */
.mp-content > .alignwide { max-width: var(--mp-content-max); margin-left: auto; margin-right: auto; }
.mp-content > .alignfull { max-width: none; }

/* ── Buttons ───────────────────────────────────────────────────────
   CTA = orange with DARK BLUE type (never white-on-orange), flat hover.
   Secondary = solid blue. Outline = white on blue fields.
   Woo buttons match by selector so both systems agree; no !important —
   without Divi's per-module CSS there is nothing to outrank. */
.mp-btn-cta,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce a.checkout-button,
.woocommerce #place_order {
	background: var(--orange);
	color: var(--blue);
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
}
.mp-btn-cta:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
	background: var(--orange-hover);
	color: var(--blue);
}

.mp-btn-blue,
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt) {
	background: var(--blue);
	color: var(--white);
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
}
.mp-btn-blue:hover,
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover {
	background: var(--blue-hover);
	color: var(--white);
}

.mp-btn-outline {
	background: transparent;
	color: var(--white);
	border: 2px solid var(--white);
	border-radius: var(--radius-sm);
}
.mp-btn-outline:hover { background: rgba(255, 255, 255, 0.14); }

/* ── Forms ─────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], select, textarea,
.woocommerce .input-text {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	color: var(--ink);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 2px rgba(0, 51, 101, 0.18);
	outline: none;
}
::placeholder { color: #93A3B4; }

/* ── Cards / panels ────────────────────────────────────────────── */
.mp-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.mp-card:hover { box-shadow: var(--shadow-card); border-color: var(--blue); }
.mp-panel-box { background: var(--panel); border-radius: var(--radius-md); }

/* ── The Red Banner Stripe ──────────────────────────────────────────
   Full-width red band flush to the BOTTOM of a blue field (the nav
   stripe under the header is the sole top-position exception).
   2–4 short white ALL-CAPS items. */
.mp-stripe {
	background: var(--red);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 6vw, 72px);
	min-height: 44px;
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
}
.mp-stripe a { color: var(--white); text-decoration: none; }
.mp-stripe a:hover, .mp-stripe .is-hover:hover { background: var(--red-hover); }

/* Photo protection overlay (hero images under white headlines) */
.mp-photo-protect-left::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--photo-protect-left);
	pointer-events: none;
}

/* Icon circles — FA6 Solid glyphs in circles: white circle/blue glyph
   on blue fields; inverted on white. */
.mp-icon-circle {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	color: var(--blue);
	flex: none;
}
.mp-icon-circle--inverse { background: var(--blue); color: var(--white); }

/* ── WooCommerce price display ─────────────────────────────────────
   Superscript cents (the owner's live-site price style) — the <sup>
   is added by this theme's wc_price filter. Cents top-aligned with
   the digits and underlined; top -1em (owner 2026-07-16). */
.woocommerce .price sup.mp-cents,
sup.mp-cents {
	font-size: 0.5em;
	font-weight: 700;
	vertical-align: baseline;
	position: relative;
	top: -1em;
	line-height: 0;
	margin-left: 2px;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Unit after price — rendered from _mp_unit meta by the price filter */
.mp-price-unit { font-size: 0.72em; color: var(--ink-2); font-weight: 400; }

/* Woo notices in brand colors: info/message = blue field, error = red,
   white text + white links. Covers the checkout coupon bar. */
.woocommerce-message { border-top-color: var(--blue); }
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-message { background: var(--blue); color: var(--white); border-top-color: var(--blue); }
.woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error { background: var(--red); color: var(--white); border-top-color: var(--red); }
.woocommerce-info a, .woocommerce-message a, .woocommerce-error a,
.woocommerce a.showcoupon { color: var(--white); text-decoration: underline; }
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce ul.products li.product .price { color: var(--blue); }

/* Badges (Bestseller, ASTM F2075, Signature Blend…) */
.mp-badge {
	display: inline-block;
	background: var(--red);
	color: var(--white);
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	padding: 6px 10px 5px;
	border-radius: var(--radius-sm);
	line-height: 1;
}

/* Featured badge flagged onto shop/category cards (MP_Shortcodes::loop_badge).
   The card <li> anchors it over the product image, prototype-style. */
.woocommerce ul.products li.product { position: relative; }
.woocommerce ul.products li.product .mp-badge--card {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	pointer-events: none;
}

/* Product grids: the prototype's 18px gap, CSS grid (columns-N honored). */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.woocommerce ul.products li.product { width: auto; margin: 0; float: none; }
/* Woo core's per-columns-N float widths carry an EXTRA class of
   specificity (ul.products.columns-5 li.product { width: 16.95% })
   and beat the reset above — inside a grid track that percentage
   rendered the We Install! cards 27px wide (owner report 2026-07-29).
   The attribute selector matches their specificity; theme load order
   wins the tie. The child theme fought the same war with !important. */
.woocommerce ul.products[class*="columns-"] li.product { width: auto; margin: 0; float: none; }
/* Woo's clearfix pseudo-elements would become GRID ITEMS (an empty first cell). */
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
/* Product grid columns follow the screen (owner 2026-07-15): 2 across on
   landscape phones/tablets, 1 across on portrait phones — the EXPANDED
   cards (specs + CTA) need the full column to breathe. */
@media (max-width: 980px) {
	.woocommerce ul.products, .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 600px) {
	.woocommerce ul.products, .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* ── Product cards, EXPANDED (owner 2026-07-15 — react-design parity):
      bordered white card, full-bleed image, price + unit, hairline divider,
      icon spec rows, full-width orange VIEW & ORDER CTA. The mega menu
      overrides these back to the COMPACT treatment below. */
.woocommerce ul.products li.product {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: 16px;
	text-align: left;
}
.woocommerce ul.products li.product img { width: 100%; border-radius: 0; margin: 0; display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 19px; color: var(--ink); padding: 14px 16px 0; line-height: 1.25; }
.woocommerce ul.products li.product .price {
	display: block;
	font-size: 24px;
	font-weight: 700;
	border-bottom: 1px solid var(--border);
	color: var(--blue);
	margin: 0 16px;
	padding: 4px 0 12px;
}
.woocommerce ul.products li.product .price .mp-price-unit { font-size: 13px; font-weight: 400; color: var(--ink-2); margin-left: 4px; }
.mp-card-specs { display: flex; flex-direction: column; gap: 7px; padding: 12px 16px 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.mp-card-specs__row i { color: var(--blue); width: 17px; margin-right: 6px; font-size: 12px; text-align: center; }
.mp-card-cta {
	display: block;
	margin: 14px 16px 0;
	margin-top: auto; /* pins the CTA to the card foot in equal-height rows */
	background: var(--orange);
	color: var(--blue);
	text-align: center;
	border-radius: 6px;
	padding: 12px;
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: 13px;
	white-space: nowrap; /* "VIEW & ORDER →" never wraps (owner 2026-07-15) */
}
.mp-card-cta:hover { background: var(--orange-hover); color: var(--blue); }
/* CARD CLICK RULE applied to Woo product cards (owner rule 2026-07-10):
   stretch Woo's own product link over the whole card (::after overlay),
   CTA raised above it — every point on the card is a real link to the
   PDP; pointer cursor comes from the anchor itself, never faked. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link::after { content: ""; position: absolute; inset: 0; }
.woocommerce ul.products li.product .mp-card-cta { position: relative; z-index: 1; }
.mp-card-cta i { font-size: 11px; margin-left: 5px; }
.mp-card-specs + .mp-card-cta, .woocommerce ul.products li.product .price ~ .mp-card-cta { margin-top: 14px; }
.woocommerce ul.products li.product .button:not(.mp-card-cta) { display: none; }

/* Mega-menu mini grids: COMPACT cards (owner spec 2026-07-15; card skin
   2026-07-24 — one small-card recipe across categories/products/stone/
   fleet). Tiny type, unit small beside the price, no specs/CTA. */
.mp-menu-products ul.products { gap: 10px; }
.mp-menu-products ul.products li.product {
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--white);
	overflow: hidden;
	padding-bottom: 7px;
	transition: box-shadow 0.15s, border-color 0.15s;
}
.mp-menu-products ul.products li.product:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-card);
}
.mp-menu-products ul.products li.product .woocommerce-loop-product__title { font-size: 11.5px; line-height: 1.3; padding: 5px 8px 0; }
.mp-menu-products ul.products li.product .price { font-size: 11px; border-bottom: 0; margin: 0; padding: 1px 8px 0; }
.mp-menu-products ul.products li.product .price .mp-price-unit { font-size: 9.5px; margin-left: 3px; }
/* Full-bleed to the card edges; 8:5 crop (owner 2026-07-24) keeps
   4-across cards short — matches category/fleet/stone menu cards. */
.mp-menu-products ul.products li.product img { border-radius: 0; aspect-ratio: 8 / 5; object-fit: cover; }
.mp-menu-products .mp-card-specs, .mp-menu-products .mp-card-cta { display: none; }
.mp-menu-products ul.products li.product .mp-badge--card,
.mp-menu-products ul.products li.product span.onsale { font-size: 8px; padding: 3px 5px 2px; top: 6px; left: 6px; }
.mp-menu-products ul.products li.product span.onsale { left: auto; right: 6px; }

/* Mega-menu category cards (default panel state) — the shared small-card
   skin; the class is shared by the We Deliver! fleet cards. */
.mp-mm-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mp-mm-cats a {
	display: block;
	text-decoration: none;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--white);
	overflow: hidden;
	padding-bottom: 7px;
	transition: box-shadow 0.15s, border-color 0.15s;
}
.mp-mm-cats a:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-card);
}
.mp-mm-cats img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 0; display: block; }
.mp-mm-cats img.mp-cat-thumb { border-radius: 0; }
.mp-mm-cats b { display: block; font-size: 11.5px; color: var(--ink); margin-top: 5px; line-height: 1.3; font-weight: 600; padding: 0 8px; }
.mp-mm-cats a > span { display: block; font-size: 10.5px; color: var(--ink-2); line-height: 1.35; padding: 0 8px; }

/* Shop by Category tiles (homepage + mega menu) pull the Woo category
   thumbnail via [mp_cat_thumb]; CSS owns the 8:5 crop. */
img.mp-cat-thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border-radius: 8px 8px 0 0;
}

/* [mp_product_sort] — Woo-style ordering select above archive grids,
   right-aligned over the grid column (owner 2026-07-24). */
select.mp-sort {
	display: block;
	margin: 0 0 14px auto;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--white);
	color: var(--ink);
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
}
select.mp-sort:hover { border-color: var(--blue); }
@media (max-width: 980px) {
	select.mp-sort { width: 100%; margin: 0 0 12px; }
}

/* Woo's sale flash, re-branded: orange is NEVER a background (brand rule) —
   red caps pill instead, top-RIGHT so the featured badge keeps top-left. */
.woocommerce span.onsale {
	background: var(--red);
	color: var(--white);
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	border-radius: var(--radius-sm);
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 6px 10px 5px;
	top: 12px;
	right: 12px;
	left: auto;
	margin: 0;
	z-index: 2;
	position: absolute;
}

/* "from $34 per cu yd" tile price line ([mp_from_price]) */
.mp-from-price { color: var(--ink-2); font-size: 12.5px; }
.mp-from-price .woocommerce-Price-amount { color: var(--blue); font-weight: 700; }

/* ── PDP: main price at the owner's live-site scale (2026-07-17):
      big, bold, navy; unit bold navy beside it; the per-cu-ft
      comparison small and quiet after.
      ⚠ SELECTOR SPECIFICITY IS LOAD-BEARING: Woo core wraps its p.price
      size rule in :where(body:not(...)) but still counts (0,3,2) —
      .woocommerce + div.product + p.price. A .single-product-prefixed
      (0,3,0) selector loses ONLY font-size while weight/color apply
      (no competitor), which is exactly how the owner's PDP round found
      the price at 18.75px (2026-07-29). div.product in the prefix
      keeps us at (0,4,1). The child theme fought Divi's copy of this
      same rule with !important. */
.woocommerce div.product .mp-pdp__price .price { font-size: 46px; font-weight: 800; color: var(--blue); line-height: 1.1; margin: 0; }
.woocommerce div.product .mp-pdp__price .price .mp-price-unit { font-size: 21px; font-weight: 700; color: var(--blue); margin-left: 6px; }
.woocommerce div.product .mp-pdp__price .price .mp-price-percf { font-size: 13px; font-weight: 400; color: var(--ink-2); margin-left: 8px; white-space: nowrap; }
.single-product .product_title { font-size: 40px; font-weight: 800; line-height: 1.12; }
/* Fold trims (owner 2026-07-16: Add-to-Cart above the fold at 1080p). */
.single-product .mp-linked { gap: 8px; margin: 6px 0 2px; }
.mp-linked__pill.is-off { color: #9aa7b4; border-color: #dde4ea; background: #f7f9fb; cursor: default; pointer-events: none; }
.single-product .mp-linked__row { flex-direction: row; align-items: center; gap: 10px; }
.single-product .mp-linked__axis { white-space: nowrap; }
.single-product .mp-pdpmeta { margin: 0 0 2px; }
.single-product .mp-install-box { padding: 10px 14px; margin: 0 0 10px; }
/* Tri-selector install education (owner 2026-07-24). */
.mp-fulfill__install-note { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 8px 0 0; }
.mp-fulfill__install-note .mp-install-opt__rate { color: var(--blue); white-space: nowrap; }
.mp-fulfill__install-note .mp-install-how__open { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.single-product .mp-pdp__desc ul { margin-top: 6px; margin-bottom: 6px; }
/* Short-description collapse ("View more") — Woo template class; the
   plugin's JS already lists it first, ahead of the retired Divi class. */
.woocommerce-product-details__short-description.is-open .mp-more-hidden { display: list-item; }

/* ── Cart table (owner cart-review 2026-07-17) ─────────────────────
      Child add-on rows (install / FIBC bags) sit UNDER their parent
      (plugin reorders the cart) — grey tint; the ↳ marker takes the
      LEFT-MARGIN cell and the X re-renders after the child's subtotal.
      Thumbnails 84px; child placeholder thumbs hidden; unit under the
      title; qty stepper carries no unit so columns can't overlap. */
.woocommerce-cart-form tr.mp-cart-child > td { background: #f4f7fa; }
.woocommerce-cart-form tr.mp-cart-child td.product-remove::before {
	content: "\21B3"; font-size: 19px; color: #5a6b7e; display: inline-block; padding-left: 2px;
}
.woocommerce-cart-form tr.mp-cart-child td.product-thumbnail img { display: none; }
.woocommerce-cart-form td.product-thumbnail img {
	width: 84px; height: 84px; max-width: none; object-fit: cover; border-radius: 4px;
}
.woocommerce-cart-form td.product-thumbnail { min-width: 96px; }
.woocommerce-cart-form .mp-cart-unit {
	display: block; font-size: 12px; color: #5a6b7e; margin-top: 2px;
}
.woocommerce-cart-form td.product-subtotal { white-space: nowrap; }
.woocommerce-cart-form a.mp-child-remove {
	display: inline-block; margin-left: 12px; color: #c6121f;
	font-size: 19px; line-height: 1; vertical-align: middle; text-decoration: none;
}
.woocommerce-cart-form a.mp-child-remove:hover { color: #a50e19; }
.woocommerce-cart-form td.product-quantity { white-space: nowrap; }
.woocommerce-cart-form .mp-qty--cart input.qty {
	width: 52px; min-width: 52px; padding: 0 2px; text-align: center;
}
.woocommerce-cart-form .mp-qty--cart .mp-qty__btn { width: 32px; height: 38px; }
.woocommerce-cart-form .mp-qty--cart .mp-qty__field { height: 38px; padding-right: 0; }
.woocommerce-cart-form .mp-install-qty { font-size: 12px; color: #5a6b7e; white-space: nowrap; }

/* ── Sticky rails: blog TOC/quote + product filter (owner 2026-07-16/17).
      Desktop only — both stack ≤980. Top offset clears the sticky header. */
@media (min-width: 981px) {
	.mp-post-sidebar { position: sticky; top: 180px; align-self: flex-start; }
	.mp-filter-rail { position: sticky; top: 180px; align-self: flex-start; }
}

/* ── Product search form ([mp_product_search]) — prototype header pattern:
   white field, magnifier icon INSIDE at the right, no separate button plate */
.mp-search { display: flex; gap: 0; max-width: 100%; position: relative; }
.mp-search input[type="search"] { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); font-family: var(--font-body); font-size: 14px; color: var(--ink); height: 42px; padding: 0 44px 0 12px; outline: none; }
.mp-search input[type="search"]:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0, 51, 101, 0.18); }
.mp-search button { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 40px; background: transparent; color: var(--ink-2); border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; }
.mp-search button:hover { color: var(--blue); background: var(--panel); }

/* Header cart — icon + orange count badge ([mp_cart_button], prototype) */
.mp-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 42px; color: var(--white); font-size: 20px; text-decoration: none; }
.mp-cart:hover { color: var(--white); opacity: 0.85; }
.mp-cart__count { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; background: var(--orange); color: var(--blue); border-radius: 999px; font-family: var(--font-headline); font-weight: 700; font-size: 11px; line-height: 18px; text-align: center; }

/* Announcement bar — prototype: darker blue field, truck icon, bold lead-in */
.mp-announce { background: var(--blue-hover); color: var(--white); text-align: center; padding: 9px 40px; font-size: 13px; position: relative; }
.mp-announce p { margin: 0; color: var(--white); }
.mp-announce strong { color: var(--orange); font-weight: 700; }
.mp-announce .fa-truck-fast { margin-right: 6px; opacity: 0.9; }
/* 28px solid white ≈ the Divi build's 30px icon glyph (owner report
   2026-07-29: the X read too quiet at 18px/70%). */
.mp-announce__close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--white); font-size: 28px; line-height: 1; padding: 2px 8px; cursor: pointer; }
.mp-announce__close:hover { color: var(--white); background: none; opacity: 0.8; }

/* Fulfillment toggle — truck icon on the DELIVERY tab (prototype) */
.mp-fulfill__btn[data-mode="delivery"]::before { content: "\f0d1"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 7px; font-size: 12px; }

/* ── Language selector (MP_I18n, owner 2026-07-31 — the Amazon model):
   a quiet [US flag] EN|ES chip mirroring the CURRENT language, dropdown
   with both options each written in its own language. One flag, always
   the US flag — the flag marks the market, the words carry the language. */
.mp-lang { position: relative; display: inline-flex; }
.mp-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: var(--tracking-caps);
	color: rgba(255, 255, 255, 0.85);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 4px;
	padding: 5px 9px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.mp-lang__btn:hover,
.mp-lang__btn:focus-visible,
.mp-lang__btn[aria-expanded="true"] { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.65); }
.mp-lang__flag { width: 19px; height: 10px; display: block; border-radius: 1px; }
.mp-lang__btn .mp-chevron { width: 5px; height: 5px; }
.mp-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 80;
	min-width: 220px;
	background: var(--white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-dialog);
	padding: 6px 0 8px;
}
.mp-lang__title {
	margin: 0;
	padding: 8px 16px 9px;
	border-bottom: 1px solid var(--border);
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--ink-2);
	white-space: nowrap;
}
.mp-lang__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
}
.mp-lang__opt b { font-weight: 400; color: var(--ink-2); }
.mp-lang__opt:hover { background: var(--panel); color: var(--blue); }
.mp-lang__dot {
	flex: none;
	width: 15px;
	height: 15px;
	border: 2px solid var(--border);
	border-radius: 50%;
}
.mp-lang__opt.is-current .mp-lang__dot { border-color: var(--red); box-shadow: inset 0 0 0 3px var(--white); background: var(--red); }
@media (max-width: 980px) {
	.mp-lang { display: none; } /* hidden here until the mobile panel carries it */
}

/* Screen-reader-only text — plugin widgets emit the class ([mp_product_search]
   label) and Woo templates use it widely, but its definition lives in Woo's
   general stylesheet; the theme must not depend on that being enqueued. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ── Inline service-area map (build-time SVG, zero runtime requests).
   NO rings and NO money on the drawing — this business bills by the
   ROAD mile; concentric bands would read as pricing tiers. */
.mp-areamap { width: 100%; height: auto; display: block; background: #FBFCFD;
	border: 1px solid var(--border); border-radius: var(--radius-md); }
.mp-areamap__water { fill: #DCE9F2; stroke: #C2D8E6; stroke-width: 0.75; }
.mp-areamap__road { fill: none; stroke: #C7D0DA; stroke-width: 1.6; stroke-linecap: round;
	stroke-linejoin: round; }
.mp-areamap__road-label { fill: #8899A8; font-family: var(--font-body); font-size: 9.5px;
	font-weight: 700; text-anchor: middle; }
.mp-areamap__city { fill: var(--ink-2); }
.mp-areamap__city-label { fill: var(--ink-2); font-family: var(--font-headline); font-weight: 700;
	font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.mp-areamap__town { fill: var(--blue); transition: fill 0.15s ease; }
.mp-areamap__label { fill: var(--ink); font-family: var(--font-body); font-size: 11px; }
.mp-areamap a:hover .mp-areamap__town { fill: var(--red); }
.mp-areamap a:hover .mp-areamap__label { fill: var(--red); font-weight: 700; }
.mp-areamap a:focus-visible .mp-areamap__town { outline: 2px solid var(--blue); }
.mp-areamap__yard { fill: var(--red); stroke: var(--white); stroke-width: 2.5; }
.mp-areamap__yardlabel { fill: var(--red); font-family: var(--font-headline); font-weight: 700;
	font-size: 11.5px; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.mp-areamap__scale line { stroke: var(--ink-2); stroke-width: 1; }
.mp-areamap__scale text { fill: var(--ink-2); font-family: var(--font-body); font-size: 10px;
	text-anchor: middle; }
.mp-areamap__credit { fill: #9AA8B5; font-family: var(--font-body); font-size: 8.5px; }
@media (prefers-reduced-motion: reduce) { .mp-areamap__town { transition: none; } }

/* ── Homepage service-area list — ZIPs are the citable half. */
.mp-area { margin: 0; line-height: 1.45; }
.mp-area a { color: var(--blue); text-decoration: none; }
.mp-area a:hover { text-decoration: underline; }
.mp-area__zips { display: block; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── Product FAQ recovered from the live site ─────────────────── */
.mp-pfaq__q { font-size: 15.5px; font-weight: 700; margin: 18px 0 4px; }
.mp-pfaq__a { color: var(--ink-2); margin: 0 0 6px; }

/* ── Calculator cue under the homepage category tiles. Coverage is
   108 sq ft/yd @ 3". */
.mp-calc-cue { margin: 14px 0 0; color: var(--ink-2); font-size: 14.5px; }
.mp-calc-cue .fa-calculator { color: var(--blue); margin-right: 6px; }
.mp-calc-cue a { color: var(--blue); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--border); }
.mp-calc-cue a:hover { border-bottom-color: var(--blue); }
.mp-calc-cue__note { display: inline-block; margin-left: 8px; color: var(--ink-2); opacity: 0.85; }
@media (max-width: 767px) {
	.mp-calc-cue__note { display: block; margin: 4px 0 0; }
}

/* ── Hero price band (competitor audit 2026-07-27: zero of 25 put a
   price above the fold — we claim the hero). Scoped to .mp-hero-prices
   — do NOT relax the scope, or every tile price on the site turns white. */
.mp-hero-prices { margin: 4px 0 16px; font-size: 15.5px; line-height: 1.9; color: rgba(255, 255, 255, 0.9); }
.mp-hero-prices a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.mp-hero-prices a:hover { border-bottom-color: var(--orange); }
.mp-hero-prices .mp-from-price { color: rgba(255, 255, 255, 0.9); font-size: inherit; }
.mp-hero-prices .mp-from-price .woocommerce-Price-amount { color: var(--orange); font-weight: 700; }
.mp-hero-prices .mp-hero-prices__sep { opacity: 0.45; padding: 0 6px; }
@media (max-width: 767px) {
	.mp-hero-prices { font-size: 14.5px; line-height: 1.75; }
	.mp-hero-prices .mp-hero-prices__sep { display: none; }
	.mp-hero-prices .mp-hero-prices__item { display: block; }
}

/* ── Hero address checker — white card on the hero photo (prototype) ── */
.mp-hero-addr { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 16px 18px; max-width: 470px; box-sizing: border-box; }
.mp-hero-addr__title { font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 12.5px; color: var(--blue); margin: 0 0 10px; }
.mp-hero-addr__input { border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 15px; color: var(--ink); height: 44px; }
.mp-hero-addr__input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0, 51, 101, 0.18); outline: none; }
.mp-hero-addr__btn { background: var(--orange); color: var(--blue); border: none; border-radius: var(--radius-sm); height: 44px; padding: 0 18px; cursor: pointer; font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 13px; white-space: nowrap; }
.mp-hero-addr__btn:hover { background: var(--orange-hover); }
.mp-hero-addr .mp-addr__consent { font-size: 11.5px; color: var(--ink-2); margin: 10px 0 0; }

/* ── Material weight & coverage table ([mp_material_data]) ────────
   A reference table readable at a glance on a phone in a driveway. */
.mp-matdata { width: 100%; }
.mp-matdata table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.mp-matdata thead th {
	text-align: left;
	font-family: var(--font-headline);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-2);
	border-bottom: 2px solid var(--border);
	padding: 0 10px 9px 0;
	white-space: nowrap;
}
.mp-matdata tbody th,
.mp-matdata tbody td {
	text-align: left;
	font-weight: 400;
	padding: 11px 10px 11px 0;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
.mp-matdata tbody th a {
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
}
.mp-matdata tbody th a:hover { text-decoration: underline; }
.mp-matdata tbody tr:hover { background: rgba(0, 51, 101, 0.025); }
.mp-matdata__sub { color: var(--ink-2); font-size: 12.5px; }
.mp-matdata__note {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ink-2);
}
@media (max-width: 700px) {
	.mp-matdata { overflow-x: auto; }
	.mp-matdata table { min-width: 0; }
	.mp-matdata thead th:nth-child(4),
	.mp-matdata tbody td:nth-child(4) { display: none; }
}

/* ── Footer (blue main + red stripe, ported from the TB footer) ──── */
.mp-footer__main { background: var(--blue); padding: 48px var(--mp-gutter); }
.mp-footer__cols { display: flex; flex-wrap: wrap; column-gap: 36px; row-gap: 28px; }
.mp-footer__col { flex: 1 1 220px; min-width: 0; color: var(--white); font-size: 14px; line-height: 1.7em; }
.mp-footer__col p { color: var(--white); margin: 0 0 8px; }
.mp-footer__col a { color: var(--white); text-decoration: none; }
.mp-footer__col a:hover { opacity: 0.85; }
.mp-footer__brand img { width: 200px; height: auto; }
.mp-footer__tagline { font-family: var(--font-headline); font-weight: 700; font-style: italic; font-size: 17px; margin-top: 12px; }
/* Two classes (0,2,0): must outrank mp-header.css's .mp-panel-caps blue,
   which loads AFTER this file — single-class --onblue lost the cascade
   and the footer headings rendered navy-on-navy (visual pass 2026-07-29). */
.mp-footer__col .mp-panel-caps--onblue { color: var(--white); }
/* No panel-rhythm top margin in the footer: the headings are each
   column's first element, and the 30px pushed every text column 30px
   below the brand logo (divi5-sample has logo and headings level —
   owner report 2026-07-29). */
.mp-footer__col .mp-panel-caps { margin-top: 0; }
.mp-footer__pay { font-size: 23px; letter-spacing: 6px; }
.mp-footer__stripe {
	background: var(--red);
	color: var(--white);
	text-align: center;
	padding: 16px 0;
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: 14px;
}
@media (max-width: 767px) {
	.mp-footer__main { padding-top: 32px; padding-bottom: 32px; }
}

/* ── PDP layout (content-single-product.php) — full-width rows capped
      at the content token; buy column packs tight (owner fold trims). */
.mp-pdp__topbar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.mp-pdp__topbar .woocommerce-breadcrumb { font-size: 13px; color: var(--ink-2); margin: 0; }
.mp-pdp__topbar .woocommerce-breadcrumb a { color: var(--ink-2); text-decoration: none; }
.mp-pdp__topbar .woocommerce-breadcrumb a:hover { text-decoration: underline; }
.mp-pdp__cols { display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 24px; margin-top: 8px; }
.mp-pdp__gallery { flex: 1 1 45%; min-width: min(100%, 340px); position: relative; }
.mp-pdp__summary { flex: 1 1 50%; min-width: min(100%, 340px); display: flex; flex-direction: column; gap: 8px; }
.mp-pdp__summary > * { margin-top: 0; margin-bottom: 0; }
.mp-pdp__below { margin-top: 32px; }
.mp-pdp__below .related > h2, .mp-pdp__below .woocommerce-tabs { margin-top: 24px; }
/* Woo core floats div.images to 48% — inside our flex gallery column
   that HALVES the gallery (the owner's PDP round, 2026-07-29). The
   inner .woocommerce-product-gallery carries class "images", so core's
   (0,3,2) rule hits it; the __gallery prefix outranks at (0,4,2). */
.woocommerce div.product .mp-pdp__gallery div.images { width: 100%; float: none; margin-bottom: 0; }
/* CLS guard — the PDP's entire 0.0897 (measured 2026-08-13, 7-candidate bake-off).
   Woo runs flexslider with animation:'slide' and smoothHeight:true. Its
   setup() SYNCHRONOUSLY creates .flex-viewport (jquery.flexslider.js:834)
   but only pins that viewport's height ~100ms later, in the setTimeout
   scheduled at :869 -> smoothHeight :557. In that window the slides are not
   yet floated and stack inside a height:auto viewport, so the buy column
   below jumps down and back up. Both shifts land while the gallery is still
   opacity:0 (Woo reveals it at :198, 100ms after the pin) — invisible to a
   human, fully scored by the metric.
   Holding a 4:3 box on the viewport across that window closes it: the
   inline height JS writes afterwards simply overrides the aspect-ratio, so
   the handoff is a no-op. Measured, 3 runs each, deterministic to four
   decimals: 0.0897 -> 0.0005.

   ⚠ TWO EARLIER VERSIONS OF THIS RULE WERE INERT — do not resurrect that
   shape. Both keyed on :not(:has(.flex-active-slide)), which CANNOT EVER
   match: flexslider stamps .flex-active-slide at :908, in the SAME
   synchronous task that created the viewport at :834, with no paint
   between — the gap has zero duration. Adding !important didn't help
   because the premise, not the specificity, was wrong. Same for
   .flex-control-thumbs and a .flexslider class: built in that same task,
   and the latter is never added at all.
   ⚠ HALF A FIX IS WORSE THAN NONE HERE. Reserving only the pre-init stack
   (without this viewport cap) measured 0.4102 — a 4.6x REGRESSION — because
   it lifts the buy column into the viewport and turns off-screen unscored
   jank into on-screen scored jank. If you touch this, measure; do not
   reason.
   ⚠ Assumes the lead product image is 4:3 (site standard: 4:3 sources ship
   -600x450 intermediates). A non-4:3 featured image reopens the window.
   A 6-rule variant reaching exactly 0.0000 exists in the bake-off record —
   rejected deliberately: it hard-couples to the thumbnail grid's column
   count and gap below, and 0.0005 is not worth that maintenance edge. */
/* overflow:hidden makes OVERLAP structurally impossible when the lead
   image is not 4:3 (owner found five on 2026-08-17: 600x800 portraits and
   a 600x600 square rendering over the buy column). Worst case is now a
   brief 4:3 crop until the load-resize below grows the viewport to the
   slide's true height. 4:3 leads: byte-identical behavior. */
/* width:100% is LOAD-BEARING (owner bug 2026-08-17, five products):
   aspect-ratio is two-way — when flexslider writes its inline HEIGHT for
   a portrait/square lead, an auto-width viewport DERIVES width from the
   ratio (1574px tall became 2099px wide) and the gallery explodes over
   the buy column. Pinning width means the ratio can only ever compute
   the pre-init height (the CLS reservation), and the JS height handoff
   is a true no-op for every aspect. overflow:hidden stays as the belt. */
.mp-pdp__gallery .flex-viewport { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
/* Gallery thumbnails: flexslider's control strip as a tidy 4-across
   grid of SQUARE crops (the Divi gallery's look) instead of Woo's
   floated 25% list, which turns 11 mixed-aspect photos into rubble.
   Woo core sizes the li at (0,3,3) — the __gallery prefix outranks. */
/* div.images stays in the chain: Woo's own li rule is (0,4,3) — one
   element deeper than an __gallery-only prefix reaches (round-3 count). */
.woocommerce div.product .mp-pdp__gallery div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; padding: 0; float: none; }
.woocommerce div.product .mp-pdp__gallery div.images .flex-control-thumbs li { width: auto; float: none; margin: 0; padding: 0; list-style: none; }
.woocommerce div.product .mp-pdp__gallery div.images .flex-control-thumbs li img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; opacity: 0.85; }
.woocommerce div.product .mp-pdp__gallery div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product .mp-pdp__gallery div.images .flex-control-thumbs li img:hover { opacity: 1; }
/* Lightbox trigger over the main photo — Woo only ships its own when
   zoom is enabled (dropped in the 07-27 diet); the click forwards to
   the gallery image's PhotoSwipe binding (template-owned JS). */
.mp-gallery-zoom { position: absolute; top: 14px; right: 14px; z-index: 5; width: 36px; height: 36px; border-radius: 999px; background: var(--white); color: var(--ink-2); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); font-size: 15px; text-decoration: none; }
.mp-gallery-zoom:hover { color: var(--blue); }
/* Buy row: stepper → calculator link → ADD TO CART pushed to the right
   edge (the reference layout). Woo core floats the button, which put it
   LEFT of the stepper it follows in the DOM. ⚠ div.product.mp-pdp is a
   COMPOUND selector on purpose — both classes sit on the same element,
   so a descendant space between them silently never matches (round-2
   lesson). The install flag input and modal dialog inside form.cart are
   hidden and unaffected by the flex. */
.woocommerce div.product.mp-pdp form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.woocommerce div.product.mp-pdp form.cart div.quantity { float: none; margin: 0; }
.woocommerce div.product.mp-pdp form.cart .single_add_to_cart_button { float: none; margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════
   TEMPLATES & PAGES MILESTONE — archive/blog/search/account layouts +
   the block-pattern classes generated page content keys on. Sizes are
   the Divi build's literals (page_head 13/38/14.5, notes 13.5, links
   13) — measured parity is the acceptance test, so keep them exact.
   ══════════════════════════════════════════════════════════════════ */

/* ── Page furniture: crumb / intro / under-grid note / cross-links ── */
.mp-crumb { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
.mp-crumb a { color: var(--blue); text-decoration: none; }
.mp-crumb a:hover { text-decoration: underline; }
.mp-intro { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; max-width: 720px; }
.mp-intro p { color: var(--ink-2); margin: 0 0 8px; }
.mp-note { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; max-width: 860px; margin: 18px 0 0; }
.mp-note p { color: var(--ink-2); margin: 0 0 6px; }
.mp-links-line { font-size: 13px; color: var(--ink-2); margin: 14px 0 0; }

/* ── Archive layout: sticky filter rail (5/24) + grid column ──────── */
.mp-archive { display: flex; align-items: flex-start; column-gap: 28px; row-gap: 18px; margin-top: 10px; }
.mp-archive .mp-filter-rail { flex: 0 0 20.8%; min-width: 0; }
.mp-archive__main { flex: 1; min-width: 0; }
@media (max-width: 980px) {
	.mp-archive { display: block; }
	.mp-archive .mp-filter-rail { margin-bottom: 14px; }
}
.mp-shop-all-head { font-size: 28px; margin: 34px 0 14px; }
.mp-search-slot { margin: 6px 0 22px; }

/* ── Shop page category tiles (6-across) + more-category chips ────── */
.mp-shop-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 20px 0 0; }
.mp-shop-tile {
	display: block;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	text-decoration: none;
	padding-bottom: 12px;
	transition: box-shadow 0.15s, border-color 0.15s;
}
.mp-shop-tile:hover { border-color: var(--blue); box-shadow: var(--shadow-card); }
.mp-shop-tile img.mp-cat-thumb { border-radius: 0; }
.mp-shop-tile b { display: block; font-family: var(--font-headline); font-weight: 600; font-size: 16.5px; color: var(--ink); padding: 10px 12px 0; line-height: 1.25; }
.mp-shop-tile > span { display: block; font-size: 12.5px; color: var(--ink-2); padding: 3px 12px 0; }
.mp-cat-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; }
.mp-cat-chip {
	display: block;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 12px 16px 16px;
	text-decoration: none;
	transition: box-shadow 0.15s, border-color 0.15s;
}
.mp-cat-chip:hover { border-color: var(--blue); box-shadow: var(--shadow-card); }
.mp-cat-chip b { display: block; font-family: var(--font-headline); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.25; }
.mp-cat-chip > span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 3px; }
@media (max-width: 980px) {
	.mp-shop-tiles, .mp-cat-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ── Blog cards: index grid + single's Keep Reading row ───────────── */
.mp-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 10px 0 0; }
@media (max-width: 980px) { .mp-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 600px) { .mp-blog-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.mp-post-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: box-shadow 0.15s, border-color 0.15s;
}
.mp-post-card:hover { border-color: var(--blue); box-shadow: var(--shadow-card); }
.mp-post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mp-post-card__body { padding: 14px 16px 18px; }
.mp-post-card__title { font-size: 18px; margin: 0; line-height: 1.3; }
/* Card click rule: the title link stretches over the whole card. */
.mp-post-card__title a { color: var(--ink); text-decoration: none; }
.mp-post-card__title a::after { content: ""; position: absolute; inset: 0; }
/* Meta/body at 14px — measured off the reference blog grid (2026-07-29). */
.mp-post-card__meta { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; }
.mp-post-card__excerpt { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 8px 0 0; }
.mp-blog-pagination { margin: 26px 0 0; font-size: 14px; }
.mp-blog-pagination .page-numbers { display: inline-block; min-width: 34px; padding: 7px 10px; margin-right: 6px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--blue); text-decoration: none; }
.mp-blog-pagination .page-numbers.current { background: var(--blue); color: var(--white); border-color: var(--blue); }
.mp-blog-pagination .page-numbers:hover:not(.current) { border-color: var(--blue); }

/* ── Single post: READING article + sticky sidebar rail (owner spec
      2026-07-16; .mp-post-sidebar sticky lives in the rails rule) ──── */
/* Column split + type scale measured off the frozen reference
   (2026-07-29): article 944px / rail 386px at 1440, title 26px/600,
   content h2 26, h3 22, body 15px at 1.55. */
.mp-post-layout { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 48px; row-gap: 24px; }
.mp-post-layout__article { flex: 0 1 calc(66.667% - 16px); min-width: min(100%, 340px); }
.mp-post-layout__article > h1 { font-size: 26px; margin: 6px 0 10px; }
.mp-post-sidebar { flex: 0 1 calc(29.167% - 32px); min-width: min(100%, 280px); display: flex; flex-direction: column; gap: 16px; }
/* Featured image under the title — reference geometry: full article
   width, 16:9 crop, square corners (the Divi post-title placement). */
.mp-post-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin: 20px 0 14px; }
.mp-post-content { font-size: 15px; line-height: 1.55; }
.mp-post-content img { border-radius: var(--radius-md); }
.mp-post-content h2 { font-size: 26px; margin: 30px 0 10px; }
.mp-post-content h3 { font-size: 22px; margin: 22px 0 8px; }
.mp-toolcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.mp-toolcard b { display: block; font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 11px; color: var(--blue); margin-bottom: 8px; }
.mp-toolcard p { margin: 0; font-size: 13.5px; line-height: 2; }
.mp-quote-label { margin: 0; font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 11px; color: var(--blue); }
.mp-post-sidebar .mp-side-phone { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.mp-keep-reading h2 { font-size: 24px; margin: 0 0 14px; }

/* ── Blue CTA band (inset, rounded — the blue_banner pattern) ─────── */
.mp-banner-blue {
	background: var(--blue);
	border-radius: var(--radius-md);
	padding: 24px 28px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	column-gap: 24px;
	row-gap: 16px;
	margin-top: 32px;
}
.mp-banner-blue__left { flex: 1 1 55%; min-width: min(100%, 300px); }
.mp-banner-blue__right { flex: 0 1 auto; }
.mp-banner-blue p { color: var(--white); margin: 0 0 6px; }
.mp-banner-blue p:last-child { margin-bottom: 0; }
.mp-banner-blue .mp-banner-lead { font-size: 20px; line-height: 1.3; }
.mp-banner-blue .mp-banner-sub { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }

/* Standalone CTA link (the cta_button pattern — orange plate, BLUE caps
   text per the brand rule; distinct from .mp-btn-cta so Woo buttons and
   the header pill keep their own metrics). */
a.mp-cta-link {
	display: inline-block;
	background: var(--orange);
	color: var(--blue);
	border-radius: var(--radius-sm);
	padding: 13px 22px 11px;
	font-family: var(--font-headline);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}
a.mp-cta-link:hover { background: var(--orange-hover); color: var(--blue); }

/* Newsletter panel (blog index) */
.mp-panel-box--pad { padding: 20px 24px 24px; margin-top: 28px; }
.mp-panel-box--pad h2 { font-size: 18px; margin: 0; }
.mp-panel-box--pad p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 8px 0 0; }
.mp-placeholder-note { background: var(--white); border-radius: var(--radius-sm); padding: 14px; font-size: 12.5px; color: var(--ink-2); }

/* ── My Account skin — brand pass over Woo's classic account markup ── */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: flex; align-items: flex-start; column-gap: 28px; flex-wrap: wrap; }
.woocommerce-MyAccount-navigation { float: none; width: auto; flex: 0 0 230px; }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; flex: 1; min-width: min(100%, 340px); }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 11px 14px; font-size: 14px; color: var(--ink); text-decoration: none; border-left: 3px solid transparent; border-bottom: 1px solid var(--panel); }
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--panel); color: var(--blue); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--blue); font-weight: 700; border-left-color: var(--red); background: var(--panel); }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.woocommerce-account form.woocommerce-form-login, .woocommerce-account form.woocommerce-form-register { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 24px; max-width: 480px; }
@media (max-width: 980px) {
	.woocommerce-MyAccount-navigation { flex: 1 1 100%; margin-bottom: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   CONTENT PATTERNS — classes the generated block content keys on
   (imports/content/*). Bands, columns, cards, the homepage sections.
   Prose sizes are the Divi build's literals; parity is measured.
   ══════════════════════════════════════════════════════════════════ */

/* ── Color bands (full-bleed section variants) ─────────────────────── */
.mp-section--blue { background: var(--blue); }
.mp-section--red { background: var(--red); }
.mp-section--orange { background: var(--orange); }
.mp-section--blue h1, .mp-section--blue h2, .mp-section--blue h3,
.mp-section--red h1, .mp-section--red h2 { color: var(--white); }
.mp-section--blue p, .mp-section--red p { color: rgba(255, 255, 255, 0.9); }
.mp-section--blue a, .mp-section--red a { color: var(--white); }
.mp-section--orange h1, .mp-section--orange h2, .mp-section--orange h3 { color: var(--blue); }
.mp-section--orange p { color: var(--blue); }

/* ── Column rows (flexType reborn as 24th-based flex-basis classes) ── */
.mp-cols { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 32px; row-gap: 20px; }
.mp-cols--center { align-items: center; }
.mp-cols--between { justify-content: space-between; }
.mp-cols > .mp-col { flex: 1 1 0; min-width: min(100%, 300px); }
.mp-cols > .mp-col--half { flex-basis: 47%; }
.mp-cols > .mp-col--third, .mp-col--third { flex: 1 1 28%; min-width: min(100%, 240px); }
.mp-cols > .mp-col--8 { flex-basis: 30%; }
.mp-cols > .mp-col--9 { flex-basis: 34%; }
.mp-cols > .mp-col--10 { flex-basis: 38%; }
.mp-cols > .mp-col--11 { flex-basis: 42%; }
.mp-cols > .mp-col--13 { flex-basis: 51%; }
.mp-cols > .mp-col--14 { flex-basis: 55%; }
.mp-cols > .mp-col--15 { flex-basis: 59%; }
.mp-cols > .mp-col--16 { flex-basis: 63%; }
@media (max-width: 980px) {
	.mp-cols > [class*="mp-col--"] { flex-basis: 100%; }
}

/* ── Cards, grids, labels shared by generated pages ────────────────── */
.mp-bcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); }
div.mp-bcard, .mp-col.mp-bcard { padding: 16px 18px 18px; }
.mp-bcard--pad { padding: 20px 22px 22px; }
.mp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 14px 0 0; }
.mp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mp-grid-4--tiers { align-items: stretch; margin: 18px 0 14px; gap: 16px; }
@media (max-width: 980px) {
	.mp-grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.mp-grid-4, .mp-grid-4--tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.mp-grid-4, .mp-grid-4--tiers { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.mp-caps-label { font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 12.5px; color: var(--ink-2); margin: 0; }
.mp-tiny { font-size: 12px; color: var(--ink-2); }
.mp-small { font-size: 12.5px; color: var(--ink-2); }
.mp-center { text-align: center; }
.mp-answer { font-size: 15.5px; line-height: 1.65; }
.mp-policy-h { font-size: 20px; margin: 26px 0 8px; }
.mp-town-h2 { font-size: 22px; margin: 0 0 8px; }
.mp-fineprint-head { font-size: 17px; margin: 26px 0 6px; }
.mp-fineprint { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); max-width: 900px; padding-left: 18px; }
.mp-cta-link--ghost { background: transparent; color: var(--white); border: 2px solid var(--white); }
.mp-cta-link--ghost:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); }
/* Core-button mapping for the wp:button pattern variant */
.wp-block-button.mp-cta .wp-block-button__link { background: var(--orange); color: var(--blue); border-radius: var(--radius-sm); padding: 13px 22px 11px; font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 14px; text-decoration: none; }
.wp-block-button.mp-cta .wp-block-button__link:hover { background: var(--orange-hover); color: var(--blue); }
.wp-block-button.mp-cta--ghost .wp-block-button__link { background: transparent; color: var(--white); border: 2px solid var(--white); }

/* Fleet cards (Delivery Info — Cummin-style alternating rows) */
.mp-fleet-card { display: flex; flex-wrap: wrap; align-items: center; column-gap: 32px; row-gap: 20px; margin: 22px 0 0; }
.mp-fleet-card__photo, .mp-fleet-card__info { flex: 1 1 46%; min-width: min(100%, 320px); }
.mp-fleet-card__photo img { width: 100%; border-radius: var(--radius-md); display: block; }
.mp-fleet-card__info { padding: 18px 20px 20px; }

/* Scene cards (What to Expect) */
.mp-scene-card { overflow: hidden; padding: 0 !important; }
.mp-scene-card img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
.mp-scene-card__body { padding: 12px 16px 16px; }

/* Town cards (Areas We Serve) — card click rule via stretched link */
.mp-town-card { position: relative; }
.mp-town-card h2 a { color: var(--ink); text-decoration: none; }
.mp-town-card h2 a::after { content: ""; position: absolute; inset: 0; }
.mp-town-card:hover { border-color: var(--blue); box-shadow: var(--shadow-card); }

/* Town-page category chips (6-across variant) */
.mp-cat-chips--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 16px; }
.mp-cat-chip--town b { font-size: 14.5px; }
.mp-cat-chip--town span { font-size: 11.5px; }
@media (max-width: 980px) { .mp-cat-chips--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pro Club / Request a Quote headline scale (the owner-design port) */
.mp-club-h1 { font-size: clamp(38px, 5vw, 64px); margin: 6px 0 0; }
.mp-club-h1--quote { font-size: clamp(32px, 4vw, 50px); }
.mp-club-h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 6px; }
.mp-club-h2--sm { font-size: clamp(23px, 2.5vw, 30px); max-width: 720px; }
.mp-club-h2--navy { color: var(--blue) !important; font-size: clamp(28px, 3vw, 40px); }
.mp-club-lede { font-size: 17px; line-height: 1.6; max-width: 620px; }
.mp-club-sub { font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 760px; }
.mp-section--blue .mp-club-lede { color: rgba(255, 255, 255, 0.92); }
.mp-section--red .mp-club-lede { color: rgba(255, 255, 255, 0.95); margin-left: auto; margin-right: auto; max-width: 680px; }
.mp-club-onorange { color: var(--blue); font-size: 15.5px; opacity: 0.92; }
.mp-section--orange .mp-club-onorange { color: var(--blue); }
.mp-club-faq details { max-width: 820px; background: var(--white); border-bottom: 1px solid var(--border); padding: 16px 4px 4px; }
.mp-club-faq summary { font-family: var(--font-headline); font-weight: 700; font-size: 16.5px; color: var(--ink); cursor: pointer; padding-bottom: 12px; }
.mp-club-faq details p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 12px; }
.mp-quote-rail { display: flex; flex-direction: column; gap: 16px; }

/* Blue banner stacked variant (SkyMeasure price card) */
.mp-banner-blue--stack { display: block; }
.mp-banner-blue--stack p { margin: 8px 0 0; }

/* ── Services archive (the one custom category body) ───────────────── */
.mp-svc-tag { font-family: var(--font-headline); font-style: italic; font-size: 22px; color: var(--orange) !important; margin: 0 0 6px; }
.mp-svc-cards { margin-top: 22px; }
.mp-svc-card { position: relative; }
.mp-svc-card h2 { font-size: 17px; margin: 0; }
.mp-svc-card__rate { margin: 6px 0 0; }
.mp-svc-card__rate b { color: var(--red); font-size: 16px; }
.mp-svc-card__rate span { font-size: 12px; color: var(--ink-2); }
.mp-svc-card__blurb { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.mp-svc-card__links { font-size: 12.5px; margin: 8px 0 0; position: relative; z-index: 1; }
/* Card click rule: the primary CTA stretches over the card; the links
   row sits above the cover so Details stays independently clickable. */
.mp-svc-card__cover::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.mp-svc-card:hover { border-color: var(--blue); box-shadow: var(--shadow-card); }
.mp-svc-sky { display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; margin-top: 22px; padding: 0 !important; }
.mp-svc-sky__media { flex: 1 1 45%; min-width: min(100%, 320px); }
.mp-svc-sky__media img { width: 100%; display: block; }
.mp-svc-sky__body { flex: 1 1 50%; min-width: min(100%, 320px); padding: 24px 28px; }
.mp-svc-sky__body h2 { font-size: 24px; margin: 10px 0 0; }
.mp-svc-sky__price { margin: 8px 0 0; }
.mp-svc-sky__price b { font-size: 26px; }
.mp-svc-sky__price span { font-size: 13px; color: var(--ink-2); }
.mp-svc-sky__copy { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.mp-svc-foot { margin-top: 34px; }
.mp-svc-foot__head { font-size: 16.5px; margin: 0; }
.mp-svc-foot__copy { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.mp-svc-foot__link { font-size: 12.5px; margin: 6px 0 0; }

/* ── Named-community roster (HOA page) — grouped by town ─────────────── */
.mp-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; margin: 18px 0 0; }
.mp-roster__town h3 { font-size: 15px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.mp-roster__town h3 a { color: var(--blue); text-decoration: none; }
.mp-roster__town h3 a:hover { text-decoration: underline; }
.mp-roster__town ul { list-style: none; margin: 0; padding: 0; }
.mp-roster__town li { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
@media (max-width: 980px) { .mp-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mp-roster { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* ── HTML sitemap ([mp_classic_sitemap], owner-approved 2026-07-30) ── */
.mp-sitemap h2 { font-size: 24px; margin: 30px 0 10px; }
.mp-sitemap h3 { font-size: 17px; margin: 20px 0 6px; }
.mp-sitemap h3 a { color: var(--ink); text-decoration: none; }
.mp-sitemap h3 a:hover { color: var(--blue); }
.mp-sitemap__list { columns: 2; column-gap: 40px; list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.9; }
.mp-sitemap__list--posts { columns: 2; font-size: 13.5px; }
.mp-sitemap__list li { break-inside: avoid; }
.mp-sitemap__list ul { list-style: none; margin: 0 0 0 16px; padding: 0; }
.mp-sitemap__count { color: var(--ink-2); font-size: 12px; }
@media (max-width: 700px) { .mp-sitemap__list, .mp-sitemap__list--posts { columns: 1; } }

/* ── Homepage sections ─────────────────────────────────────────────── */
.mp-hero { position: relative; background: var(--blue); padding: 60px var(--mp-gutter); overflow: hidden; }
.mp-hero__media, .mp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-hero__img { object-fit: cover; object-position: center; }
.mp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 35, 71, 0.85) 0%, rgba(0, 35, 71, 0) 65%); pointer-events: none; }
.mp-hero__inner { position: relative; z-index: 1; }
.mp-hero__h1 { color: var(--white); font-size: 52px; max-width: 680px; margin: 0 0 10px; }
.mp-hero__tag { color: var(--orange); font-family: var(--font-headline); font-weight: 700; font-style: italic; font-size: 19px; max-width: 680px; margin: 0 0 8px; }
.mp-hero__proof { color: var(--white); font-size: 13.5px; margin: 14px 0 12px; }
.mp-hero__proof a { color: var(--white); }
.mp-hero .mp-hero-addr { margin-top: 8px; }
@media (max-width: 767px) {
	.mp-hero { padding-top: 32px; padding-bottom: 32px; }
	.mp-hero__h1 { font-size: 34px; }
}

.mp-section--promises { padding-top: 26px; padding-bottom: 26px; }
.mp-promises { display: flex; flex-wrap: wrap; column-gap: 48px; row-gap: 20px; max-width: 1080px; margin: 0 auto; }
.mp-promise { display: flex; align-items: center; gap: 13px; flex: 1 1 260px; }
.mp-promise h3 { font-size: 19px; color: var(--white); font-weight: 700; margin: 0; }
.mp-promise p { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); margin: 0; }

.mp-h2-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 14px; }
.mp-h2-row h2 { font-size: 32px; margin: 0; }
.mp-viewall { font-size: 13px; margin: 0; }
.mp-viewall a { color: var(--blue); text-decoration: none; font-weight: 700; }
.mp-shop-tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 980px) { .mp-shop-tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mp-stats { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 32px; row-gap: 24px; max-width: 1160px; margin: 0 auto; text-align: center; }
.mp-stat { flex: 1 1 200px; }
.mp-stat h3 { font-size: 40px; color: var(--blue); margin: 0; line-height: 1; }
.mp-stat__bar { margin: 8px 0; }
.mp-stat__bar span { display: inline-block; width: 40px; height: 3px; background: var(--red); }
.mp-stat__label { font-size: 12px; letter-spacing: var(--tracking-caps); color: var(--ink-2); margin: 0; }

.mp-grid-3--reviews { margin-top: 18px; }
.mp-area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; margin-top: 22px; }
@media (max-width: 980px) { .mp-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Beside-the-map variant (homepage, owner 2026-07-30): lives inside a
   half column, so 3 tracks + a tighter top margin. */
.mp-area-grid--side { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0; }
@media (max-width: 600px) { .mp-area-grid--side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Driver portal route cards (2026-07-30) — phone-first tap targets. */
.mp-driver-feed__day { margin-top: 26px; }
.mp-driver-feed__stop { margin-top: 14px; }
.mp-driver-feed__time { font-family: var(--font-headline); font-weight: 700; color: var(--blue); margin: 0 0 2px; }
.mp-driver-feed__title { margin: 0 0 8px; font-size: 18px; }
.mp-driver-feed__addr a { font-weight: 600; }
.mp-driver-feed__row { margin: 4px 0; font-size: 14px; }
.mp-driver-feed__refresh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; }
.mp-driver-feed__refresh-note { font-size: 13.5px; color: var(--ink-2); }
.mp-driver-feed__force { display: inline-block; padding: 10px 22px; border-radius: 999px; background: var(--orange); color: var(--ink); font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 12px; text-decoration: none; }
.mp-driver-feed__force:hover { background: var(--orange-hover); }
.mp-driver-feed__actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.mp-driver-feed__actions .button { display: inline-block; padding: 12px 18px; border-radius: var(--radius-sm); font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 12.5px; text-decoration: none; background: var(--panel); color: var(--blue); border: 1px solid var(--border); }
.mp-driver-feed__actions .button.alt { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.mp-driver-feed__actions .button.alt:hover { background: var(--orange-hover); }

/* ── Day view (owner 2026-07-30): time-true grid. Overlapping blocks are
   dispatcher vocabulary — "one truck, one route" — and block height IS
   the job's duration, so keep the geometry honest: no margins between
   columns beyond the 2px seam, no minimum widths. ─────────────────── */
.mp-view-toggle { display: flex; margin: 14px 0 4px; background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.mp-view-toggle button { flex: 1 1 50%; padding: 9px 0; border: 0; background: transparent; border-radius: 999px; font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 12px; color: var(--blue); cursor: pointer; }
.mp-view-toggle button.is-on { background: var(--blue); color: var(--white); }
.mp-driver-feed__dayview { display: none; }
.mp-driver-feed.is-day .mp-driver-feed__dayview { display: block; }
.mp-driver-feed.is-day .mp-driver-feed__agenda { display: none; }
.mp-dv__grid { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); margin-top: 10px; overflow: hidden; }
.mp-dv__hourline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
/* Top line's border doubles the grid's own 1px border — label only. */
.mp-dv__grid > .mp-dv__hourline:first-child { border-top: 0; }
.mp-dv__hourline span { position: absolute; top: 2px; left: 0; width: 48px; padding-right: 6px; text-align: right; font-size: 11px; color: var(--ink-2); line-height: 1; }
.mp-dv__canvas { position: absolute; top: 0; bottom: 0; left: 58px; right: 6px; }
.mp-dv__evt { position: absolute; display: block; text-align: left; background: var(--blue); color: var(--white); border: 1px solid var(--white); border-radius: 6px; padding: 3px 7px; overflow: hidden; cursor: pointer; font-family: inherit; }
.mp-dv__evt:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.mp-dv__evt-time { display: block; font-size: 10.5px; font-weight: 700; opacity: 0.85; }
.mp-dv__evt-title { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--white); }
.mp-dv__evt-load { display: block; font-size: 11px; opacity: 0.85; }
.mp-dv__allday { margin-top: 10px; display: grid; gap: 4px; }
.mp-dv__evt--allday { position: static; width: 100%; }
.mp-dv__now { position: absolute; left: 58px; right: 0; border-top: 2px solid #e53935; z-index: 5; pointer-events: none; }
.mp-dv__now::before { content: ''; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #e53935; }
.mp-dv__sheet { position: fixed; inset: 0; z-index: 120; }
.mp-dv__sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 26, 52, 0.45); }
.mp-dv__sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border-radius: 16px 16px 0 0; padding: 0 14px 28px; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); }
.mp-dv__sheet-panel .mp-driver-feed__stop { margin-top: 0; background: var(--white); }
.mp-dv__sheet-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 8px 0 6px; }
.mp-dv__sheet-close { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
/* iOS-safe scroll lock: overflow alone doesn't hold on iOS Safari — the
   JS pins the body fixed at its scroll offset and restores on close. */
body.mp-dv-lock { position: fixed; left: 0; right: 0; overflow: hidden; }
@media (min-width: 700px) { .mp-dv__sheet-panel { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 540px; border-radius: var(--radius-md); } }

/* ══════════════════════════════════════════════════════════════════
   DRIVER APP (page-driver-app.php, owner 2026-07-30) — bespoke mobile
   shell: sticky brand bar, route board, no site chrome. Everything
   scoped under body.mp-driver-app so the customer site is untouched.
   ══════════════════════════════════════════════════════════════════ */
body.mp-driver-app { background: var(--panel); }
/* 3px red bottom border = the site standard for a blue header band
   (same rule as the mobile header's compact band in mp-header.css). */
.mp-dapp-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 12px; background: var(--blue); padding: 10px 16px; border-bottom: 3px solid var(--red); box-shadow: 0 2px 10px rgba(0, 26, 52, 0.25); }
.mp-dapp-bar img { height: 30px; width: auto; display: block; }
.mp-dapp-bar__label { margin-left: auto; color: var(--white); font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 12px; }
.mp-dapp-main { max-width: 680px; margin: 0 auto; padding: 14px 14px 48px; }
.mp-driver-app .mp-driver-portal__hello { font-size: 13px; color: var(--ink-2); margin: 4px 0 10px; }
.mp-driver-app .mp-driver-feed__refresh { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.mp-driver-app .mp-driver-feed__day { font-size: 20px; margin: 22px 0 0; }
.mp-driver-app .mp-driver-feed__stop { background: var(--white); border-radius: var(--radius-md); }
.mp-driver-app .mp-driver-feed__title { font-size: 17px; }
.mp-driver-app .mp-driver-feed__addr a { display: inline-block; padding: 6px 0; }
.mp-driver-app .mp-driver-feed__actions .button { flex: 1 1 45%; text-align: center; padding: 14px 12px; }
.mp-driver-app .mp-dapp-backup { font-size: 12.5px; color: var(--ink-2); margin-top: 26px; }
.mp-driver-app .mp-driver-gate { max-width: 420px; margin: 18vh auto 0; text-align: center; background: var(--white); border-radius: var(--radius-md); padding: 28px 22px; }
@media (min-width: 700px) { .mp-driver-app .mp-driver-feed__actions .button { flex: 0 1 auto; padding: 12px 22px; } }

/* Address autocomplete dropdown (2026-07-30: our own list — the classic
   Google widget is unavailable to new Cloud customers). Anchored to the
   input's positioned parent by mp-address.js. */
.mp-ac { position: absolute; z-index: 60; margin: 0; padding: 4px 0; list-style: none; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 26, 52, 0.14); }
.mp-ac__item { padding: 9px 14px; font-size: 13.5px; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ac__item:hover, .mp-ac__item.is-active { background: var(--panel); color: var(--blue); }
/* Distance-from-yard chip: the "you may be far away" hint lives right in
   the suggestion list (owner 2026-07-30). */
.mp-ac__dist { float: right; margin-left: 14px; font-size: 11.5px; color: var(--ink-2); font-family: var(--font-headline); font-weight: 700; }

/* ── Delivery-check landing page (/delivery-check/, owner 2026-07-30) ── */
.mp-check { max-width: var(--mp-reading-max); margin: 0 auto; text-align: center; }
.mp-check__eyebrow { font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 12.5px; color: var(--red); margin: 0 0 6px; }
.mp-check__title { margin: 0 0 14px; }
.mp-check__addr { font-size: 15.5px; margin: 0 0 6px; }
.mp-check__speed { font-family: var(--font-headline); font-weight: 700; color: var(--blue); margin: 0 0 18px; }
.mp-check__lede { font-size: 16px; color: var(--ink-2); max-width: 640px; margin: 0 auto 18px; }
.mp-check__fees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0 14px; text-align: center; }
.mp-check__fee i { font-size: 22px; color: var(--red); }
.mp-check__fee b { display: block; font-family: var(--font-headline); font-weight: 700; font-size: 26px; color: var(--blue); margin: 6px 0 2px; }
.mp-check__fee h3 { margin: 0 0 6px; font-size: 16px; }
.mp-check__fee p { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.mp-check__note { font-size: 13.5px; color: var(--ink-2); max-width: 640px; margin: 0 auto 8px; }
.mp-check__cta { margin: 18px 0; }
.mp-check__cta .mp-btn-cta { display: inline-block; padding: 15px 34px; text-decoration: none; font-size: 15px; }
.mp-check__again { max-width: 560px; margin: 30px auto 0; padding-top: 20px; border-top: 1px solid var(--border); }
.mp-check__again-label { font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 12px; color: var(--ink-2); margin: 0 0 8px; }
@media (max-width: 760px) { .mp-check__fees { grid-template-columns: 1fr; } }

/* PDP badge (owner 2026-07-30: every badge shows on the PDP photo, upper
   left, same corner as the cards). One rule covers the curated badge AND
   the restyled sale flash — whichever one MP_Badge renders. */
.mp-pdp__gallery { position: relative; }
.mp-pdp__gallery .mp-badge { position: absolute; top: 12px; left: 12px; z-index: 5; pointer-events: none; }

/* Quote-only PDPs (owner 2026-07-30): Request a Quote replaces Add to Cart. */
.mp-quote-only { margin: 18px 0 8px; }
.mp-quote-only__note { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; max-width: 46ch; }
.mp-quote-only__btn { display: inline-block; }

/* Our Work — the owner's photo feed (2026-07-30). Single centered column
   of big shots; the images are plain wp:image blocks the owner manages in
   the editor, so all presentation lives here, none inline. */
.mp-work-feed { max-width: 900px; margin: 0 auto; display: grid; gap: 18px; }
.mp-work-feed .mp-work-photo { margin: 0; }
.mp-work-feed .mp-work-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }

/* ══════════════════════════════════════════════════════════════════
   HEADER (.mp-header) — hand-built partials in template-parts/header/.
   The panel/nav rules live in assets/css/mp-header.css so the header
   system stays one reviewable unit (markup + CSS + JS side by side).
   ══════════════════════════════════════════════════════════════════ */

/* ══ Gravity Forms brand skin (owner ask 2026-08-17: "not a standard-looking
   Gravity Form" — chips, tight rhythm, brand type; applies to EVERY GF form
   sitewide so the ops forms inherit it too) ══ */

.gform_wrapper.gform-theme { margin: 0; font-family: var(--font-body, inherit); }

/* Field rhythm — the stock theme's airy grid is the "too much white space" */
.gform_wrapper.gform-theme .gform_fields { grid-row-gap: 18px !important; }
.gform_wrapper.gform-theme .gfield { margin: 0; }

/* Labels: small-caps navy, the site's card-header voice */
.gform_wrapper.gform-theme .gfield_label,
.gform_wrapper.gform-theme legend.gfield_label {
	font-family: var(--font-headline); font-weight: 700; font-size: 12px;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue);
	margin-bottom: 6px; padding: 0;
}
.gform_wrapper.gform-theme .gfield_required_asterisk { color: var(--red); }
.gform_wrapper.gform-theme .gfield_description {
	font-size: 12.5px; color: var(--ink-2); padding: 4px 0 0;
}

/* Inputs */
.gform_wrapper.gform-theme input[type="text"],
.gform_wrapper.gform-theme input[type="email"],
.gform_wrapper.gform-theme input[type="tel"],
.gform_wrapper.gform-theme input[type="number"],
.gform_wrapper.gform-theme select,
.gform_wrapper.gform-theme textarea {
	border: 1px solid var(--border) !important; border-radius: var(--radius-sm, 6px) !important;
	background: var(--white) !important; color: var(--ink) !important;
	font-size: 14px !important; padding: 10px 12px !important; box-shadow: none !important;
}
.gform_wrapper.gform-theme input:focus,
.gform_wrapper.gform-theme select:focus,
.gform_wrapper.gform-theme textarea:focus {
	border-color: var(--blue) !important;
	box-shadow: 0 0 0 3px rgba(0, 51, 101, 0.14) !important; outline: none !important;
}
.gform_wrapper.gform-theme ::placeholder { color: var(--ink-2); opacity: 0.75; }
.gform_wrapper.gform-theme textarea { min-height: 96px; }

/* Choice groups → tappable chips (the blueprint's "chip option" intent) */
.gform_wrapper.gform-theme .gfield_radio,
.gform_wrapper.gform-theme .gfield_checkbox {
	display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px;
}
/* The asterisk legend is a wasted line — the "(Required)" label text is the
   one convention, everywhere (owner 2026-08-17) */
.gform_wrapper.gform-theme .gform_required_legend { display: none !important; }
.gform_wrapper.gform-theme .gfield_required {
	font-family: var(--font-headline); font-weight: 600; font-size: 10px;
	letter-spacing: 0.05em; text-transform: uppercase; color: var(--red); margin-left: 6px;
}
/* Multi-select chips ANNOUNCE they are multi: a + that becomes a check.
   Single-select (radio) chips stay plain pills. */
.gform_wrapper.gform-theme .gfield--type-checkbox .gchoice label::before {
	content: "+"; font-weight: 700; margin-right: 7px; opacity: 0.5;
}
.gform_wrapper.gform-theme .gfield--type-checkbox .gchoice .gfield-choice-input:checked + label::before {
	content: "✓"; opacity: 1;
}
.gform_wrapper.gform-theme .gchoice { position: relative; margin: 0 !important; }
.gform_wrapper.gform-theme .gchoice .gfield-choice-input {
	position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.gform_wrapper.gform-theme .gchoice label {
	display: inline-flex; align-items: center; margin: 0; cursor: pointer;
	padding: 9px 16px; border: 1.5px solid var(--border); border-radius: 999px;
	background: var(--white); color: var(--ink); font-size: 13.5px; line-height: 1.2;
	max-width: none; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.gform_wrapper.gform-theme .gchoice label:hover { border-color: var(--blue); }
.gform_wrapper.gform-theme .gchoice .gfield-choice-input:checked + label {
	background: var(--blue); border-color: var(--blue); color: var(--white); font-weight: 600;
}
.gform_wrapper.gform-theme .gchoice .gfield-choice-input:focus-visible + label {
	box-shadow: 0 0 0 3px rgba(0, 51, 101, 0.25);
}

/* Progress bar */
.gform_wrapper.gform-theme .gf_progressbar_wrapper { margin: 0 0 18px; }
.gform_wrapper.gform-theme .gf_progressbar_title {
	font-family: var(--font-headline); font-weight: 700; font-size: 11.5px;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px;
}
/* NO step indication of any kind (owner 2026-08-17: "Just don't say
   it. At all. Not once."). Page 1 reads as the whole form; page 2 is the
   surprise bonus round. Partial Entries locks page 1 at the click. */
.gform_wrapper.gform-theme .gf_progressbar_wrapper { display: none !important; }
.mp-quote-wizard_wrapper .gform_previous_button { display: none !important; }
.mp-more-title {
	font-family: var(--font-headline); font-weight: 600; font-size: 20px;
	color: var(--blue); margin: 0 0 4px;
}
.mp-more-sub { font-size: 13px; color: var(--ink-2); margin: 0 0 6px; }

/* Buttons: Next/Submit solid navy, Previous ghost */
.gform_wrapper.gform-theme .gform_next_button,
.gform_wrapper.gform-theme .gform_button,
.gform_wrapper.gform-theme .gform-theme-button {
	background: var(--blue) !important; color: var(--white) !important;
	font-family: var(--font-headline) !important; font-weight: 700 !important;
	font-size: 13px !important; letter-spacing: 0.06em; text-transform: uppercase;
	border: 0 !important; border-radius: var(--radius-sm, 6px) !important;
	padding: 12px 24px !important; cursor: pointer;
}
.gform_wrapper.gform-theme .gform_next_button:hover,
.gform_wrapper.gform-theme .gform_button:hover { background: var(--blue-hover) !important; }
.gform_wrapper.gform-theme .gform_previous_button {
	background: transparent !important; color: var(--blue) !important;
	border: 1.5px solid var(--border) !important;
}
.gform_wrapper.gform-theme .gform_previous_button:hover { border-color: var(--blue) !important; }
.gform_wrapper.gform-theme .gform_page_footer,
.gform_wrapper.gform-theme .gform_footer {
	margin: 20px 0 0; padding: 0; border: 0; display: flex; gap: 10px;
}

/* Validation: quiet, red, no alarm boxes */
.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .validation_message {
	background: none !important; border: 0 !important; padding: 5px 0 0 !important;
	font-size: 12.5px !important; color: var(--red) !important;
}
.gform_wrapper.gform-theme .gfield_error input,
.gform_wrapper.gform-theme .gfield_error textarea { border-color: var(--red) !important; }
.gform_wrapper.gform-theme .gform_validation_errors {
	background: var(--panel) !important; border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm, 6px) !important; box-shadow: none !important; padding: 12px 14px !important;
}
.gform_wrapper.gform-theme .gform_validation_errors h2 { font-size: 13.5px !important; color: var(--red) !important; }

/* Uploads: compact drop targets */
.gform_wrapper.gform-theme .gfield--type-fileupload .ginput_container_fileupload input[type="file"] {
	border: 1.5px dashed var(--border); border-radius: var(--radius-sm, 6px);
	background: #FAFBFC; padding: 14px 12px; width: 100%; font-size: 13px; color: var(--ink-2);
}

/* Confirmation */
.gform_confirmation_message {
	border: 1px solid var(--border); border-left: 4px solid var(--blue);
	border-radius: var(--radius-sm, 6px); background: var(--white);
	padding: 18px 20px; font-size: 14.5px; line-height: 1.6;
}

/* Blog signup: one tight row inside the panel box */
.mp-panel-box .gform_wrapper.gform-theme { margin-top: 12px; }
.mp-panel-box .gform_wrapper.gform-theme input { padding: 9px 11px !important; }
.mp-panel-box .gform_wrapper.gform-theme .gform_footer { margin: 10px 0 0; }

@media (max-width: 640px) {
	.gform_wrapper.gform-theme .gform_page_footer,
	.gform_wrapper.gform-theme .gform_footer { flex-direction: column; }
	.gform_wrapper.gform-theme .gform_next_button,
	.gform_wrapper.gform-theme .gform_previous_button,
	.gform_wrapper.gform-theme .gform_button { width: 100%; }
}