/*
 * additional-styles.css
 *
 * Supplemental decorative styles for Max Machinery.
 * Loaded after style.css. Populated incrementally as sections are built.
 */

/* ==========================================================================
   FOCUS RINGS
   ========================================================================== */

/* Pointer clicks never draw a focus ring. The browser's own ring colour is
   derived from the OS accent colour, so the same link reads blue on one machine
   and orange on another — there is no colour to override, only the ring to
   suppress. Keyboard users keep a ring via :focus-visible, in neutral-900
   instead of the orange primary.
   Deliberately excludes input/textarea/select: the orange border-and-glow on
   form fields is intentional design, not an accidental focus ring. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--mm-color-neutral-900);
    outline-offset: 2px;
    border-radius: 2px;
}
/* No coloured rectangle over links on touch either. */
a,
button,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   SINGLE PRODUCT PAGE (PDP)
   ========================================================================== */

.pdp {
    padding: 1.5rem 1rem 5rem;
    background: var(--mm-color-white);
}
/* Side gutter matching the handoff .container (0 1rem / 0 1.5rem).
   The theme sets useRootPaddingAwareAlignments but never defines
   styles.spacing.padding, so --wp--style--root--padding-* is empty and
   has-global-padding resolves to 0 — below contentSize (1280px) the PDP
   ran flush to the viewport edge. Purely additive: at wide viewports the
   constrained children are still centred, so the 80px left edge is
   unchanged. */
@media (min-width: 640px) {
    .pdp { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* WooCommerce's Breadcrumbs and Product Details blocks both render with
   alignwide by default, pinning them to wide-size (1440px) while
   .pdp__top sits at content-size (1280px) — an 80px horizontal offset
   between the breadcrumb/tabs and the gallery/title. Pull them back to
   content width so every row shares one left edge. Specificity (0,4,0)
   beats WP's `.is-layout-constrained > .alignwide` layout rule (0,2,0),
   so no !important is needed. */
.pdp.is-layout-constrained > .wc-block-breadcrumbs.alignwide,
.pdp.is-layout-constrained > .wp-block-woocommerce-product-details.alignwide {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

/* Breadcrumbs.
   The WC Breadcrumbs block emits one text run —
   <a>Home</a>&nbsp;/&nbsp;<a>Cat</a>&nbsp;/&nbsp;Title — not an element
   per crumb like the handoff's <span>/</span>. Under display:flex each
   "&nbsp;/&nbsp;" became an anonymous flex item, so the 0.4rem gap was
   applied on both sides of it *in addition to* the two nbsp characters,
   leaving the separators in a double-wide gutter. Keep it inline text and
   let the nbsp supply the spacing. */
.pdp .woocommerce-breadcrumb {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--mm-color-neutral-500);
    margin: 0 0 1.5rem;
    background: none;
    padding: 0;
}
.pdp .woocommerce-breadcrumb a {
    color: var(--mm-color-neutral-500);
    text-decoration: none;
    transition: color var(--mm-transition-fast);
}
.pdp .woocommerce-breadcrumb a:hover { color: var(--mm-color-primary); }

/* 2-column: gallery | info */
.pdp__top {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 900px) {
    .pdp__top { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ---- Gallery: WooCommerce product-image-gallery + flexslider overrides ---- */
.pdp__gallery .woocommerce-product-gallery { float: none !important; width: 100% !important; }

/* Main image + every gallery slide (the slider shows the others when a thumbnail is clicked) */
.pdp__gallery .woocommerce-product-gallery__image {
    aspect-ratio: 1;
    border-radius: 1.5rem;
    background: var(--mm-color-neutral-100);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.pdp__gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2.5rem;
}

/* Design has no zoom affordance on the gallery — hide WC's magnifier trigger */
.pdp__gallery .woocommerce-product-gallery__trigger { display: none !important; }

/* No zoom of any kind: with the lightbox disabled, WC still wraps the main
   image in a link to the full-size file. Kill the click-through and the
   zoom cursor so the picture is inert. */
.pdp__gallery .woocommerce-product-gallery__image > a { pointer-events: none; cursor: default; }
.pdp__gallery .woocommerce-product-gallery__image img { cursor: default; }

/* Thumbnail strip (flexslider — requires wc-product-gallery-slider theme support) */
.pdp__gallery .flex-control-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
}
.pdp__gallery .flex-control-nav li { margin: 0; }
.pdp__gallery .flex-control-nav img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    background: var(--mm-color-neutral-100);
    padding: 0.5rem;
    cursor: pointer;
    display: block;
    transition: border-color var(--mm-transition-fast);
}
.pdp__gallery .flex-control-nav li .flex-active,
.pdp__gallery .flex-control-nav img:hover {
    border-color: var(--mm-color-primary);
}

/* ---- Info column ---- */

/* Category eyebrow — core/post-terms block with term="product_cat" */
.pdp__eyebrow.wp-block-post-terms {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-color-primary);
    margin-bottom: 0;
}
.pdp__eyebrow.wp-block-post-terms a {
    color: var(--mm-color-primary);
    text-decoration: none;
}

/* Title — core/post-title */
.pdp__title {
    margin-top: 0.5rem;
    font-size: 2rem !important;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--mm-color-neutral-900);
    line-height: 1.15 !important;
}
@media (min-width: 640px) { .pdp__title { font-size: 2.5rem !important; } }

/* Short description */
.pdp__lead {
    margin-top: 1rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--mm-color-neutral-600);
}

/* Key specs — [mm_product_keyspecs] shortcode output (dl.pdp__keyspecs) */
.pdp__keyspecs {
    margin-top: 1.5rem;
    margin-bottom: 0;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    overflow: hidden;
}
.pdp__keyspec {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    border-top: 1px solid var(--mm-color-neutral-100);
}
.pdp__keyspec:first-child { border-top: 0; }
.pdp__keyspec dt { font-weight: 600; color: var(--mm-color-neutral-900); }
.pdp__keyspec dd { margin: 0; color: var(--mm-color-neutral-600); }

/* CTA row */
.pdp__actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Arrow must render inside the button <a>, not on the .wp-block-button wrapper */
.pdp .mm-btn-arrow::after { content: none; }
.pdp .mm-btn-arrow .wp-block-button__link::after { content: ' \203A'; }

/* "Category: X" link next to the CTA */
.pdp__cat.wp-block-post-terms {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mm-color-neutral-500);
}
.pdp__cat.wp-block-post-terms a {
    color: var(--mm-color-primary);
    font-weight: 500;
    text-decoration: none;
}
.pdp__cat.wp-block-post-terms a:hover { color: var(--mm-color-primary-dark); }

/* ---- Tabs: WooCommerce product-details block overrides ---- */
.pdp .woocommerce-tabs { margin-top: 4rem; }

/* Tab nav — flat row; the active tab shows ONLY an orange bottom border.
   The tabs render via the WooCommerce product-details block, whose markup has
   NO .pdp ancestor, so the old `div.product .pdp …` selectors never matched and
   WC's boxed-tab CSS drew the orange 3-sided box. We target
   `.woocommerce-tabs ul.tabs.wc-tabs` (which DOES match) and use !important —
   including on the link padding — to beat WC's higher-specificity
   `.woocommerce div.product …` rules that otherwise collapse the spacing. */
.woocommerce-tabs ul.tabs.wc-tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--mm-color-neutral-200);
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-tabs ul.tabs.wc-tabs::before,
.woocommerce-tabs ul.tabs.wc-tabs::after { display: none !important; }
.woocommerce-tabs ul.tabs.wc-tabs li {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 0 -1px !important;
    padding: 0 !important;
}
/* Kill WC's decorative rounded-corner pseudo elements on each tab */
.woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce-tabs ul.tabs.wc-tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs.wc-tabs li a {
    display: block;
    padding: 0.9rem 1.25rem !important;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mm-color-neutral-500);
    text-decoration: none;
    transition: color var(--mm-transition-fast);
}
.woocommerce-tabs ul.tabs.wc-tabs li:hover a { color: var(--mm-color-neutral-900) !important; }
.woocommerce-tabs ul.tabs.wc-tabs li.active {
    border-bottom-color: var(--mm-color-primary) !important;
    background: transparent !important;
}
.woocommerce-tabs ul.tabs.wc-tabs li.active a { color: var(--mm-color-primary) !important; }

/* Tab panels — note capital T in woocommerce-Tabs-panel (WC's own class).
   woocommerce.css's `.woocommerce div.product .woocommerce-tabs .panel`
   (0,4,1) sets padding:0 and margin:0 0 2em, which out-specified a bare
   `.pdp .woocommerce-Tabs-panel` (0,2,0). The 2rem panel padding was dead
   and WC's 2em bottom margin leaked through, so panel content sat tight
   under the tab underline with uneven space below. The full ancestor
   chain here is (0,5,1) — it beats WC on specificity alone, so it does
   not depend on stylesheet load order the way an equal-weight rule would. */
.woocommerce div.product .pdp .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 2rem 0;
    margin: 0;
    border: 0;
}
/* WooCommerce injects a tab-title h2 inside each panel — hide it, design has no heading */
.pdp .woocommerce-Tabs-panel > h2 {
    display: none !important;
}
/* With that h2 hidden, the first *rendered* element in the panel is the
   one after it. Zero its top margin so every tab starts at the same
   2rem offset instead of stacking the table/heading margin on top. */
.woocommerce div.product .pdp .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child + * {
    margin-top: 0;
}
.pdp .woocommerce-Tabs-panel p {
    line-height: 1.75;
    color: var(--mm-color-neutral-700);
    max-width: 60rem;
}

/* Sub-headings inside tab panels (MECHANICAL, MATERIALS OF CONSTRUCTION, …).
   Typography is shared. The handoff marks these up as <h3>, but the content
   imported from the old site uses <h6 class="table__title">, so the h3 rule
   alone never matched a single element on the page — they kept theme.json's
   h6 styling (14px / 600 / 1.4px tracking / #2F2F2F) instead of the design's
   13px / 700 / 0.06em / neutral-500. */
.pdp .woocommerce-Tabs-panel h3,
.pdp .woocommerce-Tabs-panel h6.table__title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mm-color-neutral-500);
}

/* Re-authored content (handoff markup) — h3 carries its own vertical rhythm. */
.pdp .woocommerce-Tabs-panel h3 { margin: 1.5rem 0 0.75rem; }
.pdp .woocommerce-Tabs-panel h3:first-child { margin-top: 0; }

/* Imported content: each spec section is a .tab-entry wrapper holding an
   h6 + table, and those wrappers are nested siblings with no padding or
   border of their own. A top margin on the h6 therefore collapses straight
   out through the wrapper — which was pushing the whole Specifications
   panel 33px below every other tab. Keep the h6 margin at 0 and put the
   1.5rem section rhythm on the wrapper, where an adjacent-sibling selector
   applies it *between* sections only and never above the first one. */
.pdp .woocommerce-Tabs-panel h6.table__title {
    margin-top: 0;
    margin-bottom: 0.75rem;
}
.pdp .woocommerce-Tabs-panel .tab-entry + .tab-entry {
    margin-top: 1.5rem;
}

/* Lists inside tab panels (Applications fluid list) */
.pdp .woocommerce-Tabs-panel ul {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
    color: var(--mm-color-neutral-700);
    line-height: 1.9;
}

/* Tables inside any tab panel — content imported from the old site is
   classless, so this must match bare <table>, not just .shop_attributes */
.pdp .shop_attributes,
.pdp .woocommerce-Tabs-panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    max-width: 60rem;
    margin-top: 0.5rem;
}
.pdp .shop_attributes th,
.pdp .shop_attributes td,
.pdp .woocommerce-Tabs-panel table th,
.pdp .woocommerce-Tabs-panel table td {
    text-align: left;
    padding: 0.7rem 1rem;
    border: 1px solid var(--mm-color-neutral-200);
    color: var(--mm-color-neutral-700);
    vertical-align: top;
}
.pdp .shop_attributes th,
.pdp .woocommerce-Tabs-panel table th {
    background: var(--mm-color-neutral-50);
    font-weight: 600;
    color: var(--mm-color-neutral-900);
}
.pdp .shop_attributes th { width: 14rem; }
.pdp .woocommerce-Tabs-panel table td:first-child {
    font-weight: 600;
    color: var(--mm-color-neutral-900);
    width: 14rem;
}

