/*
 Theme Name:   GeneratePress Child - Mobility America
 Template:     generatepress
 Version:      1.0
 Description:  Mobility America child theme — elderly-first design system
*/

/* CSS CUSTOM PROPERTIES — change colors here for the whole site */
:root {
    --color-primary: #23272E;
    --color-secondary: #A31B24;
    --color-cta: #C4222B;
    --color-text: #16283B;
    --color-bg: #FAF9F6;
    --color-bg-warm: #F3F0E9; /* 2026-07-25: warm cream, was cool mist #F1F4F8 — see note below */
    --color-white: #FAF9F6;
    --color-border: #DCE5EE;
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --color-bronze-light: #E0A45C;
    --color-bg-light: #FAF9F6;
    --color-ink: #23272E;
    --color-hero-bg: #FAF9F6;
    --v5-ink: #23272E;
    --v5-ink-deep: #16181D;
    --v5-sky: #F3F0E9;
    --v5-sky-text: #C9D8E6;
    --v5-slate: #4A5560;
    --v5-gold: #F5B942;
    --v5-citrus: #C4222B;
    --v5-citrus-deep: #A31B24;
    --font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --v6-paper: #F3F0E9;
    --v6-rust: #35506B;
    --v6-rust-line: rgba(22, 40, 59, 0.14);
    --v7-mist: #F3F0E9; /* warm-unified 2026-07-25 (all 4 tint tokens now cream, not cool mist) */
    --v7-radius: 10px;
    --v7-steel: #2633C5;
    --v8-blue: #2633C5;
    --v8-blue-deep: #1B2489;
    --v8-red: #C4222B;
    --v8-red-deep: #A31B24;
    --v8-charcoal: #23272E;
    --v8-chalk: #FAF9F6;
    /* Three tiers (display / feature / section); every clamp minimum is at or below today's mobile size */
    --ma-fs-display: clamp(44px, 4.7vw, 68px);
    --ma-fs-feature: clamp(32px, 3.3vw, 48px);
    --ma-fs-section: clamp(28px, 2.6vw, 38px);
    /* h1 sits between feature and section. At 1440 this lands ~58px (up from 52); at 390 the clamp floor holds it at today's 38 so no phone page grows. */
    --ma-fs-h1: clamp(38px, 4vw, 58px);
    /* ⚠️ The minimum is the load-bearing number: the phone page must not grow */
    --ma-sec-y:       clamp(40px, 6.5vw, 112px);  /* between chapters */
    --ma-sec-y-tight: clamp(28px, 3.5vw, 56px);   /* within one chapter */
    --ma-field: var(--v7-mist); /* #F3F0E9 */
}

/* rem base 20px: every rem in this file assumes it (GP sizes body text in px) */
html {
    font-size: 20px;
    scroll-behavior: smooth;
}

/* TYPOGRAPHY — NON-NEGOTIABLE (brief: 20px min, 28px+ headings) */
body {
    font-size: 20px;
    line-height: 1.6;
    background: var(--color-bg);
    /* Hero side padding max(64px, 50vw - 540px) centres a 1080px column at any width */
    overflow-x: clip; /* every page now has a 100vw hero band */
    /* Background texture: a near-invisible dot grid on the canvas only, never behind text */
    background-image: radial-gradient(circle, rgba(22, 40, 59, 0.035) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Enforce near-black on white — zero grey-on-white text */
p, li, td, th, label, span, blockquote {
    color: inherit;
}

h1 { font-size: 2.6rem; }    /* ~52px */
h2 { font-size: 2.1rem; }    /* ~42px */
h3 { font-size: 1.75rem; }   /* ~35px */
h4 { font-size: 1.4rem; }    /* 28px — brief minimum */
h5 { font-size: 1.25rem; }
h6 { font-size: 1.1rem; }

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

/* GeneratePress sets explicit line-heights on certain elements that
   bypass body inheritance. These rules override those explicitly. */
p,
li,
td,
th,
label,
blockquote,
.wp-block-paragraph,
.entry-content p,
.entry-content li {
    line-height: 1.6;
}

/* GeneratePress sets .main-title (site name in header) to 1.2em.
   Override to meet the brief's non-negotiable minimum. */
.main-title {
    line-height: 1.3;
    white-space: nowrap;
}

a {
    color: var(--color-primary);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
a:hover {
    color: #0F2440;
}

/* GP sets .content-area to 70% from the global sidebar setting; .ma-no-sidebar (functions.php body_class) undoes it */
.ma-no-sidebar .content-area {
    width: 100% !important;
}

/* Hide GP's page title where .ma-page-hero is the h1 (no duplicate h1); pages only, not posts */
body.page.ma-no-sidebar .entry-header {
    display: none;
}

/* Utility bar: printed on generate_before_header, outside GP's header flex; sticks at top:0, #masthead at 40px */
.ma-utility-bar {
    position: sticky;
    top: 0;
    z-index: 1001;
    will-change: transform;
}

.ma-utility-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.ma-utility-phone {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

/* WP admin bar is position:fixed at top:0. .admin-bar is a WP-native
   body class. Offset both sticky elements so they clear the admin bar. */
.admin-bar .ma-utility-bar { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .ma-utility-bar { top: 46px; }
}

/* STICKY HEADER — sticks directly below .ma-utility-bar (~40px). */
#masthead {
    position: sticky;
    z-index: 1000;
    background: var(--color-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    border-top: 3px solid var(--v8-red, #C4222B);
    border-bottom: 3px solid var(--v8-red, #C4222B);
}

/* NAVIGATION */
.main-navigation {
    background: var(--color-bg);
}

.main-navigation .main-nav ul li a {
    font-weight: 600;
    padding: 14px 16px;
    position: relative;
    letter-spacing: 0.01em;
    color: var(--v5-ink);
    font-size: 19px;
}

/* Nav hover: JS wraps the label in two stacked copies that roll; !important only on the fallback colour (GP's
   inline :hover rule ties our specificity) */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus-visible,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--color-secondary) !important;
}

.ma-roll {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    line-height: 1.25;
}

.ma-roll__a,
.ma-roll__b {
    display: block;
    transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Must match the nav's resting colour or the label shifts shade when JS wraps it */
.ma-roll__a { color: var(--v5-ink); }

.ma-roll__b {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-secondary);
    transform: translateY(102%);
}

/* Keyboard focus rolls at every pointer type. */
.main-navigation .main-nav ul li a:focus-visible .ma-roll__a,
.main-navigation .main-nav ul li.current-menu-item > a .ma-roll__a {
    transform: translateY(-102%);
}
.main-navigation .main-nav ul li a:focus-visible .ma-roll__b,
.main-navigation .main-nav ul li.current-menu-item > a .ma-roll__b {
    transform: translateY(0);
}

/* Real pointers only, so a tap on iOS can't latch the rolled state */
@media (hover: hover) and (pointer: fine) {
    .main-navigation .main-nav ul li a:hover .ma-roll__a {
        transform: translateY(-102%);
    }
    .main-navigation .main-nav ul li a:hover .ma-roll__b {
        transform: translateY(0);
    }
}

/* BUTTONS — NON-NEGOTIABLE SIZING (50px desktop / 56px mobile) */
.wp-block-button__link,
.wp-block-button__link:visited,
.wp-element-button {
    min-height: 50px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    text-decoration: none !important;
    background: var(--color-primary);
    color: var(--color-white) !important;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(27, 58, 92, 0.14);
}

.wp-block-button__link:hover {
    background: #0F2440;
    color: var(--color-white) !important;
}

/* Orange CTA button — phone call, primary conversion action */
.ma-btn-call .wp-block-button__link {
    font-size: 1.1rem;
    padding: 14px 44px;
    min-height: 56px;
    border: 2px solid transparent;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(201, 76, 26, 0.35);
}

.ma-btn-call .wp-block-button__link:hover {
    box-shadow: 0 6px 20px rgba(201, 76, 26, 0.50);
    transform: translateY(-1px);
}

/* HOMEPAGE — TRUST STRIP */
.ma-trust-strip {
    background: var(--color-bg-warm) !important;
    padding: 20px 24px !important;
    border-top: 3px solid var(--color-secondary);
    border-bottom: 1px solid var(--color-border);
}

.ma-trust-strip p {
    font-size: 20px;
    color: var(--color-text);
    text-align: center;
    margin: 0;
    line-height: 1.8;
}

/* HOMEPAGE — CALL CTA STRIP */
.ma-call-strip {
    /* 64px (was 96): sibling bands are 48-56px */
    padding: 64px 24px !important;
    text-align: center;
}

.ma-call-strip h2 {
    margin-bottom: 12px;
}

.ma-call-strip p {
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto 32px;
}

.ma-call-strip .ma-address-note {
    font-size: 20px !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

/* ══ CONTENT PAGE TEMPLATE — reuse these classes ══ */

/* Standard content section — white background */
.ma-content-section {
    padding: 80px 24px !important;
    background: var(--color-bg) !important;
}

/* Alternating section — warm off-white, use on every other section */
.ma-content-section--alt {
    background: var(--color-bg-warm) !important;
}

.ma-content-section h2 {
    color: var(--color-primary);
}

.ma-content-section h3 {
    color: var(--color-text);
    margin-top: 32px;
    margin-bottom: 10px;
}

/* Certification badges grid */
.ma-cert-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
    padding: 0;
    list-style: none;
}

.ma-cert-item {
    border: 2px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 28px;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-primary);
    text-align: center;
    min-width: 200px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(27, 58, 92, 0.07);
}

/* Mobile adjustments for content pages */
@media (max-width: 768px) {

    .ma-content-section {
        padding: 56px 20px !important;
    }

    .ma-cert-item {
        min-width: 140px;
        padding: 14px 18px;
        font-size: 20px;
    }
}

.site-info a:hover {
    color: #FFE08A;
}

/* MOBILE — max 768px */
@media (max-width: 768px) {

    body {
        font-size: 20px; /* Maintain non-negotiable minimum on all screens */
    }

    /* Mobile tap targets — non-negotiable 56px minimum */
    .wp-block-button__link,
    .wp-element-button {
        min-height: 56px;
        padding: 14px 28px;
        width: 100%;
        max-width: 420px;
        font-size: 1.05rem;
    }

    .ma-btn-call .wp-block-button__link {
        min-height: 60px;
        font-size: 1.1rem;
    }

    .ma-call-strip {
        padding: 68px 20px !important;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    h3 { font-size: 1.45rem; }
    h4 { font-size: 1.25rem; }
}

/* EQUIPMENT CATEGORY GRID (Mobility Equipment page) */

/* Page 7: lift GP's 780px content-size cap so the 3-column grid fits */
body.page-id-7 .ma-content-section .wp-block-group__inner-container {
    max-width: none !important;
    width: 100% !important;
}

/* Gutenberg forces flex-wrap:nowrap, squashing columns to one character per line */
.ma-eq-grid {
    flex-wrap: wrap !important;
    gap: 24px !important;
}

.ma-eq-grid > .wp-block-column {
    flex-basis: calc(33.333% - 16px) !important;
    flex-shrink: 0;
    min-width: 280px;
}

@media (max-width: 900px) {
    .ma-eq-grid > .wp-block-column {
        flex-basis: calc(50% - 12px) !important;
    }
}

@media (max-width: 560px) {
    .ma-eq-grid > .wp-block-column {
        flex-basis: 100% !important;
    }
}/* ── No-returns notice (Pre-Owned product pages) ── */
.ma-no-returns {
    background: #fef9c3;
    border-left: 4px solid #ca8a04;
    border-radius: 0 6px 6px 0;
    padding: 14px 18px;
    font-size: 18px;
    color: #713f12;
    margin-bottom: 20px;
    line-height: 1.5;
}
.ma-no-returns a { color: #713f12; font-weight: 700; }

/* ── Condition grade + warranty badges (Pre-Owned single product pages) ── */
.ma-grade-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 4px 0 20px;
}
.ma-grade-badge,
.ma-warranty-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    padding: 8px 18px;
    border-radius: 999px;
}
.ma-grade-badge--certified-pre-owned { background: #eaf6ef; color: #14532d; border: 2px solid #1e7a46; }
.ma-grade-badge--good-condition      { background: #eef3f9; color: #1B3A5C; border: 2px solid #1B3A5C; }
.ma-grade-badge--parts-repair        { background: #fef9c3; color: #713f12; border: 2px solid #ca8a04; }
.ma-warranty-badge                   { background: #1e7a46; color: #FAF9F6; }
/* 30-day tier (Good Condition grade) — echoes that grade badge's own navy
   accent color, so each grade's warranty badge visually pairs with it. */
.ma-warranty-badge--30day             { background: #1B3A5C; color: #FAF9F6; }
.ma-warranty-badge svg { flex-shrink: 0; }

/* ── 404 page helpful-links row ── */
.ma-404-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

/* ── Grade attribute badge on product pages ── */
.woocommerce div.product .woocommerce-product-attributes tr:first-child th,
.woocommerce div.product .woocommerce-product-attributes tr:first-child td {
    font-weight: 700;
}

/* ══ WOOCOMMERCE OVERRIDES ══ */

/* ── Product grid (category/shop pages) ── */
.woocommerce ul.products li.product {
    text-align: left;
    /* Tighten card padding so image bleeds to card edge */
    padding: 0 0 20px !important;
    overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--color-text);
    padding: 0;
}

.woocommerce ul.products li.product .price {
    margin-bottom: 16px;
}

.woocommerce ul.products li.product .button {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    min-height: 50px;
    font-size: 20px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 8px;
    border: none;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

.woocommerce ul.products li.product .button:hover {
    background: #0F2440 !important;
    color: var(--color-white) !important;
}

/* ── Single product page ── */
.woocommerce div.product .product_title {
    font-size: 2.0rem !important;
    color: var(--color-primary);
    line-height: 1.3;
    margin-bottom: 16px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.75rem !important;
    color: var(--color-primary) !important;
    font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Quantity field */
.woocommerce div.product form.cart .qty {
    font-size: 20px;
    height: 50px;
    padding: 8px 12px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
}

/* Add to Cart — orange CTA, larger than regular buttons */
.woocommerce div.product .single_add_to_cart_button {
    background: var(--color-cta) !important;
    color: var(--color-white) !important;
    min-height: 56px;
    font-size: 20px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 8px;
    padding: 14px 40px;
    border: none;
    text-transform: none !important;
    letter-spacing: 0;
    transition: background 0.15s;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(201, 76, 26, 0.30);
}

.woocommerce div.product .single_add_to_cart_button:hover {
    background: #A33D14 !important;
}

/* Product meta (SKU, categories) */
.woocommerce div.product .product_meta {
    font-size: 20px;
    color: #555;
    margin-top: 16px;
}

/* ── Cart page ── */
.woocommerce-cart table.cart td {
    font-size: 20px;
    vertical-align: middle;
}

.woocommerce-cart table.cart th {
    font-size: 20px;
    font-weight: 700;
}

.woocommerce-cart .cart_totals h2 {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    font-size: 20px;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: var(--color-cta) !important;
    color: var(--color-white) !important;
    min-height: 56px;
    font-size: 20px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 14px 32px;
    transition: background 0.15s;
    box-shadow: 0 4px 12px rgba(201, 76, 26, 0.30);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: #A33D14 !important;
}

/* ── Checkout page ── */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-order-review h3,
.woocommerce-checkout h3 {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.woocommerce form .form-row label {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: var(--color-text);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    font-size: 20px;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    width: 100%;
    font-family: inherit;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--color-primary);
    outline: none;
}

.woocommerce-checkout #payment .payment_methods label {
    font-size: 20px;
}

.woocommerce-checkout #payment div.payment_box {
    font-size: 20px;
}

.woocommerce-checkout #place_order {
    background: var(--color-cta) !important;
    color: var(--color-white) !important;
    min-height: 56px;
    font-size: 20px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 8px;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: 0 4px 12px rgba(201, 76, 26, 0.30);
}

.woocommerce-checkout #place_order:hover {
    background: #A33D14 !important;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error li {
    font-size: 20px;
}

/* VAN LISTING CPT — archive grid + single listing page */

/* Inner containers for PHP templates (not Gutenberg constrained layout) */
.ma-van-archive-inner,
.ma-van-single-inner,
.ma-van-strip-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}
.ma-van-strip-inner {
    max-width: 700px;
    text-align: center;
}

/* ── Archive grid ─────────────────────────────────── */
.ma-van-archive-inner { padding: 48px 24px; }

.ma-van-grid {
    display: grid;
    /* auto-fit/minmax: 3-up on desktop down to 1 column; card markup is ma_render_van_card() */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
}

/* Van card */
.ma-van-card {
    display: flex;
    flex-direction: column;
}

.ma-van-card__photo-wrap {
    display: block;
    overflow: hidden;
    background: var(--color-bg-warm);
}

.ma-van-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.ma-van-card:hover .ma-van-card__photo {
    transform: scale(1.03);
}

/* Placeholder shown when no Featured Image is set */
.ma-van-card__no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.ma-van-card__no-photo-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ma-van-card__no-photo-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: center;
}

.ma-van-card__body {
    padding: 24px 26px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ma-van-card__title {
    font-size: 1.4rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    color: var(--color-text) !important;
}

.ma-van-card__title a {
    color: var(--color-text);
    text-decoration: none;
}

.ma-van-card__title a:hover { color: var(--color-primary); }

.ma-van-card__tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.ma-van-tag {
    border-radius: 999px;
    text-transform: uppercase;
}

.ma-van-card__price {
    margin: 4px 0 0;
}

.ma-van-card__cta {
    /* One solid CTA per card; 50/56px tap target */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 20px;
    background: var(--color-cta);
    color: #FAF9F6;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none !important;
}

.ma-van-card__cta:hover,
.ma-van-card__cta:focus-visible {
    background: var(--v5-citrus-deep);
    color: #FAF9F6;
}
@media (max-width: 768px) {
    .ma-van-card__cta { min-height: 56px; }
}

.ma-van-empty {
    font-size: 1.1rem;
    color: #555;
    padding: 20px 0;
}

/* ── Single listing ───────────────────────────────── */
.ma-van-single-inner { padding: 48px 24px; }

/* Photo gallery — responsive columns */
.ma-van-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}

.ma-van-gallery__item {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-warm);
    box-shadow: 0 2px 8px rgba(27, 58, 92, 0.07);
}

.ma-van-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.ma-van-gallery__item:hover .ma-van-gallery__img { transform: scale(1.04); }

/* CTA buttons row */
.ma-van-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

/* Standalone button — usable in PHP templates outside Gutenberg block context */
.ma-btn-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 14px 36px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: 8px;
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1.3;
}

.ma-btn-plain--call {
    background: var(--color-cta);
    color: #FAF9F6 !important;
    box-shadow: 0 4px 12px rgba(201,76,26,0.35);
}

.ma-btn-plain--call:hover {
    background: #a03515;
    color: #FAF9F6 !important;
    box-shadow: 0 6px 20px rgba(201,76,26,0.50);
    transform: translateY(-1px);
}

.ma-btn-plain--schedule {
    background: var(--color-primary);
    color: #FAF9F6 !important;
}

.ma-btn-plain--schedule:hover {
    background: #0F2440;
    color: #FAF9F6 !important;
}

/* Back link strip */
.ma-van-back-strip {
    padding: 20px 24px !important;
}

.ma-van-back-link {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.ma-van-back-link:hover { color: var(--color-cta); }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .ma-van-grid { grid-template-columns: 1fr; }
    .ma-van-gallery { grid-template-columns: 1fr; }
    .ma-van-ctas { flex-direction: column; }
    .ma-btn-plain { width: 100%; }
}

@media (max-width: 480px) {
    .ma-van-archive-inner,
    .ma-van-single-inner { padding: 32px 16px; }
}

/* ── WooCommerce mobile ── */
@media (max-width: 768px) {
    .woocommerce div.product .single_add_to_cart_button,
    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
    .woocommerce-checkout #place_order {
        min-height: 60px;
        width: 100%;
        font-size: 20px;
    }

    .woocommerce ul.products li.product .button {
        min-height: 56px;
    }

    .woocommerce div.product .product_title {
        font-size: 1.7rem !important;
    }
}

/* ── Van Financing — Payment Estimator ───────────────────────────────────── */
.ma-est-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}
.ma-est-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ma-est-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
}
.ma-est-input {
    font-size: 20px;
    padding: 13px 16px;
    border: 2px solid #bbb;
    border-radius: 4px;
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}
.ma-est-input:focus {
    outline: 3px solid var(--color-cta);
    outline-offset: 1px;
    border-color: var(--color-cta);
}
.ma-est-btn {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 12px 32px;
    background: var(--color-cta);
    color: var(--color-white);
    font-size: 20px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 28px;
    line-height: 1.4;
}
.ma-est-btn:hover { background: #a83c12; }
.ma-est-result {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 6px;
    padding: 36px 32px;
    text-align: center;
}
.ma-est-monthly-label {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
    opacity: 0.85;
}
.ma-est-monthly {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 28px;
}
.ma-est-breakdown {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 0 0 28px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.25);
    padding-top: 24px;
}
.ma-est-stat { font-size: 20px; line-height: 1.5; }
.ma-est-stat strong {
    display: block;
    font-size: 26px;
    font-weight: 700;
    margin-top: 4px;
}
.ma-est-disclaimer {
    font-size: 20px;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.20);
    padding-top: 20px;
}
@media (max-width: 600px) {
    .ma-est-grid { grid-template-columns: 1fr; }
    .ma-est-monthly { font-size: 44px; }
    .ma-est-btn { min-height: 56px; }
    .ma-est-breakdown { flex-direction: column; gap: 16px; }
    .ma-est-result { padding: 28px 20px; }
}

/* BUG FIXES — Stage 1 */

/* VAN GALLERY PLACEHOLDER (single listing, no photos) */
.ma-van-gallery__placeholder {
    background: linear-gradient(160deg, #1B3A5C 0%, #2A4D70 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ma-van-gallery__placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 0 24px;
}

.ma-van-gallery__placeholder-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

/* BUG FIXES — Stage 1 */

/* Hide GP's "Home" h1 above the hero */
body.home .entry-header {
    display: none;
}

/* Bug 2: Prevent "Mobility America Online" from wrapping to multiple lines
   in the sticky header when nav links compete for horizontal space. */
.site-branding {
    flex-shrink: 0;
}

/* Width alone isn't enough: flexbox still reserves the sidebar's space, so hide it */
.ma-no-sidebar .widget-area.is-right-sidebar,
.ma-no-sidebar .widget-area.is-left-sidebar {
    display: none !important;
}

/* Top padding only: the side padding feeds GP's alignfull -40px math */
body.home .inside-article {
    padding-top: 0 !important;
}

/* Scroll reveal: js/animations.js adds .in-view via IntersectionObserver */
.ma-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.ma-animate.in-view {
    opacity: 1;
    transform: none;
}

/* Stagger siblings so cards cascade in one by one */
.ma-animate:nth-child(2) { transition-delay: 0.09s; }
.ma-animate:nth-child(3) { transition-delay: 0.18s; }
.ma-animate:nth-child(4) { transition-delay: 0.27s; }
.ma-animate:nth-child(5) { transition-delay: 0.36s; }
.ma-animate:nth-child(n+6) { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
    .ma-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ══ MODERN DESIGN OVERHAUL (2026-06-29) ══ */

/* ── Refined header brand name ─────────────────────────────── */
.main-title a {
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--color-primary) !important;
    transition: color 0.2s ease;
    /* Creates a recognizable brand element without a separate image file. */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

.main-title a:hover {
    color: var(--color-secondary) !important;
}

/* Make the header more compact — GP default is quite tall */
.inside-header.grid-container {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* ── Content section h2 accent decoration ────────────────── */
/* Adds a short bronze line below section headings — gives
   that "deliberately designed" look without needing photos. */
.ma-content-section .wp-block-heading,
.ma-content-section h2 {
    padding-bottom: 16px;
    margin-bottom: 28px;
    position: relative;
}

.ma-content-section .wp-block-heading::after,
.ma-content-section h2::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 2px;
}

/* Centered sections: center the accent too */
.ma-page-hero .wp-block-heading::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ── Styled list items in content sections ──────────────── */
/* Browser-default bullets look like a Word doc.
   Replace with bronze checkmarks. */
.ma-content-section ul:not([class]),
.ma-content-section .wp-block-list:not([class]) {
    list-style: none !important;
    padding-left: 0 !important;
}

.ma-content-section ul:not([class]) > li,
.ma-content-section .wp-block-list:not([class]) > li {
    position: relative;
    padding: 10px 0 10px 36px;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.55;
}

.ma-content-section ul:not([class]) > li:last-child,
.ma-content-section .wp-block-list:not([class]) > li:last-child {
    border-bottom: none;
}

.ma-content-section ul:not([class]) > li::before,
.ma-content-section .wp-block-list:not([class]) > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20%2C6%209%2C17%204%2C12'/%3E%3C/svg%3E");
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* ── WooCommerce product image — consistent aspect ratio ── */
/* Ensures all product cards have the same image height
   whether a photo or placeholder is shown. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img {
    object-fit: cover;
    width: 100%;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
    margin-left: 18px;
    margin-right: 18px;
}

/* ── WooCommerce "Call to Order" button (equipment loop) ── */
.woocommerce ul.products li.product .button.ma-catalog-call {
    background: var(--color-cta) !important;
    color: var(--color-white) !important;
    box-shadow: 0 3px 10px rgba(201, 76, 26, 0.30) !important;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
    /* Keep "Call to Order" on one line */
    white-space: nowrap;
}

.woocommerce ul.products li.product .button.ma-catalog-call:hover {
    background: #A33D14 !important;
    box-shadow: 0 5px 16px rgba(201, 76, 26, 0.42) !important;
    transform: translateY(-1px);
}

/* ── Single product "Call to Order" CTA block ──────────── */
.ma-product-call-cta {
    margin: 28px 0 8px;
    padding: 24px;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.ma-product-call-note {
    font-size: 20px;
    color: #555;
    margin: 0 0 20px !important;
    line-height: 1.55;
}

/* "Request Information" outline button */
.ma-btn-plain--info {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary);
}

.ma-btn-plain--info:hover {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* Readable line length for plain text inside sections */
/* Card grids are excluded: they aren't prose (the 780px clamp held the van archive at 2 columns) */
.ma-content-section > *:not(.wp-block-columns):not(.ma-cert-grid):not(.wp-block-buttons):not(.ma-blog-archive-inner):not(.ma-van-archive-inner) {
    max-width: 780px;
}

/* ── Smooth link underlines everywhere ──────────────────── */
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 0 4px rgba(184, 123, 50, 0.12) !important;
}

/* ── Trust strip refinement ─────────────────────────────── */
.ma-trust-strip p {
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ── Utility bar — slightly taller and more readable ─────── */
.ma-utility-bar-inner {
    padding: 11px 40px;
}

.ma-utility-phone {
    font-size: 13px;
    letter-spacing: 0.03em;
}

/* ── Header nav link refinement ─────────────────────────── */

/* ── Call strip button pulse ────────────────────────────── */
@keyframes ma-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(201, 76, 26, 0.35); }
    50%       { box-shadow: 0 4px 22px rgba(201, 76, 26, 0.58); }
}

.ma-call-strip .ma-btn-call .wp-block-button__link {
    animation: ma-pulse 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ma-call-strip .ma-btn-call .wp-block-button__link {
        animation: none;
    }
}

/* ── Mobile: full-width Call to Order ───────────────────── */
@media (max-width: 768px) {
    .woocommerce ul.products li.product .button.ma-catalog-call {
        margin-left: 18px;
        margin-right: 18px;
        width: calc(100% - 36px);
    }
}

/* DESIGN PASS 3 — Marc's Mobility parity: trust bar, logo mark,
   mobile float CTA, card polish */

/* ── Utility bar: trust items (replaces location text) ────── */

.ma-utility-trust {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}

.ma-utility-trust-item {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.ma-utility-trust-item strong {
    font-weight: 700;
}

/* Pipe divider between trust items */
.ma-utility-sep {
    display: inline-block;
    width: 1px;
    height: 13px;
    margin: 0 14px;
    flex-shrink: 0;
}

/* On medium screens, drop the last two credentials to avoid overflow */
@media (max-width: 1100px) {
    .ma-utility-trust .ma-utility-trust-item:nth-child(n+6),
    .ma-utility-trust .ma-utility-sep:nth-child(n+5) {
        display: none;
    }
}

/* On small screens, hide credentials entirely — phone number centered */
@media (max-width: 768px) {
    .ma-utility-trust {
        display: none;
    }
    .ma-utility-bar-inner {
        justify-content: center;
    }
}

/* ── Logo mark — "MA" monogram badge before the site name ─── */

.main-title a::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FAF9F6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    transition: background 0.2s ease;
}

/* ── WC product cards — consistent title height, larger price ─ */
/* Titles clamp to 2 lines so cards match height */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.4 * 20px); /* 2 lines × line-height × font-size */
}

/* The mobile "Call Now" pill was retired 2026-09-05; phones use .ma-callbar */

/* ── WooCommerce breadcrumbs ───────────────────────────────── */
.woocommerce .woocommerce-breadcrumb {
    padding: 14px 0 0;
    margin-bottom: 4px !important;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* ── Nav: cleaner active/hover state ────────────────────────── */
/* Superseded by the pill-fill ::before at the top of the NAVIGATION
   section — hover now fills a chip, not a background tint. */

/* BUG FIXES — 2026-06-29 */

.woocommerce ul.products li.product .button {
    width: calc(100% - 36px) !important;
    margin: 0 18px !important;
    box-sizing: border-box;
}

/* Hide default WC taxonomy description and GP archive title on category pages —
   the hero banner above already shows the name + description. */
.tax-product_cat .term-description,
.tax-product_cat .woocommerce-products-header,
.tax-product_cat .page-header,
.tax-product_cat .entry-header {
    display: none !important;
}

/* ── WC result count + sort controls ─────────────────────── */

/* Result count: navy, semi-bold, with a bronze-accented bottom rule
   that acts as a visual separator between header area and product grid. */
.woocommerce-result-count {
    font-family: inherit;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    font-style: normal !important;
    margin: 28px 0 24px !important;
    padding-bottom: 20px !important;
    border-bottom: 2px solid var(--color-border);
    display: block !important;
    width: 100%;
    letter-spacing: 0.01em;
}

/* Homepage: close the gap between header and hero (GP inline padding) */
body.home .content-area {
    padding-top: 0 !important;
}
body.home .entry-content > .wp-block-columns:first-of-type,
body.home .entry-content > .alignfull:first-of-type {
    margin-top: 0 !important;
}

/* WC PRODUCT GRID — improved layout now that pages are full-width */

/* With the sidebar fix, cards are now ~295px wide instead of ~170px.
   Ensure the product image section has proper proportions. */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    overflow: hidden;
}

/* Product card: price, hairline, then the CTA */

.woocommerce ul.products li.product .price {
    font-size: 1.7rem !important;    /* 34px — dominates the card */
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    color: var(--color-primary) !important;
    display: block !important;
    /* Position: 8px below title, flush with 18px card-body indent */
    margin: 8px 18px 0 18px !important;
    /* Bronze left accent + bottom rule separator */
    padding: 0 0 16px 12px !important;
    border-bottom: 1px solid var(--color-border);
}

/* Button: 16px gap below the separator, before the orange pill */
.woocommerce ul.products li.product .button.ma-catalog-call,
.woocommerce ul.products li.product .button.add_to_cart_button {
    margin-top: 16px !important;
}

/* Product title margin from top of card body */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin-top: 16px;
    margin-bottom: 4px;
}

/* VAN CARD — small refinements */

/* Title in van card: add bronze accent line (matches van single page) */
.ma-van-card__title a::after {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--color-secondary);
    border-radius: 1px;
    margin-top: 6px;
}

/* ══ TYPOGRAPHY: Lora display on hero headlines only ══ */

/* Content page + WC category hero h1s —
   serif but upright: page titles are functional/navigational */
.ma-page-hero h1,
.ma-page-hero .wp-block-heading[class*="h1"],
.ma-page-hero h1.wp-block-heading {
    font-family: var(--font-display);
    font-style: normal;
}

/* Content section h2s get Lora upright — fixes the flat "Conversion System Service" look.
   Not italic: these are informational/structural headings, not emotional copy. */
.ma-content-section h2,
.ma-content-section .wp-block-heading {
    font-family: var(--font-display);
    font-style: normal;
}

/* ══ BLOG POSTS ══ */
.single-post .entry-header {
    margin-left: -40px;
    margin-right: -40px;
}

.single-post .entry-meta {
    font-size: 20px;
    margin: 0;
}

.single-post .entry-meta a {
    text-decoration: none;
}

/* Bronze accent bar below the blog hero, matching .ma-page-hero pattern */
.single-post .entry-header::after {
    content: '';
    display: block;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 2px;
}

/* Breathing room between hero and first paragraph */
.single-post .entry-content {
    padding-top: 64px;
}

/* Scoped to .single-post: a bare .entry-content h2 also matches page content */
.single-post .entry-content h2 {
    color: var(--color-primary);
}

.single-post .entry-content h3 {
    color: var(--color-primary);
}

/* Mobile blog hero */
@media (max-width: 768px) {
    .single-post .entry-header {
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* ══ WHY (dark) + PROCESS (cream) SECTIONS ══ */

.ma-process-eyebrow {
    display: block;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 16px;
}

.ma-process-heading {
    color: var(--color-primary);
    text-align: center;
    margin: 0 0 72px;
    line-height: 1.2;
}

/* ── Responsive breakpoints ──────────────────────────────────── */
@media (max-width: 768px) {
    .ma-process-heading {
        margin-bottom: 48px;
    }
}

/* ══ 404 PAGE ══ */
.error404 .entry-header {
    background: linear-gradient(160deg, #1B3A5C, #0D2035);
    padding: 90px 64px 80px;
    margin-left: -40px;
    margin-right: -40px;
    width: calc(100% + 80px);
    box-sizing: border-box;
    text-align: center;
}

.error404 .entry-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    color: #F0EBE3;
    font-size: 2.6rem;
    line-height: 1.25;
    margin: 0 auto 12px;
}

.error404 .entry-header::after {
    content: '';
    display: block;
    width: 52px;
    height: 3px;
    background: var(--color-secondary);
    margin: 24px auto 0;
    border-radius: 2px;
}

.error404 .entry-content {
    padding-top: 56px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .error404 .entry-header {
        padding: 64px 20px 56px;
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
    }
    .error404 .entry-title {
        font-size: 1.9rem;
    }
}

/* ══ MODERN POLISH LAYER (2026-07-02) — all motion off under reduced-motion ══ */

.wp-block-button__link:hover,
.wp-element-button:hover,
.ma-btn-plain:hover,
.ma-catalog-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -10px rgba(15, 34, 53, 0.5);
}

/* Superseded by the nav hover rule above */

/* ── 8. Card lift unified across grids ──────────────────────── */
.woocommerce ul.products li.product,
.ma-van-card {
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ── 9. Smooth in-page scrolling + visible focus ring ───────── */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.ma-btn-plain:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ── Reduced motion: switch the whole layer off ─────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .wp-block-button__link,
    .wp-element-button,
    .ma-btn-plain,
    .ma-catalog-call,
    .ma-roll__a,
    .ma-roll__b,
    .ma-utility-bar,
    #masthead,
    .woocommerce ul.products li.product,
    .ma-van-card {
        transition: none !important;
    }
}

/* ── 10. WooCommerce "Sale!" flash joins the palette ─────────
   Default olive-green clashed with the navy/bronze system. */
.woocommerce span.onsale {
    font-weight: 700;
    /* Sale badge: citrus-deep (was bronze) */
    background: var(--v5-citrus-deep) !important;
    color: #FAF9F6 !important;
}

/* ══ HOMEPAGE PROOF SECTIONS (2026-07-02) ══ */

/* ── Featured vans ("Current Inventory") ─────────────────────── */
.ma-featured-vans {
    padding: 100px 64px;
    width: calc(100% + 80px);
    margin-left: -40px;
    margin-right: -40px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border);
}
.ma-featured-vans-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.ma-featured-vans .ma-process-heading {
    margin-bottom: 56px;
}
.ma-featured-vans-more {
    text-align: center;
    margin: 44px 0 0;
}

/* ── Brand strip ("Brands you can trust") ────────────────────── */
.ma-brand-strip {
    padding: 44px 64px;
    width: calc(100% + 80px);
    margin-left: -40px;
    margin-right: -40px;
    box-sizing: border-box;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.ma-brand-strip-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 20px;
}
.ma-brand-strip-label {
    text-transform: uppercase;
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 6px;
}/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ma-featured-vans {
        padding: 72px 20px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
    }
    .ma-brand-strip {
        padding: 40px 20px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* ══ CINEMATIC PASS v3.2 — full-bleed hero ══ */

/* Hero bleeds to the viewport with calc(50% - 50vw); overflow-x:clip on body stops scrollbar overflow */
body.home { overflow-x: clip; }
body.home .entry-content {
    margin-top: 0 !important;
    /* Chapter hairline with a CSS counter numeral (no markup; the hidden eyebrows stay hidden). The `/ ""` alt text keeps screen readers from announcing "01"; keep both content lines */
    counter-reset: ma-chapter;
}
body.home .site-main { margin-top: 0 !important; }
/* ⚠️ !important needed: GP's inline .entry-content .alignfull (0,3,1) re-imposes its -40px breakout */
body.home .entry-content .ma-call-strip.wp-block-group,
body.home .entry-content .ma-featured-vans,
body.home .entry-content .ma-brand-strip {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.ma-cinema-inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
}

/* --- Hero typography --- */
.ma-cinema-eyebrow {
    font-size: 20px;
    text-transform: uppercase;
    margin: 0 0 28px;
}
.ma-cinema-line { display: block; }
.ma-cinema-rule {
    margin: 0 0 34px;
    transform-origin: left center;
}
.ma-cinema-sub {
    font-size: 22px;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 0 44px;
}

@keyframes maCinemaRise {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes maCinemaRule {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

/* --- Homepage section type scale-up: editorial confidence.
       Floors stay untouched; these push key headlines UP. --- */
.ma-process-heading,
.ma-call-strip h2 {
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    letter-spacing: -0.01em;
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .ma-cinema-sub {
        font-size: 20px;
    }
}

/* ══ CINEMATIC PASS v3.3 — page-hero variant ══ */
body.post-type-archive-van_listing,
body.single-van_listing {
    overflow-x: clip;
}
/* hero sits flush under the sticky header, same as the homepage */
body.post-type-archive-van_listing .site-main,
body.single-van_listing .site-main {
    margin-top: 0 !important;
}

.ma-cinema-page-hero {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 calc(50% - 50vw);
    box-sizing: border-box;
    padding: clamp(72px, 10vh, 110px) 64px clamp(56px, 8vh, 88px);
    background:
        radial-gradient(ellipse 900px 600px at 24% 12%, rgba(184, 123, 50, 0.16), transparent 60%),
        linear-gradient(160deg, #24476D 0%, #1B3A5C 46%, #0D2035 100%);
    overflow: hidden;
}
.ma-cinema-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.ma-cinema-page-hero .ma-cinema-inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
}
.ma-cinema-page-hero h1 {
    font-family: var(--font-display);
    color: #FAF9F6;
    margin: 0 0 26px;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}
.ma-cinema-page-hero h1 em {
    font-style: italic;
    color: var(--color-bronze-light);
}
.ma-cinema-page-hero .ma-cinema-sub {
    margin-bottom: 0;
}

/* Load reveal: extend the homepage hero's animation scope */
@media (prefers-reduced-motion: no-preference) {
    .ma-cinema-page-hero .ma-reveal {
        animation: maCinemaRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .ma-cinema-page-hero .ma-reveal-1 { animation-delay: 0.05s; }
    .ma-cinema-page-hero .ma-reveal-2 { animation-delay: 0.18s; }
    .ma-cinema-page-hero .ma-reveal-3 { animation-delay: 0.31s; }
    .ma-cinema-page-hero .ma-reveal-4 { animation-delay: 0.44s; }
    .ma-cinema-page-hero .ma-cinema-rule { animation-name: maCinemaRule; }
}

@media (max-width: 768px) {
    .ma-cinema-page-hero {
        padding: 56px 24px 48px;
    }
}

.ma-page-hero {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    box-sizing: border-box;
    padding: clamp(72px, 10vh, 110px) max(64px, calc(50vw - 540px)) clamp(56px, 8vh, 88px) !important;
    overflow: hidden;
    text-align: left;
    /* .ma-page-hero, light retail treatment (overrides the cinematic block) */
    border-bottom: 1px solid var(--color-border);
}
.ma-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    display: none; /* no grain overlay */
}
/* Neutralise WP constrained-layout sizing and 404.php's inline centred divs */
.ma-page-hero > * {
    position: relative;
    z-index: 1;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}
.ma-page-hero h1,
.ma-page-hero h1.wp-block-heading {
    font-style: normal;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-align: left !important;
    margin: 0 0 26px;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}
/* bronze rule lives on the h1 so no markup change is needed */
.ma-page-hero h1::after {
    content: "";
    width: 84px;
    margin: 26px 0 0;
    transform-origin: left center;
    /* Content-page hero underline (was gold, then rust): gone — plain ink title on white reads like a store, not a template. */
    display: none !important;
}
.ma-page-hero p {
    font-size: 22px;
    line-height: 1.6;
    text-align: left !important;
    max-width: 620px !important;
    margin: 0 !important;
}

/* Flush under the sticky header, hero pages only (:has()) */
body:has(.ma-page-hero) .site-main,
body:has(.ma-page-hero) .entry-content {
    margin-top: 0 !important;
}
/* GP's inline .inside-article padding: top only, the sides feed alignfull math */
body:has(.ma-page-hero) .inside-article {
    padding-top: 0 !important;
}
body.error404 .site-main {
    margin-top: 0 !important;
}

/* --- Blog single: entry-header joins the system, keeps italic --- */
.single-post .entry-header {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 calc(50% - 50vw);
    box-sizing: border-box;
    padding: clamp(72px, 10vh, 110px) max(64px, calc(50vw - 540px)) clamp(56px, 8vh, 88px);
    overflow: hidden;
    text-align: left;
}
/* grain on ::before — ::after is the existing bronze bar */
.single-post .entry-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    display: none;
}
.single-post .entry-title {
    font-weight: 700;
    font-size: clamp(2.1rem, 3.6vw, 2.9rem);
    line-height: 1.15;
    text-align: left;
    margin: 0 0 20px;
    max-width: 900px;
    position: relative;
    z-index: 1;
}
.single-post .entry-meta {
    position: relative;
    z-index: 1;
}
.single-post .entry-header::after {
    margin: 28px 0 0; /* bronze bar left-aligned to match the system */
    width: 84px;
    position: relative;
    z-index: 1;
}
body.single-post .inside-article {
    padding-top: 0 !important;
}
body.single-post .site-main {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .ma-page-hero {
        padding: 56px 24px 48px !important;
    }
    .ma-page-hero p {
        font-size: 20px;
    }
    .single-post .entry-header {
        padding: 56px 24px 48px;
    }
    .single-post .entry-title {
        font-size: clamp(1.6rem, 7.5vw, 2rem);
    }
}

/* ══ SITEWIDE COMPLETION PASS v3.6 ══ */

/* ── 1. Blog index ─────────────────────────────────────────── */
body.blog .site-main {
    margin-top: 0 !important; /* hero lives inside the template, flush under header */
}
.ma-blog-archive-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 56px 24px 72px;
}
.ma-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.ma-blog-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ma-blog-card__photo-wrap { display: block; }
.ma-blog-card__photo {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.ma-blog-card__body {
    padding: 30px 32px 34px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.ma-blog-card__date {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}
.ma-blog-card__title {
    line-height: 1.22;
    margin: 0;
}
.ma-blog-card__title a {
    color: var(--color-primary);
    text-decoration: none;
}
.ma-blog-card__title a:hover { color: var(--color-cta); }
.ma-blog-card__excerpt {
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}
.ma-blog-card__cta {
    margin-top: auto;
    padding-top: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.ma-blog-card__cta:hover { color: var(--color-cta); }
.ma-blog-empty {
    font-size: 20px;
    padding: 20px 0;
}
/* pagination (inactive until >10 posts, styled now so it lands on-brand) */
.blog .ma-blog-archive-inner .page-numbers {
    display: inline-block;
    margin: 24px 6px 0 0;
    border: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    text-align: center;
    border-radius: 12px !important;
}
.blog .ma-blog-archive-inner .page-numbers.current {
    background: var(--color-primary);
    color: #FAF9F6;
    border-color: var(--color-primary);
}

/* ── 2. Search results ─────────────────────────────────────── */
/* hero (emitted via hook) replaces GP's default archive title */
.search .site-main .page-header { display: none !important; }
/* an unbroken pasted search term must wrap rather than overflow the hero */
.ma-cinema-page-hero h1 .ma-search-term {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Fixed 2-column grid: auto-fit/minmax overflows narrow screens */
.search .site-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 24px 64px;
}
.search .site-main article {
    background: #FAF9F6;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden; /* clips the reordered photo to the card's own radius */
    box-shadow: 0 2px 12px rgba(27, 58, 92, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.search .site-main article:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(27, 58, 92, 0.14);
}
/* `order` moves the photo above the title without a template override */
.search .site-main article .inside-article {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0; /* GP's 30px inset boxed the photo inside the card; header and summary pad themselves */
}
.search .site-main article .post-image {
    order: -1;
    margin: 0;
}
/* Catalogue shots are white-background cut-outs of varying height: a fixed-height cover crop showed a random slice of seat and tiller, so the box is a fixed ratio and the shot fits inside it, like the shop cards */
.search .site-main article .post-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border);
}
/* Pages, posts and vans carry real photographs, which fill the box */
.search .site-main article:not(.type-product) .post-image img {
    object-fit: cover;
    padding: 0;
}
.search .site-main article .entry-header {
    padding: 16px 20px 0;
}
.search .site-main article .entry-title {
    font-size: 1.4rem; /* 28px — the headings-≥28px floor, not lower */
    line-height: 1.25;
    margin: 0;
}
.search .site-main article .entry-title a {
    color: var(--color-primary);
    text-decoration: none;
}
.search .site-main article .entry-title a:hover { color: var(--color-cta); }
.search .site-main article .entry-summary,
.search .site-main article .entry-content {
    padding: 8px 20px 20px;
    margin-top: 0; /* GP adds a 2em top margin here, which opened a gap under the title */
    flex: 1;
}
.search .site-main article .entry-summary p,
.search .site-main article .entry-content p {
    font-size: 20px; /* the body-text-≥20px floor, not lower */
    margin: 0;
    /* Backstop clamp: pages render full content, not an excerpt */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search .site-main article .read-more {
    font-weight: 700;
    color: var(--color-primary);
}

/* ── 3. /shop/ archive — hero handles the title; tidy the meta row ── */
.post-type-archive-product .woocommerce-products-header { display: none !important; }
.post-type-archive-product .woocommerce-result-count {
    font-size: 20px;
    color: var(--color-text);
}

/* WC notices (added-to-cart etc.) — recolor from WC green/blue to brand */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--color-secondary) !important;
    background: #FAF9F6;
    color: var(--color-text);
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: #8A5C20 !important;
}
.woocommerce-message .button,
.woocommerce-info .button {
    background: var(--color-primary);
    color: #FAF9F6;
}

/* ── 4. Single product — lower half joins the design system ── */
.woocommerce div.product .product_title {
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* Sale badge: park it inside the image corner instead of straddling
   the breadcrumb (WC default offsets it -0.5em above the gallery) */
.woocommerce span.onsale {
    top: 14px !important;
    left: 14px !important;
    margin: 0 !important;
    z-index: 9;
}
/* tabs: strip WC's grey folder-tab chrome, use underline tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0 !important;
    margin: 0 0 30px !important;
    border-bottom: 2px solid var(--color-border);
    overflow: visible;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    display: none !important; /* WC's full-width grey border line */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important; /* WC's rounded-corner pseudo elements */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 14px 22px;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary) !important;
    position: relative;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -2px;
    height: 3px;
    background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
    background: var(--color-secondary);
}
/* panel + related-products headings: same voice as content sections */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-of-type,
.woocommerce .related.products > h2,
.woocommerce .up-sells.products > h2 {
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--color-primary);
    letter-spacing: -0.01em;
    margin-bottom: 20px;
    font-family: inherit !important;
}
.woocommerce .related.products > h2::after,
.woocommerce .up-sells.products > h2::after {
    content: "";
    display: block;
    width: 84px;
    height: 3px;
    background: var(--color-secondary);
    margin-top: 16px;
}
/* additional-information attribute table */
.woocommerce table.woocommerce-product-attributes {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td {
    padding: 14px 20px;
    font-size: 20px;
    border-style: none;
}
.woocommerce table.woocommerce-product-attributes th {
    background: var(--color-bg-warm);
    color: var(--color-primary);
}
.woocommerce table.woocommerce-product-attributes tr + tr th,
.woocommerce table.woocommerce-product-attributes tr + tr td {
    border-top: 1px solid var(--color-border);
}

/* ── 5. Cart + checkout — WC blocks in the design system ───── */
/* Cart/checkout have no hero, so their title opts back in (same specificity, later wins) */
body.page.woocommerce-cart .entry-header,
body.page.woocommerce-checkout .entry-header {
    display: block;
}
.woocommerce-cart .entry-header .entry-title,
.woocommerce-checkout .entry-header .entry-title {
    font-weight: 700;
    font-size: clamp(2.2rem, 3.4vw, 2.9rem);
    letter-spacing: -0.015em;
    color: var(--color-primary);
    margin: 8px 0 6px;
}
.woocommerce-cart .entry-header .entry-title::after,
.woocommerce-checkout .entry-header .entry-title::after {
    content: "";
    display: block;
    width: 84px;
    height: 3px;
    background: var(--color-secondary);
    margin-top: 18px;
}
/* order summary prices must never wrap mid-number (the sidebar keeps
   WC's own 35/65 split — widening it past 35% wraps the flex layout) */
.wc-block-components-product-price,
.wc-block-formatted-money-amount {
    white-space: nowrap;
}
/* block buttons join the sitewide pill system (56px = mobile tap target,
   also satisfies the 50px desktop minimum) */
.wc-block-components-button:not(.wc-block-components-button--text) {
    min-height: 56px;
    font-weight: 700;
    font-size: 20px;
}

/* ── 6. Footer quick links ─────────────────────────────────── */
/* Pages ending in the dark call strip meet the links band with no white slice */
body:has(.ma-call-strip) .site-main {
    margin-bottom: 0 !important;
}
body:has(.ma-call-strip) .entry-content {
    margin-bottom: 0 !important;
}
body:has(.ma-call-strip) .inside-article {
    padding-bottom: 0 !important;
}
/* WC breadcrumb: high-contrast slate + underlined links (axe) */
.woocommerce .woocommerce-breadcrumb {
    color: #4A5A68;
    font-size: 20px;
}
.woocommerce .woocommerce-breadcrumb a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--color-cta);
}

/* ── v3.6 mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ma-blog-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .ma-blog-archive-inner {
        padding: 40px 20px 56px;
    }
    .ma-blog-card__body {
        padding: 26px 24px 30px;
    }
    .search .site-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 12px 14px;
    }
    .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        width: 100%;
    }
}

/* ══ V4 RETAIL REDESIGN — overrides by specificity, not !important ══ */

/* .ma-store-header: light, breadcrumb-first header for store templates (ma_emit_store_header) */
.ma-store-header {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 calc(50% - 50vw);
    box-sizing: border-box;
    padding: 40px max(64px, calc(50vw - 540px)) 32px;
    text-align: left;
}
.ma-store-breadcrumb {
    font-size: 17px;
    margin: 0 0 14px;
}
/* Bold brand-blue crumbs so they read as links */
.ma-store-breadcrumb a {
    font-weight: 700;
    text-decoration: underline;
}
.ma-store-breadcrumb a:hover,
.ma-store-breadcrumb a:focus-visible {
    color: var(--v8-blue-deep);
}
.ma-store-eyebrow {
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 12px !important;
}
.ma-store-header h1 {
    font-style: normal;
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 10px;
}
.ma-store-header p.ma-store-sub {
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-ink);
    max-width: 640px;
    margin: 8px 0 0;
}
body:has(.ma-store-header) .site-main,
body:has(.ma-store-header) .entry-content {
    margin-top: 0 !important;
}
body:has(.ma-store-header) .inside-article {
    padding-top: 0 !important;
}
@media (max-width: 768px) {
    .ma-store-header {
        padding: 28px 24px 24px;
    }
    .ma-store-header h1 {
        font-size: clamp(1.5rem, 7vw, 1.9rem);
    }
}

.ma-page-hero h1,
.ma-page-hero h1.wp-block-heading {
    font-weight: 800;
    color: var(--color-primary);
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}
.ma-page-hero h1,
.ma-page-hero p {
    animation: none !important; /* drop the load-reveal choreography */
}

/* Blog single header: lighter background, keeps the italic Lora title */
.single-post .entry-header {
    background: var(--color-hero-bg);
    border-bottom: 1px solid var(--color-border);
}
.single-post .entry-title {
    color: var(--color-primary);
}
.single-post .entry-meta,
.single-post .entry-meta a {
    color: #4A5A68; /* AA-contrast slate, same value already used for WC breadcrumbs */
    opacity: 1;
}
.single-post .entry-title,
.single-post .entry-meta {
    animation: none !important;
}

.ma-utility-trust-item strong {
    color: #8A5C20; /* AA-contrast bronze on white */
}
.ma-utility-sep {
    background: var(--color-border);
}
.ma-utility-phone:hover {
    color: var(--color-cta) !important;
}
.ma-utility-hours {
    display: none;
}
@media (min-width: 1300px) {
    .ma-utility-hours {
        display: flex;
    }
}

/* Nav dropdown under "Mobility Equipment" (GP's hover .sub-menu); still 5 top-level items */
.main-navigation .main-nav ul.sub-menu {
    padding: 20px;
    background: #FAF9F6;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(13, 32, 53, 0.14);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Panel widens so "Vertical Platform & Porch Lifts" stays on one line at 20px */
    width: 740px;
    max-width: calc(100vw - 32px);
    gap: 2px 20px;
}
.main-navigation .main-nav ul.sub-menu li {
    width: auto;
}
.main-navigation .main-nav ul.sub-menu li a {
    font-weight: 500;
    border-radius: 6px;
    color: var(--color-ink);
}
.main-navigation .main-nav ul.sub-menu li a:hover {
    background: var(--color-hero-bg);
    color: var(--color-primary);
}

/* ── Process heading + brand badges — drop the italic Lora serif,
   sans-serif throughout per the retail direction. */
.ma-process-heading {
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 800;
}

/* WPForms' #ff0000 asterisk is 4.14:1 on cream; #990000 clears 4.5:1 on every background */
.wpforms-required-label {
    color: #990000 !important; /* !important: WPForms' own rule is (0,2,0) */
}

/* Call strip heading: sans, not Lora (appears on nearly every page) */
.ma-call-strip h2,
.ma-call-strip .wp-block-heading {
    font-style: normal !important;
}

/* The archive's .ma-content-section h2 rule was bleeding Lora into van card titles */
.ma-content-section .ma-van-card__title {
    font-style: normal !important;
    font-weight: 700 !important;
}
.ma-van-card__price {
    font-size: 1.5rem;
}
.ma-van-tag {
    font-weight: 800;
}

/* ══ FILTERING — GET-param bar, not a sidebar widget (sidebars are killed sitewide) ══ */
.ma-filter-bar {
    border-bottom: 1px solid var(--color-border);
}
.ma-filter-row {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}
.ma-filter-row select,
.ma-filter-row input[type="number"] {
    font-size: 16px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #FAF9F6;
    color: var(--color-ink);
    min-height: 44px;
}
.ma-filter-row .ma-btn-plain {
    min-height: 44px;
}
.ma-filter-clear {
    font-size: 15px;
    font-weight: 600;
    color: #4A5A68;
    text-decoration: underline;
}
.ma-filter-clear:hover {
    color: var(--color-primary);
}

/* Filter panel as a card with labelled fields and colour swatches */
.ma-filter-bar {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(22, 40, 59, 0.05);
    max-width: 1200px;
    margin: 28px auto;
}
.ma-filter-head {
    /* ⚠️ Flex containers deep in WC templates can compute to 0px width; explicit width:100% */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}
.ma-filter-title {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--v5-ink, var(--color-ink));
}
.ma-filter-count {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: #FAF9F6;
    background: var(--v5-citrus, var(--color-cta));
    padding: 3px 10px;
    border-radius: 999px;
}
.ma-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ma-filter-label {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--v5-slate, #4A5A68);
}
.ma-filter-swatch-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.ma-swatches {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ma-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(22, 40, 59, 0.12);
    display: block;
    position: relative;
    text-indent: -9999px;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.ma-swatch:hover {
    transform: scale(1.08);
}
/* Active swatch: ring + white gap, not colour alone */
.ma-swatch.is-active {
    border-color: var(--v5-ink, var(--color-ink));
    border-width: 3px;
    box-shadow: inset 0 0 0 2px #FAF9F6;
}
.ma-swatch--all {
    width: auto;
    height: 34px;
    min-width: 34px;
    border-radius: 17px;
    text-indent: 0;
    background: #FAF9F6;
    color: var(--v5-ink, var(--color-ink));
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}
.ma-swatch--all.is-active {
    background: var(--v5-ink, var(--color-ink));
    color: #FAF9F6;
    border-color: var(--v5-ink, var(--color-ink));
    box-shadow: none;
}
@media (max-width: 768px) {
    .ma-filter-swatch-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
.ma-van-result-count {
    max-width: 1200px;
    margin: 24px auto 0;
    font-size: 20px; /* was 16px — real non-negotiable violation (min 20px body text), found during CSS cleanup; no later rule ever overrode it */
    color: #4A5A68;
    font-weight: 600;
}
@media (max-width: 768px) {
    .ma-filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    .ma-filter-row select {
        width: 100%;
    }
}

/* Centred section headings get the short bronze underline; the call strip has its own self-contained rule */
.ma-process-heading::after,
.ma-call-strip h2::after,
.ma-call-strip .wp-block-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-secondary);
    margin: 20px auto 0;
    border-radius: 2px;
}

/* ══ V5 "FLORIDA DAYLIGHT" REBRAND (2026-07-18) — superseded rules stay above for rollback ══ */

/* Tokens: re-pointing the custom properties restyles every consumer */

/* ── 2. Base type. Atkinson Hyperlegible body, Archivo headings. */
body {
    font-family: var(--font-body);
    color: var(--v5-ink);
}
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    color: var(--v5-ink);
}
/* V4 set font-family:inherit !important on these to kill Lora — that
   now inherits Atkinson from body, so re-assert Archivo explicitly. */
.ma-page-hero h1,
.ma-page-hero h1.wp-block-heading,
.ma-store-header h1,
.ma-call-strip h2,
.ma-call-strip .wp-block-heading,
.woocommerce div.product .product_title,
.woocommerce-cart .entry-header .entry-title,
.woocommerce-checkout .entry-header .entry-title,
.ma-blog-card__title,
.search .site-main article .entry-title,
.ma-content-section .ma-van-card__title {
    font-family: var(--font-display) !important;
}
/* Blog single: retire the last Lora/italic exception — one coherent
   brand voice sitewide (rebrand supersedes the editorial-accent idea). */
.single-post .entry-title,
.single-post .entry-content h2,
.single-post .entry-content h3 {
    font-family: var(--font-display) !important;
    font-style: normal !important;
}
/* Main nav in Archivo — signage voice. */
.main-navigation a {
    font-family: var(--font-display);
    font-weight: 700;
}

/* Buttons become rounded rects; tag chips stay pills so chips and buttons differ */
.ma-btn-plain--call,
.ma-btn-plain--schedule,
.ma-btn-plain--info,
.woocommerce ul.products li.product .button.ma-catalog-call,
.wp-block-button__link,
.wc-block-components-button:not(.wc-block-components-button--text),
.woocommerce-message .button,
.woocommerce-info .button,
.wpforms-form button[type="submit"],
.ma-filter-form button[type="submit"] {
    border-radius: 14px !important;
}

.ma-cinema-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--v5-slate);
    letter-spacing: 0.14em;
}
/* bronze hairline rule → short bold gold bar */
.ma-cinema-rule {
    border: none !important;
    background: var(--v5-gold) !important;
    height: 6px !important;
    width: 64px !important;
    border-radius: 3px;
}
.ma-cinema-sub { color: var(--v5-slate); }

.ma-featured-vans { background: #FAF9F6 !important; }
.ma-brand-strip { background: var(--v5-sky) !important; }
.ma-call-strip h2::after,
.ma-call-strip .wp-block-heading::after {
    height: 6px;
    border-radius: 3px;
}
/* eyebrows: Archivo, slate (citrus-deep kept for links/CTA text only) */
.ma-process-eyebrow,
.ma-brand-strip-label {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--v5-slate);
    letter-spacing: 0.16em;
}/* ── 6. Store header (categories / shop / search / vans) — white,
   Archivo 900, slate support text. */
.ma-store-header {
    background: #FAF9F6 !important;
    border-bottom: 1px solid var(--color-border);
}
.ma-store-header h1 {
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--v5-ink);
}
.ma-store-breadcrumb,
.ma-store-breadcrumb a { color: var(--v5-slate); }

/* ── 7. Content-page hero — white via --color-hero-bg token; gold bar
   replaces the bronze one drawn by h1::after. */
.ma-page-hero h1::after {
    height: 6px !important;
    border-radius: 3px;
}
.ma-page-hero h1 { font-weight: 900; }
.ma-page-hero p { color: var(--v5-slate); }

/* ── 8. Cards — cool hairlines, ink prices in Archivo. */
.ma-van-card,
.woocommerce ul.products li.product {
    border-color: var(--color-border);
}
.ma-van-card__price,
.woocommerce ul.products li.product .price {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--v5-ink);
}
.ma-van-tag {
    background: var(--v5-sky);
    color: var(--v5-ink);
}

/* ── 9. Utility bar + header. */
.ma-utility-bar { border-bottom-color: var(--color-border); }
.ma-utility-trust-item { color: var(--v5-slate); }
.ma-utility-phone,
.ma-utility-bar a[href^="tel"] {
    /* ⚠️ !important needed: an older V4 rule sets this with !important */
    color: var(--v5-citrus-deep) !important;
    font-weight: 700;
}

/* ── 11. Forms + filter bar. */
.wpforms-form label { color: var(--v5-ink); }
.ma-filter-form select,
.ma-filter-form input {
    border: 2px solid var(--v5-ink);
    border-radius: 10px;
    color: var(--v5-ink);
    font-family: var(--font-body);
}

/* ── 12. Focus visibility — citrus ring sitewide. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--v5-citrus) !important;
    outline-offset: 2px;
}

/* ── V5 fix round 1 (screenshot critique, same session) ── */

/* GP's a.wp-block-button__link:not(.has-background) (0,2,1) made block buttons grey; match it and win on order */
a.wp-block-button__link:not(.has-background) {
    background: var(--v5-ink);
    color: #FAF9F6;
}
.ma-btn-call a.wp-block-button__link:not(.has-background),
.ma-btn-call .wp-block-button__link {
    background: var(--v5-citrus) !important;
    color: #FAF9F6 !important;
}
.ma-btn-call a.wp-block-button__link:not(.has-background):hover,
.ma-btn-call .wp-block-button__link:hover {
    background: #A33D14 !important;
}

/* ── V5 fix round 2 ── */

/* Blog index hero, daylight treatment */
.blog .ma-cinema-page-hero {
    border-bottom: 1px solid var(--color-border);
}
.blog .ma-cinema-page-hero::before,
.blog .ma-cinema-page-hero::after {
    display: none !important; /* grain + gradient overlays */
}
.blog .ma-cinema-page-hero h1,
.blog .ma-cinema-page-hero .ma-cinema-line {
    font-family: var(--font-display) !important;
    font-style: normal !important;
    font-weight: 900;
    color: var(--v5-ink) !important;
    letter-spacing: -0.02em;
}
.blog .ma-cinema-page-hero h1 em {
    -webkit-box-decoration-break: clone;
}
.blog .ma-cinema-page-hero .ma-cinema-sub {
    color: var(--v5-slate) !important;
    font-size: 22px !important;
    line-height: 1.6 !important;
    max-width: 640px !important;
    margin: 0 !important;
}
.blog .ma-cinema-page-hero .ma-cinema-rule { display: none !important; }
/* load-reveal opacity animation on a white bg reads as flash — off */
.blog .ma-cinema-page-hero .ma-reveal {
    animation: none !important;
    opacity: 1 !important;
}

/* Van filter number inputs — match the ink-bordered selects. */
.ma-filter-form input[type="number"] {
    border: 2px solid var(--v5-ink);
    border-radius: 10px;
    color: var(--v5-ink);
    font-family: var(--font-body);
}

@media (max-width: 768px) {
    /* eyebrow: let the separators breathe instead of orphaning "·" */
    .ma-cinema-eyebrow { letter-spacing: 0.08em; }
}

/* ══ V5.1 LAYOUT REVIVAL (2026-07-18) ══ */

/* The nav hover underline struck through dropdown rows; scope it out */
.main-navigation .main-nav ul .sub-menu li a::after {
    display: none !important;
}

/* ── Split hero: copy left, photo panel right. */
.ma-cinema-inner {
    display: flex;
    align-items: center;
    gap: 56px;
}

@media (max-width: 900px) {
    .ma-cinema-inner { flex-direction: column; gap: 32px; }
        }

/* ── Content-page heroes: white void → sky band, tighter. */
.ma-page-hero {
    background: var(--v5-sky) !important;
    padding-top: 56px !important;
    padding-bottom: 64px !important;
}

/* Sort form: its submit button is for keyboard users; quiet secondary style */
.ma-ordering {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ma-ordering-submit {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--v5-ink);
    border: 2px solid var(--v5-ink);
    border-radius: 10px;
    padding: 8px 16px;
    min-height: 50px; /* non-negotiable: buttons min 50px desktop / 56px mobile */
    cursor: pointer;
}
@media (max-width: 768px) {
    .ma-ordering-submit { min-height: 56px; }
}
.ma-ordering-submit:hover,
.ma-ordering-submit:focus-visible {
    background: var(--v5-ink);
    color: #FAF9F6;
}

/* Mobile header phone: bigger and bolder than desktop's 14px */
@media (max-width: 768px) {
    .ma-utility-phone {
        font-size: 19px;
        font-weight: 800;
    }
    .ma-utility-phone svg {
        width: 18px;
        height: 18px;
    }
}/* ⚠️ ul.products is now a grid; the row span comes from grid-column in the 2026-08-13 block, these are the float fallback */
.woocommerce ul.products li.ma-shop-cat-divider {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    list-style: none;
    margin: 0 0 24px;
    padding: 40px 0 12px;
    border-top: 1px solid var(--color-border);
    /* Shop category divider spans the whole grid row */
    grid-column: 1 / -1;
}
.woocommerce ul.products li.ma-shop-cat-divider:first-child {
    padding-top: 0;
    border-top: none;
}
.woocommerce ul.products li.ma-shop-cat-divider h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--v5-ink);
    margin: 0;
}

/* Vehicle Lifts: bigger card text (base title/price are !important) */
/* ⚠️ Both classes are on <body>: no combinator between them */
body.ma-cat-vehicle-lifts.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 24px !important;
}
body.ma-cat-vehicle-lifts.woocommerce ul.products li.product .price {
    font-size: 26px !important;
}
.ma-cat-vehicle-lifts p.ma-store-sub {
    font-size: 22px;
}

/* Vehicle Lifts: compatibility call CTA */
.ma-compat-cta {
    max-width: 1200px;
    margin: 0 auto 24px;
    padding: 20px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.ma-compat-cta p {
    margin: 0;
    font-size: 20px;
    color: var(--v5-ink);
}
.ma-compat-cta .ma-btn-plain--call {
    flex-shrink: 0;
}

/* Compatibility check form: stacks vertically (base row layout is still used by Pre-Owned) */
.ma-compat-cta--form {
    display: block;
    text-align: left;
}
.ma-compat-cta--form p {
    margin-bottom: 16px;
}
.ma-compat-cta--form .wpforms-container {
    max-width: 640px;
    margin: 0;
}
.ma-compat-cta-or {
    font-size: 20px !important;
    color: var(--v5-slate);
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}
.ma-compat-cta-or a {
    color: var(--v5-citrus-deep);
    font-weight: 700;
    text-decoration: underline;
}

/* Lead-capture form in the dark call strip (van archive, Mobility Equipment) */
.ma-call-strip--lead-form .wpforms-container {
    text-align: left;
    max-width: 480px;
    margin: 0 auto;
    margin-top: 32px;
    margin-bottom: 8px;
}
/* Brand the WPForms submit button sitewide */
.wpforms-submit {
    background-color: var(--color-cta) !important;
    border-color: var(--color-cta) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    min-height: 50px;
}
.wpforms-submit:hover,
.wpforms-submit:focus-visible {
    background-color: var(--v5-citrus-deep) !important;
    border-color: var(--v5-citrus-deep) !important;
}
@media (max-width: 768px) {
    .wpforms-submit { min-height: 56px; }
}

/* ── Call-strip/footer: light, not dark navy — readability for elderly
   eyes, consistent with the rest of V5 "Florida Daylight". */
.ma-call-strip {
    background: var(--v5-sky) !important;
}
.ma-call-strip h2,
.ma-call-strip .wp-block-heading {
    color: var(--v5-ink) !important;
}
.ma-call-strip h2::after,
.ma-call-strip .wp-block-heading::after {
    background: var(--v5-citrus) !important;
}
.ma-call-strip p {
    color: var(--v5-slate) !important;
}
.ma-call-strip .ma-address-note {
    color: var(--v5-slate) !important;
    opacity: 0.85;
}
.site-info {
    background: #FAF9F6 !important;
}
.site-info,
.site-info a {
    color: var(--v5-ink) !important;
}

/* Featured vans heading, home only */
body.home .ma-process-eyebrow {
    font-family: var(--font-display);
    color: var(--v6-rust);
}
body.home .ma-process-heading {
    font-family: var(--font-serif);
    font-weight: 600;
    font-style: normal;
}
body.home .ma-process-heading::after {
    background: var(--v6-rust) !important;
}

/* Flat hairline van cards, home only */
body.home .ma-featured-vans .ma-van-card {
    border-top: 3px solid var(--v6-rust) !important;
}
body.home .ma-featured-vans .ma-van-card:hover {
    box-shadow: none !important;
    transform: none !important;
    border-color: var(--v6-rust) !important;
}
body.home .ma-featured-vans .ma-van-card__price {
    font-family: var(--font-display);
}

.ma-v6-why-media img {
    display: block;
}
.ma-v6-why-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.ma-v6-why-heading {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 32px;
    color: var(--v5-ink);
    margin: 0 0 32px;
    max-width: 20ch;
}
.ma-v6-why-list { list-style: none; margin: 0; padding: 0; }
.ma-v6-why-item {
    padding: 20px 0;
    border-top: 1px solid var(--v6-rust-line);
}
.ma-v6-why-item-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--v5-ink);
    margin: 0 0 6px;
}
.ma-v6-why-item-desc {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate);
    margin: 0;
}

.ma-v6-quotes-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
}
.ma-v6-quotes-heading {
    font-family: var(--font-serif);
    color: var(--v5-ink);
    text-align: left;
}
.ma-v6-quote {
    border-top: 1px solid var(--v6-rust-line);
    padding: 26px 28px !important;
    margin: 0 !important;
}
.ma-v6-quote:last-of-type { border-bottom: 1px solid var(--v6-rust-line); margin-bottom: 0 !important; }
.ma-v6-quote-stars { margin-bottom: 14px; display: flex; }
.ma-v6-quote-text {
    color: var(--v5-ink);
    margin: 0 0 16px;
}
.ma-v6-quote-byline {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--v5-slate);
}
.ma-v6-quotes-more { text-align: left; }

body.home .ma-call-strip h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-style: normal;
}

/* ══ V6.1 SITEWIDE ROLLOUT (2026-07-21) — superseded by later passes ══ */

/* ── 2. Gold retired sitewide — rust is the one secondary accent. ── */
.ma-page-hero h1::after {
    background: var(--v6-rust) !important;
}
/* Blog hero: italic serif instead of the marker (client: no marker effect) */
.blog .ma-cinema-page-hero h1 em {
    background: none !important;
    padding: 0 !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
    box-decoration-break: initial !important;
    font-style: italic !important;
    font-weight: 500 !important;
    color: inherit !important;
}

/* Flat hairline cards sitewide */
.woocommerce ul.products li.product,
.ma-van-card,
.ma-blog-card {
    border-top: 3px solid var(--v6-rust) !important;
}

.woocommerce ul.products li.product:hover,
.ma-van-card:hover,
.ma-blog-card:hover {
    box-shadow: none !important;
    transform: none !important;
    border-color: var(--v6-rust) !important;
}
.ma-blog-card__photo-wrap,
.ma-blog-card { overflow: visible !important; }

.ma-van-card__price {
    font-family: var(--font-display);
}

/* ══ FUNCTIONAL-DEPTH PASS (2026-07-21) ══ */

/* ── Trust band — 3-column, non-sticky, once per page (distinct from the
   sticky utility bar, which stays a compact always-visible strip). ── */
.ma-trust-band {
    border-bottom: 1px solid var(--color-border);
}

/* Product-finder quiz (home): options are real links, so JS off still works */
.ma-quiz {
    background: var(--v6-paper);
    padding: 72px 24px;
}
.ma-quiz-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.ma-quiz-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.ma-quiz-heading {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 34px;
    color: var(--v5-ink);
    margin: 0 0 12px;
}
.ma-quiz-sub {
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--v5-slate);
    margin: 0 0 36px;
}
.ma-quiz-question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--v5-ink);
    margin: 0 0 20px;
}
.ma-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
}
.ma-quiz-option {
    font-family: var(--font-body);
    min-height: 50px;
    cursor: pointer;
}
.ma-quiz-option:hover,
.ma-quiz-option:focus-visible {
    border-color: var(--v6-rust);
    background: var(--v6-paper);
}
.ma-quiz-back {
    /* 56px min height (tap-target rule) */
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    background: none;
    border: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--v6-rust);
    cursor: pointer;
    padding: 8px 4px;
    margin-bottom: 12px;
}
@media (max-width: 640px) {
    .ma-quiz-back { min-height: 56px; }
}
.ma-quiz-back:hover { text-decoration: underline; }

/* Product-card spec tags: only non-empty attributes render */
.ma-spec-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 10px;
}
.ma-spec-tag {
    background: var(--v6-paper);
    color: var(--v5-ink);
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
}

/* Brand strip on mobility-scooters only; not .ma-brand-strip, whose negative margins suit the homepage gutter */
.ma-cat-brand-strip {
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 28px 24px;
    text-align: center;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.ma-cat-brand-strip__label {
    display: block;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: 16px;
}
.ma-cat-brand-strip__row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 32px;
}

/* Buying guides: native <details> accordion, no JS */
.ma-buying-guide {
    max-width: 800px;
    margin: 48px auto 0;
    padding: 0 24px;
}
.ma-guide-accordion {
    border-top: 3px solid var(--v6-rust);
    margin-bottom: 16px;
}
.ma-guide-accordion summary {
    color: var(--v5-ink);
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ma-guide-accordion summary::-webkit-details-marker { display: none; }
.ma-guide-accordion summary::after {
    content: '+';
    font-family: var(--font-display);
    font-size: 24px;
    margin-left: 16px;
    flex-shrink: 0;
}
.ma-guide-accordion[open] summary::after { content: '\2212'; }
.ma-guide-body {
    padding: 0 24px 24px;
}
.ma-guide-body > p {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate);
    margin: 0;
}
.ma-guide-faq {
    padding: 16px 0;
    border-top: 1px solid var(--v6-rust-line);
}
.ma-guide-faq:first-child { border-top: none; padding-top: 0; }
.ma-guide-q {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--v5-ink);
    margin: 0 0 8px;
}
.ma-guide-a {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate);
    margin: 0;
}
@media (max-width: 600px) {
    .ma-guide-accordion summary { padding: 16px 18px; }
    .ma-guide-body { padding: 0 18px 20px; }
}

/* ══ V7 "SHOWROOM" RETAIL SYSTEM (2026-07-21) — one card recipe, Archivo + Atkinson ══ */

/* Two faces: Archivo 800 headings, Atkinson body (beats V6.1's serif rule) */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* Review quotes: plain speech, not italic-serif pull-quotes. */
.ma-v6-quote-text {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.6;
}

/* One card recipe sitewide; body.home selectors out-rank V6's !important rust-top rules */
.woocommerce ul.products li.product,
.ma-van-card,
body.home .ma-featured-vans .ma-van-card,
.ma-blog-card,
.ma-guide-accordion,
.ma-v6-quote,
.ma-v7-cat,
.ma-v7-ticket,
.ma-quiz-option {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--v7-radius) !important;
    box-shadow: none !important;
    transform: none !important;
}

.woocommerce ul.products li.product:hover,
.ma-van-card:hover,
body.home .ma-featured-vans .ma-van-card:hover,
.ma-blog-card:hover,
.ma-v7-cat:hover,
.ma-v7-ticket:hover,
.ma-quiz-option:hover,
.ma-quiz-option:focus-visible {
    background: #FAF9F6 !important;
    border-color: var(--v5-ink) !important;
    box-shadow: none !important;
    transform: none !important;
}
.ma-van-card,
.ma-v7-cat {
    overflow: hidden !important; /* keep photos inside the radius */
}
.woocommerce ul.products li.product a img {
    border-radius: 6px !important;
    transition: transform 500ms ease;
}
.ma-blog-card__photo { border-radius: 9px 9px 0 0; }

/* Review stars read as ratings, not decoration — citrus, not steel. */
.ma-v6-quote-stars { color: var(--v5-citrus-deep) !important; }

/* ── 3. Shared small pieces ── */
.ma-v7-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.ma-v7-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.01em;
    padding: 14px 28px;
    border-radius: 12px;
    min-height: 52px;
    text-decoration: none;
    line-height: 1.2;
}
.ma-v7-btn--cta {
    background: var(--v5-citrus);
    color: #FAF9F6 !important;
}
.ma-v7-btn--cta:hover { background: var(--v5-citrus-deep); color: #FAF9F6 !important; }
.ma-v7-btn--outline {
    background: #FAF9F6;
    border: 2px solid var(--v5-ink);
    color: var(--v5-ink) !important;
}
.ma-v7-btn--outline:hover { background: var(--v5-ink); color: #FAF9F6 !important; }
@media (max-width: 768px) {
    .ma-v7-btn { width: 100%; min-height: 56px; }
}

/* Zone 1 hero: framed 16/10 photo so the whole van shows, with the inventory ticket */
body.home .entry-content .ma-v7-hero.wp-block-group {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 calc(50% - 50vw) !important;
}
.ma-v7-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    gap: 56px;
    align-items: center;
}
.ma-v7-hero-title {
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--v5-ink);
    margin: 0 0 22px;
    overflow-wrap: normal;
    word-break: keep-all;
}
.ma-v7-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 22px;
}
.ma-v7-hero-photo { position: relative; }
.ma-v7-hero-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center 40%;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius);
}
.ma-v7-ticket {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 22px;
    text-decoration: none;
}
.ma-v7-ticket-kicker {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v5-citrus-deep);
}
.ma-v7-ticket-count {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--v5-ink);
}
.ma-v7-ticket-link {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--v7-steel);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-v7-ticket:hover .ma-v7-ticket-link { color: var(--v5-ink); }
.ma-v7-hero-facts {
    list-style: none;
    max-width: 1180px;
    margin: 56px auto 0;
    padding: 20px 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}
.ma-v7-hero-facts li {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--v5-slate);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}
.ma-v7-hero-facts li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--v8-red);
}
@media (max-width: 900px) {
    .ma-v7-hero-inner { gap: 32px; }
    .ma-v7-hero-facts { margin-top: 30px; gap: 8px 14px; }
    .ma-v7-hero-facts li { font-size: 13px; gap: 14px; }
}

/* Zone 2 shop: one mist band; children forced transparent */
body.home .entry-content .ma-v7-shop.wp-block-group {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: 72px 0 24px !important;
}
.ma-v7-shop-head {
    max-width: 1180px;
    margin: 0 auto 30px;
    padding: 0 24px;
}
.ma-v7-shop-heading {
    font-size: 34px;
    color: var(--v5-ink);
    margin: 0;
}
.ma-v7-cats {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    gap: 24px;
}
.ma-v7-cat {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.ma-v7-cat-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}
.ma-v7-cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* `.ma-v7-cat-media` already has overflow:hidden, so the zoom is contained. No markup or post-content change needed for any of this. */
    transition: transform 500ms ease;
}
.ma-v7-cat-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 28px 26px;
}
.ma-v7-cat-title {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--v5-ink);
    line-height: 1.15;
}
.ma-v7-cat-desc {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate);
}
.ma-v7-cat-cta {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--v5-citrus-deep);
    margin-top: 6px;
}
.ma-v7-quicklinks {
    max-width: 1180px;
    margin: 24px auto 0;
    padding: 0 24px;
    display: grid;
    /* min(250px, 100%): a bare floor overflows narrow containers */
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 14px;
}
.ma-v7-quicklinks a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 12px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--v5-ink);
    text-decoration: none;
}
.ma-v7-quicklinks a::after {
    content: "\2192";
    color: var(--v7-steel);
    font-weight: 700;
    flex-shrink: 0;
    /* Quick-links build their arrow in ::after, so they get their own nudge */
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ma-v7-quicklinks a:hover { border-color: var(--v5-ink); }
.ma-v7-quicklinks a.ma-v7-quicklink--sale { color: var(--v5-citrus-deep); }
.ma-v7-quicklinks a.ma-v7-quicklink--sale::after { color: var(--v5-citrus-deep); }
@media (max-width: 900px) {
    .ma-v7-cat-body { padding: 20px 22px 22px; }
    .ma-v7-shop-heading { font-size: 29px; }
}

/* Featured vans and quiz sit on the shop zone surface; long selectors beat the old bleed rules */
body.home .entry-content .ma-v7-shop .ma-featured-vans {
    background: transparent !important;
    border-bottom: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
body.home .ma-featured-vans .ma-process-eyebrow { color: var(--v7-steel); }
body.home .ma-featured-vans .ma-process-heading::after { display: none !important; }
body.home .entry-content .ma-v7-shop .ma-quiz {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Zone 3 trust: why-us two-column, quotes 3-up, flat brand line */
.ma-v6-why {
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 24px 56px;
}
.ma-v6-why-media {
    flex: 0 0 40%;
    min-height: 0;
}
.ma-v6-why-media img {
    width: 100%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius);
}
.ma-v6-why-content {
    flex: 1;
    padding: 0;
}
@media (max-width: 900px) {
    .ma-v6-why { flex-direction: column; gap: 28px; padding: 56px 24px 40px; }
    .ma-v6-why-media { width: 100%; flex-basis: auto; }
    .ma-v6-why-content { padding: 0; }
}

.ma-v6-quotes { padding: 40px 24px 24px; }
.ma-v6-quotes-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ma-v6-quotes-eyebrow { grid-column: 1 / -1; margin: 0 0 6px; }
.ma-v6-quotes-heading { grid-column: 1 / -1; margin: 0 0 10px; }
.ma-v6-quotes-more { grid-column: 1 / -1; margin: 18px 0 0; }
@media (max-width: 900px) {
    .ma-v6-quotes-inner { grid-template-columns: 1fr; gap: 16px; }
}

body.home .ma-brand-strip {
    border-top: none !important;
    border-bottom: none !important;
    padding: 24px 24px 72px !important;
}
body.home .ma-brand-strip-label {
    color: var(--v7-steel);
    font-family: var(--font-display);
    font-weight: 700;
}/* ── 7. Zone 4: close — mist call strip. ── */
body.home .entry-content .ma-call-strip.wp-block-group {
    background: var(--v7-mist) !important;
    border-top: 1px solid var(--color-border);
    padding: 72px 24px !important;
}/* ── 8. Sitewide chrome cleanup for the retail system ── */
/* Buying-guide accordions: summary face follows the display font. */
.ma-guide-accordion summary {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
}
.ma-guide-accordion summary::after { color: var(--v7-steel); }
/* Quiz options keep their tap-target height under the 1px border. */
.ma-quiz-option { border-width: 1px !important; }

/* ── 9. V7 polish pass (same day) — fixes from the first full-page
   screenshot review. ── */

/* Nav search: GP's dynamic hide/show CSS never regenerated, so we style the nav-search-active states ourselves */
.main-navigation .inside-navigation { position: relative; }
.navigation-search {
    position: absolute;
    inset: 0;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.navigation-search.nav-search-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.navigation-search input[type="search"] {
    width: 100%;
    height: 100%;
    border: 2px solid var(--v5-ink);
    border-radius: 0;
    background: #FAF9F6;
    color: var(--v5-ink);
    font-family: var(--font-body);
    font-size: 20px;
    padding: 0 24px;
}
.navigation-search input[type="search"]:focus {
    outline: 3px solid var(--color-secondary);
    outline-offset: -3px;
}

.ma-v7-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    max-width: 330px;
    gap: 12px;
}

/* Home: 3 featured vans on one row; cancels the archive's odd-card centring */
body.home .ma-featured-vans-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}
body.home .ma-featured-vans-grid .ma-van-card:last-child:nth-child(odd) {
    grid-column: auto !important;
    justify-self: auto !important;
    max-width: none !important;
}
body.home .ma-featured-vans-grid .ma-van-card__body { padding: 20px 22px 24px; }
body.home .ma-featured-vans-grid .ma-van-card__price { font-size: 1.7rem; }
@media (max-width: 980px) {
    body.home .ma-featured-vans-grid { grid-template-columns: 1fr !important; }
}

/* Why-us portrait capped at 3/4; list in two columns */
.ma-v6-why-media { align-self: center; }
.ma-v6-why-media img {
    min-height: 0;
    height: auto;
    aspect-ratio: 3 / 4;
}
.ma-v6-why-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
}
.ma-v6-why-item:last-child { border-bottom: none; }
@media (max-width: 900px) {
    .ma-v6-why-list { grid-template-columns: 1fr; }
    .ma-v6-why-media img { aspect-ratio: 3 / 2; }
}

/* Van title anchors pointed at the retired serif font */
.ma-van-card__title a,
body.home .ma-featured-vans .ma-van-card__title a {
    font-family: var(--font-display) !important;
    font-weight: 800;
}
/* Pin the card CTA to the bottom edge so a wrapped title doesn't
   push buttons out of line across a row. */
.ma-van-card__cta { margin-top: auto; }
/* Hero balance: give the photo column a touch more room. */
.ma-v7-hero-inner { grid-template-columns: 1fr 1.06fr; }
.ma-v7-hero-title { font-size: clamp(2.2rem, 3.4vw, 3.05rem); }
@media (max-width: 900px) {
    .ma-v7-hero-inner { grid-template-columns: 1fr; }
}

/* ── 10. Sitewide sweep fixes (from the full template-by-template
   screenshot pass). ── */

/* Pin every hero child to the container edge (constrained layout centred them) */
.ma-page-hero .wp-block-group__inner-container > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* No heading accent dash inside cards */
.ma-van-card__title::after,
.ma-van-card__title a::after,
.ma-blog-card__title::after {
    display: none !important;
}

/* WC product cards: drop the V5 bronze left accent bar on prices —
   the price stands on its own weight in the flat system. */
.woocommerce ul.products li.product .price {
    border-left: none !important;
    padding-left: 0 !important;
}

/* Add-to-cart buttons in product grids were still ink-navy; citrus
   is the one actionable color everywhere else. */
.woocommerce ul.products li.product .button.add_to_cart_button {
    background: var(--v5-citrus) !important;
    color: #FAF9F6 !important;
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
    background: var(--v5-citrus-deep) !important;
}

/* Blog card metadata: bronze remnants move to the V7 label color. */
.ma-blog-card__date { color: var(--v7-steel); }
.ma-blog-card__cta span { color: var(--v5-citrus-deep); }

/* Blog hero restacked as the standard left hero */
.blog .ma-cinema-page-hero {
    background: var(--v7-mist) !important;
    padding: 56px 24px 64px !important;
}
.blog .ma-cinema-inner {
    display: block !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    text-align: left;
}
.blog .ma-cinema-page-hero .ma-cinema-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v7-steel) !important;
    margin: 0 0 14px;
}
.blog .ma-cinema-page-hero h1 {
    font-size: clamp(2.6rem, 5vw, 3.8rem) !important;
    margin: 0 0 18px !important;
}

/* Why-us photo: crop toward the couple, not the tree trunk. */
.ma-v6-why-media img { object-position: 55% center; }

/* Loop product titles at the 28px heading floor */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    line-height: 1.25 !important;
}

/* Store-header eyebrow (search results, category headers): bronze
   remnant moves to the V7 label color. */
.ma-store-eyebrow { color: var(--v7-steel) !important; }

/* ══ V8 CLIENT FEEDBACK ROUND (2026-07-21) — palette from the real logo: charcoal, logo blue, logo red ══ */

/* Real logo replaces the CSS monogram; site title stays in the DOM */
.main-title a {
    font-size: 0 !important;
    line-height: 0;
}
.main-title a::before {
    content: '';
    width: 232px;
    height: 33px;
    min-width: 232px;
    background: url('/wp-content/uploads/2026/07/ma-logo.png') left center / contain no-repeat;
    border-radius: 0;
    box-shadow: none;
    /* multiply blends the logo PNG's white box into the header */
    mix-blend-mode: multiply;
}
/* ⚠️ An older hover rule's `background:` shorthand wiped the logo; re-declare the image */
.main-title a:hover::before {
    background: url('/wp-content/uploads/2026/07/ma-logo.png') left center / contain no-repeat;
}
@media (max-width: 480px) {
    .main-title a::before { width: 190px; min-width: 190px; height: 27px; }
}
/* Logo left, menu right on one line (one margin-left:auto, no wrap); narrower screens drop the menu to its own line */
.inside-header {
    display: flex;
    align-items: center;
}
.inside-header .site-branding {
    flex: 0 0 auto;
    /* Centre the logo in its box (it sat ~4px low on the baseline) */
    display: flex;
    align-items: center;
}
/* Flex-centre the whole branding chain so the logo lines up with the nav text */
.inside-header .site-branding .main-title {
    margin: 0;
    display: flex;
    align-items: center;
}
.inside-header .site-branding a { display: inline-flex; align-items: center; }
/* The logo's white background sits on an intentional white chip (card recipe) */
.inside-header .site-branding .main-title a {
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 10px;
    padding: 8px 16px;
}
/* Default (769px–1199px): menu on its own full-width, centered line. */
.inside-header #site-navigation,
.inside-header .main-navigation {
    flex: 1 1 100%;
    float: none;
}
.inside-header #site-navigation .inside-navigation { justify-content: center; }
/* ⚠️ Logo + menu need ~1185px and GP caps the row at 1200px: keep max-width:none; 1250 must match
   generate_mobile_menu_media_query in functions.php */
@media (min-width: 1250px) {
    .inside-header.grid-container {
        max-width: none;
        padding-left: 24px;
        padding-right: 24px;
    }
    .inside-header #site-navigation,
    .inside-header .main-navigation {
        flex: 0 1 auto;
    }
    .inside-header #site-navigation .inside-navigation {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
    /* Top-level items never shrink or wrap mid-label */
    .inside-header #site-navigation .main-nav > ul {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
    .inside-header #site-navigation .main-nav > ul > li { flex: 0 0 auto; }
    .inside-header .main-navigation .main-nav ul li a {
        padding-left: 13px;
        padding-right: 13px;
        white-space: nowrap;
    }
}

/* ── 3. Utility bar: linked rating, location next to a larger
   phone number. ── */
.ma-utility-bar a.ma-utility-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-underline-offset: 3px;
}
.ma-utility-contact {
    display: flex;
    align-items: center;
    gap: 22px;
}
.ma-utility-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--v5-slate) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap; /* keep the address on one line now the search bar shares the row */
}
.ma-utility-location:hover { color: var(--v8-blue) !important; }
@media (max-width: 900px) {
    .ma-utility-location { display: none; }
}

/* ── 4. Compact linked trust line (store pages) — replaces the
   3-column band. ── */
.ma-trust-band--compact {
    border-bottom: 1px solid var(--color-border);
}
.ma-trust-band--compact .ma-trust-band-line {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
}
.ma-trust-band--compact a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--v8-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-trust-band--compact a:hover { color: var(--v8-blue-deep); }
.ma-trust-band-dot { color: var(--v5-slate); }

/* ── 5. Hero: quiz link + human-assistance emphasis. ── */
.ma-v7-hero-quizlink {
    font-family: var(--font-body);
    font-size: 20px;
    margin: 0 0 18px;
}
.ma-v7-hero-quizlink a {
    color: var(--v8-blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-v7-hero-quizlink a:hover { color: var(--v8-blue-deep); }
.ma-v7-hero-human {
    font-family: var(--font-body);
    color: var(--v5-ink);
    background: var(--v7-mist);
    border-left: 4px solid var(--v8-blue);
    border-radius: 0 var(--v7-radius) var(--v7-radius) 0;
    padding: 14px 18px;
    margin: 0;
    max-width: 34em;
}
.ma-v7-hero-human a {
    color: var(--v8-red-deep);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-v7-hero-human a:hover { color: var(--v5-ink); }

/* Why-us now sits directly under the hero: hairline to separate it
   from the hero's fact row. */
.ma-v6-why { border-top: 1px solid var(--color-border); }

/* ── 6. Category tiles: 3-up with Book a Service. ── */
.ma-v7-cats { grid-template-columns: repeat(3, 1fr); }
.ma-v7-cat-title { font-size: 26px; }
@media (max-width: 980px) {
    .ma-v7-cats { grid-template-columns: 1fr; }
}

/* ── 7. Featured-vans heading in caps (client request). ── */
body.home .ma-featured-vans .ma-process-heading {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 30px;
}

/* ── 8. Quiz: call escape hatch. ── */
.ma-quiz-call {
    margin: 36px 0 0;
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--v5-slate);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.ma-quiz-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    background: var(--v8-red);
    color: #FAF9F6 !important;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    border-radius: 12px;
    text-decoration: none;
}
.ma-quiz-call-btn:hover { background: var(--v8-red-deep); }
@media (max-width: 768px) {
    .ma-quiz-call-btn { width: 100%; min-height: 56px; }
}

/* ── 9. Showroom video (from the business's Facebook page). ── */
.ma-v8-video {
    padding: 24px 24px 64px;
}
.ma-v8-video-inner { max-width: 1180px; margin: 0 auto; }
.ma-v8-video-heading { font-size: 32px; margin: 0 0 22px; color: var(--v5-ink); }
.ma-v8-video-frame {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius);
    overflow: hidden;
}
.ma-v8-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.ma-v8-video-note {
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--v5-slate);
    margin: 14px 0 0;
}
.ma-v8-video-note a { color: var(--v8-blue); text-decoration: underline; text-underline-offset: 3px; }

.ma-call-strip .ma-address-note a {
    color: var(--v5-slate);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-call-strip .ma-address-note a:hover { color: var(--v8-blue); }

/* ── 11. Cookie notice. ── */
.ma-cookie-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3000;
    max-width: 720px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius);
    box-shadow: 0 10px 30px rgba(20, 24, 32, 0.18);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.ma-cookie-bar p {
    font-family: var(--font-body);
    color: var(--v5-ink);
    margin: 0;
    flex: 1;
}
.ma-cookie-bar a { color: var(--v8-blue); text-decoration: underline; text-underline-offset: 2px; }
.ma-cookie-ok {
    flex-shrink: 0;
    min-height: 50px;
    padding: 12px 22px;
    background: var(--v5-ink);
    color: #FAF9F6;
    border: none;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
}
.ma-cookie-ok:hover { background: #000000; }
@media (max-width: 600px) {
    .ma-cookie-bar { flex-direction: column; align-items: stretch; text-align: left; }
    .ma-cookie-ok { min-height: 56px; }
}

/* ── 12. Van archive: bigger filter panel + min–max ranges. ── */
.ma-filter-bar { padding: 28px 28px 32px; }
.ma-filter-title { font-size: 24px !important; }
.ma-filter-label,
.ma-filter-field .ma-filter-label { font-size: 16px !important; }
.ma-filter-form select,
.ma-filter-form input[type="number"] {
    /* 56px / 20px minimums */
    min-height: 56px !important;
    font-size: 20px !important;
}
/* Min/Max as label-above-controls, like every other filter field */
.ma-filter-range {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.ma-filter-range legend {
    float: none;
    width: auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v5-slate);
    margin: 0;
}
.ma-filter-range__inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ma-filter-range input[type="number"] {
    width: 110px;
    border: 2px solid var(--v5-ink);
    border-radius: 10px;
    padding: 10px 12px;
    background: #FAF9F6;
    color: var(--v5-ink);
    font-family: var(--font-body);
}
.ma-filter-range__dash { color: var(--v5-slate); font-weight: 700; }

/* ⚠️ The filmstrip is gone but this keyframe stays: the brand-strip marquee (.ma-marquee-track) uses it */
@keyframes ma-filmstrip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ── 14. Van single: price block, spec table, browse rail. ── */
.ma-van-single-inner--rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}
.ma-van-pricebox {
    margin: 28px 0 4px;
}
.ma-van-pricebox__price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    line-height: 1.05;
    color: var(--v5-ink);
    margin: 0 0 10px;
}
.ma-van-pricebox__meta {
    font-family: var(--font-body);
    font-size: 21px;
    line-height: 1.6;
    color: var(--v5-slate);
    margin: 0 0 8px;
}
.ma-van-pricebox__finance {
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--v5-slate);
    margin: 0;
}
.ma-van-pricebox__finance a {
    color: var(--v8-red-deep);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-van-pricebox__finance a:hover { color: var(--v5-ink); }
/* Old spec-strip styles may linger in earlier banners; the strip
   markup is gone, price/CTAs/table carry the page now. */
.ma-van-details { margin-top: 40px; }

.ma-van-rail {
    position: sticky;
    top: 140px;
}
.ma-van-rail__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--v5-ink);
    margin: 0 0 14px;
}
.ma-van-rail__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #FAF9F6;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius);
    margin-bottom: 10px;
    text-decoration: none;
    min-height: 56px;
}
.ma-van-rail__item:hover { border-color: var(--v5-ink); }
.ma-van-rail__photo {
    width: 92px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.ma-van-rail__photo--empty { background: var(--v7-mist); display: block; }
.ma-van-rail__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ma-van-rail__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--v5-ink);
}
.ma-van-rail__price {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--v8-red-deep);
}
.ma-van-rail__all {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    color: var(--v8-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 980px) {
    .ma-van-single-inner--rail { grid-template-columns: 1fr; }
    .ma-van-rail { position: static; }
}

/* ── 15. Social page link cards. ── */
.ma-social-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 8px 0 24px;
}
.ma-social-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: #FAF9F6;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius);
    text-decoration: none;
    color: var(--v5-ink);
}
.ma-social-link:hover { border-color: var(--v5-ink); }
.ma-social-link strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--v8-blue);
}
.ma-social-link span { font-family: var(--font-body); font-size: 20px; line-height: 1.6; color: var(--v5-slate); }
@media (max-width: 640px) {
    .ma-social-links { grid-template-columns: 1fr; }
}

/* ── 16. Palette cleanup: bits that hardcoded the old navy/orange. ── */
.ma-van-card__no-photo {
    background: linear-gradient(135deg, #23272E 0%, #3A414B 100%);
}
body.ma-scrolled #masthead { box-shadow: 0 8px 22px -10px rgba(20, 24, 32, 0.25); }

/* Widen the single-van rail variant past the old single-column cap */
.ma-content-section .ma-van-single-inner.ma-van-single-inner--rail {
    max-width: 1180px !important;
    width: 100%;
}
.ma-van-single-inner--rail .ma-van-gallery__item,
.ma-van-single-inner--rail .ma-van-gallery__img {
    max-width: 100%;
}

/* Cookie text meets the 20px body-size non-negotiable. */
.ma-cookie-bar p { font-size: 20px; line-height: 1.5; }

/* ══ V8.1 CHALK WHITE + OFFICIAL ARTWORK (2026-07-21) — chalk pages, white cards ══ */

.ma-v6-why { background: var(--v8-chalk); }
.ma-v6-quotes { background: var(--v8-chalk); }
.ma-v8-video { background: var(--v8-chalk); }
.ma-trust-band { background: var(--v8-chalk); }
.ma-trust-band--compact { background: var(--v8-chalk); }

/* JC Gold Seal placements. */
.ma-v6-why-item--seal {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.ma-v6-why-seal {
    width: 74px;
    height: auto;
    flex-shrink: 0;
    margin-top: 2px;
}
.ma-v6-why-item-sealtext { min-width: 0; }
.ma-cert-seal {
    margin: 24px 0 8px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.ma-cert-seal img { height: auto; flex-shrink: 0; }
.ma-cert-seal figcaption {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate);
}

/* FB video: match the plugin's actual render ratio (the old site
   embedded it at 940×220). */
.ma-v8-video-frame {
    aspect-ratio: 47 / 11;
    max-width: 940px;
}
@media (max-width: 640px) {
    /* At phone widths a 4.3:1 strip gets uselessly short — let the
       plugin lay itself out naturally instead. */
    .ma-v8-video-frame { aspect-ratio: 16 / 9; }
}

/* ══ V9 PRODUCT-FINDER QUIZ (2026-07-21) — engine in functions.php, steps in post 5 ══ */
.ma-quiz-progress {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v7-steel);
    margin: 0 0 10px;
}
.ma-quiz-step .ma-quiz-back { margin-bottom: 4px; }
.ma-quiz-result-card {
    background: #FAF9F6;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius);
    padding: 28px 30px;
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}
.ma-quiz-result-name {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    color: var(--v5-ink);
    margin: 0 0 10px !important;
}
.ma-quiz-result-why {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate);
    margin: 0 0 14px;
}
.ma-quiz-result-preowned {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-ink);
    background: var(--v7-mist);
    border-left: 4px solid var(--v8-blue);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin: 0 0 16px;
}
.ma-quiz-result-preowned a,
.ma-quiz-result-alt a {
    color: var(--v8-blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-quiz-result-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 14px;
}
.ma-quiz-result-alt {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate);
    margin: 0;
}
.ma-quiz-result-note {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate);
    max-width: 560px;
    margin: 20px auto 0;
}
.ma-quiz-restart {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    margin-top: 8px;
    background: none;
    border: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--v7-steel);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-quiz-restart:hover { color: var(--v5-ink); }
@media (max-width: 640px) {
    .ma-quiz-restart { min-height: 56px; }
    .ma-quiz-result-card { padding: 22px 20px; }
}

/* ══ V9 CLIENT PUNCH LIST ROUND 3 (2026-07-21) ══ */

/* ── Hero: bigger CTAs (client: "bigger buttons"), sub-copy removed
   in content so the buttons sit right under the headline. ── */
.ma-v7-hero-ctas { margin-top: 26px; }
.ma-v7-hero-ctas .ma-v7-btn {
    font-size: 22px;
    min-height: 64px;
    padding: 18px 38px;
    white-space: nowrap;
    padding-left: 26px;
    padding-right: 26px;
}
@media (max-width: 768px) {
    .ma-v7-hero-ctas .ma-v7-btn { min-height: 64px; }
}

/* ── Hero certification logos (real artwork replaces the text list;
   VA item removed per client). ── */
.ma-v7-hero-facts--logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 28px 24px 34px;
}
.ma-v7-hero-facts--logos li { margin: 0; display: flex; align-items: center; }
.ma-v7-hero-facts--logos img {
    width: auto;
    object-fit: contain;
}

/* ── Brand strip: real logos where files exist, text badges otherwise. ── */
.ma-brand-logo { display: inline-flex; align-items: center; }
.ma-brand-logo img {
    height: 34px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

/* ── Used-emphasis band (homepage). ── */
.ma-v9-used {
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 64px 24px;
}
.ma-v9-used-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.ma-v9-used-heading { font-size: clamp(1.9rem, 3vw, 2.4rem); margin: 0 0 16px; }
.ma-v9-used-copy { font-size: 21px; line-height: 1.6; margin: 0 0 26px; }
.ma-v9-used-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ── Homepage financing calculator section. ── */
.ma-v9-calc {
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    background: #FAF9F6;
    padding: 64px 24px 0;
}
.ma-v9-calc-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.ma-v9-calc-heading { font-size: clamp(1.9rem, 3vw, 2.4rem); margin: 0 0 14px; }
.ma-v9-calc-copy { font-size: 21px; line-height: 1.6; margin: 0; }
.ma-estimator--home {
    max-width: 860px;
    margin: 34px auto 64px;
    background: #FAF9F6;
    border: 1px solid var(--v7-hairline, #DCE3EA);
    border-radius: 10px;
    padding: 30px 28px;
}

/* ── Lift finder (Vehicle Lifts category). ── */
.ma-liftfinder {
    width: 100%;
    background: #FAF9F6;
    border: 1px solid var(--v7-hairline, #DCE3EA);
    border-radius: 10px;
    padding: 26px 24px;
    margin: 0 0 22px;
}
.ma-liftfinder__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--v8-charcoal, #23272E);
    margin: 0 0 6px;
}
.ma-liftfinder__sub { font-size: 20px; line-height: 1.6; margin: 0 0 18px; }
.ma-liftfinder__note { font-size: 20px; line-height: 1.6; margin: 16px 0 0; }
/* Harmar calculator link-out button (2026-07-24) — displays as a proper
   block CTA rather than an inline text link. */
.ma-liftfinder__harmar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}/* ── Upsell image tiles (shared). ── */
.ma-upsell__heading {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--v8-charcoal, #23272E);
    margin: 0 0 12px;
}
.ma-upsell__grid { display: grid; gap: 14px; }
.ma-upsell__tile {
    display: flex;
    flex-direction: column;
    background: #FAF9F6;
    border: 1px solid var(--v7-hairline, #DCE3EA);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--v8-charcoal, #23272E);
}
.ma-upsell__tile:hover { border-color: var(--v8-blue, #2633C5); }
.ma-upsell__media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAF9F6;
    height: 150px;
    padding: 10px;
}
.ma-upsell__img { max-height: 130px; width: auto; max-width: 100%; object-fit: contain; }
.ma-upsell__title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    padding: 0 16px 2px;
}
.ma-upsell__sub { font-size: 20px; line-height: 1.6; color: var(--v5-slate, #44576B); padding: 0 16px 16px; }
/* Product pages: full-width 3-up strip */
.ma-upsell--product { max-width: 1180px; margin: 40px auto 0; }
.ma-upsell--product .ma-upsell__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ── Contact page: THE BIG CALL. ── */
.ma-bigcall {
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    background: #FAF9F6;
    padding: 56px 24px;
    text-align: center;
}
.ma-bigcall-label {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v8-red-deep, #A31B24);
    margin: 0 0 10px;
}
.ma-bigcall-number {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 900;
    /* 36px min keeps the number on one line down to 360px */
    font-size: clamp(2.25rem, 9vw, 5.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--v8-blue, #2633C5) !important;
    text-decoration: none;
    margin: 0 0 12px;
}
.ma-bigcall-number:hover { color: var(--v8-blue-deep, #1B2489) !important; text-decoration: underline; }
.ma-bigcall-sub { font-size: 21px; line-height: 1.6; color: var(--v5-slate, #44576B); margin: 0; }/* Utility bar: three groups (trust / rating / contact) centred as one cluster */
/* Top-level separators get spacing from the flex gap */
.ma-utility-bar-inner > .ma-utility-sep { margin: 0; }

@media (max-width: 768px) {
    /* ⚠️ !important needed: `.ma-utility-bar a.ma-utility-rating` sets display with higher specificity */
    .ma-utility-bar-inner > .ma-utility-rating,
    .ma-utility-bar-inner > .ma-utility-sep {
        display: none !important;
    }
}

/* ══ PRODUCT GRID ALIGNMENT FIX (2026-07-22) — ul.products becomes a real grid, button pinned with margin-top:auto ══ */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 28px !important;
    padding: 0 !important;
}
/* ⚠️ WC's float clearfix ::before/::after become grid items and eat the first cell */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}
.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    height: 100%;
}
.woocommerce ul.products li.product > .woocommerce-loop-product__link,
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.woocommerce ul.products li.product .price {
    margin-top: auto;
}
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > a.button {
    margin-top: 12px;
}/* About videos stacked, one per row, so each frame reads as a video */
.ma-about-videos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1180px;
}
.ma-about-videos .ma-v8-video-frame {
    /* ⚠️ Not margin:auto: it disables grid stretch and collapsed the frames */
    max-width: none;
}
@media (max-width: 700px) {
    .ma-about-videos { grid-template-columns: 1fr; }
}

/* ══ VAN ARCHIVE PAGINATION ══ */
/* Every selector has a .ma-pager twin for the WooCommerce pager */
.ma-pager,
.ma-van-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 32px 0 8px;
}
.ma-pager__link,
.ma-van-pagination__link {
    color: var(--v8-blue, #2633C5);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
}
@media (max-width: 480px) {
    .ma-pager,
    .ma-van-pagination { flex-direction: column; gap: 12px; }
}

/* ══ HOMEPAGE REFRESH (2026-07-24) — red phone pill, red frame on the nav row ══ */
.ma-utility-bar .ma-utility-phone,
.ma-utility-bar a[href^="tel"].ma-utility-phone {
    font-weight: 800 !important;
}
.ma-utility-bar .ma-utility-phone svg,
.ma-utility-bar a[href^="tel"].ma-utility-phone svg {
    flex-shrink: 0;
}

/* ── Red frame moved to the nav row (logo + menu), not the utility bar
   above it — client correction, 2026-07-24. ── */

/* ── Vehicle Lifts: "can't find compatibility" phone emphasized in red
   (client request 2026-07-24). ── */
.ma-compat-cta-phone {
    color: var(--v8-red-deep, #A31B24) !important;
    font-weight: 800 !important;
    font-size: 22px;
    text-decoration: none !important;
}
.ma-compat-cta-phone:hover { text-decoration: underline !important; }

/* Services: "every type of conversion" band */
.ma-conversion-band {
    /* Dark-ink heading and one top accent, like every other alt section */
    border-top: 3px solid var(--v8-red, #C4222B);
    padding: 48px 24px;
    margin: 8px 0;
}
.ma-conversion-band__inner { max-width: 760px; margin: 0 auto; }
.ma-conversion-band__eyebrow {
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v8-red-deep, #A31B24);
    margin: 0 0 10px;
}
.ma-conversion-band__heading {
    font-family: var(--font-display);
    line-height: 1.15;
    color: var(--v5-ink, #23272E);
    margin: 0 0 16px;
}
.ma-conversion-band__lead {
    font-size: 21px;
    line-height: 1.6;
    color: var(--v8-charcoal, #23272E);
    margin: 0 0 12px;
}

.ma-conversion-band__cta {
    font-size: 20px;
    line-height: 1.6;
    color: var(--v8-charcoal, #23272E);
    margin: 22px 0 0;
}
.ma-conversion-band__cta a { color: var(--v8-red-deep, #A31B24); }

/* ── Contact / Find Us: embedded Google Map + Get Directions button
   (client request 2026-07-24). Responsive 16:9 iframe, no external CSS. ── */
.ma-map-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--v7-radius, 10px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin: 8px 0 20px;
}
.ma-map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}/* Store header with an optional right-hand photo ($image_url in ma_emit_store_header) */
.ma-store-header--media .ma-store-header-inner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.ma-store-header--media .ma-store-header-inner {
    flex: 1 1 480px;
    min-width: 0;
}
.ma-store-header__media {
    flex: 0 1 420px;
    border-radius: var(--v7-radius, 10px);
    overflow: hidden;
    box-shadow: 0 8px 28px -14px rgba(20, 24, 32, 0.35);
}
.ma-store-header__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 900px) {
    .ma-store-header--media .ma-store-header-inner-row {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 24px;
    }
    .ma-store-header__media { flex-basis: auto; }
}

/* Van single: two spec tables side by side */
.ma-van-details-grid {
    display: grid;
    gap: 32px;
    margin-top: 40px;
}
.ma-van-details-grid .ma-van-details { margin-top: 0; }

@media (max-width: 700px) {
    .ma-van-details-grid { gap: 8px; }
}

/* Van single: photo lightbox (Escape and backdrop close, wired in functions.php) */
.ma-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(16, 20, 26, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ma-lightbox[hidden] { display: none; }
.ma-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
}
/* Close and Zoom share the chrome; each keeps only its own right/size/shape below */
.ma-lightbox__close,
.ma-lightbox__zoom {
    position: fixed;
    top: 16px;
    z-index: 3;
    height: 48px;
    display: inline-flex;
    align-items: center;
    color: #FAF9F6;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    cursor: pointer;
}
.ma-lightbox__close {
    right: 20px;
    width: 48px;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    border-radius: 50%;
}
.ma-lightbox__close:hover,
.ma-lightbox__zoom:hover { background: rgba(255, 255, 255, 0.22); }

.ma-v6-reviews-cta {
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: var(--v7-radius, 10px);
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;
}
.ma-v6-reviews-cta-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.3;
    margin: 0;
    color: var(--v8-charcoal, #23272E);
}
.ma-v6-reviews-cta-text {
    margin: 0 0 4px;
    font-size: 20px;              /* project rule: body text >= 20px */
    line-height: 1.6;
    color: var(--v5-slate, #4A5560);
}
.ma-v6-reviews-cta-link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--v8-blue, #2633C5) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;             /* tap target */;
    gap: 7px;
}
.ma-v6-reviews-cta-link:hover,
.ma-v6-reviews-cta-link:focus { color: var(--v8-red-deep, #A31B24) !important; }
/* Reviews page lead line above the profiles card */
.ma-reviews-lead { font-size: 20px; line-height: 1.6; margin: 0 0 18px; }

/* ── 2. Mobile hero: ticket sits BELOW the photo, never over it ── */
@media (max-width: 900px) {
    .ma-v7-hero-photo { margin-bottom: 0; }
    .ma-v7-ticket {
        padding: 16px 18px;
    }
}

/* ── 3. Mobile header: logo left, hamburger right, one row ── */
@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-direction: row;
    }
    .inside-header .mobile-menu-control-wrapper {
        flex: 0 0 auto;
        margin-left: auto;
        background: none !important;
    }
    .inside-header .mobile-menu-control-wrapper .menu-toggle {
        background-color: transparent !important;
        min-height: 48px;
        min-width: 48px;
        padding: 10px 8px;
    }
    /* nav (and its search icon) drops to its own full-width row */
    .inside-header #site-navigation { flex-basis: 100%; }
}

/* ── 4. Hero CTA labels stay on one line ── */
@media (max-width: 768px) {
    .ma-v7-hero-ctas .ma-v7-btn {
        font-size: 19px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Review source attribution (real Google reviews) */
.ma-v6-quote-src {
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--v5-slate, #4A5560);
    opacity: 0.85;
}
.ma-v6-quote-src::before { content: "\00b7"; margin: 0 6px 0 2px; opacity: 0.6; }
/* Long reviews shouldn't make one card tower over its neighbours. */
.ma-v6-quote { align-self: start; }

/* ══ VAN ENQUIRY FORM (2026-07-26) — WPForms 523, sizes per the non-negotiables ══ */
.ma-van-ask {
    margin: 44px 0 0;
    padding: 34px 36px 30px;
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: var(--v7-radius, 10px);
    /* Redundant now that the scrollport padding is correct - the two ADD up, and together they pushed the target ~150px below the header. */
    scroll-margin-top: 0;
}
.ma-van-ask > h2 {
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--v8-charcoal, #23272E);
}
.ma-van-ask__lede {
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate, #4A5560);
    margin: 0 0 22px;
    max-width: 60ch;
}
.ma-van-ask__lede a { font-weight: 700; color: var(--v8-red-deep, #A31B24); }

/* Labels stay visible - never placeholder-only, per the elderly-first brief. */
.ma-van-ask .wpforms-field-label {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--v8-charcoal, #23272E) !important;
    margin-bottom: 6px !important;
}
.ma-van-ask .wpforms-field-sublabel,
.ma-van-ask .wpforms-field-description {
    font-size: 17px !important;
    color: var(--v5-slate, #4A5560) !important;
}
.ma-van-ask input[type="text"],
.ma-van-ask input[type="email"],
.ma-van-ask input[type="tel"],
.ma-van-ask textarea {
    font-size: 20px !important;
    min-height: 56px;
    padding: 12px 14px !important;
    border: 1px solid var(--v7-hairline, #DCE3EA) !important;
    border-radius: 8px !important;
    background: var(--v8-chalk, #FAF9F6) !important;
    width: 100%;
}
.ma-van-ask textarea { min-height: 130px; line-height: 1.6; }
.ma-van-ask input:focus,
.ma-van-ask textarea:focus {
    outline: 2px solid var(--v8-blue, #2633C5) !important;
    outline-offset: 1px;
    border-color: var(--v8-blue, #2633C5) !important;
}
.ma-van-ask .wpforms-submit {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    min-height: 56px;
    padding: 15px 34px !important;
    background: var(--v8-red, #C4222B) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer;
}
.ma-van-ask .wpforms-submit:hover,
.ma-van-ask .wpforms-submit:focus {
    background: var(--v8-red-deep, #A31B24) !important;
}

@media (max-width: 768px) {
    .ma-van-ask { padding: 26px 20px 24px; margin-top: 34px; }
    .ma-van-ask > h2 { font-size: 28px; }
    .ma-van-ask .wpforms-submit { width: 100%; }
}

/* Van features list: two columns on desktop */
.ma-van-features { margin: 40px 0 0; }
.ma-van-features h2 { font-size: 30px; line-height: 1.25; margin: 0 0 6px; }
.ma-van-features h2::after {
    content: ""; display: block; width: 46px; height: 4px;
    background: var(--v8-red, #C4222B); border-radius: 2px; margin: 10px 0 18px;
}
.ma-van-features__list {
    list-style: none; margin: 0; padding: 0;
    columns: 2; column-gap: 40px;
}
.ma-van-features__list li {
    position: relative; padding-left: 26px; margin: 0 0 10px;
    font-size: 20px; line-height: 1.5; color: var(--v5-slate, #4A5560);
    break-inside: avoid;
}
.ma-van-features__list li::before {
    content: ""; position: absolute; left: 6px; top: 12px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--v8-red, #C4222B);
}
@media (max-width: 768px) {
    .ma-van-features__list { columns: 1; }
    .ma-van-features h2 { font-size: 28px; }
}
/* Three spec groups now (Vehicle / Engine & Performance / Conversion) instead
   of two - auto-fit so they sit 3-up on desktop and stack cleanly below. */
.ma-van-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    align-items: start;
}

/* ══ V11 HERO INVENTORY SLIDESHOW + CARD MOTION (2026-07-28) — chips are opaque white for guaranteed contrast ══ */

/* ── Hero slideshow: frame + slides ──────────────────────── */
/* Frame border lives on the viewport so stacked slides read as one frame */
.ma-v7-hero-photo .ma-hero-slides__viewport {
    position: relative;
    /* 4/3 matches the 940x700 van photos: no crop of the price badge or ramp */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius, 10px);
    background: var(--color-bg-warm, #F3F0E9);
}
.ma-hero-slides { position: relative; }

.ma-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}
.ma-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.ma-hero-slide__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.ma-v7-hero-photo .ma-hero-slide__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;      /* the viewport owns the ratio now */
    object-fit: cover;
    object-position: center 45%;
    border: 0;
    border-radius: 0;
}

/* ── Caption chip ────────────────────────────────────────── */
/* Caption top-left: bottom-left belongs to the van ticket */
.ma-hero-slide__caption {
    position: absolute;
    top: 14px;
    left: 14px;
    max-width: calc(100% - 84px);
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 16px;
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: var(--v7-radius, 10px);
    /* Long trims like "Grand Caravan SXT" must not wrap mid-word - the
       recurring mid-word-wrap bug class. */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}
.ma-hero-slide__caption-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.3;
    color: var(--v5-ink, #23272E);
}
.ma-hero-slide__caption-spec {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v5-slate, #4A5560);
}

/* ── Prev/Next arrows (2026-08-24) ───────────────────────── */
/* Prev/next: 52px desktop / 56px mobile, opaque chips */
.ma-hero-slides__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 50%;
    color: var(--v5-ink, #23272E);
    cursor: pointer;
}
.ma-hero-slides__arrow[hidden] { display: none; }
.ma-hero-slides__arrow--prev { left: 14px; }
.ma-hero-slides__arrow--next { right: 14px; }
.ma-hero-slides__arrow:hover {
    background: var(--color-bg-warm, #F3F0E9);
}
.ma-hero-slides__arrow:focus,
.ma-hero-slides__arrow:focus-visible {
    outline: 3px solid var(--v8-blue, #2633C5);
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .ma-hero-slides__arrow {
        width: 56px;
        height: 56px;
    }
}

/* ── Pause control: present for accessibility, invisible in normal use ──── */
/* Pause stays focusable but invisible until focused (WCAG 2.2.2); opacity, not display:none, keeps it in tab order */
.ma-hero-slides__pause {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 50%;
    color: var(--v5-ink, #23272E);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
/* ⚠️ Required: display:flex above beats the UA [hidden] rule */
.ma-hero-slides__pause[hidden] { display: none; }

.ma-hero-slides__pause:focus,
.ma-hero-slides__pause:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 3px solid var(--v8-blue, #2633C5);
    outline-offset: 2px;
}
.ma-hero-slides__icon-play { display: none; }
.ma-hero-slides.is-paused .ma-hero-slides__icon-pause { display: none; }
.ma-hero-slides.is-paused .ma-hero-slides__icon-play  { display: block; }

.ma-hero-slide__link:focus-visible {
    outline: 3px solid var(--v8-blue, #2633C5);
    outline-offset: 2px;
}

/* The frame is only ~282px wide on a 390px phone. With no controls competing
   for space the caption takes the full width, which keeps it to two lines. */
@media (max-width: 600px) {
    .ma-hero-slide__caption {
        max-width: calc(100% - 24px);
        padding: 7px 13px;
    }
    .ma-hero-slide__caption-name { font-size: 16px; }
}

/* ── Van cards: second-photo peek ────────────────────────── */
.ma-van-card__photo-wrap { position: relative; }
.ma-van-card__photo--peek {
    position: absolute;
    inset: 0;
    transition: opacity 450ms ease;
}

/* ── Category cards: hover/focus response ────────────────── */
.ma-v7-cat:hover .ma-v7-cat-media img,
.ma-v7-cat:focus-within .ma-v7-cat-media img {
    transform: scale(1.04);
}
.ma-v7-cat:hover .ma-v7-cat-cta,
.ma-v7-cat:focus-within .ma-v7-cat-cta {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Keyboard focus for category cards; !important to match the hover rule */
.ma-v7-cat:focus-within {
    border-color: var(--v5-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
    .ma-hero-slide,
    .ma-van-card__photo--peek,
    .ma-v7-cat-media img {
        transition: none;
    }
    .ma-v7-cat:hover .ma-v7-cat-media img,
    .ma-v7-cat:focus-within .ma-v7-cat-media img {
        transform: none;
    }
}

/* ── Hero ticket: below the photo, not on top of it (2026-07-28) ────────── */
/* The inventory ticket sits below the photo at every width, so it never hides the van */
.ma-v7-ticket {
    position: static;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: 14px;
}

/* ── Dual-sticky header: masthead sits below the utility bar, not under it ── */
/* Masthead offset from --ma-sticky-top (measured by js/animations.js); .admin-bar variant listed because it out-ranks #masthead */
#masthead,
.admin-bar #masthead {
    top: var(--ma-sticky-top, 40px);
}

/* Anchor scroll offset from the measured sticky header height */
html {
    scroll-padding-top: calc(var(--ma-header-h, 125px) + 16px);
}

/* ── Utility bar collapses on scroll-down (phones only) ─────────────────── */

/* ══ CONTENT-PAGE HERO (2026-07-28) — markup from the render_block_core/group filter; full-bleed band via its own side padding ══ */

/* ⚠️ Descendant selectors: `.ma-page-hero p` (0,1,1) beats a bare class */
.ma-page-hero .ma-page-hero__eyebrow {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v8-blue, #2633C5);
    margin: 0 0 12px !important;
}

.ma-page-hero .ma-page-hero__actions {
    margin: 28px 0 0 !important;
}
/* Reuses .ma-v7-btn for the 50/56px sizing */
.ma-page-hero__actions .ma-v7-btn {
    display: inline-flex;
}

/* Phones: single column, tighter padding (the heading and body sizes can't shrink) */
@media (max-width: 900px) {
    .ma-page-hero {
        padding-top: 34px !important;
        padding-bottom: 38px !important;
    }
    .ma-page-hero .ma-page-hero__actions { margin-top: 22px !important; }
}

/* ══ CONTENT-PAGE BODIES (2026-07-28) — service cards and split bands on the current card recipe, not .ma-door ══ */
.ma-svc-grid {
    display: grid;
    gap: 18px;
    margin: 34px 0 30px;
    text-align: left;   /* the conversion band centres its own text */
}
.ma-svc-grid--two {
    gap: 22px;
}

.ma-svc-card {
    border: 1px solid var(--line, #E4E1DA);
    border-radius: var(--v7-radius, 10px);
    padding: 26px 28px 24px;
    display: flex;
    flex-direction: column;
}
/* Optional card photo bleeds past the card padding with matching negative margins */
.ma-svc-card__media {
    margin: -26px -28px 18px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--v7-radius, 10px) var(--v7-radius, 10px) 0 0;
}
.ma-svc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ma-svc-card__title {
    font-family: var(--font-display);
    line-height: 1.2;
    color: var(--v5-ink, #23272E);
    margin: 0 0 12px;
    /* Long unbroken labels must not wrap mid-word — recurring bug class. */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}
.ma-svc-card p {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate, #4A5560);
    margin: 0 0 14px;
}
.ma-svc-card p:last-child { margin-bottom: 0; }
.ma-svc-card__cta { margin-top: auto; padding-top: 6px; }
.ma-svc-card__cta a {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--v8-blue, #2633C5);
    text-decoration: none;
}
.ma-svc-card__cta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Split band: photo one side, copy the other ── */
.ma-splitband {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 66px 32px;
}
.ma-splitband__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: var(--v7-radius, 10px);
}
.ma-splitband__eyebrow {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.ma-splitband__heading {
    font-family: var(--font-display);
    color: var(--v5-ink, #23272E);
    margin: 0 0 16px;
}
.ma-splitband__content p {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate, #4A5560);
    margin: 0 0 14px;
}
.ma-splitband__cta a {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--v8-blue, #2633C5);
    text-decoration: none;
}
.ma-splitband__cta a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ma-svc-section__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 62px 32px;
}
.ma-svc-section__eyebrow {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.ma-svc-section__heading {
    font-family: var(--font-display);
    color: var(--v5-ink, #23272E);
    margin: 0 0 4px;
}

@media (max-width: 900px) {
    .ma-splitband {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 44px 20px;
    }
    /* Photo above the copy when stacked, so the section still leads visually. */
    .ma-splitband__media { order: -1; }
    .ma-splitband__img { aspect-ratio: 16 / 9; }
    .ma-svc-section__inner { padding: 44px 20px; }
    .ma-svc-grid { gap: 14px; }
}

/* Only the card grid breaks out of the 760px prose measure; capped to the viewport */
@media (min-width: 901px) {
    .ma-conversion-band .ma-svc-grid {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: min(1100px, calc(100vw - 64px));
    }
}
/* Wider floor: 4 cards lay out 2x2 */
.ma-conversion-band .ma-svc-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

/* ── Contact: address / hours / phone as cards, map given real presence ──── */
/* Find-us: fact cards and a full-width map */
.ma-findus__lead {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate, #4A5560);
    max-width: 760px;   /* prose stays readable even though the band is wide */
    margin: 14px 0 0;
}
.ma-findus__cards { margin-top: 30px; }
.ma-findus .ma-svc-card p { margin-bottom: 10px; }
.ma-findus .ma-svc-card a { color: var(--v8-blue, #2633C5); }

.ma-map-embed--wide {
    aspect-ratio: 21 / 9;
    margin: 30px 0 0;
}
@media (max-width: 900px) {
    /* A 21/9 map on a phone is a letterbox slot — go taller so the streets
       around the store are actually legible. */
    .ma-map-embed--wide { aspect-ratio: 4 / 3; }
}

/* Long email addresses may break anywhere (headings never do) */
.ma-findus .ma-svc-card a[href^="mailto:"] {
    overflow-wrap: anywhere;
    font-size: 18px;
}

/* Two showroom photos side by side. They were previously stacked full-width in
   a 760px column, so the section was two big letterboxes and a lot of scroll. */
.ma-photo-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 28px;
}
.ma-photo-pair__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: var(--v7-radius, 10px);
}
@media (max-width: 900px) {
    .ma-photo-pair { gap: 14px; margin-top: 22px; }
    .ma-photo-pair__img { aspect-ratio: 16 / 9; }
}

/* About Us: the older sections move to the 1036px measure; paragraphs stay narrow */
/* ⚠️ !important needed: `.ma-content-section > *:not()...` has five chained :not()s (0,6,0) */
.page-id-9 .ma-content-section > .wp-block-group__inner-container {
    max-width: 1116px !important;
}
/* Constrained layout also caps and centres the children: undo both */
.page-id-9 .ma-content-section .wp-block-group__inner-container > * {
    max-width: 1036px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.page-id-9 .ma-content-section .wp-block-group__inner-container > p {
    max-width: 760px !important;
}

/* Numbered steps + ticked checklist, shared by the content pages */
.ma-steps {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    counter-reset: ma-step;
}
.ma-step {
    counter-increment: ma-step;
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: var(--v7-radius, 10px);
    padding: 24px 26px 22px;
}
.ma-step::before {
    content: counter(ma-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 14px;
    border-radius: 50%;
    background: var(--v8-red, #C4222B);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
}
.ma-step p {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate, #4A5560);
    margin: 0;
}
.ma-step__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    color: var(--v5-ink, #23272E);
    margin: 0 0 10px;
}

.ma-checklist {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px 28px;
}
.ma-checklist li {
    position: relative;
    padding-left: 34px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.5;
    color: var(--v5-ink, #23272E);
}
/* Tick drawn in CSS: decoration, no extra requests */
.ma-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 11px;
    border-left: 3px solid var(--v8-red, #C4222B);
    border-bottom: 3px solid var(--v8-red, #C4222B);
    transform: rotate(-45deg);
}

@media (max-width: 900px) {
    .ma-steps { gap: 14px; margin-top: 24px; }
    .ma-step__title { font-size: 24px; }
    .ma-checklist { gap: 10px 18px; margin-top: 20px; }
}

/* Plain (chalk) band, the alternating partner to .ma-svc-section's cream. */
.ma-plainband__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 62px 32px;
}
.ma-plainband__note {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate, #4A5560);
    max-width: 760px;
    margin: 22px 0 0;
}
@media (max-width: 900px) {
    .ma-plainband__inner { padding: 44px 20px; }
}

/* Single-column checklist for use inside a split band's narrow copy column. */
.ma-checklist--tight {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 18px 0 18px;
}
.ma-checklist--tight li { font-size: 19px; }

/* Catalogue cut-out on white, shown whole rather than cropped */
/* ⚠️ Must come before the --product override: same specificity, order decides */
.ma-v7-cat-media .ma-v7-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ma-v7-cat-media--product .ma-v7-cat-img {
    object-fit: contain;
}

/* Product cards: object-fit contain so cut-outs aren't cropped */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
    object-fit: contain !important;
    background: #FFFFFF;
}

/* ══ CLIENT ROUND 4 (2026-07-31) — one search, bigger header type, motion runs once; all motion inside prefers-reduced-motion: no-preference ══ */

/* The old flat-pill search was deleted 2026-08-08 (it was still winning against the popover) */

.inside-header { flex-wrap: wrap; row-gap: 10px; }

/* Logo and menu share row 1; both centred against it rather than one
   floating high and one low. */
.inside-header .site-branding,
.inside-header #site-navigation { align-self: center; }

/* Location and credentials up to 18px; !important to beat V5/V8 */
.ma-utility-bar .ma-utility-location {
    font-size: 18px !important;
    font-weight: 600;
}
.ma-utility-bar .ma-utility-location svg { width: 16px; height: 16px; }

.ma-utility-bar .ma-utility-trust-item,
.ma-utility-bar .ma-utility-hours {
    font-size: 18px !important;
    letter-spacing: -0.005em;
}
.ma-utility-bar a.ma-utility-rating { font-size: 18px !important; }
.ma-utility-bar a.ma-utility-rating svg { width: 17px; height: 17px; }
.ma-utility-bar a.ma-utility-rating strong { font-size: 19px; }

/* The bar wraps and centres at 18px */
.ma-utility-bar-inner {
    flex-wrap: wrap;
    row-gap: 8px;
}
/* Hide the separator that would dangle at the end of row 1 */
.ma-utility-bar .ma-utility-sep:has(+ .ma-utility-contact) { display: none; }

/* Phone: bigger, pulses twice on arrival */
.ma-utility-bar .ma-utility-phone,
.ma-utility-bar a[href^="tel"].ma-utility-phone {
    font-size: 23px !important;
}
.ma-utility-bar .ma-utility-phone:hover,
.ma-utility-bar .ma-utility-phone:focus-visible { transform: translateY(-2px) scale(1.02); }

/* "A real person answers": 26px */
.ma-v7-hero-human {
    font-size: 26px !important;
    line-height: 1.5;
}
.ma-v7-hero-human strong { font-weight: 800; }

/* ── B2. Review stars, bigger ──────────────────────────────────────────
   Markup is inline 18x18 SVGs; CSS overrides the width/height attrs. */
.ma-v6-quote-stars svg { width: 26px; height: 26px; }
.ma-v6-quote-stars { gap: 4px; }

/* The reviews page is the one place they are the point of the page. */
.page-id-33 .ma-v6-quote-stars svg { width: 30px; height: 30px; }

/* ── Page 27: the VA section is now a phone number, not a process ────── */
.ma-plainband__phone { margin: 6px 0 14px; }
.ma-plainband__phone a {
    font-size: 32px;
    font-weight: 800;
    color: var(--v8-red-deep, #A31B24);
    text-decoration: none;
}
.ma-plainband__phone a:hover { text-decoration: underline; }

/* ── MOTION ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

    /* Flag sweep along the red header lines: white then navy lobes; red is the border itself, so reduced-motion
       keeps the plain frame; top and bottom run opposite ways */
    #masthead::before,
    #masthead::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 3px;
        pointer-events: none;
        z-index: 1;
        background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0)  0%,
            rgba(255, 255, 255, 0)  38%,
            rgba(255, 255, 255, 0.95) 45%,
            rgba(255, 255, 255, 0.95) 49%,
            rgba(46, 51, 130, 1)    55%,
            rgba(46, 51, 130, 1)    63%,
            rgba(46, 51, 130, 0)    70%,
            rgba(46, 51, 130, 0)    100%
        );
        background-size: 280% 100%;
        background-repeat: no-repeat;
        animation: ma-line-sheen-ltr 12s linear infinite;
    }
    #masthead::before { top: -3px; }
    #masthead::after  {
        bottom: -3px;
        animation-name: ma-line-sheen-rtl;
        animation-delay: 6s;
    }

    /* ⚠️ The image is 280% of the box, so a rising background-position % moves it LEFT: -ltr counts down */
    @keyframes ma-line-sheen-ltr {
        0%   { background-position: 180% 0; }
        100% { background-position: -80% 0; }
    }
    @keyframes ma-line-sheen-rtl {
        0%   { background-position: -80% 0; }
        100% { background-position: 180% 0; }
    }

    /* A4. Two pulses shortly after arrival, then it stops for good. */
    @keyframes ma-phone-pulse {
        0%, 100% { transform: none; }
        35%      { transform: scale(1.07); }
    }
    .ma-utility-bar .ma-utility-phone {
        animation: ma-phone-pulse 1.3s ease-in-out 1s 2;
    }
    /* Hovering mid-pulse must not fight the keyframe. */
    .ma-utility-bar .ma-utility-phone:hover { animation: none; }

    /* Stars pop in when the quote scrolls into view; hidden start state only under .ma-animate, so JS off shows them */
    .ma-v6-quote.ma-animate .ma-v6-quote-stars svg {
        opacity: 0;
        transform: scale(.5) rotate(-25deg);
        transform-origin: 50% 50%;
    }
    .ma-v6-quote.in-view .ma-v6-quote-stars svg {
        animation: ma-star-pop .40s cubic-bezier(.2, .9, .3, 1.45) forwards;
    }
    .ma-v6-quote.in-view .ma-v6-quote-stars svg:nth-child(1) { animation-delay: .05s; }
    .ma-v6-quote.in-view .ma-v6-quote-stars svg:nth-child(2) { animation-delay: .13s; }
    .ma-v6-quote.in-view .ma-v6-quote-stars svg:nth-child(3) { animation-delay: .21s; }
    .ma-v6-quote.in-view .ma-v6-quote-stars svg:nth-child(4) { animation-delay: .29s; }
    .ma-v6-quote.in-view .ma-v6-quote-stars svg:nth-child(5) { animation-delay: .37s; }

    @keyframes ma-star-pop {
        0%   { opacity: 0; transform: scale(.5) rotate(-25deg); }
        70%  { opacity: 1; transform: scale(1.14) rotate(3deg); }
        100% { opacity: 1; transform: none; }
    }
}

/* Van archive: title on the photo; the scrim is baked into the same background declaration so the photo never shows without it */
.ma-store-header--hero {
    border-bottom: 3px solid var(--v8-red, #C4222B);
}
/* ⚠️ Needs p.ma-store-sub: `.ma-store-header p.ma-store-sub` beats a bare class (dark text on the photo) */
.ma-store-header--hero h1,
.ma-store-header--hero p.ma-store-sub { color: #FFFFFF !important; }
.ma-store-header--hero h1 {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    /* One 26px gap under the h1, like the content heroes */
    margin-bottom: 26px;
}
.ma-store-header--hero p.ma-store-sub {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
    margin-top: 0;
    /* 22px/400 to match; it was 21px/600, which read as a bold caption rather than the subtitle the other pages use. */
    font-size: 22px;
    font-weight: 400;
    max-width: 620px;
}
/* Breadcrumb sits on the photo too, so it needs the same treatment —
   the default charcoal-on-chalk link colour would vanish. */
.ma-store-header--hero .ma-store-breadcrumb,
.ma-store-header--hero .ma-store-breadcrumb a,
.ma-store-header--hero .ma-store-breadcrumb span { color: #F3F0E9 !important; }
.ma-store-header--hero .ma-store-breadcrumb a { text-decoration: underline; }
.ma-store-header--hero .ma-store-breadcrumb a:hover { color: #FFFFFF !important; }

/* Numbered pages. Targets are 44px so they clear the tap-target minimum
   used elsewhere on the site. */
.ma-pager__pages,
.ma-van-pagination__pages {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.ma-pager__num,
.ma-van-pagination__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 10px;
    background: #FFFFFF;
    font-weight: 700;
    color: var(--v8-charcoal, #23272E);
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, transform .15s ease;
}
.ma-pager__num:hover,
.ma-pager__num:focus-visible,
.ma-van-pagination__num:hover,
.ma-van-pagination__num:focus-visible {
    border-color: var(--v8-red, #C4222B);
    background: rgba(196, 34, 43, .06);
    transform: translateY(-1px);
}
.ma-pager__num.is-current,
.ma-van-pagination__num.is-current {
    background: var(--v8-red-deep, #A31B24);
    border-color: var(--v8-red-deep, #A31B24);
    color: #FFFFFF;
}
/* Pager ellipsis: a gap marker, not a target (no box, no hover) */
.ma-pager__num--dots {
    border-color: transparent;
    background: none;
    padding: 0 4px;
    color: var(--v8-charcoal, #23272E);
    opacity: .55;
    cursor: default;
}
.ma-pager__num--dots:hover {
    border-color: transparent;
    background: none;
    transform: none;
}
.ma-pager__more,
.ma-van-pagination__more {
    text-align: center;
    margin: 14px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--v8-charcoal, #23272E);
}
.ma-pager__more:empty,
.ma-van-pagination__more:empty { display: none; }

/* min(360px, 100%): a bare 360px floor overflowed the 290px phone column */
.ma-svc-grid--two {
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}
/* Same latent trap in the default grid — 288px is narrower so it only bites
   below ~330px of content width, but it is the identical construction. */
.ma-svc-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
}

/* New controls meet the 50/56px and 20px rules; the utility-bar credentials stay 18px (header chrome) */
.ma-nav-search__btn svg { width: 20px; height: 20px; }

/* ══ CONTENT-PAGE HERO: PHOTO BEHIND THE TITLE (2026-08-02) ══ ⚠️ .ma-page-hero's `background` shorthand is
   !important, so inline size/position need !important too */
/* ⚠️ Scrim shared by .ma-page-hero--photo and .ma-store-header--hero; stops measured against the longest hero
   copy (5.3:1). Adding copy to a hero? Re-measure, never eyeball */
.ma-page-hero--photo,
.ma-store-header--hero,
.ma-cinema-page-hero--photo,
.ma-v7-hero--photo {
    background-image:
        linear-gradient(to top,
            rgba(16, 20, 28, .93) 0%,
            rgba(16, 20, 28, .86) 70%,
            rgba(16, 20, 28, .34) 90%,
            rgba(16, 20, 28, .30) 100%),
        var(--ma-hero-photo) !important;
}
@media (max-width: 900px) {
    /* Phones: the ramp runs higher for the taller text block */
    .ma-page-hero--photo,
    .ma-store-header--hero,
    .ma-cinema-page-hero--photo,
    .ma-v7-hero--photo {
        background-image:
            linear-gradient(to top,
                rgba(16, 20, 28, .93) 0%,
                rgba(16, 20, 28, .86) 84%,
                rgba(16, 20, 28, .36) 96%,
                rgba(16, 20, 28, .32) 100%),
            var(--ma-hero-photo) !important;
    }
}

.ma-page-hero--photo {
    /* The photo is a background, so cover/no-repeat are not optional — see the
       shorthand warning above for why these carry !important. */
    background-size: cover !important;
    background-repeat: no-repeat !important;

    /* ⚠️ Text sits at the bottom: the scrim is bottom-weighted, so moving text up breaks the contrast guarantee */
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 420px;

    /* padding-top sets how much photo shows above the text; side padding is inherited, don't restate it */
    padding-bottom: 56px !important;

    border-bottom: 3px solid var(--v8-red, #C4222B);
}

/* ⚠️ Each colour needs !important: `.ma-page-hero h1/p` and the eyebrow rule set dark colours; contrast tools don't check text over images */
.ma-page-hero--photo h1,
.ma-page-hero--photo h1.wp-block-heading {
    color: #FFFFFF !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.ma-page-hero--photo p {
    color: #FFFFFF !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.ma-page-hero--photo .ma-page-hero__eyebrow {
    color: #F3F0E9 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
/* The CTA is a solid red button — a text-shadow on its label just smears it. */
.ma-page-hero--photo .ma-page-hero__actions,
.ma-page-hero--photo .ma-page-hero__actions .ma-v7-btn {
    text-shadow: none !important;
}

/* Hide GP's title whenever a hero is present (keyed on the hero, not the per-page sidebar setting) */
body.page:has(.ma-page-hero) .entry-header {
    display: none;
}

/* Stop the constrained layout centring the text column */
.ma-page-hero--photo > .wp-block-group__inner-container {
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* min-height is only a floor for short heroes */
@media (max-width: 900px) {
    .ma-page-hero--photo {
        min-height: 480px;
        padding-bottom: 34px !important;

        /* ⚠️ `cover` matches height on a portrait phone band and ignores the Y position; auto 145% restores vertical crop */
        background-size: auto 145% !important;
    }
}

/* ⚠️ Re-assert with !important: the `background: #FAF9F6 !important` shorthand wipes size and position */
.ma-store-header--hero {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 62% !important;
}

/* /wheelchair-vans/ hero uses the content-page hero scale; if that scale changes, change both */
.ma-store-header--hero {
    /* Bottom-aligned text, exactly like the content heroes — load-bearing,
       because the scrim these two now share is bottom-weighted. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 560px so the van hero lands within the other heroes' height range */
    min-height: 560px;
    padding-top: 200px;
    padding-bottom: 56px;
}
.ma-store-header--hero .ma-store-header-inner {
    /* 1080px column, matching the content heroes */
    max-width: 1080px;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}
.ma-store-header--hero h1 {
    /* clamp(1.9rem, 3.6vw, 2.6rem) — the .ma-page-hero value. Was 3.2vw. */
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    line-height: 1.06;
}
.ma-store-header--hero .ma-store-header__actions {
    margin: 28px 0 0;
}
.ma-store-header--hero .ma-store-header__actions .ma-v7-btn {
    display: inline-flex;
    text-shadow: none;
}

@media (max-width: 900px) {
    .ma-store-header--hero {
        min-height: 480px;
        padding-top: 96px;
        padding-bottom: 34px;
        /* Same portrait-band cover problem as the content heroes */
        background-size: auto 145% !important;
        /* Phone crop at 30% shows the storefront instead of the asphalt */
        background-position: center 30% !important;
    }
    .ma-store-header--hero h1 { font-size: 38px; }
    .ma-store-header--hero p.ma-store-sub { font-size: 20px; font-weight: 400; }
}
/* ⚠️ Must stay after the 768px .ma-store-header block (order decides) */
@media (max-width: 768px) {
    .ma-store-header--hero {
        padding: 96px 24px 34px;
    }
    .ma-store-header--hero h1 { font-size: 38px; }
}

/* ══ REAL PRICES + WAS-PRICE (2026-08-05) — both figures ink (no grey text); strikethrough carries the meaning; guarded by ma_van_was_price() ══ */

.ma-van-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.ma-van-card__price .ma-price-was,
.ma-van-pricebox__was {
    font-family: var(--font-display);
    text-decoration: line-through;
    /* Explicit thickness: the default hairline all but vanishes against the
       heavy display face at this size, which is the whole point of the mark. */
    text-decoration-thickness: 2px;
    color: var(--v5-ink);
    font-weight: 600;
    white-space: nowrap;
}
.ma-van-card__price .ma-price-was { font-size: 0.62em; }
.ma-van-card__price .ma-price-now { font-weight: inherit; }

.ma-van-pricebox__was {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.1;
    margin: 0 0 2px;
}
/* Tighten the gap the pricebox price normally leaves above itself, so the two
   figures read as one stacked pair rather than two unrelated lines. */
.ma-van-pricebox__was + .ma-van-pricebox__price { margin-top: 0; }

/* ══ STICKY HEADER COLLAPSE (2026-08-05) — past 120px the utility bar and search hide and the masthead becomes a
   ~64px strip, moved by transform ══ ⚠️ A transform changes neither top nor getBoundingClientRect();
   js/animations.js measures the collapsed height separately */

.ma-utility-bar,
#masthead {
    transition: transform 0.25s ease;
}

.ma-nav-collapsed .ma-utility-bar {
    transform: translateY(-100%);
}
/* Pull the masthead into the space the bar left (works with the admin bar) */
.ma-nav-collapsed #masthead {
    transform: translateY(calc(-1 * var(--ma-utility-h, 76px)));
}

/* Focus restores the header, so search stays reachable; the popover pair lives in AUDIT TASK 4 */

/* ── The collapsed strip ─────────────────────────────────────────────────── */
/* Re-assert flex: <=768px sets .inside-header to block */
.ma-nav-collapsed .inside-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /* ⚠️ !important needed: `.inside-header.grid-container` sets padding-top 14px !important */
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    row-gap: 0;
    /* Full-width strip: the 1120px container can't fit logo + menu + phone */
    max-width: none;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.ma-nav-collapsed .inside-header .site-branding { order: 1; flex: 0 0 auto; }

/* Logo resized on both axes to keep its 232:33 ratio */
.ma-nav-collapsed .inside-header .site-branding .main-title a {
    padding: 5px 12px;
}
/* ⚠️ Reset min-width too: the base logo rule's min-width beats width */
.ma-nav-collapsed .main-title a::before {
    width: 168px;
    min-width: 168px;
    height: 24px;
}

/* ── Phone pill — the reason the utility bar is allowed to leave ──────────── */
/* Header phone pill appears only when collapsed and above 768px; phones already have the sticky .ma-callbar */
.ma-header-call { display: none; }

.ma-nav-collapsed .ma-header-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--v8-red, #C4222B);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
}
.ma-nav-collapsed .ma-header-call:hover,
.ma-nav-collapsed .ma-header-call:focus-visible {
    background: var(--v8-red-deep, #A31B24);
    color: #FFFFFF;
}
.ma-nav-collapsed .ma-header-call svg { flex: 0 0 auto; }

/* ── >=1280px: keep the horizontal menu, drop only the bar and search ─────── */
/* 1280, not 1200: logo + menu + phone need ~1192px plus padding; 1200-1279 gets the hamburger */
@media (min-width: 1280px) {
    .ma-nav-collapsed .inside-header #site-navigation,
    .ma-nav-collapsed .inside-header .main-navigation {
        margin-left: auto;
    }
    .ma-nav-collapsed .ma-header-call {
        margin-left: 16px;
    }
    /* Nav compressed to 50px to share a centre line with the phone pill */
    .ma-nav-collapsed .inside-header .main-navigation .main-nav ul li a {
        line-height: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
        /* Horizontal padding buys back the width the phone pill now costs:
           logo(197) + menu + pill must fit the 1200px content row. */
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ── <=1279px: hamburger. Includes the 150%-zoom case this was built for ──── */
@media (max-width: 1279px) {
    /* GP renders the toggle wrapper at every width and menu.js isn't breakpoint-gated, so no JS needed */
    .ma-nav-collapsed #mobile-menu-control-wrapper {
        display: flex;
        flex: 0 0 auto;
    }
    /* ⚠️ Un-hide the button too: GP's base .menu-toggle is display:none outside its 768px query */
    .ma-nav-collapsed #mobile-menu-control-wrapper .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        min-width: 50px;
        padding: 0 12px;
        line-height: 1;
    }

    /* The menu opens as a panel under the strip so the bar height never changes */
    .ma-nav-collapsed .inside-header #site-navigation { display: none; }

    .ma-nav-collapsed .inside-header #site-navigation.toggled {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        order: 4;
        margin: 0;
        background: var(--v8-chalk, #FAF9F6);
        border-top: 1px solid var(--line, #E4E1DA);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        max-height: calc(100vh - var(--ma-header-h-collapsed, 64px) - 20px);
        overflow-y: auto;
    }
    /* Anchor for the absolutely-positioned panel above. */
    .ma-nav-collapsed .inside-header { position: relative; }

    /* Stack the items. Between 769px and 1199px the menu is normally a
       horizontal flex row, which as a dropdown would run off the side. */
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav > ul {
        display: block;
        flex-wrap: wrap;
    }
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav > ul > li {
        display: block;
        width: 100%;
    }
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav ul li a {
        line-height: 1.4;
        padding: 15px 20px;
    }
}

/* ⚠️ Must stay after the .ma-header-call rule above (order decides); 56px target on phones */
@media (max-width: 768px) {
    .ma-nav-collapsed .inside-header {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    /* The sticky call bar covers the phone at this width */
    .ma-nav-collapsed .ma-header-call { display: none; }
    .ma-nav-collapsed .inside-header .site-branding .main-title a {
        padding: 5px 9px;
    }
}

/* Anchor offset from the separately measured collapsed height */
html.ma-nav-collapsed {
    scroll-padding-top: calc(var(--ma-header-h-collapsed, 64px) + 16px);
}

/* The collapse is functional, not decorative, so it still happens under reduced
   motion — it just happens instantly instead of sliding. */
@media (prefers-reduced-motion: reduce) {
    .ma-utility-bar,
    #masthead {
        transition: none;
    }
}

/* ══ TYPE SIZE FLOOR (2026-08-06) — card badges and mega-menu: 18px text, 44px link rows ══ */

/* ── Card badges: 11px -> 18px ────────────────────────────── */
/* Padding grows with the text so pills keep their shape */
.ma-spec-tag,
.ma-van-tag {
    font-size: 18px;
    line-height: 1.3;
    padding: 6px 13px;
    /* letter-spacing at 18px no longer needs the 0.05em it had at 11px —
       tracking that opens up small caps makes larger caps look loose. */
    letter-spacing: 0.02em;
}

.ma-spec-tags,
.ma-van-card__tags {
    gap: 8px;
    /* line-height:1 on the container clipped descenders once the tags grew. */
    line-height: 1.3;
}

/* ── Mega-menu: 15px/36px -> 20px/44px ────────────────────── */

.main-navigation .main-nav ul.sub-menu li a {
    font-size: 20px;
    /* 20px x 1.2 + 10px padding x 2 = 44px row */
    line-height: 1.2;
    padding: 10px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* BATHROOM EQUIPMENT PAGE + HUB GRID  —  2026-08-07 */

/* ⚠️ flex-grow:0 !important keeps card width constant when a row isn't full; block-library's :not() selector (0,3,0) beats a plain declaration */
.ma-eq-grid > .wp-block-column {
    flex-grow: 0 !important;
}

/* ══ SITE FOOTER — markup from generate_before_copyright; `.site-info .ma-sf` (0,2,x) + !important beats the older .site-info rules ══ */

.site-info {
    padding: 0 !important;
    border-top: 3px solid var(--v8-red-deep);
}

/* ⚠️ GP's .inside-site-info is a flex row, which squeezed the footer columns side by side; make it a block */
.site-info .inside-site-info {
    display: block;
    max-width: none;
    padding: 0;
}

.site-info .ma-sf {
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) 2.4fr;
    gap: 48px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 24px 40px;
    text-align: left;
}

/* ── Brand + NAP ───────────────────────────────────────────────────────── */
.site-info .ma-sf-logo {
    display: block;
    width: max-content;
    max-width: 100%;
}
.site-info .ma-sf-logo-img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
}

.site-info .ma-sf-nap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-style: normal;          /* <address> italicises by default */
    font-size: 20px;             /* body-size non-negotiable applies in the footer */
    line-height: 1.5;
}
.site-info .ma-sf-nap a,
.site-info .ma-sf-hours {
    color: var(--v8-charcoal) !important;
}
.site-info .ma-sf-tel {
    font-size: 26px;
    font-weight: 800;
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}
.site-info .ma-sf-nap a:hover,
.site-info .ma-sf-nap a:focus {
    color: var(--v8-red-deep) !important;
    text-decoration: underline;
}
.site-info .ma-sf-hours {
    opacity: 0.85;
}

.site-info .ma-sf-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.site-info .ma-sf-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 52px — matches the documented footer social spec and clears both the
       44x44 tap-target minimum and the 50px desktop button rule. */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--v8-charcoal);
    color: #FAF9F6 !important;
    transition: background 0.18s ease, transform 0.18s ease;
}
.site-info .ma-sf-social a:hover,
.site-info .ma-sf-social a:focus {
    background: var(--v8-red);
    transform: translateY(-2px);
}
.site-info .ma-sf-social svg { width: 24px; height: 24px; }

/* ── Link columns ──────────────────────────────────────────────────────── */
.site-info .ma-sf-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.site-info .ma-sf-col-head {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--v8-red-deep) !important;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(35, 39, 46, 0.14);
}
.site-info .ma-sf-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-info .ma-sf-list li { margin: 0 0 4px; }
.site-info .ma-sf-list a {
    display: block;
    /* 12px vertical padding on a 1.4 line-box at 20px clears 44px height. */
    padding: 12px 8px 12px 0;
    font-size: 20px;
    line-height: 1.4;
    color: var(--v8-charcoal) !important;
    text-decoration: none;
    border-radius: 6px;
}
.site-info .ma-sf-list a:hover,
.site-info .ma-sf-list a:focus {
    color: var(--v8-red-deep) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-info .ma-sf a:focus-visible {
    outline: 3px solid var(--v8-red);
    outline-offset: 2px;
}

/* ── Legal row (GP's .copyright-bar, refilled via the generate_copyright
      filter — the "Built with GeneratePress" link is gone). ────────────── */
.site-info .copyright-bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px 28px;
    border-top: 1px solid rgba(35, 39, 46, 0.14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    font-size: 20px;
}
.site-info .ma-sf-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}
.site-info .ma-sf-legal-links a {
    color: var(--v8-charcoal) !important;
    padding: 8px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-info .ma-sf-legal-links a:hover,
.site-info .ma-sf-legal-links a:focus {
    color: var(--v8-red-deep) !important;
}
.site-info .ma-sf-copy { opacity: 0.8; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .site-info .ma-sf {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
@media (max-width: 700px) {
    .site-info .ma-sf {
        grid-template-columns: 1fr;
        padding: 40px 20px 32px;
    }
    .site-info .ma-sf-logo { margin-left: auto; margin-right: auto; }
    .site-info .ma-sf-brand { text-align: center; }
    .site-info .ma-sf-nap { align-items: center; text-align: center; }
    .site-info .ma-sf-social { justify-content: center; }
    .site-info .copyright-bar { justify-content: center; text-align: center; }
}

/* Estimator result panel: links were 1.00:1 (same colour as the panel); chalk + underline. ⚠️ Panel is hidden
   until Calculate: re-check with tools/css-audit/contrast.js */

/* Opacity on the wrapper faded the links too; #CFCFCE matches the old composite (9.61:1) */
.ma-est-disclaimer {
    opacity: 1;
    color: #CFCFCE;
}

.ma-est-result a {
    color: var(--v8-chalk);           /* #FAF9F6 — 14.24:1 on #23272E */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-style: normal;
    font-weight: 700;
}
.ma-est-result a:hover {
    background: var(--v8-chalk);
    color: var(--v8-charcoal);
    text-decoration-thickness: 3px;
    border-radius: 3px;
    box-shadow: 0 0 0 3px var(--v8-chalk);   /* pad the chip without shifting layout */
}
.ma-est-result a:focus-visible {
    outline: 3px solid var(--v8-chalk);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ══ AUDIT TASK 4: HEADER CONSOLIDATION (2026-08-08) — mobile menu breakpoint moved to 1100px (functions.php), search behind a magnifier ══ */

/* ── 1. Search: icon that expands ──────────────────────────────────────── */
.ma-nav-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.ma-nav-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 48px clears the 44x44 tap-target minimum (audit Task 9.2). */
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid rgba(35, 39, 46, 0.22);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--v8-charcoal);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ma-nav-search-toggle:hover,
.ma-nav-search-toggle[aria-expanded="true"] {
    background: var(--v8-red);
    border-color: var(--v8-red);
    color: #FFFFFF;
}
.ma-nav-search-toggle:focus-visible {
    outline: 3px solid var(--v8-red);
    outline-offset: 2px;
}

/* display:none while closed so the field leaves the tab order */
/* ⚠️ Popover panel: restate every sizing property; it's absolute, so an inherited max-width:100% resolves against the 48px toggle */
.ma-nav-search-wrap .ma-nav-search {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    width: min(360px, calc(100vw - 32px));
    max-width: none;
    min-width: 0;
    height: auto;
    overflow: visible;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 14px;
    box-shadow: 0 12px 32px -12px rgba(20, 24, 32, 0.35);
}
.ma-nav-search-wrap.ma-nav-search--open .ma-nav-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The field needs its own border now that it sits on a white panel */
.ma-nav-search-wrap .ma-nav-search input[type="search"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 52px;              /* >= 50px desktop control non-negotiable */
    height: auto;
    padding: 0 14px;
    font-size: 20px;               /* body-size non-negotiable */
    color: var(--v8-charcoal, #23272E);
    background: #FFFFFF;
    border: 1.5px solid rgba(35, 39, 46, 0.22);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
/* The UA placeholder is #757575 — 4.6:1 on white, which squeaks past AA but is
   exactly the grey-on-white the brief bans outright. */
.ma-nav-search-wrap .ma-nav-search input[type="search"]::placeholder {
    color: #55595F;                /* 7.0:1 on #FFF */
    opacity: 1;                    /* Firefox dims placeholders by default */
}

/* ONE focus ring, on the field — not one on the field and another on the
   panel. Red to match the toggle's :focus-visible treatment above. */
.ma-nav-search-wrap .ma-nav-search input[type="search"]:focus {
    outline: none;
    border-color: var(--v8-red, #C4222B);
    box-shadow: 0 0 0 3px rgba(196, 34, 43, 0.25);
}
.ma-nav-search-wrap .ma-nav-search:focus-within { outline: none; }

/* Red, not blue: one accent colour */
.ma-nav-search-wrap .ma-nav-search__btn {
    flex: 0 0 auto;
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .18s ease;
}
.ma-nav-search-wrap .ma-nav-search__btn:hover,
.ma-nav-search-wrap .ma-nav-search__btn:focus-visible {
    background: var(--v8-red-deep, #A31B24);
}
.ma-nav-search-wrap .ma-nav-search__btn:focus-visible {
    outline: 3px solid var(--v8-red, #C4222B);
    outline-offset: 2px;
}

/* Mobile: same panel, taller controls (>= 56px button non-negotiable). */
@media (max-width: 768px) {
    .ma-nav-search-wrap .ma-nav-search input[type="search"] { min-height: 56px; }
    .ma-nav-search-wrap .ma-nav-search__btn {
        width: 56px;
        min-width: 56px;
        height: 56px;
        min-height: 56px;
    }
}

/* With JS off nothing can add .ma-nav-search--open, so show the field and drop
   the button rather than shipping a control that does nothing. */
.no-js .ma-nav-search-wrap .ma-nav-search,
noscript ~ * .ma-nav-search-wrap .ma-nav-search { display: flex; }

/* ── 2. Tighter vertical rhythm ────────────────────────────────────────── */
/* ⚠️ !important needed: `.inside-header.grid-container` sets padding-top 14px !important */
@media (min-width: 1250px) {
    .inside-header.grid-container {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .main-navigation .main-nav > ul > li > a {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/* Below the new menu breakpoint GP renders the hamburger, so the header is
   already compact — just trim the padding to match. */
@media (max-width: 1249px) {
    .inside-header.grid-container {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* 769-1249px: logo + search + toggle on one row (matches generate_mobile_menu_media_query); the ID-based .ma-nav-collapsed rules still win */
@media (max-width: 1249px) {
    .inside-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0;
    }
    .inside-header .site-branding {
        flex: 0 0 auto;
        order: 1;
    }
    .inside-header .ma-nav-search-wrap {
        flex: 0 0 auto;
        order: 2;
        margin-left: auto;
    }
    .inside-header .mobile-menu-control-wrapper {
        flex: 0 0 auto;
        order: 3;
        width: auto;
        margin-left: 8px;
    }
    .inside-header #site-navigation {
        order: 4;
        flex: 0 0 100%;
    }
}

/* 2026-08-08 — AUDIT TASK 9: mobile call bar + tap targets */

/* ── 9.1 Sticky call/text bar (<768px) ─────────────────────────────────── */
.ma-callbar { display: none; }

@media (max-width: 767px) {
    .ma-callbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--v8-chalk);
        border-top: 3px solid var(--v8-red-deep);
        box-shadow: 0 -6px 20px -8px rgba(20, 24, 32, 0.35);
    }
    .ma-callbar__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        /* 56px is the project's mobile button minimum, above the 44px WCAG floor. */
        min-height: 56px;
        padding: 0 12px;
        border-radius: 12px;
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 800;
        text-decoration: none;
        line-height: 1.1;
    }
    .ma-callbar__btn--call {
        background: var(--v8-red);
        color: #FFFFFF !important;
    }
    .ma-callbar__btn--text {
        background: transparent;
        color: var(--v8-charcoal) !important;
        border: 2px solid var(--v8-charcoal);
    }
    .ma-callbar__btn:focus-visible {
        outline: 3px solid var(--v8-charcoal);
        outline-offset: 3px;
    }
    .ma-callbar__btn--text:focus-visible { outline-color: var(--v8-red); }

    /* Reserve the call bar's height (plus the iOS inset) so it never covers content */
    body {
        padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    }

}

/* ── 9.2 Tap targets: everything measured under 44x44 at 390px ──────────── */
@media (max-width: 767px) {
    /* Utility bar: phone pill and the three trust links (measured 180x34,
       145x26, 106x26, 164x26). */
    .ma-utility-phone,
    .ma-utility-bar a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Site title / logo link (208x39). */
    .site-branding a,
    .main-title a { min-height: 44px; display: inline-flex; align-items: center; }

    /* Footer NAP + legal rows — introduced by this audit's own Task 3 work
       (tel 201x39, email 285x30, legal links 119x26). */
    .site-info .ma-sf-nap a,
    .site-info .ma-sf-legal-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Breadcrumb crumbs (39x20 / 342x24). */
    .ma-store-breadcrumb a,
    .woocommerce-breadcrumb a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* WooCommerce colour swatches were 34x34 — under the floor for a control
       this audience taps directly. */
    .ma-swatch {
        min-width: 44px;
        min-height: 44px;
    }

    /* WPForms fields measured 288x43 — one pixel short of the floor. */
    .wpforms-form input[type="text"],
    .wpforms-form input[type="email"],
    .wpforms-form input[type="tel"],
    .wpforms-form input[type="number"],
    .wpforms-form select,
    .wpforms-form textarea {
        min-height: 48px;
    }

    /* Social / "opens in new tab" text links in content (282x32, 119x26). */
    .ma-social-link,
    .entry-content p > a[target="_blank"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Second pass — selectors confirmed by reading the live DOM ancestry rather
   than guessing at class names (audit Task 9.2). */
@media (max-width: 767px) {
    /* Trust band: three inline fact links, measured 145x26 / 106x26 / 164x26. */
    .ma-trust-band-line a,
    .ma-trust-band a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Cookie notice's Privacy Policy link (119x26) — appears on every page. */
    .ma-cookie-bar a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }

    /* Store breadcrumb crumbs: height was fixed by the first pass, width was
       still 39px on the short "Home" crumb. */
    .ma-store-breadcrumb a,
    .woocommerce-breadcrumb a {
        min-width: 44px;
        justify-content: center;
        padding: 0 6px;
    }

    /* ⚠️ GP's search pagination renders `.nav-links > .page-numbers` with no ul/li wrapper */
    .nav-links .page-numbers {
        min-height: 44px;
    }

    /* WPForms fields measured 288x43 — the first-pass rule lost to WPForms'
       own more-specific selector, so match on the field class it actually sets. */
    .wpforms-form .wpforms-field-medium,
    .wpforms-form .wpforms-field-large,
    .wpforms-form .wpforms-field-small,
    .wpforms-form input.wpforms-field-medium,
    .wpforms-form select.wpforms-field-medium {
        min-height: 48px !important;
    }
}

/* ⚠️ A competing width beats min-width here; force both */
@media (max-width: 767px) {
    /* ⚠️ These are !important: keep in step with the pagination size pass at EOF (62px) */
    .nav-links .page-numbers {
        min-width: 62px !important;
        width: auto !important;
        padding: 0 14px !important;
    }

    /* Inline tel: links inside page copy (e.g. /contact/, measured 139x26). */
    .entry-content a[href^="tel:"],
    .entry-content a[href^="sms:"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Footer link columns two-up on phones */
@media (max-width: 700px) {
    .site-info .ma-sf-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }
    .site-info .ma-sf-list a {
        font-size: 18px;   /* one step down at 2-up so labels do not wrap mid-phrase */
        padding: 11px 4px 11px 0;
    }
}
@media (max-width: 400px) {
    .site-info .ma-sf-col-head { font-size: 18px; letter-spacing: 0.06em; }
}

/* Overflow fixes: the utility bar row may wrap, and grid children get min-width:0 */
@media (max-width: 767px) {
    .ma-utility-contact,
    .ma-utility-bar-inner {
        flex-wrap: wrap;
    }
    .ma-utility-bar a,
    .ma-utility-phone,
    .ma-utility-location {
        max-width: 100%;
        min-width: 0;
    }
    .ma-callbar__btn {
        min-width: 0;
    }
    .ma-cookie-bar,
    .ma-cookie-bar > * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Sort control shown again; PHP offers only orderings backed by real data. !important beats the earlier hide rule */
.woocommerce .woocommerce-ordering {
    display: block !important;
    margin: 0 0 20px;
}
.woocommerce .woocommerce-ordering select {
    min-height: 48px;
    font-size: 20px;
    padding: 6px 12px;
    border: 2px solid var(--v8-charcoal);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--v8-charcoal);
    max-width: 100%;
}
.woocommerce .woocommerce-ordering button[type="submit"] {
    min-height: 48px;
    min-width: 48px;
}

/* The hover peek reveals only after .is-loaded, so a not-yet-fetched image never paints blank */
.ma-van-card__photo--peek { opacity: 0; }
.ma-van-card:hover .ma-van-card__photo--peek.is-loaded,
.ma-van-card:focus-within .ma-van-card__photo--peek.is-loaded { opacity: 1; }

/* ══ DESIGN REVIEW PASS (2026-08-08) ══ */

/* Collapsed strip: search sits just before the phone pill (it defaulted to order 0, ahead of the logo) */
.ma-nav-collapsed .inside-header .ma-nav-search-wrap {
    order: 8;
    flex: 0 0 auto;
    margin-left: auto;   /* push search + phone as a pair to the right */
}
.ma-nav-collapsed .inside-header .ma-header-call {
    order: 9;
    margin-left: 10px;
}
/* Hide the search form in the collapsed strip only while closed (it's a popover now) */
.ma-nav-collapsed .ma-nav-search { display: none; }
.ma-nav-collapsed .ma-nav-search-wrap.ma-nav-search--open .ma-nav-search {
    display: flex;
}

/* One accent: red for action; eyebrows are labels, so they go slate (6.69:1 on cream) */
/* Sitewide; the hero eyebrow (cream on photo) and the conversion band eyebrow (already red) are left alone */
.ma-v7-eyebrow,
.ma-process-eyebrow,
.ma-quiz-eyebrow,
.ma-v6-why-eyebrow,
.ma-v6-quotes-eyebrow,
.ma-svc-section__eyebrow,
.ma-splitband__eyebrow {
    color: var(--v5-slate);
}

/* Home: eyebrows that restate the heading are removed (display:none also drops the duplicate announcement) */
body.home .ma-v7-shop .ma-v7-eyebrow,
body.home .ma-featured-vans .ma-process-eyebrow,
body.home .ma-v9-used .ma-v7-eyebrow,
body.home .ma-v6-quotes .ma-v6-quotes-eyebrow,
body.home .ma-v8-video .ma-v7-eyebrow {
    display: none;
}

/* Why-us: the fifth item (JCI accreditation) spans the full width as the closer */
.ma-v6-why-list > .ma-v6-why-item:last-child {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    border-top: 1px solid var(--v6-rust-line);
    padding: 20px;
    margin-top: 4px;
}
.ma-v6-why-list > .ma-v6-why-item:last-child .ma-v6-why-seal {
    flex: 0 0 auto;
    height: auto;
    /* ⚠️ Needs the full chain: the width in force is `.ma-v6-why-list > .ma-v6-why-item:last-child .ma-v6-why-seal` (0,4,0) */
    width: 140px;
}
@media (max-width: 900px) {
    .ma-v6-why-list > .ma-v6-why-item:last-child {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* Only one auto margin may push the right-hand group, or flexbox splits the space */
@media (max-width: 1279px) {
    /* The auto margin goes on the first item of the right-hand group (the toggle) */
    .ma-nav-collapsed #mobile-menu-control-wrapper {
        order: 7;
        margin-left: auto;
    }
    .ma-nav-collapsed .inside-header .ma-nav-search-wrap {
        margin-left: 10px;
    }
}

/* Quiz options look pressable: red chevron, 2px border, white surface; no shadow or lift (card recipe) */
.ma-quiz-option {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 14px;
    border: 2px solid rgba(35, 39, 46, 0.20) !important;
    border-radius: 12px !important;
    padding: 18px 52px 18px 20px !important;
    font-size: 20px;                       /* body-size non-negotiable */
    line-height: 1.45;
    font-weight: 600;
    color: var(--v8-charcoal) !important;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease;
}

/* Chevron in ::after: visual only, never announced */
.ma-quiz-option::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -6px;
    border-right: 3px solid var(--v8-red);
    border-bottom: 3px solid var(--v8-red);
    transform: rotate(-45deg);
    transition: right 160ms ease, border-color 160ms ease;
}

.ma-quiz-option:hover,
.ma-quiz-option:focus-visible {
    background: #FFFFFF !important;
    border-color: var(--v8-red) !important;
    color: var(--v8-red-deep) !important;
}
.ma-quiz-option:hover::after,
.ma-quiz-option:focus-visible::after {
    right: 15px;                            /* small nudge, not a bounce */
}
.ma-quiz-option:focus-visible {
    outline: 3px solid var(--v8-red);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ma-quiz-option,
    .ma-quiz-option::after { transition: none; }
    .ma-quiz-option:hover::after,
    .ma-quiz-option:focus-visible::after { right: 20px; }
}

@media (max-width: 600px) {
    .ma-quiz-option { padding: 16px 46px 16px 16px !important; }
}

/* ══ MICRO-INTERACTION PASS (2026-08-08) — cards stay flat, house easing, every tap gets a press state; all off under reduced-motion ══ */

/* ⚠️ !important needed: the 2026-07-02 transition shorthand is !important. Hover transform is one declaration (a
   second one replaces, not composes) */
.wp-block-button__link,
.wp-element-button,
.ma-btn-plain,
.ma-catalog-call,
.ma-van-card__cta,
.wpforms-submit,
.ma-header-call,
.ma-callbar__btn {
    transition: transform 0.20s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.20s cubic-bezier(0.2, 0.7, 0.3, 1),
                background-color 0.20s ease,
                border-color 0.20s ease,
                color 0.20s ease !important;
}

/* Real pointers only, so iOS doesn't latch :hover after a tap */
@media (hover: hover) and (pointer: fine) {
    .wp-block-button__link:hover,
    .wp-element-button:hover,
    .ma-btn-plain:hover,
    .ma-catalog-call:hover,
    .ma-van-card__cta:hover,
    .wpforms-submit:hover,
    .ma-callbar__btn:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 12px 26px -10px rgba(15, 34, 53, 0.5);
    }
}

/* ⚠️ The older unguarded hover rule still lifted buttons on touch; switched off explicitly here */
@media (hover: none), (pointer: coarse) {
    .wp-block-button__link:hover,
    .wp-element-button:hover,
    .ma-btn-plain:hover,
    .ma-catalog-call:hover,
    .ma-van-card__cta:hover,
    .wpforms-submit:hover,
    .ma-header-call:hover,
    .ma-callbar__btn:hover,
    .woocommerce ul.products li.product:hover,
    .ma-van-card:hover {
        transform: none !important;
    }
}

/* ⚠️ Press state: :active is unreliable on touch, so js/animations.js sets .ma-pressed (cleared on touchend/cancel/scroll) */
.wp-block-button__link:active,
.wp-element-button:active,
.ma-btn-plain:active,
.ma-catalog-call:active,
.ma-van-card__cta:active,
.wpforms-submit:active,
.ma-header-call:active,
.ma-callbar__btn:active,
.wp-block-button__link.ma-pressed,
.wp-element-button.ma-pressed,
.ma-btn-plain.ma-pressed,
.ma-catalog-call.ma-pressed,
.ma-van-card__cta.ma-pressed,
.wpforms-submit.ma-pressed,
.ma-header-call.ma-pressed,
.ma-callbar__btn.ma-pressed {
    transform: scale(0.97) !important;
    box-shadow: 0 3px 8px -5px rgba(15, 34, 53, 0.45) !important;
    transition-duration: 0.11s !important;
}

/* CTA arrows nudge 4px on hover; js/animations.js wraps the trailing → in .ma-cta-arrow */
.ma-cta-arrow {
    display: inline-block;
    transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
}

.ma-v7-quicklinks a:hover::after,
.ma-v7-quicklinks a:focus-visible::after {
    transform: translateX(4px);
}
.ma-v7-ticket:hover .ma-cta-arrow,
.ma-v7-ticket:focus-visible .ma-cta-arrow,
.ma-v7-cat:hover .ma-cta-arrow,
.ma-v7-cat:focus-within .ma-cta-arrow,
.ma-van-card:hover .ma-cta-arrow,
.ma-van-card:focus-within .ma-cta-arrow,
.ma-blog-card:hover .ma-cta-arrow,
.ma-blog-card:focus-within .ma-cta-arrow,
a:hover > .ma-cta-arrow,
a:focus-visible > .ma-cta-arrow {
    transform: translateX(4px);
}

/* Product-card photo zoom (clipped on the link, not the li); van cards excluded, they crossfade instead */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}
.woocommerce ul.products li.product:hover a img,
.woocommerce ul.products li.product:focus-within a img {
    transform: scale(1.04);
}
/* Keyboard focus border for product cards; !important to match the recipe */
.woocommerce ul.products li.product:focus-within {
    border-color: var(--v5-ink) !important;
}

/* Mega-menu panel slides in with a transform (GP's height jump isn't animatable) */
@media (min-width: 769px) {
    .main-navigation .main-nav ul.sub-menu {
        transform: translateY(-6px);
        transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
    }
    .main-navigation:not(.toggled) ul li:hover > ul.sub-menu,
    .main-navigation:not(.toggled) ul li.sfHover > ul.sub-menu {
        transform: translateY(0);
    }
}

/* Van stock count ticks up (server prints the real figure; JS only animates it) */
.ma-v7-ticket-count .ma-count {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* Reduced motion: colour feedback stays, movement stops */
@media (prefers-reduced-motion: reduce) {
    .wp-block-button__link,
    .wp-element-button,
    .ma-btn-plain,
    .ma-catalog-call,
    .ma-van-card__cta,
    .wpforms-submit,
    .ma-header-call,
    .ma-callbar__btn,
    .ma-cta-arrow,
    .ma-v7-quicklinks a::after,
    .woocommerce ul.products li.product a img,
    .main-navigation .main-nav ul.sub-menu {
        transition: none !important;
    }
    .wp-block-button__link:hover,
    .wp-element-button:hover,
    .ma-btn-plain:hover,
    .ma-catalog-call:hover,
    .ma-van-card__cta:hover,
    .wpforms-submit:hover,
    .ma-callbar__btn:hover,
    .wp-block-button__link:active,
    .wp-element-button:active,
    .ma-btn-plain:active,
    .ma-catalog-call:active,
    .ma-van-card__cta:active,
    .wpforms-submit:active,
    .ma-header-call:active,
    .ma-callbar__btn:active,
    .ma-pressed {
        transform: none !important;
    }
    .ma-v7-ticket:hover .ma-cta-arrow,
    .ma-v7-cat:hover .ma-cta-arrow,
    .ma-van-card:hover .ma-cta-arrow,
    .ma-blog-card:hover .ma-cta-arrow,
    a:hover > .ma-cta-arrow,
    a:focus-visible > .ma-cta-arrow,
    .ma-v7-quicklinks a:hover::after,
    .ma-v7-quicklinks a:focus-visible::after,
    .woocommerce ul.products li.product:hover a img,
    .woocommerce ul.products li.product:focus-within a img,
    .main-navigation .main-nav ul.sub-menu,
    .main-navigation:not(.toggled) ul li:hover > ul.sub-menu,
    .main-navigation:not(.toggled) ul li.sfHover > ul.sub-menu {
        transform: none;
    }
}

/* Photo band for .ma-svc-section: --ma-band-photo + a flat .86 scrim in one declaration (white text 5.3:1) */
.ma-svc-section--photo {
    background-image:
        linear-gradient(rgba(16, 20, 28, .86), rgba(16, 20, 28, .86)),
        var(--ma-band-photo) !important;
    background-size: cover !important;
    background-position: center 50%;
    background-repeat: no-repeat !important;
}
.ma-svc-section--photo .ma-svc-section__heading,
.ma-svc-section--photo .ma-checklist li {
    color: #FFFFFF;
}
.ma-svc-section--photo .ma-findus__lead {
    /* 0.88 white: 4.9:1 on the worst case */
    color: rgba(255, 255, 255, .88);
}
.ma-svc-section--photo .ma-svc-section__eyebrow {
    /* Cream eyebrow: blue measures 2.1:1 on the scrim */
    color: #F3F0E9;
}
.ma-svc-section--photo .ma-checklist li::before {
    /* White tick: red is invisible on the scrim */
    border-left-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

/* ⚠️ `.entry-content a[href^="tel:"]` (0,2,1) capped call buttons at 44px; name the button class to reach 56px */
@media (max-width: 768px) {
    .entry-content a.ma-v7-btn[href^="tel:"],
    .entry-content a.ma-v7-btn[href^="sms:"],
    .entry-content a.ma-bigcall-number[href^="tel:"],
    a.ma-v7-btn[href^="tel:"],
    a.ma-bigcall-number[href^="tel:"] {
        min-height: 56px;
    }
}

/* Headings at the 28px floor on phones (wrapping is acceptable, smaller type isn't) */
@media (max-width: 640px) {
    .ma-quiz-heading { font-size: 28px; }
}
@media (max-width: 480px) {
    .ma-v6-why-heading,
    .ma-v6-quotes-heading { font-size: 28px; }
}

/* Product card image box is square (median photo ratio 1.0); object-fit stays contain */

/* ── 1. Card image box: square, not 4:3 ───────────────────── */
.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
    aspect-ratio: 1 / 1;
    padding: 4px;
}/* Adaptive driving photos: plain grid, minmax(min(288px,100%), 1fr) */
.ma-adaptive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
    gap: 18px;
    margin: 34px 0 6px;
    text-align: left;   /* the conversion band centres its own text */
}
.ma-adaptive-grid figure {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.ma-adaptive-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: var(--v7-radius, 10px);
}
/* 20px is the project's body-text floor. Automated a11y tools do not check it,
   and that gap has shipped 16px text on this site before. */
.ma-adaptive-grid figcaption {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate, #4A5560);
    margin: 12px 0 0;
}
@media (max-width: 900px) {
    .ma-adaptive-grid { gap: 14px; margin-top: 24px; }
    .ma-adaptive-grid img { aspect-ratio: 16 / 9; }
}

/* Photo strip breaks out to the same 1100px as the cards */
@media (min-width: 901px) {
    .ma-conversion-band .ma-adaptive-grid {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: min(1100px, calc(100vw - 64px));
    }
}

/* Store-header photo capped at 420px so cover has a box to crop; check any new portrait photo's crop */
.ma-store-header__media img {
    max-height: 420px;
}

/* ══ SEARCH TYPEAHEAD (2026-08-18) — 19px titles, ~52px rows; the one overlay allowed a shadow ══ */

.ma-typeahead {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 2000;
}

.ma-typeahead.is-open {
    display: block;
}

.ma-typeahead__list {
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(35, 39, 46, .18);
    max-height: min(70vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ma-typeahead__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 10px 14px;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

/* Hover and keyboard highlight share one appearance so mouse and keyboard
   users are looking at the same thing. */
.ma-typeahead__item:hover,
.ma-typeahead__item.is-active {
    background: var(--v8-chalk, #FAF9F6);
}

.ma-typeahead__item.is-active {
    outline: 2px solid var(--v8-blue, #2633C5);
    outline-offset: -2px;
}

.ma-typeahead__title {
    font-size: 19px;
    line-height: 1.35;
    color: var(--color-text, #23272E);
    font-weight: 500;
    /* Long product names wrap rather than truncate — a clipped name is
       useless when several models differ only in their final word. */
    overflow-wrap: anywhere;
}

.ma-typeahead__title mark {
    background: transparent;
    color: var(--v8-blue, #2633C5);
    font-weight: 800;
}

.ma-typeahead__kind {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5C6068;
    background: var(--v8-chalk, #FAF9F6);
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}

.ma-typeahead__item.is-active .ma-typeahead__kind,
.ma-typeahead__item:hover .ma-typeahead__kind {
    background: #fff;
}

/* Phones: the wrap loses position:relative so the panel anchors to the full-width sticky header (it opened 54px off-screen) */
@media (max-width: 768px) {
    .ma-nav-search-wrap {
        position: static;
    }
    .ma-nav-search-wrap .ma-nav-search {
        top: calc(100% + 8px);
        left: 16px;
        right: 16px;
        width: auto;
    }
    /* The panel is now correctly inset, so the suggestions just fill it. */
    .ma-typeahead {
        left: 0;
        right: 0;
    }
    .ma-typeahead__title {
        font-size: 18px;
    }
    .ma-typeahead__item {
        min-height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ma-typeahead__item {
        transition: none;
    }
}

/* ══ VAN PHOTO LIGHTBOX NAVIGATION (2026-08-18) — buttons, arrow keys, swipe, "Photo 3 of 6"; iOS scroll lock handled in JS ══ */

.ma-lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FAF9F6;
    background: rgba(255, 255, 255, .14);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

.ma-lightbox__nav[hidden] { display: none; }
.ma-lightbox__nav--prev { left: 12px; }
.ma-lightbox__nav--next { right: 12px; }

.ma-lightbox__nav:hover,
.ma-lightbox__nav:focus-visible {
    background: rgba(255, 255, 255, .28);
}

.ma-lightbox__nav:focus-visible,
.ma-lightbox__zoom:focus-visible,
.ma-lightbox__close:focus-visible {
    outline: 3px solid #FAF9F6;
    outline-offset: 3px;
}

.ma-lightbox__count {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 8px 18px;
    font-size: 17px;
    font-weight: 700;
    color: #FAF9F6;
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
    white-space: nowrap;
}

.ma-lightbox__count[hidden] { display: none; }

/* Leave room for the counter so a landscape photo is never hidden behind it. */
.ma-lightbox {
    padding: 72px 16px 76px;
}

.ma-lightbox__img {
    object-fit: contain;
}

/* Phones: arrows move to the bottom corners, still 56px */
@media (max-width: 600px) {
    .ma-lightbox {
        padding: 64px 10px 84px;
    }
    .ma-lightbox__nav {
        top: auto;
        bottom: 14px;
        transform: none;
        background: rgba(255, 255, 255, .2);
    }
    .ma-lightbox__nav--prev { left: 14px; }
    .ma-lightbox__nav--next { right: 14px; }
    .ma-lightbox__count {
        font-size: 16px;
    }
}

/* Contact forms stacked full width (side by side made the fields too small) */
.ma-contact-forms--stacked {
    margin-top: 8px;
}
.ma-contact-forms__card + .ma-contact-forms__card {
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid var(--line, #E4E1DA);
}
.ma-contact-forms__card--callback .ma-svc-card__title {
    font-size: 22px;
}

/* Linked review cards: stretched-link pattern so the text stays selectable; unlinked on the Reviews page itself */
.ma-v6-quote--linked {
    position: relative;
    cursor: pointer;
}
.ma-v6-quote--linked:hover,
.ma-v6-quote--linked:focus-within {
    border-color: var(--v5-ink) !important;
}
.ma-v6-quote-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.ma-v6-quote-link:focus-visible {
    outline: 3px solid var(--v8-blue, #2633C5);
    outline-offset: 2px;
    border-radius: var(--v7-radius, 10px);
}

/* Dark call-strip modifier (opt-in per page); !important to beat the light base rules */
.ma-call-strip--dark {
    background: var(--v5-ink, #23272E) !important;
}
.ma-call-strip--dark h2,
.ma-call-strip--dark .wp-block-heading {
    color: #FAF9F6 !important;
}
.ma-call-strip--dark h2::after,
.ma-call-strip--dark .wp-block-heading::after {
    background: var(--v8-red, #C4222B) !important;
}
.ma-call-strip--dark p {
    color: #FAF9F6 !important;
}
.ma-call-strip--dark .ma-address-note {
    color: #C7CBD1 !important;
    opacity: 1 !important;
}
/* Form labels light on the dark band (WPForms' ink label is invisible there) */
.ma-call-strip--dark .wpforms-container label,
.ma-call-strip--dark .wpforms-container .wpforms-field-label,
.ma-call-strip--dark .wpforms-container .wpforms-field-description {
    color: #FAF9F6 !important;
}

/* ══ MOBILITY EQUIPMENT CATEGORY GRID (2026-08-22) — reuses the homepage .ma-v7-cat photo card ══ */
.ma-eq-cats {
    display: grid;
    /* auto-fit reflows 4-3-2-1 with no breakpoints */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 24px;
}
/* ⚠️ Red top border needs !important: the card recipe's `border` shorthand is !important */
.ma-eq-cat--used {
    border-top: 4px solid var(--v8-red, #C4222B) !important;
}
/* CTA at 20px here (the shared rule is 18px) */
.ma-eq-cats .ma-v7-cat-cta {
    font-size: 20px;
}
/* Per-category photo crops; re-check by eye if a photo changes */
.ma-eq-cats a[href$="/mobility-scooters/"] .ma-v7-cat-img { object-position: center 40%; }
.ma-eq-cats a[href$="/manual-wheelchairs/"] .ma-v7-cat-img { object-position: center 35%; }
.ma-eq-cats a[href$="/walkers-rollators/"] .ma-v7-cat-img { object-position: center 40%; }
.ma-eq-cats a[href$="/lift-chairs/"] .ma-v7-cat-img { object-position: center 35%; }
.ma-eq-cats a[href$="/stair-lifts/"] .ma-v7-cat-img { object-position: center 45%; }
.ma-eq-cats a[href$="/wheelchair-ramps/"] .ma-v7-cat-img { object-position: center 55%; }
.ma-eq-cats a[href$="/vehicle-lifts/"] .ma-v7-cat-img { object-position: center 45%; }
.ma-eq-cats a[href$="/pediatric-equipment/"] .ma-v7-cat-img { object-position: center 30%; }
/* 3:1 panorama render: keep the lift and its rider in the 3:2 crop */
.ma-eq-cats a[href$="/vertical-platform-porch-lifts/"] .ma-v7-cat-img { object-position: 64% center; }
.ma-eq-cats a[href$="/parts-accessories/"] .ma-v7-cat-img { object-position: center 50%; }
.ma-eq-cats a[href$="/pre-owned-clearance/"] .ma-v7-cat-img { object-position: center 45%; }
@media (max-width: 900px) {
    .ma-eq-cats { grid-template-columns: 1fr; }
}

/* ══ SUB-CATEGORY DRILL-DOWN CARDS (2026-08-22) — from generate_after_header; minmax(min(220px,100%),1fr) ══ */
/* ══ SIBLING CHIP ROW (2026-08-29) — leaf categories; pills so they read as a set to pick from ══ */
.ma-sibling-band {
    background: var(--color-bg-warm);
    border-bottom: 1px solid var(--line);
    padding: 18px 0 20px;
}

.ma-sibling-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 165px floor fits 6 tiles across 1080px (Home Access) */
.ma-sibling-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ma-sibling-row li {
    margin: 0;
    list-style: none;
}

.ma-sibling-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 190px;
    padding: 16px 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    /* White, matching the studio ground the photos are cut out on, so the
       contain-fitted image has no visible letterbox against the tile. */
    background: #FFFFFF;
    text-decoration: none;
    color: #FFFFFF;
}

.ma-sibling-tile__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* contain: these are square cut-outs */
.ma-sibling-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 42%;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Gradient scrim in px, text zone only, so the white studio ground stays clean */
.ma-sibling-tile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 132px;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(22, 24, 29, 0.94) 0,
        rgba(22, 24, 29, 0.90) 64px,
        rgba(22, 24, 29, 0.55) 96px,
        rgba(22, 24, 29, 0) 132px
    );
}

.ma-sibling-tile__label,
.ma-sibling-tile__count {
    position: relative;
    z-index: 2;
}

.ma-sibling-tile__label {
    font-family: Archivo, sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
    color: #FFFFFF;
}

.ma-sibling-tile__count {
    margin-top: 3px;
    font-size: 16px;
    font-weight: 500;
    /* Solid, not rgba white: on the ~0.94 ink under it a faded white is the
       grey-on-dark the brief rules out. */
    color: #E8E6E1;
}

/* Up a level: no photo, so it carries the ink as its own ground rather than as
   a scrim over one. */
.ma-sibling-tile--up {
    background: var(--v5-ink);
    border-color: var(--v5-ink);
}

.ma-sibling-tile--up::after {
    content: none;
}

.ma-sibling-arrow {
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The page you are on: the ink scrim goes red, so the current type is marked
   in the site's one action colour without a second visual device. */
.ma-sibling-tile.is-current {
    cursor: default;
    border-color: var(--color-secondary);
}

.ma-sibling-tile.is-current::after {
    background: linear-gradient(
        to top,
        rgba(163, 27, 36, 0.96) 0,
        rgba(163, 27, 36, 0.92) 64px,
        rgba(163, 27, 36, 0.58) 96px,
        rgba(163, 27, 36, 0) 132px
    );
}

.ma-sibling-tile.is-current .ma-sibling-tile__count {
    color: #F6E4E5;
}

@media (hover: hover) and (pointer: fine) {
    a.ma-sibling-tile:hover {
        border-color: var(--color-secondary);
    }
    /* Mirrors the 1.04 product-card photo zoom. */
    a.ma-sibling-tile:hover .ma-sibling-tile__media img {
        transform: scale(1.04);
    }
    a.ma-sibling-tile--up:hover .ma-sibling-arrow {
        transform: translateX(-4px);
    }
}

a.ma-sibling-tile:focus-visible {
    border-color: var(--color-secondary);
}

@media (max-width: 600px) {
    .ma-sibling-row {
        grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
        gap: 10px;
    }
    .ma-sibling-tile {
        height: 160px;
        padding: 14px;
    }
    .ma-sibling-tile__label { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .ma-sibling-tile__media img,
    .ma-sibling-arrow {
        transition: none !important;
    }
    a.ma-sibling-tile:hover .ma-sibling-tile__media img,
    a.ma-sibling-tile--up:hover .ma-sibling-arrow {
        transform: none;
    }
}

.ma-subcat-band {
    border-bottom: 1px solid var(--line);
    padding: 30px 0 34px;
}

.ma-subcat-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.ma-subcat-title {
    font-family: Archivo, sans-serif;
    line-height: 1.3;
    color: var(--color-text);
    margin: 0 0 18px;
}

.ma-subcat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ma-subcat-card {
    margin: 0;
    list-style: none;
}

/* The one card recipe: white, 1px hairline, 10px radius, no shadow, no lift. */
.ma-subcat-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
}

.ma-subcat-media {
    display: block;
    aspect-ratio: 4 / 3;
    background: #fff;
    overflow: hidden;
}

.ma-subcat-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;      /* contain: product shots on white */
    padding: 10px;
    transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}

.ma-subcat-name {
    display: block;
    font-family: Archivo, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.35;
    padding: 14px 16px 0;
}

.ma-subcat-count {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    opacity: .72;
    padding: 4px 16px 16px;
}

.ma-subcat-card > a:hover .ma-subcat-name,
.ma-subcat-card > a:focus-visible .ma-subcat-name {
    color: var(--v8-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Guarded so a tap on iOS cannot latch the zoom on — the 2026-07-02 unguarded
   hover rule kept applying its transform after touchend and left buttons stuck. */
@media (hover: hover) and (pointer: fine) {
    .ma-subcat-card > a:hover .ma-subcat-media img {
        transform: scale(1.04);
    }
}

.ma-subcat-card > a:focus-visible {
    outline: 3px solid var(--v8-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ma-subcat-media img {
        transition: none;
    }
    .ma-subcat-card > a:hover .ma-subcat-media img {
        transform: none;
    }
}

@media (max-width: 768px) {
    .ma-subcat-band { padding: 22px 0 26px; }
}

/* A card with no photo gets padding so it still reads as a card */
.ma-subcat-card > a:not(:has(.ma-subcat-media)) .ma-subcat-name {
    padding-top: 22px;
}

/* An orphaned last card (4n+1) is centred at its siblings' width; check Lift Chairs (4 cards) stays untouched */
@media (min-width: 769px) {
    .ma-subcat-card:nth-child(4n+1):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: calc((100% - 3 * 16px) / 4);
    }
}

/* ══ HEADER SEARCH BETWEEN LOGO AND NAV (2026-08-24) — >=1250px only; the wrap claims the gap (flex 1 1 auto) and centres the toggle ══ */
@media (min-width: 1250px) {
    /* ⚠️ Re-asserted: a later `.inside-header { flex-wrap: wrap }` outranks the earlier nowrap by source order */
    .inside-header {
        flex-wrap: nowrap;
    }
    .inside-header .ma-nav-search-wrap {
        order: 1;
        flex: 1 1 auto;
        justify-content: center;
        margin-left: 0;
    }
    .inside-header .ma-nav-search-toggle {
        width: 56px;
        height: 56px;
    }
    .inside-header #site-navigation,
    .inside-header .main-navigation {
        order: 2;
        /* Nav's margin-left:auto starved the wrap's flex-grow; zero it */
        margin-left: 0;
    }
}

/* Popover anchors to the toggle's centre */
@media (min-width: 1250px) {
    .inside-header .ma-nav-search-wrap .ma-nav-search {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Power Wheelchairs / Patient Lifts cut-out tiles: warm radial ground and soft shadow instead of flat white */
.ma-v7-cat-media--product {
    position: relative;
    background: radial-gradient(ellipse at 50% 42%, #FFFFFF 0%, var(--color-bg-warm, #F3F0E9) 100%);
}
.ma-v7-cat-media--product .ma-v7-cat-img {
    position: relative;
    z-index: 1;
    padding: 20px 16px 26px;
}
.ma-v7-cat-media--product::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 56%;
    height: 12px;
    background: radial-gradient(ellipse at center, rgba(35, 39, 46, 0.16) 0%, rgba(35, 39, 46, 0) 72%);
    transform: translateX(-50%);
    pointer-events: none;
}

/* ══ NOTHING-FOUND PAGE (2026-08-24) — pairs with no-results.php ══ */

.ma-noresults .ma-content-section {
    padding-top: 48px !important;   /* the store header already sits above */
}

.ma-noresults-lede {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}

.ma-noresults-lede h2 {
    margin-bottom: 12px;
}

.ma-noresults-lede > p {
    font-size: 20px;
    line-height: 1.6;
    color: var(--v5-slate);
    margin: 0 auto 28px;
    max-width: 560px;
}

/* --- Did you mean --------------------------------------------------- */

.ma-noresults-didyoumean {
    background: var(--color-bg-warm);
    border-bottom: 1px solid var(--line, var(--color-border));
    padding: 20px 24px;
    text-align: center;
}

.ma-noresults-didyoumean p {
    margin: 0;
    font-size: 22px;
    line-height: 1.5;
    color: var(--color-text);
}

.ma-noresults-didyoumean a {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--v7-steel);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.ma-noresults-didyoumean a:hover,
.ma-noresults-didyoumean a:focus-visible {
    color: var(--color-cta);
}

/* --- The search field ----------------------------------------------- */
/* position:relative anchors js/search.js's typeahead to the form */

.ma-noresults-search {
    position: relative;
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
}

.ma-noresults-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;                 /* or the flex item refuses to shrink */
    height: 56px;
    padding: 0 18px;
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--v7-radius);
}

.ma-noresults-search input[type="search"]:focus {
    outline: none;
    border-color: var(--v7-steel);
    box-shadow: 0 0 0 3px rgba(38, 51, 197, 0.18);
}

.ma-noresults-search__btn {
    flex: 0 0 auto;
    min-height: 56px;
    padding: 0 26px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--color-white);
    background: var(--color-cta);
    border: 0;
    border-radius: var(--v7-radius);
    cursor: pointer;
}

.ma-noresults-search__btn:hover,
.ma-noresults-search__btn:focus-visible {
    background: var(--v5-citrus-deep);
}

/* Typeahead panel full width under the in-page field */
.ma-noresults-search .ma-typeahead {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    top: calc(100% + 6px);
}

/* Centre the heading accent under a centred heading */
.ma-noresults-lede h2::after,
.ma-noresults-browse .ma-subcat-title::after {
    left: 50%;
    transform: translateX(-50%);
}

/* --- Browse grid ----------------------------------------------------- */

/* ⚠️ !important needed: `.ma-content-section > *:not(...)` scores (0,6,0) */
.ma-noresults-browse {
    max-width: 1040px !important;
    margin: 0 auto;
}

/* ⚠️ Four columns because there are exactly 8 top-level categories; re-check if that changes */
@media (min-width: 900px) {
    .ma-noresults-browse .ma-subcat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ma-noresults-browse .ma-subcat-title {
    text-align: center;
    margin-bottom: 22px;
}

/* --- Call strip ------------------------------------------------------ */

.ma-noresults-call {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 600px) {
    .ma-noresults-search {
        flex-wrap: wrap;
    }
    .ma-noresults-search input[type="search"],
    .ma-noresults-search__btn {
        flex: 1 1 100%;
        min-height: 56px;
    }
    .ma-noresults-didyoumean p {
        font-size: 20px;
    }
}

/* Long pasted search terms wrap inside the store header */
.ma-store-header h1 .ma-search-term {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Pre-Owned bookmark ribbon replaces the "Sale!" bubble (same corner) */
.ma-card-bookmark {
    position: absolute;
    top: 0;
    left: 18px;
    z-index: 9;
    display: block;
    padding: 8px 12px 14px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FAF9F6;
    background: var(--v5-citrus-deep);
    /* notch the bottom edge into a bookmark tail */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
    pointer-events: none;
}

/* The card is the bookmark's positioning context */
.woocommerce ul.products li.product {
    position: relative;
}

@media (max-width: 768px) {
    .ma-card-bookmark {
        left: 12px;
        font-size: 14px;
        padding: 7px 10px 12px;
    }
}

/* Pre-Owned rental note: same box as .ma-no-returns, blue accent (an offer, not a warning) */
.ma-rental-note {
    background: #EEF1FB;
    border-left: 4px solid var(--v7-steel, #2633C5);
    border-radius: 0 6px 6px 0;
    padding: 14px 18px;
    margin: 0 0 14px;
    font-size: 20px;
    line-height: 1.6;
    color: #17204A;
}

.ma-rental-note a {
    color: var(--v7-steel, #2633C5);
    font-weight: 700;
}

.ma-rental-note a:hover,
.ma-rental-note a:focus-visible {
    color: var(--color-cta);
}

/* ══ SOLD STATE + VAN RAIL/BACK CONTROLS (2026-08-25) — the sold badge had no CSS; test by marking a van sold ══ */

.ma-spec-tag--sold {
    background: var(--v7-steel, #2633C5);
    color: #FAF9F6;
}

/* Sold badge over the photo's top-left */
.ma-van-card__sold-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 9;
}

.ma-van-card__sold-badge .ma-spec-tag--sold {
    font-size: 13px;
    padding: 6px 14px;
    box-shadow: 0 2px 8px rgba(22, 40, 59, 0.28);
}

/* The card is the badge's containing block */
.ma-van-card {
    position: relative;
}

/* Sold van photo dimmed slightly */
.ma-van-card__sold-badge ~ .ma-van-card__photo-wrap .ma-van-card__photo {
    filter: saturate(0.55) brightness(0.94);
}

.ma-van-pricebox__sold {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

/* Sold product: plain text instead of a dead-end button */
.ma-catalog-call--sold {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--v5-slate);
    padding: 12px 0;
}

/* "Find similar vans": the button keeps white-on-red text, only the background turns blue */
.ma-van-card__cta--similar {
    background: var(--v7-steel, #2633C5);
    color: #FAF9F6;
}

.ma-van-card__cta--similar:hover,
.ma-van-card__cta--similar:focus-visible {
    background: #1B258F;
    color: #FAF9F6;
}

/* ══ LIGHTBOX FILMSTRIP (2026-08-25) ══ */
/* ⚠️ Positioned against the viewport: in flow it became a column beside the photo (.ma-lightbox is a flex row) */
.ma-lightbox__strip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    max-width: min(900px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 6px 4px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Momentum + snap on touch, and a thin scrollbar rather than the
       platform default sitting on top of the photos. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(250, 249, 246, 0.45) transparent;
}

/* Centre the strip only while it fits; once it overflows, flex-start must
   win or the first thumbnails become unreachable in a scroll container. */
@media (min-width: 700px) {
    .ma-lightbox__strip {
        justify-content: safe center;
    }
}

.ma-lightbox__strip::-webkit-scrollbar {
    height: 8px;
}

.ma-lightbox__strip::-webkit-scrollbar-thumb {
    background: rgba(250, 249, 246, 0.45);
    border-radius: 999px;
}

.ma-lightbox__thumb {
    flex: 0 0 auto;
    width: 92px;
    height: 66px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    overflow: hidden;
    opacity: 0.62;
    transition: opacity 0.18s ease, border-color 0.18s ease;
}

.ma-lightbox__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ma-lightbox__thumb.is-active {
    opacity: 1;
    border-color: #FAF9F6;
}

@media (hover: hover) and (pointer: fine) {
    .ma-lightbox__thumb:hover {
        opacity: 1;
    }
}

.ma-lightbox__thumb:focus-visible {
    outline: 3px solid #FAF9F6;
    outline-offset: 2px;
    opacity: 1;
}

/* The counter used to sit at bottom:18px, which is now where the strip is.
   Lift it clear rather than letting the two overlap. */
.ma-lightbox__count {
    bottom: 104px;
}

/* Leave room for the strip and counter under the image */
.ma-lightbox {
    padding-bottom: 164px;
}

@media (max-width: 600px) {
    .ma-lightbox__thumb {
        width: 74px;
        height: 54px;
    }
    .ma-lightbox__strip {
        bottom: 10px;
        gap: 8px;
    }
    .ma-lightbox__count {
        bottom: 84px;
    }
    .ma-lightbox {
        padding-bottom: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ma-lightbox__thumb {
        transition: none;
    }
}

/* Left-edge "back to the lot" tab: icon at rest, expands on hover/focus */
.ma-van-back-float {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Below the lightbox (10000) on purpose — it must not float over a
       maximised photo. Above ordinary page content. */
    z-index: 900;
    display: none;
    align-items: center;
    gap: 8px;
    max-width: 56px;
    padding: 14px 16px;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: #FAF9F6;
    background: var(--v5-ink, #23272E);
    border-radius: 0 10px 10px 0;
    box-shadow: 0 4px 18px rgba(22, 40, 59, 0.28);
    text-decoration: none !important;
    transition: max-width 0.22s ease, background 0.22s ease;
}

/* Shown only where there is room beside the content column. Below this the
   fixed tab would sit on top of the page rather than beside it. */
@media (min-width: 1100px) {
    .ma-van-back-float {
        display: flex;
    }
}

.ma-van-back-float svg {
    flex: 0 0 auto;
}

.ma-van-back-float:hover,
.ma-van-back-float:focus-visible {
    max-width: 320px;
    background: var(--v7-steel, #2633C5);
    color: #FAF9F6;
}

.ma-van-back-float:focus-visible {
    outline: 3px solid var(--v7-steel, #2633C5);
    outline-offset: 3px;
}

/* ⚠️ Focus must expand the label (keyboard users need to read it) */
.ma-van-back-float__text {
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .ma-van-back-float {
        transition: none;
    }
}

/* Van hero video (only if uploads/van-lot-drone.mp4 exists): layered under the text scrim */
.ma-store-header--video {
    position: relative;
    overflow: hidden;
}

.ma-store-header__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    border: 0;
}

/* ⚠️ A video covers the background scrim, so it's repainted above the video; stops copied from the shared hero scrim, retune together */
.ma-store-header--video::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(to top,
        rgba(16, 20, 28, .93) 0%,
        rgba(16, 20, 28, .86) 70%,
        rgba(16, 20, 28, .34) 90%,
        rgba(16, 20, 28, .30) 100%);
}

@media (max-width: 900px) {
    .ma-store-header--video::after {
        background-image: linear-gradient(to top,
            rgba(16, 20, 28, .93) 0%,
            rgba(16, 20, 28, .86) 84%,
            rgba(16, 20, 28, .36) 96%,
            rgba(16, 20, 28, .32) 100%);
    }
}

/* Keep the header's own content above whatever media is behind it: video, scrim or slide stack. */
.ma-store-header--video > .ma-store-header-inner,
.ma-store-header--hero > .ma-store-header-inner {
    position: relative;
    z-index: 2;
}

/* ⚠️ Phones get the poster; display:none doesn't stop loading, the real gate is the script in functions.php */
@media (max-width: 899px) {
    .ma-store-header__video {
        display: none;
    }
}

/* ⚠️ Reduced motion gets the poster too. `display:none` on the element stops
   playback rather than just hiding a still-decoding video. */
@media (prefers-reduced-motion: reduce) {
    .ma-store-header__video {
        display: none;
    }
}

/* Home Access project note: calm blue, not the amber warning box; 1120px to match .ma-subcat-inner */
.ma-project-note {
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 34px 0;
}

.ma-project-note__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.ma-project-note p {
    font-size: 20px;
    line-height: 1.6;
    color: #1e293b;
    margin: 0 0 14px;
    max-width: 68ch;
}

.ma-project-note__lead {
    font-family: Archivo, sans-serif;
    font-weight: 700;
    font-size: 26px !important;
    color: #0f2d4d;
    margin-bottom: 12px !important;
}

.ma-project-note__call {
    margin: 22px 0 0 !important;
}

/* The shared call button already carries its own 56px min-height and contrast-
   checked colours; this only stops the <p> wrapper stretching it full width. */
.ma-project-note__call a {
    display: inline-flex;
}

@media (max-width: 767px) {
    .ma-project-note {
        padding: 26px 0;
    }
    .ma-project-note__lead {
        font-size: 22px !important;
    }
    .ma-project-note p {
        font-size: 18px;
    }
}

/* Typeahead "Showing results for" note merges with the panel; ⚠️ it sets display, so pair [hidden] */
.ma-typeahead__suggest-note {
    display: block;
    background: var(--v8-chalk, #FAF9F6);
    border: 1px solid var(--line, #E4E1DA);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 10px 14px;
    font-size: 15px;
    color: #5C6068;
}

.ma-typeahead__suggest-note[hidden] {
    display: none;
}

.ma-typeahead__suggest-note:not([hidden]) + .ma-typeahead__list {
    border-radius: 0 0 12px 12px;
}

.ma-typeahead__suggest-note mark {
    background: transparent;
    color: var(--v8-blue, #2633C5);
    font-weight: 800;
}

/* Collapsed strip >=1280px: search centred in the logo/nav gap like the expanded header, so it doesn't jump on scroll */
@media (min-width: 1280px) {
    .ma-nav-collapsed .inside-header .ma-nav-search-wrap {
        order: 2;
        /* flex 1 1 0: an auto basis measures the input and can overflow the strip */
        flex: 1 1 0;
        justify-content: center;
        /* Symmetric margins so the field doesn't hug the logo */
        margin: 0 28px;
    }
    .ma-nav-collapsed .inside-header #site-navigation,
    .ma-nav-collapsed .inside-header .main-navigation {
        order: 3;
    }
    .ma-nav-collapsed .ma-header-call {
        order: 4;
    }
}

/* Vehicle Lifts dual hero: two background layers on the shared scrim; ⚠️ !important on all four (the
   `background` shorthand is !important); halves 50.6% so no seam shows */
.ma-store-header--hero-duo {
    background-image:
        linear-gradient(to top,
            rgba(16, 20, 28, .93) 0%,
            rgba(16, 20, 28, .86) 70%,
            rgba(16, 20, 28, .34) 90%,
            rgba(16, 20, 28, .30) 100%),
        var(--ma-hero-photo),
        var(--ma-hero-photo-2) !important;
    background-size: auto, 50.6% 100%, 50.6% 100% !important;
    background-position: center center, left center, right center !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
}

/* Phones: one photo (exterior lift) and the phone scrim ramp */
@media (max-width: 900px) {
    .ma-store-header--hero-duo {
        /* Same ramp as every mobile hero (a lower reading was the cookie banner, not the hero) */
        background-image:
            linear-gradient(to top,
                rgba(16, 20, 28, .93) 0%,
                rgba(16, 20, 28, .86) 84%,
                rgba(16, 20, 28, .36) 96%,
                rgba(16, 20, 28, .32) 100%),
            var(--ma-hero-photo) !important;
        background-size: auto, cover !important;
        background-position: center center, center 45% !important;
        background-repeat: no-repeat, no-repeat !important;
    }
}

/* ══ HEADER: PERSISTENT SEARCH FIELD >=1320px (2026-08-25) — nav padding trimmed to 8px so logo + nav + field
   fit; this block must stay later than the popover rules ══ */
@media (min-width: 1320px) {
    /* ⚠️ Scoped html:not(.ma-nav-collapsed): the collapsed strip keeps the icon + popover */
    .inside-header .main-navigation .main-nav ul li a {
        padding-left: 8px;
        padding-right: 8px;
    }
    html:not(.ma-nav-collapsed) .inside-header .ma-nav-search-toggle {
        display: none;
    }

    /* The wrap claims the gap and centres the field (max 340px, 28px margins); nav's margin-left:auto is cancelled or it starves the field */
    /* ⚠️ flex 1 1 0, not auto: line breaking uses the basis, and the input's ~300px intrinsic width wrapped the row */
    html:not(.ma-nav-collapsed) .inside-header .ma-nav-search-wrap {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        height: 51px;              /* matches the logo chip, so both centre */
        justify-content: center;
    }
    .inside-header #site-navigation,
    .inside-header .main-navigation {
        flex: 0 0 auto;
        margin-left: 0;
    }

    /* In flow, not absolute; transform reset (the >=1250px centring applies it) */
    html:not(.ma-nav-collapsed) .inside-header .ma-nav-search-wrap .ma-nav-search {
        display: flex;
        /* ⚠️ js/search.js sets inline position:relative on the form, so reset all offsets and the transform explicitly */
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        align-items: center;
        width: 100%;
        max-width: 340px;
        min-width: 0;
        height: 51px;
        padding: 0;
        background: #FFFFFF;
        border: 1.5px solid rgba(35, 39, 46, 0.22);
        border-radius: 10px;
        box-shadow: none;
        transition: border-color .18s ease, box-shadow .18s ease;
    }
    /* No second focus ring (the input already gets one); typeahead hangs rightward with a real min width */
    html:not(.ma-nav-collapsed) .inside-header .ma-nav-search-wrap .ma-typeahead {
        right: auto;
        min-width: 420px;
    }
    html:not(.ma-nav-collapsed) .inside-header .ma-nav-search-wrap .ma-nav-search input[type="search"] {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: 100%;
        min-height: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 0 16px;
    }
    html:not(.ma-nav-collapsed) .inside-header .ma-nav-search-wrap .ma-nav-search input[type="search"]:focus {
        border: none;
        box-shadow: none;
    }
    html:not(.ma-nav-collapsed) .inside-header .ma-nav-search-wrap .ma-nav-search__btn {
        flex: 0 0 auto;
        width: 48px;
        min-width: 48px;
        height: 100%;
        min-height: 0;
        border: 0 !important;
        border-left: 1.5px solid rgba(35, 39, 46, .22) !important;
        border-radius: 0 9px 9px 0 !important;
    }
}

/* Blog index hero photo: shares the page-hero scrim */
.ma-cinema-page-hero--photo {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* ⚠️ `.blog .ma-cinema-page-hero` background shorthand is !important at (0,2,0); match it */
.blog .ma-cinema-page-hero--photo {
    background-image:
        linear-gradient(to top,
            rgba(16, 20, 28, .93) 0%,
            rgba(16, 20, 28, .86) 70%,
            rgba(16, 20, 28, .34) 90%,
            rgba(16, 20, 28, .30) 100%),
        var(--ma-hero-photo) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border-bottom: none !important;
}
@media (max-width: 900px) {
    .blog .ma-cinema-page-hero--photo {
        background-image:
            linear-gradient(to top,
                rgba(16, 20, 28, .93) 0%,
                rgba(16, 20, 28, .86) 84%,
                rgba(16, 20, 28, .36) 96%,
                rgba(16, 20, 28, .32) 100%),
            var(--ma-hero-photo) !important;
    }
}
.blog .ma-cinema-page-hero--photo h1,
.blog .ma-cinema-page-hero--photo .ma-cinema-line {
    color: #FFFFFF !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.blog .ma-cinema-page-hero--photo h1 em {
    color: var(--color-bronze-light, #E4B76A) !important;
    font-style: italic !important;
}
.blog .ma-cinema-page-hero--photo .ma-cinema-eyebrow,
.blog .ma-cinema-page-hero--photo .ma-cinema-sub {
    color: #F3F0E9 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
/* Restore the reveal animation on the photo hero */
.blog .ma-cinema-page-hero--photo .ma-reveal {
    animation: maCinemaRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    opacity: 0;
}
.blog .ma-cinema-page-hero--photo .ma-reveal-1 { animation-delay: 0.05s; }
.blog .ma-cinema-page-hero--photo .ma-reveal-2 { animation-delay: 0.18s; }
.blog .ma-cinema-page-hero--photo .ma-reveal-3 { animation-delay: 0.31s; }
.blog .ma-cinema-page-hero--photo .ma-reveal-4 { animation-delay: 0.44s; }
@media (prefers-reduced-motion: reduce) {
    .blog .ma-cinema-page-hero--photo .ma-reveal { animation: none !important; opacity: 1 !important; }
}

/* Homepage hero load-in: reuses maCinemaRise and the .ma-reveal-1..4 stagger (classes in post content) */
@media (prefers-reduced-motion: no-preference) {
    .ma-v7-hero .ma-reveal {
        animation: maCinemaRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .ma-v7-hero .ma-reveal-1 { animation-delay: 0.05s; }
    .ma-v7-hero .ma-reveal-2 { animation-delay: 0.18s; }
    .ma-v7-hero .ma-reveal-3 { animation-delay: 0.31s; }
    .ma-v7-hero .ma-reveal-4 { animation-delay: 0.44s; }
}

/* ══ HOMEPAGE HERO — FULL-BLEED PHOTOGRAPH (2026-08-29) — see ma_home_hero() in functions.php ══ ⚠️ The scrim
   lives in the shared hero recipe, don't add a background-image here */

/* padding-top sets the photo window above the scrim ramp */
body.home .entry-content .ma-v7-hero.wp-block-group {
    padding: 0 !important;
}
/* ⚠️ width:100%, not another 100vw bleed: the parent already bleeds */
.ma-v7-hero-band {
    position: relative;
    width: 100%;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* bottom-anchored: the scrim is bottom-weighted */
    /* 150px keeps the band under one screen on desktop */
    min-height: 560px;
    padding: 150px 24px 56px;
    border-bottom: 3px solid var(--v8-red, #C4222B);
}
.ma-v7-hero-band__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    /* Card 440px, paired with the 4/3 slideshow frame so the van photo isn't cropped */
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 40px;
    align-items: end;
}

/* ⚠️ Colours need !important: the base rules set ink/slate/blue, invisible on the photo */
.ma-v7-hero--photo .ma-v7-hero-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    margin: 0 0 22px;
}
.ma-v7-hero--photo .ma-v7-eyebrow {
    color: #F3F0E9 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.ma-v7-hero--photo .ma-v7-hero-human,
.ma-v7-hero--photo .ma-v7-hero-quizlink {
    color: #FFFFFF !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
/* Phone number and quiz link in cream + underline (blue is invisible on the photo) */
.ma-v7-hero--photo .ma-v7-hero-quizlink a,
.ma-v7-hero--photo .ma-v7-hero-human a {
    color: #FFFFFF !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Solid buttons: a text-shadow on a filled label just smears it. */
.ma-v7-hero--photo .ma-v7-hero-ctas,
.ma-v7-hero--photo .ma-v7-hero-ctas .ma-v7-btn {
    text-shadow: none !important;
}
/* The outline button was ink-on-cream; on the photo it needs to be its own
   surface or it disappears into whatever is behind it. */
.ma-v7-hero--photo .ma-v7-btn--outline {
    background: rgba(250, 249, 246, .96);
    border-color: rgba(250, 249, 246, .96);
}

/* White inventory card: van photos near native size */
.ma-v7-hero-card {
    background: #FFFFFF;
    border-radius: var(--v7-radius, 14px);
    padding: 14px 14px 4px;
    box-shadow: 0 18px 44px rgba(16, 20, 28, .34);
}
.ma-v7-hero-card .ma-hero-slides { margin: 0; }
.ma-v7-hero-card .ma-v7-hero-photo img,
.ma-v7-hero-card .ma-hero-slide__img {
    border-radius: calc(var(--v7-radius, 14px) - 6px);
}
/* The ticket was absolutely positioned to overlap the old framed photo; inside
   the card it is a normal row under the slides. */
.ma-v7-hero-card .ma-v7-ticket {
    position: static;
    left: auto;
    bottom: auto;
    padding: 14px 8px 12px;
}

/* ── Certification logos, back on cream below the band ───────────────── */
/* ⚠️ margin auto is load-bearing: the full-bleed container no longer centres the logo row */
.ma-v7-hero-facts--logos { margin: 40px auto 0; }

@media (max-width: 900px) {
    /* Phones: shorter band, thin photo window */
    .ma-v7-hero-band {
        /* Phone padding as small as the scrim allows; shortening further means editing hero copy */
        min-height: 520px;
        padding: 72px 24px 32px;

        /* ⚠️ `cover` matches height on the portrait phone band and ignores the Y position; auto 145% */
        background-size: auto 145% !important;
    }
    .ma-v7-hero-band__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    /* Card first would push the h1 below the fold on a 390x844 screen, so the
       copy keeps the top of the band and the card follows it. */
    .ma-v7-hero-card { order: 2; }
}

/* ── Two fixes found by rendering the band, 2026-08-29 ───────────────────── */

/* Undo the constrained container cap so the band is really full-bleed */
body.home .ma-v7-hero > .wp-block-group__inner-container {
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The "real person" panel keeps its cream card and ink text (white on cream was 1.2:1) */
.ma-v7-hero--photo .ma-v7-hero-human {
    color: var(--v5-ink) !important;
    text-shadow: none !important;
}
.ma-v7-hero--photo .ma-v7-hero-human a {
    color: var(--v8-blue) !important;
}

/* Hero stagger: the inventory card is step 5 */
@media (prefers-reduced-motion: no-preference) {
    .ma-v7-hero .ma-reveal-5 { animation-delay: 0.57s; }
}

/* Slow pan on the active slide only (the one perpetual motion); delete this rule and its keyframe to drop it */
@media (prefers-reduced-motion: no-preference) {
    .ma-v7-hero-card .ma-hero-slide.is-active .ma-hero-slide__img {
        animation: maHeroSlidePan 5s ease-out both;
    }
}
@keyframes maHeroSlidePan {
    from { transform: scale(1); }
    to   { transform: scale(1.045); }
}

/* Phones (<=900px): no band photo (would be solid scrim over 1228px); PASS Z puts the slideshow behind the h1 + buttons instead */
@media (max-width: 900px) {
    .ma-v7-hero-band.ma-v7-hero--photo {
        background-image: none !important;
        background-color: var(--v8-chalk);
        min-height: 0;
        padding: 48px 24px 32px;
    }
    /* Back to ink on cream; must stay at the end of the block (order decides) */
    .ma-v7-hero--photo .ma-v7-hero-title,
    .ma-v7-hero--photo .ma-v7-hero-quizlink {
        color: var(--v5-ink) !important;
        text-shadow: none !important;
    }
    .ma-v7-hero--photo .ma-v7-eyebrow {
        color: var(--v7-steel) !important;
        text-shadow: none !important;
    }
    .ma-v7-hero--photo .ma-v7-hero-quizlink a,
    .ma-v7-hero--photo .ma-v7-hero-human a {
        color: var(--v8-blue) !important;
    }
    /* The outline button gets its cream-on-cream surface back. */
    .ma-v7-hero--photo .ma-v7-btn--outline {
        background: #FAF9F6;
        border-color: var(--v5-ink);
    }
}

/* ══ HOMEPAGE BELOW THE HERO (2026-08-29) — rhythm changes, not more reveal motion ══ */

/* Pre-owned band goes charcoal, same recipe as .ma-stat-interlude (14.2:1); no pre-owned photo works as a band */
.ma-v9-used {
    background: var(--v5-ink, #23272E);
}
.ma-v9-used .ma-v9-used-heading,
.ma-v9-used .ma-v9-used-copy {
    color: #FAF9F6;
}
/* The outline button was ink-on-cream and vanishes on charcoal — it needs to
   become its own surface, exactly as it does in the hero band. */
.ma-v9-used .ma-v7-btn--outline {
    background: #FAF9F6;
    border-color: #FAF9F6;
    color: var(--v5-ink, #23272E) !important;
}
.ma-v9-used .ma-v7-btn--outline:hover {
    background: transparent;
    color: #FAF9F6 !important;
}

/* Why-us photo bleeds off the left edge (desktop only) */
@media (min-width: 901px) {
    .ma-v6-why {
        /* The row goes full-bleed; the text column is re-inset below */
        max-width: none;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 0;
        gap: 48px;
    }
    .ma-v6-why-media {
        /* 0 0 40% of a 1180px row was 472px; against the viewport it needs to
           be a share that still leaves the text its column. */
        flex: 0 0 clamp(320px, 38vw, 620px);
    }
    .ma-v6-why-media img {
        border-radius: 0 var(--v7-radius, 14px) var(--v7-radius, 14px) 0;
        border-left: 0;
    }
    .ma-v6-why-content {
        /* Re-inset the text to the 1180px grid */
        padding-right: max(24px, calc(50vw - 590px));
    }
}

/* ══ JCI GOLD SEAL (2026-08-29) ══ ⚠️ 140px minimum so its wording is legible; per JCI rules never over a photo,
   never altered, never the JCI wordmark; re-pull current artwork before launch */

/* ⚠️ max-width governs the wide wordmarks, not height: raise both */
.ma-v7-hero-facts--logos img {
    height: 64px;
    max-width: 380px;
}
/* 140px is the legibility floor established above, not a design preference. */
.ma-v7-hero-facts--logos li:last-child img {
    height: 140px;
    max-width: none;
}
/* The four logos don't fit one line, so the seal takes its own line and its separator dot is hidden */
.ma-v7-hero-facts--logos {
    gap: 24px 40px;
}
.ma-v7-hero-facts--logos li:last-child {
    justify-content: center;
    /* ⚠️ Seal on a white chip: JCI forbids altering it, so never knock out its white background */
    padding: 10px 14px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid var(--line, #E4E1DA);
    flex-basis: auto;
    margin-top: 4px;
}
.ma-v7-hero-facts--logos li:last-child::before {
    content: none;
}

@media (max-width: 900px) {
    /* The row wraps here anyway, so the only job is stopping a 380px cap from
       overflowing a 342px content width. */
    .ma-v7-hero-facts--logos img {
        height: 52px;
        max-width: min(300px, 100%);
    }
    /* Seal stays 140px on phones (legibility floor) */
    .ma-v7-hero-facts--logos li:last-child img {
        height: 140px;
    }
}

/* About Us: 110px was the borderline case. */
.ma-cert-seal img {
    width: 140px;
}

/* ══ SINGLE VAN PAGE: LEAD PHOTO + PRICE ON THE FIRST SCREEN (2026-08-30) — DOM move in single-van_listing.php ══ */

/* Lead photo + five thumbnails on a fixed 5-column track; minmax(0, 1fr) so wide images can shrink */
/* Explicit placement for the three grid children (gallery | side / main) */
@media (min-width: 901px) {
    .ma-van-gallery-wrap { grid-column: 1; grid-row: 1; min-width: 0; }
    .ma-van-buybox       { grid-column: 2; grid-row: 1; }
    .ma-van-single-main  { grid-column: 1; grid-row: 2; }
    .ma-van-rail         { grid-column: 2; grid-row: 2; }
}

.ma-van-gallery-wrap .ma-van-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* The wrapper spans; the lead item carries the aspect ratio */
.ma-van-gallery__leadwrap {
    grid-column: 1 / -1;
    position: relative;
    min-width: 0;
}
/* Photos past the sixth are hidden, not removed (the lightbox filmstrip reads them); `> *` because the lead sits in a wrapper */
.ma-van-gallery-wrap .ma-van-gallery > *:nth-child(n + 7) {
    display: none;
}
/* With JS the row is a 5-photo window that follows the lead (fixed 2–6 left the active thumb hidden past photo 6, so the row looked stuck) */
.ma-van-gallery-wrap .ma-van-gallery.is-windowed > .ma-van-gallery__item { display: block; }
.ma-van-gallery-wrap .ma-van-gallery.is-windowed > .ma-van-gallery__item.is-offscreen { display: none; }

.ma-van-gallery__all {
    display: block;
    width: 100%;
    margin: -20px 0 32px;
    padding: 14px 20px;
    min-height: 50px;
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--v5-ink, #23272E);
    cursor: pointer;
}
.ma-van-gallery__all:hover,
.ma-van-gallery__all:focus-visible {
    border-color: var(--v8-red, #C4222B);
    background: rgba(196, 34, 43, .05);
}

/* Price card: gallery | price / specs | related, no wrapper column (a wrapper put the price below the specs on phones) */
.ma-van-buybox {
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 14px;
    padding: 22px 20px;
}
.ma-van-buybox .ma-van-pricebox {
    margin: 0 0 16px;
}
/* Stacked full-width CTAs, each 50px+ */
.ma-van-buybox .ma-van-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.ma-van-buybox .ma-van-ctas .ma-btn-plain {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    text-align: center;
}

@media (max-width: 900px) {
    /* The columns stack here, so the price card lands directly under the
       gallery — still far above the specs, which is the point. */
    .ma-van-gallery-wrap .ma-van-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* Three across means the lead plus one full row of three. */
    .ma-van-gallery-wrap .ma-van-gallery > *:nth-child(n + 5) {
        display: none;
    }
    .ma-van-buybox .ma-van-ctas .ma-btn-plain {
        min-height: 56px;
    }
}

/* Lead-image arrows: top from the lead's own aspect, not 50% of the grid */
.ma-van-lead-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--v5-ink, #23272E);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(16, 20, 28, .18);
}
.ma-van-lead-nav--prev { left: 14px; }
.ma-van-lead-nav--next { right: 14px; }
/* Skip-to-first/last sit one button-height below the step arrows, same column */
.ma-van-lead-nav--first { left: 14px; top: calc(50% + 68px); }
.ma-van-lead-nav--last  { right: 14px; top: calc(50% + 68px); }
/* The chevron fills only the middle of its 24-unit box, so it read tiny; bigger icon and a heavier stroke (Jeff, 2026-09-17) */
.ma-van-lead-nav svg { width: 36px; height: 36px; stroke-width: 3; }
.ma-van-lead-nav:hover,
.ma-van-lead-nav:focus-visible {
    background: #FFFFFF;
    border-color: var(--v8-red, #C4222B);
}

.ma-van-lead-count {
    position: absolute;
    z-index: 2;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(16, 20, 28, .74);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 700;
}

/* The active thumbnail, so the strip says which photo the lead is showing.
   Same visual language as the viewer's filmstrip. */
.ma-van-gallery__item.is-active {
    outline: 3px solid var(--v8-red, #C4222B);
    outline-offset: -3px;
}

/* ══ SINGLE PRODUCT PAGE (2026-08-30) — median 2 photos and 2 attributes, so no photo showcase or spec chips; h1 move is in functions.php ══ */

/* Gallery thumbnails: one scrollable row (same recipe as .ma-lightbox__strip) */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(35, 39, 46, 0.35) transparent;
}
/* Drop WooCommerce's float and 25% width */
/* ⚠️ WC's 25% width has a far longer selector; flex-basis sizes the item instead */
.woocommerce-product-gallery .flex-control-thumbs li {
    float: none;
    flex: 0 0 104px;
    margin: 0;
    list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs img {
    width: 100%;
    height: 104px;
    object-fit: cover;
    border-radius: 8px;
    opacity: 0.62;
    transition: opacity 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--v8-red, #C4222B);
}

/* Gallery arrows: FlexSlider directionNav (enabled in functions.php), styled like the van arrows; label moved off-screen, it's the accessible name */
/* ⚠️ Arrows centre on the photo: the gallery becomes a grid and the nav shares the photo's cell */
.woocommerce-product-gallery {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
}
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    grid-column: 1;
    grid-row: 1;
}
.woocommerce-product-gallery .flex-control-thumbs {
    grid-column: 1;
    grid-row: 2;
}
.woocommerce-product-gallery .flex-direction-nav {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    position: relative;
    /* Only the two buttons are clickable — the overlay must not sit between
       the visitor and the photo, which opens PhotoSwipe. */
    pointer-events: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-product-gallery .flex-direction-nav a {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Keeps the word "Previous" as the accessible name while showing the chevron drawn in ::before. */
    text-indent: -9999px;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 10px rgba(16, 20, 28, .18);
    text-decoration: none !important;
}
.woocommerce-product-gallery .flex-direction-nav li {
    margin: 0;
    list-style: none;
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev { left: 14px; }
.woocommerce-product-gallery .flex-direction-nav .flex-next { right: 14px; }
.woocommerce-product-gallery .flex-direction-nav a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-top: 2.5px solid var(--v5-ink, #23272E);
    border-right: 2.5px solid var(--v5-ink, #23272E);
}
.woocommerce-product-gallery .flex-direction-nav .flex-next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}
.woocommerce-product-gallery .flex-direction-nav a:hover,
.woocommerce-product-gallery .flex-direction-nav a:focus-visible {
    background: #FFFFFF;
    border-color: var(--v8-red, #C4222B);
}
/* Nudge the magnifier clear of the next arrow */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    z-index: 4;
}

/* Certification logos under Call to Order; ⚠️ the seal never scales below 140px */
/* ⚠️ clear:both is load-bearing: WC still floats the gallery and summary */
.ma-product-certs {
    clear: both;
    margin: 40px 0 8px;
    padding: 30px 0 6px;
    border-top: 1px solid var(--line, #E4E1DA);
}
/* Wordmarks shrink to fit the column; the seal holds its size */
/* Clear the base row's border and margin so there's one divider */
.ma-v7-hero-facts--product {
    gap: 20px 40px;
    margin: 0;
    padding: 0;
    border-top: 0;
    justify-content: center;
}
.ma-v7-hero-facts--product img {
    height: 46px;
    max-width: 230px;
}
/* ⚠️ 140px is the legibility floor from JCI's guidelines, not a design value.
   If this row ever needs to be smaller, drop the seal — do not shrink it. */
.ma-v7-hero-facts--product li:last-child img {
    height: 140px;
    max-width: none;
}
/* All four fit here, so undo the seal's own-line override */
.ma-v7-hero-facts--product li:last-child {
    flex-basis: auto;
}

@media (max-width: 700px) {
    /* The row wraps to two lines here. The seal keeps its floor and takes the
       second line on its own, which is how the homepage row behaves too. */
    .ma-v7-hero-facts--product {
        gap: 16px 28px;
    }
    .ma-v7-hero-facts--product img {
        height: 34px;
        max-width: 140px;
    }
    .ma-v7-hero-facts--product li:last-child {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* Related products: three (set in functions.php), a scroll rail on phones */
@media (max-width: 768px) {
    /* ⚠️ Stays a grid: `.woocommerce ul.products { display: grid !important }` discards display:flex */
    .related.products ul.products {
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        gap: 14px !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: rgba(35, 39, 46, 0.35) transparent;
        /* Full-bleed so a card can sit half-off the edge and read as
           scrollable, rather than ending flush and looking like the end. */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 4px 24px 10px !important;
    }
    .related.products ul.products > li.product {
        margin: 0;
        scroll-snap-align: start;
    }

    .ma-upsell--product .ma-upsell__grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: rgba(35, 39, 46, 0.35) transparent;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 4px 24px 10px;
    }
    .ma-upsell--product .ma-upsell__grid > .ma-upsell__tile {
        flex: 0 0 78%;
        max-width: 78%;
        margin: 0;
        scroll-snap-align: start;
    }
}

/* ══ PRODUCT CARDS HORIZONTAL ON PHONES (2026-08-30) — one per row (two columns truncated names); scoped by body
   class so the related rail is untouched ══ */

@media (max-width: 700px) {
    body.woocommerce-shop ul.products,
    body.tax-product_cat ul.products {
        gap: 14px !important;
    }

    /* ⚠️ display and padding need !important to beat the card's !important rules */
    body.woocommerce-shop ul.products li.product,
    body.tax-product_cat ul.products li.product {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        padding: 16px !important;
        text-align: left;
    }

    /* ⚠️ Never display:contents on the product link: it removes the link from the accessibility tree. The link is the two-column grid */
    body.woocommerce-shop ul.products li.product > a.woocommerce-LoopProduct-link,
    body.tax-product_cat ul.products li.product > a.woocommerce-LoopProduct-link {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        text-decoration: none;
    }

    /* Photo spans all three rows so it sits beside the whole text column
       rather than leaving 132px of dead space under itself. */
    /* 110px photo leaves the name room */
    body.woocommerce-shop ul.products li.product img,
    body.tax-product_cat ul.products li.product img {
        grid-column: 1;
        align-self: center;
        width: 110px !important;
        height: 110px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
    body.tax-product_cat ul.products li.product .woocommerce-loop-product__title {
        grid-column: 2;
        /* Down from 28px. The name is the one thing that must never truncate,
           and 21px still clears the 16px floor this site holds itself to. */
        font-size: 21px !important;
        line-height: 1.25 !important;
        margin: 0 0 8px !important;
        text-align: left !important;

        /* Names clamp at 4 lines, no min-height: the base 2-line clamp cut 15 of 24 names */
        -webkit-line-clamp: 4;
        min-height: 0;
    }

    body.woocommerce-shop ul.products li.product .ma-spec-tags,
    body.tax-product_cat ul.products li.product .ma-spec-tags {
        grid-column: 1 / -1;
        margin: 12px 0 10px !important;
        justify-content: flex-start !important;
    }
    /* Tags 12px beside the 21px name */
    body.woocommerce-shop ul.products li.product .ma-spec-tag,
    body.tax-product_cat ul.products li.product .ma-spec-tag {
        font-size: 12px;
        padding: 4px 9px;
    }

    body.woocommerce-shop ul.products li.product .button,
    body.tax-product_cat ul.products li.product .button {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: auto !important;
        margin: 0 !important;
        /* Unchanged height — this is the page's primary action and the reason
           two-up was rejected. */
        min-height: 56px;
    }

    /* Badges follow the photo */
    body.woocommerce-shop ul.products li.product .onsale,
    body.tax-product_cat ul.products li.product .onsale {
        left: 8px;
        right: auto;
    }
}

/* Pre-Owned card on /mobility-equipment/: its own heading, spans 2 of 4 tracks. ⚠️ Fixed 4 columns: auto-fit
   collapses empty tracks and the card stretches to the full row */
.ma-eq-cats--featured {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
    .ma-eq-cats--featured {
        grid-template-columns: 1fr;
    }
}
.ma-eq-cat--used {
    grid-column: span 2;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.ma-eq-cat--used .ma-v7-cat-media {
    flex: 0 0 42%;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
}
.ma-eq-cat--used .ma-v7-cat-body {
    flex: 1;
    justify-content: center;
}
@media (max-width: 640px) {
    .ma-eq-cat--used {
        grid-column: span 1;
        flex-direction: column;
    }
    .ma-eq-cat--used .ma-v7-cat-media {
        flex: none;
        aspect-ratio: 16 / 9;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
}

/* ══ TRADE-IN FORM (2026-09-02) — [ma_trade_in_form] in ma-leads reuses WPForms class names; WPForms'
   frontend.css doesn't load here, so the field styles are filled in below ══ */
.ma-tradein-form {
    max-width: 640px;
    margin: 0 auto;
    text-align: left; /* the .ma-call-strip ancestor centers text */
}

/* Required asterisk readable on every dark call strip (the #990000 fix is for light backgrounds) */
.ma-call-strip--dark .wpforms-required-label {
    color: #FF8A80 !important;
}
.ma-tradein-form .wpforms-field {
    margin-bottom: 24px;
}
.ma-tradein-form .wpforms-field-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}
.ma-tradein-form input[type="text"],
.ma-tradein-form input[type="tel"],
.ma-tradein-form input[type="email"],
.ma-tradein-form select,
.ma-tradein-form textarea {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 10px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--v7-radius);
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem; /* 20px, via the html{font-size:20px} base */
}
.ma-tradein-form textarea {
    min-height: 120px;
    resize: vertical;
}
.ma-tradein-form select {
    cursor: pointer;
}
.ma-tradein-form .wpforms-field-small { max-width: 140px; }
.ma-tradein-form .wpforms-field-medium { max-width: 100%; }
.ma-tradein-form .wpforms-field-description {
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--v5-slate);
}
.ma-tradein-form .wpforms-submit {
    width: 100%;
    border: 2px solid transparent;
    border-radius: var(--v7-radius);
    color: var(--color-white);
    cursor: pointer;
}
@media (min-width: 641px) {
    .ma-tradein-form .wpforms-submit {
        width: auto;
        padding: 0 32px;
    }
}

/* Native file input, plainly styled */
.ma-tradein-field-photos input[type="file"] {
    display: block;
    width: 100%;
    padding: 12px 14px;
    min-height: 50px;
    border: 2px dashed var(--color-border);
    border-radius: var(--v7-radius);
    background: var(--color-bg-warm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
}

/* Success / error banners — plain, high-contrast, no icon dependency. */
.ma-tradein-notice {
    max-width: 640px;
    margin: 0 auto 24px;
    padding: 18px 20px;
    border-radius: var(--v7-radius);
    font-weight: 600;
    line-height: 1.6;
}
.ma-tradein-notice--success {
    background: #E7F3E8;
    border: 2px solid #2E7D32;
    color: #1B4D1E;
}
.ma-tradein-notice--error {
    background: #FBEAEA;
    border: 2px solid var(--color-cta);
    color: #7A1418;
}

/* Search results pager (GP's generate_pagination(): `.nav-links > .page-numbers`) */
/* The pager is a direct child of the 2-column results grid, so it took a cell and GP's boxed 40px padding; span the row and drop the box */
.search .site-main .paging-navigation {
    grid-column: 1 / -1;
    background: none;
    padding: 24px 0 0;
    text-align: center;
}
.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px 8px 0;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 10px;
    background: #FFFFFF;
    font-weight: 700;
    color: var(--v8-charcoal, #23272E);
    text-decoration: none;
    min-width: 68px;
    height: 68px;
    padding: 0 16px;
    font-size: 26px;
}
.nav-links .page-numbers.current {
    background: var(--v8-red-deep, #A31B24);
    border-color: var(--v8-red-deep, #A31B24);
    color: #FFFFFF;
}
.nav-links .page-numbers.dots {
    border-color: transparent;
    background: none;
    min-width: 0;
    height: auto;
    padding: 0 4px;
    opacity: .55;
}

/* ══ PAGINATION SIZE PASS 2 (2026-09-02) ══ */
.ma-pager,
.ma-van-pagination {
    font-size: 26px;
}
.ma-pager__link,
.ma-van-pagination__link {
    min-height: 56px;
}
.ma-pager__num,
.ma-van-pagination__num {
    min-width: 68px;
    height: 68px;
    font-size: 26px;
}
/* Restated again for the ellipsis (order decides) */
.ma-pager__num--dots { min-width: 0; }

@media (max-width: 768px) {
    .ma-pager__num,
    .ma-van-pagination__num { min-width: 76px; height: 76px; }
    .ma-pager__num--dots { min-width: 0; }
}

.blog .ma-blog-archive-inner .page-numbers {
    min-width: 68px;
    padding: 14px 22px;
    font-size: 26px;
}

@media (max-width: 768px) {
    .nav-links .page-numbers {
        min-width: 76px;
        height: 76px;
    }
}

/* ══ MOBILE UX: RECLAIM THE FIRST SCREEN (2026-09-02) — all rules mobile-gated except the van spec table fix ══ */

/* ── A1+A2. The cookie notice was effectively UNDISMISSABLE on a phone ─────── */
/* ⚠️ Fixed elements ignore body padding: the cookie bar needs its own offset to clear the call bar */
@media (max-width: 767px) {
    .ma-cookie-bar {
        /* 79px call bar + 10px breathing room. env() repeats the call bar's own
           safe-area inset so both clear the iOS home indicator together. */
        bottom: calc(89px + env(safe-area-inset-bottom, 0px));
        left: 10px;
        right: 10px;
        padding: 14px 16px;
        gap: 12px;
    }
    /* Cookie text 18px (dismissible chrome, under the 20px floor on purpose) */
    .ma-cookie-bar p {
        font-size: 18px;
        line-height: 1.45;
    }
    .ma-cookie-ok {
        min-height: 56px;   /* the project's mobile button minimum */
        font-size: 18px;
    }
}

/* ── A4. Tap targets under the 44px floor ─────────────────────────────────── */
/* 44px touch targets on phones; inline links in sentences are exempt (WCAG 2.5.8) */
@media (max-width: 767px) {
    .ma-van-back-link,
    .ma-van-rail__all {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .search .site-main article .read-more {
        display: inline-block;
        padding: 9px 0;
    }
    .search .site-main article .entry-title a {
        display: inline-block;
        padding: 7px 0;
    }
    /* Grow the magnifier's hit area without moving the icon */
    .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── B1. The utility bar leaves the phone entirely ────────────────────────── */
/* Phones: utility bar hidden from the start; the sticky call bar carries Call and Text. No JS change needed:
   hidden elements measure 0, so --ma-sticky-top resolves to 0 */
@media (max-width: 767px) {
    .ma-utility-bar {
        display: none;
    }
}

/* ══ PASS A: TYPE SCALE, LIVE NUMBER, EDITORIAL REVIEWS (2026-09-02, homepage) ══ */

/* ── The scale ────────────────────────────────────────────────────────────── */

/* ⚠️ font-weight needs !important: a heading rule sets weight 800 !important */
body.home .ma-v7-hero-title {
    font-size: var(--ma-fs-display) !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em;
    line-height: 1.02;
}

/* ⚠️ 68px is a measured ceiling: 76px breaks the hero headline to 3 lines */

body.home .ma-v9-used-heading,
body.home .ma-v9-calc-heading {
    font-size: var(--ma-fs-feature) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

body.home .ma-v7-shop-heading,
body.home .ma-quiz-heading,
body.home .ma-v6-why-heading,
body.home .ma-v8-video-heading {
    font-size: var(--ma-fs-section) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    line-height: 1.18;
}

/* ── The live van count ───────────────────────────────────────────────────── */
/* The live van count leads the caps heading, inside the same h2 */
body.home .ma-process-heading--num {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* The "30 / VANS READY" heading is a flex column: align-items, not text-align */
    align-items: flex-start !important;
}
body.home .ma-process-heading--num .ma-bignum {
    font-family: var(--font-display);
    font-size: var(--ma-fs-display);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--v8-red);
    text-transform: none;
    /* Tabular figures so the count-up doesn't jog the line */
    font-variant-numeric: tabular-nums;
}
body.home .ma-process-heading--num .ma-process-heading__line {
    display: block;
}

/* ── Reviews: one leads, two support ──────────────────────────────────────── */
/* Editorial reviews (.ma-hr-*), separate from .ma-v6-quote which /reviews/ uses */
.ma-hr {
    background: var(--v8-chalk);
    padding: 40px 24px 56px;
}
.ma-hr-inner {
    max-width: 1180px;
    margin: 0 auto;
}
/* Label-level h2 at 20px, like .ma-sf-col-head */
.ma-hr-eyebrow {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v8-blue);
    margin: 0 0 18px;
}
.ma-hr-stars {
    display: block;
    color: var(--v8-red);
    line-height: 1;
    margin: 0 0 14px;
}
/* ⚠️ font-style:normal is load-bearing: GP's blockquote italic inherits */
.ma-hr-lead,
.ma-hr-small {
    font-style: normal;
}
.ma-hr-lead {
    max-width: 900px;
    margin: 0 0 40px;
    padding: 0;
    border: 0;
}
.ma-hr-lead-text {
    font-family: var(--font-body);
    font-size: clamp(24px, 2.5vw, 38px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.015em;
    color: var(--v5-ink);
    margin: 0 0 18px;
    text-wrap: balance;
}
.ma-hr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(min(320px, 100%), 1fr));
    gap: 24px;
}
.ma-hr-small {
    margin: 0;
    padding: 24px 26px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--v7-radius);
}
.ma-hr-small .ma-hr-stars { margin-bottom: 10px; }
.ma-hr-small .ma-hr-stars svg { width: 15px; height: 15px; }
.ma-hr-small-text {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.55;
    color: var(--v5-ink);
    margin: 0 0 14px;
}
.ma-hr-byline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--v5-slate);
    margin: 0;
}
.ma-hr-src {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.ma-hr-more { margin: 28px 0 0; }

@media (max-width: 767px) {
    .ma-hr { padding: 32px 20px 40px; }
    /* One column on phones */
    .ma-hr-grid { grid-template-columns: 1fr; gap: 16px; }
    .ma-hr-lead { margin-bottom: 28px; }
}

/* ══ PASS B: VAN SPEC PLATE + TYPE SCALE (2026-09-02) — spec tables became a <dl> per group, so the VIN can't overflow ══ */

/* ── The plate ────────────────────────────────────────────────────────────── */
.ma-van-plate {
    margin: 0;
    border-top: 1px solid var(--color-border);
}
.ma-van-plate__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--color-border);
}
/* Labels 20px sentence case, never wrap (narrower than uppercase, meets the floor) */
.ma-van-plate__label {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--v5-slate);
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    line-height: 1.4;
}
/* ⚠️ min-width:0 is load-bearing: without it the VIN refuses to shrink */
.ma-van-plate__value {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    text-align: right;
    font-family: var(--font-body);
    font-size: 20px;
    /* Label and value are the same size, so WEIGHT and colour carry the
       distinction: slate 600 for what it is, ink 700 for what it says. */
    font-weight: 700;
    line-height: 1.4;
    color: var(--v5-ink);
    overflow-wrap: anywhere;
}
/* VIN and stock number: tabular figures and a little tracking */
.ma-van-plate__value--code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Group headings sit at the h3 step of the Pass A scale, above the 28px
   heading floor. */
.ma-van-details h2 {
    font-size: 28px;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

/* ── Type scale, carried from Pass A ──────────────────────────────────────── */
/* Van name at display scale (clamp: author-entered length) */
.single-van_listing .ma-store-header h1 {
    font-size: clamp(30px, 3.6vw, 52px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

/* ── Back-to-the-lot tab: stop leaking a letter ───────────────────────────── */
/* Back tab: the label hides with opacity (not clipping), so it's still announced; focus restores it. It carries
   the filters back, so don't remove it */
@media (min-width: 1100px) {
    .ma-van-back-float {
        max-width: 52px;
    }
    .ma-van-back-float:hover,
    .ma-van-back-float:focus-visible {
        max-width: 320px;
    }
    .ma-van-back-float__text {
        opacity: 0;
        transition: opacity 0.22s ease;
    }
    .ma-van-back-float:hover .ma-van-back-float__text,
    .ma-van-back-float:focus-visible .ma-van-back-float__text {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ma-van-back-float__text { transition: none; }
}

/* ══ MOBILE PASS 2: CUT THE SCROLL (2026-09-03) — phones only, desktop must not move ══ */

/* ── 1. The filter bar is now a <details> ─────────────────────────────────── */
/* The filter bar is a <details>: open by default, js/animations.js closes it below 768px */
/* ⚠️ Chrome's ::details-content box doesn't match `*`, so it resets box-sizing to content-box. Any <details> in this theme needs this line */
.ma-filter-bar::details-content {
    box-sizing: border-box;
}

.ma-filter-bar > summary.ma-filter-head {
    /* Hide the disclosure marker in all browsers */
    list-style: none;
    cursor: pointer;
}
.ma-filter-bar > summary.ma-filter-head::-webkit-details-marker { display: none; }

@media (max-width: 767px) {
    /* Collapsed, the summary IS the control, so it has to be a real target.
       56px is the project's mobile button minimum. */
    .ma-filter-bar > summary.ma-filter-head {
        min-height: 56px;
        margin-bottom: 0;
        padding: 8px 0;
    }
    .ma-filter-bar[open] > summary.ma-filter-head {
        margin-bottom: 16px;
    }
    /* A chevron so the collapsed row reads as openable rather than as a title.
       Rotates when open; the rotation is the only motion added in this pass. */
    .ma-filter-bar > summary.ma-filter-head::after {
        content: '';
        flex: 0 0 auto;
        width: 12px;
        height: 12px;
        margin-left: 4px;
        border-right: 3px solid var(--v5-slate);
        border-bottom: 3px solid var(--v5-slate);
        transform: rotate(45deg);
        transform-origin: center;
        transition: transform 0.2s ease;
    }
    .ma-filter-bar[open] > summary.ma-filter-head::after {
        transform: rotate(-135deg);
    }
    /* Same treatment for the buying guide's own accordions, which JS also
       closes on phones. */
    .ma-buying-guide .ma-guide-accordion > summary {
        min-height: 56px;
        display: flex;
        align-items: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ma-filter-bar > summary.ma-filter-head::after { transition: none; }
}

/* ── 2. Facet pills come off the product card on phones ───────────────────── */
/* Phones: hide the product-card facet pills (the filter panel offers them); ⚠️ never hide .ma-spec-tags itself,
   the Sold and Just In badges live there */
@media (max-width: 700px) {
    body.woocommerce-shop ul.products li.product .ma-spec-tag:not(.ma-spec-tag--sold):not(.ma-spec-tag--new),
    body.tax-product_cat ul.products li.product .ma-spec-tag:not(.ma-spec-tag--sold):not(.ma-spec-tag--new) {
        display: none;
    }
    /* Collapse the empty tags row when nothing visible is left inside */
    body.woocommerce-shop ul.products li.product .ma-spec-tags:not(:has(.ma-spec-tag--sold)):not(:has(.ma-spec-tag--new)),
    body.tax-product_cat ul.products li.product .ma-spec-tags:not(:has(.ma-spec-tag--sold)):not(:has(.ma-spec-tag--new)) {
        display: none;
    }
}

/* ── 3. Van cards go horizontal on phones ─────────────────────────────────── */
/* Van cards horizontal on phones (superseded by PASS Y's showroom rows). ⚠️ Never display:contents on a link (see the product cards) */
@media (max-width: 700px) {
    .ma-van-card {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        padding: 14px;
    }
    /* Row 1, column 1. 4/3 rather than a square: a van is a landscape subject
       and a square crop cuts its nose and tail off. */
    .ma-van-card > .ma-van-card__photo-wrap {
        grid-column: 1;
        aspect-ratio: 4 / 3;
        height: auto;
        border-radius: 8px;
        overflow: hidden;
    }
    .ma-van-card > .ma-van-card__photo-wrap .ma-van-card__photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* The body stops being a block and becomes a subgrid-ish column so its
       children can be split across the card's two columns. */
    .ma-van-card > .ma-van-card__body {
        grid-column: 1 / -1;
        grid-row: 1 / span 2;
        display: contents;
    }
    /* display:contents on the body div is safe: it has no role or focus */
    /* The title spans both columns (beside the photo it wrapped to three lines) */
    .ma-van-card > .ma-van-card__body > .ma-van-card__title {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0 0 10px;
    }
    .ma-van-card > .ma-van-card__photo-wrap {
        grid-row: 2;
    }
    /* Tags full width; the brand pill is hidden (a filter facet), entry type and Clean Title stay */
    .ma-van-card > .ma-van-card__body > .ma-van-card__tags {
        grid-column: 1 / -1;
        grid-row: 3;
        margin: 10px 0 0;
    }
    .ma-van-card > .ma-van-card__body > .ma-van-card__tags
        .ma-van-tag:not(.ma-van-tag--clean-title):nth-of-type(2) {
        display: none;
    }
    /* 9px side padding keeps two pills on one row; font stays 18px */
    .ma-van-card > .ma-van-card__body > .ma-van-card__tags .ma-van-tag {
        padding-left: 9px;
        padding-right: 9px;
    }
    .ma-van-card > .ma-van-card__body > .ma-van-card__price {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        margin: 0;
    }
    .ma-van-card > .ma-van-card__body > .ma-van-card__cta {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 12px;
        min-height: 56px;
    }
    /* Sold badge spans the card so it cannot be squeezed into a column. */
    .ma-van-card > .ma-van-card__sold-badge {
        grid-column: 1 / -1;
        grid-row: 0;
    }
}

/* ⚠️ Reviews band bleeds full width inside the shop zone: needs the width + max-width pair (body.home has overflow-x:clip) */
body.home .ma-v7-shop .ma-hr {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ══ TYPE SCALE ROLLOUT + LABEL FLOOR (2026-09-03) ══ ⚠️ font-weight needs !important throughout (a heading rule sets 800 !important) */

/* ⚠️ h1.entry-title, not .entry-title: WordPress uses that class for every post in a loop */
body:not(.home) h1,
h1.entry-title,
.wp-block-heading:where(h1) {
    font-size: var(--ma-fs-h1) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* The two emotional peaks on interior pages get the feature step. */
.ma-conversion-band__heading {
    font-size: var(--ma-fs-feature) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* Section openers share one size */
/* ⚠️ Never add `.ma-content-section h2` here: van card titles are h2s inside it */
.ma-svc-section__heading,
.ma-splitband__heading,
body:not(.home) .wp-block-heading:where(h2) {
    font-size: var(--ma-fs-section) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    line-height: 1.18;
}

/* Card/sub-section titles hold at the 28px heading floor. */
.ma-svc-card__title,
.ma-subcat-title,
body:not(.home) .wp-block-heading:where(h3) {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* ── The label tier ───────────────────────────────────────────────────────── */
/* Labels (eyebrows, counters, pills) at 16px; .ma-spec-tag stays 12px (hidden on phones, repeated up to 162x per page) */
.ma-v7-eyebrow,
.ma-quiz-eyebrow,
.ma-quiz-progress,
.ma-v6-why-eyebrow,
.ma-v6-quotes-eyebrow,
.ma-svc-section__eyebrow,
.ma-page-hero__eyebrow,
.ma-conversion-band__eyebrow,
.ma-brand-strip-label,
.ma-process-eyebrow,
.ma-store-eyebrow,
.ma-v7-ticket-kicker,
.ma-van-lead-count,
.ma-hero-slide__caption-spec {
    font-size: 16px !important;
}

/* Sub-20px stragglers; GP's .mobile-menu label left alone (tight header row) */
.ma-v6-quote-byline,
.ma-v6-quote-src,
.ma-swatch {
    font-size: 16px !important;
}

/* Van card frame is 4/3 to match the 940x700 photos. ⚠️ Load-bearing: the price is burned into the photo, keep x
   572..940 / y 579..700 visible. Check both the archive and the homepage after changes */
.ma-van-card__photo-wrap {
    aspect-ratio: 4 / 3;
}

/* ── Van card: the price lives in the photograph above 700px ──────────────── */
/* The price is in the photo, so the text price hides; only on cards whose photo carries it (--in-photo) */
@media (min-width: 701px) {
    .ma-van-card__price--in-photo {
        display: none;
    }
}

/* ══ PASS C: RHYTHM (2026-09-05, homepage) — one field, two charcoal bands, one spacing token, numbered chapter rules ══ */

/* ── 1. One spacing token ─────────────────────────────────────────────────── */

/* 40px floor set by the phone (the clamp is pinned to it at 390px) */

/* ── 2. One field: the cream slab goes ────────────────────────────────────── */
/* .ma-v7-shop keeps its full-bleed geometry but stops painting; every chapter owns its spacing */
body.home .entry-content .ma-v7-shop.wp-block-group {
    border-top: 0;
    border-bottom: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ⚠️ Cards go pure white: the chalk card recipe matched the field (!important to beat it) */
body.home .woocommerce ul.products li.product,
body.home .ma-van-card,
body.home .ma-featured-vans .ma-van-card,
body.home .ma-blog-card,
body.home .ma-v6-quote,
body.home .ma-v7-cat,
body.home .ma-v7-ticket,
body.home .ma-quiz-option {
    background: #FFFFFF !important;
}

body.home .woocommerce ul.products li.product:hover,
body.home .ma-van-card:hover,
body.home .ma-featured-vans .ma-van-card:hover,
body.home .ma-blog-card:hover,
body.home .ma-v7-cat:hover,
body.home .ma-v7-ticket:hover,
body.home .ma-quiz-option:hover,
body.home .ma-quiz-option:focus-visible {
    background: #FFFFFF !important;
}

/* ── 3. The rhythm: every chapter on one token ────────────────────────────── */
/* padding-top only: margins collapse differently at different nesting levels */
body.home .ma-v7-shop-head,
body.home .ma-featured-vans,
body.home .ma-hr,
body.home .ma-quiz,
body.home .ma-v6-why,
body.home .ma-v8-video,
body.home .ma-v9-calc {
    padding-top: var(--ma-sec-y) !important;
    padding-bottom: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
}

/* The charcoal bands need padding on both sides */
body.home .ma-v9-used {
    padding-top: var(--ma-sec-y) !important;
    padding-bottom: var(--ma-sec-y) !important;
}

/* Last chapter on the page: needs its own bottom, nothing follows it. */
body.home .ma-brand-strip {
    padding-top: var(--ma-sec-y) !important;
    padding-bottom: var(--ma-sec-y) !important;
    margin: 0;
}

/* Within a chapter, the tight step. */
body.home .ma-v7-cats { margin-top: var(--ma-sec-y-tight); }
body.home .ma-v7-quicklinks { margin-top: var(--ma-sec-y-tight); }

/* ── 4. Numbered chapter rules ────────────────────────────────────────────── */
body.home .ma-v7-shop-head::before,
body.home .ma-featured-vans-inner::before,
body.home .ma-hr-inner::before,
body.home .ma-v9-used-inner::before,
body.home .ma-quiz-inner::before,
body.home .ma-v6-why-content::before,
body.home .ma-v8-video-inner::before,
body.home .ma-v9-calc-inner::before {
    counter-increment: ma-chapter;
    content: counter(ma-chapter, decimal-leading-zero);
    content: counter(ma-chapter, decimal-leading-zero) / "";
    display: block;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    margin-bottom: 26px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    /* Tabular so 01..08 all occupy the same width and the rules above them
       start at an identical x. Proportional figures shift "1" narrow. */
    font-variant-numeric: tabular-nums;
    color: var(--v8-blue);
    /* Chapter hairlines draw in via background-size (a border can't animate its length); drawn by default, animated only once JS tags the body */
    border-top-color: transparent;
    background-image: linear-gradient(#D9D4C9, #D9D4C9);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 1px;
}

/* The pre-owned chapter is charcoal, so both the rule and the numeral need the
   inverted pair — --color-border on #23272E is 1.05:1, i.e. invisible. */
body.home .ma-v9-used-inner::before {
    color: #FFFFFF;
}

/* .ma-v6-why is a media/content split whose photo bleeds (0ec28de), so the rule
   goes inside the content column — a full-width one would run under the photo. */
body.home .ma-v6-why-content::before {
    margin-bottom: 22px;
}

@media (max-width: 768px) {
    body.home .ma-v7-shop-head::before,
    body.home .ma-featured-vans-inner::before,
    body.home .ma-hr-inner::before,
    body.home .ma-v9-used-inner::before,
    body.home .ma-quiz-inner::before,
    body.home .ma-v6-why-content::before,
    body.home .ma-v8-video-inner::before,
    body.home .ma-v9-calc-inner::before {
        padding-top: 10px;
        margin-bottom: 14px;
    }
}

/* ⚠️ Long-form selector: `body.home .entry-content .ma-v7-shop .ma-*` sets the padding shorthand !important (0,4,0); keep the 24px sides */
body.home .entry-content .ma-v7-shop .ma-featured-vans,
body.home .entry-content .ma-v7-shop .ma-quiz {
    padding: var(--ma-sec-y) 24px 0 !important;
}

/* ── 5. The hero stops contributing an unexplained 40px ───────────────────── */
/* Zero the hero inner container's bottom padding so chapter 01 sits one token below */
body.home .entry-content .ma-v7-hero.wp-block-group > .wp-block-group__inner-container {
    padding-bottom: 0;
}

/* ── 6. The article's own white had been hidden by the bands ──────────────── */
/* GP paints .inside-article white behind every section; transparent so the field is one surface */
body.home /* ⚠️ background-color + !important: WC archive templates re-assert a white .inside-article */
.inside-article {
    background-color: transparent !important;
}

/* ── 7. The chapter numeral is left-aligned in every chapter ──────────────── */
/* Chapter numerals hold one x position (some inner containers are centred) */
body.home .ma-v9-used-inner::before,
body.home .ma-quiz-inner::before,
body.home .ma-v9-calc-inner::before {
    text-align: left;
}

/* ── 8. The gap under the certification logos ─────────────────────────────── */
/* Chapter 01 takes the tight step: the hero already ends in air */
body.home .ma-v7-hero-facts--logos {
    padding-bottom: 0;
}
body.home .ma-v7-hero-facts--logos > li:last-child {
    padding-bottom: 0;
}
body.home .ma-v7-shop-head {
    padding-top: var(--ma-sec-y-tight) !important;
}

/* ── 9. The field goes CREAM ──────────────────────────────────────────────── */
/* The field is cream #F3F0E9 with white cards (chalk + white was a 1.02:1 step, "too white and dead"); header and footer included */
body.home {
    --ma-field: var(--v7-mist); /* #F3F0E9 */
    background: var(--ma-field);
}
body.home .ma-utility-bar,
body.home .site-header,
body.home #masthead,
body.home .site-footer {
    background: var(--ma-field);
}
body.home .entry-content .ma-v7-hero.wp-block-group,
body.home .entry-content .ma-v7-shop.wp-block-group,
body.home .ma-hr,
body.home .ma-v6-why,
body.home .ma-v8-video,
body.home .ma-v9-calc,
body.home .ma-brand-strip {
    background: var(--ma-field) !important;
}

/* ══ ROLLOUT: PASS A + PASS C SITEWIDE (2026-09-05) — every surface is either the field or a card ══ */

/* ── 1. --ma-field is no longer a homepage variable ───────────────────────── */

/* ── 2. The field, sitewide ───────────────────────────────────────────────── */
/* .main-navigation is field, not card; its .sub-menu overlay is a card */
/* ⚠️ background-color + !important: the chrome surfaces defend themselves with !important, and the shorthand would delete hero photos */
body,
.ma-utility-bar,
.site-header,
#masthead,
.main-navigation,
.site-footer,
.site-info,
.ma-trust-band,
.ma-store-header,
.ma-content-section,
.ma-bigcall,
.ma-v6-quotes {
    background-color: var(--ma-field) !important;
}

/* GP's white .inside-article goes transparent everywhere */
/* ⚠️ background-color + !important: WC archive templates re-assert a white .inside-article */
.inside-article {
    background-color: transparent !important;
}

/* ── 3. Cards and controls go white, sitewide ─────────────────────────────── */
.woocommerce ul.products li.product,
.ma-van-card,
.ma-blog-card,
.ma-svc-card,
.ma-guide-accordion,
.ma-v6-quote,
.ma-v7-cat,
.ma-v7-ticket,
.ma-quiz-option,
.sub-menu,
.ma-cookie-bar,
.ma-estimator,
.ma-est-input,
.ma-ordering-submit,
.ma-v7-quicklink--sale,
.ma-v7-quicklinks a,
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea {
    background: #FFFFFF !important;
}

.woocommerce ul.products li.product:hover,
.ma-van-card:hover,
.ma-blog-card:hover,
.ma-svc-card:hover,
.ma-v7-cat:hover,
.ma-v7-ticket:hover,
.ma-quiz-option:hover,
.ma-quiz-option:focus-visible {
    background: #FFFFFF !important;
}

/* ── 4. Cream that sits ON the field has to move ──────────────────────────── */
/* Cream inside a white card stays; cream on the field moves */
/* Three surfaces only (cream field, white cards, charcoal bands): a container that holds cards is field, only a card-free object can be white */

/* Card-free objects -> white, they ARE cards. */
.ma-compat-cta,
.ma-cert-item,
.ma-v8-video-frame {
    background: #FFFFFF;
}

/* Containers that hold cards become the field */
.ma-subcat-band,
.ma-filter-bar,
.ma-conversion-band,
.ma-svc-section {
    background: var(--ma-field);
}

/* .ma-cinema-page-hero's cream is a fallback UNDER a photograph — it is only
   ever seen if the image fails, so it takes the field, not a panel. */
.ma-cinema-page-hero {
    background-color: var(--ma-field);
}

/* ── 5. Type-scale stragglers — five selectors off the Pass A ladder ──────── */
/* The five headings Pass A missed; ⚠️ font-weight needs !important (a heading rule sets 800 !important) */

/* The dark call strip is the interior twin of .ma-stat-interlude: a call peak,
   so it takes the feature tier rather than sitting between two tiers at 43.2. */
.ma-call-strip--dark h2 {
    font-size: var(--ma-fs-feature) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}
/* /blog/'s cinema hero was 72px — the only thing on the site above the display
   tier, which caps at 68 for the measured reason in the Pass A block. */
.ma-cinema-page-hero h1 {
    font-size: var(--ma-fs-display) !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em;
    line-height: 1.02;
}
/* A section opener sitting BELOW its tier at 32. */
.ma-v6-quotes-heading {
    font-size: var(--ma-fs-section) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
}
/* Card titles 28/700, matching the van card title */
.ma-blog-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 28px !important;
    font-weight: 700 !important;
}

/* ── 6. BUG: the van card price clips at 390px ────────────────────────────── */
/* Van card text price: a clamp sized to its column (only shown on cards without the price in the photo since PASS Y) */
/* Price column minmax(0, 1fr); out-ranks `body.home .ma-featured-vans-grid .ma-van-card__price` (0,3,0) */
@media (max-width: 700px) {
    .ma-van-card__price,
    body.home .ma-featured-vans-grid .ma-van-card__price {
        font-size: clamp(24px, 7.2vw, 34px);
    }
    /* Home: featured vans lose their extra side padding on phones so the card matches the archive; matches the !important shorthand's specificity */
    body.home .entry-content .ma-v7-shop .ma-featured-vans {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* <=360px: the horizontal card's photo gives up width (superseded by PASS Y) */
@media (max-width: 360px) {
    .ma-van-card {
        grid-template-columns: 104px minmax(0, 1fr);
    }
}

/* ── 7. Two regressions this pass caused, both caught by axe ──────────────── */

/* ⚠️ .ma-v7-btn is not a card: whitening it made the red CTAs white-on-white */

/* ══ PASS D: INTERIOR RHYTHM (2026-09-05) — spacing token + numbered chapter rules on content pages; never
   alternating white panels (they hide the white cards inside) ══ */

/* ── 1. The chapter counter is no longer homepage-only ────────────────────── */
/* Counter resets per page */
.entry-content {
    counter-reset: ma-chapter;
}

/* ── 2. Content pages: numbered chapters, same recipe as the homepage ─────── */
/* The rule sits on the element holding the h2 so it starts at the copy's x. ⚠️ Keep both content lines (the `/
   ""` alt text stops "01" being announced) */
.ma-content-section > .wp-block-group__inner-container::before,
.ma-splitband__content::before,
.ma-svc-section__inner::before,
.ma-conversion-band__inner::before,
.ma-v6-quotes-inner::before {
    counter-increment: ma-chapter;
    content: counter(ma-chapter, decimal-leading-zero);
    content: counter(ma-chapter, decimal-leading-zero) / "";
    display: block;
    /* Warm, not --color-border. A cool blue-grey line on a warm cream field
       reads as a mistake — the same correction Pass C made on the homepage. */
    border-top: 1px solid #D9D4C9;
    padding-top: 16px;
    margin-bottom: 26px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: var(--v8-blue);
    text-align: left;
}

/* ── 3. Content pages: the spacing token ──────────────────────────────────── */
/* padding-top only; the next section's top is the gap */
.ma-content-section,
.ma-splitband,
.ma-svc-section,
.ma-conversion-band,
.ma-v6-quotes {
    padding-top: var(--ma-sec-y) !important;
    padding-bottom: 0 !important;
}

/* Not chapters: the page hero, .ma-bigcall, the dark call strip */

/* ── 4. Archives: the rule and the space, but no numbers ──────────────────── */
/* ⚠️ Separate rule: counter-increment fires on every match, so these would steal 01 and 02 */
/* Archives aren't chapters (they cost 84-110px on phones); /blog/ stays unnumbered */
.ma-blog-archive-inner::before {
    content: "";
    display: block;
    border-top: 1px solid #D9D4C9;
    margin-bottom: 26px;
}

/* ── 5. The old cool divider is superseded ────────────────────────────────── */
/* The --alt section's cold borders go, top and bottom */
.ma-content-section--alt {
    border-top: 0;
    border-bottom: 0;
}

/* ── 6. The phone budget ──────────────────────────────────────────────────── */
/* Phones: tighter chapter rules and spacing so the pages don't grow */
@media (max-width: 768px) {
    .ma-content-section > .wp-block-group__inner-container::before,
    .ma-splitband__content::before,
    .ma-svc-section__inner::before,
    .ma-conversion-band__inner::before,
    .ma-v6-quotes-inner::before,
    .ma-blog-archive-inner::before {
        padding-top: 10px;
        margin-bottom: 14px;
    }
    /* The tight step between chapters on a phone: the rule is doing the
       separating there, so the space does not have to carry it alone. */
    .ma-content-section,
    .ma-splitband,
    .ma-conversion-band,
    .ma-v6-quotes {
        padding-top: var(--ma-sec-y-tight) !important;
    }
    /* .ma-svc-section had NO padding here before this pass, so any value is
       growth. Its rule alone separates it. */
    .ma-svc-section {
        padding-top: 0 !important;
    }
}

/* ══ MOBILE PASS 3: FOOTER, COOKIE BAR, CATALOGUE CTA (2026-09-05) ══ */

/* ── 1. Footer columns: a disclosure on phones, unchanged on desktop ──────── */
/* The footer <details> ships open; js/animations.js closes it at <=767px */

/* Desktop: no marker, no pointer, nothing to suggest a control. */
.ma-sf-disc-summary {
    list-style: none;
    cursor: default;
}
.ma-sf-disc-summary::-webkit-details-marker,
.ma-sf-disc-summary::marker {
    display: none;
    content: "";
}
/* ⚠️ Don't zero the heading margin here: it is the desktop column-head gap */

@media (max-width: 767px) {
    /* A real control: >=44px of target, a visible +/- affordance, and the
       whole row tappable rather than just the words. */
    .ma-sf-disc-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        padding: 4px 0;
        cursor: pointer;
    }
    .ma-sf-disc-summary > .ma-sf-col-head {
        margin: 0;
    }
    .ma-sf-disc-summary::after {
        content: "+";
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        color: var(--v8-blue);
        /* Optical: a "+" sits high in its box next to caps. */
        transform: translateY(-1px);
    }
    .ma-sf-disc[open] > .ma-sf-disc-summary::after {
        content: "\2212"; /* MINUS SIGN — not a hyphen, which reads as a dash */
    }
    .ma-sf-disc-summary:focus-visible {
        outline: 2px solid var(--v8-blue);
        outline-offset: 3px;
    }

    /* Phones: one footer column with links back at 20px (the <details> removes the length pressure) */
    .site-info .ma-sf-cols {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .site-info .ma-sf-list a {
        font-size: 20px;
        padding: 10px 4px 10px 0;
    }
}

/* ── 2. The cookie bar ────────────────────────────────────────────────────── */
/* Phones: shorter cookie notice. ⚠️ Hiding .ma-cookie-more is a client decision (see functions.php); the Privacy link stays */
@media (max-width: 767px) {
    .ma-cookie-more {
        display: none;
    }
}

/* ── 3. The catalogue's per-card "Call to Order", on phones ───────────────── */
/* Phones: no Call to Order button on catalogue cards (Jeff's call; the call bar and product page carry the
   phone). ⚠️ a.ma-catalog-call only: the sold <span> must stay */
@media (max-width: 767px) {
    /* ⚠️ !important needed: `.woocommerce ul.products li.product .button` sets display:flex !important */
    .woocommerce ul.products li.product a.ma-catalog-call {
        display: none !important;
    }
}

/* ══ MOBILE PASS 4: HOMEPAGE REVIEWS BEHIND A DISCLOSURE (2026-09-05) — ships open, JS closes at <=767px; the why-us split was reverted ══ */

/* ── 1. The two new disclosures ───────────────────────────────────────────── */
/* Desktop: invisible. No marker, no pointer — nothing that suggests a control,
   because at >=768px there is not one. */
.ma-hr-more-quotes-summary {
    list-style: none;
    cursor: default;
    /* ⚠️ Zero height, not display:none: the summary is the <details>' accessible name */
    height: 0;
    overflow: hidden;
    opacity: 0;
}
.ma-hr-more-quotes-summary::-webkit-details-marker,
.ma-hr-more-quotes-summary::marker {
    display: none;
    content: "";
}

@media (max-width: 767px) {
    .ma-hr-more-quotes-summary {
        height: auto;
        overflow: visible;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        margin-top: 8px;
        cursor: pointer;
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 700;
        color: var(--v8-blue);
        border-top: 1px solid #D9D4C9;
        padding-top: 14px;
    }
    .ma-hr-more-quotes-summary::after {
        content: "+";
        font-size: 24px;
        line-height: 1;
        transform: translateY(-1px);
    }
    .ma-hr-more-quotes[open] > .ma-hr-more-quotes-summary::after {
        content: "\2212"; /* MINUS SIGN, not a hyphen */
    }
    .ma-hr-more-quotes-summary:focus-visible {
        outline: 2px solid var(--v8-blue);
        outline-offset: 3px;
    }
}

/* ── 2. The page-hero call CTA was under the 20px floor ───────────────────── */
/* Phones: hero call buttons at 20px, padding trimmed to fit */
@media (max-width: 767px) {
    .ma-page-hero__actions a {
        font-size: 20px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ── 3. Blog card CTA tap target ──────────────────────────────────────────── */
/* Blog card CTA reaches the 44px target */
.ma-blog-card__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ══ VAN GALLERY LEAD: CONTAIN, NOT COVER (2026-09-05) — galleries mix 4:3 and 3:4 photos and the price is
   burned into the corner; thumbnails keep cover ══ */
.ma-van-gallery__leadwrap .ma-van-gallery__item {
    aspect-ratio: 4 / 3;
    background: var(--ma-field);
}
.ma-van-gallery__leadwrap .ma-van-gallery__item img {
    object-fit: contain;
}

/* ══ PASS E: LIVEN UP THE HOMEPAGE (2026-09-06) — hero moment, scroll choreography, citrus reviews band; base
   rule is always the finished state, motion only under no-preference ══ */

/* ── 1. Hero: the headline rises line by line ─────────────────────────────── */
/* Each hero line is its own clip; .08em bottom padding saves descenders, a matching negative margin keeps the height */
.ma-hero-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
/* display:block: inline-block added 5px per line */
.ma-hero-line__in {
    display: block;
    will-change: transform;
}
.ma-hero-dot {
    color: var(--v8-red);
}
/* The red rule sits inside the h1's existing 22px margin */
body.home .ma-v7-hero--photo .ma-v7-hero-title.ma-hero-title--lines {
    margin-bottom: 10px;
}
.ma-hero-rule {
    width: 96px;
    height: 3px;
    background: var(--v8-red);
    margin: 0 0 9px;
    transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
    .ma-hero-line__in {
        transform: translateY(110%);
        animation: maHeroLine 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }
    .ma-hero-line:nth-child(1) .ma-hero-line__in { animation-delay: 0.15s; }
    .ma-hero-line:nth-child(2) .ma-hero-line__in { animation-delay: 0.28s; }
    .ma-hero-rule {
        animation: maCinemaRule 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.55s both;
    }
    /* Inventory card settles (on .ma-hero-slides, since the card already has an animation); desktop only */
    @media (min-width: 768px) {
        body.home .ma-v7-hero-card .ma-hero-slides {
            animation: maHeroSettle 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.45s both;
        }
    }
}
@keyframes maHeroLine {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
}
@keyframes maHeroSettle {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

/* ── 2. Scroll choreography ───────────────────────────────────────────────── */
/* Homepage reveals on the house curve; delays come from js/animations.js */
@media (prefers-reduced-motion: no-preference) {
    body.home .ma-animate,
    body.tax-product_cat .ma-animate {
        transform: translateY(28px);
        transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
                    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    }
    body.home .ma-animate.in-view,
    body.tax-product_cat .ma-animate.in-view {
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.home.ma-chapters-js .ma-v7-shop-head::before,
    body.home.ma-chapters-js .ma-featured-vans-inner::before,
    body.home.ma-chapters-js .ma-hr-inner::before,
    body.home.ma-chapters-js .ma-v9-used-inner::before,
    body.home.ma-chapters-js .ma-quiz-inner::before,
    body.home.ma-chapters-js .ma-v6-why-content::before,
    body.home.ma-chapters-js .ma-v8-video-inner::before,
    body.home.ma-chapters-js .ma-v9-calc-inner::before {
        background-size: 0% 1px;
        color: transparent;
        transition: background-size 0.8s cubic-bezier(0.2, 0.7, 0.3, 1),
                    color 0.4s ease 0.45s;
    }
    body.home.ma-chapters-js .ma-chapter-in::before {
        background-size: 100% 1px;
    }
    body.home.ma-chapters-js .ma-v7-shop-head.ma-chapter-in::before,
    body.home.ma-chapters-js .ma-featured-vans-inner.ma-chapter-in::before,
    body.home.ma-chapters-js .ma-hr-inner.ma-chapter-in::before,
    body.home.ma-chapters-js .ma-v9-used-inner.ma-chapter-in::before,
    body.home.ma-chapters-js .ma-quiz-inner.ma-chapter-in::before,
    body.home.ma-chapters-js .ma-v6-why-content.ma-chapter-in::before,
    body.home.ma-chapters-js .ma-v8-video-inner.ma-chapter-in::before,
    body.home.ma-chapters-js .ma-v9-calc-inner.ma-chapter-in::before {
        color: var(--v8-blue);
    }
}

/* Brand strip marquee: JS moves the logos into .ma-marquee-track plus an aria-hidden clone; without JS it's the static row */
.ma-brand-strip-inner--marquee {
    display: block;
    max-width: none;
}
.ma-brand-strip-inner--marquee .ma-brand-strip-label {
    display: block;
    text-align: center;
    margin-bottom: 28px;
}
.ma-marquee {
    display: flex;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ma-marquee-track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 64px;
    padding-right: 64px;
    animation: ma-filmstrip-scroll 42s linear infinite;
}
.ma-marquee:hover .ma-marquee-track,
.ma-marquee:focus-within .ma-marquee-track {
    animation-play-state: paused;
}
.ma-marquee-track .ma-brand-logo {
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .ma-marquee-track {
        gap: 40px;
        padding-right: 40px;
        animation-duration: 30s;
    }
}

/* ── 3. Colour moments ────────────────────────────────────────────────────── */
/* Reviews band full-bleed citrus; the charcoal band below drops its top margin so they meet cleanly */
body.home .ma-hr {
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: var(--ma-sec-y) !important;
    background: #FBEDE6 !important;
}
body.home .ma-v9-used {
    margin-top: 0;
}
/* The quiz stays on cream (Jeff rejected the blue band) */

/* ══ PASS E ROLLOUT: PRODUCT-CATEGORY PAGES (2026-09-06) — hero moment, reveals, marquee; no chapter rules, no
   citrus; markup only under is_product_category() ══ */

/* The rule fits inside the h1's existing 26px bottom margin: 10 + 3 + 13. */
.ma-store-header--hero h1.ma-hero-title--lines {
    margin-bottom: 10px;
}
.ma-store-header--hero .ma-hero-rule {
    margin: 0 0 13px;
}
/* Breadcrumb and subtitle use the homepage hero's keyframe and delays */
@media (prefers-reduced-motion: no-preference) {
    .ma-store-header--hero .ma-reveal {
        animation: maCinemaRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .ma-store-header--hero .ma-reveal-1 { animation-delay: 0.05s; }
    .ma-store-header--hero .ma-reveal-3 { animation-delay: 0.45s; }
}
/* The category strip has no label inside the row, so the marquee wrapper is
   the row itself; the row's own flex/gap rules must not fight the track. */
.ma-cat-brand-strip__row.ma-brand-strip-inner--marquee {
    display: block;
    max-width: none;
}

/* ══ PASS F: THE SEAMS (2026-09-06) — vertical padding of containers inside token'd sections goes to 0; side
   padding stays (it's the gutter); painted bands keep theirs ══ */

/* GP's rule is (0,2,0); these are (0,3,0) and later. */
.site-main .ma-content-section > .wp-block-group__inner-container,
body.home .site-main .ma-v7-shop > .wp-block-group__inner-container {
    padding-top: 0;
    padding-bottom: 0;
}
/* Same specificity as the base rules; last in source wins */
.ma-svc-section__inner {
    padding-top: 0;
    padding-bottom: 0;
}
/* The big phone follows the hero; its top 56 is the distance from the hero
   and stays. Its bottom is now the next chapter's token. */
.ma-bigcall {
    padding-bottom: 0;
    /* Its 1px bottom border used to sit 56px under the text; at 0 padding it
       touched the sub-line. The chapter hairline 94px below is the divider. */
    border-bottom: 0;
}
.ma-conversion-band {
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}
/* .ma-plainband isn't on the token: drop its bottom padding */
.ma-plainband__inner {
    padding-bottom: 0;
}
/* A painted band after the last chapter carries the token as margin-top */
.ma-content-section + .ma-call-strip--dark,
.ma-svc-section + .ma-call-strip--dark,
.ma-splitband + .ma-call-strip--dark,
.ma-conversion-band + .ma-call-strip--dark,
.ma-v6-quotes + .ma-call-strip--dark,
.ma-plainband + .ma-call-strip--dark {
    margin-top: var(--ma-sec-y) !important;
}

/* ══ PASS G: HEADER (2026-09-07) — ink utility bar with the phone on a white plate (15:1) ══ ⚠️ Source order is
   the mechanism: .ma-utility-bar is styled in ten older places with !important; keep this block after them */

/* ── G1. The bar becomes ink ─────────────────────────────────────────────── */
.ma-utility-bar {
    background: var(--v5-ink, #23272E) !important;
    border-bottom: 0 !important;
}

/* Credentials left, reach-us cluster right (margin-left:auto on the rating) */
.ma-utility-bar .ma-utility-bar-inner {
    justify-content: flex-start;
    gap: 26px;
    /* The bar shares the header row's gutter */
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}
.ma-utility-bar .ma-utility-bar-inner > .ma-utility-rating {
    margin-left: auto !important;
}

/* The pipes go. Five peers separated by five identical rules is what made this
   read as a run-on sentence; grouping and gap do the dividing now. */
.ma-utility-bar .ma-utility-sep { display: none !important; }

/* Solid tones on ink, not alpha, so contrast can be checked */
.ma-utility-bar .ma-utility-trust-item,
.ma-utility-bar .ma-utility-hours {
    color: #C9C5BC !important;
}
.ma-utility-bar .ma-utility-trust-item strong {
    color: #FFE08A !important;
}

/* Underlines off. On a link that already carries an icon, a permanent underline
   reads as emphasis rather than affordance — hover restores it. */
.ma-utility-bar a.ma-utility-rating,
.ma-utility-bar .ma-utility-location {
    color: #C9C5BC !important;
    text-decoration: none !important;
}
.ma-utility-bar a.ma-utility-rating strong { color: #FFE08A !important; }
.ma-utility-bar a.ma-utility-rating:hover,
.ma-utility-bar .ma-utility-location:hover {
    color: #F3F0E9 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* ── G2. The phone: a white plate, the number in red ─────────────────────── */
/* Phone plate replaces the red pill */
.ma-utility-bar .ma-utility-phone,
.ma-utility-bar a[href^="tel"].ma-utility-phone {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 7px 20px !important;
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--v8-red-deep, #A31B24) !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: transform .18s cubic-bezier(.2, .7, .3, 1),
                box-shadow .18s cubic-bezier(.2, .7, .3, 1);
}

/* The label is what turns a phone number into an invitation. It is small and
   charcoal so it frames the number instead of competing with it. */
.ma-utility-bar .ma-utility-phone__label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v5-ink, #23272E);
}
.ma-utility-bar .ma-utility-phone__num {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--v8-red-deep, #A31B24);
}
/* The icon is stroke="currentColor", so it inherits the red without a rule. */
.ma-utility-bar .ma-utility-phone svg,
.ma-utility-bar a[href^="tel"].ma-utility-phone svg {
    width: 18px;
    height: 18px;
}

/* Hover moves the type only (no blue flip) */
.ma-utility-bar .ma-utility-phone:hover,
.ma-utility-bar a[href^="tel"].ma-utility-phone:hover {
    background: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .55);
}
.ma-utility-bar .ma-utility-phone:hover .ma-utility-phone__num {
    color: var(--v8-red, #C4222B);
}
@media (prefers-reduced-motion: reduce) {
    .ma-utility-bar .ma-utility-phone,
    .ma-utility-bar a[href^="tel"].ma-utility-phone {
        transition: none !important;
    }
    .ma-utility-bar .ma-utility-phone:hover,
    .ma-utility-bar a[href^="tel"].ma-utility-phone:hover {
        transform: none;
    }
}

/* ── G3. Focus rings on ink ──────────────────────────────────────────────── */
/* Focus rings visible on the dark bar */
.ma-utility-bar a:focus-visible {
    outline: 3px solid #F3F0E9 !important;
    outline-offset: 3px;
}
/* On the white plate a cream ring would vanish — the red one reads. */
.ma-utility-bar .ma-utility-phone:focus-visible {
    outline: 3px solid var(--v8-red, #C4222B) !important;
    outline-offset: 3px;
}

/* ── G4. Red has to RANK, not just repeat ───────────────────────────────── */
/* Search button becomes a red outline so it doesn't compete with the phone */
.ma-nav-search-wrap .ma-nav-search__btn {
    background: #FFFFFF !important;
    color: var(--v8-red, #C4222B) !important;
    border: 2px solid var(--v8-red, #C4222B) !important;
}
.ma-nav-search-wrap .ma-nav-search__btn:hover,
.ma-nav-search-wrap .ma-nav-search__btn:focus-visible {
    background: var(--v8-red, #C4222B) !important;
    color: #FFFFFF !important;
}
/* >=1320: a divider instead of an outline where the button joins the field */

/* ── G5. The active nav item owns the frame ─────────────────────────────── */
/* Current nav item: charcoal label with a 3px red rule (::after; ::before is the hover fill) */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current-menu-parent > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.current_page_parent > a,
.main-navigation .main-nav ul li.current_page_ancestor > a {
    color: var(--v5-ink, #23272E) !important;
    font-weight: 700;
    position: relative;
}
.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li.current-menu-ancestor > a::after,
.main-navigation .main-nav ul li.current-menu-parent > a::after,
.main-navigation .main-nav ul li.current_page_item > a::after,
.main-navigation .main-nav ul li.current_page_parent > a::after,
.main-navigation .main-nav ul li.current_page_ancestor > a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    height: 3px;
    background: var(--v8-red, #C4222B);
    border-radius: 2px;
}
/* No current-item rule inside dropdowns */
.main-navigation .main-nav ul .sub-menu li.current-menu-item > a::after {
    content: none;
}
/* Hover keeps the red label so hover and current differ */

/* ── G6. Collapsed strip: shape language matches, fill does not ─────────── */
/* Collapsed strip on cream: the phone stays solid red, with the plate's 12px radius */
@media (min-width: 769px) {
    .ma-nav-collapsed .ma-header-call {
        border-radius: 12px !important;
        font-size: 21px !important;
        font-weight: 800 !important;
    }
}

/* ── G7. Mobile ─────────────────────────────────────────────────────────── */
/* <=768px: the plate is alone in the bar, wider and calmer */
@media (max-width: 768px) {
    .ma-utility-bar .ma-utility-bar-inner {
        justify-content: center;
        gap: 14px;
    }
    .ma-utility-bar .ma-utility-phone,
    .ma-utility-bar a[href^="tel"].ma-utility-phone {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 18px !important;
    }
    .ma-utility-bar .ma-utility-phone__label { display: none; }
    .ma-utility-bar .ma-utility-phone__num { font-size: 22px; }
}

/* ── G8. Fixes from the first rendered pass (measured, not reasoned) ─────── */

/* Space the trust items now that the pipe is hidden */
.ma-utility-bar .ma-utility-trust { gap: 22px; }

/* The current item rests un-rolled in ink */
.main-navigation .main-nav ul li.current-menu-item > a .ma-roll__a { transform: none; }
.main-navigation .main-nav ul li.current-menu-item > a .ma-roll__b { transform: translateY(102%); }

/* …but still rolls on hover/focus (one class heavier than the reset) */
.main-navigation .main-nav ul li.current-menu-item > a:focus-visible .ma-roll__a { transform: translateY(-102%); }
.main-navigation .main-nav ul li.current-menu-item > a:focus-visible .ma-roll__b { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
    .main-navigation .main-nav ul li.current-menu-item > a:hover .ma-roll__a { transform: translateY(-102%); }
    .main-navigation .main-nav ul li.current-menu-item > a:hover .ma-roll__b { transform: translateY(0); }
}

/* G9: even spacing in the bar and nav */

/* >=769px: display:contents on .ma-utility-trust so all items spread evenly (the div has no role, nothing lost).
   ⚠️ Not below 769px, where the wrapper is hidden */
@media (min-width: 769px) {
    .ma-utility-bar .ma-utility-trust { display: contents; }
    .ma-utility-bar .ma-utility-bar-inner { justify-content: space-between; }
    .ma-utility-bar .ma-utility-bar-inner > .ma-utility-rating { margin-left: 0 !important; }
}

/* >=1250px: an 18px gap between nav items (gap on the ul, not padding); nav stays 19px, the search field absorbs the width */
@media (min-width: 1250px) {
    .main-navigation .main-nav > ul { gap: 18px; }
}
@media (min-width: 1320px) {
    html:not(.ma-nav-collapsed) .inside-header .ma-nav-search-wrap { margin: 0 20px; }
}

/* <1250px: the bar follows the header gutter down */
@media (max-width: 1249px) {
    .ma-utility-bar .ma-utility-bar-inner {
        max-width: 1200px;
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media (max-width: 768px) {
    .ma-utility-bar .ma-utility-bar-inner {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* >=769px: dissolve .ma-utility-contact too so all five items distribute */
@media (min-width: 769px) {
    .ma-utility-bar .ma-utility-contact { display: contents; }
}

/* <=1100px: hide the credentials so the phone plate never wraps to a second row */
@media (max-width: 1100px) {
    .ma-utility-bar .ma-utility-trust,
    .ma-utility-bar .ma-utility-trust-item:not(.ma-utility-rating) {
        display: none;
    }
}

/* Home hero flush under the masthead: zero GP's inner-container padding-top. ⚠️ Padding only, never margin/width on an alignfull block */
body.home .ma-v7-hero > .wp-block-group__inner-container {
    padding-top: 0;
}

/* ══ HOMEPAGE PASS H: REVIEWS BAND + CATEGORY CHIPS (2026-09-07) ══ */

/* Reviews: the lead quote shares a row with a rating card */
.ma-hr-top {
    display: grid;
    /* 1.35fr : 1fr ≈ 58/42. `minmax(0, …)` on both tracks — a bare `1fr` floors
       at min-content, and the lead quote's longest word would push the split. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin: 0 0 40px;
}
/* Drop the inert 900px cap; the bottom margin moves to the row */
.ma-hr-top .ma-hr-lead {
    max-width: none;
    margin: 0;
}

/* ── The rating card ──────────────────────────────────────────────────────── */
/* White rating card on the citrus band */
.ma-hr-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: var(--v7-radius, 10px);
    padding: 28px 30px 30px;
}
.ma-hr-rating__num {
    font-family: var(--font-display);
    font-size: clamp(56px, 6vw, 76px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--v5-ink);          /* 15:1 on white */
}
/* Stars match the lead quote's red */
.ma-hr-rating__stars {
    display: flex;
    gap: 2px;
    color: var(--v8-red);
    margin: 10px 0 6px;
}
.ma-hr-rating__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v5-slate);
    text-decoration: none;
}
.ma-hr-rating__label:hover {
    color: var(--v8-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-hr-rating__more { margin-top: 20px; }

/* <=900px: one column; the <=767px disclosure is untouched */
@media (max-width: 900px) {
    .ma-hr-top {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 28px;
    }
    .ma-hr-rating { align-items: flex-start; }
}

.ma-v7-quicklinks a {
    background: #FFFFFF;
    border-color: var(--line, #E4E1DA);
}

/* H3: phone height clawed back */

/* No row equalising on a one-column grid (it added 248px) */
.ma-v7-quicklinks { grid-auto-rows: auto; }
@media (min-width: 600px) {
    .ma-v7-quicklinks { grid-auto-rows: 1fr; }
}

/* <=600px: the rating number sits beside its label */
@media (max-width: 600px) {
    .ma-hr-rating {
        display: grid;
        grid-template-columns: auto 1fr;
        /* Named areas so the numeral, stars and label can't overlap */
        grid-template-areas:
            "num stars"
            "num label"
            "more more";
        column-gap: 18px;
        align-items: center;
        padding: 20px 22px 22px;
    }
    .ma-hr-rating__num   { grid-area: num;   font-size: 52px; }
    .ma-hr-rating__stars { grid-area: stars; margin: 0 0 2px; align-self: end; }
    .ma-hr-rating__label { grid-area: label; align-self: start; }
    .ma-hr-rating__more  { grid-area: more;  margin-top: 16px; }
}

/* Lead quote sized for its column; the 24px floor is unchanged */
.ma-hr-top .ma-hr-lead-text {
    font-size: clamp(24px, 2.1vw, 32px);
}

/* ══ PASS I: VAN ARCHIVE FILTERS (2026-09-07) — a real grid, one label treatment, one control recipe, white inputs ══ */

/* ── I1. One grid, equal columns ────────────────────────────────────────── */
.ma-filter-bar .ma-filter-row {
    display: grid;
    /* min(210px, 100%): a bare floor overflows narrow containers */
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    align-items: start;          /* was flex-end — (b) above */
    gap: 22px 18px;
}
/* Every control is one full-width cell, so the columns — not the option text —
   decide the widths. */
.ma-filter-bar .ma-filter-field,
.ma-filter-bar .ma-filter-range {
    min-width: 0;                /* a grid item's min-content floor would
                                    otherwise let a long <option> widen a track */
}
.ma-filter-bar .ma-filter-form select,
.ma-filter-bar .ma-filter-range input[type="number"] {
    width: 100%;
}

/* ── I2. The fieldset stops being a flex container ──────────────────────── */
/* Fieldset back to block so legends and labels share one baseline */
.ma-filter-bar .ma-filter-range {
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}
.ma-filter-bar .ma-filter-range legend,
.ma-filter-bar .ma-filter-label {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 5px;             /* the 5px that .ma-filter-field used as `gap` */
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v5-slate);
}
.ma-filter-bar .ma-filter-field {
    display: block;              /* was flex+gap; the label margin now does it */
}

/* The min–max pair fills its cell instead of being two frozen 110px boxes. */
.ma-filter-bar .ma-filter-range__inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.ma-filter-bar .ma-filter-range input[type="number"] { width: 100%; }

/* ── I3. ONE control recipe ─────────────────────────────────────────────── */
/* White controls, one border and radius; 56px/20px floors kept */
.ma-filter-bar .ma-filter-form select,
.ma-filter-bar .ma-filter-form input[type="number"] {
    background: #FFFFFF;
    border: 1.5px solid var(--line, #E4E1DA);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--v5-ink);
    font-family: var(--font-body);
}
.ma-filter-bar .ma-filter-form select:focus-visible,
.ma-filter-bar .ma-filter-form input[type="number"]:focus-visible {
    outline: 3px solid var(--v8-red, #C4222B);
    outline-offset: 2px;
    border-color: var(--v5-ink);
}
.ma-filter-bar .ma-filter-range__dash {
    color: var(--v5-slate);
    font-weight: 700;
    text-align: center;
}

/* ── I4. Actions get their own row, on the grid ─────────────────────────── */
/* The button was the tail of a wrapped flex line, so it sat wherever the last
   field left it. Its own full-width row is what stops it looking detached. */
.ma-filter-bar .ma-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 4px;
}

/* ── I7. Number inputs: no spinners ─────────────────────────────────────── */
/* Hide number spinners (WebKit pseudo-element and appearance, both needed) */
.ma-filter-bar .ma-filter-form input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
.ma-filter-bar .ma-filter-form input[type="number"]::-webkit-outer-spin-button,
.ma-filter-bar .ma-filter-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ma-van-result-count {
    margin-bottom: 22px;
}

/* ══ PASS J: DOUBLE-PAID SEAMS + "SHOP BY WHAT YOU NEED" (2026-09-07) — the three PHP-template inner wrappers
   lose their vertical padding (Pass F's rule) ══ */

/* ── J1. Pass F, extended to the three template wrappers ────────────────── */
/* Child combinator: the single-van .ma-van-strip-inner is a band and keeps its spacing */
.ma-content-section > .ma-van-archive-inner,
.ma-content-section > .ma-blog-archive-inner,
.ma-content-section > .ma-van-single-inner {
    padding-top: 0;
    padding-bottom: 0;
}

/* ── J2. The archive seam — a filter bar is not a chapter ───────────────── */
/* ⚠️ !important: supersedes Pass D's token and Pass I's half-token on the van archive (the filter panel's margin is the seam) */
.post-type-archive-van_listing .ma-content-section {
    padding-top: 0 !important;
}
/* ⚠️ The count's margin collapses into the filter bar's, so the filter bar's margin-bottom owns the seam (44 above, 22 below); van archive only */
.post-type-archive-van_listing .ma-filter-bar {
    margin-bottom: 44px;
}
.post-type-archive-van_listing .ma-van-result-count {
    margin-top: 0;
}

/* ── J3. Homepage: the estimator paid for a seam the brand strip owns ───── */
/* The following section owns the gap: drop the estimator's margin-bottom */
.ma-estimator--home {
    margin-bottom: 0;
}

/* "Shop by what you need" slides: reuse the hero carousel classes so initSlideshow drives them with no JS changes (don't rename them) */

.ma-shopby {
    margin: 0;
}
/* Same 1180px column as the filter bar below */
.ma-shopby__inner {
    background: var(--v5-ink, #23272E);
    border-radius: 16px;
    padding: 34px 28px;
}
.ma-shopby__kicker {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C9CDD4;            /* 8.4:1 on --v5-ink */
}

/* The arrows come out of the hero's absolute positioning and become real grid
   items, so nothing can ever sit on top of the copy. */
.ma-shopby__slides {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
}
.ma-shopby__viewport {
    grid-area: view;
    /* Slides stack in one grid cell: the viewport is as tall as the tallest slide */
    display: grid;
}
.ma-shopby .ma-hero-slides__arrow--prev { grid-area: prev; }
.ma-shopby .ma-hero-slides__arrow--next { grid-area: next; }
.ma-shopby .ma-hero-slides__arrow {
    position: static;
    transform: none;
    left: auto;
    right: auto;
}

.ma-shopby .ma-hero-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
}

.ma-shopby__head {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 36px;
    line-height: 1.15;
    color: #FFFFFF;
}
.ma-shopby__body {
    margin: 0 0 22px;
    max-width: 62ch;
    font-size: 20px;
    line-height: 1.5;
    color: #DDE0E5;            /* 11.2:1 on --v5-ink */
}
/* White plate with ink type on charcoal; (0,2,0) undoes the hero link's block sizing */
.ma-shopby .ma-shopby__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    min-height: 56px;
    padding: 0 26px;
    background: #FFFFFF;
    border-radius: 12px;
    color: var(--v5-ink, #23272E);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    text-decoration: none;
}
.ma-shopby .ma-shopby__cta:hover,
.ma-shopby .ma-shopby__cta:focus-visible {
    background: var(--color-bg-warm, #F3F0E9);
    color: var(--v8-red-deep, #A31B24);
}
.ma-shopby .ma-shopby__cta:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}
.ma-shopby__cta svg {
    flex: 0 0 auto;
}

@media (max-width: 700px) {
    .ma-shopby__inner { padding: 28px 22px; }
    .ma-shopby__head  { font-size: 28px; }
    .ma-shopby .ma-shopby__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    /* Reduced motion: no crossfade on arrow clicks */
    .ma-shopby .ma-hero-slide { transition: none; }
}

/* ══ PASS K: THE PHONE OVERHAUL (2026-09-07) — logo · phone pill · ☰ header; the menu becomes a drawer built on
   GP's own .toggled / mobile-menu-open state (no menu.js replaced) ══ */

/* ── K1. One phone header, the same in both scroll states ────────────────── */
/* ⚠️ Every selector is doubled with a .ma-nav-collapsed twin so the header is identical scrolled or not; don't simplify the pairs away */
@media (max-width: 768px) {
    /* ⚠️ The row budget is exact: re-measure at 360/375/390 after any header change */
    .inside-header,
    .ma-nav-collapsed .inside-header {
        padding: 8px 12px;
        row-gap: 0;
        align-items: center;
    }
    .inside-header .site-branding { order: 1; flex: 0 0 auto; }
    .inside-header .site-branding .main-title a { padding: 5px 7px; }
    .inside-header .site-branding .main-title a::before,
    .ma-nav-collapsed .main-title a::before {
        width: 112px;
        min-width: 112px;
        height: 16px;
    }

    /* The header phone pill fits on phones at 16px */
    .inside-header .ma-header-call,
    .ma-nav-collapsed .inside-header .ma-header-call {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        order: 2;
        flex: 0 0 auto;
        margin: 0 0 0 auto;
        min-height: 46px;
        padding: 0 12px;
        border-radius: 999px;
        background: var(--v8-red, #C4222B);
        color: #FFFFFF;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 15px;
        line-height: 1.1;
        letter-spacing: 0.01em;
        white-space: nowrap;
        text-decoration: none;
    }
    /* The icon is the 30px the row could not spare; the red plate and the
       number are the affordance. */
    .inside-header .ma-header-call svg { display: none; }

    #mobile-menu-control-wrapper,
    .ma-nav-collapsed #mobile-menu-control-wrapper {
        display: flex;
        order: 3;
        flex: 0 0 auto;
        margin-left: 8px;
        background: none !important;
    }
    #mobile-menu-control-wrapper .menu-toggle,
    .ma-nav-collapsed #mobile-menu-control-wrapper .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        min-width: 54px;
        height: 54px;
        min-height: 54px;
        padding: 0;
        line-height: 1;
        border: 1.5px solid var(--line, #E4E1DA);
        border-radius: 12px;
        background: #FFFFFF !important;
        color: var(--v5-ink, #23272E);
    }
    #mobile-menu-control-wrapper .menu-toggle .gp-icon svg { width: 24px; height: 24px; top: 0; }
    /* GP's "Menu" word: the 56px square is the affordance, the label would
       wrap it to two lines. */
    #mobile-menu-control-wrapper .menu-toggle .mobile-menu { display: none; }

    .inside-header .ma-nav-search-wrap,
    .ma-nav-collapsed .inside-header .ma-nav-search-wrap { display: none; }

    .inside-header #site-navigation { order: 4; }
}
/* Below 360 the number cannot share the row with the chip; the icon alone is
   still the same tel: link and the drawer's Call button spells it out. */
@media (max-width: 369px) {
    .inside-header .ma-header-call .ma-header-call__num { display: none; }
    .inside-header .ma-header-call svg { display: block; width: 18px; height: 18px; }
    .inside-header .ma-header-call { padding: 0 14px; }
}

/* ── K2. The menu is a drawer, not a push-down ────────────────────────────── */
@media (max-width: 768px) {
    /* Drawer fixed under the header, over the call bar; the collapsed twin beats the collapsed nav's absolute positioning */
    .inside-header #site-navigation.toggled,
    .ma-nav-collapsed .inside-header #site-navigation.toggled {
        display: block;
        position: fixed;
        top: var(--ma-header-h, 72px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9995;
        margin: 0;
        height: auto;
        max-height: calc(100vh - var(--ma-header-h, 72px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--ma-field, #F3F0E9);
        border-top: 1px solid var(--line, #E4E1DA);
        box-shadow: none;
        padding: 0 0 env(safe-area-inset-bottom, 0px);
    }
    /* No page scroll behind the open drawer */
    html.mobile-menu-open { overflow: hidden; }
    html.mobile-menu-open .ma-callbar { display: none; }

    /* Row selectors carry the collapsed twin (the collapsed row padding is (1,4,2)) */
    #site-navigation.toggled .main-nav > ul,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav > ul {
        display: block;
        margin: 0;
        padding: 0;
    }
    #site-navigation.toggled .main-nav > ul > li,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav > ul > li {
        display: block;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid var(--line, #E4E1DA);
        background: #FFFFFF;
    }
    #site-navigation.toggled .main-nav > ul > li > a,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav > ul > li > a {
        display: flex;
        align-items: center;
        min-height: 64px;
        padding: 8px 20px;
        line-height: 1.3;
        font-size: 22px;
        font-weight: 700;
        color: var(--v5-ink, #23272E);
    }
    #site-navigation.toggled .main-nav > ul > li.menu-item-has-children > a,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav > ul > li.menu-item-has-children > a {
        padding-right: 80px;   /* room for the chevron circle */
    }

    /* The whole parent row expands: GP's toggle span inside the <a> is stretched over it and stops navigation; the
       landing page is the tagged "All …" item */
    #site-navigation.toggled .main-nav > ul > li.menu-item-has-children > a > .dropdown-menu-toggle,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav > ul > li.menu-item-has-children > a > .dropdown-menu-toggle {
        position: absolute;
        inset: 0;
        float: none;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0 14px 0 0;
    }
    #site-navigation.toggled .dropdown-menu-toggle .gp-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1.5px solid var(--line, #E4E1DA);
        border-radius: 50%;
        background: #FFFFFF;
        color: var(--v5-ink, #23272E);
    }
    #site-navigation.toggled .dropdown-menu-toggle .gp-icon svg { width: 18px; height: 18px; top: 0; }
    /* GP already rotates the chevron on .sfHover; the circle inverts so the
       open state reads at a glance. */
    #site-navigation.toggled li.sfHover > a > .dropdown-menu-toggle .gp-icon {
        background: var(--v5-ink, #23272E);
        border-color: var(--v5-ink, #23272E);
        color: #FFFFFF;
    }

    /* Sub-items: 56px (project floor), indented, on the field colour so the
       group reads as one block under its white parent row. */
    #site-navigation.toggled .main-nav ul ul.toggled-on,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav ul ul.toggled-on {
        background: var(--ma-field, #F3F0E9);
        border-top: 1px solid var(--line, #E4E1DA);
        border-bottom: 0;
        padding: 6px 0;
        /* Sub-list as a flex column so the "All …" item moves to the top with order */
        display: flex;
        flex-direction: column;
    }
    #site-navigation.toggled .main-nav ul ul li a,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav ul ul li a {
        display: flex;
        align-items: center;
        min-height: 56px;
        padding: 6px 20px 6px 34px;
        line-height: 1.3;
        font-size: 20px;
        font-weight: 600;
        color: var(--v5-ink, #23272E);
    }
    #site-navigation.toggled .main-nav ul ul li.ma-sub-all { order: -1; }
    #site-navigation.toggled .main-nav ul ul li.ma-sub-all > a,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav ul ul li.ma-sub-all > a {
        font-weight: 800;
        color: var(--v8-red-deep, #A31B24);
    }
    #site-navigation.toggled .main-nav ul ul li.ma-sub-all > a::after {
        content: "\2192";
        margin-left: 8px;
    }

    /* Tools row (Call / Text / search) on charcoal; #site-navigation beats the generic nav anchor rule */
    /* (1,3,2): the white row rule is (1,2,2) */
    #site-navigation.toggled .main-nav > ul > li.ma-drawer-tools,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav > ul > li.ma-drawer-tools {
        display: block;
        padding: 16px 16px 18px;
        background: var(--v5-ink, #23272E);
        border-bottom: 0;
    }
    #site-navigation .ma-drawer-tools__cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }
    #site-navigation .ma-drawer-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 56px;
        padding: 0 10px;
        border-radius: 12px;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 18px;
        line-height: 1.1;
        text-decoration: none;
        white-space: nowrap;
    }
    #site-navigation .ma-drawer-btn--call { background: #FFFFFF; color: var(--v8-red-deep, #A31B24); }
    #site-navigation .ma-drawer-btn--text { background: transparent; color: #FFFFFF; border: 2px solid rgba(255, 255, 255, 0.75); }
    #site-navigation .ma-drawer-btn svg { flex: 0 0 auto; }
    #site-navigation .ma-drawer-search { display: flex; gap: 8px; }
    #site-navigation .ma-drawer-search input[type="search"] {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 52px;
        padding: 0 14px;
        border: 1.5px solid var(--line, #E4E1DA);
        border-radius: 10px;
        background: #FFFFFF;
        color: var(--v5-ink, #23272E);
        font-family: var(--font-body);
        font-size: 18px;
        appearance: none;
    }
    #site-navigation .ma-drawer-search__btn {
        flex: 0 0 52px;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: var(--v8-red, #C4222B);
        color: #FFFFFF;
        cursor: pointer;
    }

    /* Credentials row at the bottom: the utility-bar facts phones never saw. */
    #site-navigation.toggled .main-nav > ul > li.ma-drawer-cred,
    .ma-nav-collapsed .inside-header #site-navigation.toggled .main-nav > ul > li.ma-drawer-cred {
        display: block;
        padding: 18px 20px 30px;
        background: transparent;
        border-bottom: 0;
        font-family: var(--font-body);
        font-size: 17px;
        line-height: 1.5;
        color: var(--v5-slate, #44576B);
    }
    #site-navigation .ma-drawer-cred__line { display: block; margin-bottom: 6px; }
    #site-navigation .ma-drawer-cred__link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        margin-right: 18px;
        padding: 0;
        font-size: 17px;
        font-weight: 600;
        color: var(--v8-blue, #2633C5);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}
/* Outside the drawer these do not exist. Base rules, no media query, so the
   desktop hover menu and the 769–1249 dropdown never render them. */
.ma-drawer-tools,
.ma-drawer-cred { display: none; }

/* ── K3. Homepage scroll diet (≤768) — "images fine on desktop" ──────────── */
@media (max-width: 768px) {
    /* Phones: certification logos in two centred rows, no separator dots */
    .ma-v7-hero-facts.ma-v7-hero-facts--logos {
        gap: 12px 24px;
        padding: 16px 12px 20px;
        margin-top: 22px;
        justify-content: center;
    }
    .ma-v7-hero-facts.ma-v7-hero-facts--logos li + li::before { display: none; }
    .ma-v7-hero-facts--logos img { height: 30px; max-width: 160px; }
    .ma-v7-hero-facts--logos li:last-child img { height: 46px; }

    /* Phones: horizontal category cards, subtitle dropped */
    .ma-v7-cats { gap: 12px; }
    .ma-v7-cats .ma-v7-cat {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: center;
    }
    /* ⚠️ Not aspect-ratio 1/1 with height 100%: the photo spilled over the words */
    .ma-v7-cat .ma-v7-cat-media {
        aspect-ratio: auto;
        align-self: stretch;
        width: 112px;
        height: 100%;
        min-height: 112px;
        overflow: hidden;
        border-bottom: 0;
        border-right: 1px solid var(--color-border);
    }
    .ma-v7-cat .ma-v7-cat-media img { width: 100%; height: 100%; object-fit: cover; }
    .ma-v7-cat .ma-v7-cat-body { padding: 14px 16px; gap: 3px; }
    .ma-v7-cat .ma-v7-cat-title { font-size: 22px; }
    .ma-v7-cat .ma-v7-cat-desc { display: none; }
    .ma-v7-cat .ma-v7-cat-cta { margin-top: 2px; font-size: 18px; }

    /* Phones: quick links in two columns with equal rows */
    .ma-v7-quicklinks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 10px;
        margin-top: 16px;
    }
    .ma-v7-quicklinks a {
        min-height: 56px;
        padding: 10px 12px;
        gap: 8px;
        font-size: 18px;
        line-height: 1.2;
    }

    /* Phones: seal width pinned at (0,2,0) with width, max-width and flex-basis */
    /* The seal sits above the words so the text gets the whole card */
    .ma-v6-why-list .ma-v6-why-item.ma-v6-why-item--seal { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ma-v6-why-item--seal .ma-v6-why-seal {
        width: 64px;
        max-width: 64px;
        min-width: 64px;
        height: auto;
        flex: 0 0 64px;
    }
    .ma-v6-why-item--seal .ma-v6-why-item-sealtext { flex: 1 1 auto; min-width: 0; }

    /* Why-us fold — the <details> js/animations.js builds around items 4–5
       on phones (same pattern as the reviews' .ma-hr-more-quotes). */
    .ma-v6-why-more { padding: 0; }
    .ma-v6-why-more__summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        padding: 12px 0;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 19px;
        color: var(--v8-red-deep, #A31B24);
    }
    .ma-v6-why-more__summary::-webkit-details-marker { display: none; }
    .ma-v6-why-more__summary::after { content: "+"; font-size: 28px; line-height: 1; }
    .ma-v6-why-more__disc[open] > .ma-v6-why-more__summary::after { content: "\2212"; }
    .ma-v6-why-list--more .ma-v6-why-item:last-child { border-bottom: 0; }

    /* Category-page sub-category cards: two 350×349 tiles → the horizontal
       card. */
    .ma-subcat-grid { grid-template-columns: 1fr; gap: 10px; }
    .ma-subcat-card > a { flex-direction: row; align-items: center; }
    .ma-subcat-card .ma-subcat-media {
        flex: 0 0 112px;
        width: 112px;
        aspect-ratio: 1 / 1;
        border-right: 1px solid var(--line, #E4E1DA);
    }
    .ma-subcat-card .ma-subcat-media img { width: 100%; height: 100%; object-fit: contain; }
    .ma-subcat-card .ma-subcat-name { flex: 1 1 auto; padding: 12px 16px; }
    .ma-subcat-card > a:not(:has(.ma-subcat-media)) .ma-subcat-name { padding: 16px; }
}

/* <=480px: hide the trust band dots */
@media (max-width: 480px) {
    .ma-trust-band--compact .ma-trust-band-line { gap: 6px 18px; }
    .ma-trust-band-dot { display: none; }
    /* /contact/: the number measured 355px of a 368px column at 9vw — one
       wide glyph from clipping. */
    .ma-bigcall-number { font-size: clamp(2rem, 8.2vw, 5.5rem); }
}

/* ── K4. Van archive panel: the arrows share the kicker's row ─────────────── */
/* The kicker is a grid item: arrows beside it on phones */
.ma-shopby__slides {
    grid-template-areas:
        "kick kick kick"
        "view prev next";
    gap: 16px 12px;
}
.ma-shopby__kicker { grid-area: kick; margin: 0; }
@media (max-width: 700px) {
    .ma-shopby__slides {
        grid-template-areas:
            "kick prev next"
            "view view view";
        gap: 14px 10px;
        align-items: center;
    }
    .ma-shopby .ma-hero-slides__arrow { width: 48px; height: 48px; }
}

/* ══ PASS L: MULTI-PICK FILTERS (2026-09-08) — ma_multi_select(): a <details> with checkboxes; popover on desktop, in flow <=768 ══ */

.ma-filter-bar .ma-msel {
    position: relative;
    min-width: 0;
}
.ma-filter-bar .ma-msel__btn {
    list-style: none;
    cursor: pointer;
    display: block;
}
.ma-filter-bar .ma-msel__btn::-webkit-details-marker { display: none; }
/* The label inside the summary keeps the Pass I label recipe (uppercase,
   16px, slate) — it is matched by `.ma-filter-bar .ma-filter-label` above. */

/* The closed control. Same box as `.ma-filter-form select` (Pass I3), plus a
   chevron drawn as a border so nothing is loaded for it. */
.ma-filter-bar .ma-msel__value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    /* border-box + 56px to match the number inputs */
    box-sizing: border-box;
    min-height: 56px;
    background: #FFFFFF;
    border: 1.5px solid var(--line, #E4E1DA);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--v5-ink);
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ma-filter-bar .ma-msel__value::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-left: auto;
    border-right: 2.5px solid var(--v5-ink);
    border-bottom: 2.5px solid var(--v5-ink);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 180ms cubic-bezier(.2,.7,.3,1);
}
.ma-filter-bar .ma-msel[open] .ma-msel__value::after {
    transform: translateY(3px) rotate(225deg);
}
/* A control with picks reads as "set": ink border, bold value. */
.ma-filter-bar .ma-msel.has-picks .ma-msel__value {
    border-color: var(--v5-ink);
    font-weight: 700;
}
.ma-filter-bar .ma-msel[open] .ma-msel__value {
    border-color: var(--v5-ink);
}
/* Focus ring lands on the visible box, not the (unfocusable-looking) summary. */
.ma-filter-bar .ma-msel__btn:focus-visible { outline: none; }
.ma-filter-bar .ma-msel__btn:focus-visible .ma-msel__value {
    outline: 3px solid var(--v8-red, #C4222B);
    outline-offset: 2px;
    border-color: var(--v5-ink);
}

/* The list: white card, hairline, floats under the control on desktop. */
.ma-filter-bar .ma-msel__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: 6px;
    padding: 6px 0;
    background: #FFFFFF;
    border: 1.5px solid var(--line, #E4E1DA);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(35, 39, 46, 0.14);
    max-height: 340px;
    overflow-y: auto;
}
.ma-filter-bar .ma-msel__opt {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    min-height: 56px;
    padding: 6px 14px;
    margin: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.3;
    color: var(--v5-ink);
    font-weight: 400;
}
.ma-filter-bar .ma-msel__opt:hover,
.ma-filter-bar .ma-msel__opt:focus-within {
    background: var(--ma-field, #F3F0E9);
}
.ma-filter-bar .ma-msel__opt input[type="checkbox"] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
    accent-color: var(--v8-red, #C4222B);
    cursor: pointer;
}
.ma-filter-bar .ma-msel__opt input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--v8-red, #C4222B);
    outline-offset: 2px;
}
.ma-filter-bar .ma-msel__opt span {
    flex: 1 1 auto;
    min-width: 0;
}

/* Phones: in flow, so the collapsible bar grows to hold it instead of
   clipping a popover; the shadow goes with the float. */
@media (max-width: 768px) {
    .ma-filter-bar .ma-msel__list {
        position: static;
        box-shadow: none;
        max-height: none;
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ma-filter-bar .ma-msel__value::after { transition: none; }
}

/* About Us "Our Team" points. ⚠️ min(320px, 100%): the bare 320px floor overflowed phones sitewide; :not(--tight) spares the one-column variant */
.ma-checklist:not(.ma-checklist--tight) {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Desktop: four points as 2 + 2 */
@media (min-width: 701px) {
    .ma-checklist.ma-team-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* text-wrap: pretty avoids one-word last lines */
.ma-checklist.ma-team-points li { text-wrap: pretty; }
/* The quote takes the 760px prose measure; !important for the page rule and .ma-v6-quote's margin */
.page-id-9 .ma-content-section .ma-v6-quote.ma-team-quote {
    max-width: 760px !important;
    margin-top: 32px !important;
}

/* ══ PASS M: HOMEPAGE HERO RECIPE ON CONTENT-PAGE HEROES (2026-09-11) — display h1 in a line clip, white proof
   card, button pair; markup from the render_block_core/group filter; photo heroes only ══ */

/* ── 1. Two planes: copy left, card right (mirrors .ma-v7-hero-band__inner) ── */
/* Pass O's two van heroes share these rules (their selectors are grouped in). */
.ma-page-hero--photo > .wp-block-group__inner-container,
.ma-store-header--hero .ma-store-header-inner:has(.ma-store-header__copy) {
    display: grid;
    /* 360px card: the copy column needs ~690px at the 68px tier */
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: end;
}
/* 150px top padding keeps the band under a screen */
.ma-page-hero--photo {
    padding-top: 150px !important;
}

/* ── 2. The headline: display tier, red period, red rule ────────────────── */
/* Display tier; !important because older rules set the size with it */
.ma-page-hero--photo h1,
.ma-page-hero--photo h1.wp-block-heading,
.post-type-archive-van_listing .ma-store-header--hero h1,
.single-van_listing .ma-store-header h1 {
    font-size: var(--ma-fs-display) !important;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 12px !important;
}
/* The rule replaces the h1's 26px bottom margin; the subtitle has margin 0. */
.ma-page-hero--photo .ma-hero-rule,
.ma-store-header--hero:has(.ma-store-header__copy) .ma-hero-rule {
    margin: 0 0 22px;
}
/* The line inside rises, not the h1 (two rises stutter) */
.ma-page-hero--photo h1 {
    animation: none !important;
}

/* ── 3. Buttons: red action first, cream secondary beside it ─────────────── */
.ma-page-hero--photo .ma-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
/* Outline button gets its own surface on the photo */
.ma-page-hero--photo .ma-v7-btn--outline {
    background: rgba(250, 249, 246, .96);
    border-color: rgba(250, 249, 246, .96);
}
.ma-page-hero--photo .ma-v7-btn--outline:hover,
.ma-page-hero--photo .ma-v7-btn--outline:focus-visible {
    background: var(--v5-ink);
    border-color: var(--v5-ink);
}

/* ── 4. The proof card ───────────────────────────────────────────────────── */
/* The white card is the one object with a shadow (a second plane) */
.ma-page-hero__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #FFFFFF;
    border-radius: var(--v7-radius, 14px);
    padding: 24px 28px 26px;
    box-shadow: 0 18px 44px rgba(16, 20, 28, .34);
    text-shadow: none;
}
.ma-page-hero__card-kicker {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v8-red-deep, #A31B24);
}
.ma-page-hero__card-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--v5-ink);
    margin-top: 2px;
}
.ma-page-hero__card-sub {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.5;
    color: var(--v5-ink);
}
.ma-page-hero__card-link {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 20px;
    color: var(--v8-blue, #2633C5);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ma-page-hero__card-link:hover,
.ma-page-hero__card-link:focus-visible {
    color: var(--v5-ink);
}
/* The van ticket as a normal column inside the card */
.ma-page-hero__card--ticket .ma-v7-ticket {
    position: static;
    left: auto;
    bottom: auto;
    padding: 0;
    gap: 6px;
    /* No second frame inside the card; !important to beat the ticket's own */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.ma-page-hero__card--ticket .ma-v7-ticket-kicker { color: var(--v8-red-deep, #A31B24); }
.ma-page-hero__card--ticket .ma-v7-ticket-count { font-size: 30px; line-height: 1.15; }
.ma-page-hero__card--ticket .ma-v7-ticket-link  { font-size: 20px; margin-top: 8px; color: var(--v8-blue, #2633C5); }

/* ── 5. Motion: the card deals itself in last ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .ma-page-hero__card {
        animation: maCinemaRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both 0.55s;
    }
}

/* ── 6. Phones: one column, compact card ─────────────────────────────────── */
@media (max-width: 900px) {
    .ma-page-hero--photo > .wp-block-group__inner-container,
    .ma-store-header--hero .ma-store-header-inner:has(.ma-store-header__copy) {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
    /* ⚠️ Restate the phone padding after the !important 150px (a media query adds no specificity) */
    .ma-page-hero--photo { padding-top: 96px !important; }
    /* Phones: the scrim holds full strength to 91% because the card pushes the text lower; shared with the Pass O van heroes */
    .ma-page-hero--photo,
    .ma-store-header--hero:has(.ma-store-header__copy) {
        background-image:
            linear-gradient(to top,
                rgba(16, 20, 28, .93) 0%,
                rgba(16, 20, 28, .86) 91%,
                rgba(16, 20, 28, .36) 98%,
                rgba(16, 20, 28, .32) 100%),
            var(--ma-hero-photo) !important;
    }
    /* Phones: hide the cream secondary button (the call bar and card already give more actions) */
    .ma-page-hero--photo .ma-page-hero__actions .ma-v7-btn--outline { display: none; }
    .ma-page-hero__card {
        padding: 16px 20px 18px;
        gap: 4px;
    }
    /* Kicker + title + link. The supporting line is the one thing the phone
       can afford to lose; the band already pays for two full-width buttons. */
    .ma-page-hero__card-sub { display: none; }
    .ma-page-hero__card-title,
    .ma-page-hero__card--ticket .ma-v7-ticket-count { font-size: 24px; }
    .ma-page-hero__card-link,
    .ma-page-hero__card--ticket .ma-v7-ticket-link { margin-top: 4px; }
}

/* ══ PASS N: ONE CLOSING CALL BAND SITEWIDE (2026-09-11) — ma_render_call_band() emits .ma-callband: kicker,
   "Call us." display title, number, button, proof card; new class so the .ma-call-strip !important layers don't
   apply ══ */
.ma-callband {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    box-sizing: border-box;
    background: var(--v5-ink, #23272E);
    color: #FAF9F6;
    padding: 88px 24px;
    /* Mirrors the 3px red rule that closes every photo hero. */
    border-top: 3px solid var(--v8-red, #C4222B);
}
.ma-callband__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px 48px;
    align-items: end;
    text-align: left;
}
.ma-callband__kicker {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F3F0E9;
    margin: 0 0 12px;
}
/* !important: the global heading rules set weight and size with it */
.ma-callband__title {
    font-family: var(--font-display);
    font-size: var(--ma-fs-display) !important;
    font-weight: 900 !important;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #FFFFFF !important;
    margin: 0 0 12px !important;
    text-align: left !important;
}
.ma-callband__title::after { display: none !important; }
.ma-callband .ma-hero-rule { margin: 0 0 22px; }
.ma-callband__lead {
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 1.6;
    color: #F3F0E9;
    max-width: 30em;
    margin: 0 0 22px;
}
/* The number is white (red on ink is 2.0:1); capped at 5rem */
.ma-callband__number {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.25rem, 6vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: #FFFFFF !important;
    text-decoration: none;
    margin: 0 0 18px;
}
.ma-callband__number:hover,
.ma-callband__number:focus-visible {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--v8-red, #C4222B);
}
.ma-callband__actions { margin: 0; }
.ma-callband__actions .ma-v7-btn { display: inline-flex; }
/* Home: token gap above and padding on both sides, like the charcoal bands */
body.home .ma-callband {
    margin-top: var(--ma-sec-y);
    padding-top: var(--ma-sec-y) !important;
    padding-bottom: var(--ma-sec-y) !important;
}

@media (max-width: 900px) {
    .ma-callband { padding: 56px 20px; }
    .ma-callband__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .ma-callband__lead { font-size: 20px; }
    .ma-callband__actions .ma-v7-btn { width: 100%; }
}
@media (max-width: 768px) {
    body.home .ma-callband { margin-top: 0; }
}

/* Home chapter openers all left-aligned; the content under them keeps its own alignment */
body.home .ma-featured-vans-inner,
body.home .ma-process-heading,
body.home .ma-process-heading--num,
body.home .ma-quiz-inner > .ma-quiz-eyebrow,
body.home .ma-quiz-inner > .ma-quiz-heading,
body.home .ma-quiz-inner > .ma-quiz-sub,
body.home .ma-quiz-inner > p,
body.home .ma-v9-calc-inner {
    text-align: left !important;
}
/* The van grid and its "View All" button stay centred inside the left-aligned
   section — they are a row, not an opener. */
body.home .ma-featured-vans-more { text-align: center !important; }
/* Reviews eyebrow goes slate like every other eyebrow */
body.home .ma-hr-eyebrow { color: var(--v5-slate) !important; }

/* ══ PASS O: HERO RECIPE ON THE TWO VAN TEMPLATES (2026-09-11) — ma_emit_store_header() takes a card; scoped
   with :has(.ma-store-header__copy) so /shop/, search and categories are untouched ══ */
/* The grid, the display-tier h1, the rule margin and the phone scrim are
   shared with Pass M — their selectors are grouped into the Pass M rules. */
/* 150px top padding, as in Pass M */
.ma-store-header--hero:has(.ma-store-header__copy) {
    padding-top: 150px;
}
/* Both van heroes take the display tier (grouped into the Pass M h1 rule) */
.ma-store-header--hero:has(.ma-store-header__copy) p.ma-store-sub { margin: 0; }
.ma-store-header--hero:has(.ma-store-header__copy) .ma-store-header__actions { margin: 24px 0 0; }

/* The card aligns to the subtitle's bottom */
.single-van_listing .ma-store-header--hero p.ma-store-sub { max-width: 34em; }

@media (max-width: 900px) {
    /* Restate the phone padding-top after the 150px */
    .ma-store-header--hero:has(.ma-store-header__copy) { padding-top: 96px; }
}
/* ══ PASS P: FOOTER SIGN-OFF + REVIEWS PULL QUOTE (2026-09-11) — tagline at display tier above the footer
   columns; /reviews/ gets the citrus pull quote; `.site-info .ma-sf…` (0,2,x) chain, later wins ══ */
.site-info .ma-sf-signoff {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px 0;
    text-align: left;
}
.site-info .ma-sf-signoff__line {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--ma-fs-display);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--v5-ink, #23272E);
    margin: 0;
    padding-top: 28px;
    /* Warm hairline, like every chapter opener — not --color-border. */
    border-top: 1px solid #D9D4C9;
    /* One line on desktop (Jeff, 2026-09-12); wraps on phones */
    max-width: none;
}
/* Logo on the white plate (card recipe); the margin keeps it left on phones */
.site-info .ma-sf-logo {
    background: #FFFFFF;
    padding: 14px 18px;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 10px;
    margin: 0 0 22px;
    box-shadow: none;
}
@media (max-width: 900px) {
    .site-info .ma-sf-signoff { padding: 40px 20px 0; }
    .site-info .ma-sf-signoff__line { padding-top: 22px; }
}
/* The sign-off stays left on phones */

/* /reviews/ pull quote is the third review (the shortest that reads as a quote), moved up with order:-1. ⚠️ nth-
   of-type counts the review divs in page 31; update if their order changes */
body.page .ma-v6-quotes-inner > .ma-v6-quote:nth-of-type(3) {
    grid-column: 1 / -1;
    order: -1;
    /* !important: the card recipe paints .ma-v6-quote white with importance
       (measured: the citrus lost without it, the type size won). */
    background: #FBEDE6 !important;
    border: 0 !important;
    border-radius: 14px;
    padding: 40px 44px 36px;
}
body.page .ma-v6-quotes-inner > .ma-v6-quote:nth-of-type(3) .ma-v6-quote-text {
    font-family: var(--font-display);
    /* Section tier (38px cap), not feature: 256 chars at 47px still ran
       eight lines. 30ch keeps it to ~5 lines at 1440. */
    font-size: var(--ma-fs-section);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--v5-ink, #23272E);
    max-width: 30ch;
}
/* Everything that isn't a review orders ahead of the pull quote */
body.page .ma-v6-quotes-inner::before { order: -3; }
body.page .ma-v6-quotes-inner > :not(.ma-v6-quote) { order: -2; }
@media (max-width: 900px) {
    body.page .ma-v6-quotes-inner > .ma-v6-quote:nth-of-type(3) { padding: 26px 24px; }
    /* Phones: quote at 24px (a paragraph, so the 20px floor applies) */
    body.page .ma-v6-quotes-inner > .ma-v6-quote:nth-of-type(3) .ma-v6-quote-text {
        font-size: 24px;
        line-height: 1.35;
        max-width: none;
    }
}

/* ══ PASS R: THE QUIZ — THE QUESTION IS THE HEADLINE (2026-09-12) — numeral + filling rule, display-tier
   question, options as hairline index rows; the [hidden] toggle restarts the reveal with no JS; index rows
   (0,4,0) beat the pill rules ══ */

/* ── The column widens to the chapter width ──────────────────────────────── */
body.home .ma-quiz-inner { max-width: 1180px; }
body.home .ma-quiz-inner > .ma-quiz-sub { max-width: 34em; }

/* ── One step = two planes ───────────────────────────────────────────────── */
body.home .ma-quiz-step {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px 64px;
    align-items: start;
    text-align: left;
    margin-top: 8px;
}
/* display:grid would defeat the [hidden] attribute the engine toggles. */
body.home .ma-quiz-step[hidden] { display: none !important; }
body.home .ma-quiz-step > .ma-quiz-back,
body.home .ma-quiz-step > .ma-quiz-progress,
body.home .ma-quiz-step > .ma-quiz-question { grid-column: 1; }
body.home .ma-quiz-step > .ma-quiz-options {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
}
/* Source order is Back, progress, question; the eye wants numeral,
   question, Back. */
body.home .ma-quiz-step > .ma-quiz-progress { order: 1; }
body.home .ma-quiz-step > .ma-quiz-question { order: 2; }
body.home .ma-quiz-step > .ma-quiz-back     { order: 3; margin: 4px 0 0; justify-self: start; }
/* Focus ring only for keyboard focus (the engine focuses the question for AT) */
body.home .ma-quiz .ma-quiz-question:focus:not(:focus-visible) { outline: none; }
body.home .ma-quiz .ma-quiz-question:focus-visible { outline: 3px solid var(--v8-red); outline-offset: 8px; }

/* ── The numeral and the filling rule ────────────────────────────────────── */
body.home .ma-quiz .ma-quiz-progress {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 10px;
    margin: 0 0 18px;
    color: var(--v8-blue);           /* blue is the counters' colour on this page */
    font-size: 16px;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}
body.home .ma-quiz-progress__of  { font-size: 13px; color: var(--v5-slate); }
body.home .ma-quiz-progress__bar {
    flex: 1 0 100%;
    height: 2px;
    margin-top: 12px;
    background: #D9D4C9;
    overflow: hidden;
}
body.home .ma-quiz-progress__fill {
    display: block;
    height: 100%;
    width: calc(var(--p, 0) * 100%);
    background: var(--v8-red);
    transform-origin: left center;
}

/* ── The question at the display tier ────────────────────────────────────── */
body.home .ma-quiz .ma-quiz-question {
    font-family: var(--font-display);
    font-size: var(--ma-fs-display) !important;
    font-weight: 900 !important;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--v5-ink) !important;
    margin: 0 0 22px !important;
    max-width: 12ch;
}
body.home .ma-quiz-q__line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
body.home .ma-quiz-q__in { display: block; }
body.home .ma-quiz-q__note {
    display: block;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--v5-slate);
    margin-top: 16px;
    max-width: 24em;
}

/* ── The options as an index ─────────────────────────────────────────────── */
body.home .ma-quiz .ma-quiz-options {
    max-width: none;
    gap: 0;
    margin: 0;
}
body.home .ma-quiz .ma-quiz-option {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid #D9D4C9 !important;
    border-radius: 0 !important;
    padding: 22px 56px 22px 0 !important;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    transition: padding-left 220ms cubic-bezier(0.2, 0.7, 0.3, 1), color 160ms ease;
}
body.home .ma-quiz .ma-quiz-option:last-child { border-bottom: 1px solid #D9D4C9 !important; }
body.home .ma-quiz .ma-quiz-option::after { right: 8px; width: 13px; height: 13px; margin-top: -7px; }
body.home .ma-quiz .ma-quiz-option:hover,
body.home .ma-quiz .ma-quiz-option:focus-visible {
    background: transparent !important;
    color: var(--v8-red-deep) !important;
    padding-left: 14px !important;
}
body.home .ma-quiz .ma-quiz-option:hover::after,
body.home .ma-quiz .ma-quiz-option:focus-visible::after { right: 2px; }

/* ── The result is the headline too ──────────────────────────────────────── */
body.home .ma-quiz-step.ma-quiz-result {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}
body.home .ma-quiz-result .ma-quiz-result-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 16px 64px;
    background: transparent;
    border: 0;
    border-top: 1px solid #D9D4C9;
    border-radius: 0;
    padding: 24px 0 0;
    max-width: none;
    margin: 0;
}
/* The label ("Our suggestion") stays first; `order` above had sent it to the
   bottom of the result step (seen on the first build). */
body.home .ma-quiz-step.ma-quiz-result > .ma-quiz-progress { order: -1; grid-column: 1 / -1; margin-bottom: 0; }
body.home .ma-quiz-step.ma-quiz-result > .ma-quiz-progress .ma-quiz-progress__bar { display: none; }
/* No row span: the result name keeps its period on the line */
body.home .ma-quiz-result .ma-quiz-result-name { grid-column: 1; grid-row: 1; max-width: none; margin-bottom: 0 !important; }
body.home .ma-quiz-result .ma-quiz-result-why,
body.home .ma-quiz-result .ma-quiz-result-preowned,
body.home .ma-quiz-result .ma-quiz-result-ctas,
body.home .ma-quiz-result .ma-quiz-result-alt { grid-column: 2; }
body.home .ma-quiz-result .ma-quiz-result-why {
    grid-row: 1;
    font-size: 22px;
    line-height: 1.6;
    max-width: 30em;
    margin: 0;
}
body.home .ma-quiz-result .ma-quiz-result-note,
body.home .ma-quiz-result .ma-quiz-restart { grid-column: 1 / -1; justify-self: start; text-align: left; margin: 0; max-width: 34em; }

/* ── The reveal: every step change re-runs it ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    @keyframes maQuizRow {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
    /* Step 1 waits for the section to scroll in (.in-view is set by
       js/animations.js); later steps run the moment they are unhidden. */
    body.home .ma-quiz.in-view .ma-quiz-q__in {
        transform: translateY(110%);
        animation: maHeroLine 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.05s both;
    }
    body.home .ma-quiz.in-view .ma-quiz-progress__fill {
        animation: maQuizFill 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s both;
    }
    @keyframes maQuizFill { from { transform: scaleX(0); } to { transform: none; } }
    body.home .ma-quiz.in-view .ma-quiz-option {
        animation: maQuizRow 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }
    body.home .ma-quiz.in-view .ma-quiz-option:nth-child(1) { animation-delay: 0.20s; }
    body.home .ma-quiz.in-view .ma-quiz-option:nth-child(2) { animation-delay: 0.28s; }
    body.home .ma-quiz.in-view .ma-quiz-option:nth-child(3) { animation-delay: 0.36s; }
    body.home .ma-quiz.in-view .ma-quiz-option:nth-child(4) { animation-delay: 0.44s; }
}

/* ── Phones and narrow tablets: one plane, section-tier question ─────────── */
@media (max-width: 900px) {
    body.home .ma-quiz-step,
    body.home .ma-quiz-step.ma-quiz-result,
    body.home .ma-quiz-result .ma-quiz-result-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    body.home .ma-quiz-step > .ma-quiz-options { grid-column: 1; grid-row: auto; order: 2; margin-top: 4px; }
    body.home .ma-quiz-step > .ma-quiz-back { order: 4; }
    body.home .ma-quiz-result .ma-quiz-result-name,
    body.home .ma-quiz-result .ma-quiz-result-why,
    body.home .ma-quiz-result .ma-quiz-result-preowned,
    body.home .ma-quiz-result .ma-quiz-result-ctas,
    body.home .ma-quiz-result .ma-quiz-result-alt { grid-column: 1; grid-row: auto; }
    body.home .ma-quiz .ma-quiz-question {
        font-size: var(--ma-fs-section) !important;
        max-width: none;
        margin-bottom: 8px !important;
    }
    body.home .ma-quiz .ma-quiz-option {
        font-size: 20px;
        padding: 18px 44px 18px 0 !important;
    }
}

/* ══ PASS S: THE ESTIMATOR — THE ANSWER IS THE HEADLINE (2026-09-12) — payment at display tier, fields on the
   white plate; Calculate hidden but kept (the script keys on it); links ink on cream now ══ */
body.home .ma-v9-calc-inner { max-width: 1180px; }
body.home .ma-v9-calc-copy { max-width: 34em; }

body.home .ma-estimator--home {
    max-width: 1180px;
    margin: 36px auto 0;
    /* !important: .ma-estimator is on the sitewide card list */
    background: transparent !important;
    border: 0;
    border-radius: 0;
    padding: 0 0 8px;
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 24px 64px;
    align-items: start;
    text-align: left;
}
body.home .ma-est-btn { display: none; }

/* ── The controls, on the plate ──────────────────────────────────────────── */
body.home .ma-est-grid {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    background: #FFFFFF;
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 10px;
    padding: 26px 28px 28px;
    gap: 18px 20px;
}
body.home .ma-est-label { font-size: 18px; color: var(--v5-slate); }
body.home .ma-est-input {
    background: #FFFFFF;
    border: 2px solid rgba(35, 39, 46, 0.22);
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--v5-ink);
}
/* appearance:none (base rule) strips the native arrow; "60 months (5 years)"
   then ran into the right edge. Room for the text, and a chevron drawn in. */
body.home select.ma-est-input {
    padding-right: 44px;
    /* !important on image and colour: the card rule's background shorthand is !important */
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2323272E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
}

/* "60 months (5 years)" at 20px bold does not fit half of the plate at
   1440 (measured: clipped at "5 yea"). The term takes a full row. */
body.home .ma-est-grid .ma-est-field:nth-child(3),
body.home .ma-est-grid .ma-est-field:nth-child(4) { grid-column: 1 / -1; }

/* ── The answer, on the field ────────────────────────────────────────────── */
body.home .ma-est-result {
    grid-column: 1;
    grid-row: 1;
    background: transparent;
    color: var(--v5-ink);
    border-radius: 0;
    padding: 6px 0 0;
    text-align: left;
}
body.home .ma-est-monthly-label {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v5-slate);
    opacity: 1;
    margin: 0 0 14px;
}
body.home .ma-est-monthly {
    font-family: var(--font-display);
    font-size: var(--ma-fs-display);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--v5-ink);
    margin: 0 0 16px;
    /* Reserve the line so "Check your numbers" and $1,234.56 do not
       shift the disclaimer around. */
    min-height: 1em;
}
/* The hero's rule, drawn once, under the number. */
body.home .ma-est-monthly::after {
    content: "";
    display: block;
    width: 96px;
    height: 3px;
    background: var(--v8-red);
    margin-top: 18px;
}
body.home .ma-est-disclaimer {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    font-style: normal;
    color: var(--v5-slate);
    opacity: 1;
    border-top: 0;
    padding: 0;
    margin: 0;
    max-width: 30em;
}
body.home .ma-est-result a {
    color: var(--v5-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
body.home .ma-est-result a:hover,
body.home .ma-est-result a:focus-visible {
    background: transparent;
    color: var(--v8-red-deep);
    box-shadow: none;
    border-radius: 0;
}
body.home .ma-est-result a:focus-visible { outline: 3px solid var(--v8-red); outline-offset: 3px; }

@media (max-width: 900px) {
    body.home .ma-estimator--home { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    /* The answer first, the controls under it (source order is the reverse). */
    body.home .ma-est-grid { grid-column: 1; grid-row: 2; padding: 20px; }
    body.home .ma-est-monthly { font-size: var(--ma-fs-feature); }
}

/* ══ PASS T: WHY-US NUMBERS (2026-09-12) — rating, years, live van count at display tier (the_content filter);
   the "4.8" list item hidden on home ══ */
body.home .ma-v6-why-figures {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
    border-top: 1px solid #D9D4C9;
    border-bottom: 1px solid #D9D4C9;
}
body.home .ma-v6-why-fig {
    padding: 22px 0 20px 20px;
    border-left: 1px solid #D9D4C9;
    margin: 0;
}
body.home .ma-v6-why-fig:first-child { padding-left: 0; border-left: 0; }
body.home .ma-v6-why-fig__n {
    display: block;
    font-family: var(--font-display);
    font-size: var(--ma-fs-display);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--v5-ink);
}
body.home .ma-v6-why-fig__l {
    display: block;
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v5-slate);
}
body.home .ma-v6-why-list > .ma-v6-why-item:first-child { display: none; }
body.home .ma-v6-why-list > .ma-v6-why-item:nth-child(4) { grid-column: 1 / -1; }
@media (max-width: 900px) {
    body.home .ma-v6-why-figures { margin-bottom: 22px; gap: 0 14px; }
    body.home .ma-v6-why-fig { padding: 16px 0 14px 14px; }
    body.home .ma-v6-why-fig__n { font-size: var(--ma-fs-feature); }
    body.home .ma-v6-why-fig__l { font-size: 12px; letter-spacing: 0.1em; }
}

/* ══ PASS U: SHOWROOM VIDEO ON AN INK PLANE (2026-09-12) — poster + play button, iframe loads on click
   (functions.php); never two dark bands touching ══ */
body.home .ma-v8-video {
    background: var(--v5-ink, #23272E) !important;
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    box-sizing: border-box;
    padding: var(--ma-sec-y) 24px var(--ma-sec-y) !important;
}
body.home .ma-v8-video-inner::before {
    background-image: linear-gradient(rgba(250, 249, 246, 0.28), rgba(250, 249, 246, 0.28));
}
body.home.ma-chapters-js .ma-v8-video-inner.ma-chapter-in::before,
body.home:not(.ma-chapters-js) .ma-v8-video-inner::before { color: #FFFFFF; }
body.home .ma-v8-video-heading { color: #FFFFFF !important; }
body.home .ma-v8-video-note { color: #F3F0E9; }
body.home .ma-v8-video-note a { color: #FFFFFF; }

body.home .ma-v8-video-frame {
    max-width: 940px;
    background: #000000;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
}
body.home .ma-v8-video-poster {
    position: absolute;
    inset: 0;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
}
body.home .ma-v8-video-poster[hidden] { display: none; }
body.home .ma-v8-video-poster__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    display: block;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* A bottom-weighted scrim so the label clears AA on any frame of the photo. */
body.home .ma-v8-video-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
}
body.home .ma-v8-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--v5-ink, #23272E);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px; /* optical: the triangle sits left of centre */
    box-sizing: border-box;
    z-index: 1;
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1), background 160ms ease;
}
body.home .ma-v8-video-poster__label {
    position: absolute;
    left: 22px;
    bottom: 18px;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFFFFF;
}
@media (hover: hover) and (pointer: fine) {
    body.home .ma-v8-video-poster:hover .ma-v8-video-play { transform: scale(1.06); background: var(--v8-red); color: #FFFFFF; }
    body.home .ma-v8-video-poster:hover .ma-v8-video-poster__img { transform: scale(1.03); }
}
body.home .ma-v8-video-poster:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) {
    body.home .ma-v8-video-play, body.home .ma-v8-video-poster__img { transition: none; }
}
@media (max-width: 640px) {
    body.home .ma-v8-video-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
    body.home .ma-v8-video-poster__label { left: 16px; bottom: 14px; font-size: 13px; }
}

/* ══ PASS V: "WHAT ARE YOU SHOPPING FOR?" — THREE DOORS (2026-09-12) — hairline rows: counter, feature-tier
   name, copy, CTA, photo; equipment links as an inline index; card-recipe !important properties restated ══ */
body.home .ma-v7-shop { overflow-x: clip; }
body.home .ma-v7-cats {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    counter-reset: ma-door;
    border-top: 1px solid #D9D4C9;
}
body.home .ma-v7-cats .ma-v7-cat {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) clamp(260px, 30vw, 420px);
    grid-template-areas: "n body media";
    gap: 0 40px;
    align-items: center;
    padding: 30px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #D9D4C9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    position: relative;
}
body.home .ma-v7-cats .ma-v7-cat::before {
    counter-increment: ma-door;
    content: counter(ma-door, decimal-leading-zero);
    grid-area: n;
    align-self: start;
    padding-top: 6px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    /* Slate, not the counters' blue: chapter "01" sits directly above door
       "01", and two blue 01s in a row read as a mistake. */
    color: var(--v5-slate);
}
body.home .ma-v7-cats .ma-v7-cat-body {
    grid-area: body;
    padding: 0;
    gap: 10px;
}
body.home .ma-v7-cats .ma-v7-cat-title {
    font-size: var(--ma-fs-feature);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.02em;
}
body.home .ma-v7-cats .ma-v7-cat-title::after { content: "."; color: var(--v8-red); }
body.home .ma-v7-cats .ma-v7-cat-desc { max-width: 34em; }
body.home .ma-v7-cats .ma-v7-cat-cta {
    font-size: 20px;
    color: var(--v8-red-deep);
    margin-top: 2px;
}
/* The photo: a 3/2 frame in its own column, centred. */
body.home .ma-v7-cats .ma-v7-cat-media {
    grid-area: media;
    /* 3:2 frame, centred in its own column, so photos show whole */
    aspect-ratio: 3 / 2;
    height: auto;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}
body.home .ma-v7-cats .ma-v7-cat-media img {
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
    body.home .ma-v7-cats .ma-v7-cat:hover .ma-v7-cat-media img { transform: scale(1.03); }
    body.home .ma-v7-cats .ma-v7-cat:hover .ma-v7-cat-cta { text-decoration: underline; text-underline-offset: 4px; }
}
body.home .ma-v7-cats .ma-v7-cat:focus-visible { outline: 3px solid var(--v8-red); outline-offset: 4px; }

/* ── The index, under the equipment door ─────────────────────────────────── */
body.home .ma-v7-cats > .ma-v7-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 26px;
    max-width: none;
    margin: -12px 0 0 96px;   /* 56px counter column + 40px gap: aligns with the copy */
    padding: 0 0 26px;
    border-bottom: 1px solid #D9D4C9;
}
body.home .ma-v7-cats > .ma-v7-quicklinks a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 20px;
    color: var(--v5-ink) !important;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    transition: text-decoration-color 160ms ease, color 160ms ease;
}
body.home .ma-v7-cats > .ma-v7-quicklinks a::after { content: none; }
body.home .ma-v7-cats > .ma-v7-quicklinks a:hover,
body.home .ma-v7-cats > .ma-v7-quicklinks a:focus-visible {
    color: var(--v8-red-deep) !important;
    text-decoration-color: currentColor;
}
body.home .ma-v7-cats > .ma-v7-quicklinks a.ma-v7-quicklink--sale { color: var(--v8-red-deep) !important; }
/* The equipment door's own hairline gives way to the index's. */
body.home .ma-v7-cats .ma-v7-cat:has(+ .ma-v7-quicklinks) { border-bottom: 0 !important; }
/* The next chapter's rule closes the doors */
body.home .ma-v7-cats > .ma-v7-cat:last-child { border-bottom: 0 !important; }

/* ── Phones and narrow tablets ───────────────────────────────────────────── */
@media (max-width: 900px) {
    /* The counter moves above the words on narrow screens */
    body.home .ma-v7-cats .ma-v7-cat {
        /* 108px, not wider: the words need ~200px for "Wheelchair" at 28px
           and a 132px photo pushed the title under it (seen on the build). */
        grid-template-columns: minmax(0, 1fr) 108px;
        grid-template-areas: "n media" "body media";
        gap: 0 14px;
        padding: 18px 0 !important;
    }
    body.home .ma-v7-cats .ma-v7-cat::before { padding-top: 0; margin-bottom: 8px; font-size: 14px; }
    body.home .ma-v7-cats .ma-v7-cat-title {
        font-size: var(--ma-fs-section);
        overflow-wrap: normal;
        word-break: keep-all;
    }
    body.home .ma-v7-cats .ma-v7-cat-desc { display: none; }
    body.home .ma-v7-cats .ma-v7-cat-cta { font-size: 18px; white-space: nowrap; }
    body.home .ma-v7-cats .ma-v7-cat-media {
        width: 108px;
        min-height: 0;
        align-self: center;
        border-radius: 10px;
    }
    body.home .ma-v7-cats > .ma-v7-quicklinks {
        margin: -6px 0 0 0;
        padding-bottom: 16px;
        gap: 0 18px;
    }
    body.home .ma-v7-cats > .ma-v7-quicklinks a { min-height: 44px !important; font-size: 18px; }
}

/* PASS W: door photos are the destination pages' own heroes (slideshows reuse .ma-hero-slides) */
body.home .ma-v7-cats .ma-door-media { position: relative; }
body.home .ma-v7-cats .ma-door-slides,
body.home .ma-v7-cats .ma-door-slides .ma-hero-slides__viewport {
    position: absolute;
    inset: 0;
    display: block;
}
body.home .ma-v7-cats .ma-door-slides .ma-hero-slide { display: block; }
body.home .ma-v7-cats .ma-v7-cat-media img,
body.home .ma-v7-cats .ma-door-slide__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
/* The slide crossfade already moves; the hover zoom would fight it. */
@media (hover: hover) and (pointer: fine) {
    body.home .ma-v7-cats .ma-v7-cat:hover .ma-door-slides img { transform: none; }
}

/* Vans door: dealer cards anchored to the bottom so the price badge stays whole */
body.home .ma-v7-cats .ma-v7-cat[href="/wheelchair-vans/"] .ma-door-slide__img {
    object-position: center bottom;
}

/* ══ PASS X: MOBILITY EQUIPMENT HUB INDEX ROWS (2026-09-14) — the PASS V door recipe on page 7; card recipe,
   auto-fit grid and the used card's span/border beaten with importance ══ */
body.page-id-7 .ma-eq-cats,
body.page-id-7 .ma-eq-cats--featured {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    counter-reset: ma-eq-row;
    border-top: 1px solid #D9D4C9;
}
body.page-id-7 .ma-eq-cats .ma-v7-cat,
body.page-id-7 .ma-eq-cats .ma-eq-cat--used {
    display: grid;
    grid-column: auto;
    grid-template-columns: 56px minmax(0, 1fr) clamp(220px, 24vw, 340px);
    grid-template-areas: "n body media";
    gap: 0 40px;
    align-items: center;
    padding: 26px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #D9D4C9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    transform: none !important;
}
body.page-id-7 .ma-eq-cats .ma-v7-cat::before {
    counter-increment: ma-eq-row;
    content: counter(ma-eq-row, decimal-leading-zero);
    grid-area: n;
    align-self: start;
    padding-top: 6px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: var(--v5-slate);
}
/* A section holding ONE row does not need a "01". */
body.page-id-7 .ma-eq-cats--featured .ma-v7-cat::before { content: ""; }
body.page-id-7 .ma-eq-cats .ma-v7-cat-body {
    grid-area: body;
    padding: 0 !important;
    gap: 10px;
    justify-content: center;
}
/* One step under the chapter h2 (--ma-fs-section, 37px at 1440): a row name
   the same size as its own chapter heading flattened the hierarchy. */
body.page-id-7 .ma-eq-cats .ma-v7-cat-title {
    font-size: clamp(28px, 2.2vw, 32px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
body.page-id-7 .ma-eq-cats .ma-v7-cat-title::after { content: "."; color: var(--v8-red); }
body.page-id-7 .ma-eq-cats .ma-v7-cat-desc { max-width: 34em; }
body.page-id-7 .ma-eq-cats .ma-v7-cat-cta {
    font-size: 20px;
    color: var(--v8-red-deep);
    margin-top: 2px;
}
body.page-id-7 .ma-eq-cats .ma-v7-cat-media,
body.page-id-7 .ma-eq-cats .ma-eq-cat--used .ma-v7-cat-media {
    grid-area: media;
    flex: none;
    aspect-ratio: 3 / 2;
    height: auto;
    border: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}
body.page-id-7 .ma-eq-cats .ma-v7-cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Product cutouts (Power Wheelchairs) sit whole on white, not cropped. */
body.page-id-7 .ma-eq-cats .ma-v7-cat-media--product img { object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
    body.page-id-7 .ma-eq-cats .ma-v7-cat:hover .ma-v7-cat-media img { transform: scale(1.03); }
}
body.page-id-7 .ma-eq-cats .ma-v7-cat:focus-visible { outline: 3px solid var(--v8-red); outline-offset: 4px; }
/* The next chapter's opener rule closes the list, as on the homepage. */
body.page-id-7 .ma-eq-cats > .ma-v7-cat:last-child { border-bottom: 0 !important; }

@media (max-width: 900px) {
    body.page-id-7 .ma-eq-cats .ma-v7-cat,
    body.page-id-7 .ma-eq-cats .ma-eq-cat--used {
        grid-template-columns: minmax(0, 1fr) 108px;
        grid-template-areas: "n media" "body media";
        gap: 0 14px;
        padding: 18px 0 !important;
        flex-direction: unset;
    }
    body.page-id-7 .ma-eq-cats .ma-v7-cat::before { padding-top: 0; margin-bottom: 8px; font-size: 14px; }
    body.page-id-7 .ma-eq-cats--featured .ma-v7-cat::before { margin-bottom: 0; }
    body.page-id-7 .ma-eq-cats .ma-v7-cat-title {
        font-size: 28px;
        overflow-wrap: normal;
        word-break: keep-all;
    }
    body.page-id-7 .ma-eq-cats .ma-v7-cat-desc { display: none; }
    /* Wraps, unlike the homepage's: "Browse vertical platform & porch lifts" is
       3x "Browse vans" and nowrap ran it under the photo. */
    body.page-id-7 .ma-eq-cats .ma-v7-cat-cta { font-size: 18px; white-space: normal; }
    /* Inline arrow keeps it on the last word */
    body.page-id-7 .ma-eq-cats .ma-v7-cat-cta .ma-cta-arrow { display: inline; }
    body.page-id-7 .ma-eq-cats .ma-v7-cat-media,
    body.page-id-7 .ma-eq-cats .ma-eq-cat--used .ma-v7-cat-media {
        width: 108px;
        min-height: 0;
        align-self: center;
        border-radius: 10px;
        aspect-ratio: 1 / 1;
    }
}

/* ══ PASS Y: VAN CARDS ON PHONES → SHOWROOM ROWS (2026-09-14) — no box, photo in the gutter at 4/3, feature-tier
   title, plain label, hairline between vans; archive + homepage. Text price hides for in-photo cards (the badge
   is readable at this size). ⚠️ 4/3 keeps the ramp and price badge in frame ══ */
@media (max-width: 700px) {
    body .ma-van-grid,
    body.home .ma-van-grid.ma-featured-vans-grid {
        row-gap: 32px !important;   /* The homepage sets gap 24px !important */
    }
    /* Two selectors: `body.home .ma-featured-vans .ma-van-card` (0,3,1) repaints the card white !important */
    body .ma-van-grid > .ma-van-card,
    body.home .ma-featured-vans .ma-van-grid > .ma-van-card {
        display: block;
        padding: 0 0 32px;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    body .ma-van-grid > .ma-van-card:hover,
    body.home .ma-featured-vans .ma-van-grid > .ma-van-card:hover {
        background: transparent !important;
    }
    body .ma-van-grid > .ma-van-card:not(:last-of-type),
    body.home .ma-featured-vans .ma-van-grid > .ma-van-card:not(:last-of-type) {
        border-bottom: 1px solid #D9D4C9 !important;
    }
    body .ma-van-grid > .ma-van-card:last-of-type {
        padding-bottom: 0;
    }
    /* Photo stays inside the gutter: the 100vw bleed let iOS Safari pan the page sideways */
    body .ma-van-grid > .ma-van-card > .ma-van-card__photo-wrap {
        width: 100%;
        max-width: 100%;
        margin: 0;
        aspect-ratio: 4 / 3;
        height: auto;
        border-radius: 10px;
        overflow: hidden;
    }
    body .ma-van-grid > .ma-van-card > .ma-van-card__body {
        display: block;
        padding: 20px 0 0;
    }
    body .ma-van-grid > .ma-van-card > .ma-van-card__body > .ma-van-card__title {
        margin: 0 0 12px !important;
        padding: 0;   /* `.ma-content-section h2` adds 16px on the archive */
        font-size: var(--ma-fs-feature) !important;
        font-weight: 900 !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em;
        overflow-wrap: normal;
        word-break: keep-all;
    }
    /* Tags become one plain label line; brand stays hidden, 18px label floor */
    /* The dot sits in the column gap and is clipped when the line wraps */
    body .ma-van-grid > .ma-van-card > .ma-van-card__body > .ma-van-card__tags {
        gap: 0 28px;
        margin: 0;
        overflow: clip;
    }
    body .ma-van-grid > .ma-van-card > .ma-van-card__body > .ma-van-card__tags .ma-van-tag {
        position: relative;
        padding: 0;
        background: transparent;
        border-radius: 0;
        color: var(--v5-slate);   /* 6.7:1 on the cream field */
        letter-spacing: 0.08em;
    }
    body .ma-van-grid > .ma-van-card > .ma-van-card__body > .ma-van-card__tags .ma-van-tag + .ma-van-tag::before {
        content: "\00B7";
        position: absolute;
        left: -18px;
        width: 8px;
        text-align: center;
    }
    body .ma-van-grid > .ma-van-card > .ma-van-card__body > .ma-van-card__price {
        margin: 12px 0 0;
    }
    body .ma-van-grid > .ma-van-card > .ma-van-card__body > .ma-van-card__price--in-photo {
        display: none;
    }
    body .ma-van-grid > .ma-van-card > .ma-van-card__body > .ma-van-card__cta {
        margin-top: 20px;
    }
    /* Sold badge: over the photo, aligned with the text column (the card's
       left edge) now that the card has no padding to inset it from. */
    body .ma-van-grid > .ma-van-card > .ma-van-card__sold-badge {
        top: 14px;
        left: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-14 — HERO LOT SLIDES: the homepage hero background crossfades
   ═══════════════════════════════════════════════════════════════════════════
   Jeff: "make the background image a slideshow of our lot photos." Markup and
   timing: ma_home_hero_bg_slides() in functions.php. The stack sits over the
   band's own background (which stays as the no-JS / reduced-motion ground)
   and repaints the SAME scrim as .ma-v7-hero--photo (:7130) on top of every
   slide, so text contrast does not change from photo to photo. If that scrim
   is ever re-measured, change both. On phones PASS Z shows the stack behind
   the h1 + buttons only, with its own flat scrim.
   ─────────────────────────────────────────────────────────────────────────── */
.ma-v7-hero--photo > .ma-hero-bg,
.ma-store-header--hero > .ma-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.ma-hero-bg__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ma-hero-bg__slide.is-active { opacity: 1; }
.ma-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(16, 20, 28, .93) 0%,
        rgba(16, 20, 28, .86) 70%,
        rgba(16, 20, 28, .34) 90%,
        rgba(16, 20, 28, .30) 100%);
}
.ma-v7-hero--photo > .ma-v7-hero-band__inner {
    position: relative;
    z-index: 1;
}
@media (max-width: 900px) {
    .ma-v7-hero--photo > .ma-hero-bg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ma-hero-bg__slide { transition: none; }
}

/* ══ PASS Z: HOMEPAGE HERO PHOTO ON PHONES (2026-09-14) — the lot slideshow sits behind the h1 + buttons only; eyebrow and quiz link hide ══ */
@media (max-width: 900px) {
    /* Band and inner dissolve into one grid so the photo can span exactly the h1-to-buttons rows */
    body.home .ma-v7-hero-band.ma-v7-hero--photo {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        padding: 56px 24px 32px;
    }
    body.home .ma-v7-hero--photo > .ma-v7-hero-band__inner,
    body.home .ma-v7-hero--photo .ma-v7-hero-copy {
        display: contents;
    }
    body.home .ma-v7-hero--photo .ma-v7-eyebrow,
    body.home .ma-v7-hero--photo .ma-v7-hero-quizlink {
        display: none;
    }
    /* Negative margins bleed the stack to the band's edges: top/sides = band padding, bottom = air under the buttons */
    body.home .ma-v7-hero--photo > .ma-hero-bg {
        display: block;
        position: relative;
        inset: auto;
        align-self: stretch;
        grid-row: 1 / 4;
        grid-column: 1;
        margin: -56px -24px -36px;
    }
    /* Flat scrim, not bottom-weighted: the h1 sits at the top here. .84 keeps white ≥4.5:1 over a pure-white pixel */
    body.home .ma-v7-hero--photo > .ma-hero-bg::after {
        background: linear-gradient(to bottom, rgba(16, 20, 28, .84) 0%, rgba(16, 20, 28, .9) 100%);
    }
    body.home .ma-v7-hero--photo .ma-v7-hero-title {
        grid-row: 1;
        /* White on the photo again; the older phone rule painted it ink for the cream band */
        color: #FFFFFF !important;
        text-shadow: 0 2px 18px rgba(0, 0, 0, .45) !important;
    }
    body.home .ma-v7-hero--photo .ma-hero-rule { grid-row: 2; }
    body.home .ma-v7-hero--photo .ma-v7-hero-ctas { grid-row: 3; }
    body.home .ma-v7-hero--photo .ma-v7-hero-human { grid-row: 4; margin-top: 64px; }
    body.home .ma-v7-hero--photo .ma-v7-hero-card { grid-row: 5; margin-top: 28px; }
    body.home .ma-v7-hero--photo .ma-v7-hero-title,
    body.home .ma-v7-hero--photo .ma-hero-rule,
    body.home .ma-v7-hero--photo .ma-v7-hero-ctas,
    body.home .ma-v7-hero--photo .ma-v7-hero-human,
    body.home .ma-v7-hero--photo .ma-v7-hero-card {
        position: relative;
        z-index: 1;
        grid-column: 1;
    }
}

/* ══ LIGHTBOX CLICK-TO-ZOOM (2026-09-15) — logic in functions.php lightbox script ══ */
/* Chrome, hover and focus ride with .ma-lightbox__close (:5154, :7832) */
.ma-lightbox__zoom {
    right: 80px;
    gap: 8px;
    padding: 0 18px 0 14px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 999px;
}
/* Minus sign when zoomed: the plus stroke drops out */
.ma-lightbox__zoom[aria-pressed="true"] .ma-lightbox__zoom-plus { display: none; }

/* Zoomed: the photo leaves the flex box and is placed by JS translate against the viewport */
.ma-lightbox.is-zoomed { overflow: hidden; }
.ma-lightbox.is-zoomed .ma-lightbox__img {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.ma-lightbox.is-dragging .ma-lightbox__img { cursor: grabbing; }
/* Arrows, strip and counter would sit on the photo being inspected; zoom out to page */
.ma-lightbox.is-zoomed .ma-lightbox__nav,
.ma-lightbox.is-zoomed .ma-lightbox__strip,
.ma-lightbox.is-zoomed .ma-lightbox__count { display: none; }
/* Controls need a solid ground once a bright photo fills the screen behind them */
.ma-lightbox.is-zoomed .ma-lightbox__zoom,
.ma-lightbox.is-zoomed .ma-lightbox__close { background: rgba(16, 20, 26, 0.78); }

/* Narrow screens: clear the close button, and the label shrinks with it */
@media (max-width: 600px) {
    .ma-lightbox__zoom { right: 76px; padding: 0 16px 0 12px; font-size: 16px; }
}

/* ══ DOCKED HERO (2026-09-15) — a band-height photo on ink instead of a cover crop ══ */
/* For a render whose subject any cover crop would cut. The file's left edge fades to the same
   ink, so the photo dissolves into the band. Emitted by ma_emit_store_header() from the map's
   hero_fit slot; ⚠️ !important throughout, like --hero-duo: .ma-store-header--hero (:6322)
   sets size and position !important */
.ma-store-header--hero-docked {
    background-color: #10141C !important;
    background-size: 100% 100%, auto 100% !important;
    background-position: 0 0, right center !important;
}
@media (max-width: 900px) {
    /* Phones: full-width photo across the top, the copy sits on ink below it */
    .ma-store-header--hero-docked {
        background-size: 100% 100%, 100% auto !important;
        background-position: 0 0, center top !important;
    }
}

/* 2026-09-16 — MOST RECOMMENDED: staff-pick bookmark on a product card, red so it outranks the citrus Sale bubble */
.ma-card-bookmark--rec {
    background: var(--v8-red-deep, #A31B24);
    color: #FFFFFF;
    /* Two clean lines: the box must clear "RECOMMENDED" whole, or it breaks mid-word into a stray "D" */
    width: max-content;
    max-width: 132px;
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1.25;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}
@media (max-width: 600px) {
    .ma-card-bookmark--rec { max-width: 132px; font-size: 12px; }
}

/* 2026-09-16 — PRE-OWNED CHARCOAL BAND: the white banner read as a card on a card-holding page; it holds no cards, so it may be ink */
.ma-compat-cta--dark {
    background: var(--v5-ink);
    align-items: flex-start;
}
.ma-compat-cta--dark .ma-compat-cta__copy { flex: 1 1 420px; }
.ma-compat-cta--dark p { color: #FFFFFF; }
.ma-compat-cta--dark p + p { margin-top: 10px; }
/* The count is the band's kicker, so it leads rather than floating above the band */
.ma-compat-cta--dark .ma-preowned-ticket {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v7-mist);
}

/* 2026-09-16 — PRE-OWNED FINDER: "What are you looking for?" replaces the generic attribute bar on this category */
.ma-used-finder {
    max-width: 1200px;
    margin: 0 auto 28px;
    padding: 24px;
    background: var(--ma-field);
    border: 1px solid var(--line, #E4E1DA);
    border-radius: 12px;
}
.ma-used-finder__h {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.2vw, 30px);
    color: var(--v5-ink);
}
.ma-used-finder__row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ma-used-finder__row + .ma-used-finder__row { margin-top: 16px; }
.ma-used-finder__legend {
    flex: 0 0 150px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v5-ink);
}
.ma-used-chips { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 320px; }
/* 56px tall to clear the project's mobile button floor, since these are the primary control here */
.ma-used-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 18px;
    border: 1.5px solid var(--line, #E4E1DA);
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 19px;
    color: var(--v5-ink) !important;
    text-decoration: none !important;
}
.ma-used-chip__count {
    font-size: 15px;
    font-weight: 700;
    color: var(--v8-blue, #2633C5);
}
.ma-used-chip.is-active {
    background: var(--v8-red-deep, #A31B24);
    border-color: var(--v8-red-deep, #A31B24);
    color: #FFFFFF !important;
}
.ma-used-chip.is-active .ma-used-chip__count { color: #FFFFFF; }
.ma-used-finder__clear { margin: 16px 0 0; font-size: 18px; }
@media (max-width: 768px) {
    .ma-used-finder { padding: 18px 16px; }
    .ma-used-finder__row { display: block; }
    .ma-used-finder__legend { display: block; margin-bottom: 10px; }
}

/* 2026-09-16 — VEHICLE LIFTS FORM ON CHARCOAL: the band moved below the grid and went ink, so its form text must invert */
.ma-compat-cta--dark.ma-compat-cta--form .wpforms-field-label,
.ma-compat-cta--dark.ma-compat-cta--form .wpforms-field-sublabel,
.ma-compat-cta--dark.ma-compat-cta--form .wpforms-field-description,
.ma-compat-cta--dark.ma-compat-cta--form legend,
.ma-compat-cta--dark.ma-compat-cta--form label {
    color: #FFFFFF !important;
}
/* The required marker is #b00 on cream; on ink it drops under 3:1, so lift it to the light red */
.ma-compat-cta--dark.ma-compat-cta--form .wpforms-required-label { color: #FF8A8A !important; }
.ma-compat-cta--dark .ma-compat-cta-or,
.ma-compat-cta--dark .ma-compat-cta-or a { color: #FFFFFF !important; }
.ma-compat-cta--dark .ma-compat-cta-or a { text-decoration: underline !important; }
/* Controls stay white cards on the ink band, which is the site's card recipe, not a new surface */
.ma-compat-cta--dark.ma-compat-cta--form input[type="text"],
.ma-compat-cta--dark.ma-compat-cta--form input[type="email"],
.ma-compat-cta--dark.ma-compat-cta--form input[type="tel"],
.ma-compat-cta--dark.ma-compat-cta--form select,
.ma-compat-cta--dark.ma-compat-cta--form textarea {
    background: #FFFFFF;
    color: var(--v5-ink);
}

/* 2026-09-16 — SERVICES DROPDOWN: rightmost parent, so a left-aligned 740px panel runs off the viewport */
.main-navigation .main-nav li#menu-item-19 > ul.sub-menu {
    left: auto;
    right: 0;
    /* 6 items in 2 columns needs far less width than the 14-item Equipment panel this width was sized for */
    width: 540px;
}

/* 2026-09-16 — COLLAPSED HEADER OVERFLOW: the strip needed 1523px and clipped the phone pill at 1440.
   Space comes from padding and gaps only; the 19px nav type and the phone number are both protected. */
@media (min-width: 1280px) {
    /* ⚠️ Even box gaps read as UNEVEN: GP's 49px dropdown toggle sits inside the link, so the
       ink gap after an arrowed label was 67px against 18px after a plain one. Tighten the
       arrow so "Services v" reads as one unit, then one gap governs every pair. */
    .ma-nav-collapsed .inside-header .main-navigation .main-nav > ul {
        gap: 14px;
    }
    .ma-nav-collapsed .inside-header .main-navigation .main-nav ul li a {
        padding-left: 4px;
        padding-right: 4px;
    }
    .ma-nav-collapsed .inside-header .main-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
        width: auto;
        padding-left: 6px;
        padding-right: 0;
        line-height: inherit;
    }
    .ma-nav-collapsed .ma-header-call { margin-left: 14px; }
}
/* Below 1399 the full number cannot keep its 24px gutter even at minimum spacing (the row is
   1375px wide at min-content), so the pill goes icon-only
   rather than clipping mid-number. Same tel: link, same tap target. */
@media (min-width: 1280px) and (max-width: 1398px) {
    .ma-nav-collapsed .ma-header-call__num { display: none; }
    .ma-nav-collapsed .ma-header-call { padding-left: 12px; padding-right: 12px; }
}

/* 2026-09-16 — CERT ROW, THREE LOGOS ON ONE LINE (NMEDA dropped).
   ⚠️ The seal is now keyed by .ma-cert-seal, never :last-child — the old rule followed the
   order and put the 140px white chip on Vantage. JCI's 140px floor is a brand rule, so the
   wordmarks come UP to meet it rather than the seal coming down. */
.ma-v7-hero-facts--logos {
    flex-wrap: nowrap;
    gap: 0 36px;
    justify-content: center;
}
/* Undo the chip that :last-child now lands on */
.ma-v7-hero-facts--logos li:last-child {
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    margin-top: 0;
}
.ma-v7-hero-facts--logos li:last-child img { height: 92px; max-width: 300px; }
.ma-v7-hero-facts--logos img { height: 92px; max-width: 300px; }
/* The seal keeps its documented 140px legibility floor and its white chip (JCI forbids altering it) */
.ma-v7-hero-facts--logos .ma-cert-seal img { height: 140px; max-width: none; }
/* The old rule hid the dot for the seal via :last-child; that now lands on Vantage */
.ma-v7-hero-facts--logos li + li::before { content: ""; }
.ma-v7-hero-facts--logos .ma-cert-seal::before { content: none; }
.ma-v7-hero-facts--logos .ma-cert-seal {
    padding: 8px 12px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid var(--line, #E4E1DA);
    margin-top: 0;
    flex: 0 0 auto;
}
@media (max-width: 900px) {
    .ma-v7-hero-facts--logos { flex-wrap: wrap; gap: 18px 24px; }
    .ma-v7-hero-facts--logos img,
    .ma-v7-hero-facts--logos li:last-child img { height: 44px; max-width: 170px; }
    .ma-v7-hero-facts--logos .ma-cert-seal img { height: 110px; }
}

/* 2026-09-16 — CALL BAND NUMBER OVERLAP: .ma-callband__copy is a fixed 672px at every width,
   but the number scaled on 6vw and is white-space:nowrap, so past ~85px it ran under the card
   (37px over at 1600, 68px at 1920). Measured: number width = font-size x 7.881, so 672/7.881
   = 85px is the true ceiling. 4.2rem (84px at the 20px root) keeps 10px of clearance. */
.ma-callband__number {
    font-size: clamp(2.25rem, 6vw, 4.2rem);
    max-width: 100%;
}

/* ══ SEARCH "SEE ALL" CHIPS (2026-09-17) — the query mapped to a section, so the section link sits right under the hero ══ */
.ma-search-browse {
    max-width: 1080px;
    margin: 0 auto;
    padding: 22px 24px 6px;
}
.ma-search-browse__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.ma-search-browse__label {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin-right: 4px;
}
.ma-search-browse__chip {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.ma-search-browse__chip:hover,
.ma-search-browse__chip:focus-visible {
    border-color: var(--color-cta);
    color: var(--color-cta);
}