/*
Theme Name:   Maxiflex
Theme URI:    https://maxiflex.co.za
Author:       Codehelix
Author URI:   https://codehelix.io
Description:  Child theme for Maxiflex Door Systems — industrial doors, loading dock
              equipment and PVC strip curtains. Built on Hello Elementor.
Template:     hello-elementor
Version:      1.0.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  maxiflex
Tags:         elementor, woocommerce, custom-menu, featured-images
*/

/* **Table of contents — Desktop**

    1. Design tokens
    2. Shared primitives (bands, eyebrows, buttons, section heads)
    3. Utility bar & header
    4. Footer
    5. Hero
    6. Trust & stats
    7. Product categories
    8. Turnkey statement
    9. Industries
   10. Services / process
   11. Online shop feature
   12. Latest news
   13. Testimonial
   14. Pre-footer CTA
   15. Store — per-metre length picker and enquiry-only products
   16. Shop page
   17. Shop listing (/shop/?view=all and search results)
   18. Range navigation and grouped sub-ranges */

/*---------------------------*/
/*- DESKTOP CSS -------------*/
/*---------------------------*/

/* ---------------------------------------------------------------------------
 * 1. Design tokens
 *
 * Taken from the client-approved colour mockup:
 *   design/Home page wireframe/Maxiflex Home Mockup.dc.html
 * That file is the authority for colour and type, not the greyscale wireframe.
 * Elementor's global kit stays the source of truth for anything Elementor
 * renders — keep the kit and these tokens in sync.
 * --------------------------------------------------------------------------- */

:root {
    /* Brand greens — fixed, logo is retained unchanged */
    --mx-green-flex:    #00583A;  /* "flex" dark green — utility bar, headings, links */
    --mx-green-maxi:    #009366;  /* "Maxi" green — primary CTA fill, link hover */
    --mx-green-accent:  #23A455;  /* accent — stat numerals, eyebrows, active states */

    /* Secondary accents introduced by the approved mockup */
    --mx-lime:          #aacd3a;  /* eyebrow bullets, separator dots, one stat icon */
    --mx-orange:        #ED8B00;  /* after-hours emergency pill ONLY — see note below */
    --mx-orange-ink:    #26170a;  /* text on the orange pill */

    /* Ink */
    --mx-ink:           #455A5F;  /* primary text + headings (slate, not black) */
    --mx-ink-strong:    #3c4b47;
    --mx-ink-muted:     #5d6b66;
    --mx-ink-soft:      #7c8b86;
    --mx-ink-faint:     #8b9995;  /* eyebrow labels on light */

    /* Surfaces */
    --mx-paper:         #ffffff;
    --mx-surface-tint:  #f2f7f4;  /* green-tinted cards (stats, process, shop) */
    --mx-surface-band:  #f2f5f4;  /* light band background */
    --mx-page:          #e9edeb;  /* page backdrop outside the 1440 frame */

    /* Dark bands */
    --mx-dark:          #101a17;  /* Industries + News bands */
    --mx-dark-footer:   #0b1311;
    --mx-dark-hero:     #0d1614;
    --mx-dark-card:     #1a2422;  /* card on a dark band */

    /* Text on dark */
    --mx-on-dark:       #cfe6dc;
    --mx-on-dark-soft:  #a8d8bd;
    --mx-on-dark-lead:  #7fe0aa;  /* eyebrow text inside the hero pill */

    /* Rules & borders */
    --mx-rule:          #e4eae7;
    --mx-rule-strong:   #cbd7d2;
    --mx-rule-soft:     #dbe4e1;
    --mx-logo-grey:     #a3b0b3;  /* partner logos are masked to a flat grey */

    /* Type */
    --mx-font-heading:  'Poppins', system-ui, sans-serif;   /* 300/400/600/700 */
    --mx-font-body:     'Inter', system-ui, sans-serif;     /* 400/500/600/700 */
    --mx-font-quote:    'Playfair Display', Georgia, serif; /* decorative quote glyph only */

    /* Radii — pills for actions, generous rounding on cards */
    --mx-radius-pill:   999px;
    --mx-radius-card:   20px;
    --mx-radius-hero:   22px;
    --mx-radius-inner:  14px;

    /* Layout */
    --mx-container:     1440px;
    --mx-gutter:        44px;
    --mx-band-pad:      96px;  /* standard vertical band padding */
}

/*
 * Notes on the accents, so they are not over-applied:
 *  - --mx-orange appears exactly once in the approved design (the "After hours
 *    emergency call-out" pill). Treat it as a semantic alert colour, not a
 *    general secondary. Confirm with the client before spreading it further.
 *  - --mx-lime is not mentioned in the written brief at all but is used
 *    throughout the mockup as a small-detail accent. Confirm it is intentional.
 */

/* ---------------------------------------------------------------------------
 * 2. Shared primitives
 *
 * All values below are lifted from the approved mockup
 * (design/Home page wireframe/Maxiflex Home Mockup.dc.html). If a number here
 * disagrees with that file, the file wins.
 *
 * THREE THINGS GOVERN EVERY RULE. Read before editing.
 *
 * 1. SET REAL PROPERTIES, NOT ELEMENTOR'S VARIABLES. Elementor emits
 *    `.elementor-16 .elementor-element.elementor-element-xxxxxxx{--display:flex}`
 *    at (0,3,0), after this file. You cannot override `--display` from here.
 *    But the real property comes from `.e-con{display:var(--display)}` at
 *    (0,1,0), so `display: grid` on `.e-con.mx-thing` (0,2,0) wins outright.
 * 2. BOXED CONTAINERS LAY OUT IN `.e-con-inner`. content_width=boxed renders
 *    `.e-con-boxed > .e-con-inner > [children]`, so grid/flex goes on
 *    `> .e-con-inner`; background and padding stay on the outer.
 * 3. `e_optimized_markup` IS ON, so text-editor widgets have NO <p> wrapper —
 *    target the widget element itself. Heading widgets keep an inner
 *    `.elementor-heading-title`, and need (0,3,0) to beat Elementor's global
 *    heading colour, hence the `.elementor-widget` prefix.
 * --------------------------------------------------------------------------- */

/* Band outers carry background only — never padding. Elementor gives full-width
   containers a small default block padding which would otherwise stack on top of
   each band's own 96px and push every section 20px taller than the mockup. */
.e-con.mx-hero,
.e-con.mx-trust,
.e-con.mx-cats,
.e-con.mx-turnkey,
.e-con.mx-industries,
.e-con.mx-process,
.e-con.mx-shop,
.e-con.mx-news,
.e-con.mx-testimonial,
.e-con.mx-cta {
    padding: 0;
}

/* Band gutters: 44px each side. On the boxed outer, so the inner's max-width is
   reduced by the gutter and a 1440 viewport yields the mockup's 1352 content. */
.e-con.mx-hero__inner,
.e-con.mx-trust__inner,
.e-con.mx-cats__inner,
.e-con.mx-turnkey__inner,
.e-con.mx-industries__inner,
.e-con.mx-process__inner,
.e-con.mx-shop__inner,
.e-con.mx-news__inner,
.e-con.mx-testimonial__inner,
.e-con.mx-cta__inner {
    padding-inline: var(--mx-gutter);
}

/* Vertical rhythm, per band */
.e-con.mx-trust__inner       { padding-block: 116px 72px; }
.e-con.mx-cats__inner        { padding-block: 24px 96px; }
.e-con.mx-turnkey__inner,
.e-con.mx-industries__inner,
.e-con.mx-process__inner,
.e-con.mx-shop__inner,
.e-con.mx-news__inner        { padding-block: 96px; }
.e-con.mx-testimonial__inner { padding-block: 104px; }
.e-con.mx-cta__inner         { padding-block: 88px; }

/* Boxed inners stack unless a section overrides below */
.e-con.mx-trust__inner > .e-con-inner,
.e-con.mx-cats__inner > .e-con-inner,
.e-con.mx-shop__inner > .e-con-inner,
.e-con.mx-news__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Band colours */
.e-con.mx-turnkey,
.e-con.mx-shop       { background: var(--mx-surface-band); }
.e-con.mx-band--dark { background: var(--mx-dark); }
.e-con.mx-cats,
.e-con.mx-trust,
.e-con.mx-process,
.e-con.mx-testimonial { background: var(--mx-paper); }

/* Eyebrow. Green on light bands; the partners one is muted; dark bands use the
   lighter accent. The lime square is a <span class="mx-bullet"> in the text. */
.elementor-widget.mx-eyebrow {
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mx-green-maxi);
    white-space: nowrap;
}
/*
 * The bare-element variant. §17 records this for buttons and it applies here
 * too: everything above is scoped to .elementor-widget, so an eyebrow printed by
 * a shortcode — the cart and checkout heads — got the lime bullet from
 * .mx-bullet and none of the type or colour. Lower specificity than the widget
 * rules, so those are untouched.
 */
.mx-eyebrow {
    /* No `display` here on purpose: this rule is (0,1,0) and so also reaches the
       .elementor-widget.mx-eyebrow divs, whose own rules never set one. In the
       flex heads that print an eyebrow the span is blockified anyway, so it buys
       nothing and could move a widget somewhere else on the site. */
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mx-green-maxi);
    white-space: nowrap;
}

.elementor-widget.mx-eyebrow--muted  { color: var(--mx-ink-faint); }
.elementor-widget.mx-eyebrow--accent { color: var(--mx-green-accent); letter-spacing: 0.1em; }
.e-con.mx-band--dark .mx-eyebrow     { color: var(--mx-green-accent); }

.mx-bullet {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--mx-lime);
    margin-right: 9px;
    vertical-align: middle;
}
/* Mockup sets the leading clause of most headings in Poppins 300 */
.mx-thin { font-weight: 300; }

/* Section header: flex row, baseline-aligned at the bottom, 38px below */
.e-con.mx-section-head {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 34px;
    padding: 0 0 38px;
    width: 100%;
}
.e-con.mx-section-head__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
    width: auto;
}
.elementor-widget.mx-section-head__title .elementor-heading-title,
.elementor-widget.mx-catgroup__title .elementor-heading-title {
    font: 700 44px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -0.015em;
}
.e-con.mx-section-head--dark .mx-section-head__title .elementor-heading-title { color: var(--mx-paper); }
/* Products head is 46px in the mockup; the other section heads are 44px. */
.e-con.mx-section-head--lg .mx-section-head__title .elementor-heading-title { font-size: 46px; }

/* Buttons ------------------------------------------------------------------ */

/* Solid pill, primary action */
.elementor-widget.mx-btn .elementor-button {
    font: 700 15px/1 var(--mx-font-body);
    border-radius: var(--mx-radius-pill);
    padding: 20px 32px;
    border: 0;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.elementor-widget.mx-btn--primary .elementor-button {
    background-color: var(--mx-green-maxi);
    color: var(--mx-paper);
    box-shadow: 0 10px 26px rgba(0, 147, 102, .4);
}
.elementor-widget.mx-btn--primary .elementor-button:hover { background-color: var(--mx-green-flex); }
.elementor-widget.mx-btn--ghost .elementor-button {
    background-color: transparent;
    color: var(--mx-paper);
    border: 1.5px solid rgba(255, 255, 255, .6);
    padding: 18.5px 30px;
    backdrop-filter: blur(6px);
}
.elementor-widget.mx-btn--ghost .elementor-button:hover { background-color: rgba(255, 255, 255, .12); }
/* "Learn more about Maxiflex" and "Shop now" */
.elementor-widget.mx-btn--outline .elementor-button,
.elementor-widget.mx-btn--solid .elementor-button {
    background-color: var(--mx-green-flex);
    color: var(--mx-paper);
    font-size: 14px;
    padding: 17px 28px;
}
.elementor-widget.mx-btn--solid .elementor-button { background-color: var(--mx-green-maxi); padding: 17px 28px; }
.e-con.mx-shop__actions .mx-btn--solid .elementor-button { padding: 17px 30px; }
.elementor-widget.mx-btn--outline .elementor-button:hover { background-color: var(--mx-green-maxi); }
.elementor-widget.mx-btn--solid .elementor-button:hover   { background-color: var(--mx-green-flex); }

/* Bordered pill — the "View all …" links and secondary actions */
.elementor-widget.mx-pill .elementor-button {
    background-color: transparent;
    border: 1.5px solid var(--mx-rule-strong);
    color: var(--mx-ink);
    font: 700 13.5px/1 var(--mx-font-body);
    padding: 14px 22px;
    border-radius: var(--mx-radius-pill);
    white-space: nowrap;
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.elementor-widget.mx-pill .elementor-button:hover {
    border-color: var(--mx-green-maxi);
    color: var(--mx-green-maxi);
    background-color: transparent;
}
/* Large pill: pairs with a solid button in an action row. 16px padding plus the
   1.5px border lands on 49px against the solid button's 48px, which is how the
   mockup keeps the two the same height. The small pill above is for the
   "View all …" links in section heads only. */
.elementor-widget.mx-pill--lg .elementor-button {
    font-size: 14px;
    padding: 16px 26px;
}

.elementor-widget.mx-pill--on-dark .elementor-button,
.e-con.mx-band--dark .mx-pill .elementor-button {
    border-color: rgba(255, 255, 255, .35);
    color: var(--mx-paper);
    padding: 14px 24px;
}
.e-con.mx-band--dark .mx-pill--lg .elementor-button { padding: 16px 26px; }
.e-con.mx-band--dark .mx-pill .elementor-button:hover {
    border-color: var(--mx-paper);
    background-color: rgba(255, 255, 255, .08);
    color: var(--mx-paper);
}

/* Small text link with a trailing arrow */
.elementor-widget.mx-link-arrow .elementor-button {
    background-color: transparent;
    border: 0;
    padding: 0;
    font: 700 13.5px/1 var(--mx-font-body);
    color: var(--mx-green-flex);
    box-shadow: none;
}
.elementor-widget.mx-link-arrow .elementor-button:hover { color: var(--mx-green-maxi); background-color: transparent; }
.elementor-widget.mx-link-arrow--lime .elementor-button { color: var(--mx-lime); font-size: 12.5px; }

.mx-dot { color: var(--mx-lime); margin: 0 7px; }

/* ---------------------------------------------------------------------------
 * 3. Utility bar & header — mockup bands 01 and 02
 *
 * Both are Elementor Pro Theme Builder templates (Maxiflex Header), not page
 * content. The utility bar scrolls away; only the header sticks, compressing
 * from 92px to 64px once past it.
 * --------------------------------------------------------------------------- */

/* --- Utility bar: 46px, dark green ------------------------------------- */

.e-con.mx-utility { background: var(--mx-green-flex); padding: 0; }
.e-con.mx-utility__inner { padding-inline: var(--mx-gutter); padding-block: 0; }
.e-con.mx-utility__inner > .e-con-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    height: 46px;
}
.e-con.mx-utility__left,
.e-con.mx-utility__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    padding: 0;
}
.e-con.mx-utility__left  { gap: 26px; }
.e-con.mx-utility__right { gap: 22px; }

.elementor-widget.mx-utility__phone,
.elementor-widget.mx-utility__link {
    font: 500 12.5px/1 var(--mx-font-body);
    color: var(--mx-on-dark);
    white-space: nowrap;
}
.elementor-widget.mx-utility__phone a { color: var(--mx-paper); font-weight: 600; }
.elementor-widget.mx-utility__link a  { color: var(--mx-on-dark); }
.elementor-widget.mx-utility__phone a:hover,
.elementor-widget.mx-utility__link a:hover { color: var(--mx-paper); }

/* The only place the alert orange appears — treat it as semantic, not a
   general secondary. See the token notes in section 1. */
.elementor-widget.mx-utility__alert {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    background: var(--mx-orange);
    color: var(--mx-orange-ink);
    font: 700 12.5px/1 var(--mx-font-body);
    padding: 6px 12px;
    border-radius: var(--mx-radius-pill);
    white-space: nowrap;
    position: relative;
}
/* A link to the Contact page's after-hours card. It takes the pill's own ink
   (Hello's reset would make it magenta), and its ::after stretches over the
   whole pill so the padding is clickable too. */
.elementor-widget.mx-utility__alert a { color: inherit; text-decoration: none; }
.elementor-widget.mx-utility__alert a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.elementor-widget.mx-utility__alert:hover { filter: brightness(1.07); }
.elementor-widget.mx-utility__alert a:focus-visible { outline: none; }
.elementor-widget.mx-utility__alert:has(a:focus-visible) { outline: 2px solid var(--mx-paper); outline-offset: 2px; }

/* WooCommerce cart, styled down to the mockup's translucent pill.
   The icon colour must come from the widget's own --toggle-button-* variables:
   `.elementor-menu-cart__toggle .elementor-button-icon` sets
   `color: var(--toggle-button-icon-color, #69727d)` at (0,2,0) from a
   stylesheet that loads after this one, and both the masked glyph
   (currentColor) and the "Cart ·" label sit inside that element, so they
   inherit the grey unless the variable is set. */
.elementor-widget.mx-utility__cart {
    --toggle-button-icon-color: var(--mx-paper);
    --toggle-button-icon-hover-color: var(--mx-paper);
    --toggle-button-text-color: var(--mx-paper);
    --toggle-button-hover-text-color: var(--mx-paper);
    --toggle-button-hover-background-color: rgba(255, 255, 255, .2);
    --toggle-button-hover-border-color: transparent;
}
.elementor-widget.mx-utility__cart .elementor-menu-cart__toggle .elementor-button {
    background: rgba(255, 255, 255, .12);
    color: var(--mx-paper);
    border: 0;
    border-radius: var(--mx-radius-pill);
    padding: 6px 13px;
    font: 500 12.5px/1 var(--mx-font-body);
    display: flex;
    align-items: center;
    gap: 7px;
}
/* Reads "cart-glyph Cart · 0". The widget's DOM order is [subtotal][icon[qty]],
   so the icon box is flexed and the three parts explicitly ordered: masked
   glyph, label, count. The subtotal is already hidden by show_subtotal off.

   Scoped to the toggle. `.elementor-button-text` is also the label inside the
   drawer's "View cart" and "Checkout" buttons, so hiding it widget-wide left
   both of those as blank grey slabs — visible in the drawer long before anyone
   thought to look at it. */
.elementor-widget.mx-utility__cart .elementor-menu-cart__toggle .elementor-button-text { display: none; }
.elementor-widget.mx-utility__cart .elementor-button-icon {
    display: flex;
    align-items: center;
    gap: 7px;
}
.elementor-widget.mx-utility__cart .elementor-button-icon svg,
.elementor-widget.mx-utility__cart .elementor-button-icon i { display: none; }
.elementor-widget.mx-utility__cart .elementor-button-icon::before {
    content: '';
    order: 1;
    width: 15px;
    height: 15px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url('assets/icons/icon-cart.png') center/contain no-repeat;
            mask: url('assets/icons/icon-cart.png') center/contain no-repeat;
}
.elementor-widget.mx-utility__cart .elementor-button-icon::after {
    content: 'Cart \00b7';
    order: 2;
    font: 500 12.5px/1 var(--mx-font-body);
}
.elementor-widget.mx-utility__cart .elementor-button-icon-qty {
    order: 3;
    background: transparent;
    color: inherit;
    font: 500 12.5px/1 var(--mx-font-body);
    min-width: 0;
    padding: 0;
    position: static;
}

/* --- Header: 92px, white, sticky --------------------------------------- */

.e-con.mx-header {
    background: var(--mx-paper);
    border-bottom: 1px solid var(--mx-rule);
    padding: 0;
    transition: box-shadow .25s ease;
}
.e-con.mx-header__inner { padding-inline: var(--mx-gutter); padding-block: 0; }
.e-con.mx-header__inner > .e-con-inner {
    display: flex;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 92px;
    transition: min-height .25s ease;
}
.elementor-widget.mx-header__logo { width: auto; flex: none; }
.elementor-widget.mx-header__logo img {
    height: 40px;
    width: auto;
    display: block;
    transition: height .25s ease;
}

/* Actions */
.e-con.mx-header__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: auto;
    flex: none;
    padding: 0;
}
.elementor-widget.mx-header__shop .elementor-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    font: 700 13.5px/1 var(--mx-font-body);
}
.elementor-widget.mx-header__shop .elementor-button::before {
    content: '';
    width: 15px;
    height: 15px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url('assets/icons/icon-cart.png') center/contain no-repeat;
            mask: url('assets/icons/icon-cart.png') center/contain no-repeat;
}
.elementor-widget.mx-btn--quote .elementor-button {
    background-color: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 700 13.5px/1 var(--mx-font-body);
    padding: 14px 24px;
    box-shadow: 0 6px 16px rgba(0, 147, 102, .28);
}
.elementor-widget.mx-btn--quote .elementor-button:hover { background-color: var(--mx-green-flex); }

/* --- Products mega panel ------------------------------------------------
   The Menu widget itself is configured entirely through its own settings —
   layout, animation, breakpoint, item colours, panel background, dropdown box
   — in scripts/build-header.php. Nothing here targets the widget's own markup.
   Only the panel's internal grid is ours, because those are our containers. */

.e-con.mx-mega { padding: 0; }
.e-con.mx-mega__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 300px;
    max-width: var(--mx-container);
    margin-inline: auto;
    padding-inline: var(--mx-gutter);
    gap: 0;
}
/* The Online Shop panel has three columns since Docking Accessories left the
   store (Sep 2026); on the Products panel's four tracks the promo would sit in
   column four with an empty track beside it. Desktop only — the mobile rule
   below stacks both panels to one column and must keep winning there. */
@media (min-width: 1025px) {
    .e-con.mx-mega--shop .e-con.mx-mega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; }
}
.e-con.mx-mega__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 32px 28px;
    border-right: 1px solid var(--mx-rule);
}
.e-con.mx-mega__col:first-child { padding-left: 0; }
.elementor-widget.mx-mega__label {
    font: 700 12px/1 var(--mx-font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mx-ink);
    white-space: nowrap;
}
.e-con.mx-mega__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
}
.elementor-widget.mx-mega__link a {
    font: 400 14px/1.3 var(--mx-font-body);
    color: var(--mx-ink-muted);
    transition: color .15s ease;
}
.elementor-widget.mx-mega__link a:hover { color: var(--mx-green-maxi); }
/* The single explicit bridge from catalogue into the store */
.elementor-widget.mx-mega__shoplink { margin-top: 4px; }
.elementor-widget.mx-mega__shoplink a { font: 700 13.5px/1 var(--mx-font-body); color: var(--mx-green-flex); }
.elementor-widget.mx-mega__shoplink a:hover { color: var(--mx-green-maxi); }

.e-con.mx-mega__promo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 32px 0 32px 28px;
    background: var(--mx-surface-band);
    border-right: 0;
}
.elementor-widget.mx-mega__promo-img img { width: 100%; height: 132px; object-fit: cover; border-radius: 12px; display: block; }
.elementor-widget.mx-mega__promo-title .elementor-heading-title { font: 700 15px/1.35 var(--mx-font-heading); color: var(--mx-ink); }
.elementor-widget.mx-mega__promo-link a { font: 700 13px/1 var(--mx-font-body); color: var(--mx-green-flex); }
.elementor-widget.mx-mega__promo-link a:hover { color: var(--mx-green-maxi); }

.e-con.mx-mega__empty { display: none; }

/* Stuck state: Elementor adds .elementor-sticky--effects past the offset, which
   is set to 46px so it fires exactly as the utility bar clears. */
.e-con.mx-header.elementor-sticky--effects > .e-con-inner,
.e-con.mx-header.elementor-sticky--effects .mx-header__inner > .e-con-inner { min-height: 64px; }
.e-con.mx-header.elementor-sticky--effects { box-shadow: 0 6px 20px rgba(0, 40, 28, .08); }
.e-con.mx-header.elementor-sticky--effects .mx-header__logo img { height: 32px; }

/* ---------------------------------------------------------------------------
 * 4. Footer — mockup band 13
 *
 * Theme Builder template (Maxiflex Footer). Four link columns over a
 * manufacturer logo row, then the four branches, then a bottom bar. The three
 * link columns are WordPress menus so the client can still edit them — the
 * mega menu took the header's nav out of Appearance > Menus, so keeping these
 * menu-driven matters.
 * --------------------------------------------------------------------------- */

.e-con.mx-footer { background: var(--mx-dark-footer); padding: 0; }
.e-con.mx-footer__inner { padding-inline: var(--mx-gutter); padding-block: 76px 0; }
.e-con.mx-footer__inner > .e-con-inner { display: flex; flex-direction: column; gap: 0; }

/* --- Link columns ------------------------------------------------------ */

.e-con.mx-footer__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 44px;
    padding: 0 0 56px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.e-con.mx-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
}
.elementor-widget.mx-footer__label {
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mx-ink-soft);
}
.elementor-widget.mx-footer__menu { width: 100%; }
.elementor-widget.mx-footer__menu .elementor-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.elementor-widget.mx-footer__menu .elementor-nav-menu a.elementor-item {
    font: 400 14px/1.35 var(--mx-font-body);
    color: var(--mx-rule-soft);
    padding: 0;
    transition: color .15s ease;
}
.elementor-widget.mx-footer__menu .elementor-nav-menu a.elementor-item:hover,
.elementor-widget.mx-footer__menu .elementor-nav-menu a.elementor-item.elementor-item-active { color: var(--mx-paper); }

/* Contact column */
.e-con.mx-footer__contactlist {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 0;
}
.elementor-widget.mx-footer__contactitem {
    font: 400 14px/1.5 var(--mx-font-body);
    color: var(--mx-rule-soft);
}
.elementor-widget.mx-footer__contactitem a { color: var(--mx-rule-soft); transition: color .15s ease; }
.elementor-widget.mx-footer__contactitem a:hover { color: var(--mx-paper); }

.e-con.mx-footer__socials {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 4px 0 0;
    width: auto;
}
.e-con.mx-social {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-green-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color .2s ease;
}
.e-con.mx-social:hover { background: var(--mx-green-maxi); }
.elementor-widget.mx-social__icon { width: 22px; flex: none; }
/* Source glyphs are dark artwork; flatten to white as the mockup's mask does */
.elementor-widget.mx-social__icon img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); display: block; }

/* --- Manufacturer logos ------------------------------------------------ */

.e-con.mx-footer__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    place-items: center;
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.elementor-widget.mx-footer__logo img {
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1) opacity(.42);
}
.e-con.mx-footer__logos > .mx-footer__logo:nth-child(1) img { width: 158px; height: 22px; }
.e-con.mx-footer__logos > .mx-footer__logo:nth-child(2) img { width: 203px; height: 51px; }
.e-con.mx-footer__logos > .mx-footer__logo:nth-child(3) img { width: 165px; height: 41px; }

/* --- Branches ---------------------------------------------------------- */

.e-con.mx-footer__branches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 40px 0;
}
.e-con.mx-branch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    background: rgba(255, 255, 255, .05);
    border-radius: 18px;
    padding: 22px;
}
.elementor-widget.mx-branch__city .elementor-heading-title { font: 700 15.5px/1.2 var(--mx-font-heading); color: var(--mx-paper); }
.elementor-widget.mx-branch__address { font: 400 13px/1.55 var(--mx-font-body); color: #a4b2ad; }
.elementor-widget.mx-branch__tel { font: 500 13px/1.55 var(--mx-font-body); color: var(--mx-rule-soft); margin-top: 2px; }
.elementor-widget.mx-branch__tel a { color: var(--mx-rule-soft); }
.elementor-widget.mx-branch__tel a:hover { color: var(--mx-paper); }
.elementor-widget.mx-branch__after { font: 400 12px/1.5 var(--mx-font-body); color: var(--mx-ink-soft); }
/* The number is a tel: link. The theme sets no global link colour, so without
   this Hello's reset paints it magenta (§18). */
.elementor-widget.mx-branch__after a { color: var(--mx-rule-soft); text-decoration: none; }
.elementor-widget.mx-branch__after a:hover { color: var(--mx-paper); }

/* --- Bottom bar -------------------------------------------------------- */

.e-con.mx-footer__bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.elementor-widget.mx-footer__mark { width: auto; flex: none; }
.elementor-widget.mx-footer__mark img { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .75; }
.elementor-widget.mx-footer__copy { font: 400 12.5px/1 var(--mx-font-body); color: var(--mx-ink-soft); width: auto; }

/* ---------------------------------------------------------------------------
 * 5. Hero — mockup band 03. Exactly 640px tall.
 * --------------------------------------------------------------------------- */

.e-con.mx-hero { position: relative; background-color: var(--mx-dark-hero); }
.e-con.mx-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(100deg, rgba(6,20,16,.88) 0%, rgba(6,20,16,.7) 42%, rgba(6,20,16,.12) 78%);
    pointer-events: none;
}
.e-con.mx-hero__inner {
    position: relative;
    z-index: 1;
    height: 640px;
    padding-block: 0;
}
.e-con.mx-hero__inner > .e-con-inner { display: block; height: 100%; position: relative; }
.e-con.mx-hero__content {
    position: absolute;
    top: 100px;
    left: 0;
    width: 730px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 0;
}
.elementor-widget.mx-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    width: auto;
    background: rgba(35, 164, 85, .16);
    border: 1.5px solid rgba(35, 164, 85, .55);
    border-radius: var(--mx-radius-pill);
    padding: 8px 16px;
    font: 600 12px/1 var(--mx-font-body);
    letter-spacing: .06em;
    text-transform: none;
    color: var(--mx-on-dark-lead);
    white-space: nowrap;
}
.elementor-widget.mx-hero__title .elementor-heading-title {
    font: 700 54px/1.18 var(--mx-font-heading);
    color: var(--mx-paper);
    letter-spacing: -.015em;
    text-wrap: balance;
}
.mx-hero__lead-words { font-weight: 300; }
.elementor-widget.mx-hero__lead {
    width: 540px;
    font: 400 16px/1.55 var(--mx-font-body);
    color: rgba(255, 255, 255, .8);
}
.e-con.mx-hero__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: auto;
    padding: 4px 0 0;
}

/* Featured card: absolute so the band stays exactly 640 and the card overhangs
   the band below by 64px, as the mockup does. */
.e-con.mx-hero__card {
    position: absolute;
    right: 0;
    bottom: -64px;
    width: 340px;
    display: flex;
    flex-direction: column;
    background: var(--mx-paper);
    border-radius: var(--mx-radius-hero);
    padding: 20px;
    gap: 14px;
    box-shadow: 0 20px 50px rgba(0, 40, 28, .24);
    z-index: 5;
}
.elementor-widget.mx-hero__card-img img { border-radius: var(--mx-radius-inner); height: 150px; width: 100%; object-fit: cover; display: block; }
.elementor-widget.mx-hero__card-title .elementor-heading-title { font: 700 20px/1.35 var(--mx-font-heading); color: var(--mx-ink); }
.elementor-widget.mx-hero__card-text { font: 400 14px/1.55 var(--mx-font-body); color: var(--mx-ink-muted); }

/* ---------------------------------------------------------------------------
 * 6. Trust & stats — mockup band 04
 * --------------------------------------------------------------------------- */

.e-con.mx-trust__partners {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 34px;
    padding: 0 0 56px;
}
.e-con.mx-trust__logos {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    height: 64px;
    place-items: center;
    padding: 0;
}
/* Mockup masks each logo to a flat #a3b0b3 silhouette at a fixed size.
   brightness(0) flattens the artwork to black while preserving alpha, and the
   opacity lands it on the same grey against white. */
.elementor-widget.mx-partner img {
    filter: brightness(0) opacity(.36);
    object-fit: contain;
    display: block;
}
.e-con.mx-trust__logos > .mx-partner:nth-child(1) img { width: 186px; height: 26px; }
.e-con.mx-trust__logos > .mx-partner:nth-child(2) img { width: 239px; height: 60px; }
.e-con.mx-trust__logos > .mx-partner:nth-child(3) img { width: 194px; height: 48px; }

.e-con.mx-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding: 0;
}
.e-con.mx-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    background: var(--mx-surface-tint);
    border-radius: var(--mx-radius-card);
    padding: 26px 24px;
}
.e-con.mx-stat--accent { background: var(--mx-green-flex); }
.elementor-widget.mx-stat__icon { flex: none; width: 64px; }
/* The mockup masks these icons to a flat colour rather than showing the source
   artwork. Reproduced here with a real CSS mask over theme-owned copies of the
   PNGs (assets/icons/), which is exact — a filter approximation was visibly
   wrong, rendering near-black instead of the dark brand green. The icons live
   in the theme, not the media library, so the paths are stable and versioned.
   The <img> is hidden; the mask silhouette plus background-color is the icon. */
.elementor-widget.mx-stat__icon {
    width: 64px;
    height: 64px;
    background-color: var(--mx-green-flex);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
.elementor-widget.mx-stat__icon img { visibility: hidden; width: 64px; height: 64px; display: block; }
.e-con.mx-stat--accent .mx-stat__icon { background-color: var(--mx-lime); }

.e-con.mx-stats > .mx-stat:nth-child(1) .mx-stat__icon { -webkit-mask-image: url('assets/icons/icon-years.png');         mask-image: url('assets/icons/icon-years.png'); }
.e-con.mx-stats > .mx-stat:nth-child(2) .mx-stat__icon { -webkit-mask-image: url('assets/icons/icon-branches.png');      mask-image: url('assets/icons/icon-branches.png'); }
.e-con.mx-stats > .mx-stat:nth-child(3) .mx-stat__icon { -webkit-mask-image: url('assets/icons/icon-installations.png'); mask-image: url('assets/icons/icon-installations.png'); }
.e-con.mx-stats > .mx-stat:nth-child(4) .mx-stat__icon { -webkit-mask-image: url('assets/icons/icon-service.png');       mask-image: url('assets/icons/icon-service.png'); }

.e-con.mx-stat__body { display: flex; flex-direction: column; gap: 4px; padding: 0; }
.elementor-widget.mx-stat__num { font: 700 40px/1 var(--mx-font-heading); color: var(--mx-green-accent); letter-spacing: -.02em; white-space: nowrap; }
.elementor-widget.mx-stat__label { font: 600 14px/1.35 var(--mx-font-body); color: var(--mx-ink-strong); }
.e-con.mx-stat--accent .mx-stat__num { color: var(--mx-lime); }
.e-con.mx-stat--accent .mx-stat__label { color: var(--mx-on-dark); }

/* ---------------------------------------------------------------------------
 * 7. Product categories — mockup band 05
 * --------------------------------------------------------------------------- */

.e-con.mx-cats__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    padding: 0;
}

/*
 * Nine cards, not the mockup's ten — Folding Doors was dropped at the client's
 * request. Five-across leaves a hole at the end of row two that reads as a card
 * that failed to load, so the home grid runs on ten half-tracks, every card
 * spans two, and the sixth starts one half-track in: row two sits centred under
 * row one, with every card the same width as before.
 *
 * Keyed to exactly nine (`:nth-child(9):last-child`), so putting a tenth card
 * back restores the plain grid with no edit here. Home only — the /products/
 * groups hold 2 to 6 cards each and stay left-aligned under their headings.
 * Tablet is three-across, where nine is already a clean 3 x 3.
 */
@media (min-width: 1025px) {
    .e-con.mx-cats:not(.mx-cats--products) .e-con.mx-cats__grid:has(> .e-con.mx-cat:nth-child(9):last-child) {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    .e-con.mx-cats:not(.mx-cats--products) .e-con.mx-cats__grid:has(> .e-con.mx-cat:nth-child(9):last-child) > .e-con.mx-cat {
        grid-column: span 2;
    }
    .e-con.mx-cats:not(.mx-cats--products) .e-con.mx-cats__grid:has(> .e-con.mx-cat:nth-child(9):last-child) > .e-con.mx-cat:nth-child(6) {
        grid-column: 2 / span 2;
    }
}
/* Two-across on mobile leaves the ninth card alone; centre it the same way. */
@media (max-width: 767px) {
    .e-con.mx-cats:not(.mx-cats--products) .e-con.mx-cats__grid:has(> .e-con.mx-cat:nth-child(9):last-child) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .e-con.mx-cats:not(.mx-cats--products) .e-con.mx-cats__grid:has(> .e-con.mx-cat:nth-child(9):last-child) > .e-con.mx-cat {
        grid-column: span 2;
    }
    .e-con.mx-cats:not(.mx-cats--products) .e-con.mx-cats__grid:has(> .e-con.mx-cat:nth-child(9):last-child) > .e-con.mx-cat:nth-child(9) {
        grid-column: 2 / span 2;
    }
}
.e-con.mx-cat {
    display: flex;
    flex-direction: column;
    background: var(--mx-paper);
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-card);
    overflow: hidden;
    gap: 0;
    padding: 0;
    transition: box-shadow .25s ease, transform .25s ease;
}
.e-con.mx-cat:hover { box-shadow: 0 16px 36px rgba(0, 40, 28, .12); transform: translateY(-4px); }
.elementor-widget.mx-cat__img { background: var(--mx-surface-band); }
.elementor-widget.mx-cat__img img { width: 100%; height: 148px; object-fit: cover; display: block; }
.e-con.mx-cat__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 18px 18px 20px;
    flex: 1;
}
.elementor-widget.mx-cat__title .elementor-heading-title { font: 700 16px/1.3 var(--mx-font-heading); color: var(--mx-ink); }
.elementor-widget.mx-cat__text { font: 400 13px/1.5 var(--mx-font-body); color: var(--mx-ink-soft); }
.e-con.mx-cat__body > .mx-link-arrow { margin-top: auto; }

/* ---------------------------------------------------------------------------
 * 8. Turnkey statement — mockup band 06
 * --------------------------------------------------------------------------- */

.e-con.mx-turnkey__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 72px;
}
.e-con.mx-turnkey__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 0;
}
.elementor-widget.mx-turnkey__title .elementor-heading-title {
    font: 700 44px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}
.elementor-widget.mx-turnkey__body { font: 400 16.5px/1.65 var(--mx-font-body); color: #4d5b56; }
.elementor-widget.mx-turnkey__img img { border-radius: 24px; height: 400px; width: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------------
 * 9. Industries — mockup band 07, first dark band
 * --------------------------------------------------------------------------- */

.e-con.mx-industries__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    align-items: center;
    gap: 64px;
}
.e-con.mx-industries__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 34px;
    padding: 0;
}
.e-con.mx-industries__left > .mx-section-head { padding-bottom: 0; }
.e-con.mx-industries__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    width: 100%;
}
.e-con.mx-ind {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
}
/* Green rounded badge holding a white glyph */
.e-con.mx-ind__badge {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--mx-green-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.elementor-widget.mx-ind__icon { width: 21px; }
.elementor-widget.mx-ind__icon img { width: 21px; height: 21px; object-fit: contain; filter: brightness(0) invert(1); }
.elementor-widget.mx-ind__label { font: 600 15px/1.25 var(--mx-font-body); color: var(--mx-paper); }
.elementor-widget.mx-industries__img img { border-radius: 24px; height: 400px; width: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------------
 * 10. Services / process — mockup band 08
 * --------------------------------------------------------------------------- */

.e-con.mx-process__inner > .e-con-inner {
    display: grid;
    grid-template-columns: 540px minmax(0, 1fr);
    align-items: start;
    gap: 64px;
}
.elementor-widget.mx-process__img img { border-radius: 24px; height: 540px; width: 100%; object-fit: cover; display: block; }
.e-con.mx-process__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 0;
}
.e-con.mx-process__body > .mx-section-head { padding-bottom: 0; }
/* Steps accordion.
   nested-accordion exposes its own custom properties (--n-accordion-*). Setting
   those is far more reliable than overriding its rules, same lesson as the
   container variables above. Layout and the panel treatment are ours. */
.elementor-widget.mx-steps {
    width: 100%;
    --n-accordion-title-icon-order: 2;              /* toggle sits at the right */
    --n-accordion-item-title-space-between: 12px;
    --n-accordion-item-title-distance-from-content: 0px;
    --n-accordion-title-font-size: 21px;
    --n-accordion-icon-size: 11px;
    --n-accordion-icon-normal-color: var(--mx-ink);
    --n-accordion-icon-active-color: var(--mx-paper);
    --n-accordion-border-width: 0;
}

/* Open row is a tinted rounded panel; closed rows are a bottom rule only.
   Each row is a <details>, so [open] is the state hook — no JS class needed. */
.elementor-widget.mx-steps .e-n-accordion-item {
    border: 1px solid transparent;
    border-bottom-color: var(--mx-rule);
    border-radius: 18px;
    background: transparent;
    transition: background-color .2s ease, border-color .2s ease;
}
.elementor-widget.mx-steps .e-n-accordion-item[open] {
    background: var(--mx-surface-tint);
    border-color: #dbe7e1;
}

/* Title row: number, title, circular toggle right */
.elementor-widget.mx-steps .e-n-accordion-item-title {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
}
.elementor-widget.mx-steps .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.elementor-widget.mx-steps .e-n-accordion-item[open] > .e-n-accordion-item-title {
    align-items: flex-start;
    padding: 24px 26px 10px;
}
.elementor-widget.mx-steps .e-n-accordion-item-title-header { flex: 1; order: 1; }
.elementor-widget.mx-steps .e-n-accordion-item-title-text {
    display: flex;
    align-items: baseline;
    gap: 22px;
    margin: 0;
}
.elementor-widget.mx-steps .mx-step__n {
    font: 700 13px/1.4 var(--mx-font-body);
    color: #9aa8a3;
    width: 26px;
    flex: none;
}
.elementor-widget.mx-steps .e-n-accordion-item[open] .mx-step__n { color: var(--mx-green-accent); }
.elementor-widget.mx-steps .mx-step__t {
    flex: 1;
    font: 700 21px/1.35 var(--mx-font-heading);
    color: var(--mx-ink);
}

/* Toggle: outlined circle closed, filled green open */
.elementor-widget.mx-steps .e-n-accordion-item-title-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--mx-radius-pill);
    border: 1.5px solid var(--mx-rule-strong);
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, border-color .2s ease;
}
.elementor-widget.mx-steps .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
    background: var(--mx-green-accent);
    border-color: var(--mx-green-accent);
}
.elementor-widget.mx-steps .e-n-accordion-item-title-icon span { display: flex; align-items: center; justify-content: center; }

/* Body copy aligns with the title: the panel's own 26px padding, plus the 26px
   number column, plus the 22px gap between them. */
.elementor-widget.mx-steps .e-n-accordion-item > .e-con.mx-step__panel {
    display: block;
    padding: 0 26px 24px calc(26px + 26px + 22px);
    border: 0;
}
.elementor-widget.mx-steps .mx-step__text {
    font: 400 15px/1.6 var(--mx-font-body);
    color: #4d5b56;
}

.e-con.mx-process__actions {
    display: flex;
    flex-direction: row;
    gap: 14px;
    padding: 0;
    width: auto;
}

/* ---------------------------------------------------------------------------
 * 11. Online shop feature — mockup band 09
 * --------------------------------------------------------------------------- */

.e-con.mx-shop__head {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 34px;
    padding: 0 0 38px;
    width: 100%;
}
.e-con.mx-shop__headtext { max-width: 620px; gap: 0; }
.e-con.mx-shop__headtext > .mx-eyebrow { margin-bottom: 14px; }
.elementor-widget.mx-shop__title .elementor-heading-title {
    font: 700 46px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
    margin-bottom: 16px;
}
.elementor-widget.mx-shop__lead { font: 400 15.5px/1.6 var(--mx-font-body); color: var(--mx-ink-muted); }
.e-con.mx-shop__actions { display: flex; flex-direction: row; gap: 12px; padding: 0; width: auto; }
.e-con.mx-shop__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    padding: 0;
}
.e-con.mx-shop-card {
    display: flex;
    flex-direction: column;
    background: var(--mx-paper);
    border-radius: var(--mx-radius-card);
    overflow: hidden;
    gap: 0;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 40, 28, .05);
}
.elementor-widget.mx-shop-card__img img { width: 100%; height: 168px; object-fit: cover; display: block; }
.e-con.mx-shop-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px 18px;
    flex: 1;
}
.elementor-widget.mx-shop-card__name  { font: 600 14.5px/1.35 var(--mx-font-body); color: var(--mx-ink); }
.elementor-widget.mx-shop-card__price { font: 700 19px/1 var(--mx-font-heading); color: var(--mx-green-flex); margin-bottom: auto; }

/*
 * The same card, rendered by [maxiflex_shop_feature] instead of by containers.
 * Every rule above is scoped .e-con / .elementor-widget, so the shortcode's
 * plain elements matched none of it — the same trap §17 records for buttons and
 * §22 for the eyebrow. The design is unchanged; only the selectors are widened.
 */
.mx-shop__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

article.mx-shop-card {
    display: flex;
    flex-direction: column;
    background: var(--mx-paper);
    border-radius: var(--mx-radius-card);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 40, 28, .05);
}

/* A background image rather than an <img>, so a portrait and a landscape
   product photograph crop to one card height. */
a.mx-shop-card__img {
    display: block;
    height: 168px;
    background: var(--mx-surface-band) center / cover no-repeat;
}

article.mx-shop-card .mx-shop-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px 18px;
    flex: 1;
}

a.mx-shop-card__name {
    font: 600 14.5px/1.35 var(--mx-font-body);
    color: var(--mx-ink);
    text-decoration: none;
}

a.mx-shop-card__name:hover { color: var(--mx-green-maxi); }

article.mx-shop-card .mx-shop-card__price {
    font: 700 19px/1 var(--mx-font-heading);
    color: var(--mx-green-flex);
    margin-bottom: auto;
}

article.mx-shop-card .mx-shop-card__price .woocommerce-Price-amount { color: inherit; font: inherit; }

.mx-shop-card__unit {
    font: 500 11.5px/1 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

/* The bare-element twin of .elementor-widget.mx-btn--cart below. */
article.mx-shop-card a.mx-btn--cart {
    align-self: stretch;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mx-green-maxi);
    color: var(--mx-paper);
    border-radius: var(--mx-radius-pill);
    font: 700 13.5px/1 var(--mx-font-body);
    padding: 14px 18px;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease;
}

article.mx-shop-card a.mx-btn--cart:hover { background-color: var(--mx-green-flex); color: var(--mx-paper); }

/* WooCommerce appends its own "View cart" link after a successful ajax add. */
article.mx-shop-card a.added_to_cart {
    align-self: stretch;
    text-align: center;
    font: 700 12.5px/1 var(--mx-font-body);
    color: var(--mx-green-flex);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-top: 10px;
}

article.mx-shop-card a.added_to_cart:hover { color: var(--mx-green-maxi); }

/* While the request is in flight. */
article.mx-shop-card a.mx-btn--cart.loading { opacity: .6; }
/* The card body is align-items:flex-start, so the widget must stretch itself
   or the button shrinks to its text width instead of filling the card. */
.elementor-widget.mx-btn--cart { align-self: stretch; width: 100%; }
.elementor-widget.mx-btn--cart .elementor-button {
    background-color: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 700 13px/1 var(--mx-font-body);
    padding: 13px 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
}
.elementor-widget.mx-btn--cart .elementor-button::before {
    content: '';
    width: 14px;
    height: 14px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url('assets/icons/icon-cart.png') center/contain no-repeat;
            mask: url('assets/icons/icon-cart.png') center/contain no-repeat;
}
.elementor-widget.mx-btn--cart .elementor-button:hover { background-color: var(--mx-green-flex); }

/* ---------------------------------------------------------------------------
 * 12. Latest news — mockup band 10, second dark band
 * --------------------------------------------------------------------------- */

.e-con.mx-news__grid,
.mx-news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 0;
}
.e-con.mx-news-card,
article.mx-news-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    overflow: hidden;
    gap: 0;
    padding: 0;
}
/* Image is 250px with the tag pill overlaid top-left */
.e-con.mx-news-card__media,
div.mx-news-card__media { position: relative; height: 250px; background: var(--mx-dark-card); padding: 0; display: block; overflow: hidden; }
.elementor-widget.mx-news-card__img,
.elementor-widget.mx-news-card__img img,
img.mx-news-card__img { width: 100%; height: 250px; object-fit: cover; display: block; }
.elementor-widget.mx-news-card__tag,
span.mx-news-card__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    width: auto;
    background: var(--mx-green-accent);
    color: var(--mx-paper);
    font: 600 10.5px/1 var(--mx-font-body);
    letter-spacing: .08em;
    padding: 8px 12px;
    border-radius: var(--mx-radius-pill);
    pointer-events: none;
    white-space: nowrap;
}
.e-con.mx-news-card__body,
div.mx-news-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    flex: 1;
}
.elementor-widget.mx-news-card__date,
div.mx-news-card__date { font: 500 12px/1 var(--mx-font-body); color: rgba(255, 255, 255, .5); }
.elementor-widget.mx-news-card__title .elementor-heading-title,
h3.mx-news-card__title { font: 600 19px/1.4 var(--mx-font-heading); color: var(--mx-paper); }
.elementor-widget.mx-news-card__excerpt,
p.mx-news-card__excerpt { font: 400 14.5px/1.6 var(--mx-font-body); color: rgba(255, 255, 255, .62); }
.e-con.mx-news-card__body > .mx-link-arrow,
a.mx-news-card__more { margin-top: auto; padding-top: 6px; }
h3.mx-news-card__title,
p.mx-news-card__excerpt { margin: 0; }
h3.mx-news-card__title a { color: inherit; text-decoration: none; }
h3.mx-news-card__title a:hover { color: var(--mx-lime); }
a.mx-news-card__more { font: 700 12.5px/1 var(--mx-font-body); color: var(--mx-lime); text-decoration: none; }
a.mx-news-card__more:hover { color: var(--mx-green-maxi); }
.mx-news-card__noimg { display: flex; align-items: center; justify-content: center; height: 100%; font: 500 12px/1 var(--mx-font-body); color: rgba(255, 255, 255, .5); }

/* ---------------------------------------------------------------------------
 * 13. Testimonial — mockup band 11
 * --------------------------------------------------------------------------- */

.e-con.mx-testimonial__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
    max-width: 880px;
    margin-inline: auto;
}
.elementor-widget.mx-testimonial__glyph {
    font: 700 150px/1 var(--mx-font-quote);
    color: var(--mx-on-dark-soft);
    height: 70px;
    display: flex;
    align-items: flex-start;
}
.elementor-widget.mx-testimonial__quote .elementor-heading-title {
    font: 400 30px/1.48 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.01em;
    text-wrap: pretty;
    border: 0;
    padding: 0;
    margin: 0;
    font-style: normal;
}
.e-con.mx-testimonial__by {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding: 0;
    width: auto;
}
.elementor-widget.mx-testimonial__avatar { flex: none; width: 54px; }
.elementor-widget.mx-testimonial__avatar img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.elementor-widget.mx-testimonial__attrib { text-align: left; font: 400 14px/1.5 var(--mx-font-body); color: var(--mx-ink-muted); }
.elementor-widget.mx-testimonial__attrib strong { color: var(--mx-ink); font-weight: 700; }

/* ---------------------------------------------------------------------------
 * 14. Pre-footer CTA — mockup band 12. Centred column, form as one row.
 * --------------------------------------------------------------------------- */

.e-con.mx-cta { background: var(--mx-green-flex); position: relative; }
.e-con.mx-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(0, 60, 40, .86), rgba(4, 26, 19, .92));
    pointer-events: none;
}
.e-con.mx-cta__inner { position: relative; z-index: 1; }
.e-con.mx-cta__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
}
.elementor-widget.mx-cta__title .elementor-heading-title {
    font: 700 46px/1.2 var(--mx-font-heading);
    color: var(--mx-paper);
    letter-spacing: -.015em;
    max-width: 760px;
}
.elementor-widget.mx-cta__alt { font: 500 14.5px/1.4 var(--mx-font-body); color: rgba(255, 255, 255, .75); }
.elementor-widget.mx-cta__alt a { color: var(--mx-paper); font-weight: 700; text-decoration: none; }

/* One row: three fields plus a 210px action. Elementor stacks form fields by
   default, so the field groups are placed on an explicit grid. */
.elementor-widget.mx-cta__form { width: 1120px; max-width: 100%; }
.elementor-widget.mx-cta__form .elementor-form-fields-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 210px;
    gap: 12px;
    text-align: left;
    margin: 0;
}
.elementor-widget.mx-cta__form .elementor-field-group { padding: 0; width: auto; max-width: none; }
.elementor-widget.mx-cta__form .elementor-field-textual {
    background-color: var(--mx-paper);
    height: 58px;
    border: 0;
    border-radius: var(--mx-radius-pill);
    padding: 0 22px;
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    width: 100%;
}
.elementor-widget.mx-cta__form .elementor-field-textual::placeholder { color: #98a5a0; opacity: 1; }
.elementor-widget.mx-cta__form .elementor-button[type="submit"] {
    background-color: var(--mx-green-accent);
    color: var(--mx-paper);
    height: 58px;
    border: 0;
    border-radius: var(--mx-radius-pill);
    font: 700 14.5px/1 var(--mx-font-body);
    padding: 0 24px;
    width: 100%;
    justify-content: center;
}
.elementor-widget.mx-cta__form .elementor-button[type="submit"]:hover { background-color: var(--mx-green-maxi); }

/* ---------------------------------------------------------------------------
 * 15. Store — per-metre length picker and enquiry-only products.
 *
 * These are WooCommerce templates, not Elementor content, so the selectors are
 * plain. Markup comes from the maxiflex-pvc-pricing plugin, which ships no CSS
 * of its own; it only emits these classes.
 * --------------------------------------------------------------------------- */

/* -- Length picker (per-metre products) ----------------------------------- */

.mx-length {
    margin: 0 0 22px;
    padding: 20px 22px;
    background: var(--mx-surface-tint);
    border-radius: var(--mx-radius-inner);
}
.mx-length__label {
    display: block;
    margin-bottom: 10px;
    font: 600 14px/1.4 var(--mx-font-body);
    color: var(--mx-ink-strong);
}
.mx-length__unit { font-weight: 400; color: var(--mx-ink-muted); }

.mx-length__input {
    width: 100%;
    max-width: 200px;
    padding: 13px 16px;
    border: 1.5px solid var(--mx-rule);
    border-radius: var(--mx-radius-pill);
    background: var(--mx-paper);
    font: 500 15px/1 var(--mx-font-body);
    color: var(--mx-ink-strong);
}
.mx-length__input:focus {
    outline: none;
    border-color: var(--mx-green-maxi);
}
/* The spinners are too small to hit reliably and the field is the main control
   on the page, so the number is typed rather than nudged. */
.mx-length__input::-webkit-outer-spin-button,
.mx-length__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mx-length__input { -moz-appearance: textfield; appearance: textfield; }

.mx-length__range {
    margin: 10px 0 0;
    font: 400 13px/1.5 var(--mx-font-body);
    color: var(--mx-ink-muted);
}
.mx-length__total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--mx-rule-soft);
}
.mx-length__total-label {
    font: 600 13px/1 var(--mx-font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mx-ink-muted);
}
.mx-length__total-value {
    font: 700 24px/1 var(--mx-font-heading);
    color: var(--mx-green-flex);
}
.mx-length__total-value .woocommerce-Price-amount { color: inherit; font: inherit; }

/* -- Enquiry-only products ------------------------------------------------ */

.mx-enquiry { margin: 0 0 24px; }
.mx-enquiry__price {
    font: 600 18px/1.3 var(--mx-font-body);
    color: var(--mx-ink-muted);
}
.mx-enquiry__cta {
    display: inline-block;
    margin-bottom: 26px;
    padding: 16px 26px;
    border: 0;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 700 14px/1 var(--mx-font-body);
    text-decoration: none;
}
.mx-enquiry__cta:hover { background: var(--mx-green-flex); color: var(--mx-paper); }

.mx-enquiry__form {
    padding: 26px;
    background: var(--mx-surface-tint);
    border-radius: var(--mx-radius-card);
}
.mx-enquiry__notice {
    margin: 0;
    font: 400 14px/1.5 var(--mx-font-body);
    color: var(--mx-orange-ink);
}

/* -- Loop buttons on both kinds ------------------------------------------- */

.woocommerce ul.products li.product .button.mx-product__choose,
.woocommerce ul.products li.product .button.mx-product__enquire {
    padding: 14px 22px;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 600 13.5px/1 var(--mx-font-body);
}
.woocommerce ul.products li.product .button.mx-product__choose:hover,
.woocommerce ul.products li.product .button.mx-product__enquire:hover {
    background: var(--mx-green-flex);
}

/* ---------------------------------------------------------------------------
 * 16. Shop page
 *
 * Built from the client-approved mockup:
 *   design/shop page wireframe/Maxiflex Shop Mockup.dc.html
 * Every number below is lifted from that file. If one disagrees, the file wins.
 *
 * Three of these sections render from theme shortcodes rather than Elementor
 * widgets (the category cards, the hero search and the product card's range and
 * flag), because their content is live catalogue data. Their markup is plain
 * HTML inside `.elementor-shortcode`, so those rules need no Elementor
 * specificity prefix — only the widget-backed parts do.
 * --------------------------------------------------------------------------- */

/* Elementor applies a boxed container's BLOCK padding to its .e-con-inner, not
   to the container itself:
     .e-con > .e-con-inner { padding-block-start: var(--padding-block-start) }
   with --padding-top defaulting to 10px. Each band's own padding is set on the
   __inner container below, so without this the default lands a second time and
   every band renders 20px taller than the mockup. */
.e-con.mx-shophero__inner  > .e-con-inner,
.e-con.mx-assure__inner    > .e-con-inner,
.e-con.mx-shopcats__inner  > .e-con-inner,
.e-con.mx-best__inner      > .e-con-inner,
.e-con.mx-guide__inner     > .e-con-inner,
.e-con.mx-trade__inner     > .e-con-inner,
.e-con.mx-quoted__inner    > .e-con-inner {
    padding-block: 0;
}

/* -- 16.1 Hero ------------------------------------------------------------- */

.e-con.mx-shophero {
    padding: 0;
    min-height: 420px;
    position: relative;
    justify-content: center;
}
/* The mockup's overlay is a 96deg wash, heaviest at the left where the copy
   sits. A pseudo-element rather than a gradient on the container itself, so
   Elementor keeps ownership of the background image it was given. */
.e-con.mx-shophero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg, rgba(6, 22, 17, .9) 0%, rgba(6, 22, 17, .74) 48%, rgba(6, 22, 17, .34) 100%);
    pointer-events: none;
}
.e-con.mx-shophero__inner {
    position: relative;
    z-index: 1;
    padding: 56px var(--mx-gutter);
}
.e-con.mx-shophero__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
/* The landing page states these as Elementor widgets; the listing derives them
   from context and prints plain HTML via [maxiflex_listing_head]. Both carry the
   same classes, so each rule is written to match either shape. */
.mx-crumbs {
    font: 500 12.5px/1 var(--mx-font-body);
    color: rgba(255, 255, 255, .6);
}
.mx-crumbs a { color: rgba(255, 255, 255, .6); }
.mx-crumbs a:hover { color: var(--mx-paper); }
/* Declared, not inherited: `.page-content a{text-decoration:underline}` is
   (0,1,1) and so is this, so the tie goes on load order — but only for a
   property this rule actually states. Section 24 records the same trap on
   a.mx-btn; it reaches every breadcrumb printed inside a page's content. */
.mx-crumbs a { text-decoration: none; }
.mx-crumbs span { color: var(--mx-paper); }
/* The separator is lime, the one small accent the mockup keeps in the header. */
.mx-crumbs__sep {
    color: var(--mx-lime);
    margin: 0 9px;
}
.mx-shophero__title,
.elementor-widget.mx-shophero__title .elementor-heading-title {
    font: 700 clamp(30px, 3.5vw, 50px)/1.16 var(--mx-font-heading);
    color: var(--mx-paper);
    letter-spacing: -.015em;
    max-width: 800px;
    text-wrap: balance;
    margin: 0;
}
.mx-shophero__lead,
.elementor-widget.mx-shophero__lead {
    font: 400 16px/1.55 var(--mx-font-body);
    color: rgba(255, 255, 255, .8);
    max-width: 600px;
    margin: 0;
}
/*
 * That max-width does not survive on its own. Elementor ships
 *   .e-con.e-con>.e-con-inner>.elementor-widget,
 *   .elementor.elementor .e-con>.elementor-widget { max-width: 100% }
 * at (0,4,0), and its stylesheet loads after this file, so a max-width set on a
 * widget at (0,2,0) silently never applies — the shop hero's lead ran the full
 * 1440px and only looked right because the sentence was short enough.
 *
 * Doubling `.elementor` reaches (0,5,0) and wins. Descendant rather than child
 * combinators, because a boxed container puts widgets under .e-con-inner and a
 * full-width one does not.
 *
 * Only max-width is affected: Elementor sets no width on widgets here, so the
 * width rules elsewhere in this file are unaffected.
 *
 * The mockup states this one as `width: 600px` on the paragraph.
 */
.elementor.elementor .e-con .elementor-widget.mx-shophero__lead { max-width: 600px; }
/* The listing's whole text block is one shortcode, so it owns the gaps the
   hero's flex column would otherwise provide between three separate widgets. */
.elementor-widget.mx-shophero__head .elementor-shortcode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
.elementor-widget.mx-shophero__search { margin-top: 8px; width: 100%; }

/* -- 16.2 Hero search ------------------------------------------------------ */

.mx-shopsearch {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--mx-paper);
    border-radius: var(--mx-radius-pill);
    padding: 8px 8px 8px 0;
    max-width: 660px;
    box-sizing: border-box;
    box-shadow: 0 16px 40px rgba(0, 30, 20, .3);
}
/* Hello Elementor's reset.css styles these by attribute —
     input[type=search], select, textarea { border: 1px solid #666; ... width: 100% }
   at (0,1,1), which beats a single class. Every rule here is doubled up on the
   form class to clear it. */
.mx-shopsearch .mx-shopsearch__cat,
.mx-shopsearch .mx-shopsearch__q {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    width: auto;
    transition: none;
}
.mx-shopsearch .mx-shopsearch__cat {
    flex: none;
    /* The native control paints its own double-chevron; the mockup shows a
       single small triangle, so the arrow is drawn here instead. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%239aa8a3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding: 14px 34px 14px 18px;
    font: 600 13.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    cursor: pointer;
    /* Fixed, not auto. A select sizes itself to its widest option, so the caret
       would sit far from the label and steal room from the search field. Pinned
       to what "All categories" occupies at this size, which lands the caret the
       same 9px clear of the text as the mockup's `gap: 9px`. Longer selections
       ellipsise. */
    width: 150px;
    text-overflow: ellipsis;
}
/* The divider is its own element rather than a border on the select, so it can
   keep clear air on both sides and stay shorter than the pill, as drawn. */
.mx-shopsearch__rule {
    flex: none;
    width: 1px;
    align-self: stretch;
    background: var(--mx-rule);
}
.mx-shopsearch .mx-shopsearch__cat:focus-visible,
.mx-shopsearch .mx-shopsearch__q:focus-visible {
    outline: 2px solid var(--mx-green-maxi);
    outline-offset: -2px;
    border-radius: var(--mx-radius-pill);
}
.mx-shopsearch .mx-shopsearch__q {
    flex: 1;
    min-width: 0;
    padding: 14px 8px 14px 20px;
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
}
.mx-shopsearch .mx-shopsearch__q::placeholder { color: #98a5a0; opacity: 1; }
/* Chrome paints its own clear button inside a search field. */
.mx-shopsearch .mx-shopsearch__q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mx-shopsearch__go {
    flex: none;
    border: 0;
    background: var(--mx-green-accent);
    color: var(--mx-paper);
    font: 700 13.5px/1 var(--mx-font-body);
    padding: 15px 28px;
    border-radius: var(--mx-radius-pill);
    cursor: pointer;
    transition: background-color .2s ease;
}
/* Focus as well as hover — clicking Search leaves it focused, and Hello's reset
   paints a focused <button> magenta. See the note on .mx-chip. */
.mx-shopsearch .mx-shopsearch__go:hover,
.mx-shopsearch .mx-shopsearch__go:focus { background: var(--mx-green-maxi); color: var(--mx-paper); }
.mx-shopsearch .mx-shopsearch__go:focus-visible { outline: 2px solid var(--mx-green-flex); outline-offset: 2px; }

/* -- 16.3 Assurances strip ------------------------------------------------- */

.e-con.mx-assure {
    padding: 0;
    background-color: var(--mx-surface-tint);
    border-bottom: 1px solid var(--mx-rule);
}
.e-con.mx-assure__inner { padding: 26px var(--mx-gutter); }
.e-con.mx-assure__inner > .e-con-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.e-con.mx-assure__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 0;
    /* Containers default to flex-wrap: wrap, and the text child asks for the
       full width, so without nowrap the label drops below its icon. */
    flex-wrap: nowrap;
}
/* Masked to a flat green, not tinted artwork — a filter approximation renders
   these near-black. Widths follow each icon's own aspect at a 34px cap, which is
   what the mockup does. */
.e-con.mx-assure__icon {
    flex: none;
    height: 44px;
    padding: 0;
    background-color: var(--mx-green-flex);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: auto 34px;
    mask-size: auto 34px;
}
.e-con.mx-assure__icon--clock {
    width: 34px;
    -webkit-mask-image: url('assets/icons/shop-icon-clock.png');
    mask-image: url('assets/icons/shop-icon-clock.png');
}
.e-con.mx-assure__icon--truck {
    width: 63px;
    -webkit-mask-image: url('assets/icons/shop-icon-truck.png');
    mask-image: url('assets/icons/shop-icon-truck.png');
}
.e-con.mx-assure__icon--cut {
    width: 33px;
    -webkit-mask-image: url('assets/icons/shop-icon-cut.png');
    mask-image: url('assets/icons/shop-icon-cut.png');
}
.e-con.mx-assure__icon--cart {
    width: 35px;
    -webkit-mask-image: url('assets/icons/shop-icon-cart.png');
    mask-image: url('assets/icons/shop-icon-cart.png');
}
/* The catalogue archives reuse this strip with the home page's stat icons —
   capability rather than fulfilment. All four are square, so they take the
   34px mask height directly. */
.e-con.mx-assure__icon--years,
.e-con.mx-assure__icon--service,
.e-con.mx-assure__icon--installations,
.e-con.mx-assure__icon--branches { width: 34px; }
.e-con.mx-assure__icon--years {
    -webkit-mask-image: url('assets/icons/icon-years.png');
    mask-image: url('assets/icons/icon-years.png');
}
.e-con.mx-assure__icon--service {
    -webkit-mask-image: url('assets/icons/icon-service.png');
    mask-image: url('assets/icons/icon-service.png');
}
.e-con.mx-assure__icon--installations {
    -webkit-mask-image: url('assets/icons/icon-installations.png');
    mask-image: url('assets/icons/icon-installations.png');
}
.e-con.mx-assure__icon--branches {
    -webkit-mask-image: url('assets/icons/icon-branches.png');
    mask-image: url('assets/icons/icon-branches.png');
}
.e-con.mx-assure__text { display: flex; flex-direction: column; gap: 3px; padding: 0; min-width: 0; }
.elementor-widget.mx-assure__title { font: 700 14px/1.25 var(--mx-font-body); color: var(--mx-ink); }
.elementor-widget.mx-assure__sub   { font: 400 12.5px/1.35 var(--mx-font-body); color: #6b7873; }

/* -- 16.4 Shop by category ------------------------------------------------- */

.e-con.mx-shopcats { padding: 0; background-color: var(--mx-paper); }
.e-con.mx-shopcats__inner { padding: 88px var(--mx-gutter) 0; }
.e-con.mx-shopcats__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mx-shopcats__grid {
    display: grid;
    /* Two ranges since Docking Accessories left the store (Sep 2026). Three
       tracks would leave the third empty. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.mx-shopcat {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-hero);
    overflow: hidden;
    background: var(--mx-paper);
}
.mx-shopcat__media {
    position: relative;
    height: 210px;
    background-color: var(--mx-surface-band);
    background-size: cover;
    background-position: center;
}
.mx-shopcat__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(6, 22, 17, .72);
    color: var(--mx-paper);
    font: 600 10.5px/1 var(--mx-font-body);
    letter-spacing: .08em;
    padding: 8px 12px;
    border-radius: var(--mx-radius-pill);
}
.mx-shopcat__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    flex: 1;
}
.mx-shopcat__title { font: 700 21px/1.3 var(--mx-font-heading); color: var(--mx-ink); margin: 0; }
.mx-shopcat__from  { font: 600 13px/1 var(--mx-font-body); color: var(--mx-green-maxi); margin-top: -10px; }
.mx-shopcat__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-shopcat__pill {
    background: var(--mx-surface-tint);
    border: 1px solid #e0eae5;
    color: var(--mx-ink-strong);
    font: 500 12.5px/1 var(--mx-font-body);
    padding: 9px 13px;
    border-radius: var(--mx-radius-pill);
    transition: border-color .2s ease, color .2s ease;
}
.mx-shopcat__pill:hover { border-color: var(--mx-green-maxi); color: var(--mx-green-maxi); }
.mx-shopcat__cta {
    align-self: flex-start;
    margin-top: auto;
    background: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 700 13px/1 var(--mx-font-body);
    padding: 15px 26px;
    border-radius: var(--mx-radius-pill);
    transition: background-color .2s ease;
}
.mx-shopcat__cta:hover { background: var(--mx-green-flex); color: var(--mx-paper); }

/* -- 16.5 Best sellers ----------------------------------------------------- */

.e-con.mx-best { padding: 0; background-color: var(--mx-paper); }
.e-con.mx-best__inner { padding: 88px var(--mx-gutter) var(--mx-band-pad); }
.e-con.mx-best__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.e-con.mx-best__head {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
    margin-bottom: 28px;
}
/* The filter's own pill shape comes from the widget's controls (set in
   build-shop-page.php); only the row layout is ours. */
.elementor-widget.mx-best__filter { width: auto; }
/* The filter renders each option as a fieldset row, which stacks by default.
   Only the row layout and the label are ours — pill padding, radius and every
   colour are set on the widget itself in build-shop-page.php, because the
   widget's own stylesheet loads after this file and targets
   .jet-radio-list__button directly. */
.elementor-widget.mx-best__filter fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}
/* The filter's legend names the control for a screen reader, but the mockup
   shows pills alone — hide it visually rather than dropping it. */
.elementor-widget.mx-best__filter legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Pill spacing is the fieldset's `gap`. The widget's own items_space_between is
   set to 0 in build-shop-page.php: it assumes a vertical list and emits
     .jet-radio-list__row:not(:last-child){margin-bottom:Npx}
   which on a horizontal row lifts every pill but the last by half that margin,
   leaving the final one looking dropped. That rule lands at (0,5,0) — beyond
   the theme's reach — so it has to be neutralised at the control, not here. */
.elementor-widget.mx-best__filter .jet-radio-list-wrapper { margin: 0; }
.elementor-widget.mx-best__filter .jet-radio-list__row { margin: 0; padding: 0; }
.elementor-widget.mx-best__filter .jet-radio-list__item { margin: 0; padding: 0; cursor: pointer; }
.elementor-widget.mx-best__filter .jet-radio-list__button { transition: border-color .2s ease, background-color .2s ease, color .2s ease; }

.elementor-widget.mx-best__grid .elementor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
/* A link to the full archive, centred below the grid. */
.e-con.mx-best__more {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    margin-top: 40px;
}
.elementor-widget.mx-best__more .elementor-button,
.e-con.mx-best__more .elementor-button {
    padding: 17px 34px;
    font-size: 14px;
}

/* -- 16.6 Product card (the loop item) ------------------------------------- */

.e-con.mx-card {
    padding: 0;
    background-color: var(--mx-paper);
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-card);
    overflow: hidden;
    height: 100%;
}
.e-con.mx-card__media {
    position: relative;
    padding: 0;
    height: 200px;
    background-color: #eef2f0;
}
.elementor-widget.mx-card__img,
.elementor-widget.mx-card__img .elementor-widget-container,
.elementor-widget.mx-card__img figure,
.elementor-widget.mx-card__img a { height: 100%; width: 100%; }
.elementor-widget.mx-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.elementor-widget.mx-card__flagwrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    width: auto;
}
.mx-card__flag {
    display: inline-block;
    background: var(--mx-lime);
    color: #20300b;
    font: 700 10px/1 var(--mx-font-body);
    letter-spacing: .08em;
    padding: 7px 11px;
    border-radius: var(--mx-radius-pill);
}
/* Orange is the alert colour elsewhere in the system; a price reduction is the
   one other place the mockup spends it. */
/* The mockup prints this one in caps ("ON SALE") where the others are title
   case, so the transform sits on the modifier rather than on every flag. */
.mx-card__flag--sale {
    background: var(--mx-orange);
    color: var(--mx-paper);
    text-transform: uppercase;
}

.e-con.mx-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    flex: 1;
    border-top: 1px solid #eef2f0;
}
.mx-card__range {
    font: 500 11.5px/1 var(--mx-font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9aa8a3;
}
/* Real product names run far longer than the mockup's ("Strip Curtain
   Replacement PVC strips – Standard Flat Clear" against "Bulk roll, 50m"), so
   without a clamp one long name sets the height of its whole grid row. */
.elementor-widget.mx-card__name .elementor-heading-title,
.elementor-widget.mx-card__name .elementor-heading-title a {
    font: 600 15px/1.35 var(--mx-font-body);
    color: var(--mx-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.elementor-widget.mx-card__name .elementor-heading-title a:hover { color: var(--mx-green-maxi); }
/* The mockup's spec is a single short line ("Flat clear PVC · 6 opening sizes").
   Real short descriptions are several paragraphs and sometimes carry a brochure
   button, which makes every card a different height. Clamp to two lines and drop
   the furniture; the full copy is on the product page, one click away. */
.elementor-widget.mx-card__spec .woocommerce-product-details__short-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.elementor-widget.mx-card__spec,
.elementor-widget.mx-card__spec p {
    font: 400 12.5px/1.45 var(--mx-font-body);
    color: var(--mx-ink-faint);
    margin: 0;
}
.elementor-widget.mx-card__spec p + p,
.elementor-widget.mx-card__spec ul,
.elementor-widget.mx-card__spec img,
.elementor-widget.mx-card__spec .button,
.elementor-widget.mx-card__spec a.button { display: none; }
.elementor-widget.mx-card__spec strong,
.elementor-widget.mx-card__spec em { font-weight: 400; font-style: normal; }
/* 24 short descriptions open with an <h2> repeating the product name. Left
   alone it renders at heading size inside the card and dwarfs the title above
   it, so headings are flattened to the same line as the rest of the spec. */
.elementor-widget.mx-card__spec h1,
.elementor-widget.mx-card__spec h2,
.elementor-widget.mx-card__spec h3,
.elementor-widget.mx-card__spec h4,
.elementor-widget.mx-card__spec h5,
.elementor-widget.mx-card__spec h6 {
    font: 400 12.5px/1.45 var(--mx-font-body);
    color: var(--mx-ink-faint);
    margin: 0;
    display: inline;
}
.elementor-widget.mx-card__price { margin: 6px 0 auto; }
/* (0,4,1). WooCommerce ships
     .woocommerce:where(...) div.product p.price { color: #958e09 }
   at (0,3,2) — :where() contributes nothing, but `div.product p.price` does —
   so the obvious (0,3,0) rule loses and prices render its default olive. */
.e-con.mx-card .elementor-widget.mx-card__price p.price,
.e-con.mx-card .elementor-widget.mx-card__price span.price {
    font: 700 20px/1 var(--mx-font-heading);
    color: var(--mx-green-flex);
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
/* The per-metre suffix ("per metre") and any strike-through original price are
   the small grey half of the price line in the mockup. */
/* Only the unit and a struck-out original price go small and grey. NOT
   `.woocommerce-Price-amount + span`: WooCommerce renders a variable product's
   range as
     <span class="…amount">…</span> <span aria-hidden="true">&ndash;</span> <span class="…amount">…</span>
   so that selector also caught the separator and shrank the dash to a faint
   hyphen. The per-metre unit now carries .mx-price-unit from the pricing plugin. */
.e-con.mx-card .elementor-widget.mx-card__price p.price small,
.e-con.mx-card .elementor-widget.mx-card__price p.price .mx-price-unit,
.e-con.mx-card .elementor-widget.mx-card__price p.price del {
    font: 400 11.5px/1 var(--mx-font-body);
    color: var(--mx-ink-faint);
}
/* The catalogue card ends here instead of at a price and an add-to-cart. Maxi
   green rather than the shop card's accent: the design system reserves #009366
   for the primary CTA fill, and on these products that is the quote. */
.elementor-widget.mx-card__quotewrap { margin-top: auto; padding-top: 10px; }
.elementor-widget.mx-card__quotewrap .mx-card__quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 700 12.5px/1 var(--mx-font-body);
    padding: 14px 0;
    border-radius: var(--mx-radius-pill);
    border: 0;
    text-align: center;
    transition: background-color .2s ease;
}
.elementor-widget.mx-card__quotewrap .mx-card__quote:hover {
    background: var(--mx-green-flex);
    color: var(--mx-paper);
}
/* A buyable product in a mixed catalogue category keeps the shop card's accent
   green, so "Buy online" and "Request a quote" stay visibly different actions. */
.elementor-widget.mx-card__quotewrap .mx-card__quote--buy { background: var(--mx-green-accent); }
.elementor-widget.mx-card__quotewrap .mx-card__quote--buy:hover { background: var(--mx-green-maxi); }
.elementor-widget.mx-card__cart { margin-top: 10px; }
.elementor-widget.mx-card__cart .elementor-add-to-cart,
.elementor-widget.mx-card__cart .e-loop-add-to-cart-form-container,
.elementor-widget.mx-card__cart form.cart { width: 100%; margin: 0; }
/* (0,4,0): Elementor Pro's own add-to-cart rules sit at (0,3,0) and load after
   this file, so an equal-specificity rule here would lose the tie. */
.elementor-widget.mx-card__cart .elementor-add-to-cart .button,
.elementor-widget.mx-card__cart .elementor-add-to-cart .single_add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    background: var(--mx-green-accent);
    color: var(--mx-paper);
    font: 700 12.5px/1 var(--mx-font-body);
    padding: 14px 0;
    border-radius: var(--mx-radius-pill);
    border: 0;
    text-align: center;
    transition: background-color .2s ease;
}
.elementor-widget.mx-card__cart .elementor-add-to-cart .button:hover,
.elementor-widget.mx-card__cart .elementor-add-to-cart .single_add_to_cart_button:hover {
    background: var(--mx-green-maxi);
    color: var(--mx-paper);
}

/* WooCommerce repeats the range as visually-hidden text for screen readers; the
   flex price row would otherwise lay it out as a visible third item. */
.e-con.mx-card .elementor-widget.mx-card__price p.price .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* -- 16.7 Buying guide ----------------------------------------------------- */

.e-con.mx-guide { padding: 0; background-color: var(--mx-surface-band); }
.e-con.mx-guide__inner { padding: 88px var(--mx-gutter); }
.e-con.mx-guide__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}
.e-con.mx-guide__left { display: flex; flex-direction: column; gap: 22px; padding: 0; }
.elementor-widget.mx-guide__title-main .elementor-heading-title {
    font: 700 clamp(28px, 3vw, 42px)/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}
.elementor-widget.mx-guide__lead { font: 400 16.5px/1.65 var(--mx-font-body); color: #4d5b56; }
.e-con.mx-guide__actions { display: flex; flex-direction: row; gap: 12px; padding: 0; margin-top: 6px; width: auto; }
.e-con.mx-guide__rows { display: flex; flex-direction: column; gap: 12px; padding: 0; }
.e-con.mx-guide__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    background-color: var(--mx-paper);
    border: 1px solid var(--mx-rule);
    border-radius: 18px;
    padding: 22px 24px;
}
.elementor-widget.mx-guide__n {
    flex: none;
    width: 26px;
    font: 700 13px/1.4 var(--mx-font-body);
    color: var(--mx-green-accent);
}
.e-con.mx-guide__text { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 0; }
.elementor-widget.mx-guide__title { font: 700 17px/1.3 var(--mx-font-heading); color: var(--mx-ink); }
.elementor-widget.mx-guide__body  { font: 400 13.5px/1.5 var(--mx-font-body); color: #6b7873; }
.elementor-widget.mx-guide__range {
    flex: none;
    font: 600 13px/1 var(--mx-font-body);
    color: #9aa8a3;
    white-space: nowrap;
}

/* -- 16.8 Trade account band ----------------------------------------------- */

.e-con.mx-trade { padding: 0; background-color: var(--mx-green-accent); }
.e-con.mx-trade__inner { padding: 52px var(--mx-gutter); }
.e-con.mx-trade__inner > .e-con-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.e-con.mx-trade__text { display: flex; flex-direction: column; gap: 10px; padding: 0; max-width: 720px; }
.elementor-widget.mx-trade__title .elementor-heading-title {
    font: 700 clamp(24px, 2.4vw, 32px)/1.25 var(--mx-font-heading);
    color: var(--mx-paper);
    letter-spacing: -.01em;
}
.elementor-widget.mx-trade__lead { font: 400 15.5px/1.55 var(--mx-font-body); color: rgba(255, 255, 255, .88); }
.e-con.mx-trade__actions { display: flex; flex-direction: row; gap: 12px; padding: 0; flex: none; width: auto; }

.elementor-widget.mx-btn--white .elementor-button {
    background-color: var(--mx-paper);
    color: var(--mx-green-flex);
    font-size: 14px;
    padding: 18px 30px;
}
.elementor-widget.mx-btn--white .elementor-button:hover {
    background-color: var(--mx-surface-tint);
    color: var(--mx-green-flex);
}
.elementor-widget.mx-pill--on-green .elementor-button {
    border-color: rgba(255, 255, 255, .6);
    color: var(--mx-paper);
    background-color: transparent;
}
.elementor-widget.mx-pill--on-green .elementor-button:hover {
    border-color: var(--mx-paper);
    background-color: rgba(255, 255, 255, .12);
    color: var(--mx-paper);
}

/* -- 16.9 Quoted & installed (dark) ---------------------------------------- */

.e-con.mx-quoted { padding: 0; background-color: var(--mx-dark); }
.e-con.mx-quoted__inner { padding: 88px var(--mx-gutter); }
.e-con.mx-quoted__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 64px;
    align-items: center;
}
.e-con.mx-quoted__text { display: flex; flex-direction: column; gap: 24px; padding: 0; }
.elementor-widget.mx-quoted__title .elementor-heading-title {
    font: 700 clamp(28px, 3vw, 42px)/1.2 var(--mx-font-heading);
    color: var(--mx-paper);
    letter-spacing: -.015em;
}
.elementor-widget.mx-quoted__lead {
    font: 400 16px/1.65 var(--mx-font-body);
    color: rgba(255, 255, 255, .7);
    max-width: 620px;
}
/* Same (0,4,0) fight as the shop hero lead above. */
.elementor.elementor .e-con .elementor-widget.mx-quoted__lead { max-width: 620px; }
.e-con.mx-quoted__actions { display: flex; flex-direction: row; gap: 12px; padding: 0; margin-top: 6px; width: auto; }
.elementor-widget.mx-btn--flex .elementor-button {
    background-color: var(--mx-green-flex);
    color: var(--mx-paper);
    font-size: 14px;
    padding: 17px 28px;
}
.elementor-widget.mx-btn--flex .elementor-button:hover { background-color: var(--mx-green-maxi); }
.elementor-widget.mx-quoted__img img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

/* ---------------------------------------------------------------------------
 * 17. Shop listing
 *
 * The document behind /shop/?view=all and product search results. It reuses the
 * shop page's hero, assurances and three closing bands; only the middle is its
 * own — a result count, a sort control, the full product grid and pagination.
 * --------------------------------------------------------------------------- */

.e-con.mx-listing { padding: 0; background-color: var(--mx-paper); }
.e-con.mx-listing__inner { padding: 72px var(--mx-gutter) var(--mx-band-pad); }
.e-con.mx-listing__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: 0;
}

/* -- 17.1 Result count and sort -------------------------------------------- */

.mx-listing__bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 26px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--mx-rule);
}
.mx-listing__count {
    margin: 0;
    font: 500 14px/1.4 var(--mx-font-body);
    color: var(--mx-ink-muted);
}
.mx-listing__sort {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Hello Elementor's reset.css sets select { border:1px solid #666; width:100% }
   by attribute at (0,1,1), so this is doubled up on the form class to clear it —
   the same fight the hero search has. */
.mx-listing__sort .mx-listing__select {
    width: auto;
    border: 1.5px solid var(--mx-rule-strong);
    border-radius: var(--mx-radius-pill);
    background-color: var(--mx-paper);
    box-shadow: none;
    transition: border-color .2s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%239aa8a3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding: 12px 38px 12px 20px;
    font: 600 13px/1 var(--mx-font-body);
    color: var(--mx-ink);
    cursor: pointer;
}
.mx-listing__sort .mx-listing__select:hover { border-color: var(--mx-green-maxi); }
.mx-listing__sortgo {
    border: 0;
    background: var(--mx-green-accent);
    color: var(--mx-paper);
    font: 700 13px/1 var(--mx-font-body);
    padding: 12px 20px;
    border-radius: var(--mx-radius-pill);
    cursor: pointer;
    transition: background-color .2s ease;
}

/* Declared, not inherited from the base — see the note on .mx-chip. This one had
   no hover rule at all, so it went magenta like the chips did. */
.mx-listing__sort .mx-listing__sortgo:hover,
.mx-listing__sort .mx-listing__sortgo:focus { background: var(--mx-green-maxi); color: var(--mx-paper); }

/* -- 17.2 The grid --------------------------------------------------------- */

.elementor-widget.mx-listing__grid .elementor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* -- 17.3 Pagination ------------------------------------------------------- */

.elementor-widget.mx-listing__grid .elementor-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 48px;
}
.elementor-widget.mx-listing__grid .elementor-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--mx-rule-strong);
    border-radius: var(--mx-radius-pill);
    font: 700 13.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.elementor-widget.mx-listing__grid .elementor-pagination a.page-numbers:hover {
    border-color: var(--mx-green-maxi);
    color: var(--mx-green-maxi);
}
/* Current page takes the same treatment as the active filter pill on /shop/. */
.elementor-widget.mx-listing__grid .elementor-pagination .page-numbers.current {
    background-color: var(--mx-ink);
    border-color: var(--mx-ink);
    color: var(--mx-paper);
}
.elementor-widget.mx-listing__grid .elementor-pagination .page-numbers.dots {
    border-color: transparent;
    min-width: 20px;
    padding: 0;
}

/* ---------------------------------------------------------------------------
 * 18. Range navigation and grouped sub-ranges
 *
 * The pills on a category archive are links, not JetSmartFilters — on a parent
 * range they lead to its sub-ranges, on a PVC sub-range they narrow by type.
 * They have to be links there: the grid is grouped under headings, and
 * JetSmartFilters would replace the whole thing with a flat list on the first
 * click. Being our own markup, they need styling here rather than on a widget.
 * --------------------------------------------------------------------------- */

.mx-rangepills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.mx-rangepill {
    display: inline-flex;
    align-items: center;
    background: var(--mx-paper);
    border: 1.5px solid var(--mx-rule-strong);
    border-radius: var(--mx-radius-pill);
    padding: 10px 18px;
    font: 600 13px/1 var(--mx-font-body);
    color: var(--mx-ink);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.mx-rangepill:hover {
    border-color: var(--mx-green-maxi);
    color: var(--mx-green-maxi);
}
/* Same treatment as the active best-sellers pill, so the two read as one system. */
.mx-rangepill--active,
.mx-rangepill--active:hover {
    background: var(--mx-ink);
    border-color: var(--mx-ink);
    color: var(--mx-paper);
}

/* -- 18.1 Grouped sub-ranges ----------------------------------------------- */

.e-con.mx-listing--pvc > .e-con-inner,
.e-con.mx-listing--pvc__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mx-groups {
    display: flex;
    flex-direction: column;
    gap: 56px;
}
.mx-group__title {
    font: 700 28px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.01em;
    margin: 0 0 24px;
}
/* The cards are the shop's own loop-item template, rendered here rather than by
   a Loop Grid, so the grid track is ours to declare. */
.mx-group__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.mx-group__empty {
    font: 400 15px/1.5 var(--mx-font-body);
    color: var(--mx-ink-muted);
    margin: 0;
}

/* **Table of contents — Responsive** — same numbering as above.

   Two breakpoints only, matching Elementor's two active ones exactly (tablet
   <=1024, mobile <=767), so the editor's responsive controls and this file can
   never disagree. If a breakpoint is added here, enable the matching one in
   Elementor > Site Settings > Layout > Breakpoints, and vice versa.

   The approved mockup is desktop-only at 1440, so everything below is a
   judgement call except the product grid, which the wireframe specifies as
   "3-up / 2-up on tablet and mobile".

   Desktop is the base; these override downward. */

/*--------------------------------------------*/
/*- Tablet (up to 1024px)
/*--------------------------------------------*/
@media (max-width: 1024px) {

    /* 2. Gutters ------------------------------------------------------- */
    :root { --mx-gutter: 32px; --mx-band-pad: 72px; }

    .e-con > .e-con-inner,
    .e-con > .e-con,
    .e-con > .elementor-widget { min-width: 0; }
    img { max-width: 100%; }

    .e-con.mx-section-head,
    .e-con.mx-shop__head { flex-wrap: wrap; gap: 20px; }

            .e-con.mx-header__inner > .e-con-inner { min-height: 76px; }
    .elementor-widget.mx-header__logo img { height: 34px; }

    /* 4. Footer -------------------------------------------------------- */
    .e-con.mx-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
    .e-con.mx-footer__branches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e-con.mx-footer__inner { padding-block: 56px 0; }

    /* 5. Hero ---------------------------------------------------------- */
    .e-con.mx-hero__inner { height: auto; min-height: 560px; }
    .e-con.mx-hero__content { width: auto; max-width: 62%; top: 72px; }
    .elementor-widget.mx-hero__title .elementor-heading-title { font-size: 40px; }
    .elementor-widget.mx-hero__lead { width: auto; max-width: 100%; }
    .e-con.mx-hero__card { width: 300px; }
    .elementor-widget.mx-hero__card-img img { height: 120px; }

    /* 6. Trust & stats ------------------------------------------------- */
    .e-con.mx-trust__inner { padding-block: 72px 56px; }
    .e-con.mx-trust__partners { flex-wrap: wrap; gap: 24px; }
    .e-con.mx-trust__logos { gap: 24px; }
    .e-con.mx-trust__logos > .mx-partner img { max-width: 100%; height: auto; }
    .e-con.mx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 7. Product categories — wireframe: 3-up on tablet ----------------- */
    .e-con.mx-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Section headings step down together */
    .elementor-widget.mx-section-head__title .elementor-heading-title,
    .elementor-widget.mx-catgroup__title .elementor-heading-title,
    .e-con.mx-section-head--lg .mx-section-head__title .elementor-heading-title,
    .elementor-widget.mx-turnkey__title .elementor-heading-title,
    .elementor-widget.mx-shop__title .elementor-heading-title,
    .elementor-widget.mx-cta__title .elementor-heading-title { font-size: 34px; }
    .mx-cta__title,
    .mx-pd__desctitle { font-size: 34px; }

    /* 8-10. Two-column bands stack, image below the text ---------------- */
    .e-con.mx-turnkey__inner > .e-con-inner,
    .e-con.mx-industries__inner > .e-con-inner,
    .e-con.mx-process__inner > .e-con-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .elementor-widget.mx-turnkey__img img,
    .elementor-widget.mx-industries__img img { height: 320px; }
    .elementor-widget.mx-process__img img { height: 380px; }
    /* Process reads better with the accordion first once stacked */
    .e-con.mx-process__inner > .e-con-inner > .mx-process__img { order: 2; }
    .e-con.mx-process__inner > .e-con-inner > .mx-process__body { order: 1; }

    /* 11. Online shop -------------------------------------------------- */
    .e-con.mx-shop__grid,
    .mx-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* 12. News --------------------------------------------------------- */
    .e-con.mx-news__grid,
    .mx-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 13. Testimonial -------------------------------------------------- */
    .elementor-widget.mx-testimonial__quote .elementor-heading-title { font-size: 24px; }
    .elementor-widget.mx-testimonial__glyph { font-size: 110px; height: 52px; }

    /* 14. CTA ---------------------------------------------------------- */
    .elementor-widget.mx-cta__form { width: 100%; }
    .elementor-widget.mx-cta__form .elementor-form-fields-wrapper {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .elementor-widget.mx-cta__form--4 { width: 100%; }
    .elementor-widget.mx-cta__form--4 .elementor-form-fields-wrapper {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* -- 16. Shop page ----------------------------------------------------- */

    .e-con.mx-shophero__inner  { padding: 44px var(--mx-gutter); }
    .e-con.mx-assure__inner,
    .e-con.mx-shopcats__inner,
    .e-con.mx-best__inner,
    .e-con.mx-guide__inner,
    .e-con.mx-trade__inner,
    .e-con.mx-quoted__inner    { padding-inline: var(--mx-gutter); }

    /* Assurances 4 -> 2; the strip is a promise, not a grid, so two rows read
       better than four cramped columns. */
    .e-con.mx-assure__inner > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e-con.mx-assure__inner { padding-block: 22px; }

    /* Wireframe: product grid 3-up on tablet. Category cards follow at 2-up,
       since three 22px cards at this width leave no room for the pill rows. */
    .mx-shopcats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .elementor-widget.mx-best__grid .elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* The two-column bands stack. */
    .e-con.mx-guide__inner > .e-con-inner,
    .e-con.mx-quoted__inner > .e-con-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .e-con.mx-trade__inner > .e-con-inner { flex-direction: column; align-items: flex-start; gap: 28px; }

    .e-con.mx-best__head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .elementor-widget.mx-quoted__img img { height: 300px; }


    /* -- 17. Shop listing -------------------------------------------------- */

    .e-con.mx-listing__inner { padding-inline: var(--mx-gutter); }
    .elementor-widget.mx-listing__grid .elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }


    /* -- 18. Range navigation ---------------------------------------------- */

    .mx-group__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mx-group__title { font-size: 24px; }
    .mx-groups { gap: 44px; }

}

/*--------------------------------------------*/
/*- Mobile (up to 767px)
/*--------------------------------------------*/
@media (max-width: 767px) {

    /* 15. Store -------------------------------------------------------- */
    .mx-length { padding: 16px 18px; }
    .mx-length__input { max-width: 100%; }
    .mx-length__total-value { font-size: 21px; }
    .mx-enquiry__form { padding: 20px; }
    .mx-enquiry__cta { display: block; text-align: center; }


    /* 2. Gutters ------------------------------------------------------- */
    :root { --mx-gutter: 20px; --mx-band-pad: 56px; }

    /* Nothing may force the document wider than the viewport: a single
       overflowing element stretches the document, and every full-width or
       space-between row then follows it. */
    .elementor-widget.mx-hero__eyebrow { white-space: normal; }
    .e-con.mx-header__inner > .e-con-inner,
    .e-con.mx-utility__inner > .e-con-inner { min-width: 0; }

    /* The widget opens its panel directly beneath ITSELF, and the nav widget is
       vertically centred in the header row, so the panel starts mid-header and
       crops the quote button. Stretching the widget to the row's full height
       puts its bottom edge on the header's, which is where the panel should
       begin. No widget setting covers this. */
    .elementor-widget.mx-header__nav { align-self: stretch; display: flex; align-items: center; }

    /* Mega panel stacks; the widget handles the burger itself */
    .e-con.mx-mega__cols { grid-template-columns: 1fr; padding-inline: var(--mx-gutter); }
    .e-con.mx-mega__col { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--mx-rule); }
    .e-con.mx-mega__col:first-child { padding-left: 0; }
    .e-con.mx-mega__promo { display: none; }

    /* 3. Utility bar: phone and cart only. Branch, careers and account are
       reachable from the burger and the footer; the after-hours numbers live
       on each footer branch card, so nothing is actually lost. */
    .e-con.mx-utility__inner > .e-con-inner { height: 42px; }
    .e-con.mx-utility__left > .mx-utility__link,
    .e-con.mx-utility__left > .mx-utility__alert,
    .e-con.mx-utility__right > .mx-utility__link { display: none; }
    .elementor-widget.mx-utility__phone { font-size: 12px; }

    /* Header: logo, burger and the quote button. Shop Online drops — the cart
       is in the utility bar and Online Shop is in the burger nav. */
    .e-con.mx-header__inner > .e-con-inner { min-height: 64px; gap: 12px; }
    .elementor-widget.mx-header__logo img { height: 28px; }
    .elementor-widget.mx-header__shop { display: none; }
    .elementor-widget.mx-btn--quote .elementor-button { padding: 12px 16px; font-size: 12.5px; }

    /* 4. Footer -------------------------------------------------------- */
    .e-con.mx-footer__cols,
    .e-con.mx-footer__branches { grid-template-columns: 1fr; gap: 32px; }
    /* Stacked, centred, one width — natural sizes made the wordmarks shout
       and left-aligned them inside full-width widgets. */
    .e-con.mx-footer__logos { grid-template-columns: 1fr; gap: 26px; justify-items: center; }
    .e-con.mx-footer__logos > .elementor-widget.mx-footer__logo { width: auto; }
    .e-con.mx-footer__logos > .mx-footer__logo:nth-child(1) img,
    .e-con.mx-footer__logos > .mx-footer__logo:nth-child(2) img,
    .e-con.mx-footer__logos > .mx-footer__logo:nth-child(3) img {
        width: 160px;
        height: auto;
        margin-inline: auto;
    }
    .e-con.mx-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }

    /* 5. Hero: static stack, card full width beneath ------------------- */
    .e-con.mx-hero__inner { height: auto; min-height: 0; padding-block: 0; }
    .e-con.mx-hero__inner > .e-con-inner {
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding-block: 56px 0;
    }
    .e-con.mx-hero__content { position: static; width: auto; max-width: 100%; }
    .elementor-widget.mx-hero__title .elementor-heading-title { font-size: clamp(23px, 7.2vw, 32px); }
    .elementor-widget.mx-hero__lead { font-size: 15px; }
    .e-con.mx-hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
    .elementor-widget.mx-btn .elementor-button { justify-content: center; padding: 16px 24px; }
    .e-con.mx-hero__card {
        position: static;
        width: 100%;
        margin-bottom: -48px;
    }

    /* 6. Trust & stats ------------------------------------------------- */
    .e-con.mx-trust__inner { padding-block: 72px 40px; }
    .e-con.mx-trust__partners { flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 36px; }
    /* Stack the logos. The desktop rules pin each to an explicit pixel width
       via :nth-child (0,4,0), so the override has to match that specificity or
       the fixed widths win and the row overflows the viewport. */
    .e-con.mx-trust__logos { grid-template-columns: 1fr; height: auto; gap: 20px; width: 100%; justify-items: start; }
    .e-con.mx-trust__logos > .mx-partner { width: 100%; }
    .e-con.mx-trust__logos > .mx-partner:nth-child(1) img,
    .e-con.mx-trust__logos > .mx-partner:nth-child(2) img,
    .e-con.mx-trust__logos > .mx-partner:nth-child(3) img {
        width: auto;
        max-width: 62%;
        height: auto;
    }
    .e-con.mx-stats { gap: 12px; }
    .e-con.mx-stat { padding: 18px 16px; gap: 12px; flex-direction: column; align-items: flex-start; }
    .elementor-widget.mx-stat__icon,
    .elementor-widget.mx-stat__icon img { width: 44px; height: 44px; }
    .elementor-widget.mx-stat__num { font-size: 30px; }

    /* 7. Product categories — wireframe: 2-up on mobile ----------------- */
    .e-con.mx-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .elementor-widget.mx-cat__img img { height: 110px; }
    .e-con.mx-cat__body { padding: 14px; gap: 7px; }
    .elementor-widget.mx-cat__title .elementor-heading-title { font-size: 14.5px; }

    /* Headings step down again */
    .elementor-widget.mx-section-head__title .elementor-heading-title,
    .elementor-widget.mx-catgroup__title .elementor-heading-title,
    .e-con.mx-section-head--lg .mx-section-head__title .elementor-heading-title,
    .elementor-widget.mx-turnkey__title .elementor-heading-title,
    .elementor-widget.mx-shop__title .elementor-heading-title,
    .elementor-widget.mx-cta__title .elementor-heading-title { font-size: clamp(20px, 6.2vw, 26px); }
    .mx-cta__title,
    .mx-pd__desctitle { font-size: clamp(20px, 6.2vw, 26px); }
    .e-con.mx-section-head { padding-bottom: 28px; }

    /* 8-10. Stacked bands ---------------------------------------------- */
    .elementor-widget.mx-turnkey__img img,
    .elementor-widget.mx-industries__img img { height: 220px; }
    .elementor-widget.mx-process__img img { height: 240px; }
    .e-con.mx-industries__grid { grid-template-columns: 1fr; }
    .elementor-widget.mx-steps .e-n-accordion-item-title { padding: 18px 18px; gap: 14px; }
    .elementor-widget.mx-steps .e-n-accordion-item[open] > .e-n-accordion-item-title { padding: 18px 18px 8px; }
    .elementor-widget.mx-steps .mx-step__t { font-size: clamp(15px, 4.4vw, 18px); }
    .elementor-widget.mx-steps .e-n-accordion-item > .e-con.mx-step__panel { padding: 0 18px 18px calc(18px + 26px + 14px); }
    .e-con.mx-process__actions { flex-direction: column; align-items: stretch; width: 100%; }

    /* 11. Online shop -------------------------------------------------- */
    .e-con.mx-shop__grid,
    .mx-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .elementor-widget.mx-shop-card__img img { height: 130px; }
    .e-con.mx-shop__actions { width: 100%; }

    /* 12. News --------------------------------------------------------- */
    .e-con.mx-news__grid,
    .mx-news__grid { grid-template-columns: 1fr; }
    .elementor-widget.mx-news-card__img img,
    img.mx-news-card__img,
    .e-con.mx-news-card__media,
    div.mx-news-card__media { height: 200px; }

    /* 13. Testimonial -------------------------------------------------- */
    .e-con.mx-testimonial__inner { padding-block: 64px; }
    .elementor-widget.mx-testimonial__quote .elementor-heading-title { font-size: clamp(17px, 5vw, 21px); }
    .elementor-widget.mx-testimonial__glyph { font-size: 88px; height: 42px; }

    /* 14. CTA ---------------------------------------------------------- */
    .elementor-widget.mx-cta__form .elementor-form-fields-wrapper { grid-template-columns: 1fr; }
    .elementor-widget.mx-cta__form--4 .elementor-form-fields-wrapper { grid-template-columns: 1fr; }
    .elementor-widget.mx-cta__form .elementor-field-textual,
    .elementor-widget.mx-cta__form .elementor-button[type="submit"] { height: 52px; }

    /* -- 16. Shop page ----------------------------------------------------- */

    .e-con.mx-shophero__inner { padding: 36px var(--mx-gutter); }
    .e-con.mx-assure__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .mx-shopcats__grid,
    .elementor-widget.mx-best__grid .elementor-grid { grid-template-columns: minmax(0, 1fr); }

    /* The search bar cannot stay a pill at this width — the category select and
       the field need the full row each. */
    .mx-shopsearch {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--mx-radius-hero);
        padding: 12px;
        gap: 12px;
    }
    .mx-shopsearch .mx-shopsearch__cat {
        width: 100%;
        max-width: none;
        background-position: right 14px center;
        padding: 10px 34px 10px 10px;
    }
    /* Stacked, so the divider turns horizontal rather than leaving a 1px
       column and a gap where the vertical rule used to be. */
    .mx-shopsearch__rule {
        width: auto;
        height: 1px;
        align-self: stretch;
        margin: 0;
    }
    .mx-shopsearch .mx-shopsearch__q { padding: 6px 10px; width: 100%; }
    .mx-shopsearch__go { width: 100%; }

    .e-con.mx-guide__row { flex-wrap: wrap; gap: 12px; }
    .elementor-widget.mx-guide__range { width: 100%; }
    .e-con.mx-guide__actions,
    .e-con.mx-quoted__actions,
    .e-con.mx-trade__actions { flex-wrap: wrap; }
    .elementor-widget.mx-quoted__img img { height: 220px; }


    /* -- 17. Shop listing -------------------------------------------------- */

    .elementor-widget.mx-listing__grid .elementor-grid { grid-template-columns: minmax(0, 1fr); }
    .mx-listing__bar { flex-direction: column; align-items: stretch; gap: 14px; }
    .mx-listing__sort { justify-content: flex-start; }
    .mx-listing__sort .mx-listing__select { width: 100%; }


    /* -- 18. Range navigation ---------------------------------------------- */

    .mx-group__grid { grid-template-columns: minmax(0, 1fr); }
    .mx-group__title { font-size: 21px; margin-bottom: 18px; }
    .mx-groups { gap: 36px; }

}

/* ---------------------------------------------------------------------------
 * 19. The /products/ landing page
 *
 * Uses the approved home page category grid (.mx-cats / .mx-cat) unchanged, so
 * there is almost nothing here — only the band's own vertical rhythm, since it
 * carries no section head above the grid the way the home page band does.
 * --------------------------------------------------------------------------- */

/* band() names the inner container from the FIRST class, so it is
   .mx-cats__inner here too — the modifier only lands on the outer. The home
   band's 24px top is sized for the section head above its grid; this band has
   none, so it takes the full 96px. */
.e-con.mx-cats--products > .e-con.mx-cats__inner { padding-block: 96px; }
.e-con.mx-cats--products > .e-con.mx-cats__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* The four groups. The cards inside are .mx-cat and the group's small text is
   .mx-eyebrow, both untouched — only the heading and the spacing belong here.

   The 14px eyebrow-to-heading gap is the section head's own
   (.mx-section-head__text), so the rhythm matches the rest of the site. The
   heading runs at 30px rather than the 44/46px of a band head: four of these
   stack down one page, and at band size they shout over the cards they
   introduce. 30px keeps the thin/bold split legible at that weight. */
.e-con.mx-catgroup { padding: 0; gap: 14px; }
.e-con.mx-catgroup + .e-con.mx-catgroup { margin-top: 56px; }
/* Size and colour come from the section-head rule this now shares, so a group
   heading is the same size as one on the home page by construction rather than
   by coincidence. It was set apart at 30px on the theory that four stacked would
   shout; they read as the page's structure instead, and standing apart from the
   site's own rhythm was the more visible problem. */
/* Adds to the 14px gap for 30px below the heading — the section head's 38px,
   scaled to the smaller type. */
.e-con.mx-catgroup > .e-con.mx-cats__grid { margin-top: 16px; }

@media (max-width: 1024px) {
    .e-con.mx-cats--products > .e-con.mx-cats__inner { padding-block: 72px; }
    .e-con.mx-catgroup + .e-con.mx-catgroup { margin-top: 44px; }
}
@media (max-width: 767px) {
    .e-con.mx-cats--products > .e-con.mx-cats__inner { padding-block: 56px; }
    .e-con.mx-catgroup + .e-con.mx-catgroup { margin-top: 36px; }
}

/* ---------------------------------------------------------------------------
 * 20. About page — design/about page wireframe/Maxiflex About Mockup.dc.html
 *
 * Eight bands. Two are reused rather than rebuilt: the hero is .mx-shophero
 * (same 420px height, same 96deg gradient) with only a stats row added, and the
 * CTA is .mx-cta with a photographic modifier and a lead paragraph.
 * --------------------------------------------------------------------------- */

/* Band gutters and vertical rhythm, following section 16's pattern. */
.e-con.mx-story__inner,
.e-con.mx-fquote__inner,
.e-con.mx-timeline__inner,
.e-con.mx-pillars__inner,
.e-con.mx-directors__inner,
.e-con.mx-downloads__inner { padding-inline: var(--mx-gutter); }

.e-con.mx-story__inner,
.e-con.mx-timeline__inner,
.e-con.mx-pillars__inner,
.e-con.mx-downloads__inner { padding-block: 96px; }
.e-con.mx-fquote__inner    { padding-block: 92px; }
.e-con.mx-directors__inner { padding-block: 64px; }

.e-con.mx-story__inner     > .e-con-inner,
.e-con.mx-fquote__inner    > .e-con-inner,
.e-con.mx-timeline__inner  > .e-con-inner,
.e-con.mx-pillars__inner   > .e-con-inner,
.e-con.mx-directors__inner > .e-con-inner,
.e-con.mx-downloads__inner > .e-con-inner { padding-block: 0; }

/* -- 20.1 Hero stats ------------------------------------------------------- */

.e-con.mx-abouthero__stats {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 34px;
    padding: 0;
    margin-top: 14px;
    width: auto;
}
.e-con.mx-abouthero__stat { display: flex; flex-direction: column; gap: 4px; padding: 0; width: auto; }
.e-con.mx-abouthero__rule { width: 1px; flex: none; padding: 0; background: rgba(255, 255, 255, .2); }
.elementor-widget.mx-abouthero__statnum   { font: 700 34px/1 var(--mx-font-heading); color: var(--mx-lime); }
.elementor-widget.mx-abouthero__statlabel { font: 500 13px/1 var(--mx-font-body); color: rgba(255, 255, 255, .7); }

/* -- 20.2 The founding story ---------------------------------------------- */

.e-con.mx-story { background: var(--mx-paper); padding: 0; }
.e-con.mx-story__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 72px;
    align-items: start;
}
.e-con.mx-story__text { display: flex; flex-direction: column; gap: 22px; padding: 0; }
.elementor-widget.mx-story__title .elementor-heading-title {
    font: 700 44px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}
.elementor-widget.mx-story__para,
.elementor-widget.mx-story__para p { font: 400 16.5px/1.68 var(--mx-font-body); color: #4d5b56; margin: 0; }

.e-con.mx-story__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    margin-top: 10px;
}
.e-con.mx-story__fact {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: var(--mx-surface-tint);
    border: 1px solid #e0eae5;
    border-radius: 18px;
    padding: 22px 24px;
}
.elementor-widget.mx-story__facttitle { font: 700 15px/1.3 var(--mx-font-heading); color: var(--mx-ink); }
.elementor-widget.mx-story__factbody  { font: 400 14px/1.55 var(--mx-font-body); color: #6b7873; }

/* The portrait is a cut-out on a soft gradient, sitting on the panel floor —
   contain, not cover, or the founders lose their feet. */
.e-con.mx-story__media {
    position: relative;
    height: 640px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #f2f7f4, #e4efe8);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
/* The mockup sizes this img naturally and caps it — max-width/max-height 100%
   with auto dimensions — NOT width:100%. Forcing the width makes a 921x1200
   portrait 470px wide and 612px tall inside a 640px panel, and the widget's own
   box then clips it at the waist. */
.elementor-widget.mx-story__img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.elementor-widget.mx-story__img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.elementor-widget.mx-story__caption {
    position: absolute;
    left: 24px;
    bottom: 22px;
    background: rgba(255, 255, 255, .82);
    border-radius: var(--mx-radius-pill);
    padding: 9px 16px;
    font: 600 12.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    width: auto;
}

/* -- 20.3 Founder quote ---------------------------------------------------- */

.e-con.mx-fquote { background: var(--mx-green-flex); padding: 0; }
.e-con.mx-fquote__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}
/* The one decorative glyph in the design system. Clipped to 70px so the band
   does not carry 150px of empty leading above the quote. */
.elementor-widget.mx-fquote__glyph {
    font: 700 150px/1 var(--mx-font-quote);
    color: var(--mx-lime);
    height: 70px;
    display: flex;
    align-items: flex-start;
    width: auto;
}
.elementor-widget.mx-fquote__quote,
.elementor-widget.mx-fquote__quote p {
    font: 300 34px/1.45 var(--mx-font-heading);
    color: var(--mx-paper);
    letter-spacing: -.01em;
    max-width: 1060px;
    margin: 0;
}
.e-con.mx-fquote__person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-top: 8px;
    padding: 0;
    width: auto;
}
.elementor-widget.mx-fquote__avatar { width: 58px; flex: none; }
.elementor-widget.mx-fquote__avatar img {
    width: 58px;
    height: 58px;
    border-radius: var(--mx-radius-pill);
    object-fit: cover;
    display: block;
}
.e-con.mx-fquote__who { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 0; width: auto; }
.elementor-widget.mx-fquote__name { font: 700 15.5px/1.2 var(--mx-font-body); color: var(--mx-paper); }
.elementor-widget.mx-fquote__role { font: 400 13.5px/1.2 var(--mx-font-body); color: rgba(255, 255, 255, .65); }

/* -- 20.4 Timeline --------------------------------------------------------- */

.e-con.mx-timeline { background: var(--mx-surface-band); padding: 0; }
.e-con.mx-timeline__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0;
    margin-bottom: 60px;
    text-align: center;
}
.elementor-widget.mx-timeline__title .elementor-heading-title {
    font: 700 44px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}

/* The rail line is a pseudo-element, so no container is built to hold it. */
.e-con.mx-timeline__rail {
    position: relative;
    max-width: 1160px;
    margin-inline: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.e-con.mx-timeline__rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(180deg, var(--mx-lime), var(--mx-green-accent) 30%, var(--mx-green-flex));
}

/* --- Timeline motion -------------------------------------------------------
 *
 * The cards use Elementor's own Entrance Animation, set on the container in
 * build-about-page.php — nothing here drives those. Two things Elementor cannot
 * do are handled below.
 *
 * 1. The rail line is a pseudo-element, so no Elementor motion effect can reach
 *    it. A scroll-driven CSS animation grows it instead, with no JavaScript at
 *    all. Wrapped in @supports so a browser without scroll-driven animations
 *    simply gets the finished line rather than a missing one.
 *
 *    The range is tuned to the band rather than the default: at `cover 0%` the
 *    rail is still entirely below the fold, and its top only reaches the top of
 *    the viewport about a fifth of the way through the range. Growing from 15%
 *    to 85% keeps the line tracking the reader instead of finishing early.
 *
 * 2. The node dot pops in with its card. Elementor holds an element it has not
 *    yet animated at .elementor-invisible and swaps that for .animated on the
 *    way in, so the dot keys off the card's state without any script of ours —
 *    and if scripts never run, the dot is simply already there.
 * --------------------------------------------------------------------------- */

@keyframes mx-rail-grow {
    from { transform: translateX(-1px) scaleY(0); }
    to   { transform: translateX(-1px) scaleY(1); }
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .e-con.mx-timeline__rail::before {
            transform-origin: top center;
            animation: mx-rail-grow linear both;
            animation-timeline: view();
            animation-range: cover 15% cover 85%;
        }
    }

    .e-con.mx-tlrow::after {
        transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .4s ease;
    }
    .e-con.mx-tlrow:has(> .elementor-invisible)::after {
        transform: scale(.35);
        opacity: 0;
    }
}

/* Elementor's entrance animations do not honour the preference themselves, so
   the animation is cancelled here. (0,3,0) beats animate.css's own (0,1,0), and
   the element still becomes visible — Elementor removes .elementor-invisible
   whether or not the keyframes run. */
@media (prefers-reduced-motion: reduce) {
    .e-con.mx-tlcard.animated.fadeInLeft,
    .e-con.mx-tlcard.animated.fadeInRight,
    .e-con.mx-tlcard.animated.fadeInUp { animation-name: none; }
}

/* One card per row; the modifier decides the column. The node dot is the row's
   own pseudo-element, centred in the 90px middle track. */
.e-con.mx-tlrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    align-items: center;
    padding: 0;
    margin-bottom: 20px;
    position: relative;
}
.e-con.mx-tlrow::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 15px;
    height: 15px;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-paper);
    border: 3px solid var(--mx-green-accent);
    box-shadow: 0 0 0 5px var(--mx-surface-band);
}
.e-con.mx-tlrow--left  > .mx-tlcard { grid-column: 1; grid-row: 1; margin-right: 8px; }
.e-con.mx-tlrow--right > .mx-tlcard { grid-column: 3; grid-row: 1; margin-left: 8px; flex-direction: row-reverse; }

.e-con.mx-tlcard {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    background: var(--mx-paper);
    border: 1px solid var(--mx-rule);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 2px 12px rgba(0, 40, 28, .05);
}
.e-con.mx-tlcard__text { display: flex; flex-direction: column; gap: 8px; padding: 0; flex: 1; min-width: 0; }
.elementor-widget.mx-tlcard__year { font: 700 26px/1 var(--mx-font-heading); color: var(--mx-green-accent); letter-spacing: -.01em; }
.elementor-widget.mx-tlcard__body,
.elementor-widget.mx-tlcard__body p { font: 400 14.5px/1.6 var(--mx-font-body); color: #4d5b56; margin: 0; }

.e-con.mx-tlcard__art {
    width: 124px;
    height: 124px;
    flex: none;
    padding: 0;
    border-radius: var(--mx-radius-pill);
    overflow: hidden;
    background: var(--mx-paper);
    border: 3px solid var(--mx-surface-band);
    box-shadow: 0 0 0 1px var(--mx-rule);
    display: flex;
    align-items: center;
    justify-content: center;
}
.elementor-widget.mx-tlcard__img { width: 100%; height: 100%; }
/* The mockup states each fit as a background-size: a photograph fills the
   circle, a logo or cut-out is inset to the stated percentage. */
.elementor-widget.mx-tlcard__img img { width: 100%; height: 100%; display: block; object-fit: contain; }
.mx-tlcard__art--cover .mx-tlcard__img img { object-fit: cover; }
.mx-tlcard__art--md .mx-tlcard__img img { width: 92%; height: 92%; margin: 4%; }
.mx-tlcard__art--sm .mx-tlcard__img img { width: 62%; height: 62%; margin: 19%; }

/* -- 20.5 Mission, vision and values --------------------------------------- */

.e-con.mx-pillars { background: var(--mx-dark); padding: 0; }
.e-con.mx-pillars__head { display: flex; flex-direction: column; gap: 16px; padding: 0; margin-bottom: 52px; }
.elementor-widget.mx-pillars__title .elementor-heading-title {
    font: 700 44px/1.2 var(--mx-font-heading);
    color: var(--mx-paper);
    letter-spacing: -.015em;
    max-width: 760px;
}
.e-con.mx-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 0;
}
.e-con.mx-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    padding: 38px 34px;
}
.e-con.mx-pillar__icon {
    width: 92px;
    height: 92px;
    flex: none;
    padding: 0;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-paper);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.elementor-widget.mx-pillar__img { width: 100%; height: 100%; }
.elementor-widget.mx-pillar__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.elementor-widget.mx-pillar__kicker { font: 700 13px/1 var(--mx-font-body); letter-spacing: .1em; color: var(--mx-lime); }
.elementor-widget.mx-pillar__title .elementor-heading-title {
    font: 700 26px/1.25 var(--mx-font-heading);
    color: var(--mx-paper);
    letter-spacing: -.01em;
}
.elementor-widget.mx-pillar__body,
.elementor-widget.mx-pillar__body p { font: 400 15.5px/1.65 var(--mx-font-body); color: rgba(255, 255, 255, .72); margin: 0; }

/* -- 20.6 Directors -------------------------------------------------------- */

/* The one band the mockup narrows: 940px, not the 1352px the others use. */
.e-con.mx-directors { background: var(--mx-paper); padding: 0; }
.e-con.mx-directors__inner > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 940px;
    margin-inline: auto;
}
.e-con.mx-directors__head {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 34px;
    padding: 0;
    margin-bottom: 26px;
}
.e-con.mx-directors__headtext { display: flex; flex-direction: column; gap: 12px; padding: 0; width: auto; }
.elementor-widget.mx-directors__title .elementor-heading-title {
    font: 700 30px/1.25 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}
.elementor-widget.mx-directors__meta {
    font: 400 13px/1.55 var(--mx-font-body);
    color: #7c8b86;
    max-width: 250px;
    text-align: right;
    width: auto;
}
.e-con.mx-directors__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 0;
}
.e-con.mx-dir {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--mx-rule);
    border-radius: 24px;
    overflow: hidden;
    background: var(--mx-paper);
}
.e-con.mx-dir__photo {
    height: 280px;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--mx-surface-tint), #e4efe8);
}
.elementor-widget.mx-dir__img { width: 100%; height: 100%; }
.elementor-widget.mx-dir__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* All three directors have their own headshot now. The mockup cropped Bram out
   of the founders photograph — which object-fit cannot do, since `cover` is as
   far as it zooms and that still shows both men — but a portrait was supplied,
   so the card is a plain cover like the other two. All three are portraits
   taller than the card, so each is anchored near the top to keep the head in. */
.mx-dir__photo--guy .mx-dir__img img,
.mx-dir__photo--jacques .mx-dir__img img,
.mx-dir__photo--bram .mx-dir__img img { object-position: center 12%; }
.e-con.mx-dir__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border-top: 1px solid #eef2f0;
}
.elementor-widget.mx-dir__name .elementor-heading-title { font: 700 17px/1.25 var(--mx-font-heading); color: var(--mx-ink); }
.elementor-widget.mx-dir__role { font: 600 12.5px/1.3 var(--mx-font-body); color: var(--mx-green-accent); }

/* -- 20.7 Downloads -------------------------------------------------------- */

.e-con.mx-downloads { background: var(--mx-surface-tint); border-top: 1px solid var(--mx-rule); padding: 0; }
.e-con.mx-downloads__head { display: flex; flex-direction: column; gap: 14px; padding: 0; margin-bottom: 38px; }
.elementor-widget.mx-downloads__title .elementor-heading-title {
    font: 700 44px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}
.e-con.mx-downloads__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    padding: 0;
}
.e-con.mx-dl {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--mx-paper);
    border: 1px solid #e0eae5;
    border-radius: 20px;
    padding: 26px 24px 24px;
    min-height: 214px;
}
/* Masked to a flat green, the same technique as the assurance and stat icons. */
.e-con.mx-dl__icon {
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    background-color: var(--mx-green-flex);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.e-con.mx-dl__icon--pdf {
    -webkit-mask-image: url('assets/icons/icon-pdf.png');
    mask-image: url('assets/icons/icon-pdf.png');
}
.e-con.mx-dl__icon--ext {
    -webkit-mask-image: url('assets/icons/icon-external.png');
    mask-image: url('assets/icons/icon-external.png');
}
.e-con.mx-dl__text { display: flex; flex-direction: column; gap: 6px; padding: 0; flex: 1; }
.elementor-widget.mx-dl__title .elementor-heading-title { font: 700 17px/1.32 var(--mx-font-heading); color: var(--mx-ink); }
.elementor-widget.mx-dl__meta { font: 400 13px/1.45 var(--mx-font-body); color: #8b9995; }
.elementor-widget.mx-dl__cta { margin-top: auto; }
.elementor-widget.mx-dl__cta a { font: 700 13px/1 var(--mx-font-body); color: var(--mx-green-flex); }
.elementor-widget.mx-dl__cta a:hover { color: var(--mx-green-maxi); }

/* -- 20.8 CTA over a photograph -------------------------------------------- */

/* .mx-cta carries the form and the layout already; this adds the wash and the
   lead paragraph the home page's version does not have. */
.e-con.mx-cta--photo { position: relative; }
.e-con.mx-cta--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 60, 40, .86), rgba(4, 26, 19, .92));
    pointer-events: none;
}
.e-con.mx-cta--photo > .e-con.mx-cta__inner { position: relative; z-index: 1; }
.elementor-widget.mx-cta__lead,
.elementor-widget.mx-cta__lead p {
    font: 400 16px/1.6 var(--mx-font-body);
    color: rgba(255, 255, 255, .78);
    margin: 0;
}
.elementor.elementor .e-con .elementor-widget.mx-cta__lead { max-width: 640px; }

/* -- 20.9 Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
    .e-con.mx-story__inner,
    .e-con.mx-timeline__inner,
    .e-con.mx-pillars__inner,
    .e-con.mx-downloads__inner { padding-block: 72px; }
    .e-con.mx-fquote__inner    { padding-block: 68px; }

    .e-con.mx-story__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .e-con.mx-story__media { height: 520px; }
    .elementor-widget.mx-story__title .elementor-heading-title,
    .elementor-widget.mx-timeline__title .elementor-heading-title,
    .elementor-widget.mx-pillars__title .elementor-heading-title,
    .elementor-widget.mx-downloads__title .elementor-heading-title { font-size: 34px; }

    .elementor-widget.mx-fquote__quote,
    .elementor-widget.mx-fquote__quote p { font-size: 26px; }

    .e-con.mx-pillars__grid   { grid-template-columns: minmax(0, 1fr); }
    .e-con.mx-directors__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .e-con.mx-downloads__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .e-con.mx-story__inner,
    .e-con.mx-timeline__inner,
    .e-con.mx-pillars__inner,
    .e-con.mx-downloads__inner { padding-block: 56px; }
    .e-con.mx-fquote__inner    { padding-block: 52px; }
    .e-con.mx-directors__inner { padding-block: 48px; }

    .e-con.mx-abouthero__stats { gap: 18px; }
    .elementor-widget.mx-abouthero__statnum { font-size: 26px; }

    .e-con.mx-story__facts { grid-template-columns: minmax(0, 1fr); }
    .e-con.mx-story__media { height: 420px; }
    .elementor-widget.mx-story__title .elementor-heading-title,
    .elementor-widget.mx-timeline__title .elementor-heading-title,
    .elementor-widget.mx-pillars__title .elementor-heading-title,
    .elementor-widget.mx-downloads__title .elementor-heading-title { font-size: 28px; }

    .elementor-widget.mx-fquote__glyph { font-size: 110px; height: 52px; }
    .elementor-widget.mx-fquote__quote,
    .elementor-widget.mx-fquote__quote p { font-size: 21px; }

    /* The rail moves to the left edge and every card stacks beside it, rather
       than alternating across a centre line that no longer fits. */
    .e-con.mx-timeline__rail::before { left: 18px; transform: none; }
    .e-con.mx-tlrow { grid-template-columns: 36px minmax(0, 1fr); }
    .e-con.mx-tlrow::after { grid-column: 1; justify-self: center; }
    .e-con.mx-tlrow--left  > .mx-tlcard,
    .e-con.mx-tlrow--right > .mx-tlcard {
        grid-column: 2;
        margin-inline: 0;
        flex-direction: column;
        align-items: flex-start;
    }
    .e-con.mx-tlcard__art { width: 84px; height: 84px; }

    .e-con.mx-directors__head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .elementor-widget.mx-directors__meta { text-align: left; max-width: none; }
    .e-con.mx-directors__grid { grid-template-columns: minmax(0, 1fr); }
    .e-con.mx-downloads__grid { grid-template-columns: minmax(0, 1fr); }
    .e-con.mx-dl { min-height: 0; }
}

/* ---------------------------------------------------------------------------
 * 21. Single product — quoted products only
 *
 * design/single product page wireframe/Maxiflex Product Mockup.dc.html
 *
 * Scoped by maxiflex_single_product_passthrough() to enquiry-only products: the
 * design carries no price and no add-to-cart, so a buyable product keeps
 * WooCommerce's own single-product rendering.
 *
 * Every band below collapses when its data is absent. Most products have a
 * featured image and a description and little else, so the spec bar, the
 * applications and the technical card are all optional by construction.
 * --------------------------------------------------------------------------- */

.e-con.mx-pdcrumbs__inner,
.e-con.mx-pdhero__inner,
.e-con.mx-pdspecs__inner,
.e-con.mx-pddesc__inner,
.e-con.mx-pdrel__inner { padding-inline: var(--mx-gutter); }

.e-con.mx-pdcrumbs__inner  > .e-con-inner,
.e-con.mx-pdhero__inner    > .e-con-inner,
.e-con.mx-pdspecs__inner   > .e-con-inner,
.e-con.mx-pddesc__inner    > .e-con-inner,
.e-con.mx-pdrel__inner     > .e-con-inner { padding-block: 0; }

.e-con.mx-pdcrumbs { background: var(--mx-paper); padding: 0; }
.e-con.mx-pdcrumbs__inner { padding-block: 26px 0; }
/* The hero breadcrumb is white on a photograph; this one is dark on paper. */
.mx-crumbs--light { color: #8b9995; }
.mx-crumbs--light a { color: #8b9995; }
.mx-crumbs--light a:hover { color: var(--mx-green-flex); }
.mx-crumbs--light span:not(.mx-crumbs__sep) { color: var(--mx-ink); }
/* The lime separator is an accent for the DARK hero breadcrumb, where it reads
   against white text. On paper it is about 1.8:1 and simply disappears — the
   mockup draws it lime here too, but at 12.5px on white it is not there. A
   separator is punctuation, so it takes the muted grey and stays legible. */
.mx-crumbs--light .mx-crumbs__sep { color: #9aa8a3; }

/* -- 21.1 Gallery and product info ---------------------------------------- */

.e-con.mx-pdhero { background: var(--mx-paper); padding: 0; }
.e-con.mx-pdhero__inner { padding-block: 30px 84px; }
.e-con.mx-pdhero__inner > .e-con-inner {
    display: grid;
    grid-template-columns: 660px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.e-con.mx-pdhero__gallery,
.e-con.mx-pdhero__info { padding: 0; min-width: 0; }
.e-con.mx-pdhero__info { display: flex; flex-direction: column; gap: 20px; }

/* WooCommerce's gallery, restyled rather than replaced.
 *
 * WooCommerce ships these high and wins on a detail worth remembering:
 *   .woocommerce div.product div.images .flex-control-thumbs li  is (0,4,3)
 * Doubling the widget class only reached (0,4,1) — the same class count, but
 * FEWER elements, and element count is the tiebreaker. The gallery's own
 * .woocommerce-product-gallery is added to the chain to reach (0,5,1) and win.
 *
 * What that cost, before it was spotted: WooCommerce's `li { width: 25% }`
 * survived, and a percentage width on a grid item resolves against its GRID
 * AREA, not the container — so each thumbnail came out at 25% of its 168.5px
 * column, 42px wide, as a tall sliver.
 *
 * Three things were wrong before and all three came from the same mistake:
 * styling the FIRST slide rather than every slide, and the <img> rather than the
 * box around it.
 *
 *   - Clicking a thumbnail swapped in a slide that was not :first-child, so it
 *     lost the height and the radius and the layout jumped.
 *   - The zoom overlay is drawn INSIDE .woocommerce-product-gallery__image, so
 *     the radius has to be on that box with overflow hidden — on the <img> alone
 *     the magnified copy spills past three corners.
 *   - FlexSlider inserts .flex-viewport around the wrapper at runtime, so that
 *     needs the same clipping or it re-squares the corners.
 */
.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery__wrapper,
.elementor-widget.mx-pd__gallery.mx-pd__gallery .flex-viewport,
.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery__image,
.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery__image > a {
    border-radius: 24px;
    overflow: hidden;
    display: block;
}
/* Every slide, not just the first. */
.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: 470px;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #eef2f0;
    border-radius: 24px;
}
/* The zoom overlay is a second, larger image laid over the first. It must be
   clipped by the box above and must not inherit the fixed height. */
.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery__image img.zoomImg {
    height: auto;
    object-fit: none;
    border-radius: 0;
    background: transparent;
}

.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    overflow: visible;
}
.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery .flex-control-thumbs li {
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
    list-style: none;
}
.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100%;
    height: 118px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--mx-rule);
    display: block;
    opacity: 1;
    cursor: pointer;
    margin: 0;
    transition: border-color .2s ease;
}
.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery .flex-control-thumbs li img:hover { border-color: var(--mx-rule-strong); opacity: 1; }
.elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    border: 2px solid var(--mx-green-accent);
    opacity: 1;
}

.mx-pd__eyebrowrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mx-pd__eyebrowrow .mx-eyebrow {
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mx-green-maxi);
}
.mx-pd__brand {
    background: var(--mx-surface-tint);
    border: 1px solid #e0eae5;
    color: #3c4b47;
    font: 600 11.5px/1 var(--mx-font-body);
    padding: 7px 11px;
    border-radius: var(--mx-radius-pill);
}
.mx-pd__title {
    font: 700 46px/1.15 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.02em;
    margin: 0;
}
.elementor-widget.mx-pd__lead,
.elementor-widget.mx-pd__lead p {
    font: 400 16.5px/1.65 var(--mx-font-body);
    color: #4d5b56;
    margin: 0;
}

.mx-pd__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}
.mx-pd__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--mx-surface-tint);
    border: 1px solid #e0eae5;
    border-radius: 14px;
    padding: 14px 16px;
    font: 500 14px/1.45 var(--mx-font-body);
    color: #3c4b47;
}
.mx-pd__featuredot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--mx-green-accent);
    flex: none;
    margin-top: 6px;
}

/*
 * The site's buttons are styled on an Elementor Button widget's inner anchor
 * (.elementor-widget.mx-btn .elementor-button). These are plain anchors from a
 * shortcode, because which of them render depends on the product — so they need
 * the same look stated for a bare <a>. Values copied from section 2 rather than
 * re-invented, so the two stay the same shape.
 */
a.mx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 14px/1 var(--mx-font-body);
    border-radius: var(--mx-radius-pill);
    padding: 17px 28px;
    border: 0;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Hello Elementor's `.page-content a{text-decoration:underline}` is (0,1,1) and
   loads before this file, so a bare `a.mx-btn` ties and wins only on order —
   but only if it declares the property at all. It did not, so every pill inside
   a page's content came out underlined. */
a.mx-btn, a.mx-pill { text-decoration: none; }

a.mx-btn--solid { background-color: var(--mx-green-maxi); color: var(--mx-paper); }
a.mx-btn--solid:hover { background-color: var(--mx-green-flex); color: var(--mx-paper); }
a.mx-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1.5px solid var(--mx-rule-strong);
    color: var(--mx-ink);
    font: 700 13.5px/1 var(--mx-font-body);
    padding: 14px 22px;
    border-radius: var(--mx-radius-pill);
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
a.mx-pill:hover { border-color: var(--mx-green-maxi); color: var(--mx-green-maxi); }
a.mx-pill--lg { font-size: 14px; padding: 16px 26px; }
/* The icon is masked to the text colour, so it follows the hover. */
a.mx-pill:hover .mx-pd__actionicon { background-color: var(--mx-green-maxi); }

.mx-pd__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.mx-pd__action { display: inline-flex; align-items: center; gap: 9px; }
.mx-pd__actionicon {
    width: 16px;
    height: 16px;
    flex: none;
    background-color: var(--mx-ink);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.mx-pd__actionicon--pdf { -webkit-mask-image: url('assets/icons/icon-pdf.png'); mask-image: url('assets/icons/icon-pdf.png'); }
.mx-pd__actionicon--ext { -webkit-mask-image: url('assets/icons/icon-external.png'); mask-image: url('assets/icons/icon-external.png'); }

.mx-pd__assures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    border-top: 1px solid var(--mx-rule);
    margin-top: 12px;
    padding-top: 20px;
}
.mx-pd__assure { display: flex; align-items: center; gap: 13px; }
.mx-pd__assureicon {
    width: 44px;
    height: 44px;
    flex: none;
    background-color: var(--mx-green-flex);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: auto 32px; mask-size: auto 32px;
}
.mx-pd__assureicon--survey { -webkit-mask-image: url('assets/icons/icon-survey.png'); mask-image: url('assets/icons/icon-survey.png'); }
.mx-pd__assureicon--truck  { -webkit-mask-image: url('assets/icons/shop-icon-truck.png'); mask-image: url('assets/icons/shop-icon-truck.png'); }
.mx-pd__assuretext { display: flex; flex-direction: column; gap: 2px; }
.mx-pd__assuretitle { font: 700 13.5px/1.25 var(--mx-font-body); color: var(--mx-ink); }
.mx-pd__assuresub   { font: 400 12.5px/1.35 var(--mx-font-body); color: #6b7873; }

/* -- 21.2 Specification bar ----------------------------------------------- */

/* The band itself carries no padding when the shortcode returns nothing, so a
   product with no derivable specs shows no empty green strip. */
.e-con.mx-pdspecs { background: var(--mx-green-flex); padding: 0; }
.e-con.mx-pdspecs__inner { padding-block: 0; }
.e-con.mx-pdspecs:not(:has(.mx-pd__specs)) { display: none; }
.mx-pd__specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 20px;
    padding-block: 30px;
}
.mx-pd__spec { display: flex; flex-direction: column; gap: 7px; padding-left: 16px; border-left: 2px solid rgba(170, 205, 58, .45); }
.mx-pd__speclabel { font: 600 11px/1 var(--mx-font-body); letter-spacing: .1em; color: var(--mx-lime); }
.mx-pd__specvalue { font: 700 21px/1.2 var(--mx-font-heading); color: var(--mx-paper); letter-spacing: -.01em; }

/* -- 21.3 Description and technical card ---------------------------------- */

.e-con.mx-pddesc { background: var(--mx-paper); padding: 0; }
.e-con.mx-pddesc__inner { padding-block: 88px; }
.e-con.mx-pddesc__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 64px;
    align-items: start;
}
.e-con.mx-pddesc__text  { display: flex; flex-direction: column; gap: 22px; padding: 0; }
.e-con.mx-pddesc__aside { padding: 0; }
/* The aside is only the technical card; with no rows to show it collapses and
   the description runs full width. */
.e-con.mx-pddesc__inner > .e-con-inner:not(:has(.mx-pd__tech)) { grid-template-columns: minmax(0, 1fr); }

/* The mockup sets this at 40px, between a band head and the product h1. */
.mx-pd__desctitle {
    font: 700 40px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
    margin: 0;
}

.elementor-widget.mx-pd__body,
.elementor-widget.mx-pd__body p {
    font: 400 16.5px/1.68 var(--mx-font-body);
    color: #4d5b56;
    margin: 0;
}
.elementor-widget.mx-pd__body p + p { margin-top: 18px; }
/* Migrated descriptions carry headings that dwarf the prose, the same problem
   the shop card had. */
.elementor-widget.mx-pd__body h1,
.elementor-widget.mx-pd__body h2,
.elementor-widget.mx-pd__body h3 {
    font: 700 20px/1.3 var(--mx-font-heading);
    color: var(--mx-ink);
    margin: 26px 0 10px;
}

.mx-pd__apps { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mx-pd__appstitle { font: 700 15px/1.3 var(--mx-font-heading); color: var(--mx-ink); }
.mx-pd__applist { display: flex; flex-wrap: wrap; gap: 9px; }
.mx-pd__app {
    background: var(--mx-surface-tint);
    border: 1px solid #e0eae5;
    color: #3c4b47;
    font: 500 13px/1 var(--mx-font-body);
    padding: 11px 15px;
    border-radius: var(--mx-radius-pill);
}

.mx-pd__tech {
    border: 1px solid #e0eae5;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 40, 28, .06);
    background: var(--mx-paper);
}
.mx-pd__techtop { background: var(--mx-lime); height: 6px; }
.mx-pd__techbody { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 16px; }
.mx-pd__techtitle { font: 700 19px/1.3 var(--mx-font-heading); color: var(--mx-green-flex); }
.mx-pd__techrows { display: flex; flex-direction: column; }
.mx-pd__techrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 14px;
    border-radius: 10px;
}
.mx-pd__techrow--alt { background: var(--mx-surface-tint); }
.mx-pd__techk { font: 400 14px/1.45 var(--mx-font-body); color: #6b7873; }
.mx-pd__techv { font: 600 14px/1.45 var(--mx-font-body); color: var(--mx-green-flex); text-align: right; }

/* -- 21.4 Related products ------------------------------------------------ */

.e-con.mx-pdrel { background: var(--mx-paper); padding: 0; }
.e-con.mx-pdrel__inner { padding-block: 0 88px; }
.elementor-widget.mx-pdrel__wrap { width: 100%; }
.mx-pd__relhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 34px; margin-bottom: 34px; }
.mx-pd__relheadtext { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.mx-pd__relheadtext .mx-eyebrow {
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mx-green-maxi);
}
.mx-pd__reltitle { font: 700 36px/1.2 var(--mx-font-heading); color: var(--mx-ink); letter-spacing: -.015em; margin: 0; }
.mx-pd__relgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mx-pd__rel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mx-rule);
    border-radius: 20px;
    overflow: hidden;
    background: var(--mx-paper);
    transition: box-shadow .25s ease, transform .25s ease;
}
.mx-pd__rel:hover { box-shadow: 0 16px 36px rgba(0, 40, 28, .12); transform: translateY(-4px); }
.mx-pd__relmedia { height: 190px; background: #eef2f0 center/cover no-repeat; display: block; }
.mx-pd__relbody { display: flex; flex-direction: column; gap: 7px; padding: 20px; flex: 1; border-top: 1px solid #eef2f0; }
.mx-pd__relrange { font: 500 11.5px/1 var(--mx-font-body); letter-spacing: .06em; color: #9aa8a3; }
.mx-pd__relname  { font: 700 17px/1.3 var(--mx-font-heading); color: var(--mx-ink); }
.mx-pd__relspec  { font: 400 13px/1.5 var(--mx-font-body); color: #8b9995; }
.mx-pd__relcta {
    align-self: flex-start;
    margin-top: auto;
    border: 1.5px solid var(--mx-rule-strong, #cbd7d2);
    color: var(--mx-ink);
    font: 700 12.5px/1 var(--mx-font-body);
    padding: 12px 20px;
    border-radius: var(--mx-radius-pill);
    margin-block-start: 14px;
}

/* -- 21.5 CTA ------------------------------------------------------------- */

/* .mx-cta and its photographic modifier come from the About page. This band's
   form carries four fields rather than three, so the grid gains a column and the
   mockup's 1200px width.

   The heading is a bare <h2> from a shortcode, because it names the product —
   so it needs the same treatment stated outside the Elementor heading widget's
   selector, the same as the buttons above. */
.mx-cta__title {
    font: 700 46px/1.2 var(--mx-font-heading);
    color: var(--mx-paper);
    letter-spacing: -.015em;
    max-width: 820px;
    margin: 0;
}
.elementor-widget.mx-cta__form--4 { width: 1200px; }
.elementor-widget.mx-cta__form--4 .elementor-form-fields-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 210px;
}
/* The hidden product fields must not take a grid cell. */
.elementor-widget.mx-cta__form .elementor-field-group.elementor-field-type-hidden { display: none; }
.e-con.mx-cta--product .mx-cta__action { margin-top: 4px; }
.elementor-widget.mx-cta__action a { display: inline-flex; align-items: center; }

/* -- 21.6 Responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
    .e-con.mx-pdhero__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .e-con.mx-pdhero__inner { padding-block: 24px 64px; }
    .e-con.mx-pddesc__inner { padding-block: 64px; }
    .e-con.mx-pddesc__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .e-con.mx-pdrel__inner { padding-block: 0 64px; }
    .mx-pd__title { font-size: 36px; }
    .mx-pd__reltitle { font-size: 28px; }
    .mx-pd__relgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-pd__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .e-con.mx-pdhero__inner { padding-block: 20px 48px; }
    .e-con.mx-pddesc__inner { padding-block: 48px; }
    .e-con.mx-pdrel__inner { padding-block: 0 48px; }
    .mx-pd__title { font-size: 29px; }
    .mx-pd__reltitle { font-size: 24px; }
    .mx-pd__features { grid-template-columns: minmax(0, 1fr); }
    .mx-pd__assures { grid-template-columns: minmax(0, 1fr); }
    .mx-pd__specs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .mx-pd__relgrid { grid-template-columns: minmax(0, 1fr); }
    .mx-pd__relhead { flex-direction: column; align-items: flex-start; gap: 18px; }
    .elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery__image img { height: 300px; }
    .elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery__image img.zoomImg { height: auto; }
    .elementor-widget.mx-pd__gallery.mx-pd__gallery .woocommerce-product-gallery .flex-control-thumbs li img { height: 78px; }
}

/* -- 21.7 The quote drawer ------------------------------------------------ */

/* An Elementor Pro popup: pinned right, full height and sliding in are all its
   own document settings, so nothing here positions or animates it. This is only
   what is inside the panel. */
.e-con.mx-qd { display: flex; flex-direction: column; height: 100%; padding: 0; gap: 0; }
.e-con.mx-qd__head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 34px 22px;
    border-bottom: 1px solid var(--mx-rule);
    flex: none;
}
.elementor-widget.mx-qd__title .elementor-heading-title {
    font: 700 26px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}
.mx-qd__product {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--mx-surface-tint);
    border: 1px solid #e0eae5;
    border-radius: 16px;
    padding: 12px 14px;
}
.mx-qd__productimg {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 12px;
    background: #e2eae6 center/cover no-repeat;
}
.mx-qd__producttext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mx-qd__productlabel { font: 500 11px/1 var(--mx-font-body); letter-spacing: .08em; color: #8b9995; }
.mx-qd__productname  { font: 700 15px/1.25 var(--mx-font-heading); color: var(--mx-ink); }

/* The body scrolls; the head and the form's own button row stay put. */
.e-con.mx-qd__body { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 34px; }

.elementor-widget.mx-qd__form .elementor-field-group { margin-bottom: 16px; }
.elementor-widget.mx-qd__form .elementor-field-label {
    font: 600 12.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    margin-bottom: 7px;
}
/* Hello Elementor's reset styles fields by attribute at (0,1,1), so each rule is
   doubled up on the widget class to clear it — the same fight the shop hero's
   search had. */
.elementor-widget.mx-qd__form .elementor-field-textual,
.elementor-widget.mx-qd__form input.elementor-field-textual,
.elementor-widget.mx-qd__form select.elementor-field-textual,
.elementor-widget.mx-qd__form textarea.elementor-field-textual {
    min-height: 50px;
    border: 1.5px solid #dbe4e0;
    border-radius: 14px;
    padding: 0 16px;
    font: 400 14.5px/1.4 var(--mx-font-body);
    color: #2f3d39;
    background: var(--mx-paper);
    box-shadow: none;
}
.elementor-widget.mx-qd__form textarea.elementor-field-textual { padding: 14px 16px; line-height: 1.5; resize: none; }
.elementor-widget.mx-qd__form .elementor-field-textual:focus { border-color: var(--mx-green-accent); outline: none; }

/* Step indicator: numbered circles with their label, Elementor's number_text. */
.elementor-widget.mx-qd__form .e-form__indicators { margin-bottom: 22px; gap: 12px; }
.elementor-widget.mx-qd__form .e-form__indicators__indicator__number {
    width: 26px;
    height: 26px;
    border-radius: var(--mx-radius-pill);
    font: 700 12px/1 var(--mx-font-body);
    background: var(--mx-rule);
    color: #8b9995;
}
.elementor-widget.mx-qd__form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number,
.elementor-widget.mx-qd__form .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number {
    background: var(--mx-green-accent);
    color: var(--mx-paper);
}
.elementor-widget.mx-qd__form .e-form__indicators__indicator__label {
    font: 600 12.5px/1 var(--mx-font-body);
    color: #8b9995;
}
.elementor-widget.mx-qd__form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__label {
    color: var(--mx-ink);
}
.elementor-widget.mx-qd__form .e-form__indicators__indicator__separator { background: var(--mx-rule); height: 2px; border-radius: 2px; }
.elementor-widget.mx-qd__form .e-form__indicators__indicator--state-completed + .e-form__indicators__indicator__separator { background: var(--mx-green-accent); }

/* Buttons: the forward action fills the row, Back sits beside it when there. */
.elementor-widget.mx-qd__form .e-form__buttons { gap: 10px; margin-top: 6px; }
.elementor-widget.mx-qd__form .elementor-button {
    border-radius: var(--mx-radius-pill);
    font: 700 14px/1 var(--mx-font-body);
    padding: 17px 24px;
    border: 0;
    background-color: var(--mx-green-maxi);
    color: var(--mx-paper);
    transition: background-color .2s ease;
}
.elementor-widget.mx-qd__form .elementor-button:hover { background-color: var(--mx-green-flex); }
.elementor-widget.mx-qd__form .e-form__buttons__wrapper__button-previous {
    background-color: transparent;
    border: 1.5px solid var(--mx-rule-strong);
    color: var(--mx-ink);
    flex: none;
}
.elementor-widget.mx-qd__form .e-form__buttons__wrapper__button-previous:hover {
    background-color: transparent;
    border-color: var(--mx-green-maxi);
    color: var(--mx-green-maxi);
}
.elementor-widget.mx-qd__form .e-form__buttons__wrapper { flex: 1; display: flex; gap: 10px; }
.elementor-widget.mx-qd__form .e-form__buttons__wrapper .elementor-button { flex: 1; }

@media (max-width: 767px) {
    .e-con.mx-qd__head { padding: 20px 22px 18px; }
    .e-con.mx-qd__body { padding: 20px 22px; }
    .elementor-widget.mx-qd__title .elementor-heading-title { font-size: 21px; }
}

/* ---------------------------------------------------------------------------
 * 22. Single product — the shop
 *
 * design/online single product page wireframe/Maxiflex Shop Product Mockup.dc.html
 *
 * The buyable half of the pair. §21 dresses the quoted products; this dresses
 * everything with a price, and reuses §21 wherever the two designs agree — the
 * breadcrumb, the gallery, the split heading and the eyebrow are all shared
 * classes, so only what differs is restated here.
 *
 * What differs is the buy box. WooCommerce renders the add-to-cart form, so most
 * of these rules dress its markup rather than markup we own; the variation
 * selects stay in the DOM as the source of truth and are decorated into the
 * design's chips.
 * --------------------------------------------------------------------------- */

.e-con.mx-sp__hero__inner,
.e-con.mx-sp__desc__inner,
.e-con.mx-sprel__inner { padding-inline: var(--mx-gutter); }

/* -- 22.1 Gallery and buy box ---------------------------------------------- */

.e-con.mx-sp__hero { background: var(--mx-paper); padding: 0; }

.e-con.mx-sp__hero__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 56px;
    align-items: start;
    padding-block: 0;
}

.e-con.mx-sp__hero__inner { padding-block: 30px 76px; }

/* The badges overlay the gallery, so the column is the positioning context. */
.e-con.mx-sp__gallery { position: relative; padding: 0; gap: 16px; }
.e-con.mx-sp__info { padding: 0; gap: 20px; }

.elementor-widget.mx-sp__badgeswrap {
    position: absolute;
    inset-inline-start: 20px;
    inset-block-start: 20px;
    z-index: 2;
    width: auto;
}

.mx-sp__badges { display: flex; gap: 8px; }

.mx-sp__badge {
    font: 700 11px/1 var(--mx-font-body, Inter, sans-serif);
    letter-spacing: .06em;
    padding: 9px 14px;
    border-radius: 999px;
}

.mx-sp__badge--stock { background: var(--mx-green-flex); color: #fff; }
.mx-sp__badge--cut { background: rgba(255, 255, 255, .92); color: var(--mx-ink); }

/* Lime carries small details across the site; here it is the sale flag. Dark
   green on it rather than white — lime is a light value and white does not read
   against it. */
.mx-sp__badge--sale { background: var(--mx-lime); color: var(--mx-green-flex); }

/* WooCommerce's own flash, printed by the product-images widget as an absolutely
   positioned sibling that overlapped the badge row. The flag is rendered inside
   the row by [maxiflex_shop_badges] instead. */
.elementor-widget.mx-sp__images .onsale { display: none; }

.mx-sp__sku {
    font: 500 13px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-muted);
}

.elementor-widget.mx-sp__lead p:last-child { margin-bottom: 0; }

/* -- 22.2 The buy box ------------------------------------------------------ */

/*
 * The tinted half and the white one are not two wrappers: WooCommerce's form
 * spans the boundary between them, and the add-to-cart button has to stay inside
 * it. So the box is tinted throughout and .mx-buy__foot — which the form's own
 * hooks open midway through — paints the white half over it.
 */
/*
 * Flex, so the whitespace between </form> and </div> is not laid out. As a block
 * it became an anonymous line box and painted a 16px band of tint below the
 * white half, inside the rounded corner.
 */
.mx-buy {
    display: flex;
    flex-direction: column;
    background: var(--mx-surface-tint);
    border: 1px solid var(--mx-rule);
    border-radius: 24px;
    overflow: hidden;
}

.mx-buy__pricerow, .mx-buy > form.cart { padding-inline: 26px; }
.mx-buy__pricerow { padding-block: 24px 16px; }
.mx-buy > form.cart { padding-block: 0; }

/*
 * The white half is the form's last child and has to reach three edges of the
 * box, so it breaks out of the form's inline padding. The form carries no bottom
 * padding for it to cancel — a negative bottom margin would work too, but this
 * way the box's height is simply the content's.
 */
.mx-buy__foot {
    margin: 8px -26px 0;
    border-top: 1px solid var(--mx-rule);
}

/* Neutralises §15's standalone card, which this box supersedes. */
.mx-buy .mx-length {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
}

.mx-buy__pricerow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.mx-buy__price { display: flex; flex-direction: column; gap: 4px; }

.mx-buy__pricelabel {
    font: 500 12px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-muted);
}

.mx-buy__priceline { display: flex; align-items: baseline; gap: 8px; }

.mx-buy__pricevalue {
    font: 700 34px/1 var(--mx-font-heading);
    color: var(--mx-green-flex);
    letter-spacing: -.02em;
}

.mx-buy__pricetax,
.mx-buy__totaltax {
    font: 600 12.5px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-muted);
}

.mx-buy__pricemeta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    font: 400 12.5px/1.5 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-soft);
}

/*
 * WooCommerce's price colour beats the obvious override —
 * .woocommerce:where(…) div.product p.price is (0,3,2) — so the figures inside
 * the buy box are reached through the class as well. Same trap as §16's.
 */
.mx-buy .mx-buy__pricevalue .woocommerce-Price-amount,
.mx-buy .mx-buy__totalvalue .woocommerce-Price-amount,
.mx-buy .mx-buy__priceincl .woocommerce-Price-amount,
.mx-buy .mx-buy__totalincl .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }

/* -- 22.3 WooCommerce's add-to-cart form ----------------------------------- */

/*
 * .woocommerce div.product form.cart carries a 2em bottom margin at (0,3,1), so
 * a rule on .mx-buy form.cart at (0,2,1) loses the tie and the white half stops
 * short of the box's edge. Prefixed to (0,4,1).
 */
.woocommerce div.product .mx-buy form.cart,
.mx-buy form.cart {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

/*
 * WooCommerce's clearfix on the form is .woocommerce div.product form.cart::after
 * at (0,3,1), so a rule at (0,2,1) loses the tie. It matters more than a clearfix
 * usually would: the form is a flex column, so the ::after becomes a flex item
 * and the 16px gap before it painted a band of tint below the white half.
 */
.woocommerce div.product .mx-buy form.cart::before,
.woocommerce div.product .mx-buy form.cart::after,
.mx-buy form.cart::before,
.mx-buy form.cart::after { content: none; }

/* WooCommerce prints the variation price and its own stock line inside the
   form; both are already stated in the header above. */
.mx-buy form.cart .woocommerce-variation-price,
.mx-buy form.cart .woocommerce-variation-availability,
.mx-buy .stock { display: none; }

/*
 * The variations table is laid out as blocks, and every inherited table style
 * has to go with it — a th/td background renders as a grey panel behind the
 * chips, which is not a border to override but a fill to clear.
 */
.mx-buy table.variations,
.woocommerce div.product .mx-buy table.variations { margin: 0; border: 0; width: 100%; background: none; }

.mx-buy table.variations tbody,
.mx-buy table.variations tr,
.mx-buy table.variations th,
.mx-buy table.variations td,
.woocommerce div.product .mx-buy table.variations tbody,
.woocommerce div.product .mx-buy table.variations tr,
.woocommerce div.product .mx-buy table.variations th,
.woocommerce div.product .mx-buy table.variations td {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    text-align: start;
}

.mx-buy table.variations tr + tr { margin-top: 14px; }

.mx-buy table.variations td.label {
    font: 600 12.5px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink);
    margin-bottom: 8px;
}

.mx-buy table.variations td.label label { font-weight: 600; margin: 0; }

/*
 * The chips. JS builds them from the select's own options and leaves the select
 * in place, so WooCommerce's variation script still drives price, SKU and
 * availability — and with JavaScript off the select is simply what the visitor
 * gets.
 */
.mx-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.mx-chip {
    font: 600 12.5px/1 var(--mx-font-body, Inter, sans-serif);
    padding: 12px 16px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    background: var(--mx-paper);
    color: var(--mx-ink);
    border: 1.5px solid var(--mx-rule-strong);
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

/*
 * The background has to be restated on hover and focus, not just the border.
 * Hello Elementor's reset.css carries `button:hover, button:focus
 * {background-color:#c36}` at (0,1,1), and the chip's own background sits on a
 * bare `.mx-chip` at (0,1,0) — same class count, fewer elements, so the reset
 * wins the moment the pointer lands. Same trap as .mx-step__btn; anything we
 * render as a bare <button> needs its hover *and* focus background declared at
 * (0,2,0) or better, never left to the base rule.
 */
.mx-chips .mx-chip:hover,
.mx-chips .mx-chip:focus {
    background: var(--mx-paper);
    border-color: var(--mx-green-accent);
    color: var(--mx-green-flex);
}

.mx-chips .mx-chip:focus:not(:focus-visible) { border-color: var(--mx-rule-strong); color: var(--mx-ink); }
.mx-chips .mx-chip:focus-visible { outline: 2px solid var(--mx-green-accent); outline-offset: 2px; }

.mx-chip[aria-pressed="true"] {
    background: var(--mx-green-accent);
    border-color: var(--mx-green-accent);
    color: #fff;
}

.mx-chips .mx-chip[aria-pressed="true"]:hover,
.mx-chips .mx-chip[aria-pressed="true"]:focus {
    background: var(--mx-green-accent);
    border-color: var(--mx-green-accent);
    color: var(--mx-paper);
}

/* A chip WooCommerce has disabled — no variation allows that combination. */
.mx-chips .mx-chip[disabled] { opacity: .4; cursor: default; }
.mx-chips .mx-chip[disabled]:hover,
.mx-chips .mx-chip[disabled]:focus { background: var(--mx-paper); border-color: var(--mx-rule-strong); color: var(--mx-ink); }

/* The select stays for screen readers and the no-JS path. */
.mx-buy .mx-chips + select { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/*
 * "Clear". The child theme sets no global link colour — every component colours
 * its own — so an anchor we do not style falls through to Hello's `a{color:#c36}`.
 */
.mx-buy a.reset_variations {
    display: inline-block;
    margin-top: 8px;
    font: 500 12.5px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mx-buy a.reset_variations:hover { color: var(--mx-green-flex); }

/* -- 22.4 Steppers --------------------------------------------------------- */

/* Length and quantity sit side by side. The pricing plugin renders the length
   field and WooCommerce the quantity, so the row is formed here. */
/* Flex, not a two-column grid: 22 products have no length field, and an empty
   grid cell would leave the quantity stepper occupying half the row. */
.mx-buy__steppers { display: flex; gap: 12px; }
.mx-buy__steppers > * { flex: 1; min-width: 0; }

.mx-buy .mx-length,
.mx-buy__qtywrap,
.mx-buy .quantity {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    float: none;
}

/* The wrapper holds the label and WooCommerce's own .quantity, so the gap
   between them is the wrapper's and the inner div adds none of its own. */
.mx-buy__qtywrap > .quantity { gap: 0; }

.mx-buy .mx-length__label,
.mx-buy__qtylabel {
    font: 600 12.5px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink);
    margin: 0;
}

.mx-buy .mx-length__unit { color: var(--mx-ink-muted); font-weight: 400; }

/* The stepper shell wraps the real input, which stays the source of truth. */
.mx-step {
    display: flex;
    align-items: center;
    background: var(--mx-paper);
    border: 1.5px solid var(--mx-rule-strong);
    border-radius: 14px;
    height: 52px;
    overflow: hidden;
}

.mx-step__btn {
    width: 46px;
    height: 100%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 20px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink);
    cursor: pointer;
    user-select: none;
    background: none;
    border: 0;
    padding: 0;
}

/*
 * Hello Elementor's reset.css carries `button:focus{background-color:#c36}` at
 * (0,1,1), and a bare `.mx-step__btn` is only (0,1,0) — same class count, fewer
 * elements, so the reset wins and the button stays magenta after a click until
 * something else takes focus. Prefixing with .mx-step reaches (0,2,1).
 */
.mx-step .mx-step__btn:hover,
.mx-step .mx-step__btn:focus { color: var(--mx-green-maxi); background: var(--mx-surface-tint); }

/* A pointer click should leave no mark; a keyboard focus must be visible. */
.mx-step .mx-step__btn:focus:not(:focus-visible) { color: var(--mx-ink); background: none; }
.mx-step .mx-step__btn:focus-visible { outline: 2px solid var(--mx-green-accent); outline-offset: -2px; }
.mx-step__btn:first-child { border-inline-end: 1px solid var(--mx-surface-band); }
.mx-step__btn:last-child { border-inline-start: 1px solid var(--mx-surface-band); }
.mx-step__btn[disabled] { opacity: .35; cursor: default; }
.mx-step .mx-step__btn[disabled]:hover,
.mx-step .mx-step__btn[disabled]:focus { color: var(--mx-ink); background: none; }

/*
 * Hello Elementor's reset.css styles fields by attribute at (0,1,1), which beats
 * a single class — so the input is reached through the shell as well.
 */
.mx-step input[type="number"],
.mx-step input.mx-length__input,
.mx-step input.qty {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 100%;
    border: 0;
    background: none;
    text-align: center;
    font: 700 16px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-strong);
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.mx-step input[type="number"]::-webkit-outer-spin-button,
.mx-step input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mx-step input:focus { outline: 0; }

/* Inside .mx-length, which is a half-width flex column, so it wraps after four
   words. Its min and max are stated in the price header and the note instead. */
.mx-buy .mx-length__range { display: none; }

.mx-buy__note {
    font: 400 12.5px/1.5 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-soft);
    margin: 0;
}

.mx-buy__note a { color: var(--mx-green-flex); font-weight: 600; text-decoration: underline; }

/* The plugin's own total line is superseded by the subtotal block below. */
.mx-buy .mx-length__total { display: none; }

/* -- 22.5 Totals and actions ----------------------------------------------- */

.mx-buy__foot {
    background: var(--mx-paper);
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mx-buy__qtylabel { display: block; }

.mx-buy__totals { display: flex; flex-direction: column; gap: 8px; }

.mx-buy__totalrow { display: flex; align-items: center; justify-content: space-between; }

.mx-buy__totallabel {
    font: 600 13.5px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink);
}

.mx-buy__totalline { display: flex; align-items: baseline; gap: 8px; }

.mx-buy__totalvalue {
    font: 700 26px/1 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.01em;
}

.mx-buy__totalrow--vat {
    font: 400 12.5px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-muted);
}

/*
 * Elementor's add-to-cart rules sit at (0,3,0) and load after the theme, so an
 * equal-specificity rule loses the tie — the button is reached at (0,4,0).
 */
.mx-buy .mx-buy__actions,
.mx-buy form.cart .mx-buy__cartrow { display: flex; gap: 10px; align-items: stretch; }

.mx-buy form.cart button.single_add_to_cart_button,
.woocommerce .mx-buy form.cart button.single_add_to_cart_button {
    flex: 1;
    background: var(--mx-green-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font: 700 14.5px/1 var(--mx-font-body, Inter, sans-serif);
    padding: 18px 0;
    border-radius: 999px;
    border: 0;
    box-shadow: 0 10px 22px rgba(35, 164, 85, .26);
    transition: background .18s ease;
}

.mx-buy form.cart button.single_add_to_cart_button:hover,
.woocommerce .mx-buy form.cart button.single_add_to_cart_button:hover { background: var(--mx-green-maxi); color: #fff; }

.mx-buy form.cart button.single_add_to_cart_button.disabled,
.woocommerce .mx-buy form.cart button.single_add_to_cart_button.disabled { opacity: .45; box-shadow: none; }

.mx-buy__contact {
    border: 1.5px solid var(--mx-rule-strong);
    color: var(--mx-ink);
    font: 700 13.5px/1 var(--mx-font-body, Inter, sans-serif);
    padding: 18px 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s ease, color .18s ease;
}

.mx-buy__contact:hover { border-color: var(--mx-green-accent); color: var(--mx-green-flex); }

.mx-buy__assures {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    border-top: 1px solid var(--mx-surface-band);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mx-buy__assure {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 13px/1.4 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-soft);
}

.mx-buy__dot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.mx-buy__dot--green { background: var(--mx-green-accent); }
.mx-buy__dot--lime { background: var(--mx-lime); }
.mx-buy__dot--orange { background: var(--mx-orange); }

/* The shop's gallery is taller than the catalogue's 470px: the buy box beside it
   is a tall column, and at 470 the image finished level with the length stepper
   and left the rest of the row empty. */
.elementor-widget.mx-sp__images.mx-sp__images .woocommerce-product-gallery__image img { height: 560px; }
.elementor-widget.mx-sp__images.mx-sp__images .woocommerce-product-gallery__image img.zoomImg { height: auto; }

/* -- 22.6 Product brochures ------------------------------------------------ */

/* Under the gallery, filling the white space the taller image does not. Cards
   wrap into as many columns as they fit rather than a fixed two, since a product
   may have one, two or three. */
.mx-sp__docsblock { display: flex; flex-direction: column; gap: 14px; }

.mx-sp__docstitle {
    font: 700 13px/1 var(--mx-font-body, Inter, sans-serif);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mx-green-flex);
    margin: 0;
}

.mx-sp__docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

.mx-sp__doc {
    border: 1px solid var(--mx-rule);
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color .18s ease, background .18s ease;
}

.mx-sp__doc:hover { border-color: var(--mx-green-accent); background: var(--mx-surface-tint); }

/* Masked to a flat colour rather than tinted artwork, as the stat icons are. */
.mx-sp__docicon {
    width: 30px;
    height: 30px;
    flex: none;
    background: var(--mx-green-flex);
    -webkit-mask: url("assets/icons/icon-pdf.png") center / contain no-repeat;
    mask: url("assets/icons/icon-pdf.png") center / contain no-repeat;
}

.mx-sp__doctext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.mx-sp__docname {
    font: 700 13.5px/1.25 var(--mx-font-heading);
    color: var(--mx-ink);
}

.mx-sp__dockind {
    font: 400 12px/1.3 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-muted);
}

/* -- 22.7 Description ------------------------------------------------------ */

.e-con.mx-sp__desc { background: var(--mx-paper); padding: 0; }

.e-con.mx-sp__desc__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 56px;
    align-items: start;
    padding-block: 0;
}

.e-con.mx-sp__desc__inner { padding-block: 80px; }
.e-con.mx-sp__desctext { padding: 0; gap: 22px; }
.e-con.mx-sp__descaside { padding: 0; }

.elementor-widget.mx-sp__body p {
    font: 400 16px/1.68 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-soft);
    text-wrap: pretty;
}

.elementor-widget.mx-sp__body p:last-child { margin-bottom: 0; }

.e-con.mx-sp__descaside .mx-sp__aside {
    background: var(--mx-surface-band);
    border-radius: 22px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mx-sp__asidetitle { font: 700 17px/1.3 var(--mx-font-heading); color: var(--mx-ink); margin: 0; }

.mx-sp__asidebody {
    margin: 0;
    font: 400 14.5px/1.6 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-soft);
}

.mx-sp__asidecta {
    align-self: flex-start;
    background: var(--mx-green-flex);
    color: #fff;
    font: 700 13px/1 var(--mx-font-body, Inter, sans-serif);
    padding: 15px 22px;
    border-radius: 999px;
    transition: background .18s ease;
}

.mx-sp__asidecta:hover { background: var(--mx-green-maxi); color: #fff; }

/* The two bulleted columns under the description. A product with only features
   gets one full-width column rather than an empty second one. */
.mx-splists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 8px; }

.mx-splist { display: flex; flex-direction: column; gap: 12px; }

.mx-splist__title {
    font: 700 13px/1 var(--mx-font-body, Inter, sans-serif);
    letter-spacing: .08em;
    color: var(--mx-green-flex);
    margin: 0;
}

.mx-splist__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.mx-splist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font: 400 14.5px/1.5 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-soft);
}

.mx-splist__dot { width: 6px; height: 6px; border-radius: 999px; flex: none; margin-top: 7px; }
.mx-splist--features .mx-splist__dot { background: var(--mx-green-accent); }
.mx-splist--apps .mx-splist__dot { background: var(--mx-lime); }

/* -- 22.8 Often bought together -------------------------------------------- */

.e-con.mx-sprel { background: var(--mx-surface-band); padding: 0; border-top: 1px solid var(--mx-rule); }
.e-con.mx-sprel__inner { padding-block: 80px; }
.e-con.mx-sprel__inner > .e-con-inner { padding-block: 0; }

.mx-sprel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.mx-sprel__card {
    background: var(--mx-paper);
    border: 1px solid var(--mx-rule);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mx-sprel__img {
    display: block;
    height: 168px;
    background: var(--mx-paper) center / cover no-repeat;
    border-bottom: 1px solid var(--mx-surface-band);
}

.mx-sprel__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.mx-sprel__range {
    font: 600 10.5px/1 var(--mx-font-body, Inter, sans-serif);
    letter-spacing: .1em;
    color: var(--mx-ink-muted);
}

.mx-sprel__name { font: 700 16px/1.32 var(--mx-font-heading); margin: 0; text-wrap: pretty; }
.mx-sprel__name a { color: var(--mx-ink); }
.mx-sprel__name a:hover { color: var(--mx-green-maxi); }

.mx-sprel__spec {
    margin: 0;
    font: 400 13px/1.45 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-muted);
}

.mx-sprel__pricerow {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: auto;
    padding-top: 8px;
}

.mx-sprel__price { font: 700 18px/1 var(--mx-font-heading); color: var(--mx-green-flex); }
.mx-sprel__price .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }

.mx-sprel__unit {
    font: 500 11.5px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink-muted);
}

.mx-sprel__cta {
    background: var(--mx-green-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 700 12.5px/1 var(--mx-font-body, Inter, sans-serif);
    padding: 13px 0;
    border-radius: 999px;
    margin-top: 10px;
    transition: background .18s ease;
}

.mx-sprel__cta:hover { background: var(--mx-green-maxi); color: #fff; }

/* -- 22.9 CTA -------------------------------------------------------------- */

/* The mockup gives this band no photograph, so it is .mx-cta without the
   photographic modifier — only the form's width differs from §21's. */
.e-con.mx-cta--shop .mx-cta__form--4 .elementor-form-fields-wrapper { max-width: 1180px; }

/* -- 22.10 Responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
    .e-con.mx-sp__hero__inner > .e-con-inner,
    .e-con.mx-sp__desc__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .e-con.mx-sp__hero__inner { padding-block: 24px 64px; }
    .e-con.mx-sp__desc__inner,
    .e-con.mx-sprel__inner { padding-block: 64px; }
    .mx-sprel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .e-con.mx-sp__hero__inner { padding-block: 18px 48px; }
    .e-con.mx-sp__desc__inner,
    .e-con.mx-sprel__inner { padding-block: 48px; }
    .mx-buy__head, .mx-buy__foot { padding-inline: 20px; }
    .mx-buy__pricerow { flex-direction: column; align-items: flex-start; gap: 8px; }
    .mx-buy__pricemeta { text-align: left; }
    .mx-buy__steppers { flex-direction: column; }
    .mx-buy .mx-buy__actions,
    .mx-buy form.cart .mx-buy__cartrow { flex-direction: column; }
    .mx-sprel__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
 * 23. WooCommerce notices
 *
 * "… has been added to your cart", and its error and info siblings. Site-wide:
 * the same component appears on the product page, the cart, the checkout and
 * the shop, so this is the one place it gets designed.
 *
 * WooCommerce ships it as a full-bleed grey bar with a 3px purple top rule, an
 * icon-font tick and a floated grey button — none of which belongs to this
 * palette. Every value below is an existing --mx-* token; the only new shape is
 * the tick, drawn in CSS so it needs no asset.
 *
 * Specificity: WooCommerce's own rules are (0,1,0) and its ::before is (0,1,1).
 * The child stylesheet loads after woocommerce-general, so a tie would fall our
 * way, but the wrapper class is used throughout to win outright rather than by
 * load order.
 * --------------------------------------------------------------------------- */

/*
 * The bar is printed outside the Elementor frame, so it carries the frame — but
 * no gutter: the panel spans the full 1440 rather than lining up with the
 * breadcrumb beneath it, which is what the notice is meant to do. It is an
 * interruption, not part of the page's column.
 */
.woocommerce-notices-wrapper:not(:empty) {
    max-width: var(--mx-container);
    margin-inline: auto;
    padding: 24px 0 0;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    /* 18px matches the document cards — the closest sibling component, a
       bordered horizontal bar with an icon on the left. */
    padding: 18px 22px;
    border: 1px solid var(--mx-rule);
    border-radius: 18px;
    background: var(--mx-surface-tint);
    color: var(--mx-ink);
    font: 400 15px/1.5 var(--mx-font-body);
    list-style: none;
}

/* WooCommerce's clearfix pair and its icon-font tick, both replaced below. */
.woocommerce-notices-wrapper .woocommerce-message::after,
.woocommerce-notices-wrapper .woocommerce-info::after,
.woocommerce-notices-wrapper .woocommerce-error::after,
.woocommerce .woocommerce-message::after,
.woocommerce .woocommerce-info::after,
.woocommerce .woocommerce-error::after { content: none; }

/*
 * The glyph, as an inline SVG rather than WooCommerce's icon font. The site
 * masks its icons to a flat colour and there is no tick in assets/icons/ — a
 * data URI keeps this to CSS without adding an asset for three glyphs, and
 * scales cleanly where a font character would not.
 */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
    content: "";
    position: static;
    display: block;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--mx-radius-pill);
    font-family: inherit;
    background-color: var(--mx-green-accent);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.5 4.5L18.5 7.5'/%3E%3C/svg%3E");
}

.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce .woocommerce-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 10.8v6.4'/%3E%3Cpath d='M12 6.6v.5'/%3E%3C/svg%3E");
}

.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce .woocommerce-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6.4v7.2'/%3E%3Cpath d='M12 17.4v.4'/%3E%3C/svg%3E");
}

/* Info is the site's primary green; an error takes the orange §3 licenses as
   the semantic alert colour. Neither is a new value. */
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce .woocommerce-info::before { background-color: var(--mx-green-flex); }

.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-error { border-color: rgba(237, 139, 0, .34); background: rgba(237, 139, 0, .07); }

.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce .woocommerce-error::before { background-color: var(--mx-orange); }

/* An error is a <ul> of <li>, so the text is one flex item rather than a node. */
.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce .woocommerce-error li { margin: 0; padding: 0; list-style: none; }

/* The button. WooCommerce floats it right; this pushes it instead, so it stays
   on the flex baseline and the text can wrap beside it. */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.woocommerce-notices-wrapper .woocommerce-error .button,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
    float: none;
    flex: none;
    /* WooCommerce prints the button BEFORE the text on some notices — the
       account page's "Confirm email address" is one — so the order is stated
       here rather than left to the markup. Bare text is an anonymous flex item
       at order 0, so 1 puts the button after it whichever way round it came. */
    order: 1;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mx-green-maxi);
    color: var(--mx-paper);
    border: 0;
    border-radius: var(--mx-radius-pill);
    font: 700 13.5px/1 var(--mx-font-body);
    padding: 14px 24px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 147, 102, .28);
    transition: background-color .2s ease;
}

.woocommerce-notices-wrapper .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-info .button:hover,
.woocommerce-notices-wrapper .woocommerce-error .button:hover,
.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-error .button:hover {
    background-color: var(--mx-green-flex);
    color: var(--mx-paper);
}

/* Focus is not left to the browser's default ring on a pill. */
.woocommerce-notices-wrapper .woocommerce-message .button:focus-visible,
.woocommerce .woocommerce-message .button:focus-visible {
    outline: 2px solid var(--mx-green-flex);
    outline-offset: 2px;
}

/*
 * WooCommerce gives the notice tabindex="-1" and focuses it so a screen reader
 * announces it. Chrome counts that programmatic focus as :focus-visible, so
 * :focus:not(:focus-visible) never fires and the panel gets the browser's blue
 * ring. The panel is not interactive — it is a announcement target — so the
 * outline goes entirely; the button inside keeps its own.
 */
.woocommerce-notices-wrapper .woocommerce-message:focus,
.woocommerce-notices-wrapper .woocommerce-info:focus,
.woocommerce-notices-wrapper .woocommerce-error:focus,
.woocommerce .woocommerce-message:focus,
.woocommerce .woocommerce-info:focus,
.woocommerce .woocommerce-error:focus { outline: none; }

/*
 * Grid at mobile, not wrapped flex. The message text is an anonymous flex item,
 * so its hypothetical size is the whole sentence unwrapped — wider than the
 * line — and `flex-wrap: wrap` therefore pushed it to its own row, leaving the
 * tick sitting alone above it. A two-column grid keeps the tick beside the
 * first line and drops the button underneath, indented to the text.
 */
@media (max-width: 767px) {
    /* The gutter comes back below the frame: flush to the viewport, a rounded
       card sits hard against the screen edge where every other band is inset. */
    .woocommerce-notices-wrapper:not(:empty) { padding: 18px var(--mx-gutter) 0; }

    .woocommerce-notices-wrapper .woocommerce-message,
    .woocommerce-notices-wrapper .woocommerce-info,
    .woocommerce-notices-wrapper .woocommerce-error,
    .woocommerce .woocommerce-message,
    .woocommerce .woocommerce-info,
    .woocommerce .woocommerce-error {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
        padding: 16px 18px;
    }

    .woocommerce-notices-wrapper .woocommerce-message .button,
    .woocommerce-notices-wrapper .woocommerce-info .button,
    .woocommerce-notices-wrapper .woocommerce-error .button,
    .woocommerce .woocommerce-message .button,
    .woocommerce .woocommerce-info .button,
    .woocommerce .woocommerce-error .button {
        grid-column: 2;
        justify-self: start;
        margin-inline-start: 0;
    }

    /* The glyph sits on the first line's baseline rather than the box's top. */
    .woocommerce-notices-wrapper .woocommerce-message::before,
    .woocommerce-notices-wrapper .woocommerce-info::before,
    .woocommerce-notices-wrapper .woocommerce-error::before,
    .woocommerce .woocommerce-message::before,
    .woocommerce .woocommerce-info::before,
    .woocommerce .woocommerce-error::before { margin-block-start: -1px; }
}

/* ---------------------------------------------------------------------------
 * 24. The cart
 *
 * /cart/ is WooCommerce's Cart Block, kept rather than swapped for the classic
 * shortcode: the Store API surfaces the pricing plugin's own line data, so a
 * per-metre item reports "Length: 12 m" and its line total is rate x length x
 * quantity. The block is correct about this catalogue; only its dressing is
 * WooCommerce's.
 *
 * There is no approved mockup for this page. The frame, type scale, breadcrumb,
 * card geometry and buttons are all the product page's, unchanged — the same
 * derivation §15 records for the catalogue archives. What differs is only what
 * a cart forces.
 *
 * The block's own rules run to (0,4,1) — e.g.
 * `.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row
 * .wc-block-cart-item__image` — so everything below is prefixed from
 * .wp-block-woocommerce-cart to clear them outright rather than by load order.
 * --------------------------------------------------------------------------- */

/*
 * Hello Elementor's page template wraps the content in .site-main > .page-content
 * at the theme's content width, and prints its own <h1 class="entry-title">Cart</h1>
 * above it. The block needs the full frame and the heading is already in
 * [maxiflex_cart_head], so both are released here — scoped to body.woocommerce-cart,
 * which WooCommerce sets, so no other page is affected.
 */
body.woocommerce-cart .page-header { display: none; }

body.woocommerce-cart .site-main,
body.woocommerce-cart .site-main > .page-content {
    max-width: none;
    width: auto;
    padding-inline: 0;
}

.mx-cart__head,
.wp-block-woocommerce-cart,
.mx-cart__assurebar {
    max-width: var(--mx-container);
    margin-inline: auto;
    padding-inline: var(--mx-gutter);
    box-sizing: border-box;
}

/* -- 24.1 Head -------------------------------------------------------------- */

.mx-cart__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-block: 28px 30px;
}

/* The breadcrumb is navigation, the eyebrow opens the page — they want more
   than the head's own gap between them. */
.mx-cart__head .mx-crumbs { margin-bottom: 16px; }

.mx-cart__title {
    font: 700 44px/1.16 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
    margin: 0;
}

.mx-cart__lead {
    margin: 0;
    font: 400 16px/1.6 var(--mx-font-body);
    color: var(--mx-ink-soft);
}

/* -- 24.2 The two columns --------------------------------------------------- */

/* The block ships its own responsive classes (is-large / is-medium / is-mobile)
   keyed to the container's width, not the viewport, so the columns are set here
   rather than left to it. */
.wp-block-woocommerce-cart .wc-block-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 56px;
    align-items: start;
}

/*
 * Both columns carry two classes — `wc-block-components-main wc-block-cart__main`
 * — and WooCommerce sizes them through the first at (0,2,0)
 * (`.wc-block-components-sidebar-layout .wc-block-components-main{width:65%}`).
 * Matching that specificity would leave the result to load order, so the row is
 * named as well, for (0,3,0).
 */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
    width: auto;
    max-width: none;
    padding: 0;
    float: none;
}

/* -- 24.3 Line items -------------------------------------------------------- */

.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items {
    border: 0;
    border-spacing: 0;
    margin: 0;
    width: 100%;
    background: none;
}

.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items th,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-items__header th {
    border: 0;
    padding: 0 0 14px;
    background: none;
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mx-ink-muted);
}

.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items td {
    border: 0;
    border-top: 1px solid var(--mx-rule);
    padding: 22px 0;
    background: none;
    vertical-align: top;
}

.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
    padding-right: 20px;
    width: 116px;
}

.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--mx-radius-inner);
    background: var(--mx-surface-band);
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-product-name {
    font: 700 16px/1.35 var(--mx-font-heading);
    color: var(--mx-ink);
    text-decoration: none;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-product-name:hover { color: var(--mx-green-maxi); }

/* "Length: 12 m" — the pricing plugin's line data, which is the whole reason
   this block is kept. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-product-metadata,
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-product-details {
    font: 400 13px/1.5 var(--mx-font-body);
    color: var(--mx-ink-muted);
    margin: 0;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-product-details__name { font-weight: 600; }

/* The block prints the short description under the name; on this catalogue that
   is a truncated sentence ending "Ideal…", which reads as broken copy. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-product-metadata__description { display: none; }

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-product-price__value,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-formatted-money-amount {
    font: 600 14px/1.4 var(--mx-font-body);
    color: var(--mx-ink);
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__total {
    text-align: right;
    white-space: nowrap;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount {
    font: 700 17px/1.3 var(--mx-font-heading);
    color: var(--mx-green-flex);
}

/* -- 24.4 Quantity and remove ----------------------------------------------- */

/* The buy box's stepper shell, so the control reads the same in the cart as it
   did on the product page. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector {
    display: flex;
    align-items: center;
    background: var(--mx-paper);
    border: 1.5px solid var(--mx-rule-strong);
    border-radius: var(--mx-radius-inner);
    height: 46px;
    width: 132px;
    max-width: none;
    min-width: 0;
    overflow: hidden;
    margin: 0;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector::after { content: none; }

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector__input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 100%;
    border: 0;
    background: none;
    text-align: center;
    font: 700 15px/1 var(--mx-font-body);
    color: var(--mx-ink-strong);
    padding: 0;
    order: 2;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector__button {
    flex: none;
    width: 40px;
    height: 100%;
    border: 0;
    background: none;
    color: var(--mx-ink);
    font: 600 19px/1 var(--mx-font-body);
    opacity: 1;
    padding: 0;
    transition: background-color .16s ease, color .16s ease;
}

/* Declared on hover AND focus: Hello's reset paints a focused <button> magenta,
   and a base-rule background loses to it at (0,1,1). See the note on .mx-chip. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector__button:hover,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector__button:focus {
    background: var(--mx-surface-tint);
    color: var(--mx-green-maxi);
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector__button--minus { order: 1; border-right: 1px solid var(--mx-surface-band); }
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector__button--plus { order: 3; border-left: 1px solid var(--mx-surface-band); }

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-item__quantity { padding-top: 12px; }

/*
 * A text link, not a bin glyph. WooCommerce's own rule is
 * `.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-link`
 * at (0,3,1), so the table has to be named here too or this loses on element
 * count.
 */
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-link,
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-icon {
    display: inline-block;
    margin-top: 10px;
    background: none;
    border: 0;
    padding: 0;
    font: 500 12.5px/1 var(--mx-font-body);
    color: var(--mx-ink-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/*
 * The button's content is an SVG bin. The site's language is text links, not
 * icon buttons, so the glyph is swapped for a word. The button already carries
 * aria-label="Remove <product> from cart", so assistive tech is unaffected by
 * the label being generated.
 */
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-link svg { display: none; }
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-link::after { content: "Remove"; }

.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-link:hover,
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-link:focus,
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-icon:hover,
.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-icon:focus {
    background: none;
    color: var(--mx-green-flex);
}

/* -- 24.5 The totals card --------------------------------------------------- */

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
    background: var(--mx-surface-tint);
    border: 1px solid var(--mx-rule);
    border-radius: 24px;
    padding: 26px;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__totals-title {
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mx-ink-muted);
    margin: 0 0 14px;
    padding: 0;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-item {
    padding: 10px 0;
    font: 400 14.5px/1.4 var(--mx-font-body);
    color: var(--mx-ink-soft);
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-item__value { color: var(--mx-ink); font-weight: 600; }

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-footer-item {
    border-top: 1px solid var(--mx-rule);
    margin-top: 6px;
    padding-top: 16px;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font: 700 16px/1.3 var(--mx-font-heading);
    color: var(--mx-ink);
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font: 700 26px/1 var(--mx-font-heading);
    color: var(--mx-green-flex);
    letter-spacing: -.01em;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-item__description {
    font: 400 12.5px/1.5 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

/* Coupons: present, but not competing with the total. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-panel__button {
    font: 600 13.5px/1 var(--mx-font-body);
    color: var(--mx-green-flex);
    padding: 12px 0;
    background: none;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-panel__button:hover,
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-panel__button:focus {
    background: none;
    color: var(--mx-green-maxi);
}

/* -- 24.6 The coupon form --------------------------------------------------- */

/*
 * The block's field carries a floating label: a real <label> sitting over the
 * input, moved up by an `.is-active` class that JS toggles and that shifts the
 * input's padding to `24px 9px 8px`. Both are left alone — only the shell is
 * dressed, or the label lands on top of the typed code.
 */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__form { gap: 10px; }

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__input input[type="text"] {
    height: 50px;
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-paper);
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink-strong);
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__input input[type="text"]:focus {
    border: 1.5px solid var(--mx-green-accent);
    background: var(--mx-paper);
    color: var(--mx-ink-strong);
    outline: none;
    box-shadow: none;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__input label {
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

/*
 * Apply. Hello Elementor's reset styles a bare `[type=submit]` with
 * `border: 1px solid #c36; color: #c36` — so the disabled button read as an
 * error rather than as unavailable. It is the secondary action beside "Proceed
 * to checkout", so it takes the outlined pill rather than a second solid green.
 */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__button {
    height: 50px;
    flex: 0 0 auto;
    padding-inline: 24px;
    border: 1.5px solid var(--mx-rule-strong);
    border-radius: var(--mx-radius-pill);
    background: var(--mx-paper);
    color: var(--mx-ink);
    font: 700 13.5px/1 var(--mx-font-body);
    box-shadow: none;
    transition: border-color .18s ease, color .18s ease;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__button:hover:not([disabled]),
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__button:focus:not([disabled]) {
    background: var(--mx-paper);
    border-color: var(--mx-green-accent);
    color: var(--mx-green-flex);
}

/* Unavailable until a code is typed — muted, not alarmed. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__button[disabled],
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__button[aria-disabled="true"] {
    opacity: .45;
    border-color: var(--mx-rule-strong);
    color: var(--mx-ink);
    background: var(--mx-paper);
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__button .wc-block-components-button__text {
    color: inherit;
    font: inherit;
}

/* -- 24.7 Checkout ---------------------------------------------------------- */

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__submit-container { padding: 18px 0 0; }

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart a.wc-block-cart__submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--mx-green-accent);
    color: var(--mx-paper);
    border: 0;
    border-radius: var(--mx-radius-pill);
    font: 700 14.5px/1 var(--mx-font-body);
    padding: 18px 0;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(35, 164, 85, .26);
    transition: background-color .18s ease;
}

.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart a.wc-block-cart__submit-button:hover {
    background: var(--mx-green-maxi);
    color: var(--mx-paper);
}

/* Payfast is the only gateway and it is a redirect, so the accepted-methods and
   express-payment blocks have nothing to show. */
.wp-block-woocommerce-cart .wc-block-cart .wp-block-woocommerce-cart-accepted-payment-methods-block:empty,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-express-payment--cart:empty { display: none; }

/* -- 24.8 Cross-sells and the empty state ----------------------------------- */

.wp-block-woocommerce-cart .wc-block-cart .wp-block-woocommerce-product-collection { margin-top: 40px; }

.wp-block-woocommerce-cart .wc-block-cart .wp-block-woocommerce-product-collection > h2,
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
    font: 700 26px/1.25 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}

.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title { text-align: left; }

/* The block's own empty state draws a grey sad-face glyph as a ::before on its
   title; the title itself is replaced, so the glyph goes with it. */
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title::before,
.wp-block-woocommerce-cart .with-empty-cart-icon::before { content: none; }

.mx-cartempty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: var(--mx-surface-tint);
    border: 1px solid var(--mx-rule);
    border-radius: 24px;
    padding: 44px 46px;
    margin-bottom: 40px;
}

.mx-cartempty__title {
    font: 700 28px/1.25 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
    margin: 0;
}

.mx-cartempty__lead {
    margin: 0;
    max-width: 620px;
    font: 400 16px/1.65 var(--mx-font-body);
    color: var(--mx-ink-soft);
}

.mx-cartempty__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* -- 24.9 Reassurance ------------------------------------------------------- */

.mx-cart__assurebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 26px 60px;
    flex-wrap: wrap;
}

/* .mx-buy__assure and .mx-buy__dot are reused outright; only the row is new. */
.mx-cart__assures {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.mx-cart__back {
    font: 700 13.5px/1 var(--mx-font-body);
    color: var(--mx-green-flex);
    white-space: nowrap;
}

.mx-cart__back:hover { color: var(--mx-green-maxi); }

/* -- 24.10 Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
    .wp-block-woocommerce-cart .wc-block-cart { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .mx-cart__title { font-size: 34px; }
}

@media (max-width: 767px) {
    .mx-cart__head { padding-block: 20px 22px; }
    .mx-cart__title { font-size: clamp(26px, 7vw, 34px); }

    .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { width: 88px; padding-right: 14px; }
    .wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img { width: 74px; height: 74px; }

    .wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block { padding: 20px; }
    .mx-cart__assurebar { padding-block: 20px 44px; }
    .mx-cartempty { padding: 28px 24px; }
    .mx-cartempty__title { font-size: 23px; }
}

/* ---------------------------------------------------------------------------
 * 25. The mini cart
 *
 * Elementor Pro's Menu Cart widget, in `side-cart` mode, opened from the
 * utility bar. Its defaults are the widget's own: a #69727d grey button pair, a
 * hairline divider and WooCommerce's magenta product links.
 *
 * The site already has a slide-out language — the quote and sales drawers
 * (§21's .mx-qd): 500px, pinned right, a bordered head over a scrolling body,
 * a tinted product chip. This is dressed as their sibling rather than as a
 * third thing, so the site has one drawer, not two that nearly match.
 *
 * Per §4 rule 0, everything the widget exposes as a custom property is SET
 * rather than overridden — Elementor writes those per-element only when the
 * control has a value, and `scripts/build-header.php` sets none of them, so the
 * widget's own `var(--x, default)` fallbacks are what these replace. Only what
 * has no variable is written as a rule.
 * --------------------------------------------------------------------------- */

.elementor-widget.mx-utility__cart {
    /* Shell */
    --cart-background-color: var(--mx-paper);
    --cart-border-color: var(--mx-rule);
    --cart-border-style: none;
    --cart-border-radius: 0;
    --cart-padding: 0;

    /* Close button */
    --cart-close-button-color: var(--mx-ink-muted);
    --cart-close-button-hover-color: var(--mx-green-flex);
    --cart-close-icon-size: 20px;

    /* Rows */
    --divider-color: var(--mx-rule);
    --divider-style: solid;
    --divider-width: 1px;
    --product-divider-gap: 18px;
    --product-price-color: var(--mx-ink);
    --product-variations-color: var(--mx-ink-muted);
    --remove-item-button-color: var(--mx-ink-faint);
    --remove-item-button-hover-color: var(--mx-green-flex);
    --remove-item-button-size: 18px;

    /* Subtotal */
    --menu-cart-subtotal-color: var(--mx-ink);
    --subtotal-divider-color: var(--mx-rule);
    --subtotal-divider-style: solid;
    /* All four default to 1px, so setting only the top leaves a full box. */
    --subtotal-divider-top-width: 1px;
    --subtotal-divider-right-width: 0;
    --subtotal-divider-bottom-width: 0;
    --subtotal-divider-left-width: 0;

    /* The two actions. View cart is the outlined pill, checkout the solid one —
       the same pairing the site uses everywhere a secondary sits beside a
       primary. The border on the outlined one has no variable, so it is a rule
       below. */
    --cart-footer-buttons-border-radius: var(--mx-radius-pill);
    --view-cart-button-background-color: transparent;
    --view-cart-button-text-color: var(--mx-ink);
    --view-cart-button-hover-background-color: transparent;
    --view-cart-button-hover-text-color: var(--mx-green-flex);
    --view-cart-button-padding: 15px 20px;
    --checkout-button-background-color: var(--mx-green-accent);
    --checkout-button-text-color: var(--mx-paper);
    --checkout-button-hover-background-color: var(--mx-green-maxi);
    --checkout-button-hover-text-color: var(--mx-paper);
    --checkout-button-padding: 16px 20px;
    --space-between-buttons: 10px;
}

/* -- 25.1 The panel --------------------------------------------------------- */

/* The quote drawer's width, so the two read as one component. */
.elementor-widget.mx-utility__cart .elementor-menu-cart__container.elementor-lightbox .elementor-menu-cart__main {
    width: min(500px, 100vw);
    max-width: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: -30px 0 70px rgba(0, 30, 20, .24);
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__container { background-color: rgba(12, 32, 25, .34); }

/*
 * Head. The widget renders no heading, and a drawer that opens with nothing but
 * an unlabelled × does not say what it is.
 *
 * The title cannot hang off the close button: that element's × is drawn by its
 * own ::before and ::after, each absolutely positioned and rotated 45°, so
 * putting content in ::after inherits the rotation and the title comes out
 * turned on its side across the glyph. It goes on the panel instead, as the
 * first flex item, with the × floated over it.
 */
.elementor-widget.mx-utility__cart .elementor-menu-cart__main::before {
    content: "Your cart";
    flex: none;
    padding: 26px 34px 22px;
    border-bottom: 1px solid var(--mx-rule);
    font: 700 22px/1.2 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}

/* The panel is already `position: fixed`, which establishes a containing block
   for this on its own — do NOT add `position: relative` to it. Doing so
   overrides the widget's own fixed positioning, and the panel drops out of the
   viewport's corner into the top-left of its container, sized by its content. */
.elementor-widget.mx-utility__cart .elementor-menu-cart__close-button {
    position: absolute;
    inset-block-start: 30px;
    inset-inline-end: 34px;
    z-index: 1;
    margin: 0;
    align-self: auto;
}

.elementor-widget.mx-utility__cart .widget_shopping_cart_content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 34px 26px;
    display: flex;
    flex-direction: column;
}

/* -- 25.2 Rows -------------------------------------------------------------- */

.elementor-widget.mx-utility__cart .elementor-menu-cart__product {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "image name remove" "image price remove";
    align-items: start;
    gap: 4px 14px;
    padding-block: 18px;
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__product-image { grid-area: image; }

.elementor-widget.mx-utility__cart .elementor-menu-cart__product-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--mx-surface-band);
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__product-name { grid-area: name; }

/* WooCommerce's product link falls through to Hello's reset `a{color:#c36}` —
   the child theme sets no global link colour. See §18. */
.elementor-widget.mx-utility__cart .elementor-menu-cart__product-name > a {
    font: 700 15px/1.32 var(--mx-font-heading);
    color: var(--mx-ink);
    text-decoration: none;
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__product-name > a:hover { color: var(--mx-green-maxi); }

/*
 * "Length: 6 m" — the pricing plugin's own line data, from
 * woocommerce_get_item_data. WooCommerce renders it as a <dl>, which stacks the
 * term above the value; on one line it reads as a spec rather than a list.
 */
.elementor-widget.mx-utility__cart .elementor-menu-cart__product-name .variation {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
    margin: 5px 0 0;
    font: 400 12.5px/1.45 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__product-name .variation dt,
.elementor-widget.mx-utility__cart .elementor-menu-cart__product-name .variation dd {
    margin: 0;
    font-weight: inherit;
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__product-name .variation dd p { margin: 0; }

/* Each pair after the first starts a new line, so two attributes do not run on. */
.elementor-widget.mx-utility__cart .elementor-menu-cart__product-name .variation dt:not(:first-of-type) { flex-basis: 100%; }

.elementor-widget.mx-utility__cart .elementor-menu-cart__product-price {
    grid-area: price;
    font: 400 13px/1.4 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__product-price .woocommerce-Price-amount {
    font-weight: 600;
    color: var(--mx-ink);
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__product-remove {
    grid-area: remove;
    align-self: center;
}

/* -- 25.3 Subtotal and actions ---------------------------------------------- */

.elementor-widget.mx-utility__cart .elementor-menu-cart__subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding: 18px 0 0;
    font: 600 14px/1.3 var(--mx-font-body);
    text-align: start;
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__subtotal strong { font-weight: 600; }

.elementor-widget.mx-utility__cart .elementor-menu-cart__subtotal .woocommerce-Price-amount {
    font: 700 24px/1 var(--mx-font-heading);
    color: var(--mx-green-flex);
    letter-spacing: -.01em;
}

/* The outlined pill's border has no custom property of its own. */
.elementor-widget.mx-utility__cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
    border: 1.5px solid var(--mx-rule-strong);
    transition: border-color .18s ease, color .18s ease;
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
    border-color: var(--mx-green-accent);
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__footer-buttons .elementor-button {
    font: 700 13.5px/1 var(--mx-font-body);
    text-align: center;
    text-decoration: none;
}

.elementor-widget.mx-utility__cart .elementor-menu-cart__footer-buttons .elementor-button--checkout {
    box-shadow: 0 10px 22px rgba(35, 164, 85, .26);
    transition: background-color .18s ease;
}

/* -- 25.4 Empty ------------------------------------------------------------- */

.elementor-widget.mx-utility__cart .elementor-menu-cart__empty-message {
    font: 400 15px/1.6 var(--mx-font-body);
    color: var(--mx-ink-soft);
    text-align: start;
    padding-block: 10px;
}

/* -- 25.5 Responsive -------------------------------------------------------- */

@media (max-width: 767px) {
    .elementor-widget.mx-utility__cart .elementor-menu-cart__close-button { padding: 20px 22px 18px; }
    .elementor-widget.mx-utility__cart .elementor-menu-cart__close-button::after { font-size: 19px; }
    .elementor-widget.mx-utility__cart .widget_shopping_cart_content { padding: 18px 22px 22px; }
    .elementor-widget.mx-utility__cart .elementor-menu-cart__product { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .elementor-widget.mx-utility__cart .elementor-menu-cart__product-image img { width: 56px; height: 56px; }
}

/* ---------------------------------------------------------------------------
 * 26. The checkout
 *
 * The same block family as the cart, so §24's shared components — the totals
 * rows, the coupon form, the "Length: 6 m" line, the panel toggle — already
 * reach here: those selectors are scoped
 * `:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout)`, which keeps
 * their specificity identical while covering both roots.
 *
 * What is below is only what the checkout has and the cart does not: the step
 * sequence, the address form, the shipping and payment choices, and the order
 * summary. Values are the cart's; nothing new is invented.
 * --------------------------------------------------------------------------- */

body.woocommerce-checkout .page-header { display: none; }

body.woocommerce-checkout .site-main,
body.woocommerce-checkout .site-main > .page-content {
    max-width: none;
    width: auto;
    padding-inline: 0;
}

/*
 * The block ships `.wp-block-woocommerce-checkout{margin:0;width:100%}` at
 * (0,1,0) from a stylesheet that loads after this one, so `margin-inline: auto`
 * at matching specificity lost the tie and the 1440 box sat hard against the
 * left edge while the heading above it centred correctly. body. takes it to
 * (0,2,0).
 */
body.woocommerce-checkout .wp-block-woocommerce-checkout {
    max-width: var(--mx-container);
    margin-inline: auto;
    padding-inline: var(--mx-gutter);
    box-sizing: border-box;
}

/* -- 26.1 The two columns --------------------------------------------------- */

.wp-block-woocommerce-checkout .wc-block-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 56px;
    align-items: start;
    padding-bottom: 20px;
}

.wp-block-woocommerce-checkout .wc-block-checkout .wc-block-checkout__main,
.wp-block-woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar {
    width: auto;
    max-width: none;
    padding: 0;
    float: none;
}

/* -- 26.2 The steps --------------------------------------------------------- */

/*
 * Separated by a rule and whitespace, not boxed. Four bordered cards beside the
 * summary card made the column busy, and the site's own rhythm separates by
 * space and a section head rather than by boxing everything.
 *
 * It has to be (0,3,0): the block ships
 * `.wc-block-components-form .wc-block-components-checkout-step
 * {background:none;border:none;padding:0}` at (0,2,0) from a stylesheet that
 * loads after this one, so a matching (0,2,0) rule loses the tie silently — the
 * first attempt at this simply did nothing.
 */
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-checkout-step {
    border: 0;
    border-top: 1px solid var(--mx-rule);
    padding: 30px 0 0;
    margin: 0 0 30px;
    background: none;
}

/* The first step opens the column, so it needs no rule above it. */
.wp-block-woocommerce-checkout .wc-block-components-form > .wc-block-components-checkout-step:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading { margin: 0 0 18px; }

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
    font: 700 19px/1.3 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.01em;
    margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
    font: 400 14px/1.55 var(--mx-font-body);
    color: var(--mx-ink-muted);
    margin: 6px 0 0;
}

/* The block numbers its steps through a counter on the heading; the sequence is
   real, so the numbers stay — only their treatment changes. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-content {
    font: 400 13px/1.5 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

/* -- 26.3 Fields ------------------------------------------------------------ */

/*
 * The same floating-label component the coupon uses: a real <label> over the
 * input, lifted by an `.is-active` class JS toggles that shifts the input's
 * padding. Only the shell is dressed — see §24.6.
 */
/*
 * `.wc-block-components-form` has to be named. The block's own rule is
 * `.wc-block-components-form .wc-block-components-text-input input[type=email]`
 * — two classes, an element and an attribute, so **(0,3,1)** — and it loads
 * after this file. A rule of ours at the same (0,3,1) tied and lost, which is
 * why both its `border-radius: 4px` and its dark
 * `color-mix(in srgb, currentColor 80%, transparent)` border survived: one
 * cause, two symptoms. Naming the form reaches (0,4,1).
 */
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="email"],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="number"] {
    height: 52px;
    /* The radius the Payfast option box uses, so a field and a choice read as
       the same family. Soft rather than strong: it matches the quote drawer's
       fields, which are the site's other long form. */
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-paper);
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink-strong);
}

.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input:focus {
    border: 1.5px solid var(--mx-green-accent);
    background: var(--mx-paper);
    color: var(--mx-ink-strong);
    outline: none;
    box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input label {
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

/*
 * The order-notes textarea. Its base is `.wc-block-components-textarea` at
 * (0,1,0) — `border: 1px solid color-mix(in srgb, #2b2d2f 80%, transparent);
 * border-radius: 4px` — and its `:focus` is (0,2,0) and adds an inset
 * `box-shadow` in near-black, so the focus ring has to be cleared as well as
 * the border recoloured.
 */
.wp-block-woocommerce-checkout .wc-block-components-textarea {
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-paper);
    padding: 14px 16px;
    min-height: 104px;
    font: 400 14.5px/1.55 var(--mx-font-body);
    color: var(--mx-ink-strong);
    /* Horizontal dragging would break the column; vertical is genuinely useful
       for a delivery note. */
    resize: vertical;
}

.wp-block-woocommerce-checkout .wc-block-components-textarea::placeholder { color: var(--mx-ink-muted); }

.wp-block-woocommerce-checkout .wc-block-components-textarea:focus {
    border: 1.5px solid var(--mx-green-accent);
    background: var(--mx-paper);
    color: var(--mx-ink-strong);
    outline: none;
    box-shadow: none;
}

/* The select is the block's own component, not a bare <select>, so it takes the
   same shell and keeps its chevron. */
/*
 * The border is on the <select> itself, not the wrapper:
 * `.wc-blocks-components-select .wc-blocks-components-select__select
 * {border:1px solid color-mix(…); border-radius:4px}` at (0,2,0), loaded later.
 * Styling the container instead drew a second box around a control that kept
 * its own hard, square one — so the shell is left bare and the select is
 * dressed, at (0,3,0).
 */
.wp-block-woocommerce-checkout .wc-blocks-components-select__container {
    border: 0;
    background: none;
    height: auto;
}

.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
    height: 52px;
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-paper);
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink-strong);
    box-shadow: none;
}

/* Its own :focus is (0,3,0) and repositions the label's padding — keep that and
   change only the colour, at (0,4,0). */
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
    border-color: var(--mx-green-accent);
    outline: none;
    box-shadow: none;
}

.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

.wp-block-woocommerce-checkout .wc-blocks-components-select__expand { fill: var(--mx-ink-muted); }

/* "+ Add apartment, suite, etc." and "Edit" — text actions, not buttons. */
.wp-block-woocommerce-checkout .wc-block-components-address-form__address_2-toggle,
.wp-block-woocommerce-checkout .wc-block-components-address-card__edit {
    font: 600 13px/1 var(--mx-font-body);
    color: var(--mx-green-flex);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.wp-block-woocommerce-checkout .wc-block-components-address-form__address_2-toggle:hover,
.wp-block-woocommerce-checkout .wc-block-components-address-card__edit:hover { color: var(--mx-green-maxi); }

.wp-block-woocommerce-checkout .wc-block-components-address-card {
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-surface-tint);
    padding: 18px 20px;
}

.wp-block-woocommerce-checkout .wc-block-components-address-card address {
    font: 400 14.5px/1.6 var(--mx-font-body);
    color: var(--mx-ink-soft);
    font-style: normal;
}

/* -- 26.4 Checkboxes -------------------------------------------------------- */

.wp-block-woocommerce-checkout .wc-block-components-checkbox__label {
    font: 400 14.5px/1.55 var(--mx-font-body);
    color: var(--mx-ink-soft);
}

/*
 * `.wc-block-components-checkbox` has to be named on all three. The block's are
 * `.wc-block-components-checkbox .…__input[type=checkbox]:checked{background:#fff}`
 * at (0,4,0) and `.wc-block-components-checkbox .…__mark{fill:#000}` at (0,2,0),
 * and the block stylesheets load AFTER this file — so ties go to WooCommerce and
 * the box stayed white with a black tick while the border alone turned green.
 */
.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: 5px;
    background: var(--mx-paper);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
    background: var(--mx-green-accent);
    border-color: var(--mx-green-accent);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--mx-paper); }

/* -- 26.5 Shipping and payment choices -------------------------------------- */

/*
 * The block draws the group's outline as `::after` on the control and
 * deliberately drops the edge next to the selected option —
 * `--first-selected` loses border-top, `--last-selected` loses border-bottom.
 * With a single option, which is exactly what a Payfast-only store and a
 * flat-rate-only shipping zone both have, it is first AND last at once: top and
 * bottom both vanish and only the rounded left and right sides remain, reading
 * as a broken box. Each option carries its own border here, so the group
 * outline and its hairline separators go.
 */
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after { content: none; }

/* Its checked ring is an inset box-shadow in currentColor; the border already
   marks the selection, so the two would double up. */
/* That same rule also sets `border-radius: 4px` on the checked option, at
   (0,2,0) — so the base radius below lost only once an option was selected,
   which is why the chosen one read squarer than the fields beside it. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    box-shadow: none;
    border-radius: var(--mx-radius-inner);
}

/* The block highlights the checked option with a border; it becomes the site's
   selected state — tinted panel, accent border — so choosing reads the same as
   choosing a variation chip on a product page. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
    border: 1.5px solid var(--mx-rule);
    border-radius: var(--mx-radius-inner);
    padding: 16px 18px 16px 46px;
    margin: 0 0 10px;
    background: var(--mx-paper);
    transition: border-color .18s ease, background-color .18s ease;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option:hover { border-color: var(--mx-rule-strong); }

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option-checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
    border-color: var(--mx-green-accent);
    background: var(--mx-surface-tint);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__label {
    font: 600 14.5px/1.4 var(--mx-font-body);
    color: var(--mx-ink);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-label {
    font: 600 14.5px/1.4 var(--mx-font-body);
    color: var(--mx-green-flex);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input { accent-color: var(--mx-green-accent); }

/*
 * Payment zeroes the option's own border at (0,3,0)
 * (`.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option
 * .wc-block-components-radio-control__option{border-width:0}`), so there the
 * border belongs on the accordion wrapper, which is what actually encloses the
 * row.
 */
.wp-block-woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
    border: 1.5px solid var(--mx-rule);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-paper);
    margin: 0 0 10px;
    overflow: hidden;
    transition: border-color .18s ease, background-color .18s ease;
}

.wp-block-woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: var(--mx-green-accent);
    background: var(--mx-surface-tint);
}

/* The dot inside the radio is #000 by default. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked { border-color: var(--mx-green-accent); }
.wp-block-woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { background: var(--mx-green-accent); }

/* Payfast supplies its own mark; it should sit at a readable size rather than
   whatever the gateway's PNG happens to be. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label img {
    max-height: 26px;
    width: auto;
    display: block;
}

/* -- 26.6 Terms and the order button ---------------------------------------- */

.wp-block-woocommerce-checkout .wc-block-checkout__add-note .wc-block-components-textarea { margin-top: 14px; }

.wp-block-woocommerce-checkout .wc-block-checkout__terms {
    padding: 18px 0 4px;
    font: 400 13.5px/1.6 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

.wp-block-woocommerce-checkout .wc-block-checkout__terms a { color: var(--mx-green-flex); text-decoration: underline; text-underline-offset: 3px; }
.wp-block-woocommerce-checkout .wc-block-checkout__terms a:hover { color: var(--mx-green-maxi); }

.wp-block-woocommerce-checkout .wc-block-checkout__actions_row { padding: 6px 0 0; }

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--mx-green-accent);
    color: var(--mx-paper);
    border: 0;
    border-radius: var(--mx-radius-pill);
    font: 700 15px/1 var(--mx-font-body);
    padding: 20px 0;
    box-shadow: 0 10px 22px rgba(35, 164, 85, .26);
    transition: background-color .18s ease;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    background: var(--mx-green-maxi);
    color: var(--mx-paper);
}

/* -- 26.7 The order summary ------------------------------------------------- */

.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    background: var(--mx-surface-tint);
    border: 1px solid var(--mx-rule);
    border-radius: 24px;
    padding: 26px;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title { margin: 0 0 8px; }

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mx-ink-muted);
    margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
    font: 700 17px/1 var(--mx-font-heading);
    color: var(--mx-green-flex);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
    padding: 16px 0;
    border-top: 1px solid var(--mx-rule);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--mx-surface-band);
}

/*
 * The count badge over the thumbnail. The block sets
 * `.wc-block-components-order-summary .…__quantity{background:currentColor}` at
 * (0,2,0) and loads after this file, so naming the summary as well is what wins
 * the tie — currentColor resolved near-white and the badge vanished into the
 * photograph.
 *
 * That is the shape of every one of these: WooCommerce's block rules are
 * (0,2,0) with the component's own ancestor in front. Prefix with the block
 * root AND that ancestor, or the rule loses silently.
 */
.wp-block-woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    background: var(--mx-green-flex);
    border: 0;
    color: var(--mx-paper);
    font: 700 11.5px/1 var(--mx-font-body);
    border-radius: var(--mx-radius-pill);
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
    font: 700 14.5px/1.35 var(--mx-font-heading);
    color: var(--mx-ink);
    margin: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
    font: 400 13px/1.4 var(--mx-font-body);
    color: var(--mx-ink-muted);
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value {
    font: 700 15px/1.3 var(--mx-font-heading);
    color: var(--mx-ink);
}

/* -- 26.8 Responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
    .wp-block-woocommerce-checkout .wc-block-checkout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .wp-block-woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar { position: static; }
}

@media (max-width: 767px) {
    .wp-block-woocommerce-checkout .wc-block-components-checkout-step { padding: 20px 18px; border-radius: 18px; }
    .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block { padding: 20px; }
}

/* ---------------------------------------------------------------------------
 * 27. The news archive
 *
 * Built from the client-approved mockup:
 *   design/news archive page wireframe/Maxiflex News Mockup.dc.html
 * Every number below is lifted from that file. If one disagrees, the file wins.
 *
 * One Elementor archive document serves the blog index, the seven topic
 * archives, tags, authors, dates and a news-scoped search, so almost everything
 * here renders from a theme shortcode inside `.elementor-shortcode` — plain
 * HTML that needs no Elementor specificity prefix. Only the band containers,
 * the section head and the sidebar's own widgets do.
 *
 * Two colours appear only in this mockup and are written literally rather than
 * promoted to tokens, since neither is part of the approved home page palette:
 *   #eef2f0  the placeholder behind a card image, and the card's inner rule
 *   #e8f4ec  the wash behind the featured article's topic pill
 * --------------------------------------------------------------------------- */

/* Elementor applies a boxed container's BLOCK padding to its .e-con-inner, not
   to the container itself, defaulting to 10px. Each band sets its own padding
   on the __inner below, so without this every band renders 20px taller. */
.e-con.mx-newsfilter__inner > .e-con-inner,
.e-con.mx-newsfeat__inner   > .e-con-inner,
.e-con.mx-newsmain__inner   > .e-con-inner {
    padding-block: 0;
}

.e-con.mx-newsfilter,
.e-con.mx-newsfeat,
.e-con.mx-newsmain {
    padding: 0;
    background: var(--mx-paper);
}

/* -- 27.1 Hero ------------------------------------------------------------- *
 *
 * .mx-shophero unchanged — same 96deg wash, same breadcrumb/h1/lead stack as
 * the shop and about heroes. The modifier carries one thing: this mockup draws
 * 380px where those draw 420px. The heading keeps the shared hero's clamp
 * rather than the mockup's flat 48px, so all three heroes scale alike.
 * ------------------------------------------------------------------------- */

.e-con.mx-shophero--news { min-height: 380px; }

/* -- 27.2 Filter bar ------------------------------------------------------- */

.e-con.mx-newsfilter { border-bottom: 1px solid var(--mx-rule); }
.e-con.mx-newsfilter__inner { padding: 22px var(--mx-gutter); }

/* nowrap, deliberately: the search must stay on the row and the PILLS wrap
   inside their own box. The client's five topics became seven, which is one
   more than the mockup's row holds — with wrap on the row the search dropped
   underneath and read as a second control rather than part of the bar. */
.elementor-widget.mx-newsfilter__bar .elementor-shortcode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
}

.mx-newsfilter__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    min-width: 0;
}

/* An anchor, so the colour has to be declared: the child theme sets no global
   a{color} and Hello's reset.css paints an unstyled link #c36. */
.mx-newspill {
    font: 600 12.5px/1 var(--mx-font-body);
    padding: 12px 17px;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-paper);
    color: var(--mx-ink);
    border: 1.5px solid var(--mx-rule-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mx-newspill:hover {
    border-color: var(--mx-green-maxi);
    color: var(--mx-green-maxi);
    background: var(--mx-paper);
}
.mx-newspill--on,
.mx-newspill--on:hover {
    background: var(--mx-green-accent);
    border-color: var(--mx-green-accent);
    color: var(--mx-paper);
}

.mx-newssearch {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    min-width: 250px;
    padding: 0 6px 0 18px;
    box-sizing: border-box;
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: var(--mx-radius-pill);
    background: var(--mx-paper);
}
/* Hello Elementor's reset.css styles these by attribute —
     input[type=search] { border: 1px solid #666; width: 100% }
   at (0,1,1), which beats a single class. Doubled up on the form class to
   clear it, the same as the shop hero's search. */
.mx-newssearch .mx-newssearch__field {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    font: 400 13.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    transition: none;
}
.mx-newssearch .mx-newssearch__field::placeholder { color: #98a5a0; opacity: 1; }
.mx-newssearch .mx-newssearch__field:focus-visible {
    outline: 2px solid var(--mx-green-maxi);
    outline-offset: 2px;
    border-radius: var(--mx-radius-pill);
}

/* A bare <button>, so background is declared on BOTH :hover and :focus at
   (0,2,0). Hello's reset paints either state #c36 from one declaration at
   (0,1,1), and a single class loses that tie on element count. */
.mx-newssearch__go {
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-green-flex);
    cursor: pointer;
    transition: background-color .2s ease;
    /* A magnifier drawn as a mask rather than an icon font: the site masks its
       icons to a flat colour and there is no glass in assets/icons/. */
    -webkit-mask: none;
    mask: none;
}
.mx-newssearch__go::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin: 0 auto;
    background-color: var(--mx-paper);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.9' d='M7 1.9a5.1 5.1 0 1 0 0 10.2A5.1 5.1 0 0 0 7 1.9Zm3.7 8.8 3.4 3.4'/%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 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.9' d='M7 1.9a5.1 5.1 0 1 0 0 10.2A5.1 5.1 0 0 0 7 1.9Zm3.7 8.8 3.4 3.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mx-newssearch .mx-newssearch__go:hover,
.mx-newssearch .mx-newssearch__go:focus { background: var(--mx-green-maxi); }
.mx-newssearch .mx-newssearch__go:focus-visible { outline: 2px solid var(--mx-green-flex); outline-offset: 2px; }

/* -- 27.3 The featured article --------------------------------------------- */

.e-con.mx-newsfeat__inner { padding: 56px var(--mx-gutter) 0; }

/* The card only prints on page 1, so the band has to fold away rather than
   leave 56px of air above the grid. `:not(:has())` takes the specificity of its
   argument, so this is (0,3,0) against Elementor's `.e-con{display:var(--display)}`
   at (0,1,0). */
.e-con.mx-newsfeat:not(:has(.mx-newsfeat__card)) { display: none; }

.mx-newsfeat__card {
    display: grid;
    grid-template-columns: 1.15fr minmax(0, 1fr);
    border: 1px solid var(--mx-rule);
    border-radius: 26px;
    overflow: hidden;
    background: var(--mx-paper);
}
.mx-newsfeat__media {
    position: relative;
    min-height: 420px;
    background: #eef2f0;
}
/* Prefixed with the media, and this is not cosmetic: Elementor ships
   `.elementor img{height:auto}` at (0,1,1), and a single class is (0,1,0) —
   same class count, fewer elements, so Elementor wins the tie. The height then
   fell back to the image's intrinsic ratio and a 1864x1541 photograph rendered
   792px tall inside a 300px box, spilling over the article text beneath it.
   Only visible below 1024px, where the card stacks and there is something under
   the picture to spill onto. Same reason for .mx-newscard__img below. */
.mx-newsfeat__media .mx-newsfeat__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mx-newsfeat__noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 12.5px/1.3 var(--mx-font-body);
    color: #a6b3ae;
}
.mx-newsfeat__flag {
    position: absolute;
    left: 22px;
    top: 22px;
    background: var(--mx-green-flex);
    color: var(--mx-paper);
    font: 700 11px/1 var(--mx-font-body);
    letter-spacing: .06em;
    padding: 9px 14px;
    border-radius: var(--mx-radius-pill);
}
.mx-newsfeat__body {
    padding: 44px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
}
.mx-newsfeat__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mx-newsfeat__tag {
    background: #e8f4ec;
    color: var(--mx-green-flex);
    font: 700 11px/1 var(--mx-font-body);
    letter-spacing: .06em;
    padding: 9px 13px;
    border-radius: var(--mx-radius-pill);
    text-decoration: none;
}
.mx-newsfeat__tag:hover { background: var(--mx-green-flex); color: var(--mx-paper); }
.mx-newsfeat__date { font: 500 12.5px/1 var(--mx-font-body); color: var(--mx-ink-faint); }
.mx-newsfeat__title {
    font: 700 34px/1.24 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
    text-wrap: pretty;
    margin: 0;
}
.mx-newsfeat__title a { color: inherit; text-decoration: none; }
.mx-newsfeat__title a:hover { color: var(--mx-green-maxi); }
.mx-newsfeat__excerpt {
    margin: 0;
    font: 400 16px/1.68 var(--mx-font-body);
    color: var(--mx-ink-muted);
    text-wrap: pretty;
}
.mx-newsfeat__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* The accent green, not the Maxi green a.mx-btn--solid carries — the mockup
   gives this one the same fill and shadow as the CTA's submit. */
a.mx-newsfeat__cta {
    background-color: var(--mx-green-accent);
    color: var(--mx-paper);
    font-size: 13.5px;
    padding: 16px 24px;
    box-shadow: 0 8px 20px rgba(35, 164, 85, .24);
}
a.mx-newsfeat__cta:hover { background-color: var(--mx-green-flex); color: var(--mx-paper); }

/* -- 27.4 The grid, the sidebar and the band that holds them ---------------- */

.e-con.mx-newsmain__inner { padding: 52px var(--mx-gutter) 76px; }
.e-con.mx-newsmain__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
}
.e-con.mx-newsmain__col {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 0;
    min-width: 0;
}

/* Section head: eyebrow and heading on the left, the live count on the right,
   baselines aligned. Same shape as .mx-section-head, at this band's own 30px. */
.e-con.mx-newshead {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
}
.e-con.mx-newshead__text { display: flex; flex-direction: column; gap: 0; padding: 0; width: auto; }
.elementor-widget.mx-newshead__title .elementor-heading-title {
    font: 700 30px/1.25 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
}
.elementor-widget.mx-newshead__count { width: auto; flex: none; }
.elementor-widget.mx-newshead__count .elementor-shortcode {
    font: 400 13px/1 var(--mx-font-body);
    color: var(--mx-ink-faint);
    white-space: nowrap;
}

.mx-newsgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
}

.mx-newscard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--mx-paper);
    border: 1px solid var(--mx-rule);
    border-radius: 22px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mx-newscard:hover { border-color: var(--mx-rule-strong); box-shadow: 0 14px 34px rgba(0, 40, 28, .08); }
.mx-newscard__media {
    position: relative;
    height: 196px;
    background: #eef2f0;
    overflow: hidden;
}
.mx-newscard__media .mx-newscard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mx-newscard__noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
    font: 600 12.5px/1.3 var(--mx-font-body);
    color: #a6b3ae;
}
.mx-newscard__tag {
    position: absolute;
    left: 16px;
    top: 16px;
    background: rgba(255, 255, 255, .94);
    color: var(--mx-green-flex);
    font: 700 10.5px/1 var(--mx-font-body);
    letter-spacing: .07em;
    padding: 8px 12px;
    border-radius: var(--mx-radius-pill);
}
.mx-newscard__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding: 22px 24px 24px;
    border-top: 1px solid #eef2f0;
}
.mx-newscard__date { font: 500 12px/1 var(--mx-font-body); color: var(--mx-ink-faint); }
.mx-newscard__title {
    margin: 0;
    font: 700 18px/1.34 var(--mx-font-heading);
    color: var(--mx-ink);
    text-wrap: pretty;
}
.mx-newscard__title a { color: inherit; text-decoration: none; }
.mx-newscard__title a:hover { color: var(--mx-green-maxi); }
/* One link per card, stretched over the whole tile — the date, excerpt and
   "Read more" are not separate targets, so a reader tabs through six cards
   rather than eighteen links. */
.mx-newscard__title a::after { content: ""; position: absolute; inset: 0; }
.mx-newscard__excerpt {
    margin: 0;
    font: 400 14px/1.6 var(--mx-font-body);
    color: var(--mx-ink-soft);
    text-wrap: pretty;
}
.mx-newscard__more {
    margin-top: auto;
    padding-top: 10px;
    font: 700 13px/1 var(--mx-font-body);
    color: var(--mx-green-flex);
}
.mx-newscard:hover .mx-newscard__more { color: var(--mx-green-maxi); }

.mx-newsempty {
    border: 1px dashed var(--mx-rule-strong);
    border-radius: 22px;
    padding: 52px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.mx-newsempty__title { margin: 0; font: 700 17px/1.3 var(--mx-font-heading); color: var(--mx-ink); }
.mx-newsempty__body { margin: 0; max-width: 380px; font: 400 14px/1.6 var(--mx-font-body); color: var(--mx-ink-soft); }

/* -- 27.5 Pagination ------------------------------------------------------- */

.mx-newspager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mx-rule);
}
.mx-newspager__pages { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mx-newspager__pages .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: var(--mx-radius-pill);
    background: var(--mx-surface-band);
    color: var(--mx-ink-soft);
    font: 700 13px/1 var(--mx-font-body);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.mx-newspager__pages a.page-numbers:hover { background: var(--mx-green-maxi); color: var(--mx-paper); }
.mx-newspager__pages .page-numbers.current { background: var(--mx-green-flex); color: var(--mx-paper); }
.mx-newspager__pages .page-numbers.dots { background: transparent; }
.mx-newspager__next a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--mx-rule-strong);
    border-radius: var(--mx-radius-pill);
    padding: 14px 22px;
    font: 700 13px/1 var(--mx-font-body);
    color: var(--mx-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease;
}
.mx-newspager__next a:hover { border-color: var(--mx-green-maxi); color: var(--mx-green-maxi); }

/* -- 27.6 Sidebar ---------------------------------------------------------- */

.e-con.mx-newsside {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    min-width: 0;
}
.e-con.mx-newsside__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px;
    border: 1px solid #e0eae5;
    border-radius: 22px;
    background: var(--mx-paper);
}
.elementor-widget.mx-newsside__title .elementor-heading-title {
    font: 700 17px/1.3 var(--mx-font-heading);
    color: var(--mx-ink);
}
.elementor-widget.mx-newsside__body { font: 400 14px/1.6 var(--mx-font-body); color: var(--mx-ink-soft); }

.mx-newstopics { display: flex; flex-direction: column; }
.mx-newstopic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #eef2f0;
    text-decoration: none;
    color: inherit;
}
.mx-newstopic:last-child { border-bottom: 0; padding-bottom: 0; }
.mx-newstopic__name { font: 500 14px/1.35 var(--mx-font-body); color: var(--mx-ink-muted); }
.mx-newstopic__count { font: 600 12px/1 var(--mx-font-body); color: var(--mx-ink-faint); }
.mx-newstopic:hover .mx-newstopic__name { color: var(--mx-green-maxi); }
.mx-newstopic--on .mx-newstopic__name { color: var(--mx-green-flex); font-weight: 700; }

.elementor-widget.mx-newsside__img img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    background: #eef2f0;
}
.elementor-widget.mx-newsside__link .elementor-button-wrapper { text-align: left; }
.elementor-widget.mx-newsside__link .elementor-button { font-size: 13px; }
.elementor-widget.mx-newsside__btn .elementor-button {
    width: 100%;
    padding: 15px 0;
    font-size: 13px;
}
.elementor-widget.mx-newsside__tel {
    font: 400 12.5px/1.5 var(--mx-font-body);
    color: var(--mx-ink-faint);
    text-align: center;
}
.elementor-widget.mx-newsside__tel a { color: var(--mx-green-flex); text-decoration: none; }
.elementor-widget.mx-newsside__tel a:hover { color: var(--mx-green-maxi); }

/* -- 27.7 CTA -------------------------------------------------------------- *
 *
 * .mx-cta reused wholesale, so the fields and the submit are inherited. The
 * modifier carries the three things this mockup changes: the near-black band in
 * place of the green wash, a 40px heading, and a fourth field in the row.
 * ------------------------------------------------------------------------- */

.e-con.mx-cta--news { background: var(--mx-dark); }
.e-con.mx-cta--news::after { background: none; }
.e-con.mx-cta--news .mx-cta__inner { padding-block: 76px; }
.e-con.mx-cta--news .mx-cta__title .elementor-heading-title {
    font-size: 40px;
    max-width: 780px;
    /* Balanced rather than broken by hand: the mockup breaks after "to", and a
       <br> would fix that wrap at every width. */
    text-wrap: balance;
}
.elementor-widget.mx-cta__lead {
    font: 400 16px/1.6 var(--mx-font-body);
    color: rgba(255, 255, 255, .75);
    max-width: 600px;
    margin-top: -8px;
}
.elementor-widget.mx-cta__form--news { width: 1180px; }
.elementor-widget.mx-cta__form--news .elementor-form-fields-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 210px;
}

/* -- 27.8 Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
    .e-con.mx-newsmain__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .mx-newsfeat__card { grid-template-columns: minmax(0, 1fr); }
    .mx-newsfeat__media { min-height: 300px; }
    .mx-newsfeat__body { padding: 32px 30px; }
    .mx-newsfeat__title { font-size: 28px; }
    .elementor-widget.mx-cta__form--news .elementor-form-fields-wrapper {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .e-con.mx-cta--news .mx-cta__title .elementor-heading-title { font-size: 34px; }
}

@media (max-width: 767px) {
    .e-con.mx-newsfilter__inner  { padding: 18px var(--mx-gutter); }
    .e-con.mx-newsfeat__inner    { padding: 36px var(--mx-gutter) 0; }
    .e-con.mx-newsmain__inner    { padding: 36px var(--mx-gutter) 56px; }
    .elementor-widget.mx-newsfilter__bar .elementor-shortcode { flex-wrap: wrap; align-items: stretch; gap: 14px; }
    .mx-newssearch { min-width: 0; width: 100%; }
    .mx-newsgrid { grid-template-columns: minmax(0, 1fr); }
    .e-con.mx-newshead { flex-direction: column; align-items: flex-start; gap: 10px; }
    .elementor-widget.mx-newshead__title .elementor-heading-title { font-size: 26px; }
    .mx-newsfeat__media { min-height: 220px; }
    .mx-newsfeat__body { padding: 26px 22px; gap: 14px; }
    .mx-newsfeat__title { font-size: 24px; }
    .mx-newspager { flex-direction: column; align-items: stretch; gap: 14px; }
    .mx-newspager__next a { width: 100%; }
    .elementor-widget.mx-cta__form--news .elementor-form-fields-wrapper { grid-template-columns: minmax(0, 1fr); }
    .e-con.mx-cta--news .mx-cta__title .elementor-heading-title { font-size: 28px; }
}

/* ---------------------------------------------------------------------------
 * 28. The account pages
 *
 * /my-account/ and its endpoints. There is no approved mockup: the frame, type
 * scale, breadcrumb, card geometry and buttons are the cart's and the
 * checkout's, unchanged — the derivation section 15 records for the catalogue
 * archives.
 *
 * UNLIKE sections 24 and 26, this is the CLASSIC WooCommerce shortcode, whose
 * stylesheets load BEFORE the child theme. Ties go our way here. Rules are
 * still prefixed from `.woocommerce` because the plugin's own selectors reach
 * (0,3,1) and would win on specificity regardless of order.
 *
 * Two states with nothing in common but that frame: signed out is a login form
 * beside an aside, signed in is a navigation column beside an endpoint.
 * --------------------------------------------------------------------------- */

/*
 * Hello Elementor's page template wraps the content in .site-main > .page-content
 * at the theme's content width and prints its own <h1 class="entry-title">My
 * account</h1>. The heading is in [maxiflex_account_head], which knows which
 * screen this is; both are released here, scoped to body.woocommerce-account so
 * no other page is touched.
 */
body.woocommerce-account .page-header { display: none; }

body.woocommerce-account .site-main,
body.woocommerce-account .site-main > .page-content {
    max-width: none;
    width: auto;
    padding-inline: 0;
}

.mx-acct__head,
body.woocommerce-account .woocommerce {
    max-width: var(--mx-container);
    margin-inline: auto;
    padding-inline: var(--mx-gutter);
    box-sizing: border-box;
}

body.woocommerce-account .woocommerce { padding-bottom: 84px; }

/* -- 28.1 Head -------------------------------------------------------------- */

.mx-acct__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-block: 28px 30px;
}
.mx-acct__head .mx-crumbs { margin-bottom: 16px; }
.mx-acct__title {
    font: 700 44px/1.16 var(--mx-font-heading);
    color: var(--mx-ink);
    letter-spacing: -.015em;
    margin: 0;
}
.mx-acct__lead {
    margin: 0;
    max-width: 640px;
    font: 400 16px/1.6 var(--mx-font-body);
    color: var(--mx-ink-soft);
}

/* -- 28.2 Signed out: the login form and its aside -------------------------- */

/* WooCommerce prints an <h2>Login</h2> above the form. [maxiflex_account_head]
   already says which screen this is, so a second heading saying it again in
   smaller type is noise. */
.mx-acct__signinmain > h2 { display: none; }

.mx-acct__signin {
    display: grid;
    /* Capped, not 1fr: two fields stretched across the 1352 frame read as a
       form that has lost something. */
    grid-template-columns: minmax(0, 560px) 380px;
    justify-content: start;
    gap: 28px;
    align-items: start;
}
.mx-acct__signinmain { min-width: 0; }

.woocommerce form.woocommerce-form-login {
    margin: 0;
    padding: 34px 34px 30px;
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-card);
    background: var(--mx-paper);
}

.woocommerce form.woocommerce-form-login .form-row { margin: 0 0 20px; padding: 0; }
.woocommerce form.woocommerce-form-login .form-row:last-child { margin-bottom: 0; }

.woocommerce form.woocommerce-form-login label {
    display: block;
    margin-bottom: 8px;
    font: 600 13px/1.3 var(--mx-font-body);
    color: var(--mx-ink);
}
/* WooCommerce marks a required field with a red asterisk. The palette has no
   red, and every field on this form is required, so it says so once instead. */
.woocommerce form.woocommerce-form-login label .required { display: none; }

/* Hello Elementor's reset.css styles fields by attribute —
     input[type=text], input[type=password] { border: 1px solid #666; width: 100% }
   at (0,1,1), which beats a single class. Named through the form for (0,3,1). */
.woocommerce form.woocommerce-form-login .input-text,
.woocommerce form.woocommerce-form-login input[type="text"],
.woocommerce form.woocommerce-form-login input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--mx-rule-soft);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-paper);
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    box-shadow: none;
    transition: border-color .2s ease;
}
.woocommerce form.woocommerce-form-login .input-text:focus {
    border-color: var(--mx-green-maxi);
    outline: none;
    box-shadow: none;
}

/* WooCommerce's show/hide eye is absolutely positioned inside the wrapper it
   adds around the password field, so the wrapper has to be the positioned box
   and the field needs room for the glyph. */
.woocommerce form.woocommerce-form-login .password-input {
    position: relative;
    display: block;
    width: 100%;
}
.woocommerce form.woocommerce-form-login .password-input .input-text { padding-right: 48px; }
.woocommerce form.woocommerce-form-login .show-password-input {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--mx-ink-faint);
    cursor: pointer;
}
.woocommerce form.woocommerce-form-login .show-password-input::after { color: inherit; }

/* The remember-me row and the submit share a line, which is what makes the
   card read as one action rather than three stacked controls. */
/*
 * Pushed apart with an auto margin, NOT `justify-content: space-between`.
 * WooCommerce's markup has newlines between these elements, and a whitespace
 * text run between two flex items becomes an anonymous flex item — so
 * space-between distributes the free space around the blanks as well and
 * nothing lands where it was asked to. The same fix applies to the address
 * card's header below.
 */
.woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit { margin-inline-start: auto; }

.woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font: 400 13.5px/1.3 var(--mx-font-body);
    color: var(--mx-ink-soft);
    cursor: pointer;
}
.woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--mx-green-flex);
    cursor: pointer;
}

/* A bare [type=submit], so the background is declared on :hover AND :focus at
   (0,3,1). Hello's reset paints either state #c36 from one declaration at
   (0,1,1) and a single class loses that tie on element count — the sixth time
   this has come up (section 18). */
.woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit {
    flex: none;
    min-width: 148px;
    height: 52px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--mx-radius-pill);
    background-color: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 700 14px/1 var(--mx-font-body);
    cursor: pointer;
    transition: background-color .2s ease;
}
.woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit:hover,
.woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit:focus {
    background-color: var(--mx-green-flex);
    color: var(--mx-paper);
}
.woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit:focus:not(:focus-visible) {
    background-color: var(--mx-green-maxi);
}
.woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit:focus-visible {
    outline: 2px solid var(--mx-green-flex);
    outline-offset: 2px;
}

.woocommerce form.woocommerce-form-login .lost_password {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--mx-rule);
    font: 500 13.5px/1.3 var(--mx-font-body);
}
.woocommerce form.woocommerce-form-login .lost_password a {
    color: var(--mx-green-flex);
    text-decoration: none;
}
.woocommerce form.woocommerce-form-login .lost_password a:hover { color: var(--mx-green-maxi); }

/* The aside. Tinted rather than bordered, so it reads as commentary on the
   form beside it rather than as a second thing to fill in. */
.mx-acct__aside {
    padding: 30px 28px;
    border-radius: var(--mx-radius-card);
    background: var(--mx-surface-tint);
}
.mx-acct__asidetitle {
    margin: 0 0 12px;
    font: 700 20px/1.3 var(--mx-font-heading);
    color: var(--mx-ink);
}
.mx-acct__asidebody {
    margin: 0;
    font: 400 14.5px/1.65 var(--mx-font-body);
    color: var(--mx-ink-muted);
}
.mx-acct__asideactions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.mx-acct__asidehelp {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--mx-rule);
    font: 400 13px/1.6 var(--mx-font-body);
    color: var(--mx-ink-soft);
}
.mx-acct__asidehelp a { color: var(--mx-green-flex); font-weight: 700; text-decoration: none; }
.mx-acct__asidehelp a:hover { color: var(--mx-green-maxi); }

/* -- 28.3 Signed in: navigation beside the endpoint ------------------------- */

body.woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/*
 * WooCommerce clears its floats with `.woocommerce::before/::after{display:table}`,
 * and **a clearfix pseudo-element on a grid container is a grid item**. Those two
 * took cells 1 and 4, so the navigation was pushed into column 2 and the content
 * onto a second row in column 1 — and WooCommerce's own `width:30%`/`68%` then
 * resolved against the wrong grid areas (section 4: a percentage width on a grid
 * item resolves against its grid area, not the container), leaving a 318px menu
 * beside a 177px page. Section 18 records the same pseudo-element-as-flex-item
 * trap on the buy box's form.
 */
body.woocommerce-account.logged-in .woocommerce::before,
body.woocommerce-account.logged-in .woocommerce::after { display: none; }

/* The float and the percentage width go with it. */
body.woocommerce-account .woocommerce nav.woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
    float: none;
    width: auto;
}

.woocommerce nav.woocommerce-MyAccount-navigation {
    padding: 10px;
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-card);
    background: var(--mx-paper);
    position: sticky;
    top: 92px;
}
.woocommerce nav.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.woocommerce nav.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce nav.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 16px;
    border-radius: var(--mx-radius-inner);
    font: 600 14px/1.3 var(--mx-font-body);
    color: var(--mx-ink-muted);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.woocommerce nav.woocommerce-MyAccount-navigation li a:hover {
    background: var(--mx-surface-tint);
    color: var(--mx-green-flex);
}
.woocommerce nav.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--mx-green-flex);
    color: var(--mx-paper);
}
/* Log out is not a place, so it is set apart from the five that are. */
.woocommerce nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--mx-rule);
}
.woocommerce nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--mx-ink-soft);
    font-weight: 500;
}

.woocommerce .woocommerce-MyAccount-content {
    min-width: 0;
    padding: 32px 34px 34px;
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-card);
    background: var(--mx-paper);
}
.woocommerce .woocommerce-MyAccount-content > p {
    margin: 0 0 14px;
    font: 400 15.5px/1.7 var(--mx-font-body);
    color: var(--mx-ink-muted);
}
.woocommerce .woocommerce-MyAccount-content > p:first-of-type {
    font-size: 17px;
    color: var(--mx-ink);
}
.woocommerce .woocommerce-MyAccount-content > p strong { color: var(--mx-ink); font-weight: 700; }
/* The child theme sets no global a{color}, so every link here has to declare
   one or Hello's reset paints it #c36 — which is what the whole dashboard did. */
.woocommerce .woocommerce-MyAccount-content a {
    color: var(--mx-green-flex);
    text-decoration: none;
    font-weight: 600;
}
.woocommerce .woocommerce-MyAccount-content a:hover { color: var(--mx-green-maxi); }
.woocommerce .woocommerce-MyAccount-content h2,
.woocommerce .woocommerce-MyAccount-content h3 {
    margin: 0 0 16px;
    font: 700 20px/1.3 var(--mx-font-heading);
    color: var(--mx-ink);
}

/* -- 28.4 Dashboard quick links --------------------------------------------- */

.mx-acct__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}
.woocommerce .woocommerce-MyAccount-content a.mx-acct__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-surface-tint);
    transition: border-color .2s ease, background-color .2s ease;
}
.woocommerce .woocommerce-MyAccount-content a.mx-acct__card:hover {
    border-color: var(--mx-green-maxi);
    background: var(--mx-paper);
}
.mx-acct__cardtitle { font: 700 15px/1.3 var(--mx-font-heading); color: var(--mx-ink); }
.woocommerce .woocommerce-MyAccount-content a.mx-acct__card:hover .mx-acct__cardtitle { color: var(--mx-green-flex); }
.mx-acct__cardbody { font: 400 13px/1.55 var(--mx-font-body); color: var(--mx-ink-soft); }

/* -- 28.5 Tables: orders and downloads --------------------------------------- */

.woocommerce .woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    margin: 0;
    border-radius: 0;
}
/* thead th ONLY. The order-number cell is a `<th scope="row">`, not a td — so a
   bare `th` rule dressed the order number as a column heading: 11.5px, letter
   spaced, uppercase and muted, in the middle of a row of 14.5px body text. */
.woocommerce .woocommerce-MyAccount-content table.shop_table thead th {
    padding: 0 12px 12px 0;
    border: 0;
    border-bottom: 1px solid var(--mx-rule);
    text-align: left;
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mx-ink-faint);
}
.woocommerce .woocommerce-MyAccount-content table.shop_table tbody th,
.woocommerce .woocommerce-MyAccount-content table.shop_table td {
    padding: 18px 12px 18px 0;
    border: 0;
    border-bottom: 1px solid var(--mx-rule);
    text-align: left;
    font: 400 14.5px/1.5 var(--mx-font-body);
    color: var(--mx-ink-muted);
    vertical-align: middle;
    /* WooCommerce stripes even rows with `tbody tr:nth-child(2n) td{background:
       rgba(0,0,0,.025)}`. The site separates rows with a rule, not a fill, and
       the stripe fought the card behind it. */
    background: transparent;
}
.woocommerce .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-number a {
    font-weight: 700;
    color: var(--mx-ink);
}
.woocommerce .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-number a:hover { color: var(--mx-green-maxi); }
.woocommerce .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-total { color: var(--mx-ink); font-weight: 600; }
/* The status reads as a state, not as a word in a row of words. */
.woocommerce .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-status {
    font: 700 11.5px/1 var(--mx-font-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mx-green-flex);
}
.woocommerce .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-actions { text-align: right; }
/* The order totals. WooCommerce fills and borders these cells, which drew a
   boxed grid under the item list; the site states totals as ruled rows. */
.woocommerce .woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce .woocommerce-MyAccount-content table.shop_table tfoot td {
    padding: 13px 12px 13px 0;
    border: 0;
    border-bottom: 1px solid var(--mx-rule);
    background: transparent;
    text-align: left;
    vertical-align: middle;
    font: 500 14.5px/1.5 var(--mx-font-body);
    color: var(--mx-ink-muted);
}
.woocommerce .woocommerce-MyAccount-content table.shop_table tfoot td { color: var(--mx-ink); font-weight: 600; }
.woocommerce .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child th,
.woocommerce .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td { border-bottom: 0; }
/* The order total is the number the reader came for. */
.woocommerce .woocommerce-MyAccount-content table.shop_table tfoot tr:nth-last-child(2) th,
.woocommerce .woocommerce-MyAccount-content table.shop_table tfoot tr:nth-last-child(2) td {
    font-size: 17px;
    font-weight: 700;
    color: var(--mx-ink);
}
/* "via Flat rate" beside the shipping figure. */
.woocommerce .woocommerce-MyAccount-content table.shop_table tfoot small { font-size: 12.5px; color: var(--mx-ink-soft); font-weight: 400; }

/* The item's own meta — the pricing plugin's "Length (m)" line. WooCommerce
   wraps a meta value in <p>, so the margin has to go. */
.woocommerce .woocommerce-MyAccount-content table.shop_table .wc-item-meta {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font: 400 13px/1.5 var(--mx-font-body);
    color: var(--mx-ink-soft);
}
.woocommerce .woocommerce-MyAccount-content table.shop_table .wc-item-meta li { margin: 0; }
.woocommerce .woocommerce-MyAccount-content table.shop_table .wc-item-meta p { margin: 0; display: inline; }
.woocommerce .woocommerce-MyAccount-content table.shop_table .wc-item-meta strong { color: var(--mx-ink-muted); font-weight: 600; }

/*
 * A notice sits directly above the table it is about, and section 23 sets
 * `margin: 0` on every notice, so it needs the gap stated here.
 *
 * On the notices themselves, NOT on `.woocommerce-notices-wrapper > *`: on an
 * account endpoint WooCommerce prints an EMPTY wrapper and then the notices as
 * its SIBLINGS, so a child selector matches nothing and the table header ended
 * up sitting on the notice's bottom padding.
 *
 * (0,3,0) against section 23's (0,2,0), which is what carries the margin: 0.
 */
.woocommerce .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce .woocommerce-MyAccount-content .woocommerce-error {
    margin-bottom: 20px;
}

/* A cancelled or failed order is not a green state. */
.woocommerce .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
    color: var(--mx-ink-faint);
}
.woocommerce .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
    color: var(--mx-orange);
}

/* Order actions and pagination — bare <a class="button">, so the colour has to
   be declared or Hello's reset takes it.
   Scoped to the table and the pager on purpose: a notice inside this column
   carries `.button` too, and section 23 already dresses those as the site's
   solid green. Left unscoped this rule reached them at (0,3,1) against section
   23's (0,3,0) and quietly turned "Browse products" into an outline. */
.woocommerce .woocommerce-MyAccount-content table.shop_table a.button,
.woocommerce .woocommerce-MyAccount-content table.shop_table a.woocommerce-Button,
.woocommerce .woocommerce-MyAccount-content .woocommerce-pagination a.button,
.woocommerce .woocommerce-MyAccount-content .woocommerce-pagination a.woocommerce-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 1.5px solid var(--mx-rule-strong);
    border-radius: var(--mx-radius-pill);
    background: transparent;
    color: var(--mx-ink);
    font: 700 13px/1 var(--mx-font-body);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.woocommerce .woocommerce-MyAccount-content table.shop_table a.button:hover,
.woocommerce .woocommerce-MyAccount-content table.shop_table a.woocommerce-Button:hover,
.woocommerce .woocommerce-MyAccount-content .woocommerce-pagination a.button:hover,
.woocommerce .woocommerce-MyAccount-content .woocommerce-pagination a.woocommerce-Button:hover {
    border-color: var(--mx-green-maxi);
    color: var(--mx-green-maxi);
    background: transparent;
}

/* -- 28.6 A viewed order ----------------------------------------------------- */

.woocommerce .woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce .woocommerce-MyAccount-content .woocommerce-column__title { font-size: 18px; }

/*
 * "Order again" is a conversion, not a secondary action, so it takes the solid
 * green rather than the outline the table's "View" pills use. It lives in
 * `<p class="order-again">` OUTSIDE the details table, which is why the rule
 * scoped to `table.shop_table` in 28.5 never reached it and it rendered as
 * Hello Elementor's grey default block.
 */
.woocommerce .woocommerce-MyAccount-content .order-again { margin: 22px 0 0; }
.woocommerce .woocommerce-MyAccount-content .order-again a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    border: 0;
    border-radius: var(--mx-radius-pill);
    background-color: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 700 14px/1 var(--mx-font-body);
    text-decoration: none;
    transition: background-color .2s ease;
}
.woocommerce .woocommerce-MyAccount-content .order-again a.button:hover,
.woocommerce .woocommerce-MyAccount-content .order-again a.button:focus {
    background-color: var(--mx-green-flex);
    color: var(--mx-paper);
}

/* The addresses printed under a viewed order. Same two-column grid and the same
   tinted card as the Addresses screen, so an address looks like an address
   wherever it is read — including the same clearfix-as-grid-item fix, since
   this is another `col2-set`. */
.woocommerce .woocommerce-MyAccount-content .woocommerce-customer-details { margin-top: 32px; }
.woocommerce .woocommerce-MyAccount-content .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}
.woocommerce .woocommerce-MyAccount-content .woocommerce-columns--addresses::before,
.woocommerce .woocommerce-MyAccount-content .woocommerce-columns--addresses::after { display: none; }
.woocommerce .woocommerce-MyAccount-content .woocommerce-columns--addresses .col-1,
.woocommerce .woocommerce-MyAccount-content .woocommerce-columns--addresses .col-2 {
    width: auto;
    float: none;
}
.woocommerce .woocommerce-MyAccount-content .woocommerce-customer-details address {
    /* The grid stretches the column div, not the address inside it, so the two
       cards ended ragged whenever only one carried a phone and email. */
    height: 100%;
    box-sizing: border-box;
    padding: 20px 22px;
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-surface-tint);
    font: 400 14.5px/1.65 var(--mx-font-body);
    font-style: normal;
    color: var(--mx-ink-muted);
}
/* WooCommerce sets the phone and email lines as icon-font pseudo-elements. */
.woocommerce .woocommerce-MyAccount-content .woocommerce-customer-details address p { margin: 10px 0 0; }
.woocommerce .woocommerce-MyAccount-content .woocommerce-customer-details address .woocommerce-customer-details--phone,
.woocommerce .woocommerce-MyAccount-content .woocommerce-customer-details address .woocommerce-customer-details--email {
    color: var(--mx-ink);
    font-weight: 600;
}

/* -- 28.7 Addresses ---------------------------------------------------------- */

.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

/* The same clearfix-as-grid-item trap as .woocommerce above: `.col2-set` carries
   `::before`/`::after` with `display:table`, which took cells 1 and 4 and put
   billing top-right with shipping below it on the left. */
.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses::after { display: none; }

/* WooCommerce floats these at 48% through `.woocommerce .col2-set .col-1`, which
   is (0,3,0) — a rule on `.woocommerce-Address` alone is (0,2,0) and loses. The
   column classes are named so the reach matches. */
.woocommerce .woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses .col-1,
.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses .col-2 {
    width: auto;
    float: none;
    padding: 24px;
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-surface-tint);
}
.woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}
.woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title .edit { margin-inline-start: auto; }
.woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    margin: 0;
    font-size: 16px;
}
.woocommerce .woocommerce-MyAccount-content .woocommerce-Address address {
    font: 400 14.5px/1.65 var(--mx-font-body);
    font-style: normal;
    color: var(--mx-ink-muted);
}

/* -- 28.8 Forms: account details, addresses, lost password ------------------- */

.woocommerce .woocommerce-MyAccount-content form .form-row { margin: 0 0 18px; padding: 0; }
.woocommerce .woocommerce-MyAccount-content form label {
    display: block;
    margin-bottom: 8px;
    font: 600 13px/1.3 var(--mx-font-body);
    color: var(--mx-ink);
}
.woocommerce .woocommerce-MyAccount-content form .required { color: var(--mx-green-accent); }
.woocommerce .woocommerce-MyAccount-content form .input-text,
.woocommerce .woocommerce-MyAccount-content form input[type="text"],
.woocommerce .woocommerce-MyAccount-content form input[type="email"],
.woocommerce .woocommerce-MyAccount-content form input[type="tel"],
.woocommerce .woocommerce-MyAccount-content form input[type="password"],
.woocommerce .woocommerce-MyAccount-content form select {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--mx-rule-soft);
    border-radius: var(--mx-radius-inner);
    background: var(--mx-paper);
    font: 400 14.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    box-shadow: none;
}
.woocommerce .woocommerce-MyAccount-content form .input-text:focus,
.woocommerce .woocommerce-MyAccount-content form select:focus {
    border-color: var(--mx-green-maxi);
    outline: none;
}
.woocommerce .woocommerce-MyAccount-content form fieldset {
    margin: 26px 0 0;
    padding: 24px 0 0;
    border: 0;
    border-top: 1px solid var(--mx-rule);
}
.woocommerce .woocommerce-MyAccount-content form fieldset legend {
    padding: 0;
    margin-bottom: 16px;
    font: 700 16px/1.3 var(--mx-font-heading);
    color: var(--mx-ink);
}
/* Same reset trap as the login submit: hover AND focus, both declared. */
.woocommerce .woocommerce-MyAccount-content form button[type="submit"] {
    min-width: 160px;
    height: 52px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--mx-radius-pill);
    background-color: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 700 14px/1 var(--mx-font-body);
    cursor: pointer;
    transition: background-color .2s ease;
}
.woocommerce .woocommerce-MyAccount-content form button[type="submit"]:hover,
.woocommerce .woocommerce-MyAccount-content form button[type="submit"]:focus {
    background-color: var(--mx-green-flex);
    color: var(--mx-paper);
}
.woocommerce .woocommerce-MyAccount-content form button[type="submit"]:focus:not(:focus-visible) {
    background-color: var(--mx-green-maxi);
}
/* WooCommerce sets the field hint in an <em>, which reads as emphasis on a line
   that is only guidance. Both shapes are matched. */
.woocommerce .woocommerce-MyAccount-content form span em,
.woocommerce .woocommerce-MyAccount-content form span.description {
    font-style: normal;
}
.woocommerce .woocommerce-MyAccount-content form span[id$="_description"],
.woocommerce .woocommerce-MyAccount-content form span.description {
    display: block;
    margin-top: 7px;
    font: 400 12.5px/1.5 var(--mx-font-body);
    color: var(--mx-ink-soft);
}

/* -- 28.9 Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
    .mx-acct__signin { grid-template-columns: minmax(0, 1fr); }
    body.woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .woocommerce nav.woocommerce-MyAccount-navigation { position: static; }
    .woocommerce nav.woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
    .woocommerce nav.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
    .mx-acct__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .mx-acct__title { font-size: 32px; }
    .woocommerce form.woocommerce-form-login { padding: 24px 20px; }
    .woocommerce .woocommerce-MyAccount-content { padding: 24px 20px; }
    .mx-acct__aside { padding: 24px 20px; }
    .mx-acct__cards { grid-template-columns: minmax(0, 1fr); }
    .woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses,
    .woocommerce .woocommerce-MyAccount-content .woocommerce-columns--addresses { grid-template-columns: minmax(0, 1fr); }
    .woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
        flex-direction: column;
        align-items: stretch;
    }
    .woocommerce form.woocommerce-form-login button.woocommerce-form-login__submit { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * 29. Category banners
 *
 * Every product-category archive — the shop ranges and the quoted catalogue
 * alike — shows its own category photograph behind the shared hero's
 * dark-to-light wash, instead of the one default photograph.
 *
 * The client's category images are square, 600-1000px and a few smaller. Here
 * they are cropped to the 1440x420 band and upscaled, and that is deliberate
 * for now: the point is to SEE which categories need wider, larger
 * photography. A framed square plate over a blurred copy of the photo was
 * tried first and dropped in favour of this.
 *
 * Hangs off `.mx-shophero--cat`, which the theme adds at render only when the
 * category has an image of its own. Without one the band is exactly the §16.1
 * hero, default photograph and all.
 * --------------------------------------------------------------------------- */

/* The photo goes on ::before and the wash on ::after: ::before paints first,
   so this way round the wash sits over the photo. The inner, at z-index 1,
   sits above both.

   width and height are stated alongside the offsets because Elementor's own
   `.e-con:before` forces `width/height: max(100% + borders, 100%)`, which
   overrides an `inset` — the previous blurred version lost a strip along two
   edges to exactly that. */
.e-con.mx-shophero--cat::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mx-cat-img) center / cover no-repeat;
}
/* The shared hero's own 96deg wash, value for value (§16.1), so a category
   banner reads as the same component as every other hero on the site. */
.e-con.mx-shophero--cat::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(96deg, rgba(6, 22, 17, .9) 0%, rgba(6, 22, 17, .74) 48%, rgba(6, 22, 17, .34) 100%);
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 30. The single post
 *
 * Signed off as design/single post page wireframe/Maxiflex Post Mockup.html;
 * the values below are that file's. One Elementor single-post document
 * (scripts/build-post-page.php), with the per-post parts printed by the
 * [maxiflex_post_*] shortcodes.
 *
 * Layout: a light header band, then the article (700px) and a sticky sidebar
 * (300px) as one centred 1080px group. The header's content spans that same
 * group, so the title's left edge sits on the article's.
 * --------------------------------------------------------------------------- */

.e-con.mx-posthero,
.e-con.mx-postread,
.e-con.mx-postrelated { padding: 0; }

.e-con.mx-posthero__inner   > .e-con-inner,
.e-con.mx-postread__inner   > .e-con-inner,
.e-con.mx-postrelated__inner > .e-con-inner { padding-block: 0; }

/* -- 30.1 Header band ------------------------------------------------------ */

.e-con.mx-posthero {
    background: var(--mx-surface-tint);
    border-bottom: 1px solid var(--mx-rule);
}
.e-con.mx-posthero__inner { padding: 40px var(--mx-gutter) 44px; }
.e-con.mx-posthero__inner > .e-con-inner { max-width: 1080px; margin-inline: auto; }

.mx-posthead { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mx-posthead__topic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 11px/1 var(--mx-font-body);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mx-green-flex);
    background: var(--mx-paper);
    border: 1px solid var(--mx-rule-soft);
    padding: 9px 13px;
    border-radius: var(--mx-radius-pill);
    text-decoration: none;
}
.mx-posthead__topic::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--mx-lime); }
.mx-posthead__topic:hover { border-color: var(--mx-green-maxi); color: var(--mx-green-flex); }
/* Named through its parent: the Elementor kit styles h1 as `.elementor-kit-N h1`,
   (0,1,1), which a single class loses. */
.mx-posthead .mx-posthead__title {
    margin: 0;
    font: 700 clamp(28px, 3vw, 40px)/1.18 var(--mx-font-heading);
    letter-spacing: -.015em;
    color: var(--mx-ink);
    text-wrap: balance;
}
.mx-posthead__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    font: 500 13.5px/1 var(--mx-font-body);
    color: var(--mx-ink-soft);
}
.mx-posthead__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mx-lime); }
.mx-posthead__by { display: inline-flex; align-items: center; gap: 10px; color: var(--mx-ink); text-decoration: none; }
.mx-posthead__by:hover { color: var(--mx-green-flex); }

.mx-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mx-green-maxi);
    color: var(--mx-paper);
    font: 700 12px/1 var(--mx-font-heading);
    letter-spacing: .02em;
}
.mx-avatar--lg { width: 52px; height: 52px; font-size: 16px; }

/* -- 30.2 The article and its sidebar -------------------------------------- */

.e-con.mx-postread__inner { padding: 48px var(--mx-gutter) 80px; }
.e-con.mx-postread__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 700px) 300px;
    justify-content: center;
    gap: 80px;
    align-items: start;
}
.e-con.mx-postread__main { display: flex; flex-direction: column; gap: 0; padding: 0; min-width: 0; }

/* The featured image, whole — never cropped. Prefixed with its figure:
   Elementor's `.elementor img{height:auto}` is (0,1,1). */
.mx-postfeature {
    margin: 0 0 40px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--mx-rule);
    background: var(--mx-paper);
}
.mx-postfeature .mx-postfeature__img { width: 100%; height: auto; display: block; }
/* Elementor zeroes figure margins inside every widget but the text and post
   content widgets — `.elementor .elementor-widget:not(…):not(…) figure{margin:0}`
   at (0,4,1) — so the gap above the first paragraph needs (0,5,1). */
.elementor .elementor-widget.mx-postread__feature .elementor-shortcode figure.mx-postfeature { margin: 0 0 40px; }

/* The body, as written. Spacing is carried on the bottom of each block and
   collapses into a heading's larger top margin, so no sibling selector has to
   know which block follows which. */
.elementor-widget.mx-postprose {
    font: 400 17.5px/1.75 var(--mx-font-body);
    color: var(--mx-ink);
}
.elementor-widget.mx-postprose p,
.elementor-widget.mx-postprose ul,
.elementor-widget.mx-postprose ol,
.elementor-widget.mx-postprose blockquote {
    margin: 0 0 1.1em;
}
.elementor-widget.mx-postprose p:first-child {
    font-size: 21px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--mx-ink-strong);
}
.elementor-widget.mx-postprose h2 {
    margin: 2em 0 .7em;
    font: 700 25px/1.28 var(--mx-font-heading);
    letter-spacing: -.01em;
    color: var(--mx-ink-strong);
    scroll-margin-top: 110px;
}
.elementor-widget.mx-postprose h3 {
    scroll-margin-top: 110px;
    margin: 1.6em 0 .6em;
    font: 700 20px/1.3 var(--mx-font-heading);
    color: var(--mx-ink-strong);
}
.elementor-widget.mx-postprose a {
    color: var(--mx-green-flex);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 88, 58, .35);
}
.elementor-widget.mx-postprose a:hover { color: var(--mx-green-maxi); text-decoration-color: currentColor; }
.elementor-widget.mx-postprose figure { margin: 2em 0; }
.elementor-widget.mx-postprose figure img { width: 100%; height: auto; border-radius: var(--mx-radius-inner); }
.elementor-widget.mx-postprose figure a { text-decoration: none; }
.elementor-widget.mx-postprose ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.elementor-widget.mx-postprose ul li { position: relative; padding-left: 24px; margin: 0; }
.elementor-widget.mx-postprose ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .72em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--mx-lime);
}
.elementor-widget.mx-postprose > :last-child,
.elementor-widget.mx-postprose p:last-child { margin-bottom: 0; }

/* Under the article */
.mx-postfoot {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--mx-rule);
    display: grid;
    gap: 26px;
}
.mx-postfoot__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mx-postfoot__label {
    margin-right: 6px;
    font: 600 11.5px/1 var(--mx-font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mx-ink-faint);
}
.mx-posttag {
    font: 600 12.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    background: var(--mx-paper);
    border: 1.5px solid var(--mx-rule-soft);
    padding: 10px 14px;
    border-radius: var(--mx-radius-pill);
    text-decoration: none;
}
.mx-posttag:hover { border-color: var(--mx-green-maxi); color: var(--mx-green-maxi); }
.mx-posttag--topic,
.mx-posttag--topic:hover { background: var(--mx-green-accent); border-color: var(--mx-green-accent); color: var(--mx-paper); }
.mx-postauthor {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--mx-surface-tint);
}
.mx-postauthor b { display: block; font: 700 16px/1.3 var(--mx-font-heading); color: var(--mx-ink-strong); }
.mx-postauthor a { font: 600 13.5px/1.4 var(--mx-font-body); color: var(--mx-green-flex); text-decoration: none; }
.mx-postauthor a:hover { color: var(--mx-green-maxi); }
.mx-postfoot__back {
    justify-self: start;
    font: 700 13.5px/1 var(--mx-font-body);
    color: var(--mx-green-flex);
    text-decoration: none;
}
.mx-postfoot__back:hover { color: var(--mx-green-maxi); }

/* -- 30.3 Sidebar ------------------------------------------------------------ */

/* Sticky under the compressed 64px header. */
.e-con.mx-postread__side {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    min-width: 0;
}
.e-con.mx-postside__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 22px;
    border: 1px solid #e0eae5;
    border-radius: 22px;
    background: var(--mx-paper);
}
/* A post with fewer than two headings prints no list, and no empty card. */
.e-con.mx-postside__card--toc:not(:has(.mx-posttoc)) { display: none; }

.mx-posttoc { display: flex; flex-direction: column; gap: 14px; }
.mx-posttoc__wrap { position: relative; }
.mx-posttoc__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
    border-left: 2px solid var(--mx-rule);
    display: grid;
    gap: 12px;
}
.mx-posttoc__list li { margin: 0; }
/* The reading-progress rule, filled by assets/js/post-toc.js. */
.mx-posttoc__bar { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--mx-green-maxi); transition: height .15s linear; }
.mx-posttoc a { display: block; font: 500 13.5px/1.4 var(--mx-font-body); color: var(--mx-ink-soft); text-decoration: none; transition: color .15s ease; }
.mx-posttoc a:hover { color: var(--mx-green-flex); }
.mx-posttoc a.is-on { color: var(--mx-green-flex); font-weight: 700; }
/* An H3 under its H2: indented and a step smaller, so the list shows the
   article's structure rather than a flat run of lines. */
.mx-posttoc__list li.is-sub { margin-top: -4px; }
.mx-posttoc__list li.is-sub a { padding-left: 12px; font-size: 12.5px; }

.mx-postshare { display: flex; flex-direction: column; gap: 14px; }
.mx-postshare__row { display: flex; gap: 8px; }
/* The copy-link control is a bare <button>, so its background is declared on
   :hover AND :focus at (0,2,0) — Hello's reset paints either state #c36. */
.mx-postshare__btn {
    appearance: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--mx-rule-strong);
    background: var(--mx-paper);
    color: var(--mx-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.mx-postshare .mx-postshare__btn:hover,
.mx-postshare .mx-postshare__btn:focus { border-color: var(--mx-green-maxi); color: var(--mx-green-maxi); background: var(--mx-paper); }
.mx-postshare .mx-postshare__btn:focus:not(:focus-visible) { border-color: var(--mx-rule-strong); color: var(--mx-ink); }
.mx-postshare .mx-postshare__btn:focus-visible { outline: 2px solid var(--mx-green-maxi); outline-offset: 2px; }
.mx-postshare__btn::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--mx-share-icon) center / contain no-repeat;
    mask: var(--mx-share-icon) center / contain no-repeat;
}
.mx-postshare__btn--linkedin { --mx-share-icon: url("assets/icons/glyph-linkedin.png"); }
.mx-postshare__btn--facebook { --mx-share-icon: url("assets/icons/glyph-facebook.png"); }
.mx-postshare__btn--email { --mx-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.mx-postshare__btn--link { --mx-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1-1'/%3E%3C/svg%3E"); }
.mx-postshare__btn--link.is-done { --mx-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); color: var(--mx-green-maxi); border-color: var(--mx-green-maxi); }

/* The specialist card — flex green, as the News sidebar's CTA card. */
.e-con.mx-postside__card--cta { background: var(--mx-green-flex); border-color: var(--mx-green-flex); gap: 12px; }
.elementor-widget.mx-postside__title .elementor-heading-title { font: 700 16px/1.3 var(--mx-font-heading); color: var(--mx-paper); }
.elementor-widget.mx-postside__body { font: 400 14px/1.6 var(--mx-font-body); color: rgba(255, 255, 255, .8); }
.elementor-widget.mx-postside__btn .elementor-button {
    width: 100%;
    justify-content: center;
    padding: 15px 0;
    font-size: 13.5px;
    background-color: var(--mx-green-accent);
    box-shadow: none;
}
.elementor-widget.mx-postside__btn .elementor-button:hover,
.elementor-widget.mx-postside__btn .elementor-button:focus { background-color: var(--mx-green-maxi); }
.elementor-widget.mx-postside__tel { font: 400 12.5px/1.5 var(--mx-font-body); color: rgba(255, 255, 255, .65); text-align: center; }
.elementor-widget.mx-postside__tel a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.elementor-widget.mx-postside__tel a:hover { color: var(--mx-paper); }

/* -- 30.4 Keep reading ------------------------------------------------------ */

.e-con.mx-postrelated { background: var(--mx-surface-band); border-top: 1px solid var(--mx-rule); }
.e-con.mx-postrelated__inner { padding: 80px var(--mx-gutter) 88px; }
/* No other article in the topic: the shortcode prints nothing, and the band goes. */
.e-con.mx-postrelated:not(:has(.mx-postrel)) { display: none; }

.mx-postrel { display: grid; gap: 34px; }
.mx-postrel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.mx-postrel .mx-postrel__title {
    margin: 12px 0 0;
    font: 700 clamp(28px, 3vw, 38px)/1.2 var(--mx-font-heading);
    letter-spacing: -.015em;
    color: var(--mx-ink);
}
/* The News card, three across. Written after §27, so its own breakpoints are
   restated below or this rule would override them. */
.mx-newsgrid.mx-newsgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* -- 30.5 Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
    .e-con.mx-posthero__inner > .e-con-inner { max-width: none; }
    .e-con.mx-postread__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .e-con.mx-postread__side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e-con.mx-postside__card--toc { display: none; }
    .mx-newsgrid.mx-newsgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-newsgrid.mx-newsgrid--3 > .mx-newscard:nth-child(3) { display: none; }
}

@media (max-width: 767px) {
    .e-con.mx-posthero__inner { padding: 28px var(--mx-gutter) 32px; }
    .e-con.mx-postread__inner { padding: 32px var(--mx-gutter) 56px; }
    .e-con.mx-postread__side { grid-template-columns: minmax(0, 1fr); }
    .elementor-widget.mx-postprose { font-size: 16.5px; }
    .elementor-widget.mx-postprose p:first-child { font-size: 19px; }
    .elementor-widget.mx-postprose h2 { font-size: 22px; }
    .elementor .elementor-widget.mx-postread__feature .elementor-shortcode figure.mx-postfeature { margin-bottom: 28px; }
    .e-con.mx-postrelated__inner { padding: 56px var(--mx-gutter) 64px; }
    .mx-newsgrid.mx-newsgrid--3 { grid-template-columns: minmax(0, 1fr); }
    .mx-newsgrid.mx-newsgrid--3 > .mx-newscard:nth-child(3) { display: flex; }
}

/* ===========================================================================
 * 31. The Contact page
 *
 * Signed off as design/contact page wireframe/Maxiflex Contact Mockup.html and
 * built by scripts/build-contact-page.php. Three bands: the site's photo hero,
 * the enquiry form beside the direct lines, and the four branches with maps.
 *
 * The after-hours card is the one place here the orange appears, as a tint of
 * it: §3 keeps the orange for the after-hours alert, and this card is that
 * alert. Its shades are local to this section rather than tokens.
 * --------------------------------------------------------------------------- */

.e-con.mx-contact,
.e-con.mx-cbranches { padding: 0; }

.e-con.mx-contact__inner    > .e-con-inner,
.e-con.mx-cbranches__inner  > .e-con-inner { padding-block: 0; }

/* -- 31.1 Hero: copy beside three contact chips ---------------------------- */

.e-con.mx-shophero--contact .mx-shophero__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 36px 56px;
}
.e-con.mx-chero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 0;
    min-width: 0;
}
.e-con.mx-shophero--contact .elementor-widget.mx-eyebrow { color: var(--mx-green-accent); }

.mx-cways { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.mx-cways__way {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 20px 14px 14px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 18px;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.mx-cways__way:hover { background: var(--mx-paper); border-color: var(--mx-lime); }
.mx-cways__ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--mx-surface-tint);
    color: var(--mx-green-flex);
}
.mx-cways__ic svg { width: 19px; height: 19px; }
.mx-cways__way small {
    display: block;
    margin-bottom: 6px;
    font: 600 10.5px/1 var(--mx-font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mx-ink-faint);
}
.mx-cways__way b {
    display: block;
    font: 700 16px/1.2 var(--mx-font-heading);
    color: var(--mx-ink-strong);
    white-space: nowrap;
}
.mx-cways__way--alert { border-color: var(--mx-orange); }
.mx-cways__way--alert .mx-cways__ic { background: #fdf1e0; color: #b86a00; }
.mx-cways__way--alert b { color: #8a4f00; }

/* -- 31.2 The enquiry card and its form ------------------------------------ */

.e-con.mx-contact__inner { padding: 72px var(--mx-gutter) 88px; }
/* #enquire: every "Request a Quote" button lands here. The sticky header is
   92px (64px once compressed) and the band's own top padding only 72px, so
   the card would land under it; 40px more leaves it clear either way. */
.e-con.mx-contact { scroll-margin-top: 40px; }
.e-con.mx-contact__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 56px;
    align-items: start;
}
.e-con.mx-cform-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
    padding: 40px 44px 44px;
    background: var(--mx-paper);
    border: 1px solid #e0eae5;
    border-radius: var(--mx-radius-hero);
}
.e-con.mx-cform-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0; }
.elementor-widget.mx-cform-card__title .elementor-heading-title {
    font: 700 clamp(28px, 3vw, 38px)/1.2 var(--mx-font-heading);
    letter-spacing: -.015em;
    color: var(--mx-ink);
}
.elementor-widget.mx-cform-card__privacy { font: 400 12.5px/1.55 var(--mx-font-body); color: var(--mx-ink-faint); }
.elementor-widget.mx-cform-card__privacy a { color: var(--mx-green-flex); font-weight: 600; text-decoration: none; }

/* Labels. Elementor's own `.elementor-widget-form .elementor-field-group > label`
   is (0,3,0) and loads later, so these name the field label class too. */
.elementor-widget.mx-cform .elementor-field-group > .elementor-field-label {
    margin-bottom: 8px;
    font: 600 13px/1.3 var(--mx-font-body);
    color: var(--mx-ink-strong);
}

/* The two step headings: the radio group's own label is step 1, and an HTML
   field prints step 2. The numerals are decoration, so they live here. */
.elementor-widget.mx-cform .elementor-field-group-intent > .elementor-field-label,
.mx-cform__step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font: 700 14px/1 var(--mx-font-heading);
    color: var(--mx-ink-strong);
}
.elementor-widget.mx-cform .elementor-field-group-intent > .elementor-field-label::before,
.mx-cform__step::before {
    content: "1";
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mx-green-flex);
    color: var(--mx-paper);
    font: 700 11.5px/1 var(--mx-font-body);
}
.mx-cform__step { margin: 12px 0 0; }
.mx-cform__step::before { content: "2"; }

/* The four choices, drawn as tiles over real radios. Icons are keyed on the
   option's position, like everything else that depends on the choice. */
.elementor-widget.mx-cform .elementor-field-group-intent .elementor-field-subgroup {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
.elementor-widget.mx-cform .elementor-field-group-intent .elementor-field-option {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
}
.elementor-widget.mx-cform .elementor-field-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.elementor-widget.mx-cform .elementor-field-option label {
    --mx-ci: none;
    --mx-ci-on: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 18px 18px 20px;
    background: var(--mx-paper);
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.elementor-widget.mx-cform .elementor-field-option label::before {
    content: "";
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mx-surface-tint) var(--mx-ci) center / 18px no-repeat;
}
.elementor-widget.mx-cform .elementor-field-option label b {
    font: 700 15px/1.25 var(--mx-font-heading);
    color: var(--mx-ink-strong);
}
.elementor-widget.mx-cform .elementor-field-option label span {
    font: 400 12.5px/1.45 var(--mx-font-body);
    color: var(--mx-ink-soft);
}
.elementor-widget.mx-cform .elementor-field-option label:hover { border-color: var(--mx-rule-strong); }
.elementor-widget.mx-cform .elementor-field-option:has(input:checked) label {
    background: var(--mx-surface-tint);
    border-color: var(--mx-green-maxi);
}
.elementor-widget.mx-cform .elementor-field-option:has(input:checked) label::before {
    background: var(--mx-green-maxi) var(--mx-ci-on) center / 18px no-repeat;
}
.elementor-widget.mx-cform .elementor-field-option:has(input:focus-visible) label {
    outline: 2.5px solid var(--mx-green-maxi);
    outline-offset: 3px;
}
.elementor-widget.mx-cform .elementor-field-option:nth-child(1) label {
    --mx-ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300583A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M4 21h16M9 7h6M9 11h6M9 15h3'/%3E%3C/svg%3E");
    --mx-ci-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M4 21h16M9 7h6M9 11h6M9 15h3'/%3E%3C/svg%3E");
}
.elementor-widget.mx-cform .elementor-field-option:nth-child(2) label {
    --mx-ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300583A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z'/%3E%3C/svg%3E");
    --mx-ci-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z'/%3E%3C/svg%3E");
}
.elementor-widget.mx-cform .elementor-field-option:nth-child(3) label {
    --mx-ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300583A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    --mx-ci-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.elementor-widget.mx-cform .elementor-field-option:nth-child(4) label {
    --mx-ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300583A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    --mx-ci-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* What each choice asks for — CSS alone, so it works without JavaScript and
   the fields stay in the form either way. Keyed on the option's POSITION, not
   its wording, so the client can reword a choice in Elementor freely:
     1 quote     size, door type          3 order   order number
     2 service   door type, photo         4 other   subject                  */
.elementor-widget.mx-cform .elementor-field-group-size,
.elementor-widget.mx-cform .elementor-field-group-doortype,
.elementor-widget.mx-cform .elementor-field-group-order,
.elementor-widget.mx-cform .elementor-field-group-subject,
.elementor-widget.mx-cform .elementor-field-group-photo,
.mx-cform__hint { display: none; }

.elementor-widget.mx-cform:has(.elementor-field-option:nth-child(1) input:checked) :is(.elementor-field-group-size, .elementor-field-group-doortype),
.elementor-widget.mx-cform:has(.elementor-field-option:nth-child(2) input:checked) :is(.elementor-field-group-doortype, .elementor-field-group-photo),
.elementor-widget.mx-cform:has(.elementor-field-option:nth-child(3) input:checked) .elementor-field-group-order,
.elementor-widget.mx-cform:has(.elementor-field-option:nth-child(4) input:checked) .elementor-field-group-subject { display: flex; }

.elementor-widget.mx-cform:has(.elementor-field-option:nth-child(1) input:checked) .mx-cform__hint--1,
.elementor-widget.mx-cform:has(.elementor-field-option:nth-child(2) input:checked) .mx-cform__hint--2,
.elementor-widget.mx-cform:has(.elementor-field-option:nth-child(3) input:checked) .mx-cform__hint--3,
.elementor-widget.mx-cform:has(.elementor-field-option:nth-child(4) input:checked) .mx-cform__hint--4 { display: block; }

.mx-cform__hint {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    background: var(--mx-surface-band);
    border-radius: 12px;
    font: 400 13.5px/1.55 var(--mx-font-body);
    color: var(--mx-ink-muted);
}
.mx-cform__hint a {
    color: var(--mx-green-flex);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 88, 58, .35);
}

/* Fields. Hello's reset styles inputs by attribute at (0,1,1) and Elementor's
   form rules reach (0,3,0), so each carries its element too — the quote
   drawer's treatment (§21), at the page's larger size. */
.elementor-widget.mx-cform input.elementor-field-textual,
.elementor-widget.mx-cform select.elementor-field-textual,
.elementor-widget.mx-cform textarea.elementor-field-textual {
    min-height: 52px;
    padding: 0 16px;
    background: var(--mx-paper);
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: 12px;
    box-shadow: none;
    font: 400 15px/1.4 var(--mx-font-body);
    color: var(--mx-ink-strong);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.elementor-widget.mx-cform textarea.elementor-field-textual { padding: 14px 16px; line-height: 1.5; min-height: 140px; resize: vertical; }
.elementor-widget.mx-cform .elementor-field-textual::placeholder { color: #a4b1ac; }
.elementor-widget.mx-cform input.elementor-field-textual:focus,
.elementor-widget.mx-cform select.elementor-field-textual:focus,
.elementor-widget.mx-cform textarea.elementor-field-textual:focus {
    outline: none;
    border-color: var(--mx-green-maxi);
    box-shadow: 0 0 0 4px rgba(0, 147, 102, .12);
}
.elementor-widget.mx-cform input[type="file"] {
    width: 100%;
    padding: 14px;
    background: var(--mx-paper);
    border: 1.5px dashed var(--mx-rule-strong);
    border-radius: 12px;
    font: 400 13.5px/1.4 var(--mx-font-body);
    color: var(--mx-ink-muted);
    cursor: pointer;
}
.elementor-widget.mx-cform input[type="file"]:hover { border-color: var(--mx-green-maxi); }
.elementor-widget.mx-cform input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 14px;
    background: var(--mx-surface-tint);
    border: 0;
    border-radius: var(--mx-radius-pill);
    font: 700 13px/1 var(--mx-font-body);
    color: var(--mx-green-flex);
    cursor: pointer;
}

/* The foot: which branch it is for, beside the send button, over a rule. */
.elementor-widget.mx-cform .elementor-field-group-routed,
.elementor-widget.mx-cform .e-form__buttons {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--mx-rule);
    align-items: center;
}
.elementor-widget.mx-cform .e-form__buttons { justify-content: flex-end; }
.mx-cform__routed {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font: 400 14px/1.4 var(--mx-font-body);
    color: var(--mx-ink-muted);
}
.mx-cform__routed b { color: var(--mx-ink-strong); }
.mx-cform__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mx-lime);
    box-shadow: 0 0 0 4px rgba(170, 205, 58, .25);
}
/* A bare <button type="submit">: hover AND focus both state a background, or
   Hello's reset paints it magenta (§18). */
.elementor-widget.mx-cform .elementor-button[type="submit"] {
    padding: 17px 30px;
    background-color: var(--mx-green-maxi);
    border: 0;
    border-radius: var(--mx-radius-pill);
    box-shadow: 0 6px 16px rgba(0, 147, 102, .28);
    font: 700 14px/1 var(--mx-font-body);
    color: var(--mx-paper);
    transition: background-color .2s ease;
}
.elementor-widget.mx-cform .elementor-button[type="submit"]:hover,
.elementor-widget.mx-cform .elementor-button[type="submit"]:focus { background-color: var(--mx-green-flex); color: var(--mx-paper); }
.elementor-widget.mx-cform .elementor-button[type="submit"]:focus:not(:focus-visible) { outline: none; }
.elementor-widget.mx-cform .elementor-button[type="submit"]:focus-visible { outline: 2.5px solid var(--mx-green-maxi); outline-offset: 3px; }

.elementor-widget.mx-cform .elementor-message {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 12px;
    font: 600 14px/1.5 var(--mx-font-body);
}
.elementor-widget.mx-cform .elementor-message-success { background: var(--mx-surface-tint); color: var(--mx-green-flex); }
.elementor-widget.mx-cform .elementor-message-danger { background: #fdf1e0; color: #8a4f00; }

/* -- 31.3 The direct lines ------------------------------------------------- */

.e-con.mx-cside {
    position: sticky;
    top: 124px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
}
.e-con.mx-cside__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px;
    background: var(--mx-paper);
    border: 1px solid #e0eae5;
    border-radius: var(--mx-radius-hero);
}
/* Named through the widget: the kit styles h3 as `.elementor-kit-N h3`, (0,1,1). */
.elementor-widget.mx-cside__lines .mx-cside__entity {
    margin: 0 0 14px;
    font: 700 17px/1.3 var(--mx-font-heading);
    color: var(--mx-ink-strong);
}
.elementor-widget.mx-cside__title .elementor-heading-title { font: 700 17px/1.3 var(--mx-font-heading); color: var(--mx-ink-strong); }
.elementor-widget.mx-cside__body { font: 400 14px/1.6 var(--mx-font-body); color: var(--mx-ink-muted); }
.elementor-widget.mx-cside__more a { font: 700 13.5px/1 var(--mx-font-body); color: var(--mx-green-flex); text-decoration: none; }
.elementor-widget.mx-cside__more a:hover { color: var(--mx-green-maxi); }

.mx-clines { list-style: none; margin: 0; padding: 0; display: grid; }
.mx-clines li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--mx-rule);
}
.mx-clines li:first-child { padding-top: 0; border-top: 0; }
.mx-clines span { font: 500 13px/1.3 var(--mx-font-body); color: var(--mx-ink-soft); }
.mx-clines a {
    font: 700 14.5px/1.3 var(--mx-font-body);
    font-variant-numeric: tabular-nums;
    color: var(--mx-green-flex);
    text-decoration: none;
    white-space: nowrap;
}
.mx-clines a:hover { color: var(--mx-green-maxi); }

.e-con.mx-cside__card--alert { background: #fffaf2; border-color: #f3d7ad; }
/* The utility bar's after-hours pill lands here (#after-hours); stop clear of
   the sticky header rather than under it. */
.e-con.mx-cside__card--alert { scroll-margin-top: 110px; }
.e-con.mx-cside__card--alert .elementor-widget.mx-eyebrow { color: #b86a00; }
.e-con.mx-cside__card--alert .mx-bullet {
    background: var(--mx-orange);
    border-radius: 50%;
    animation: mx-beat 2s ease-in-out infinite;
}
@keyframes mx-beat {
    0%, 100% { box-shadow: 0 0 0 0 rgba(237, 139, 0, .45); }
    50%      { box-shadow: 0 0 0 6px rgba(237, 139, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .e-con.mx-cside__card--alert .mx-bullet { animation: none; }
}
.e-con.mx-cside__card--alert .mx-clines li { border-color: #f3e3c8; }
.e-con.mx-cside__card--alert .mx-clines a { color: #8a4f00; }
.e-con.mx-cside__card--alert .mx-clines a:hover { color: var(--mx-orange); }
.elementor-widget.mx-cside__note { font: 400 12.5px/1.5 var(--mx-font-body); color: #9a7a4f; }

/* -- 31.4 The branches ----------------------------------------------------- */

.e-con.mx-cbranches__inner { padding: 88px var(--mx-gutter) 96px; }
/* #branches: "Find a branch" lands here. The band's 88px top padding is less
   than the 92px sticky header, so without this the eyebrow sits under it. */
.e-con.mx-cbranches { scroll-margin-top: 30px; }
.e-con.mx-cbranches__inner > .e-con-inner { display: flex; flex-direction: column; gap: 44px; }
.e-con.mx-cbranches .e-con.mx-section-head { margin: 0; }
.elementor-widget.mx-cbranches__lead {
    width: 420px;
    font: 400 15px/1.6 var(--mx-font-body);
    color: rgba(255, 255, 255, .62);
}
.elementor-widget.mx-cbranches__cards { width: 100%; }

.mx-bcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mx-bcard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 10px 22px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--mx-radius-card);
    color: var(--mx-paper);
    transition: border-color .2s ease, background-color .2s ease;
}
.mx-bcard:hover { border-color: rgba(255, 255, 255, .2); }
.mx-bcard.is-on { border-color: var(--mx-lime); background: rgba(170, 205, 58, .07); }
/* Google's keyless embed, inset like the site's card images. */
.mx-bcard__map { height: 220px; border-radius: var(--mx-radius-inner); overflow: hidden; background: #1b2723; }
.mx-bcard__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.mx-bcard__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 4px 12px 0; }
.mx-bcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mx-bcard .mx-bcard__top h3 { margin: 0; font: 700 20px/1.2 var(--mx-font-heading); color: var(--mx-paper); }
.mx-bcard__ho {
    padding: 6px 9px;
    background: var(--mx-lime);
    border-radius: var(--mx-radius-pill);
    font: 700 10px/1 var(--mx-font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mx-dark);
    white-space: nowrap;
}
.mx-bcard__co {
    font: 600 10.5px/1.3 var(--mx-font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.mx-bcard address { font: normal 400 13.5px/1.55 var(--mx-font-body); color: rgba(255, 255, 255, .7); }
.mx-bcard dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 4px 0 0; font: 400 13.5px/1.3 var(--mx-font-body); }
.mx-bcard dt { color: rgba(255, 255, 255, .45); }
.mx-bcard dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mx-bcard dd a { color: var(--mx-paper); text-decoration: none; }
.mx-bcard dd a:hover { color: var(--mx-lime); }
.mx-bcard .mx-bcard__ah a { color: #ffc46b; }
.mx-bcard__acts {
    display: flex;
    gap: 18px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.mx-bcard__acts a { font: 700 13px/1 var(--mx-font-body); color: var(--mx-green-accent); text-decoration: none; }
.mx-bcard__acts a:hover { color: var(--mx-lime); }

/* -- 31.5 Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
    .e-con.mx-shophero--contact .mx-shophero__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
    .mx-cways { justify-content: flex-start; }
    .e-con.mx-contact__inner { padding: 56px var(--mx-gutter) 72px; }
    .e-con.mx-contact__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .e-con.mx-cside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e-con.mx-cside > .e-con.mx-cside__card:last-child { grid-column: 1 / -1; }
    .elementor-widget.mx-cform .elementor-field-group-intent .elementor-field-subgroup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e-con.mx-cbranches__inner { padding: 72px var(--mx-gutter); }
}
@media (max-width: 767px) {
    .mx-cways { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .e-con.mx-cform-card { padding: 28px 20px 30px; gap: 24px; }
    .elementor-widget.mx-cform .elementor-field-option label { padding: 14px 14px 16px; }
    .elementor-widget.mx-cform .elementor-field-option label span { display: none; }
    .elementor-widget.mx-cform .elementor-field-group.elementor-col-50 { width: 100%; }
    .elementor-widget.mx-cform .elementor-field-group-routed { border-top: 0; padding-top: 0; margin-top: 0; order: 1; }
    .elementor-widget.mx-cform .e-form__buttons { order: 2; margin-top: 0; }
    .elementor-widget.mx-cform .elementor-button[type="submit"] { width: 100%; justify-content: center; }
    .e-con.mx-cside { grid-template-columns: minmax(0, 1fr); }
    .mx-bcards { grid-template-columns: minmax(0, 1fr); }
    .elementor-widget.mx-cbranches__lead { width: auto; }
    .e-con.mx-cbranches__inner { padding: 56px var(--mx-gutter); }
}

/* ===========================================================================
 * 32. The Services page
 *
 * Signed off as design/services page wireframe/Maxiflex Services Mockup.html
 * and built by scripts/build-services-page.php. Seven bands: the photo hero,
 * the three stages, why maintenance matters with the before/after, the five
 * steps of a visit, what we look after, the after-hours strip, and "Book a
 * service". Section heads are the site's own .mx-section-head.
 * --------------------------------------------------------------------------- */

.e-con.mx-svcstages,
.e-con.mx-svcwhy,
.e-con.mx-svcvisit,
.e-con.mx-svckit,
.e-con.mx-ahstrip,
.e-con.mx-svcbook { padding: 0; }

.e-con.mx-svcstages__inner > .e-con-inner,
.e-con.mx-svcwhy__inner    > .e-con-inner,
.e-con.mx-svcvisit__inner  > .e-con-inner,
.e-con.mx-svckit__inner    > .e-con-inner,
.e-con.mx-ahstrip__inner   > .e-con-inner,
.e-con.mx-svcbook__inner   > .e-con-inner { padding-block: 0; }

.e-con.mx-svcstages__inner,
.e-con.mx-svcwhy__inner,
.e-con.mx-svcvisit__inner,
.e-con.mx-svckit__inner { padding: var(--mx-band-pad) var(--mx-gutter); }
.e-con.mx-svcstages__inner > .e-con-inner,
.e-con.mx-svcvisit__inner > .e-con-inner,
.e-con.mx-svckit__inner > .e-con-inner { display: flex; flex-direction: column; gap: 6px; }

/* The head's right-hand lead. `width`, not `max-width`: Elementor's (0,4,0)
   max-width:100% on widgets would swallow a max-width (§4). */
.elementor-widget.mx-svc__lead {
    flex: none;
    width: 440px;
    font: 400 15.5px/1.65 var(--mx-font-body);
    color: var(--mx-ink-muted);
}
.e-con.mx-section-head--dark .elementor-widget.mx-svc__lead { color: rgba(255, 255, 255, .62); }

/* -- 32.1 Hero: the shop hero, plus two actions ---------------------------- */

.elementor-widget.mx-svchero__acts .elementor-widget-container,
.elementor-widget.mx-svchero__acts:not(:has(.elementor-widget-container)) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.elementor-widget.mx-svchero__acts { margin-top: 8px; }
.e-con.mx-shophero--services .elementor-widget.mx-eyebrow { color: var(--mx-green-accent); }
/* The pill on the photograph: white ink, and an orange dot for the alert §3
   keeps the orange for. */
.mx-svchero__acts a.mx-pill.mx-svchero__ah {
    gap: 10px;
    color: var(--mx-paper);
    border-color: rgba(255, 255, 255, .35);
}
.mx-svchero__acts a.mx-pill.mx-svchero__ah:hover { color: var(--mx-paper); border-color: var(--mx-orange); }
.mx-svchero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mx-orange);
    box-shadow: 0 0 0 4px rgba(237, 139, 0, .25);
}

/* -- 32.2 Three stages, in order ------------------------------------------- */

.e-con.mx-svcstages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 0;
}
.e-con.mx-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 30px 30px;
    background: var(--mx-paper);
    border: 1px solid #e0eae5;
    border-radius: var(--mx-radius-hero);
}
/* the lime thread between one stage and the next */
.e-con.mx-stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 56px;
    right: -21px;
    width: 22px;
    height: 2px;
    background: var(--mx-lime);
}
.elementor-widget.mx-stage__n { font: 300 44px/1 var(--mx-font-heading); letter-spacing: -.02em; color: var(--mx-green-accent); }
.elementor-widget.mx-stage__title .elementor-heading-title { font: 700 21px/1.25 var(--mx-font-heading); color: var(--mx-ink-strong); }
.elementor-widget.mx-stage__body { font: 400 14.5px/1.65 var(--mx-font-body); color: var(--mx-ink-muted); }
.elementor-widget.mx-stage__go { margin-top: auto; padding-top: 10px; }
.elementor-widget.mx-stage__go a { font: 700 13.5px/1 var(--mx-font-body); color: var(--mx-green-flex); text-decoration: none; }
.elementor-widget.mx-stage__go a:hover { color: var(--mx-green-maxi); }

.e-con.mx-stage--focus { background: var(--mx-green-flex); border-color: var(--mx-green-flex); }
.e-con.mx-stage--focus .elementor-widget.mx-stage__n { color: var(--mx-lime); }
.e-con.mx-stage--focus .elementor-widget.mx-stage__title .elementor-heading-title { color: var(--mx-paper); }
.e-con.mx-stage--focus .elementor-widget.mx-stage__body { color: rgba(255, 255, 255, .78); }
.e-con.mx-stage--focus .elementor-widget.mx-stage__go a { color: var(--mx-lime); }
.e-con.mx-stage--focus .elementor-widget.mx-stage__go a:hover { color: var(--mx-paper); }

/* -- 32.3 Why maintenance matters, and the before/after -------------------- */

.e-con.mx-svcwhy { background: var(--mx-surface-band); }
.e-con.mx-svcwhy__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 64px;
    align-items: center;
}
.e-con.mx-svcwhy__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 0; }
.elementor-widget.mx-svcwhy__title .elementor-heading-title {
    font: 700 clamp(30px, 3.2vw, 44px)/1.18 var(--mx-font-heading);
    letter-spacing: -.015em;
    color: var(--mx-ink);
}
.elementor-widget.mx-svcwhy__body { font: 400 16px/1.7 var(--mx-font-body); color: var(--mx-ink-muted); }

.mx-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.mx-benefits li {
    position: relative;
    padding-left: 30px;
    font: 500 14.5px/1.45 var(--mx-font-body);
    color: var(--mx-ink-strong);
}
.mx-benefits li::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--mx-green-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* [maxiflex_before_after]. The "before" photograph lies over the "after" and
   is clipped at --pos; the range input covering the stage moves it. Images are
   named through their own classes, (0,2,0), to beat `.elementor img` (0,1,1). */
.mx-compare {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 12px;
    background: var(--mx-paper);
    border: 1px solid #e0eae5;
    border-radius: var(--mx-radius-hero);
}
.mx-compare__stage {
    --pos: 50%;
    position: relative;
    aspect-ratio: 800 / 448;
    overflow: hidden;
    border-radius: var(--mx-radius-inner);
    background: #1b2723;
    user-select: none;
    touch-action: pan-y;
}
.mx-compare__stage .mx-compare__after,
.mx-compare__stage .mx-compare__before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.mx-compare__stage .mx-compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.mx-compare__rule {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 3px;
    margin-left: -1.5px;
    background: var(--mx-paper);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    pointer-events: none;
}
.mx-compare__knob {
    position: absolute;
    top: 50%;
    left: var(--pos);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: var(--mx-paper);
    box-shadow: 0 6px 20px rgba(0, 30, 20, .3);
    color: var(--mx-green-flex);
    pointer-events: none;
    transition: transform .15s ease;
}
.mx-compare__knob svg { width: 22px; height: 22px; }
.mx-compare__stage:hover .mx-compare__knob { transform: scale(1.06); }
.mx-compare__stage:has(input:focus-visible) .mx-compare__knob { outline: 3px solid var(--mx-lime); outline-offset: 3px; }
.mx-compare__tag {
    position: absolute;
    top: 14px;
    padding: 8px 12px;
    border-radius: var(--mx-radius-pill);
    font: 700 10.5px/1 var(--mx-font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    pointer-events: none;
}
.mx-compare__tag--before { left: 14px; background: rgba(16, 26, 23, .82); color: var(--mx-paper); }
.mx-compare__tag--after { right: 14px; background: var(--mx-lime); color: var(--mx-dark); }
.mx-compare__stage input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}
.mx-compare figcaption {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 0 8px 6px;
    font: 400 13px/1.5 var(--mx-font-body);
    color: var(--mx-ink-soft);
}
.mx-compare figcaption b { font-weight: 600; color: var(--mx-ink-strong); }

/* -- 32.4 Five steps, every service ---------------------------------------- */

.e-con.mx-vsteps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    padding: 0;
}
/* The rail through the five nodes, and its lime fill. */
.e-con.mx-vsteps::before,
.e-con.mx-vsteps::after {
    content: "";
    position: absolute;
    top: 31px;
    left: 32px;
    /* Ends at the fifth node's centre: each node sits at the left of its
       column, so the rail stops one column-width-less-32px short of the edge. */
    right: calc((100% - 4 * 18px) / 5 - 32px);
    height: 2px;
    border-radius: 2px;
}
.e-con.mx-vsteps::before { background: rgba(255, 255, 255, .12); }
.e-con.mx-vsteps::after { background: var(--mx-lime); transform-origin: left center; }
.e-con.mx-vstep { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0; }
.e-con.mx-vstep__node {
    --mx-vi: none;
    position: relative;
    z-index: 1;
    flex: none;
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: 50%;
    background: var(--mx-dark);
    border: 2px solid rgba(255, 255, 255, .18);
}
/* The icon, masked to a flat colour like every icon on the site. */
.e-con.mx-vstep__node::after {
    content: "";
    position: absolute;
    inset: 17px;
    background: var(--mx-lime);
    -webkit-mask: var(--mx-vi) center / contain no-repeat;
    mask: var(--mx-vi) center / contain no-repeat;
}
.e-con.mx-vstep--clean   .mx-vstep__node { --mx-vi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3 21 10M9.5 7.5l7 7M3 21l6.5-1.5 7-7-5-5-7 7z'/%3E%3C/svg%3E"); }
.e-con.mx-vstep--lube    .mx-vstep__node { --mx-vi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h9l3-3h3v3l-4 5H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 10V7h3v3M20 17.5a1.5 1.5 0 1 1-3 0c0-1 1.5-3 1.5-3s1.5 2 1.5 3z'/%3E%3C/svg%3E"); }
.e-con.mx-vstep--adjust  .mx-vstep__node { --mx-vi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z'/%3E%3C/svg%3E"); }
.e-con.mx-vstep--inspect .mx-vstep__node { --mx-vi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8M8 10.5l1.8 1.8 3.2-3.6'/%3E%3C/svg%3E"); }
.e-con.mx-vstep--doc     .mx-vstep__node { --mx-vi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M9 11h6M9 15h4'/%3E%3C/svg%3E"); }
/* The last step — what the customer keeps — is the filled one. */
.e-con.mx-vstep:last-child .mx-vstep__node { background: var(--mx-lime); border-color: var(--mx-lime); }
.e-con.mx-vstep:last-child .mx-vstep__node::after { background: var(--mx-dark); }

.elementor-widget.mx-vstep__k { margin-top: 6px; font: 600 11px/1 var(--mx-font-body); letter-spacing: .12em; color: rgba(255, 255, 255, .45); }
.elementor-widget.mx-vstep__title .elementor-heading-title { font: 700 19px/1.25 var(--mx-font-heading); color: var(--mx-paper); }
.elementor-widget.mx-vstep__body { font: 400 14px/1.62 var(--mx-font-body); color: rgba(255, 255, 255, .66); }

/* The fill grows as the band scrolls through — the About timeline's technique,
   no JavaScript. Without scroll-driven animation it is simply drawn full. */
@keyframes mx-vrail-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mx-vrail-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .e-con.mx-vsteps::after {
            animation: mx-vrail-grow linear both;
            animation-timeline: view();
            animation-range: cover 20% cover 55%;
        }
    }
}

/* -- 32.5 What we look after ----------------------------------------------- */

.e-con.mx-svckit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 0; }
.e-con.mx-kcard {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    padding: 12px 28px 12px 12px;
    background: var(--mx-paper);
    border: 1px solid #e0eae5;
    border-radius: var(--mx-radius-hero);
}
.elementor-widget.mx-kcard__img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3.4;
    height: auto;
    object-fit: cover;
    border-radius: var(--mx-radius-inner);
}
.e-con.mx-kcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; }
.elementor-widget.mx-kcard__title .elementor-heading-title { font: 700 22px/1.25 var(--mx-font-heading); color: var(--mx-ink-strong); }
.elementor-widget.mx-kcard__text { font: 400 14.5px/1.65 var(--mx-font-body); color: var(--mx-ink-muted); }
.elementor-widget.mx-kcard__links { margin-top: 4px; }
.elementor-widget.mx-kcard__links a {
    display: inline-flex;
    margin: 0 8px 8px 0;
    padding: 10px 14px;
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: var(--mx-radius-pill);
    font: 600 12.5px/1 var(--mx-font-body);
    color: var(--mx-ink);
    text-decoration: none;
}
.elementor-widget.mx-kcard__links a:hover { border-color: var(--mx-green-maxi); color: var(--mx-green-maxi); }

/* -- 32.6 After hours ------------------------------------------------------ */

/* The orange, for what §3 keeps it for. Shades local to this strip, as §31's
   after-hours card. */
.e-con.mx-ahstrip { background: #fffaf2; border-block: 1px solid #f3d7ad; }
.e-con.mx-ahstrip__inner { padding: 44px var(--mx-gutter); scroll-margin-top: 80px; }
.e-con.mx-ahstrip__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px 48px;
    align-items: center;
}
.e-con.mx-ahstrip__text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; }
.e-con.mx-ahstrip .elementor-widget.mx-eyebrow { color: #b86a00; }
.e-con.mx-ahstrip .mx-bullet { background: var(--mx-orange); border-radius: 50%; animation: mx-beat 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .e-con.mx-ahstrip .mx-bullet { animation: none; } }
.elementor-widget.mx-ahstrip__title .elementor-heading-title { font: 700 26px/1.25 var(--mx-font-heading); color: #5c3500; }
.elementor-widget.mx-ahstrip__body { font: 400 14.5px/1.5 var(--mx-font-body); color: #8a6a40; }
.mx-ahtiles { display: grid; grid-template-columns: repeat(4, auto); gap: 10px; }
.mx-ahtile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    background: var(--mx-paper);
    border: 1px solid #f3d7ad;
    border-radius: 16px;
    text-decoration: none;
    transition: border-color .15s ease;
}
.mx-ahtile:hover { border-color: var(--mx-orange); }
.mx-ahtile small { font: 600 10.5px/1 var(--mx-font-body); letter-spacing: .1em; text-transform: uppercase; color: #b0895a; }
.mx-ahtile b { font: 700 17px/1 var(--mx-font-heading); font-variant-numeric: tabular-nums; color: #8a4f00; white-space: nowrap; }

/* -- 32.7 Book a service --------------------------------------------------- */

.e-con.mx-svcbook { background: var(--mx-green-flex); scroll-margin-top: 60px; }
.e-con.mx-svcbook__inner { padding: 84px var(--mx-gutter); }
.e-con.mx-svcbook__inner > .e-con-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.e-con.mx-svcbook .elementor-widget.mx-eyebrow { color: var(--mx-lime); }
.elementor-widget.mx-svcbook__title .elementor-heading-title {
    font: 700 clamp(30px, 3.4vw, 46px)/1.18 var(--mx-font-heading);
    letter-spacing: -.015em;
    color: var(--mx-paper);
}
.elementor.elementor .e-con .elementor-widget.mx-svcbook__lead {
    max-width: 620px;
    font: 400 16.5px/1.65 var(--mx-font-body);
    color: rgba(255, 255, 255, .8);
}
.elementor-widget.mx-svcbook__acts .elementor-widget-container,
.elementor-widget.mx-svcbook__acts:not(:has(.elementor-widget-container)) { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.elementor-widget.mx-svcbook__acts { margin-top: 8px; }
.mx-svcbook__acts a.mx-btn--solid { background-color: var(--mx-green-accent); }
.mx-svcbook__acts a.mx-btn--solid:hover { background-color: var(--mx-green-maxi); }
.mx-svcbook__acts a.mx-pill { color: var(--mx-paper); border-color: rgba(255, 255, 255, .4); }
.mx-svcbook__acts a.mx-pill:hover { color: var(--mx-paper); border-color: var(--mx-paper); }

/* -- 32.8 Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
    .elementor-widget.mx-svc__lead { width: auto; flex: 1 1 100%; }
    .e-con.mx-svcstages .e-con.mx-section-head,
    .e-con.mx-svcvisit .e-con.mx-section-head,
    .e-con.mx-svckit .e-con.mx-section-head { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
    .e-con.mx-svcstages__grid { grid-template-columns: minmax(0, 1fr); }
    .e-con.mx-stage:not(:last-child)::after { top: auto; right: auto; bottom: -21px; left: 52px; width: 2px; height: 22px; }
    .e-con.mx-svcwhy__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    /* Five across no longer fits: the rail turns vertical down the left. */
    .e-con.mx-vsteps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .e-con.mx-vsteps::before,
    .e-con.mx-vsteps::after { top: 32px; bottom: 32px; left: 31px; right: auto; width: 2px; height: auto; transform-origin: center top; }
    .e-con.mx-vstep { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 22px; row-gap: 8px; }
    .e-con.mx-vstep__node { grid-row: 1 / span 3; }
    .elementor-widget.mx-vstep__k { margin-top: 4px; }
    .e-con.mx-svckit__grid { grid-template-columns: minmax(0, 1fr); }
    .e-con.mx-ahstrip__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
    .mx-ahtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .e-con.mx-vsteps::after { animation-name: mx-vrail-grow-y; animation-range: cover 10% cover 70%; }
    }
}
@media (max-width: 767px) {
    .mx-benefits { grid-template-columns: minmax(0, 1fr); }
    .mx-compare figcaption { flex-direction: column; gap: 2px; }
    .e-con.mx-kcard { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 16px; }
    .e-con.mx-kcard__body { padding: 4px 10px 0; }
    .mx-ahtiles { grid-template-columns: minmax(0, 1fr); }
    .mx-ahtile { flex-direction: row; justify-content: space-between; align-items: center; }
    .e-con.mx-svcbook__inner { padding: 64px var(--mx-gutter); }
}

/* ===========================================================================
 * 33. The Industries page
 *
 * Signed off as design/industries page wireframe/Maxiflex Industries Mockup.html
 * and built by scripts/build-industries-page.php. Photo hero, the sectors with
 * their condition filter, and "Every site is different".
 * --------------------------------------------------------------------------- */

.e-con.mx-sectors,
.e-con.mx-sitecta { padding: 0; }
.e-con.mx-sectors__inner > .e-con-inner,
.e-con.mx-sitecta__inner > .e-con-inner { padding-block: 0; }

.e-con.mx-shophero--industries .elementor-widget.mx-eyebrow { color: var(--mx-green-accent); }

.e-con.mx-sectors__inner { padding: var(--mx-band-pad) var(--mx-gutter); }
.e-con.mx-sectors__inner > .e-con-inner { display: flex; flex-direction: column; gap: 0; }
.e-con.mx-sectors__wrap { display: flex; flex-direction: column; gap: 0; padding: 0; }

/* -- 33.1 The filter ------------------------------------------------------- */

/* Radio buttons read by :has() below — no JavaScript. The inputs are hidden
   but stay focusable; the label shows focus. */
.mx-cond {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 30px;
    padding: 16px 18px;
    background: var(--mx-surface-tint);
    border: 1px solid #e0eae5;
    border-radius: 18px;
}
.mx-cond > span { margin-right: 6px; font: 600 13px/1 var(--mx-font-body); color: var(--mx-ink-strong); }
.mx-cond input { position: absolute; opacity: 0; pointer-events: none; }
.mx-cond label {
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    background: var(--mx-paper);
    border: 1.5px solid var(--mx-rule-soft);
    border-radius: var(--mx-radius-pill);
    font: 600 13px/1 var(--mx-font-body);
    color: var(--mx-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.mx-cond label:hover { border-color: var(--mx-rule-strong); }
.mx-cond input:checked + label { background: var(--mx-green-flex); border-color: var(--mx-green-flex); color: var(--mx-paper); }
.mx-cond input:focus-visible + label { outline: 2.5px solid var(--mx-green-maxi); outline-offset: 3px; }

/* -- 33.2 The sector cards ------------------------------------------------- */

.e-con.mx-sectors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 0; }
.e-con.mx-sectors__grid--also { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-con.mx-sector {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 22px 22px;
    background: var(--mx-paper);
    border: 1px solid #e0eae5;
    border-radius: var(--mx-radius-hero);
    transition: opacity .25s ease, filter .25s ease, border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.e-con.mx-sector:hover { border-color: var(--mx-rule-strong); }
.e-con.mx-sector__ic {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: var(--mx-radius-inner);
    background: var(--mx-green-flex);
}
/* The home page's own icon treatment (§7): dark artwork flattened to white. */
.elementor-widget.mx-sector__icon { width: 26px; }
.elementor-widget.mx-sector__icon img { display: block; width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.elementor-widget.mx-sector__title { margin-top: 4px; }
.elementor-widget.mx-sector__title .elementor-heading-title { font: 700 19px/1.25 var(--mx-font-heading); color: var(--mx-ink-strong); }
.elementor-widget.mx-sector__text { font: 400 14px/1.62 var(--mx-font-body); color: var(--mx-ink-muted); }
.elementor-widget.mx-sector__tags { display: block; }
.mx-sector__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 6px 6px 0;
    padding: 6px 9px;
    background: var(--mx-surface-band);
    border-radius: var(--mx-radius-pill);
    font: 600 11px/1 var(--mx-font-body);
    color: var(--mx-ink);
}
.mx-sector__tag::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--mx-lime); }
.e-con.mx-sector__suited {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding: 14px 0 0;
    border-top: 1px solid var(--mx-rule);
}
.elementor-widget.mx-sector__label { font: 600 10.5px/1 var(--mx-font-body); letter-spacing: .1em; color: var(--mx-ink-faint); }
.elementor-widget.mx-sector__links a {
    display: inline-block;
    margin: 0 14px 6px 0;
    font: 700 13px/1.3 var(--mx-font-body);
    color: var(--mx-green-flex);
    text-decoration: none;
}
.elementor-widget.mx-sector__links a:hover { color: var(--mx-green-maxi); }

/* A sector the home page names but no copy exists for yet. */
.e-con.mx-sector--todo { border-style: dashed; border-color: var(--mx-rule-strong); }
.e-con.mx-sector--todo .elementor-widget.mx-sector__text { font-style: italic; color: var(--mx-ink-faint); }

/* The filter. On a desktop or tablet grid a card without the chosen condition
   fades and the matches lift, so the whole set stays in view and nothing
   jumps. On a phone the cards stack, and fading left a long scroll through
   greyed cards to reach the matches — so there, non-matches are removed
   (below, in the phone breakpoint). */
.e-con.mx-sectors__wrap:has(#mx-c-temp:checked) .e-con.mx-sector:not(.mx-sector--c-temp),
.e-con.mx-sectors__wrap:has(#mx-c-hyg:checked)  .e-con.mx-sector:not(.mx-sector--c-hyg),
.e-con.mx-sectors__wrap:has(#mx-c-flow:checked) .e-con.mx-sector:not(.mx-sector--c-flow),
.e-con.mx-sectors__wrap:has(#mx-c-big:checked)  .e-con.mx-sector:not(.mx-sector--c-big) { opacity: .32; filter: grayscale(1); }
.e-con.mx-sectors__wrap:has(#mx-c-temp:checked) .e-con.mx-sector--c-temp,
.e-con.mx-sectors__wrap:has(#mx-c-hyg:checked)  .e-con.mx-sector--c-hyg,
.e-con.mx-sectors__wrap:has(#mx-c-flow:checked) .e-con.mx-sector--c-flow,
.e-con.mx-sectors__wrap:has(#mx-c-big:checked)  .e-con.mx-sector--c-big {
    border-color: var(--mx-green-maxi);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 40, 28, .08);
}
@keyframes mx-sector-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
    /* Only the matches remain; when none of the "Also serving" cards match,
       their heading goes too rather than sitting over nothing. */
    .e-con.mx-sectors__wrap:has(#mx-c-temp:checked) .e-con.mx-sector:not(.mx-sector--c-temp),
    .e-con.mx-sectors__wrap:has(#mx-c-hyg:checked)  .e-con.mx-sector:not(.mx-sector--c-hyg),
    .e-con.mx-sectors__wrap:has(#mx-c-flow:checked) .e-con.mx-sector:not(.mx-sector--c-flow),
    .e-con.mx-sectors__wrap:has(#mx-c-big:checked)  .e-con.mx-sector:not(.mx-sector--c-big),
    .e-con.mx-sectors__wrap:has(#mx-c-temp:checked):not(:has(.mx-sectors__grid--also .mx-sector--c-temp)) :is(.mx-sectors__also, .mx-sectors__grid--also),
    .e-con.mx-sectors__wrap:has(#mx-c-hyg:checked):not(:has(.mx-sectors__grid--also .mx-sector--c-hyg))   :is(.mx-sectors__also, .mx-sectors__grid--also),
    .e-con.mx-sectors__wrap:has(#mx-c-flow:checked):not(:has(.mx-sectors__grid--also .mx-sector--c-flow)) :is(.mx-sectors__also, .mx-sectors__grid--also),
    .e-con.mx-sectors__wrap:has(#mx-c-big:checked):not(:has(.mx-sectors__grid--also .mx-sector--c-big))   :is(.mx-sectors__also, .mx-sectors__grid--also) { display: none; }
    /* No lift in a single column — the others are gone, so there is nothing to
       stand out from. The survivors fade in so it reads as a filter. */
    .e-con.mx-sectors__wrap:has(.mx-cond input:not(#mx-c-all):checked) .e-con.mx-sector {
        border-color: #e0eae5;
        transform: none;
        box-shadow: none;
        animation: mx-sector-in .3s ease both;
    }
}
@media (prefers-reduced-motion: reduce) { .e-con.mx-sector, .e-con.mx-sectors__wrap .e-con.mx-sector { transition: none; animation: none; } }

.e-con.mx-sectors__also {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 56px 0 18px;
    padding: 34px 0 0;
    border-top: 1px solid var(--mx-rule);
}
.elementor-widget.mx-sectors__alsotitle { width: auto; }
.elementor-widget.mx-sectors__alsotitle .elementor-heading-title { font: 700 22px/1.25 var(--mx-font-heading); color: var(--mx-ink-strong); }
.elementor-widget.mx-sectors__alsolead { width: auto; font: 400 14px/1.4 var(--mx-font-body); color: var(--mx-ink-soft); }

/* -- 33.3 Every site is different ------------------------------------------ */

.e-con.mx-sitecta { background: var(--mx-green-flex); overflow: hidden; }
.e-con.mx-sitecta__inner { padding: 0 var(--mx-gutter); }
.e-con.mx-sitecta__inner > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}
.e-con.mx-sitecta__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 88px 64px 88px 0;
}
.e-con.mx-sitecta .elementor-widget.mx-eyebrow { color: var(--mx-lime); }
.elementor-widget.mx-sitecta__title .elementor-heading-title {
    font: 700 clamp(30px, 3.4vw, 46px)/1.18 var(--mx-font-heading);
    letter-spacing: -.015em;
    color: var(--mx-paper);
}
.elementor.elementor .e-con .elementor-widget.mx-sitecta__lead { max-width: 520px; font: 400 16.5px/1.65 var(--mx-font-body); color: rgba(255, 255, 255, .8); }
.elementor-widget.mx-sitecta__acts .elementor-widget-container,
.elementor-widget.mx-sitecta__acts:not(:has(.elementor-widget-container)) { display: flex; flex-wrap: wrap; gap: 12px; }
.elementor-widget.mx-sitecta__acts { margin-top: 6px; }
.mx-sitecta__acts a.mx-btn--solid { background-color: var(--mx-green-accent); }
.mx-sitecta__acts a.mx-btn--solid:hover { background-color: var(--mx-green-maxi); }
.mx-sitecta__acts a.mx-pill { color: var(--mx-paper); border-color: rgba(255, 255, 255, .4); }
.mx-sitecta__acts a.mx-pill:hover { color: var(--mx-paper); border-color: var(--mx-paper); }
/* The photograph runs to the band's edge, past the gutter, and takes the copy's
   height rather than setting its own: it is pinned inside its cell, so a
   square original cannot make the band taller. The (0,5,0) lifts Elementor's
   max-width:100% on widgets (§4), which would otherwise cap the negative
   margin and leave a strip of green at the edge. */
.elementor.elementor .e-con .elementor-widget.mx-sitecta__photo {
    position: relative;
    max-width: none;
    min-height: 460px;
    margin-right: calc(-1 * var(--mx-gutter));
}
.elementor-widget.mx-sitecta__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* -- 33.4 Responsive ------------------------------------------------------- */

@media (max-width: 1180px) {
    .e-con.mx-sectors__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .e-con.mx-sectors__grid,
    .e-con.mx-sectors__grid--also { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e-con.mx-sitecta__inner > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
    .e-con.mx-sitecta__copy { padding: 64px 0 40px; }
    .elementor.elementor .e-con .elementor-widget.mx-sitecta__photo { margin: 0 calc(-1 * var(--mx-gutter)); min-height: 320px; }
}
@media (max-width: 767px) {
    /* the chip row scrolls sideways rather than stacking five rows deep */
    .mx-cond {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(-1 * var(--mx-gutter));
        padding-inline: var(--mx-gutter);
        border-inline: 0;
        border-radius: 0;
    }
    .mx-cond > span { display: none; }
    .e-con.mx-sectors__grid,
    .e-con.mx-sectors__grid--also { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
 * 34. Full 50 m roll (CLAUDE.md §32)
 *
 * A product in Bulk Rolls is sold two ways from one page. The pills at the top of the buy box
 * choose, and the body carries .mx-is-roll while the roll is chosen. Wording that belongs to
 * one state carries .mx-only-cut or .mx-only-roll; the rules below hide the other. They start
 * with body so they beat the (0,2,0) display rules of the length field.
 * --------------------------------------------------------------------------- */

body.mx-is-roll .mx-only-cut,
body:not(.mx-is-roll) .mx-only-roll {
    display: none;
}

.mx-buy__modes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 22px 26px 0;
}

/* The same fixed 52px height as the quantity stepper beside it. */
.mx-length__fixed {
    display: flex;
    align-items: center;
    height: 52px;
    padding-inline: 16px;
    background: var(--mx-paper);
    border: 1.5px solid var(--mx-rule-strong);
    border-radius: 14px;
    font: 600 16px/1 var(--mx-font-body, Inter, sans-serif);
    color: var(--mx-ink);
}

/* ---------------------------------------------------------------------------
 * 35. Projects (CLAUDE.md §33)
 *
 * The /projects/ list is the News card in a three-column grid, and a project's
 * page is the post page's header, photo and sidebar. Only what those do not
 * already do is here: the grid, the second row of photos, the facts list.
 * --------------------------------------------------------------------------- */

.e-con.mx-projmain,
.e-con.mx-projmain__inner > .e-con-inner { padding: 0; }
.e-con.mx-projmain { background: var(--mx-paper); }
.e-con.mx-projmain__inner { padding: 52px var(--mx-gutter) 76px; }

.mx-projgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mx-projgallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    align-items: start;
    margin: -16px 0 40px;
}
.mx-projgallery figure {
    margin: 0;
    border-radius: var(--mx-radius-inner);
    overflow: hidden;
    border: 1px solid var(--mx-rule);
    background: var(--mx-paper);
}
.mx-projgallery img { width: 100%; height: auto; display: block; }

.mx-projfacts { margin: 0 0 24px; border-top: 1px solid var(--mx-rule); }
.mx-projfacts__row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--mx-rule);
}
.mx-projfacts dt { font: 700 12px/1.6 var(--mx-font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--mx-green-flex); }
.mx-projfacts dd { margin: 0; font: 400 17px/1.65 var(--mx-font-body); color: var(--mx-ink); }
.mx-projother { margin: 0 0 24px; font: 400 17px/1.65 var(--mx-font-body); color: var(--mx-ink); }

@media (max-width: 1024px) {
    .mx-projgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .e-con.mx-projmain__inner { padding: 36px var(--mx-gutter) 56px; }
    .mx-projgrid { grid-template-columns: minmax(0, 1fr); }
    .mx-projfacts__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ===========================================================================
 * 36. Careers (CLAUDE.md §34)
 *
 * The openings list, and the width of the page around the application form,
 * which is the Contact form's card. Only what those do not already do is here.
 * --------------------------------------------------------------------------- */

.e-con.mx-careers,
.e-con.mx-careers__inner > .e-con-inner { padding: 0; }
.e-con.mx-careers { background: var(--mx-paper); }
.e-con.mx-careers__inner { padding: 52px var(--mx-gutter) 76px; }
.e-con.mx-careers__inner > .e-con-inner { max-width: 1080px; margin-inline: auto; display: flex; flex-direction: column; gap: 28px; }

.elementor-widget.mx-careers__title .elementor-heading-title { font: 700 clamp(26px, 3vw, 34px)/1.2 var(--mx-font-heading); color: var(--mx-ink); }
.elementor-widget.mx-careers__lead,
.elementor-widget.mx-careers__content { font: 400 17px/1.65 var(--mx-font-body); color: var(--mx-ink); }
.elementor-widget.mx-careers__content ul { margin: 0 0 1.2em; padding-left: 1.2em; }
/* Terms and Privacy notice (§35): long documents with nested lists, in a reading column. */
.e-con.mx-careers__inner > .e-con-inner > .elementor-widget-text-editor.mx-legal { max-width: 760px; }
.elementor-widget.mx-legal p,
.elementor-widget.mx-legal li,
.elementor-widget.mx-legal ol,
.elementor-widget.mx-legal ul { font: 400 17px/1.65 var(--mx-font-body); color: var(--mx-ink); }
.elementor-widget.mx-legal p,
.elementor-widget.mx-legal ol,
.elementor-widget.mx-legal ul { margin: 0 0 1.2em; }
.elementor-widget.mx-legal ol { padding-left: 1.4em; }
.elementor-widget.mx-legal ul { padding-left: 1.2em; }
.elementor-widget.mx-legal ol > li { margin-bottom: 2em; }
.elementor-widget.mx-legal li > ul { margin-top: .6em; margin-bottom: 0; }
.elementor-widget.mx-legal li li { margin-bottom: .6em; }
.elementor-widget.mx-legal ol > li > strong:first-child,
.elementor-widget.mx-legal p.mx-legal__h > strong:first-child { font: 700 20px/1.3 var(--mx-font-heading); }
.elementor-widget.mx-legal p.mx-legal__h { margin-top: 1.6em; }
.elementor-widget.mx-legal a { color: var(--mx-green-flex); text-decoration: underline; text-underline-offset: 2px; }
.elementor-widget.mx-legal a:hover { color: var(--mx-green-maxi); }
.elementor-widget.mx-legal hr { margin: 2em 0; border: 0; border-top: 1px solid var(--mx-rule); }
.elementor-widget.mx-legal img { display: block; max-width: 100%; height: auto; margin: 0 0 1.2em; }
.e-con.mx-pvcguide__shop { flex-direction: row; flex-wrap: wrap; gap: 12px; padding: 0; }

.mx-jobs { display: flex; flex-direction: column; gap: 12px; }
.mx-jobcard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 24px;
    padding: 22px 26px;
    background: var(--mx-surface-tint);
    border: 1px solid var(--mx-rule);
    border-radius: var(--mx-radius-inner);
}
.mx-jobcard__title { margin: 0; font: 700 20px/1.3 var(--mx-font-heading); }
.mx-jobcard__title a { color: var(--mx-ink); text-decoration: none; }
.mx-jobcard__facts { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 500 14px/1.5 var(--mx-font-body); color: var(--mx-ink-soft); }
.mx-jobcard__more { grid-column: 2; grid-row: 1 / span 2; font: 700 14px/1 var(--mx-font-body); color: var(--mx-green-flex); text-decoration: none; }
.mx-jobs__none { margin: 0; font: 400 17px/1.65 var(--mx-font-body); color: var(--mx-ink-soft); }

@media (max-width: 767px) {
    .e-con.mx-careers__inner { padding: 36px var(--mx-gutter) 56px; }
    .mx-jobcard { grid-template-columns: minmax(0, 1fr); }
    .mx-jobcard__more { grid-column: 1; grid-row: auto; }
}