/* Specifications + Downloads tabs: match the pdp__keyspecs card on the product
   image side — a rounded, bordered box with row dividers only (no per-cell grid
   borders), bold label / muted value. Scoped per panel and given the extra
   .woocommerce-tabs class so these out-specify the generic table rules above;
   other tabs' tables keep the grid style. */
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--specifications table,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table {
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--specifications table th,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--specifications table td,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table th,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table td {
    border: 0;
    border-top: 1px solid var(--mm-color-neutral-100);
    padding: 0.75rem 1.25rem;
    background: transparent;
}
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--specifications table tr:first-child th,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--specifications table tr:first-child td,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table tr:first-child th,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table tr:first-child td {
    border-top: 0;
}
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--specifications table td:first-child,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--specifications table th:first-child,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table td:first-child,
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table th:first-child {
    font-weight: 600;
    color: var(--mm-color-neutral-900);
    background: transparent;
}
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--specifications table td:last-child {
    font-weight: 400;
    color: var(--mm-color-neutral-600);
}

/* Downloads tables carry a real <th> column-header row, which picks up the bold
   dark treatment from the generic th rule above — the same way the specs panel's
   column-header tables (e.g. Transmitter Variations) do, so no extra header
   styling is needed here. The only overrides required are for the imported
   markup's inline `font-weight: 300; color: #2f2f2f` on the <table>, which would
   otherwise inherit into the cells; setting them on td wins over that. */
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table td {
    color: var(--mm-color-neutral-600);
    font-weight: 400;
    vertical-align: middle;
}
/* Each <th> also carries `font-weight: bold` inline, which renders 700 against
   the 600 of every other table header on the page. Inline styles can only be
   beaten with !important. */
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table th {
    font-weight: 600 !important;
}
/* Rows pair one line of text with a 2.5rem PDF icon — centre both vertically. */
.pdp .woocommerce-tabs .woocommerce-Tabs-panel--downloads table td img {
    vertical-align: middle;
}

/* Downloads tab — handoff download cards (for re-authored content) */
.pdp .downloads-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 0.5rem;
    max-width: 60rem;
}
@media (min-width: 640px)  { .pdp .downloads-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pdp .downloads-grid { grid-template-columns: repeat(4, 1fr); } }
.pdp .download-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-lg);
    color: var(--mm-color-neutral-800);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--mm-transition-fast), color var(--mm-transition-fast);
}
.pdp .download-card:hover {
    border-color: var(--mm-color-primary);
    color: var(--mm-color-primary);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
/* Interim: legacy downloads content hotlinks 131px PDF icons from production —
   tame them until the tab content is re-authored as download cards */
.pdp .woocommerce-Tabs-panel img[src*="file-pdf"] {
    width: 2.5rem;
    height: auto;
}
/* Downloads tab: show the grey PDF icon links as the orange "PDF" pill used
   on the Downloads page (.mm-doc-link). CSS only — tab content is untouched. */
.pdp .woocommerce-Tabs-panel--downloads a:has(> img[src*="file-pdf"]) {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    color: var(--mm-color-primary) !important;
    font-size: 0.75rem;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-decoration: none;
    transition: border-color var(--mm-transition-fast), background-color var(--mm-transition-fast);
}
.pdp .woocommerce-Tabs-panel--downloads a:has(> img[src*="file-pdf"]):hover {
    background: var(--mm-color-primary-light);
    border-color: var(--mm-color-primary);
}
.pdp .woocommerce-Tabs-panel--downloads a > img[src*="file-pdf"] {
    display: none;
}
.pdp .woocommerce-Tabs-panel--downloads a:has(> img[src*="file-pdf"])::after {
    content: "PDF";
}

/* ---- Related products ---- */
.pdp-related {
    padding: 4rem 1rem 6rem;
    background: var(--mm-color-neutral-50);
}
/* Same gutter as .pdp so the related grid keeps its left edge in line with
   the PDP above it below contentSize. */
@media (min-width: 640px) {
    .pdp-related { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* The related product-collection also defaults to alignwide (1440px) while
   the section heading sits at content-size (1280px) — align both. */
.pdp-related.is-layout-constrained > .wp-block-woocommerce-product-collection.alignwide {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

/* WooCommerce pattern provides its own heading — style it to match design.
   !important + h2 in selector needed: style.css's ".alignfull h2.wp-block-heading"
   sets 3rem !important at >=1024px; this file loads later so an equal-specificity
   !important rule here wins the cascade at every breakpoint. */
.pdp-related h2.wp-block-heading {
    font-size: 1.5rem !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mm-color-neutral-900);
    margin-bottom: 2rem;
}

/* product-collection block template grid (replaces old wc-block-grid classes) */
.pdp-related .wp-block-woocommerce-product-template {
    display: grid !important;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 640px)  { .pdp-related .wp-block-woocommerce-product-template { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pdp-related .wp-block-woocommerce-product-template { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* Individual product card — width: 100% overrides WC's .columns-N li.product width rule */
.pdp-related .wc-block-product {
    width: 100% !important;
    border-radius: 1.5rem;
    border: 1px solid var(--mm-color-neutral-200);
    background: var(--mm-color-white);
    overflow: hidden;
    transition: border-color var(--mm-transition-normal), box-shadow var(--mm-transition-normal);
}
.pdp-related .wc-block-product:hover {
    border-color: color-mix(in srgb, var(--mm-color-primary) 30%, transparent);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

/* Product image */
.pdp-related .wc-block-components-product-image {
    height: 13rem;
    overflow: hidden;
    background: var(--mm-color-neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.pdp-related .wc-block-components-product-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: transform var(--mm-transition-normal);
}
.pdp-related .wc-block-product:hover .wc-block-components-product-image img {
    transform: scale(1.05);
}

/* Category pill (post-terms) */
.pdp-related .pdp-related__cat {
    padding: 1rem 1.25rem 0;
    margin: 0;
    font-size: 0.75rem;
}
.pdp-related .pdp-related__cat a {
    display: inline-block;
    border-radius: 9999px;
    background: var(--mm-color-neutral-100);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mm-color-neutral-700);
    text-decoration: none;
}

/* Product title */
.pdp-related .wc-block-product .wp-block-post-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--mm-color-neutral-900);
    padding: 0.5rem 1.25rem 0;
    margin: 0;
    text-align: left;
}
.pdp-related .wc-block-product .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}

/* View Product link (read-more block) */
.pdp-related .pdp-related__link {
    display: inline-block;
    padding: 0.75rem 1.25rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mm-color-primary);
    text-decoration: none;
    transition: color var(--mm-transition-fast);
}
.pdp-related .pdp-related__link::after {
    content: " \2192";
}
.pdp-related .pdp-related__link:hover {
    color: var(--mm-color-primary-dark);
}

/* Hide price and add-to-cart — industrial products don't show pricing */
.pdp-related .wc-block-components-product-price,
.pdp-related .wc-block-components-product-button,
.pdp-related .wp-block-woocommerce-product-price,
.pdp-related .wp-block-woocommerce-product-button {
    display: none !important;
}

/* ==========================================================================
   PRODUCTS ARCHIVE  (/products/)  +  PRODUCT CATEGORY  (/product-category/*)
   --------------------------------------------------------------------------
   Ported from wordpress-handoff/products-f.html and category-gear.html.
   Demo tokens translated: --color-* -> --mm-color-*, --radius-* -> --mm-radius-*,
   --font-sans -> --mm-font-primary, 0.15s -> --mm-transition-fast.

   Everything is scoped under .mm-products-page / .mm-category-page. The demo
   authored these as bare global classes (.product-card, .container, .btn,
   .side-filter); this file is enqueued site-wide, so unscoped names would leak
   into every page and collide with plugin markup. The rest of the theme
   prefixes with mm- and that convention is kept here.

   NOT ported (dead under the native-Woo filtering decision):
     .product-card.is-hidden, [data-filter], [data-tech], [data-result-count]
     and the mockup's inline <script>.
   ========================================================================== */

/* ---- Section shells ---------------------------------------------------- */
/* Gutter: the theme sets useRootPaddingAwareAlignments but never defines
   styles.spacing.padding, so --wp--style--root--padding-* is empty and
   has-global-padding resolves to 0. Verified again 2026-08-04. Without this,
   alignfull sections run flush to the viewport edge below contentSize —
   same fix already carried by .pdp and .pdp-related. */
.mm-products-page,
.mm-category-page {
    padding: 2rem 1rem 6rem;
    background: var(--mm-color-neutral-50);
}
@media (min-width: 640px) {
    .mm-products-page,
    .mm-category-page { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .mm-products-page,
    .mm-category-page { padding-top: 2.5rem; padding-bottom: 8rem; }
}

/* ---- Page hero --------------------------------------------------------- */
.mm-page-hero {
    position: relative;
    overflow: hidden;
    padding: 1.6rem 1rem 1.9rem;
    text-align: center;
    background: linear-gradient(180deg, #eef0f2 0%, #e5e7eb 100%);
    color: var(--mm-color-neutral-900);
}
@media (min-width: 640px) {
    .mm-page-hero { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .mm-page-hero { padding-top: 1.9rem; padding-bottom: 2.3rem; }
}
.mm-page-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.mm-page-hero__inner {
    position: relative;
    z-index: 1;
}
/* Radial scrim so the streamline SVG stays legible behind the text */
.mm-page-hero__textwrap {
    position: relative;
    display: inline-block;
}
.mm-page-hero__textwrap::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 220%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(238, 240, 242, 0.95) 0%,
        rgba(238, 240, 242, 0.85) 45%,
        rgba(238, 240, 242, 0) 75%);
}
.mm-page-hero__title {
    margin-top: 0.5rem;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--mm-color-neutral-900);
}
@media (min-width: 640px)  { .mm-page-hero__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .mm-page-hero__title { font-size: 2.5rem; } }
.mm-page-hero__desc {
    margin: 0.6rem auto 0;
    max-width: 40rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--mm-color-neutral-600);
}
/* Breadcrumbs — category template only (category-gear.html:368-371) */
.mm-page-hero__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mm-color-neutral-500);
}
.mm-page-hero__crumbs a {
    color: var(--mm-color-neutral-500);
    text-decoration: none;
    transition: color var(--mm-transition-fast);
}
.mm-page-hero__crumbs a:hover { color: var(--mm-color-primary); }
.mm-page-hero__crumbs span { color: var(--mm-color-neutral-400); }

/* Product category archives only (user request 2026-10-06): description 60%
   wider (40rem → 64rem). Eyebrow label shown again 2026-10-08; breadcrumb
   hidden (re-hidden 2026-10-08 after a brief un-hide). */
body.tax-product_cat .mm-page-hero__crumbs { display: none; }
body.tax-product_cat .mm-page-hero__desc,
body.post-type-archive-product .mm-page-hero__desc { max-width: 64rem; } /* /products/ matches the categories (2026-10-12) */

/* ---- Inner container --------------------------------------------------- */
/* The mockup wraps these in .container (80rem + 1.5rem padding => 1232px of
   content). We deliberately align to the theme's contentSize (1280px) instead,
   because the header, footer, homepage and PDP are all built on it — matching
   the mockup here would put a visible 24px jog in the left edge when scrolling
   past the header. See PRODUCTS-PAGE-PLAN.md §6. */
.mm-products-page__layout,
.mm-page-hero__inner {
    max-width: var(--wp--style--global--content-size, 1280px);
    margin-left: auto;
    margin-right: auto;
}

/* ---- Layout: sidebar + grid -------------------------------------------- */
.mm-products-page__layout {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .mm-products-page__layout {
        grid-template-columns: 15rem 1fr;
        gap: 2.5rem;
        align-items: start;
    }
}

/* ---- Sidebar filter ---------------------------------------------------- */
.mm-side-filter {
    padding: 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-white);
}
/* Sticky offset must clear the theme's sticky header, which is taller than the
   mockup's 6rem and shifts 32/46px for logged-in users (body.admin-bar).
   --mm-header-height is defined in style.css alongside those rules. */
@media (min-width: 1024px) {
    .mm-side-filter {
        position: sticky;
        top: calc(var(--mm-header-height, 6rem) + 1rem);
    }
    body.admin-bar .mm-side-filter {
        top: calc(var(--mm-header-height, 6rem) + 1rem + 32px);
    }
}
.mm-side-filter__title {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-color-neutral-500);
}
.mm-side-filter__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mm-side-filter__list li { margin: 0; }
/* Authored for <button> in the mockup; rendered as <a> here (native Woo
   filtering = real category page loads). text-decoration and an explicit
   colour are required because theme.json sets elements.link.color.text to
   primary orange, which would otherwise win. */
.mm-side-filter__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 0;
    border-radius: var(--mm-radius-md);
    background: transparent;
    font-family: var(--mm-font-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: var(--mm-color-neutral-700);
    cursor: pointer;
    transition: background-color var(--mm-transition-fast), color var(--mm-transition-fast);
}
.mm-side-filter__btn:hover {
    background: var(--mm-color-neutral-100);
    color: var(--mm-color-neutral-900);
}
.mm-side-filter__btn[aria-current="page"],
.mm-side-filter__btn.is-active {
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
}
/* Label takes the slack so every label starts on the same left edge and every
   count pill lines up in a column down the right. flex:1 on the label (rather
   than relying on justify-content alone) also means a stray node in the markup
   can never redistribute the free space and knock the columns out of true. */
.mm-side-filter__btn > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.mm-side-filter__count {
    flex: 0 0 auto;
    /* Wide enough that a two-digit count still fits inside the min-width, so every
       pill is exactly the same size and the numbers form a true column. At 1.85rem
       the "24" pill outgrew the single-digit ones by 1.76px. */
    min-width: 2rem;
    padding: 0.05rem 0.5rem;
    border-radius: var(--mm-radius-full);
    background: var(--mm-color-neutral-100);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--mm-color-neutral-600);
}
.mm-side-filter__btn[aria-current="page"] .mm-side-filter__count,
.mm-side-filter__btn.is-active .mm-side-filter__count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--mm-color-white);
}

/* ---- Result count line ------------------------------------------------- */
/* ---- Card grids -------------------------------------------------------- */
/* Note the 3-column breakpoints differ between the two mockups:
   products-f grid goes 3-up at 1280px; category-gear at 1024px with a wider
   gap. Kept as authored rather than unified. */
.mm-products-page__grid,
.mm-category-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .mm-products-page__grid,
    .mm-category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
    .mm-products-page__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .mm-category-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* ---- Product card ----------------------------------------------------- */
.mm-pcard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-2xl);
    background: var(--mm-color-white);
    transition: border-color var(--mm-transition-normal), box-shadow var(--mm-transition-normal);
}
.mm-pcard:hover {
    border-color: rgba(242, 122, 33, 0.3);
    box-shadow: var(--mm-shadow-xl);
}
/* 14rem, not the base mockup's 20.25rem — products-f.html:362 and
   category-gear.html:375 both override it for the archive grids. */
.mm-pcard__image {
    position: relative;
    height: 14rem;
    overflow: hidden;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mm-color-neutral-100);
}
.mm-pcard__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--mm-transition-normal);
    /* The catalogue's product shots are opaque 310x310 JPGs on white, whereas the
       mockup used transparent PNGs — so they render as a visible white box inside
       the grey plate. multiply drops the white to transparent against the plate.
       Revisit once PRODUCT-IMAGE-CLEANUP.md lands and the sources are known. */
    mix-blend-mode: multiply;
}
.mm-pcard:hover .mm-pcard__image img { transform: scale(1.05); }
.mm-pcard__apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 0.5rem;
    min-height: 5.5rem;
    padding: 1rem 1.5rem 0.75rem;
}
.mm-pcard__app {
    padding: 0.25rem 0.5rem;
    border-radius: var(--mm-radius-full);
    background: var(--mm-color-neutral-100);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    color: var(--mm-color-neutral-700);
}
.mm-pcard__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}
/* The pills' own bottom padding is enough space above the name. Without pills
   (/products/ + category archives since 2026-10-08) the default 1.5rem applies. */
.mm-pcard__apps + .mm-pcard__content { padding-top: 0; }
.mm-pcard__name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--mm-color-neutral-900);
}
.mm-pcard__name a {
    color: inherit;
    text-decoration: none;
}
.mm-pcard__name a:hover { color: var(--mm-color-primary); }
.mm-pcard__category {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--mm-color-neutral-400);
    transition: color var(--mm-transition-fast);
}
.mm-pcard__category:hover { color: var(--mm-color-primary); }
.mm-pcard__specs {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--mm-color-neutral-100);
}
.mm-pcard__spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}
.mm-pcard__spec:first-child { margin-top: 0; }
/* /products/ + category archives: 40% tighter than the default 0.5rem. */
.mm-products-page .mm-pcard__spec:not(:first-child),
.mm-category-page .mm-pcard__spec:not(:first-child) { margin-top: 0.3rem; }
.mm-pcard__spec-label {
    flex: none;
    color: var(--mm-color-neutral-500);
}
/* Real catalogue values are far longer than the mockup's ("±1.0% of reading
   over a 100:1 range" vs "±0.1%"). Truncate rather than wrap, so an
   over-long value degrades predictably instead of making the grid ragged. */
.mm-pcard__spec-value {
    min-width: 0;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mm-color-neutral-900);
}
.mm-pcard__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mm-color-primary);
    transition: color var(--mm-transition-fast);
}
.mm-pcard__link:hover { color: var(--mm-color-primary-dark); }
.mm-pcard__link::after {
    content: '\203A';
    font-size: 1.1em;
    line-height: 1;
}
/* /products/ + category archives: whole card clickable (user request 2026-10-06).
   Stretched-link pattern — the name's link covers the card, so there is still a
   single link per card for screen readers. The category link sits above it. */
.mm-products-page .mm-pcard,
.mm-category-page .mm-pcard { position: relative; }
.mm-products-page .mm-pcard__name a::after,
.mm-category-page .mm-pcard__name a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.mm-products-page .mm-pcard__category,
.mm-category-page .mm-pcard__category { position: relative; z-index: 2; }

/* ==========================================================================
   APPLICATIONS ARCHIVE  (/applications/)
   --------------------------------------------------------------------------
   Ported from wordpress-handoff/applications.html (12 rules), mm- namespaced
   for the same reason as the products page: this file loads site-wide, so the
   demo's bare .app-tile would be a global selector.

   Unlike the products page: background is WHITE (not neutral-50) and the grid
   deliberately caps at 2 columns even at >=1024 — six large 16:10 tiles in
   three rows, per the demo.
   ========================================================================== */

.mm-applications-page {
    padding: 3.5rem 1rem 5rem;
    background: var(--mm-color-white);
}
@media (min-width: 640px) {
    .mm-applications-page { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .mm-applications-page { padding-top: 4.5rem; padding-bottom: 6rem; }
}
/* Same 1280px system as the rest of the site (not the demo's 1232px container) */
.mm-applications-page__inner {
    max-width: var(--wp--style--global--content-size, 1280px);
    margin-left: auto;
    margin-right: auto;
}

.mm-applications-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .mm-applications-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .mm-applications-grid { gap: 1.75rem; }
}

.mm-apptile {
    display: block;
    overflow: hidden;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-2xl);
    background: var(--mm-color-white);
    text-decoration: none;
    transition: box-shadow var(--mm-transition-normal), border-color var(--mm-transition-normal);
}
.mm-apptile:hover,
.mm-apptile:focus-visible {
    box-shadow: var(--mm-shadow-lg);
    border-color: rgba(242, 122, 33, 0.3);
}
.mm-apptile__img-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.mm-apptile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.mm-apptile:hover .mm-apptile__img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .mm-apptile__img,
    .mm-apptile:hover .mm-apptile__img { transition: none; transform: none; }
}
.mm-apptile__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.35rem;
}
.mm-apptile__name {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mm-color-neutral-900);
}
.mm-apptile__view {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    /* Matches .mm-apptile__name so "View ›" reads at the same size as the
       category name (user request 2026-08-27). */
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mm-color-primary);
}
.mm-apptile__view::after {
    content: '\203A';
    font-size: 1.15em;
    line-height: 1;
    transition: transform var(--mm-transition-normal);
}
.mm-apptile:hover .mm-apptile__view::after { transform: translateX(3px); }

/* ==========================================================================
   APPLICATION SINGLE  (/applications/[slug]/)  +  CATEGORY  (/application-category/*)
   --------------------------------------------------------------------------
   Ported from wordpress-handoff/application-def-adblue-v2.html, mm- namespaced.
   NOT ported: .rec-card* and .apd__side/.apd-side-card* — zero markup usages
   in the v2 mockup (v1 leftovers), and .rec-card:hover references a --shadow-sm
   the mockup never defines.

   The switcher is a native <details> shipped with the `open` attribute:
   closed-details content cannot be forced visible with CSS, so desktop hides
   the summary and shows the list; mobile starts open (the six links are never
   behind a script) and stays collapsible via the summary.
   ========================================================================== */

/* ---- Section shell ------------------------------------------------------ */
.mm-apd {
    padding: 2.5rem 1rem 4rem;
    background: var(--mm-color-white);
}
@media (min-width: 640px) {
    .mm-apd { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.mm-apd__inner {
    max-width: var(--wp--style--global--content-size, 1280px);
    margin-left: auto;
    margin-right: auto;
}

/* Crumbs — below the hero per this design (products pages carry theirs inside it) */
.mm-apd__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mm-color-neutral-500);
}
.mm-apd__crumbs a {
    color: var(--mm-color-neutral-500);
    text-decoration: none;
    transition: color var(--mm-transition-fast);
}
.mm-apd__crumbs a:hover { color: var(--mm-color-primary); }
.mm-apd__crumbs span { color: var(--mm-color-neutral-400); }

/* ---- Layout: 14rem switcher + main @960 (demo breakpoint kept) ---------- */
.mm-apd__layout {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 960px) {
    .mm-apd__layout {
        grid-template-columns: 14rem 1fr;
        gap: 2.5rem;
        align-items: start;
    }
}

/* ---- Category switcher (native details) --------------------------------- */
.mm-app-switch-wrap { margin-bottom: 1.75rem; }
.mm-app-switch__title {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-color-neutral-500);
}
.mm-app-switch__current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--mm-color-primary);
    border-radius: var(--mm-radius-lg);
    background: var(--mm-color-white);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mm-color-neutral-900);
    cursor: pointer;
    list-style: none; /* hide the default marker */
}
.mm-app-switch__current::-webkit-details-marker { display: none; }
.mm-app-switch__current::after {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    flex: 0 0 auto;
    border-right: 2px solid var(--mm-color-neutral-500);
    border-bottom: 2px solid var(--mm-color-neutral-500);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--mm-transition-normal);
}
.mm-app-switch[open] > .mm-app-switch__current::after {
    transform: rotate(225deg) translateY(-2px);
}
.mm-app-switch__list {
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-lg);
    overflow: hidden;
    background: var(--mm-color-white);
    box-shadow: var(--mm-shadow-lg);
}
.mm-app-switch__list li { margin: 0; }
.mm-app-switch__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--mm-color-neutral-100);
    border-left: 3px solid transparent;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--mm-color-neutral-700);
    transition: background-color var(--mm-transition-fast);
}
.mm-app-switch__list li:last-child .mm-app-switch__link { border-bottom: 0; }
.mm-app-switch__link:hover { background: var(--mm-color-neutral-50); }
.mm-app-switch__link.is-active,
.mm-app-switch__link[aria-current="page"] {
    background: #FEF1E7;
    color: var(--mm-color-primary);
    font-weight: 700;
    border-left-color: var(--mm-color-primary);
}
/* Desktop: sidebar card, summary hidden, sticky under the real header height */
@media (min-width: 960px) {
    .mm-app-switch-wrap {
        position: sticky;
        top: calc(var(--mm-header-height, 6rem) + 1rem);
        margin-bottom: 0;
        padding: 1.25rem;
        border: 1px solid var(--mm-color-neutral-200);
        border-radius: var(--mm-radius-xl);
        background: var(--mm-color-white);
    }
    body.admin-bar .mm-app-switch-wrap {
        top: calc(var(--mm-header-height, 6rem) + 1rem + 32px);
    }
    .mm-app-switch__title { margin-bottom: 0.75rem; }
    .mm-app-switch__current { display: none; }
    .mm-app-switch__list {
        gap: 0.25rem;
        margin-top: 0;
        border: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }
    .mm-app-switch__link {
        width: 100%;
        padding: 0.6rem 0.85rem;
        border: 0;
        border-radius: var(--mm-radius-md);
        font-size: 0.9375rem;
    }
    .mm-app-switch__link.is-active,
    .mm-app-switch__link[aria-current="page"] {
        background: var(--mm-color-primary);
        color: var(--mm-color-white);
    }
}

/* ---- Article body -------------------------------------------------------- */
.mm-apd__figure {
    aspect-ratio: 16 / 9;
    margin-bottom: 2rem;
    border-radius: var(--mm-radius-lg);
    overflow: hidden;
    background: var(--mm-color-neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mm-apd__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mm-apd__lead {
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mm-color-neutral-900);
}
.mm-apd__body p {
    margin-top: 1.1rem;
    line-height: 1.8;
    color: var(--mm-color-neutral-700);
}
.mm-apd__h {
    margin: 2.5rem 0 0;
    font-size: 0.8125rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-color-primary);
    line-height: 1.4;
}
.mm-apd__h + p { margin-top: 0.6rem; }
.mm-apd__body ul {
    margin: 1.1rem 0 0 1.25rem;
    padding: 0;
    line-height: 1.8;
    color: var(--mm-color-neutral-700);
}
/* Benefits checklist — checkmark via CSS mask, no DOM surgery */
.mm-apd__body ul.mm-apd__benefits {
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    list-style: none;
}
.mm-apd__benefits li {
    display: flex;
    gap: 0.75rem;
    line-height: 1.6;
    color: var(--mm-color-neutral-700);
}
.mm-apd__benefits li::before {
    content: '';
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    background-color: var(--mm-color-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Recommended meters — reuses mm-pcard with two scoped overrides ------ */
.mm-apd__rec {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 560px) {
    .mm-apd__rec { grid-template-columns: repeat(2, 1fr); }
}
.mm-apd__rec .mm-pcard__image { height: 13rem; }
.mm-apd__rec .mm-pcard__content { padding: 1.25rem 1.5rem 1.5rem; }

/* ---- CTA band ------------------------------------------------------------ */
.mm-apd-cta {
    margin-top: 3rem;
    padding: 2rem;
    border-radius: var(--mm-radius-2xl);
    background: var(--mm-color-primary-light);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.mm-apd-cta__title {
    margin: 0;
    font-size: 1.25rem !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mm-color-neutral-900);
}
.mm-apd-cta__desc {
    margin: 0.4rem 0 0;
    max-width: 30rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mm-color-neutral-600);
}
.mm-apd-cta__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.mm-apd-cta__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.6rem;
    border-radius: var(--mm-radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--mm-transition-fast), color var(--mm-transition-fast), border-color var(--mm-transition-fast);
}
.mm-apd-cta__btn--primary {
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
}
.mm-apd-cta__btn--primary:hover { background: var(--mm-color-primary-dark); }
.mm-apd-cta__btn--outline {
    border: 1px solid var(--mm-color-neutral-200);
    background: var(--mm-color-white);
    color: var(--mm-color-neutral-900);
}
.mm-apd-cta__btn--outline:hover { border-color: var(--mm-color-primary); color: var(--mm-color-primary); }

/* ---- Related applications ------------------------------------------------ */
.mm-apd-related {
    padding: 4rem 1rem 6rem;
    background: var(--mm-color-neutral-50);
}
@media (min-width: 640px) {
    .mm-apd-related { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.mm-apd-related__title {
    margin: 0 0 2rem;
    font-size: 1.5rem !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mm-color-neutral-900);
}
.mm-apd-related__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .mm-apd-related__grid { grid-template-columns: repeat(3, 1fr); }
}
.mm-apd-rel {
    display: block;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-2xl);
    overflow: hidden;
    background: var(--mm-color-white);
    text-decoration: none;
    transition: box-shadow var(--mm-transition-normal), border-color var(--mm-transition-normal);
}
.mm-apd-rel:hover,
.mm-apd-rel:focus-visible {
    box-shadow: var(--mm-shadow-lg);
    border-color: rgba(242, 122, 33, 0.3);
}
.mm-apd-rel__img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--mm-color-neutral-100);
}
.mm-apd-rel__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.mm-apd-rel:hover .mm-apd-rel__img img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .mm-apd-rel__img img,
    .mm-apd-rel:hover .mm-apd-rel__img img { transition: none; transform: none; }
}
.mm-apd-rel__body { padding: 1.1rem 1.35rem; }
.mm-apd-rel__cat {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mm-color-primary);
}
.mm-apd-rel__name {
    margin-top: 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mm-color-neutral-900);
}
.mm-apd-rel__desc {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--mm-color-neutral-600);
}
.mm-apd-rel__view {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mm-color-primary);
}
.mm-apd-rel__view::after {
    content: '\203A';
    font-size: 1.15em;
    line-height: 1;
    transition: transform var(--mm-transition-fast);
}
.mm-apd-rel:hover .mm-apd-rel__view::after { transform: translateX(3px); }

/* ---- Category page: count line + 2-up tile grid -------------------------- */
.mm-apd__count {
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    color: var(--mm-color-neutral-500);
}
.mm-apd-cat-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .mm-apd-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ABOUT PAGE (page-about-us.html) — ported from wordpress-handoff/about.html
   ========================================================================== */

/* ---- Heritage stats — 3-across at every width (mockup has no stacking) -- */
.wp-block-group.mm-about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.mm-about-stats > * { margin-block-start: 0 !important; }
.mm-about-stat-value {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mm-color-neutral-900);
}
.mm-about-stat-label {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mm-color-neutral-500);
}

/* ---- Heritage figure — 16:9 letterbox the image block can't do itself --- */
.mm-about-figure {
    aspect-ratio: 16 / 9;
    border-radius: var(--mm-radius-lg);
    overflow: hidden;
    background: #F3F4F6;
}
.mm-about-figure figure {
    margin: 0;
    width: 100%;
    height: 100%;
}
.mm-about-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- ISO / NIST badge — fixed box + centering (no core dimensions) ------ */
.wp-block-group.mm-quality-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 9rem;
    height: 9rem;
    padding: 1rem 0.5rem;
    border-radius: var(--mm-radius-2xl);
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
    text-align: center;
    box-shadow: var(--mm-shadow-lg);
}
.mm-quality-badge > * { margin-block-start: 0 !important; }
.mm-quality-badge__top {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mm-color-white);
    opacity: 0.85;
}
.mm-quality-badge__main {
    margin: 0.25rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mm-color-white);
    white-space: nowrap;
}
@media (max-width: 781px) {
    /* Stacked columns: keep the badge centered like the mockup's mobile view */
    .wp-block-group.mm-quality-badge { margin-left: auto; margin-right: auto; }
}

/* ---- Team grid — explicit breakpoints, NOT core grid layout (which
        auto-fits 5+ columns at 1280px); mirrors .mm-logo-card-grid --------- */
.wp-block-group.mm-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .wp-block-group.mm-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .wp-block-group.mm-team-grid { grid-template-columns: repeat(4, 1fr); }
}
.mm-team-grid > * { margin-block-start: 0 !important; }

.wp-block-group.mm-team-card {
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-2xl);
    background: var(--mm-color-white);
    text-align: center;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.mm-team-card:hover {
    box-shadow: var(--mm-shadow-md);
    border-color: rgba(242, 122, 33, 0.3);
}
/* Circular avatar — object-position has no block attribute (counselor F5) */
.mm-team-card .mm-team-avatar {
    width: 7rem;
    height: 7rem;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}
.mm-team-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}
.mm-team-card__name {
    margin: 1rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mm-color-neutral-900);
}
.mm-team-card__role {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mm-color-primary);
}

/* ==========================================================================
   CONTACT PAGE (page-contact-max-precision-flow-meters.html)
   Ported from wordpress-handoff/contact.html — info column + GF form 1.
   ========================================================================== */

.wp-block-group.mm-contact-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}
@media (min-width: 900px) {
    .wp-block-group.mm-contact-top { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.mm-contact-top > * { margin-block-start: 0 !important; }

/* ---- Info column (children keep their own top margins — no flow-kill) --- */
.mm-contact-info__label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-color-neutral-500);
}
.mm-contact-info__company {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mm-color-neutral-900);
}
.mm-contact-info__addr {
    margin: 0.75rem 0 0;
    line-height: 1.8;
    color: var(--mm-color-neutral-700);
}
.mm-contact-info__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mm-color-primary);
    text-decoration: none;
}
.mm-contact-info__phone svg { width: 1.15rem; height: 1.15rem; }
.mm-contact-info__hours {
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mm-color-neutral-200);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--mm-color-neutral-600);
}
.mm-contact-info__hours strong { color: var(--mm-color-neutral-900); }
.mm-contact-info__rfq {
    margin: 1rem 0 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--mm-color-neutral-600);
}
.mm-contact-info__rfq a { color: var(--mm-color-primary); font-weight: 600; }

/* ---- Form card ---------------------------------------------------------- */
.wp-block-group.mm-contact-form {
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-2xl);
    background: var(--mm-color-white);
    padding: 2rem;
    box-shadow: var(--mm-shadow-sm);
}
.mm-contact-form__title {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mm-color-neutral-900);
}

/* ---- Gravity Forms overrides (form 1: name/phone/email half-width) ------ */
.mm-contact-form .gform_wrapper { margin: 0; }
.mm-contact-form .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 560px) {
    .mm-contact-form .gform_wrapper .gform_fields { grid-template-columns: 1fr 1fr; }
    .mm-contact-form .gfield--type-textarea,
    .mm-contact-form .gfield--type-html,
    .mm-contact-form .gfield--type-captcha { grid-column: 1 / -1; }
}
.mm-contact-form .gfield { margin: 0; }
.mm-contact-form .gfield_label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mm-color-neutral-700);
}
.mm-contact-form .gfield_required { color: var(--mm-color-primary); }
.mm-contact-form .gfield input[type="text"],
.mm-contact-form .gfield input[type="tel"],
.mm-contact-form .gfield input[type="email"],
.mm-contact-form .gfield textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--mm-color-neutral-900);
    background: var(--mm-color-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-contact-form .gfield input:focus,
.mm-contact-form .gfield textarea:focus {
    outline: none;
    border-color: var(--mm-color-primary);
    box-shadow: 0 0 0 3px rgba(242, 122, 33, 0.12);
}
/* GF renders the textarea ~330px tall via its rows attr — cap at half that */
.mm-contact-form .gfield textarea { height: 10rem; min-height: 7rem; resize: vertical; }
/* Consent note (HTML field inside the form) */
.mm-contact-form .gfield--type-html {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--mm-color-neutral-500);
}
.mm-contact-form .gfield--type-html a { color: var(--mm-color-primary); }
.mm-contact-form .gform_footer { margin: 1.25rem 0 0; padding: 0; }
.mm-contact-form .gform_footer input[type="submit"],
.mm-contact-form .gform_footer button {
    width: 100%;
    padding: 1rem 2rem;
    border: 0;
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--mm-transition-fast);
}
.mm-contact-form .gform_footer input[type="submit"]:hover,
.mm-contact-form .gform_footer button:hover {
    background: var(--mm-color-primary-dark);
}
/* GF validation states — keep the brand palette */
.mm-contact-form .gform_wrapper .gfield_error input,
.mm-contact-form .gform_wrapper .gfield_error textarea {
    border-color: #dc2626;
}
.mm-contact-form .gform_wrapper .validation_message {
    font-size: 0.75rem;
    color: #dc2626;
    padding: 0.25rem 0 0;
    background: none;
    border: 0;
}

/* Form title — theme h2 global styles (48px) out-specify a bare class */
.mm-contact-form h2.mm-contact-form__title {
    font-size: 1.25rem !important;
    line-height: 1.3;
    margin: 0 0 1.25rem;
}

/* wpautop wraps GF's hidden footer inputs in <p> + <br> (230px of phantom
   height). Hidden inputs still submit; only the rendered artifacts go. */
.mm-contact-form .gform_footer br { display: none; }
.mm-contact-form .gform_footer p { margin: 0; }


/* ==========================================================================
   DISTRIBUTION PAGE (page-distribution.html)
   Ported from wordpress-handoff/contact.html (Global Distribution +
   Worldwide Representation sections). Map JS: assets/js/world-map.js.
   ========================================================================== */

/* ---- World map (d3) — .world-map__pin / #map-tooltip names are used by JS */
.mm-world-map-wrap {
    position: relative;
    max-width: 62rem;
    margin: 0 auto 2.5rem;
}
.world-map__pin {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--mm-color-primary);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    cursor: pointer;
}
.world-map__pin::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: rgba(242, 122, 33, 0.25);
    animation: mmPinPulse 2s ease-out infinite;
}
@keyframes mmPinPulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(2.2); opacity: 0; }
}
#map-tooltip {
    position: fixed;
    z-index: 100;
    background: var(--mm-color-neutral-900);
    color: #fff;
    border-radius: var(--mm-radius-lg);
    padding: 0.75rem 1rem;
    min-width: 13rem;
    max-width: 18rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    font-size: 0.8125rem;
    line-height: 1.5;
}
/* Interactive while shown so its link can be hovered and clicked */
#map-tooltip.is-visible { opacity: 1; pointer-events: auto; }
#map-tooltip .tt-name  { font-weight: 700; font-size: 0.875rem; color: #fff; margin-bottom: 0.4rem; }
#map-tooltip .tt-addr  { color: var(--mm-color-neutral-400); margin-bottom: 0.4rem; }
#map-tooltip .tt-site  { color: var(--mm-color-primary); font-weight: 600; text-decoration: none; display: block; }
#map-tooltip .tt-site:hover { color: #f9a55a; }
#map-tooltip .tt-phone { color: var(--mm-color-neutral-300); margin-top: 0.25rem; display: block; }
/* State name above the office name — confirms which state was actually hit when
   the cursor is near a border, which matters most for the small eastern states. */
#map-tooltip .tt-region {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mm-color-primary);
    margin-bottom: 0.2rem;
}

/* ---- US sales territories on the world map -------------------------------
   The .us-state paths world-map.js already draws for state borders double as
   the hover targets for the territory popups. Zoom in on North America to
   enlarge the smaller eastern states. */
.us-state {
    pointer-events: all;   /* see the fill: transparent note in world-map.js */
    cursor: pointer;
}
.us-state:hover { fill: rgba(242, 122, 33, 0.14); }
/* Overlay group: appended after the states inside the same zoomed group, so it
   paints on top and pans with them, and is transparent to the pointer so it
   cannot steal the hover that drew it. */
.mm-us-highlight { pointer-events: none; }
.mm-us-highlight__shape {
    fill: rgba(242, 122, 33, 0.14);
    stroke: var(--mm-color-primary);
    stroke-width: 1.5;
    stroke-linejoin: round;
    /* Keeps the outline hairline-thin at 8x zoom instead of rendering 12px. */
    vector-effect: non-scaling-stroke;
}

/* Territory list on each partner card. Carries the state→office mapping as real
   text, so it is available to keyboard and screen-reader users and on phones,
   where the map is not rendered. */
.mm-partner-card__states {
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--mm-color-neutral-100);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mm-color-neutral-600);
}
.mm-partner-card__states strong {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mm-color-neutral-500);
    margin-bottom: 0.25rem;
}
/* Factory Direct covers 31 states, so its list collapses to keep the four cards
   the same height. The states stay in the DOM either way, so crawlers and
   screen readers still get them. */
details.mm-partner-card__states > summary {
    cursor: pointer;
    list-style: none;
}
details.mm-partner-card__states > summary::-webkit-details-marker { display: none; }
details.mm-partner-card__states > summary strong { margin-bottom: 0; }
details.mm-partner-card__states > summary strong::after {
    content: ' +';
    color: var(--mm-color-primary);
}
details.mm-partner-card__states[open] > summary strong { margin-bottom: 0.25rem; }
details.mm-partner-card__states[open] > summary strong::after { content: ' −'; }

/* ---- US partner cards — 1 → 2 → 4 columns -------------------------------- */
.wp-block-group.mm-partners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .wp-block-group.mm-partners-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .wp-block-group.mm-partners-grid { grid-template-columns: repeat(4, 1fr); }
}
.mm-partners-grid > * { margin-block-start: 0 !important; }
.wp-block-group.mm-partner-card {
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-white);
    padding: 1.5rem;
}
.mm-partner-card__region {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mm-color-primary);
}
.mm-partner-card__name  { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--mm-color-neutral-900); }
.mm-partner-card__web   { margin: 0.5rem 0 0; font-size: 0.85rem; font-weight: 600; }
.mm-partner-card__web a { color: var(--mm-color-primary); text-decoration: none; }
.mm-partner-card__addr  { margin: 0.6rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--mm-color-neutral-600); }
.mm-partner-card__phone { margin: 0.6rem 0 0; font-size: 0.9rem; font-weight: 600; }
.mm-partner-card__phone a { color: var(--mm-color-neutral-900); text-decoration: none; }

/* ---- International cards — 1 → 2 → 3 columns ----------------------------- */
.wp-block-group.mm-intl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 560px) {
    .wp-block-group.mm-intl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .wp-block-group.mm-intl-grid { grid-template-columns: repeat(3, 1fr); }
}
.mm-intl-grid > * { margin-block-start: 0 !important; }
.wp-block-group.mm-intl-card {
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-lg);
    background: var(--mm-color-white);
    padding: 1.25rem;
}
.mm-intl-card__country { margin: 0; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mm-color-primary); }
.mm-intl-card__name    { margin: 0.35rem 0 0; font-size: 0.95rem; font-weight: 700; }
.mm-intl-card__name a  { color: var(--mm-color-neutral-900); text-decoration: none; }
.mm-intl-card__name a:hover { color: var(--mm-color-primary); }
.mm-intl-card__addr    { margin: 0.4rem 0 0; font-size: 0.825rem; line-height: 1.55; color: var(--mm-color-neutral-600); }
.mm-intl-card__phone   { margin: 0.5rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--mm-color-neutral-700); }

/* ---- "All other countries" note ------------------------------------------ */
.wp-block-group.mm-intl-note {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-primary-light);
    text-align: center;
}
.mm-intl-note__title { margin: 0; font-weight: 700; color: var(--mm-color-neutral-900); }
.mm-intl-note__text  { margin: 0.3rem 0 0; font-size: 0.95rem; color: var(--mm-color-neutral-700); }
.mm-intl-note__text a { color: var(--mm-color-primary); font-weight: 700; }

/* ---- Map zoom (d3.zoom) --------------------------------------------------
   Panned/zoomed map + pins clip to the rounded wrap; +/−/reset controls. */
.mm-world-map-wrap {
    overflow: hidden;
    border-radius: 12px;
}
.mm-map-zoom {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.mm-map-zoom button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: 0.5rem;
    background: var(--mm-color-white);
    color: var(--mm-color-neutral-700);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--mm-shadow-sm);
    transition: color var(--mm-transition-fast), border-color var(--mm-transition-fast);
}
.mm-map-zoom button:hover {
    color: var(--mm-color-primary);
    border-color: var(--mm-color-primary);
}

/* ==========================================================================
   GENERIC PAGE TEMPLATE (page.html) + LEGACY CONTENT
   Shell for imported pages that have no bespoke template yet. Content
   typography defaults so old post_content reads reasonably.
   ========================================================================== */

.mm-plain-page .wp-block-post-content > p {
    line-height: 1.75;
    color: var(--mm-color-neutral-700);
    margin-bottom: 1rem;
}
.mm-plain-page .wp-block-post-content a { color: var(--mm-color-primary); }
.mm-plain-page .wp-block-post-content h2,
.mm-plain-page .wp-block-post-content h3,
.mm-plain-page .wp-block-post-content h4 {
    margin: 1.5rem 0 0.75rem;
    color: var(--mm-color-neutral-900);
}

/* ---- Fluid Compatibility Chart (page 158) --------------------------------
   The .table-chart markup lives in imported post_content. Originally ported
   verbatim from the live Astra child stylesheet; reskinned 2026-08-13 to the
   new design system (rounded cards, brand orange, neutral borders). The
   pastel per-material column colors are kept — they are functional coding.
   Functional rules (column widths, overflow) unchanged. */
.table-chart { padding: 30px 0; }

/* Head + body render as two stacked cards */
.table-chart .table__head {
    margin-bottom: 1rem;
    overflow: auto;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-white);
}
.table-chart .table__head a { color: var(--mm-color-primary); text-decoration: none; }
.table-chart .table__body {
    max-height: 600px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-white);
}
.table-chart .table__head table { table-layout: fixed; }
.table-chart table { width: 99.999%; table-layout: auto; border-collapse: collapse; }

/* Column widths (functional, unchanged) */
.table-chart tbody td:first-child { width: 22%; }
.table-chart tbody td:nth-child(2) { width: 23%; }
.table-chart tbody td:nth-child(3),
.table-chart tbody td:nth-child(4) { width: 10%; }

/* Borders: containers own the outer edge; cells only draw light internal lines */
.table-chart thead th {
    border: 0;
    border-bottom: 1px solid var(--mm-color-neutral-200);
    border-right: 1px solid var(--mm-color-neutral-100);
    color: var(--mm-color-neutral-900);
}
.table-chart thead th:last-child { border-right: 0; }
.table-chart tbody td {
    border: 0;
    border-bottom: 1px solid var(--mm-color-neutral-100);
    color: var(--mm-color-neutral-700);
}
.table-chart tbody tr:last-child td { border-bottom: 0; }
.table-chart tbody td:first-child { font-weight: 600; color: var(--mm-color-neutral-900); }

/* Letter section rows */
.table-chart tbody td.heading {
    border: none;
    color: var(--mm-color-primary);
    padding: 14px 7px 6px;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.table-chart th { padding: 8px 10px; text-align: left; font-size: 14px; font-weight: 600; line-height: 1.3; }
.table-chart th span { font-size: 11px; font-weight: 400; color: var(--mm-color-neutral-500); }
.table-chart th a { color: var(--mm-color-primary); font-size: 16px; text-decoration: none; font-weight: 400; }

/* Jump nav — pill buttons */
.table-chart .table__nav { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.table-chart .table__nav span {
    margin-right: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mm-color-neutral-500);
}
.table-chart .table__nav ul { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style-type: none; margin: 0; padding: 0; }
.table-chart .table__nav ul li + li { border-left: 0; }
.table-chart .table__nav legend { width: 100%; }
.table-chart .table__nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-white);
    color: var(--mm-color-neutral-700);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--mm-transition-fast), border-color var(--mm-transition-fast), background-color var(--mm-transition-fast);
}
.table-chart .table__nav a:hover {
    color: var(--mm-color-primary);
    border-color: var(--mm-color-primary);
    background: var(--mm-color-primary-light);
}

.table-chart td { padding: 8px 10px; font-size: 14px; font-weight: 500; }

/* Row hover — uniform tint that also works over the pastel columns */
.table-chart .table__body tr:hover td:not(.heading) {
    box-shadow: inset 0 0 0 999px rgba(242, 122, 33, 0.06);
}

/* Per-material column coding (functional, unchanged) */
.table-chart td:nth-child(5)  { background-color: #f0e7db; }
.table-chart td:nth-child(6)  { background-color: #dfffff; }
.table-chart td:nth-child(7)  { background-color: #fff2ca; }
.table-chart td:nth-child(8)  { background-color: #ebebeb; }
.table-chart td:nth-child(9)  { background-color: #f0f0ff; }
.table-chart td:nth-child(10) { background-color: #ffe1eb; }
.table-chart td:nth-child(11) { background-color: #e6ffdf; }
.table-chart td:nth-child(12) { background-color: #ffd291; }
.table-chart td:nth-child(13) { background-color: #b3d9ff; }
.table-chart td:nth-child(14) { background-color: #f2ccff; }

/* Slim scrollbars on the scroll body */
.table-chart .table__body::-webkit-scrollbar { width: 8px; height: 8px; }
.table-chart .table__body::-webkit-scrollbar-thumb {
    background: var(--mm-color-neutral-300);
    border-radius: 4px;
}
.table-chart .table__body::-webkit-scrollbar-thumb:hover { background: var(--mm-color-neutral-400); }
.table-chart .table__body::-webkit-scrollbar-track { background: var(--mm-color-neutral-50); }

/* ==========================================================================
   DOWNLOADS DOCUMENTS PAGE (page 6201, /downloads-documents/)
   Product document tables extracted from live /downloads/ (bottom section),
   restyled to the new design system. PDF hrefs point at the live domain —
   the files were never migrated to staging; search-replace at launch.
   ========================================================================== */

.mm-docs-table {
    margin: 1.5rem 0;
    overflow-x: auto;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-white);
}
.mm-docs-table table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    margin: 0;
    /* Fixed layout so every table on the page shares identical column
       positions (Accessories and Discontinued line up exactly). */
    table-layout: fixed;
}
.mm-docs-table th:first-child,
.mm-docs-table td:first-child { width: 36%; }
.mm-docs-table th {
    background: var(--mm-color-neutral-50);
    padding: 10px 14px;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mm-color-neutral-700);
    border-bottom: 1px solid var(--mm-color-neutral-200);
}
.mm-docs-table th:first-child {
    color: var(--mm-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.mm-docs-table td {
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--mm-color-neutral-700);
    border-bottom: 1px solid var(--mm-color-neutral-100);
}
.mm-docs-table tr:last-child td { border-bottom: 0; }
.mm-docs-table td:first-child strong { font-weight: 600; color: var(--mm-color-neutral-900); }
.mm-docs-table tbody tr:hover td { background: rgba(242, 122, 33, 0.04); }

/* Sub-headline rows inside a table (Accessories groups) */
.mm-docs-table td.mm-docs-subhead {
    width: auto;
    padding: 14px 14px 6px;
    color: var(--mm-color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--mm-color-neutral-100);
}
.mm-docs-table tr.mm-docs-subhead-row:hover td { background: transparent; }

/* PDF pill links */
.mm-doc-link {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    color: var(--mm-color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: border-color var(--mm-transition-fast), background-color var(--mm-transition-fast);
}
.mm-doc-link:hover {
    background: var(--mm-color-primary-light);
    border-color: var(--mm-color-primary);
}
.mm-doc-link + .mm-doc-link { margin-left: 0.35rem; }

/* Discontinued section heading (theme h2 default is 48px fluid) */
.mm-plain-page .wp-block-post-content h2.mm-docs-discontinued-h {
    font-size: 1.5rem !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 2.5rem 0 0.5rem;
}

/* ---- Downloads page (page 28) — section headings, note box, 2-col tables */
.mm-plain-page .wp-block-post-content h2.mm-docs-h {
    font-size: 1.5rem !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 2.5rem 0 0.5rem;
}
.mm-plain-page .wp-block-post-content h3.mm-docs-h3 {
    font-size: 1.125rem !important;
    font-weight: 700;
    margin: 2rem 0 0.25rem;
}
.mm-docs-note {
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-primary-light);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mm-color-neutral-700);
}
.mm-docs-note strong { color: var(--mm-color-neutral-900); }
/* Small name+link tables: give the name column the room instead of 36% */
.mm-docs-table table.mm-2col { min-width: 0; }
.mm-docs-table table.mm-2col td:first-child { width: 70%; }

/* ==========================================================================
   RESOURCES PAGE (page 870, /resources/) — CSS-only styling of the imported
   block content (h5 intro pair, two tile-card column rows, product strip).
   Content untouched by design; scoped via body class.
   ========================================================================== */

/* Intro — the two h5 lines form one centered subtitle */
body.page-id-870 .wp-block-post-content > h5 {
    text-align: center;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--mm-color-neutral-600);
    line-height: 1.6;
    margin: 0;
}
body.page-id-870 .wp-block-post-content > h5:nth-of-type(2) { margin-bottom: 3rem; }

/* Resource tile rows (first two columns blocks) — columns become cards */
body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(1) .wp-block-column,
body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(2) .wp-block-column {
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-2xl);
    background: var(--mm-color-white);
    padding: 2rem 1.5rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}
body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(1) .wp-block-column:hover,
body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(2) .wp-block-column:hover {
    box-shadow: var(--mm-shadow-md);
    border-color: rgba(242, 122, 33, 0.3);
}
/* Row 2: drop the empty filler column and center the two remaining cards,
   keeping their width identical to row 1 (a third of the row minus gaps). */
body.page-id-870 .wp-block-post-content > .wp-block-columns .wp-block-column:empty {
    display: none;
}
@media (min-width: 782px) {
    body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(2) {
        justify-content: center;
    }
    body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(2) .wp-block-column {
        flex-grow: 0;
        flex-basis: calc((100% - 2 * var(--wp--style--block-gap, 24px)) / 3);
    }
}

/* Tile image + title */
body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(1) .wp-block-column img,
body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(2) .wp-block-column img {
    width: 8.5rem;
    height: 8.5rem;
    object-fit: contain;
}
body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(1) figure,
body.page-id-870 .wp-block-post-content > .wp-block-columns:nth-of-type(2) figure {
    margin: 0 0 1.25rem;
}
body.page-id-870 .wp-block-post-content > .wp-block-columns h3 { margin: 0; }
body.page-id-870 .wp-block-post-content > .wp-block-columns h3 a {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mm-color-neutral-900);
    text-decoration: none;
    transition: color var(--mm-transition-fast);
}
body.page-id-870 .wp-block-post-content > .wp-block-columns h3 a:hover { color: var(--mm-color-primary); }

/* (Product strip section removed from page content 2026-08-19 — its rules pruned) */

/* ==========================================================================
   PRIMARY MENU (classic wp_nav_menu, managed at Appearance → Menus)
   Rendered by the max-machinery/primary-menu block in parts/header.html.
   Desktop: inline bar + hover dropdowns. Mobile: checkbox burger panel.
   ========================================================================== */

.mm-nav__toggle { display: none; }
.mm-nav__burger { display: none; }

.mm-nav__list {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mm-nav__list li { position: relative; margin: 0; }
.mm-nav__list a {
    display: block;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--mm-color-neutral-700);
    text-decoration: none;
    transition: color var(--mm-transition-fast);
    white-space: nowrap;
}
.mm-nav__list a:hover { color: var(--mm-color-primary); }

/* Dropdowns */
.mm-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    /* Align submenu link TEXT with the parent link text: pull the panel left
       by its own padding (0.5rem) + the item link padding (0.75rem) + border. */
    left: calc(-1.25rem - 1px);
    min-width: 15rem;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: var(--mm-color-white);
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-lg);
    box-shadow: var(--mm-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 60;
}
.mm-nav__list li:hover > .sub-menu,
.mm-nav__list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
}
.mm-nav__list .sub-menu li { position: static; }
.mm-nav__list .sub-menu a {
    padding: 0.5rem 0.75rem;
    border-radius: var(--mm-radius-md);
    font-size: 0.8125rem;
}
.mm-nav__list .sub-menu a:hover {
    background: var(--mm-color-primary-light);
    color: var(--mm-color-primary);
}

/* Mobile burger + slide-down panel */
@media (max-width: 781px) {
    .mm-nav__burger {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0.5rem;
        cursor: pointer;
    }
    .mm-nav__burger span {
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background: var(--mm-color-neutral-900);
    }
    .mm-nav__list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 1.25rem 1.25rem;
        background: var(--mm-color-white);
        border-bottom: 1px solid var(--mm-color-neutral-200);
        box-shadow: var(--mm-shadow-lg);
        z-index: 60;
    }
    .mm-nav__toggle:checked ~ .mm-nav__list { display: flex; }
    .mm-nav__list a { padding: 0.6rem 0; }
    /* Submenus render inline, indented — no hover on touch */
    .mm-nav__list .sub-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: block;
        min-width: 0;
        padding: 0 0 0 1rem;
        border: 0;
        box-shadow: none;
    }
}
/* The panel hangs off the sticky header, so page scrolling never reaches its
   lower items — cap it to the viewport below the header and scroll it on its
   own. Header is ~97px tall here, ~123px in the two-row phone layout
   (style.css), +46px for the admin bar. */
@media (max-width: 781px) {
    .mm-nav__list {
        max-height: calc(100vh - 6.5rem);
        max-height: calc(100dvh - 6.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    body.admin-bar .mm-nav__list {
        max-height: calc(100vh - 6.5rem - 46px);
        max-height: calc(100dvh - 6.5rem - 46px);
    }
}
@media (max-width: 575px) {
    .mm-nav__list {
        max-height: calc(100vh - 8rem);
        max-height: calc(100dvh - 8rem);
    }
    body.admin-bar .mm-nav__list {
        max-height: calc(100vh - 8rem - 46px);
        max-height: calc(100dvh - 8rem - 46px);
    }
}

/* ==========================================================================
   STEP FILES DOWNLOAD PAGE (page 1690, /step-files-download/)
   WooCommerce [products] grids restyled: images + $0.00 prices hidden,
   card layout, consistent buttons, styled post-add "View cart" link.
   ========================================================================== */

/* Jump pills */
.mm-step-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0 1.5rem;
}
.mm-step-nav a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-white);
    color: var(--mm-color-neutral-700);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--mm-transition-fast), border-color var(--mm-transition-fast), background-color var(--mm-transition-fast);
}
.mm-step-nav a:hover {
    color: var(--mm-color-primary);
    border-color: var(--mm-color-primary);
    background: var(--mm-color-primary-light);
}

/* Section headings */
body.page-id-1690 .wp-block-post-content h4 {
    font-size: 1.25rem !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 2.5rem 0 1rem;
    scroll-margin-top: calc(var(--mm-header-height, 6rem) + 1rem);
}

/* Product grid — replace WooCommerce floats with a real grid */
body.page-id-1690 .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 782px) {
    body.page-id-1690 .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
}
/* WooCommerce's clearfix ::before/::after become grid items in a grid
   container — the ::before was rendering as a blank first "card". */
body.page-id-1690 .woocommerce ul.products::before,
body.page-id-1690 .woocommerce ul.products::after {
    display: none;
}
body.page-id-1690 .woocommerce ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-white);
    transition: box-shadow 0.2s, border-color 0.2s;
}
body.page-id-1690 .woocommerce ul.products li.product:hover {
    box-shadow: var(--mm-shadow-md);
    border-color: rgba(242, 122, 33, 0.3);
}

/* Hide the $0.00 price (user request); images stay */
body.page-id-1690 .woocommerce ul.products li.product .price {
    display: none !important;
}
body.page-id-1690 .woocommerce ul.products li.product img {
    width: 100%;
    height: 9rem;
    object-fit: contain;
    margin: 0 0 0.75rem;
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-neutral-50);
    padding: 0.5rem;
}

body.page-id-1690 .woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0;
    padding: 0;
    font-size: 0.9375rem !important;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mm-color-neutral-900);
}
body.page-id-1690 .woocommerce ul.products li.product .woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
    color: var(--mm-color-primary);
}

/* Add to cart — the site's primary button */
body.page-id-1690 .woocommerce ul.products li.product .add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.5rem;
    margin: 0;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-primary);
    color: var(--mm-color-white) !important;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--mm-transition-fast);
}
body.page-id-1690 .woocommerce ul.products li.product .add_to_cart_button:hover {
    background: var(--mm-color-primary-dark);
}

/* "View cart" link WooCommerce appends after an AJAX add — secondary button */
/* Swap-in-place: once added, "View cart" takes the Add button's exact slot
   (same fixed height) so the card never changes size. */
body.page-id-1690 .woocommerce ul.products li.product:has(a.added_to_cart) .add_to_cart_button {
    display: none;
}
body.page-id-1690 .woocommerce ul.products li.product .added_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.5rem;
    margin: 0;
    padding: 0 1rem;
    border: 1px solid var(--mm-color-primary);
    border-radius: var(--mm-radius-md);
    color: var(--mm-color-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--mm-transition-fast);
}
body.page-id-1690 .woocommerce ul.products li.product .added_to_cart:hover {
    background: var(--mm-color-primary-light);
}

/* ==========================================================================
   CART PAGE (/cart/, classic [woocommerce_cart])
   WooCommerce defaults reskinned to the design system: card tables,
   brand buttons, styled inputs. Scoped to the woocommerce-cart body class.
   ========================================================================== */

/* Cart items table as a card */
body.page-id-2881 .woocommerce table.shop_table {
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--mm-color-white);
}
body.page-id-2881 .woocommerce table.shop_table th {
    background: var(--mm-color-neutral-50);
    padding: 12px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mm-color-neutral-700);
    border-bottom: 1px solid var(--mm-color-neutral-200);
    border-top: 0;
}
body.page-id-2881 .woocommerce table.shop_table td {
    padding: 12px 14px;
    font-size: 0.9375rem;
    color: var(--mm-color-neutral-700);
    border-top: 1px solid var(--mm-color-neutral-100);
    background: var(--mm-color-white);
}
body.page-id-2881 .woocommerce table.shop_table tr:first-child td { border-top: 0; }

/* Product cells */
body.page-id-2881 .woocommerce td.product-name a {
    font-weight: 600;
    color: var(--mm-color-neutral-900);
    text-decoration: none;
    transition: color var(--mm-transition-fast);
}
body.page-id-2881 .woocommerce td.product-name a:hover { color: var(--mm-color-primary); }
body.page-id-2881 .woocommerce td.product-thumbnail img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-neutral-50);
    padding: 0.25rem;
}
body.page-id-2881 .woocommerce a.remove {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.4rem;
    font-size: 1.1rem;
    color: var(--mm-color-neutral-400) !important;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: 50%;
    background: var(--mm-color-white);
    transition: color var(--mm-transition-fast), border-color var(--mm-transition-fast);
}
body.page-id-2881 .woocommerce a.remove:hover {
    color: #dc2626 !important;
    border-color: #dc2626;
    background: var(--mm-color-white);
}

/* Inputs — match the contact form fields */
body.page-id-2881 .woocommerce input.qty,
body.page-id-2881 .woocommerce input#coupon_code {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--mm-color-neutral-900);
    background: var(--mm-color-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.page-id-2881 .woocommerce input.qty:focus,
body.page-id-2881 .woocommerce input#coupon_code:focus {
    outline: none;
    border-color: var(--mm-color-primary);
    box-shadow: 0 0 0 3px rgba(242, 122, 33, 0.12);
}
body.page-id-2881 .woocommerce input#coupon_code { width: 10rem; }

/* Secondary buttons (apply coupon, update cart, return to shop) */
body.page-id-2881 .woocommerce .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-white);
    color: var(--mm-color-neutral-700);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--mm-transition-fast), border-color var(--mm-transition-fast), background-color var(--mm-transition-fast);
}
body.page-id-2881 .woocommerce .button:hover {
    color: var(--mm-color-primary);
    border-color: var(--mm-color-primary);
    background: var(--mm-color-primary-light);
}
body.page-id-2881 .woocommerce .button:disabled,
body.page-id-2881 .woocommerce .button:disabled:hover {
    color: var(--mm-color-neutral-400);
    border-color: var(--mm-color-neutral-200);
    background: var(--mm-color-neutral-50);
    cursor: not-allowed;
}

/* Primary: proceed to checkout */
body.page-id-2881 .woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    width: 100%;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
    font-size: 1rem;
    font-weight: 600;
    transition: background-color var(--mm-transition-fast);
}
body.page-id-2881 .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--mm-color-primary-dark);
    color: var(--mm-color-white);
}

/* Cart totals box */
body.page-id-2881 .woocommerce .cart_totals {
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-white);
    padding: 1.5rem;
}
body.page-id-2881 .woocommerce .cart_totals h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mm-color-neutral-900);
}
body.page-id-2881 .woocommerce .cart_totals table.shop_table {
    border: 0;
    border-radius: 0;
}
body.page-id-2881 .woocommerce .cart_totals th {
    background: transparent;
    border: 0;
    padding-left: 0;
    font-size: 0.9375rem;
    color: var(--mm-color-neutral-900);
}
body.page-id-2881 .woocommerce .cart_totals td {
    border-top: 0;
    border-bottom: 1px solid var(--mm-color-neutral-100);
}

/* Empty cart state */
body.page-id-2881 .woocommerce .cart-empty {
    margin: 2rem 0 1rem;
    padding: 1.5rem;
    border: 0;
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-neutral-50);
    text-align: center;
    font-size: 1.05rem;
    color: var(--mm-color-neutral-700);
}
body.page-id-2881 .woocommerce .return-to-shop { text-align: center; }
body.page-id-2881 .woocommerce .return-to-shop a.button {
    border: 0;
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
    padding: 0.85rem 1.75rem;
}
body.page-id-2881 .woocommerce .return-to-shop a.button:hover {
    background: var(--mm-color-primary-dark);
    color: var(--mm-color-white);
}

/* ---- Cart layout & alignment -------------------------------------------
   Align the WC wrapper to the theme's content column (like every other
   page) and replace WooCommerce's floated 48% totals box with a real
   two-column grid: items table left, totals sidebar right. */
/* NOTE: WooCommerce block-theme mode serves its own cart template, not our
   page.html — no .mm-plain-page wrapper here, so this rule carries its own
   gutters and vertical spacing. The store-notices block ALSO carries the
   .woocommerce class — exclude it or it becomes a huge empty band. */
body.page-id-2881 .woocommerce:not(.wp-block-woocommerce-store-notices) {
    max-width: var(--wp--style--global--content-size, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1rem 5rem;
}
@media (min-width: 640px) {
    body.page-id-2881 .woocommerce:not(.wp-block-woocommerce-store-notices) { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* WC's own cart template extras: kill the alignwide "Cart" post title and
   collapse the (unused) store-notices block to zero height. */
body.page-id-2881 .wp-block-post-title { display: none; }
body.page-id-2881 .wp-block-woocommerce-store-notices {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
body.page-id-2881 .woocommerce-cart-form { width: 100%; }
body.page-id-2881 .woocommerce-cart-form table.shop_table { width: 100%; }
@media (min-width: 1024px) {
    body.page-id-2881 .woocommerce:not(.wp-block-woocommerce-store-notices) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 24rem;
        gap: 2rem;
        align-items: start;
    }
    /* Notices span the full row above both columns */
    body.page-id-2881 .woocommerce > .woocommerce-notices-wrapper,
    body.page-id-2881 .woocommerce > .cart-empty,
    body.page-id-2881 .woocommerce > .return-to-shop {
        grid-column: 1 / -1;
    }
    body.page-id-2881 .woocommerce-cart-form { grid-column: 1; }
    body.page-id-2881 .woocommerce .cart-collaterals {
        grid-column: 2;
        width: 100%;
    }
    body.page-id-2881 .woocommerce .cart-collaterals .cart_totals {
        float: none;
        width: 100%;
    }
}
@media (max-width: 1023px) {
    body.page-id-2881 .woocommerce .cart-collaterals .cart_totals {
        float: none;
        width: 100%;
        margin-top: 1.5rem;
    }
}

/* ---- Generic page side gutters -------------------------------------------
   Same fix as .pdp (see PDP section note): the theme sets
   useRootPaddingAwareAlignments but defines no root padding, so
   has-global-padding resolves to 0 and content runs flush to the viewport
   edge below contentSize. Give the generic page section real gutters. */
.mm-plain-page {
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .mm-plain-page { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ==========================================================================
   CAREERS PAGE (page 4409) — rebuilt from the Beaver Builder dump
   ========================================================================== */

.mm-careers-hero {
    margin: 0 0 1rem;
}
.mm-careers-hero img {
    width: 100%;
    height: auto;
    border-radius: var(--mm-radius-2xl);
}
.mm-benefit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0 0;
}
@media (min-width: 640px) {
    .mm-benefit-grid { grid-template-columns: repeat(3, 1fr); }
}
.mm-benefit-grid ul {
    margin: 0;
    padding: 1.5rem 1.5rem 1.5rem 2.75rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-white);
}
.mm-benefit-grid li {
    margin: 0.35rem 0;
    line-height: 1.6;
    color: var(--mm-color-neutral-700);
}
.mm-benefit-grid li::marker { color: var(--mm-color-primary); }

.mm-testimonial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0 0;
}
@media (min-width: 782px) {
    .mm-testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}
.mm-testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-2xl);
    background: var(--mm-color-white);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.mm-testimonial-card:hover {
    box-shadow: var(--mm-shadow-md);
    border-color: rgba(242, 122, 33, 0.3);
}
.mm-testimonial-card img {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
}
.mm-testimonial-card blockquote {
    margin: 1rem 0 0.5rem;
    padding: 0;
    border: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--mm-color-neutral-600);
}
.mm-testimonial-card cite {
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--mm-color-neutral-900);
}
.mm-photo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0 0;
}
@media (min-width: 640px) {
    .mm-photo-grid { grid-template-columns: repeat(3, 1fr); }
}
.mm-photo-grid img {
    width: 100%;
    height: auto;
    border-radius: var(--mm-radius-xl);
}

/* ==========================================================================
   VENDOR TERMS (page 4848) — legal document typography
   ========================================================================== */

.mm-legal h4 {
    display: inline-block;
    margin: 0 0 1.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--mm-radius-full);
    background: var(--mm-color-primary-light);
    font-size: 0.8125rem !important;
    font-weight: 700;
    color: var(--mm-color-primary);
}
.mm-legal h5 {
    margin: 2rem 0 0.5rem;
    font-size: 1.125rem !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mm-color-neutral-900);
}
.mm-legal p {
    margin: 0 0 0.9rem;
    line-height: 1.75;
    font-size: 0.9375rem;
    color: var(--mm-color-neutral-700);
}
.mm-legal a { color: var(--mm-color-primary); font-weight: 600; }

/* ==========================================================================
   LOW FLOW EXPERTS (page 3734) — CSS skin for the dead Astra classes
   ========================================================================== */

body.page-id-3734 .wp-block-button__link.has-ast-global-color-7-background-color {
    background: var(--mm-color-primary) !important;
    color: var(--mm-color-white) !important;
    border-radius: var(--mm-radius-md);
    padding: 0.85rem 1.75rem;
    font-weight: 600;
    transition: background-color var(--mm-transition-fast);
}
body.page-id-3734 .wp-block-button__link.has-ast-global-color-7-background-color:hover {
    background: var(--mm-color-primary-dark) !important;
}
body.page-id-3734 .has-ast-global-color-8-color {
    color: var(--mm-color-neutral-900) !important;
}
body.page-id-3734 .wp-block-post-content img { border-radius: var(--mm-radius-xl); }

/* ==========================================================================
   REQUEST FORMS — Service Request & Request a Quote pages
   Extends the .mm-contact-form card for GF multi-page forms (10, 12):
   sections, radios, checkboxes, selects, file upload, list field, steps.
   ========================================================================== */
.mm-request-form { margin-top: 2rem; }

/* Intro copy above the form card */
.mm-form-intro {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--mm-color-neutral-600);
}
.mm-form-intro a { color: var(--mm-color-primary); font-weight: 600; }

/* Full-width rows for field types the two-column grid can't split */
@media (min-width: 560px) {
    .mm-request-form .gfield--type-section,
    .mm-request-form .gfield--type-radio,
    .mm-request-form .gfield--type-checkbox,
    .mm-request-form .gfield--type-list,
    .mm-request-form .gfield--type-fileupload { grid-column: 1 / -1; }
}

/* Hidden tracking fields must not occupy grid cells */
.mm-request-form .gfield--type-hidden,
.mm-request-form .gfield_visibility_hidden { display: none; }

/* Selects and number inputs — match text input styling */
.mm-request-form .gfield select,
.mm-request-form .gfield input[type="number"] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--mm-color-neutral-900);
    background: var(--mm-color-white);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-request-form .gfield select:focus,
.mm-request-form .gfield input[type="number"]:focus {
    outline: none;
    border-color: var(--mm-color-primary);
    box-shadow: 0 0 0 3px rgba(242, 122, 33, 0.12);
}

/* Section headings inside the form */
.mm-request-form .gsection {
    border-bottom: 1px solid var(--mm-color-neutral-200);
    padding: 0.5rem 0;
    margin: 0.75rem 0 0;
}
.mm-request-form .gsection_title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mm-color-neutral-900);
    text-transform: none;
    letter-spacing: 0;
}
.mm-request-form .gsection_description {
    font-size: 0.85rem;
    color: var(--mm-color-neutral-500);
}

/* Radio and checkbox choices */
.mm-request-form .gfield_radio,
.mm-request-form .gfield_checkbox {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mm-request-form .gchoice {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.mm-request-form .gchoice input[type="radio"],
.mm-request-form .gchoice input[type="checkbox"] {
    accent-color: var(--mm-color-primary);
    width: 1rem;
    height: 1rem;
    margin: 0.2rem 0 0;
    flex: none;
}
.mm-request-form .gchoice label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--mm-color-neutral-700);
    line-height: 1.5;
}

/* Field descriptions / sub-labels */
.mm-request-form .gfield_description {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--mm-color-neutral-500);
}

/* List field (meter identification rows) */
.mm-request-form .gfield--type-list input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--mm-color-neutral-900);
}
.mm-request-form .gfield_list_group { margin-bottom: 0.75rem; }

/* File upload drop area */
.mm-request-form .gform_drop_area {
    border: 2px dashed var(--mm-color-neutral-300);
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-neutral-50);
    padding: 1.5rem;
    text-align: center;
    color: var(--mm-color-neutral-500);
    font-size: 0.9rem;
}
.mm-request-form .gform_button_select_files,
.mm-request-form .gfield_list_icons button,
.mm-request-form .add_list_item,
.mm-request-form .delete_list_item {
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--mm-color-neutral-300);
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-white);
    color: var(--mm-color-neutral-700);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.mm-request-form .gform_button_select_files:hover {
    border-color: var(--mm-color-primary);
    color: var(--mm-color-primary);
}
.mm-request-form input[type="file"] {
    font-size: 0.875rem;
    color: var(--mm-color-neutral-600);
}
.mm-request-form .gform_fileupload_rules {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--mm-color-neutral-500);
}

/* Multi-page step indicator */
.mm-request-form .gf_page_steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.5rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--mm-color-neutral-200);
}
.mm-request-form .gf_step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    opacity: 1;
}
.mm-request-form .gf_step_number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-full);
    background: var(--mm-color-neutral-100);
    color: var(--mm-color-neutral-500);
    font-size: 0.8125rem;
    font-weight: 600;
}
.mm-request-form .gf_step_active .gf_step_number {
    border-color: var(--mm-color-primary);
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
}
.mm-request-form .gf_step_completed .gf_step_number {
    border-color: var(--mm-color-primary);
    background: var(--mm-color-white);
    color: var(--mm-color-primary);
}
.mm-request-form .gf_step_label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mm-color-neutral-500);
}
.mm-request-form .gf_step_active .gf_step_label { color: var(--mm-color-neutral-900); }

/* Page footer: previous / next / submit buttons */
.mm-request-form .gform_page_footer {
    display: flex;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--mm-color-neutral-200);
}
.mm-request-form .gform_page_footer br { display: none; }
.mm-request-form .gform_page_footer p { margin: 0; }
.mm-request-form .gform_page_footer input[type="submit"],
.mm-request-form .gform_page_footer .gform_next_button,
.mm-request-form .gform_page_footer .gform_previous_button,
.mm-request-form .gform_page_footer button {
    width: auto;
    padding: 0.9rem 1.75rem;
    border: 0;
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--mm-transition-fast);
}
.mm-request-form .gform_page_footer input[type="submit"]:hover,
.mm-request-form .gform_page_footer .gform_next_button:hover {
    background: var(--mm-color-primary-dark);
}
.mm-request-form .gform_page_footer .gform_previous_button {
    border: 1px solid var(--mm-color-neutral-300);
    background: var(--mm-color-white);
    color: var(--mm-color-neutral-700);
}
.mm-request-form .gform_page_footer .gform_previous_button:hover {
    border-color: var(--mm-color-neutral-500);
    background: var(--mm-color-white);
    color: var(--mm-color-neutral-900);
}

/* Final-page submit footer inherits card-wide button — keep it auto width */
.mm-request-form .gform_footer input[type="submit"],
.mm-request-form .gform_footer button { width: auto; padding: 0.9rem 1.75rem; }

/* ==========================================================================
   HEADER SEARCH (max-machinery/header-search + overlay printed in wp_footer)
   Mirrors the live site: magnifier beside "Request a Quote" opens a dark
   full-screen search box.
   ========================================================================== */

.mm-header-actions { gap: 0.75rem; }

.mm-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--mm-radius-md);
    background: transparent;
    color: var(--mm-color-neutral-700);
    cursor: pointer;
    transition: color var(--mm-transition-fast), background-color var(--mm-transition-fast);
}
.mm-search-toggle:hover {
    color: var(--mm-color-primary);
    background: var(--mm-color-primary-light);
}

.mm-search-open,
.mm-search-open body { overflow: hidden; }

.mm-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgb(17 24 39 / 0.96);
}
.mm-search-overlay[hidden] { display: none; }

.mm-search-overlay__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    display: inline-flex;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    color: var(--mm-color-white);
    cursor: pointer;
    transition: color var(--mm-transition-fast);
}
.mm-search-overlay__close:hover { color: var(--mm-color-primary); }

.mm-search-overlay__form {
    width: 100%;
    max-width: 48rem;
}
.mm-search-overlay__hint {
    margin: 0 0 1rem;
    color: var(--mm-color-neutral-400);
    font-size: 0.875rem;
    text-align: center;
}
.mm-search-overlay__row {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--mm-color-neutral-500);
    transition: border-color var(--mm-transition-fast);
}
.mm-search-overlay__row:focus-within { border-bottom-color: var(--mm-color-primary); }
.mm-search-overlay__field {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0;
    border: 0;
    background: transparent;
    color: var(--mm-color-white);
    font-family: inherit;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    outline: none;
}
.mm-search-overlay__field::placeholder { color: var(--mm-color-neutral-500); }
.mm-search-overlay__field::-webkit-search-cancel-button { display: none; }
.mm-search-overlay__submit {
    display: inline-flex;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    color: var(--mm-color-white);
    cursor: pointer;
}
.mm-search-overlay__submit svg { width: 1.75rem; height: 1.75rem; }
.mm-search-overlay__submit:hover { color: var(--mm-color-primary); }

/* ---- Search results page (templates/search.html) ---- */
.mm-search-results {
    max-width: 56rem;
    margin: 0 auto;
    padding: 3rem 1rem 5rem;
}
.mm-search-results__form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.mm-search-results__form input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    font-family: inherit;
    font-size: 1rem;
}
.mm-search-results__form input[type="search"]:focus {
    outline: none;
    border-color: var(--mm-color-primary);
}
.mm-search-results__submit {
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
.mm-search-results__submit:hover { background: var(--mm-color-primary-dark); }
.mm-search-results__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mm-search-results__item {
    margin: 0;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--mm-color-neutral-100);
}
.mm-search-results__type {
    color: var(--mm-color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.mm-search-results__title {
    margin: 0.25rem 0 0;
    font-size: 1.25rem !important;
    font-weight: 600;
    line-height: 1.4;
}
.mm-search-results__title a {
    color: var(--mm-color-neutral-900);
    text-decoration: none;
}
.mm-search-results__title a:hover { color: var(--mm-color-primary); }
.mm-search-results__excerpt {
    margin: 0.5rem 0 0;
    color: var(--mm-color-neutral-600);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.mm-search-results__excerpt:empty { display: none; }
.mm-search-results__empty { color: var(--mm-color-neutral-600); }
.mm-search-results__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 2rem;
}
.mm-search-results__pages .page-numbers {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    color: var(--mm-color-neutral-700);
    font-size: 0.875rem;
    text-decoration: none;
}
.mm-search-results__pages .page-numbers.current,
.mm-search-results__pages a.page-numbers:hover {
    border-color: var(--mm-color-primary);
    color: var(--mm-color-primary);
}

/* ==========================================================================
   HOMEPAGE PRODUCT CARDS — whole card clickable (user request 2026-10-07)
   Stretched-link pattern: the card's one link (Learn More → category) covers
   the card, so it stays a single link for screen readers and no block markup
   changes. Lives here, not style.css, because style.css is also the editor
   style — there the overlay would block clicking into the card to edit it.
   ========================================================================== */
.mm-product-card {
    position: relative;
}
.mm-product-card .mm-product-body a[href*="/product-category/"]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ==========================================================================
   HOMEPAGE "Trusted across industries" CARDS — whole card clickable
   (user request 2026-10-12). Same stretched-link pattern as the product
   cards: the card's one link (Learn more → application category) covers the
   card. Uses ::before because ::after already draws the "›" arrow. Front-end
   only (not style.css, which is also the editor style).
   ========================================================================== */
.mm-app-card {
    position: relative;
}
.mm-app-card .mm-app-link a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ==========================================================================
   HEADER CART ICON + STEP FILE "ADD TO CART" (2026-10-15)
   Cart icon sits left of the search toggle and mirrors its look. The count
   badge is filled in by assets/js/header-cart.js.
   ========================================================================== */
.mm-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--mm-radius-md);
    color: var(--mm-color-neutral-700);
    text-decoration: none;
    transition: color var(--mm-transition-fast), background-color var(--mm-transition-fast);
}
.mm-cart-link:hover {
    color: var(--mm-color-primary);
    background: var(--mm-color-primary-light);
}
.mm-cart-count {
    position: absolute;
    top: 0.1rem;
    right: 0.05rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: var(--mm-radius-full);
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}
.mm-cart-count[hidden] { display: none; }
@media (max-width: 575px) {
    .site-header .mm-cart-link { order: 2; }
}

/* STEP file single product: Add to cart (POST form) + "View cart" link */
.mm-step-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0;
}
/* WooCommerce's form.cart clearfix (::before/::after) would take a flex slot. */
.mm-step-cart::before,
.mm-step-cart::after { display: none !important; }
.mm-step-cart .wp-block-button__link {
    border: 0;
    cursor: pointer;
}
.mm-step-cart__view {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mm-color-primary);
    text-decoration: none;
}
.mm-step-cart__view::after { content: ' ›'; }

/* ==========================================================================
   CHECKOUT + ORDER RECEIVED (/checkout/, classic [woocommerce_checkout])
   2026-10-15. templates/page-checkout.html replaces WooCommerce's own
   distraction-free checkout template (plain site title, no header/footer)
   with the site header + footer. Styling mirrors the cart page: card
   tables, brand inputs and buttons. Scoped to body.woocommerce-checkout.
   ========================================================================== */
body.woocommerce-checkout .mm-checkout-page .woocommerce {
    max-width: var(--wp--style--global--content-size, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1rem 5rem;
}
@media (min-width: 640px) {
    body.woocommerce-checkout .mm-checkout-page .woocommerce { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Section headings */
body.woocommerce-checkout .woocommerce h3,
body.woocommerce-checkout .woocommerce h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mm-color-neutral-900);
}

/* Layout: details left, order summary right */
body.woocommerce-checkout form.checkout .col2-set .col-1,
body.woocommerce-checkout form.checkout .col2-set .col-2 {
    float: none;
    width: 100%;
}
body.woocommerce-checkout form.checkout .col2-set .col-2 { margin-top: 1.5rem; }
@media (min-width: 1024px) {
    body.woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 26rem;
        grid-template-rows: auto 1fr;
        column-gap: 2.5rem;
        align-items: start;
    }
    body.woocommerce-checkout form.checkout::before,
    body.woocommerce-checkout form.checkout::after { display: none; }
    body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
    body.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
    body.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
    body.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }
}

/* Details card */
body.woocommerce-checkout #customer_details {
    padding: 1.5rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-white);
}

/* Labels + fields */
body.woocommerce-checkout .woocommerce form .form-row { margin: 0 0 1rem; padding: 0; }
body.woocommerce-checkout .woocommerce form .form-row label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mm-color-neutral-700);
}
body.woocommerce-checkout .woocommerce form .form-row label.checkbox,
body.woocommerce-checkout .woocommerce form .form-row .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 500;
}
body.woocommerce-checkout .woocommerce form .form-row .required {
    color: var(--mm-color-primary);
    text-decoration: none;
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce .select2-container .select2-selection--single,
body.woocommerce-checkout .woocommerce form.checkout_coupon input.input-text {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--mm-color-neutral-900);
    background: var(--mm-color-white);
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.woocommerce-checkout .woocommerce form .form-row textarea { min-height: 6rem; }
body.woocommerce-checkout .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5rem;
    color: var(--mm-color-neutral-900);
}
body.woocommerce-checkout .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-checkout .woocommerce .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .woocommerce .select2-container--open .select2-selection--single {
    outline: none;
    border-color: var(--mm-color-primary);
    box-shadow: 0 0 0 3px rgba(242, 122, 33, 0.12);
}
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid .select2-selection { border-color: #dc2626; }

/* Order summary table — same card as the cart */
body.woocommerce-checkout .woocommerce table.shop_table {
    width: 100%;
    margin: 0 0 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--mm-color-white);
}
body.woocommerce-checkout .woocommerce table.shop_table th {
    padding: 12px 14px;
    background: var(--mm-color-neutral-50);
    border-top: 0;
    border-bottom: 1px solid var(--mm-color-neutral-200);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mm-color-neutral-700);
}
body.woocommerce-checkout .woocommerce table.shop_table td {
    padding: 12px 14px;
    border-top: 1px solid var(--mm-color-neutral-100);
    font-size: 0.9375rem;
    color: var(--mm-color-neutral-700);
    background: var(--mm-color-white);
}
body.woocommerce-checkout .woocommerce table.shop_table tfoot th,
body.woocommerce-checkout .woocommerce table.shop_table tfoot td {
    background: var(--mm-color-white);
    border-top: 1px solid var(--mm-color-neutral-100);
    border-bottom: 0;
    color: var(--mm-color-neutral-900);
}
body.woocommerce-checkout .woocommerce table.shop_table .order-total th,
body.woocommerce-checkout .woocommerce table.shop_table .order-total td { font-weight: 700; }

/* Payment / place-order box */
body.woocommerce-checkout .woocommerce #payment {
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-neutral-50);
    border: 1px solid var(--mm-color-neutral-200);
}
body.woocommerce-checkout .woocommerce #payment div.form-row { padding: 1.25rem; margin: 0; }
body.woocommerce-checkout .woocommerce #payment .woocommerce-privacy-policy-text p {
    font-size: 0.8125rem;
    color: var(--mm-color-neutral-500);
}
body.woocommerce-checkout .woocommerce #payment #place_order {
    float: none;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-primary);
    color: var(--mm-color-white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--mm-transition-fast);
}
body.woocommerce-checkout .woocommerce #payment #place_order:hover { background: var(--mm-color-primary-dark); }

/* Coupon prompt + notices */
body.woocommerce-checkout .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce .woocommerce-info,
body.woocommerce-checkout .woocommerce .woocommerce-message {
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-neutral-50);
    color: var(--mm-color-neutral-700);
    font-size: 0.9375rem;
}
body.woocommerce-checkout .woocommerce .woocommerce-info::before,
body.woocommerce-checkout .woocommerce .woocommerce-message::before { color: var(--mm-color-primary); }
body.woocommerce-checkout .woocommerce .woocommerce-info a { color: var(--mm-color-primary); font-weight: 600; }
body.woocommerce-checkout .woocommerce form.checkout_coupon {
    margin: 0 0 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
}
body.woocommerce-checkout .woocommerce .button:not(#place_order) {
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-md);
    background: var(--mm-color-white);
    color: var(--mm-color-neutral-700);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
body.woocommerce-checkout .woocommerce .button:not(#place_order):hover {
    color: var(--mm-color-primary);
    border-color: var(--mm-color-primary);
    background: var(--mm-color-primary-light);
}

/* Order received (thank-you) page */
body.woocommerce-checkout .woocommerce-order .woocommerce-thankyou-order-received {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-primary-light);
    color: var(--mm-color-neutral-900);
    font-size: 1.125rem;
    font-weight: 600;
}
body.woocommerce-checkout .woocommerce-order ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 2rem;
    padding: 0;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    overflow: hidden;
}
body.woocommerce-checkout .woocommerce-order ul.order_details li {
    flex: 1 1 10rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--mm-color-neutral-100);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mm-color-neutral-500);
}
body.woocommerce-checkout .woocommerce-order ul.order_details li strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mm-color-neutral-900);
}
body.woocommerce-checkout .woocommerce-order a[href*="download_file="] {
    font-weight: 600;
    color: var(--mm-color-primary);
}
body.woocommerce-checkout .woocommerce-order address {
    padding: 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    font-style: normal;
}

/* WooCommerce block-style notice banners (coupon prompt etc.) */
body.woocommerce-checkout .wc-block-components-notice-banner {
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.25rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-neutral-50);
    color: var(--mm-color-neutral-700);
    font-size: 0.9375rem;
}
body.woocommerce-checkout .wc-block-components-notice-banner > svg {
    background: var(--mm-color-primary);
    fill: var(--mm-color-white);
}
body.woocommerce-checkout .wc-block-components-notice-banner a {
    color: var(--mm-color-primary);
    font-weight: 600;
    text-decoration: none;
}
body.woocommerce-checkout .wc-block-components-notice-banner.is-error {
    border-color: #fecaca;
    background: #fef2f2;
}
body.woocommerce-checkout .wc-block-components-notice-banner.is-error > svg { background: #dc2626; }

/* Order confirmation (WooCommerce block template, /checkout/order-received/)
   — content column, gutters and cards to match checkout. */
body.woocommerce-order-received .wp-site-blocks > :not(header):not(footer):not(.site-header):not(.site-footer) {
    max-width: var(--wp--style--global--content-size, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    body.woocommerce-order-received .wp-site-blocks > :not(header):not(footer):not(.site-header):not(.site-footer) { padding-left: 1.5rem; padding-right: 1.5rem; }
}
body.woocommerce-order-received .wp-site-blocks > main { padding-bottom: 5rem; }
body.woocommerce-order-received h1.wp-block-post-title {
    margin-top: 2.5rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mm-color-neutral-900);
}
body.woocommerce-order-received .wc-block-order-confirmation-status {
    margin: 1rem 0 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--mm-radius-xl);
    background: var(--mm-color-primary-light);
}
body.woocommerce-order-received .wc-block-order-confirmation-status p,
body.woocommerce-order-received .wc-block-order-confirmation-status h1 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mm-color-neutral-900);
}
body.woocommerce-order-received .wc-block-order-confirmation-summary {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
}
body.woocommerce-order-received .wc-block-order-confirmation-totals-wrapper h2,
body.woocommerce-order-received .wc-block-order-confirmation-downloads-wrapper h2,
body.woocommerce-order-received .wc-block-order-confirmation-address-wrapper h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mm-color-neutral-900);
}
body.woocommerce-order-received .wc-block-order-confirmation-totals table,
body.woocommerce-order-received .wc-block-order-confirmation-downloads table {
    border: 1px solid var(--mm-color-neutral-200);
    border-radius: var(--mm-radius-xl);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
body.woocommerce-order-received .wc-block-order-confirmation-totals table thead th,
body.woocommerce-order-received .wc-block-order-confirmation-downloads table thead th {
    background: var(--mm-color-neutral-50);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mm-color-neutral-700);
}
body.woocommerce-order-received .wc-block-order-confirmation-downloads a,
body.woocommerce-order-received .wc-block-order-confirmation-totals a {
    font-weight: 600;
    color: var(--mm-color-primary);
    text-decoration: none;
}
body.woocommerce-order-received .wc-block-order-confirmation-address-wrapper .wp-block-woocommerce-order-confirmation-billing-address,
body.woocommerce-order-received .wc-block-order-confirmation-address-wrapper .wp-block-woocommerce-order-confirmation-shipping-address {
    border-radius: var(--mm-radius-xl);
}