/*
Theme Name: Maypatronic Neuro-Temu
Theme URI: https://maypatronic.com
Author: Maypatronic Neuroaesthetics Lab
Author URI: https://maypatronic.com
Description: A high-conversion, mobile-first WooCommerce theme for Maypatronic.com that fuses Temu's dopamine-driven discovery UI with the Trust-Authority signaling required for high-ticket solar energy products. Uses Tailwind via CDN, AJAX infinite scroll, scarcity progress bars, ROI micro-widgets, and an app-like bottom navigation bar engineered for thumb-zone access.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maypatronic-neuro-temu
Tags: woocommerce, e-commerce, mobile-first, solar, two-columns, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =====================================================================
   NEURO-AESTHETIC TOKENS
   These CSS variables are the only place where brand color is defined.
   They are mirrored into the Tailwind config in functions.php so that
   Tailwind utility classes (e.g. bg-trust, text-action) resolve to
   the same values used by raw CSS below.
   ===================================================================== */
:root {
    --neuro-trust:        #003366; /* Deep Trust Blue – authority anchor   */
    --neuro-trust-deep:   #001f3f; /* Pressed / shadow variant             */
    --neuro-action:       #FF6000; /* Action Orange – Von Restorff trigger */
    --neuro-action-hot:   #ff7a26; /* Hover state                          */
    --neuro-cream:        #fffaf3; /* Warm off-white page background       */
    --neuro-ink:          #0d1b2a; /* Body text                            */
    --neuro-mute:         #6b7280; /* Secondary text                       */
    --neuro-line:         #e5e7eb; /* Hairline dividers                    */
    --neuro-success:      #16a34a; /* ROI / savings                        */
    --neuro-scarcity:     #dc2626; /* Loss-aversion red                    */
    --neuro-radius:       14px;
    --neuro-shadow-card:  0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
    --neuro-shadow-cta:   0 6px 16px rgba(255,96,0,0.35);

    /* Bottom-nav reserved space so content never hides behind the bar.
       64px nav + 36px service bar + safe-area inset for iOS thumb-zone. */
    --neuro-bottom-nav-h: 64px;
    --neuro-service-bar-h: 36px;
}

/* WordPress core class compatibility – kept minimal because Tailwind
   handles 95% of the layout work. These are the bits that Tailwind
   utility classes cannot easily express on classic-editor output. */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100%;
    /* Sticky header height offset — keeps anchor scrolls from hiding
       the product image (and any in-page heading) under the header. */
    scroll-padding-top: 96px;
}
body {
    background: var(--neuro-cream);
    color: var(--neuro-ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Mobile reserves space for both the service bar AND bottom nav.
       Desktop (md+) zeros the offset because both bars are hidden. */
    padding-bottom: calc(var(--neuro-bottom-nav-h) + var(--neuro-service-bar-h) + env(safe-area-inset-bottom, 0px));
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
}

/* =====================================================================
   GLOBAL OVERFLOW GUARD — single source of truth for "no horizontal
   scrollbar on mobile". Any rogue child (long unbroken word, oversized
   embed, fixed-pixel container) is clipped at the main wrapper boundary
   instead of forcing the body wider than the viewport.
   ===================================================================== */
#mnt-main, .mnt-main-flex { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, embed, object { max-width: 100%; height: auto; }
pre, code { max-width: 100%; overflow-x: auto; word-break: break-word; }
@media (min-width: 768px) {
    body { padding-bottom: 0; }
}

/* Required WP a11y class. */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%);
    clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* WP alignment classes. */
.alignleft   { float: left;  margin: 0 1.25rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 1.25rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* WordPress required gallery / caption classes. */
.wp-caption        { max-width: 100%; }
.wp-caption-text   { color: var(--neuro-mute); font-size: 0.85rem; text-align: center; }
.gallery-caption   { color: var(--neuro-mute); font-size: 0.85rem; }
.bypostauthor      { display: block; }
.sticky            { display: block; }

/* =====================================================================
   PRODUCT CARD – TEMU-DENSE LAYOUT
   Tailwind handles spacing, but the dopamine micro-details
   (price pulse, scarcity shimmer, ROI badge glow) live here so they
   can use real keyframes.
   ===================================================================== */
.neuro-card {
    background: #fff;
    border-radius: var(--neuro-radius);
    box-shadow: var(--neuro-shadow-card);
    overflow: hidden;
    position: relative;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.neuro-card:active { transform: scale(0.98); }

.neuro-card .neuro-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    /* WHITE BACKGROUND — non-square / transparent product photos
       (PNG cut-outs, panels, batteries) sit cleanly on white when
       the image is `object-contain`, instead of looking jagged on
       a grey plate. The forced 1:1 ratio still keeps every card
       the same height across the dense 5-col grid. */
    background: #ffffff;
    overflow: hidden;
}
.neuro-card .neuro-img-wrap img {
    width: 100%; height: 100%;
    /* `contain` so the full product is always visible. */
    object-fit: contain;
    /* Tiny inset so the corners don't kiss the card edge. */
    padding: 6px;
    transition: transform 400ms ease;
}
.neuro-card:hover .neuro-img-wrap img { transform: scale(1.04); }

/* Title clamped to exactly 2 lines – prevents card-height variance
   that would break the masonry rhythm. */
.neuro-title-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    min-height: 2.5em;
}

/* Action Orange price – Von Restorff effect.
   The slight letter-spacing tightening makes it feel "stamped". */
.neuro-price {
    color: var(--neuro-action);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.neuro-price-strike {
    color: var(--neuro-mute);
    text-decoration: line-through;
    font-weight: 500;
}

/* Add-to-cart – high-contrast, thumb-sized. */
.neuro-cta {
    background: var(--neuro-action);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    box-shadow: var(--neuro-shadow-cta);
    transition: background 150ms ease, transform 120ms ease;
    min-height: 40px; /* WCAG / Fitts touch target */
}
.neuro-cta:hover { background: var(--neuro-action-hot); }
.neuro-cta:active { transform: translateY(1px); }
.neuro-cta.added::after { content: " ✓"; }

/* Scarcity bar – loss-aversion trigger.
   The shimmer animation keeps peripheral attention engaged
   without crossing into anxiety-inducing motion. */
.neuro-scarcity {
    background: #fff1f1;
    border: 1px solid #fecaca;
    color: var(--neuro-scarcity);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 6px;
}
.neuro-scarcity-track {
    background: #fee2e2;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
    position: relative;
}
.neuro-scarcity-fill {
    background: linear-gradient(90deg, #ef4444, #f97316);
    height: 100%;
    border-radius: 999px;
    position: relative;
}
.neuro-scarcity-fill::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: neuroShimmer 1.8s linear infinite;
}
@keyframes neuroShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ROI micro-widget – positive-affect dopamine cue. */
.neuro-roi {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}
.neuro-roi::before {
    content: "";
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--neuro-success);
    box-shadow: 0 0 0 0 rgba(22,163,74,0.6);
    animation: neuroPulse 1.6s ease-out infinite;
}
@keyframes neuroPulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(22,163,74,0);  }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0);    }
}

/* Discount flag – top-left corner of every card. */
.neuro-flag {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--neuro-action);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 2;
}

/* =====================================================================
   STAR RATING – inline SVG via background to avoid extra HTTP requests
   ===================================================================== */
.neuro-stars { --rating: 0; display: inline-block; font-size: 12px; line-height: 1; position: relative; color: #f59e0b; letter-spacing: 1px; }
.neuro-stars::before { content: "★★★★★"; opacity: 0.25; }
.neuro-stars::after  { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rating) * 1%); overflow: hidden; }

/* =====================================================================
   STICKY MOBILE SERVICE BAR – sits ABOVE the bottom nav.
   ---------------------------------------------------------------------
   White surface so it reads as a "shelf" tray; soft top hairline; total
   height locked to --neuro-service-bar-h so body padding-bottom stays
   exact (no content hides behind it).
   ===================================================================== */
.neuro-service-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--neuro-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    height: var(--neuro-service-bar-h);
    background: #fffaf3;
    border-top: 1px solid #FFE2CC;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.04);
}
.neuro-service-bar > div { height: 100%; }

/* =====================================================================
   STICKY BOTTOM NAV – thumb-zone navigation
   ===================================================================== */
.neuro-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--neuro-trust);
    color: #fff;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.neuro-bottom-nav a {
    color: #fff;
    text-decoration: none;
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    line-height: 1.1;
    transition: background 120ms ease;
}
.neuro-bottom-nav a.is-active { background: var(--neuro-trust-deep); }
.neuro-bottom-nav a:active { background: var(--neuro-trust-deep); }
.neuro-bottom-nav .neuro-cart-bubble {
    position: absolute;
    top: -2px; right: 14px;
    background: var(--neuro-action);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    min-width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px;
}

/* =====================================================================
   INFINITE SCROLL UI
   ===================================================================== */
.neuro-loader {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 3px solid var(--neuro-line);
    border-top-color: var(--neuro-action);
    animation: neuroSpin 0.8s linear infinite;
    margin: 24px auto;
}
@keyframes neuroSpin { to { transform: rotate(360deg); } }
.neuro-end-marker { color: var(--neuro-mute); text-align: center; padding: 24px 0; font-size: 13px; }

/* =====================================================================
   IMAGE RENDERING — CRITICAL FIX
   ---------------------------------------------------------------------
   Previously: img[loading="lazy"] { opacity: 0 } until a JS hook added
   .is-loaded — but no hook existed, so EVERY product image rendered
   invisible (the "0-width / blank image" bug).
   Fix: default to opacity 1, let an opt-in .neuro-fade-in class trigger
   the fade behaviour for hero or above-the-fold images only.
   ===================================================================== */
img { max-width: 100%; height: auto; opacity: 1 !important; }
img.neuro-fade-in { opacity: 0 !important; transition: opacity 250ms ease; }
img.neuro-fade-in.is-loaded { opacity: 1 !important; }
/* Ensure every child of the right column flows fully — the trust
   badges, meta links, and WhatsApp consult must always render. */
/* And the parent grid row never collapses on tablet/desktop. */

/* BUY NOW loading state — a subtle shimmer keeps the user oriented
   during the ~600ms it takes for the AJAX add + redirect to fire. */

.woocommerce-product-attributes,
table.shop_attributes {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-break: break-word;
}

/* =====================================================================
   HIGH-DENSITY RESPONSIVE PRODUCT GRID
   ----------------------------------------------------------------------
   Mobile  : strict 2 cols, gap-2 (8px) — maximum visible products
   Tablet  : 3 cols, gap-3 (12px)
   Desktop : 5 cols, gap-4 (16px)

   We override `.woocommerce ul.products` because WooCommerce ships
   float-based `li.product` rules with `width: 30.75%` etc. that fight
   any grid we put on the parent. The matching Tailwind classes on the
   <ul> in archive-product.php give us the same column counts so even
   if the inline Tailwind config script is still parsing, the layout
   never collapses.
   ===================================================================== */
.woocommerce ul.products,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;             /* gap-2 on mobile */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
@media (min-width: 768px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.75rem !important; } }
/* Desktop drops from 5 → 4 cols because the new sticky left sidebar
   (16rem wide + 1.5rem gap) consumes the column slot. The card body
   still gets a high-density Temu feel because the ~210px column width
   lands between the old 200 and 250px sweet-spots. */
@media (min-width: 1024px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1rem !important; } }
.woocommerce ul.products li.product,
ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; }

/* Card heights stay rigid at every breakpoint — the title clamp at
   `.neuro-title-2` (min-height: 2.5em) plus `flex-1` on the body and
   `mt-auto` on the CTA keep prices and Add-to-Cart buttons aligned
   across every row even when one product name is one line and another
   wraps to two. Re-asserted here so the dense 5-col desktop grid
   doesn't break alignment. */
.woocommerce ul.products li.product,
ul.products li.product { display: flex; flex-direction: column; }
ul.products li.product .neuro-title-2 { min-height: 2.5em; }

/* In the dense 5-col desktop grid, shrink the card padding + CTA
   slightly so all card chrome stays proportional inside ~200px columns. */
@media (min-width: 1024px) {
    ul.products li.product > div { padding: 0.65rem !important; gap: 0.35rem !important; }
    ul.products li.product .neuro-title-2 { font-size: 12.5px; }
    ul.products li.product .add_to_cart_button,
    ul.products li.product a.add_to_cart_button { font-size: 12px; padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
}

/* =====================================================================
   CATEGORY "BUBBLE" NAV — circular thumbnails for the shop archive.
   Mobile  : a horizontally-scrollable strip (one-thumb gesture, no
             scrollbar visible, snap-to-bubble for tactile feel).
   Tablet+ : an even grid that wraps to multiple rows.
   ===================================================================== */
.mnt-cat-bubbles {
    margin: 0 -0.75rem 14px;            /* breaks the section padding so the
                                           strip can scroll edge-to-edge */
    padding: 6px 0 4px;
}
.mnt-cat-bubbles-list {
    list-style: none;
    margin: 0;
    padding: 0 12px;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
}
.mnt-cat-bubbles-list::-webkit-scrollbar { display: none; }
.mnt-cat-bubble {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 76px;
    text-align: center;
}
.mnt-cat-bubble a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #0d1b2a;
}
.mnt-cat-bubble-thumb {
    width: 64px; height: 64px;
    border-radius: 9999px;
    overflow: hidden;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 14px rgba(0,0,0,0.06);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.mnt-cat-bubble-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.mnt-cat-bubble-name {
    font-size: 11.5px;
    font-weight: 700;
    color: #0d1b2a;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 76px;
}
.mnt-cat-bubble a:hover .mnt-cat-bubble-thumb {
    transform: translateY(-1px);
    border-color: #FF6000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06), 0 10px 22px rgba(255,96,0,0.18);
}
.mnt-cat-bubble a:hover .mnt-cat-bubble-name { color: #FF6000; }
/* Active category (when on a /product-category/.../) — Action-Orange ring. */
.mnt-cat-bubble.is-active .mnt-cat-bubble-thumb {
    border-color: #FF6000;
    box-shadow: 0 0 0 3px rgba(255,96,0,0.18), 0 6px 14px rgba(255,96,0,0.22);
}
.mnt-cat-bubble.is-active .mnt-cat-bubble-name { color: #FF6000; }

/* Tablet+: switch from horizontal scroll to a wrapping grid. */
@media (min-width: 768px) {
    .mnt-cat-bubbles { margin: 0 0 18px; padding: 4px 0 6px; }
    .mnt-cat-bubbles-list {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 14px;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }
    .mnt-cat-bubble { width: auto; }
    .mnt-cat-bubble-thumb { width: 72px; height: 72px; }
    .mnt-cat-bubble-name { max-width: none; font-size: 12px; }
}
@media (min-width: 1024px) {
    .mnt-cat-bubbles-list { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; }
    .mnt-cat-bubble-thumb { width: 80px; height: 80px; }
}

/* =====================================================================
   SUB-CATEGORY / RELATED-CATEGORY "QUICK LINK" PILLS.
   Sits above the product grid on every category archive. The visual
   weight is intentionally lower than the bubble nav (text-only chips)
   so it complements rather than competes.
   ===================================================================== */
.mnt-subcat-pills {
    margin: 6px 0 14px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.mnt-subcat-pills-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-right: 4px;
}
.mnt-subcat-pills-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
    flex: 1 1 auto;
}
.mnt-subcat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    color: #003366;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease;
    line-height: 1.1;
    white-space: nowrap;
}
.mnt-subcat-pill .count {
    background: #eef2ff;
    color: #003366;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1;
}
.mnt-subcat-pill:hover {
    background: #003366;
    color: #fff;
    border-color: #003366;
    transform: translateY(-1px);
}
.mnt-subcat-pill:hover .count { background: rgba(255,255,255,0.18); color: #fff; }
@media (max-width: 640px) {
    .mnt-subcat-pills { padding: 10px; gap: 6px; }
    .mnt-subcat-pills-label { display: block; width: 100%; margin-bottom: 2px; }
    .mnt-subcat-pills-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .mnt-subcat-pills-list::-webkit-scrollbar { display: none; }
}

/* =====================================================================
   PRIMARY CATEGORY BADGE — small uppercase chip above the title
   inside every product card. Drives "this is the family I'm in"
   recognition without needing the breadcrumb.
   ===================================================================== */
.mnt-primary-cat-badge {
    display: inline-block;
    align-self: flex-start;
    background: #eef2ff;
    color: #003366;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 140ms ease, color 140ms ease;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mnt-primary-cat-badge:hover {
    background: #003366;
    color: #fff;
}

/* =====================================================================
   SALIENCY BADGE — top-right corner of every card image.
   New < 30 days → green "NEW".  Bestseller → orange "BEST SELLER".
   Mutually exclusive (PHP helper picks one).
   ===================================================================== */
.mnt-saliency-badge {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    text-transform: uppercase;
}
.mnt-saliency-badge--new  { background: #16a34a; }
.mnt-saliency-badge--best { background: #FF6000; }

/* =====================================================================
   AJAX LOAD-MORE BUTTON — explicit, Action-Orange, full-width-ish CTA.
   Coexists with the IntersectionObserver auto-trigger so the button
   stays useful on slow scroll AND power-scrollers still get auto-load.
   ===================================================================== */
.mnt-load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.mnt-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
    padding: 12px 24px;
    background: #FF6000;
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(255,96,0,0.35);
    cursor: pointer;
    transition: background 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}
.mnt-load-more-btn:hover { background: #ff7a26; }
.mnt-load-more-btn:active { transform: translateY(1px); }
.mnt-load-more-btn[disabled] { cursor: progress; opacity: 0.85; }
.mnt-load-more-spinner {
    width: 18px; height: 18px;
    color: #fff;
    display: none;
}
.mnt-load-more-btn.is-loading .mnt-load-more-spinner {
    display: inline-block;
    animation: mnt-load-more-spin 0.9s linear infinite;
}
.mnt-load-more-btn.is-loading .mnt-load-more-label::after {
    content: ' …';
}
@keyframes mnt-load-more-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .mnt-load-more-btn.is-loading .mnt-load-more-spinner { animation: none; }
}

/* =====================================================================
   SLIDE-OUT CART DRAWER — replaces the full /cart/ page navigation
   for a smoother in-context add-to-cart loop.
   ===================================================================== */
.mnt-cart-drawer {
    position: fixed; top: 0; right: 0;
    width: 92vw; max-width: 420px; height: 100vh;
    background: #fff;
    box-shadow: -8px 0 24px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.2,.7,.3,1);
    z-index: 100;
    display: flex; flex-direction: column;
    visibility: hidden;
}
.mnt-cart-drawer.is-open { transform: translateX(0); visibility: visible; }
.mnt-cart-overlay {
    position: fixed; inset: 0; background: rgba(13,27,42,0.45);
    opacity: 0; visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
    z-index: 99;
}
.mnt-cart-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto !important; }
.mnt-cart-drawer .widget_shopping_cart_content { padding: 0; }
.mnt-cart-drawer ul.woocommerce-mini-cart { list-style: none; padding: 0; margin: 0; }
.mnt-cart-drawer ul.woocommerce-mini-cart li {
    display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9;
}
.mnt-cart-drawer ul.woocommerce-mini-cart li img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.mnt-cart-drawer .woocommerce-mini-cart__total { font-weight: 800; color: #003366; padding: 12px 0; border-top: 2px solid #FF6000; }
.mnt-cart-drawer .woocommerce-mini-cart__buttons { display: none; } /* we render our own checkout CTA */

/* =====================================================================
   BACS "PRIORITY ACTION" PANEL — Bank Transfer with Copy buttons.
   ===================================================================== */
.mnt-bacs-priority {
    background: #fff7f0;
    border: 2px solid #FFBB96;
    border-radius: 14px;
    padding: 18px;
    margin: 18px 0;
}
.mnt-bacs-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 10px 12px; margin: 6px 0;
}
.mnt-bacs-row .mnt-bacs-label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; }
.mnt-bacs-row .mnt-bacs-val   { font-weight: 800; color: #003366; font-variant-numeric: tabular-nums; word-break: break-all; }
.mnt-bacs-copy {
    background: #FF6000; color: #fff; font-weight: 700; font-size: 12px;
    border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer;
    box-shadow: 0 4px 10px rgba(255,96,0,0.3);
    transition: background 150ms ease;
    flex-shrink: 0;
}
.mnt-bacs-copy:hover { background: #ff7a26; }
.mnt-bacs-copy.is-copied { background: #16a34a; box-shadow: 0 4px 10px rgba(22,163,74,0.3); }

/* Next-Steps checklist on the order-received BACS panel.
   Three numbered medallions on a high-contrast white card so the
   path-to-completion is obvious even on a small screen. */
.mnt-bacs-steps {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #FFE2CC;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    counter-reset: mnt-step;
}
.mnt-bacs-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
}
.mnt-bacs-step + .mnt-bacs-step::before {
    content: '';
    position: absolute;
    left: 14px;
    top: -14px;
    width: 2px;
    height: 14px;
    background: linear-gradient(to bottom, transparent, #FFBB96);
}
.mnt-bacs-step-num {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #003366;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,51,102,0.25);
}
.mnt-bacs-step[data-step="2"] .mnt-bacs-step-num { background: #FF6000; box-shadow: 0 2px 6px rgba(255,96,0,0.35); }
.mnt-bacs-step[data-step="3"] .mnt-bacs-step-num { background: #16a34a; box-shadow: 0 2px 6px rgba(22,163,74,0.30); }
.mnt-bacs-step-body { flex: 1; min-width: 0; }
.mnt-bacs-step-title {
    font-weight: 800; color: #003366; font-size: 14px; line-height: 1.25;
}
.mnt-bacs-step-desc {
    font-size: 12.5px; color: #374151; margin-top: 2px; line-height: 1.45;
}
.mnt-bacs-step-cta {
    margin-top: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    background: #25D366;
    color: #fff;
    font-weight: 700; font-size: 12.5px;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37,211,102,0.35);
    transition: background 150ms ease;
}
.mnt-bacs-step-cta:hover { background: #1ebe5a; color: #fff; }

/* =====================================================================
   CART & CHECKOUT — CRO trust scaffolding injected via WC hooks.
   `mnt-cart-trust-strip` and `mnt-checkout-trust-strip` are tight,
   high-contrast bands that sit above the cart table / checkout form
   to anchor every single user on the four conversion-defining promises:
       Bank Transfer · 24H Dispatch · Free Delivery · Refundable Inspection
   `mnt-cart-bacs-card` is the green reassurance card that sits beside
   the "Proceed to Checkout" button so the buyer's last visual cue is
   "Bank transfer only — secure" instead of an empty white space.
   ===================================================================== */
.mnt-cart-trust-strip,
.mnt-checkout-trust-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 18px;
    padding: 12px;
    background: #fffaf3;
    border: 1px solid #FFE2CC;
    border-radius: 12px;
}
@media (min-width: 768px) {
    .mnt-cart-trust-strip,
    .mnt-checkout-trust-strip { grid-template-columns: repeat(4, 1fr); padding: 14px; }
}
.mnt-cart-trust-pill {
    display: flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px; font-weight: 700;
    color: #003366;
    line-height: 1.2;
}
.mnt-cart-trust-pill .ico {
    flex: 0 0 24px; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    color: #fff;
}
.mnt-cart-trust-pill[data-tone="green"]  .ico { background: #16a34a; }
.mnt-cart-trust-pill[data-tone="orange"] .ico { background: #FF6000; }
.mnt-cart-trust-pill[data-tone="blue"]   .ico { background: #003366; }

.mnt-cart-bacs-card {
    margin-top: 14px;
    padding: 14px 16px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    color: #065f46;
    font-size: 13px;
    line-height: 1.45;
}
.mnt-cart-bacs-card-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 14px; color: #065f46;
    margin: 0 0 4px;
}
.mnt-cart-bacs-card a {
    color: #047857; font-weight: 700; text-decoration: underline;
}
.mnt-cart-bacs-card a:hover { color: #FF6000; }
.mnt-cart-wa-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px;
    background: #25D366; color: #fff !important;
    padding: 7px 12px; border-radius: 999px;
    font-weight: 700; font-size: 12.5px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(37,211,102,0.30);
}
.mnt-cart-wa-link:hover { background: #1ebe5a; color: #fff !important; }

/* Checkout 3-step progress strip */
.mnt-checkout-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.mnt-checkout-step {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; color: #6b7280;
}
.mnt-checkout-step .num {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e5e7eb; color: #6b7280;
    border-radius: 999px; font-weight: 800; font-size: 13px;
}
.mnt-checkout-step.is-active { color: #003366; }
.mnt-checkout-step.is-active .num { background: #FF6000; color: #fff; box-shadow: 0 2px 6px rgba(255,96,0,0.35); }
.mnt-checkout-step.is-done   .num { background: #16a34a; color: #fff; }
.mnt-checkout-step .arrow {
    color: #d1d5db; font-weight: 800;
}
@media (max-width: 640px) {
    .mnt-checkout-step .label { display: none; }
    .mnt-checkout-step.is-active .label { display: inline; }
}

/* Checkout payment-area trust footer (Bank Transfer guarantee). */
.mnt-checkout-bacs-guarantee {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid #16a34a;
    border-radius: 10px;
    color: #065f46;
    font-size: 12.5px;
    line-height: 1.5;
}
.mnt-checkout-bacs-guarantee strong { color: #047857; }

/* Category-page trust strip — slim but always visible. */
.mnt-cat-trust [class*="bg-"] { line-height: 1.25; }
/* Hide WC's default plain BACS instructions when we render our priority panel */
body.woocommerce-order-received .woocommerce-bacs-bank-details,
body.woocommerce-order-received h2.wc-bacs-bank-details-heading,
body.woocommerce-order-received h3.wc-bacs-bank-details-account-name { display: none !important; }

/* =====================================================================
   CHECKOUT — strip global chrome so users focus on completing payment.
   ===================================================================== */
body.woocommerce-checkout #mnt-header > .bg-\[\#003366\],
body.woocommerce-checkout #mnt-header > nav,
body.woocommerce-checkout .neuro-bottom-nav,
body.woocommerce-checkout .neuro-service-bar { display: none !important; }
body.woocommerce-checkout #mnt-header { box-shadow: none; border-bottom: 1px solid #e5e7eb; }
body.woocommerce-checkout #mnt-footer  { display: none !important; }
body.woocommerce-checkout              { padding-bottom: 0 !important; }
body.woocommerce-checkout #mnt-main    { max-width: 980px; }

/* Mobile-first: stacked column. */

/* Card — labels are clickable to toggle the inner checkbox. */

/* Action bar — total + CTA. */

/* Desktop horizontal layout. */

/* Reduced-motion + print safety. */

/* =====================================================================
   CHECKOUT FORM — MOBILE-FIRST, SINGLE-COLUMN, NO-ZOOM INPUTS
   ---------------------------------------------------------------------
   Three jobs:
   1. Force every billing/shipping row to span the full grid width so
      the user never has to thumb-stretch between two side-by-side
      columns. This complements the PHP filter that strips
      `form-row-first/last` from the field classes.
   2. Lock input/textarea/select font-size to 16px on mobile. iOS Safari
      and Android Chrome auto-zoom into any input whose computed font is
      below 16px — that zoom never reverses cleanly and is the single
      most common reason mobile checkout abandonment spikes after a
      "Town/City" tap. 16px = no zoom = no flow break.
   3. Bump tap targets to 48px high, the WCAG/Apple thumb threshold.
   ===================================================================== */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    display: block;
}
.woocommerce-checkout .form-row,
.woocommerce-checkout p.form-row,
.woocommerce form .form-row.form-row-first,
.woocommerce form .form-row.form-row-last,
.woocommerce-checkout .form-row.form-row-wide {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-bottom: 14px;
}

/* Labels — calm, readable, with a Trust-Blue cast that ties to the
   rest of the checkout chrome. */
.woocommerce-checkout .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #003366;
    margin-bottom: 6px;
    line-height: 1.3;
}
.woocommerce-checkout .form-row label .required {
    color: #dc2626;
    text-decoration: none;
    margin-left: 2px;
}

/* Inputs / selects / textareas — the no-zoom + thumb-target rule. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    font-size: 16px !important;     /* prevents iOS / Android auto-zoom */
    line-height: 1.4;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #0d1b2a;
    box-shadow: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.woocommerce-checkout .form-row textarea {
    min-height: 96px;
    padding-top: 12px;
    resize: vertical;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #FF6000;
    box-shadow: 0 0 0 3px rgba(255,96,0,0.18);
    outline: none;
}

/* Select2 — Woo's default state-picker. Match the height + 16px font so
   the dropdown trigger never zooms either. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 14px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 8px;
}

/* Help text under inputs (e.g. WhatsApp helper) — small, muted, never
   competes with the label. */
.woocommerce-checkout .form-row .description,
.woocommerce-checkout .form-row small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

/* Validation feedback — bright red border + accessible icon-free text. */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
}

/* Two-column desktop layout — billing left, order summary right. The
   single-column rule still holds INSIDE each column; this only restores
   the side-by-side at >=900px so the desktop view doesn't waste pixels. */
@media (min-width: 900px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 28px;
        align-items: start;
    }
    .woocommerce-checkout form.checkout #customer_details { min-width: 0; }
    .woocommerce-checkout form.checkout #order_review_heading,
    .woocommerce-checkout form.checkout #order_review {
        grid-column: 2;
    }
    .woocommerce-checkout form.checkout #order_review_heading { margin-top: 0; }
}

/* Mobile-only safety net — inside the 900px media query, the single
   column above already governs, so this block is a belt-and-braces
   guarantee that NOTHING below 900px ever side-by-sides. */
@media (max-width: 899px) {
    .woocommerce-checkout .form-row,
    .woocommerce-checkout p.form-row {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Belt-and-braces: re-state the 16px input rule so it survives any
       higher-specificity plugin CSS that loads after this stylesheet. */
    .woocommerce-checkout input,
    .woocommerce-checkout select,
    .woocommerce-checkout textarea {
        font-size: 16px !important;
    }
}

/* =====================================================================
   STICKY-FOOTER FLEX — keep footer at viewport bottom on short pages.
   ===================================================================== */
html, body { min-height: 100%; }
body { display: flex; flex-direction: column; }
.mnt-main-flex { flex: 1 0 auto; }
#mnt-footer    { flex-shrink: 0; }

/* =====================================================================
   QUICK VIEW — eye-icon button on each card + Tailwind-styled modal.
   ===================================================================== */
.mnt-qv-btn {
    position: absolute;
    bottom: 8px; right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.96);
    color: #003366;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 180ms ease, transform 180ms ease, background 150ms ease;
}
.neuro-card:hover .mnt-qv-btn { opacity: 1; transform: translateY(0); }
.mnt-qv-btn:hover { background: #FF6000; color: #fff; border-color: #FF6000; }
@media (max-width: 767px) {
    /* Mobile: always-visible icon-only chip in the corner. */
    .mnt-qv-btn { opacity: 1; transform: none; padding: 6px; gap: 0; }
    .mnt-qv-btn .mnt-qv-btn-text { display: none; }
}

.mnt-qv-overlay {
    position: fixed; inset: 0;
    background: rgba(13,27,42,0.55);
    z-index: 110;
}
.mnt-qv-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 111;
    width: min(960px, 94vw);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.30);
}
.mnt-qv-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: rgba(255,255,255,0.96);
    border-radius: 999px;
    color: #003366;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.mnt-qv-close:hover { background: #FF6000; color: #fff; }
.mnt-qv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
@media (max-width: 767px) {
    .mnt-qv-grid { grid-template-columns: 1fr; }
}
.mnt-qv-img {
    background: #f3f4f6;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mnt-qv-img img { width: 100%; height: 100%; object-fit: contain; }
.mnt-qv-info { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.mnt-qv-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.mnt-qv-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
}
.mnt-qv-badge--fast { background: #FFF2E8; color: #9A3412; border: 1px solid #FFBB96; }
.mnt-qv-badge--bank { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.mnt-qv-title { font-size: 22px; font-weight: 800; color: #0d1b2a; line-height: 1.2; margin: 0; }
.mnt-qv-price { font-size: 24px; font-weight: 800; color: #FF6000; font-variant-numeric: tabular-nums; }
.mnt-qv-price del { color: #6b7280; font-weight: 500; font-size: 14px; margin-left: 6px; }
.mnt-qv-desc { color: #374151; font-size: 14px; line-height: 1.55; margin: 0; }
.mnt-qv-cta { display: flex; gap: 10px; margin-top: 6px; }
.mnt-qv-btn-primary {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    background: #FF6000; color: #fff;
    font-weight: 800; font-size: 14px;
    border-radius: 999px;
    padding: 14px 18px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(255,96,0,0.35);
    transition: background 150ms ease;
}
.mnt-qv-btn-primary:hover { background: #ff7a26; }
.mnt-qv-btn-secondary {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #003366;
    font-weight: 700; font-size: 13px;
    border-radius: 999px;
    padding: 14px 16px;
    text-decoration: none;
    border: 1.5px solid #003366;
    transition: all 150ms ease;
    white-space: nowrap;
}
.mnt-qv-btn-secondary:hover { background: #003366; color: #fff; }
.mnt-qv-btn-primary.loading,
.mnt-qv-btn-primary.added { opacity: 0.85; }
.mnt-qv-btn-primary.added::after {
    content: '✓';
    margin-left: 8px;
    font-weight: 800;
}

/* Stock-level scarcity pill — colour-coded by remaining qty.
   Sits between price and short-description in the QV modal so it
   reads in the eye's natural Z-pattern after the headline price. */
.mnt-qv-stock {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    font-size: 13px; font-weight: 700;
    padding: 7px 12px;
    border-radius: 8px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.mnt-qv-stock-icon { font-size: 14px; line-height: 1; }
.mnt-qv-stock--low {
    background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
    animation: mnt-qv-stock-pulse 1.6s ease-in-out infinite;
}
.mnt-qv-stock--ok  { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.mnt-qv-stock--out { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
@keyframes mnt-qv-stock-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .mnt-qv-stock--low { animation: none; }
}

/* =====================================================================
   BLOG — masonry grid (mobile 2-col → desktop 3-col), read-time + cat
   badges. Single post centred max-w-3xl with high-contrast typography.
   ===================================================================== */
.mnt-blog-grid {
    column-count: 2;
    column-gap: 12px;
    padding: 0 12px 24px;
}
@media (min-width: 768px)  { .mnt-blog-grid { column-count: 3; column-gap: 18px; padding: 0 16px 32px; } }
@media (min-width: 1280px) { .mnt-blog-grid { column-count: 3; } }
.mnt-blog-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
    margin: 0 0 12px;
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.mnt-blog-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
.mnt-blog-card .mnt-blog-img { display: block; width: 100%; height: auto; }
.mnt-blog-card-body { padding: 12px 14px 14px; }
.mnt-blog-card-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 6px;
}
.mnt-blog-card-cat   { background: #003366; color: #fff; padding: 3px 8px; border-radius: 999px; }
.mnt-blog-card-read  { background: #FFF2E8; color: #9A3412; padding: 3px 8px; border-radius: 999px; }
.mnt-blog-card-title { font-size: 14px; font-weight: 800; color: #0d1b2a; line-height: 1.25; margin: 0 0 4px; }
.mnt-blog-card-excerpt { font-size: 12px; color: #4b5563; line-height: 1.45; margin: 0; }

.mnt-single-post .mnt-post-prose {
    font-size: 17px;
    line-height: 1.75;
    color: #1f2937;
}
.mnt-single-post .mnt-post-prose h2 { font-size: 24px; font-weight: 800; color: #003366; margin: 1.6em 0 0.6em; line-height: 1.3; }
.mnt-single-post .mnt-post-prose h3 { font-size: 20px; font-weight: 700; color: #003366; margin: 1.4em 0 0.5em; }
.mnt-single-post .mnt-post-prose p  { margin: 0 0 1.1em; }
.mnt-single-post .mnt-post-prose a  { color: #FF6000; text-decoration: underline; text-underline-offset: 3px; }
.mnt-single-post .mnt-post-prose blockquote {
    border-left: 4px solid #FF6000; padding: 8px 16px; margin: 1.4em 0;
    background: #fff7f0; color: #1f2937; font-style: italic;
}
.mnt-single-post .mnt-post-prose img { border-radius: 12px; margin: 1.4em 0; }
.mnt-single-post .mnt-post-prose ul,
.mnt-single-post .mnt-post-prose ol { padding-left: 1.4em; margin: 0 0 1.1em; }

/* Reduced-motion override – respect user accessibility prefs. */
@media (prefers-reduced-motion: reduce) {
    .neuro-scarcity-fill::after,
    .neuro-roi::before,
    .neuro-loader { animation: none !important; }
    .neuro-card,
    .neuro-card .neuro-img-wrap img { transition: none !important; }
}

/* =====================================================================
   SHOP SIDEBAR  +  MOBILE FILTER & SORT DRAWER
   =====================================================================
   Surfaces the SAME WC widgets in two places:
     - Sticky desktop rail (>=1024px)
     - Bottom-up drawer (<1024px), opened by .mnt-filter-open-btn
   Filter widgets render with the WC default markup; we only restyle
   the wrappers + lists so the look matches the rest of the storefront.
   ===================================================================== */

/* ------- Sticky desktop sidebar ------- */
.mnt-shop-sidebar {
    /* Fixed-width column controlled by Tailwind .lg:w-64 on the markup,
       but locked here too so it cannot be shrunk by neighbour content. */
    width: 16rem;
}
.mnt-shop-sidebar-inner {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 14px 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    /* Constrain height so a long list doesn't outgrow the viewport
       and the sticky-top stays useful. */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.mnt-shop-sidebar-inner::-webkit-scrollbar { width: 6px; }
.mnt-shop-sidebar-inner::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 999px; }

/* ------- Filter blocks (shared) ------- */
.mnt-filter-block {
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.mnt-filter-block:first-child { padding-top: 4px; }
.mnt-filter-block:last-child  { border-bottom: 0; padding-bottom: 4px; }
.mnt-filter-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #003366;
    margin: 0 0 10px;
}

/* ------- Category tree ------- */
.mnt-filter-cat-tree,
.mnt-filter-cat-tree ul.children,
.mnt-filter-cat-tree ul.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mnt-filter-cat-tree li {
    margin: 0;
    padding: 0;
}
.mnt-filter-cat-tree li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #0d1b2a;
    text-decoration: none;
    line-height: 1.2;
    transition: background 120ms ease, color 120ms ease;
}
.mnt-filter-cat-tree li a:hover { background: #f3f4f6; color: #003366; }
.mnt-filter-cat-tree li.current-cat > a,
.mnt-filter-cat-tree li.current-cat-parent > a {
    background: #FFF2E8;
    color: #FF6000;
    font-weight: 800;
}
.mnt-filter-cat-tree li .count,
.mnt-filter-cat-tree li a .count {
    background: #eef2ff;
    color: #003366;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
}
.mnt-filter-cat-tree ul.children {
    margin-left: 12px;
    border-left: 1px solid #e5e7eb;
    padding-left: 6px;
}

/* ------- WC Layered-Nav (attribute) ------- */
.mnt-filter-attr ul,
.mnt-filter-widget ul.woocommerce-widget-layered-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mnt-filter-widget li,
.mnt-filter-widget li.wc-layered-nav-term { margin: 0; padding: 0; }
.mnt-filter-widget li a,
.mnt-filter-widget li.wc-layered-nav-term a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #0d1b2a;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.mnt-filter-widget li a:hover { background: #f3f4f6; color: #003366; }
.mnt-filter-widget li.chosen a,
.mnt-filter-widget li.wc-layered-nav-term.chosen a {
    background: #FFF2E8;
    color: #FF6000;
    font-weight: 800;
}
.mnt-filter-widget li.chosen a::before,
.mnt-filter-widget li.wc-layered-nav-term.chosen a::before {
    content: "✓";
    font-weight: 900;
    color: #FF6000;
    margin-right: 2px;
}
.mnt-filter-widget .count {
    margin-left: auto;
    font-size: 11px;
    color: #6b7280;
}

/* ------- WC Price slider ------- */
.mnt-filter-price .price_slider_wrapper { margin-top: 4px; }
.mnt-filter-price .price_slider {
    height: 4px;
    background: #e5e7eb;
    border-radius: 999px;
    position: relative;
    margin: 14px 6px;
}
.mnt-filter-price .ui-slider-range {
    position: absolute;
    height: 4px;
    background: #FF6000;
    border-radius: 999px;
}
.mnt-filter-price .ui-slider-handle {
    position: absolute;
    top: -7px;
    width: 18px; height: 18px;
    background: #fff;
    border: 2px solid #FF6000;
    border-radius: 50%;
    cursor: grab;
    margin-left: -9px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.mnt-filter-price .price_slider_amount {
    margin-top: 12px;
    font-size: 12px;
    color: #003366;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.mnt-filter-price .price_slider_amount .price_label {
    font-weight: 700;
    flex: 1 1 60%;
}
.mnt-filter-price .price_slider_amount .button {
    background: #FF6000;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    min-height: 36px;
}
.mnt-filter-price .price_slider_amount .button:hover { background: #ff7a26; }
.mnt-filter-price input[type="text"] {
    background: transparent;
    border: 0;
    color: #003366;
    font-weight: 700;
    width: 50%;
}

/* ------- Mobile toolbar (Filter button + Sort) ------- */
.mnt-shop-toolbar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px;
}
.mnt-filter-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #003366;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0 16px;
    height: 44px;             /* WCAG / Apple thumb-target */
    min-width: 44px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,51,102,0.18);
    transition: background 140ms ease, transform 100ms ease;
}
.mnt-filter-open-btn:hover  { background: #00264d; }
.mnt-filter-open-btn:active { transform: translateY(1px); }
.mnt-shop-toolbar-sort .woocommerce-ordering select,
.mnt-shop-toolbar-sort select {
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0 14px;
    font-size: 13px;
    color: #003366;
    background: #fff;
    font-weight: 700;
    max-width: 100%;
}

/* ------- Bottom-up drawer ------- */
.mnt-filter-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
}
.mnt-filter-drawer.is-open { pointer-events: auto; }
.mnt-filter-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13,27,42,0.45);
    opacity: 0;
    transition: opacity 200ms ease;
}
.mnt-filter-drawer.is-open .mnt-filter-drawer-backdrop { opacity: 1; }
.mnt-filter-drawer-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}
.mnt-filter-drawer.is-open .mnt-filter-drawer-panel { transform: translateY(0); }
.mnt-filter-drawer-handle {
    width: 44px;
    height: 4px;
    background: #d1d5db;
    border-radius: 999px;
    margin: 8px auto 4px;
}
.mnt-filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 6px;
    border-bottom: 1px solid #f1f5f9;
}
.mnt-filter-drawer-title {
    font-size: 16px;
    font-weight: 800;
    color: #003366;
    margin: 0;
}
.mnt-filter-drawer-close {
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mnt-filter-drawer-close:hover { background: #f3f4f6; color: #003366; }
.mnt-filter-drawer-body {
    overflow-y: auto;
    padding: 4px 16px 12px;
    flex: 1 1 auto;
    overscroll-behavior: contain;
}
.mnt-filter-drawer-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #f1f5f9;
    background: #fff;
}
.mnt-filter-drawer-apply {
    width: 100%;
    height: 48px;
    background: #FF6000;
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255,96,0,0.35);
    transition: background 140ms ease, transform 100ms ease;
}
.mnt-filter-drawer-apply:hover  { background: #ff7a26; }
.mnt-filter-drawer-apply:active { transform: translateY(1px); }

/* =====================================================================
   PROMINENT "ADD TO CART" — Action-Orange pill with icon, 44px+ tap.
   Replaces the old text-only pill on every product card.
   ===================================================================== */
.mnt-card-atc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 48px;          /* Mobile thumb-zone — bumped from 44 → 48px */
    padding: 10px 14px;
    background: #FF6000;
    color: #fff !important;     /* defeat WC's default link-blue */
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(255,96,0,0.35);
    transition: background 140ms ease, transform 100ms ease, box-shadow 140ms ease;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}
/* Card-button wrapper — `mt-auto` pins the button to the bottom of the
   card so titles of different lengths never push the CTA out of line
   across the grid row. Combined with the `<li>`-level `h-full` rule
   below, every Add-to-Cart button in a row sits on the same baseline. */
.mnt-card-atc-wrap { margin-top: auto; padding-top: 8px; }
.mnt-card-atc:hover  { background: #ff7a26; color: #fff !important; }
.mnt-card-atc:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(255,96,0,0.3); }
.mnt-card-atc-ico {
    width: 18px; height: 18px;
    flex-shrink: 0;
}
/* WC AJAX states — keep the icon visible but show the spinner WC injects. */
.mnt-card-atc.loading { opacity: 0.85; cursor: progress; }
.mnt-card-atc.added::after {
    content: "✓";
    margin-left: 6px;
    font-weight: 900;
}
/* "Added!" success state — overrides the orange to a confident green
   for ~2.5s after a successful AJAX add, then reverts. The checkmark
   sits inside the label span (added by JS) so the icon stays put. */
.mnt-card-atc.is-added,
.mnt-card-atc.added {
    background: #16a34a !important;
    box-shadow: 0 6px 16px rgba(22,163,74,0.35) !important;
}
.mnt-card-atc.is-loading { opacity: 0.85; cursor: progress; }

/* Inline "View Cart" fallback link — appears under the button after a
   successful add for users who dismiss the slide-out drawer or browse
   with JS-disabled drawer. Sits above the next card so it never
   shifts the grid baseline. */
.mnt-card-viewcart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #003366 !important;
    text-decoration: underline;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.mnt-card-viewcart.is-visible { opacity: 1; transform: translateY(0); }

/* On dense desktop (4-col grid), tighten the text but keep the tap height. */
@media (min-width: 1024px) {
    .mnt-card-atc { font-size: 12px; padding: 8px 10px; gap: 5px; min-height: 44px; }
    .mnt-card-atc-ico { width: 16px; height: 16px; }
}
/* On very narrow mobile (<360px), if the label would overflow, the
   icon stays — label clips to ellipsis, button still tappable. */
@media (max-width: 360px) {
    .mnt-card-atc-label {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* =====================================================================
   CARD-LEVEL TRUST PILLS — 24H Delivery + Bank Transfer micro-chips.
   Lives just above the Add-to-Cart so the trust signal lands at the
   exact moment of the conversion decision.
   ===================================================================== */
.mnt-card-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.mnt-card-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 999px;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.mnt-card-trust-pill--delivery {
    background: #FFF2E8;
    color: #FF6000;
    border: 1px solid #FFD3B5;
}
.mnt-card-trust-pill--bank {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.mnt-card-trust-ico {
    width: 10px; height: 10px;
    flex-shrink: 0;
}
/* On dense desktop columns, hide the second pill if it would force a
   wrap that pushes the CTA off-screen. Single pill is enough at that
   density because the page-level trust strip is also visible. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .mnt-card-trust-pill--bank { display: none; }
}

/* =====================================================================
   OVERRIDE — neutralize the legacy dense-grid text squish on the new
   prominent ATC. Inherits the 48px (mobile) / 44px (desktop) height.
   ===================================================================== */
@media (min-width: 1024px) {
    ul.products li.product .mnt-card-atc {
        font-size: 12px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        min-height: 44px;
    }
}

/* =====================================================================
   FLOATING WHATSAPP BUTTON  (.mnt-fab-wa)
   ---------------------------------------------------------------------
   Sleek, fixed-position launcher rendered sitewide via wp_footer.
   - Desktop : 30px from bottom + right edges, pure WhatsApp green,
               minimal white SVG glyph.
   - Mobile  : pinned 80px from the bottom so it sits comfortably
               above the sticky service bar + bottom nav (≈100px
               reserved on body padding) and never collides with the
               sticky Add-to-Cart bar.
   - Pulse   : a single concentric ring expands every 2.4s — enough
               idle motion to draw the eye, not enough to nag.
   - A11y    : 56px round target (WCAG AAA), focus ring, label tooltip
               on hover/focus that announces "WhatsApp us".
   - Print   : hidden (no value on a paper artifact).
   ===================================================================== */
.mnt-fab-wa {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 90;                 /* below the cart drawer (100), above content */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #25D366;          /* canonical WhatsApp green */
    color: #ffffff;
    text-decoration: none !important;
    box-shadow:
        0 8px 24px rgba(37,211,102,0.45),
        0 2px 6px rgba(0,0,0,0.12);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
    -webkit-tap-highlight-color: transparent;
}
.mnt-fab-wa:hover,
.mnt-fab-wa:focus-visible {
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(37,211,102,0.55),
        0 4px 10px rgba(0,0,0,0.18);
    color: #ffffff;
    outline: none;
}
.mnt-fab-wa:focus-visible {
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.9),
        0 0 0 6px rgba(37,211,102,0.85);
}
.mnt-fab-wa:active { transform: translateY(0); }

.mnt-fab-wa-ico {
    position: relative;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: block;
}

/* PULSE RING — sits BEHIND the green disc, scales 1 → 1.55 then fades. */
.mnt-fab-wa-pulse {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #25D366;
    opacity: 0.55;
    z-index: 1;
    animation: mnt-fab-wa-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    pointer-events: none;
}
@keyframes mnt-fab-wa-pulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.55); opacity: 0;    }
    100% { transform: scale(1.55); opacity: 0;    }
}

/* TOOLTIP — only on desktop hover/focus; pure-CSS, no JS. */
.mnt-fab-wa-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: #003366;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}
.mnt-fab-wa-tip::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #003366;
}
.mnt-fab-wa:hover .mnt-fab-wa-tip,
.mnt-fab-wa:focus-visible .mnt-fab-wa-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* MOBILE — clear the sticky service bar (~36px) + bottom nav (~64px)
   plus a small breathing margin so the thumb never grazes the FAB
   while reaching for the nav. Tooltip is hidden on touch widths
   because a touch-and-hold would obscure the tap target. */
@media (max-width: 767px) {
    .mnt-fab-wa {
        right: 16px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
    }
    .mnt-fab-wa-ico { width: 26px; height: 26px; }
    .mnt-fab-wa-tip { display: none; }
}

/* Honour reduced-motion preferences — disable the pulse entirely. */
@media (prefers-reduced-motion: reduce) {
    .mnt-fab-wa-pulse { animation: none; opacity: 0; }
    .mnt-fab-wa { transition: none; }
}

/* Don't waste ink on print. */
@media print {
    .mnt-fab-wa { display: none !important; }
}

/* =====================================================================
   GRID CARD HEIGHT EQUALIZER — guarantees every <li.product> in a row
   stretches to the tallest card so the bottom-pinned Add-to-Cart row
   ends up on the same baseline regardless of how long each title wraps.
   CSS Grid already stretches grid items by default (align-items:stretch)
   but some WC versions inject a width:auto/inline-block that breaks the
   flex column inside, so we re-assert the column model here.
   ===================================================================== */
ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}
ul.products li.product > .p-3,
ul.products li.product > .p-4,
ul.products li.product > div:not(.neuro-img-wrap):not(a) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* =====================================================================
   HOMEPAGE — "SHOP BY CATEGORY" DYNAMIC TILE GRID
   =====================================================================
   3 cols mobile / 4 cols tablet / 6 cols desktop. Each tile is a
   square white-bg image plate (object-contain so non-square category
   thumbnails sit cleanly), centered name beneath, and a tiny grey
   product-count line. Tiles without a thumbnail show a sleek inline
   SVG placeholder on a soft Trust-Blue → Action-Orange gradient.
   ===================================================================== */
.mnt-hp-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #003366;
    gap: 8px;
    transition: transform 140ms ease;
}
.mnt-hp-cat:hover { transform: translateY(-2px); }

.mnt-hp-cat-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.mnt-hp-cat:hover .mnt-hp-cat-thumb {
    border-color: #FF6000;
    box-shadow: 0 6px 16px rgba(255,96,0,0.18);
}
.mnt-hp-cat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform 350ms ease;
}
.mnt-hp-cat:hover .mnt-hp-cat-thumb img { transform: scale(1.05); }

/* Sleek placeholder for categories with no thumbnail set. */
.mnt-hp-cat-placeholder {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #003366 0%, #FF6000 130%);
    color: #ffffff;
}
.mnt-hp-cat-placeholder svg {
    width: 44%;
    height: 44%;
    opacity: 0.9;
}

.mnt-hp-cat-name {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
    color: #0d1b2a;
    /* clamp to 2 lines so a long category name can never push the
       row out of vertical alignment. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 140ms ease;
}
.mnt-hp-cat:hover .mnt-hp-cat-name { color: #FF6000; }

.mnt-hp-cat-count {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {
    .mnt-hp-cat-name  { font-size: 13.5px; }
    .mnt-hp-cat-count { font-size: 11px; }
}
@media (min-width: 1024px) {
    .mnt-hp-cat-thumb { border-radius: 16px; }
}

/* Price block — bold, prominent, sits directly above the buttons.
   Spec: ≥24px on desktop. We use 30px (md) → 36px (lg) so the price
   is the unmistakable saliency anchor of the right column. */

/* Reset the WC quantity input + Add-to-Cart so the row reads as one
   single, button-led primary action inside the command center. */

/* =====================================================================
   BUY NOW — secondary action.
   =====================================================================
   Outlined Deep Navy. The hierarchy is intentional: ATC is the LARGEST
   filled-orange button; Buy Now is a slightly smaller outlined navy
   button so the eye reads ATC first ("the safe path") and the express
   path is offered as a clear-but-secondary alternative.
   ===================================================================== */

/* Buy Now loading shimmer — re-tuned for the OUTLINED variant so the
   navy fill cleanly takes over during the ~600ms add-then-redirect. */

/* 24H Delivery — Action-Orange accent */

/* Low stock — scarcity red, subtle pulse on lg+ */
@keyframes mnt-badge-scarcity-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.7; }
}

/* In stock — trust green */

/* Out of stock — neutral grey */
/* Belt-and-braces: 50/50 grid at lg+ declared in plain CSS so the layout
   works even if the Tailwind CDN script hasn't finished parsing. The
   Tailwind classes on the element are still kept; this rule just guarantees
   the grid fires before the CDN is ready. */

/* Thumbnail strip — horizontal, scrollable, no visible scrollbar. */ /* Chrome / Safari */

/* Active / selected thumbnail — Action Orange border. */

/* Remove the pseudo-element "floor" WooCommerce uses for its raised tab look. */

/* Active tab — bold Action Orange underline. */

/* Tab panels — add some breathing room above. */

/* Mobile: allow tabs to scroll horizontally without wrapping. */

/* =====================================================================
   WOO TABS — hide redundant panel heading h2 tags
   =====================================================================
   WooCommerce injects <h2>Description</h2> and <h2>Reviews (n)</h2>
   inside each panel. Since the tab label already communicates the
   context, these headings are pure visual clutter. We hide them with
   CSS so no PHP filter or hook is needed, and existing content is not
   altered — just visually suppressed.
   ===================================================================== */

/* =====================================================================
   ARCHIVE ADD-TO-CART — suppress the duplicate WooCommerce "View cart"
   =====================================================================
   When a product is added via AJAX on a shop/category/search page,
   WooCommerce automatically appends an <a class="added_to_cart wc-forward">
   "View cart" text link next to the button. Our cart-feedback.js already
   opens the slide-out drawer and injects a branded link (.mnt-card-viewcart),
   so the WooCommerce link is a duplicate that looks broken and clutters
   the card. We hide it globally — the drawer + our own inline link give
   the buyer all the confirmation they need.
   ===================================================================== */
a.added_to_cart.wc-forward,
.product a.added_to_cart,
.woocommerce ul.products li.product a.added_to_cart,
.products .added_to_cart { display: none !important; }

/* =====================================================================
   DESKTOP HEADER — Cart icon button
   =====================================================================
   Sits to the right of the Solar Calculator CTA. Orange badge shows
   item count. Fragment-refreshed by WooCommerce's native cart fragment
   mechanism via the `neuro-cart-bubble` class (same as mobile bottom
   nav). Hidden on the mobile breakpoint where the bottom nav carries
   this function.
   ===================================================================== */
.mnt-header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f4f6f8;
    color: #003366;
    border: none;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
    text-decoration: none;
    flex-shrink: 0;
}
.mnt-header-cart:hover { background: #FF6000; color: #fff; }
.mnt-header-cart .mnt-header-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #FF6000;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
    /* Hide when count is 0 */
    display: none;
}
.mnt-header-cart[data-count]:not([data-count="0"]) .mnt-header-cart-badge,
.mnt-header-cart .mnt-header-cart-badge.has-items { display: block; }
/* On hover, keep the badge white text legible on orange background */
.mnt-header-cart:hover .mnt-header-cart-badge { border-color: #FF6000; background: #fff; color: #FF6000; }

/* ── GALLERY COLUMN ──────────────────────────────────────────────── */
/* Cursor hint — users expect to be able to zoom. */
/* Smooth image load-in */
/* Zoom hint — fades on load */

/* ── CATEGORY CRUMB ─────────────────────────────────────────────── */

/* ── PRODUCT TITLE ──────────────────────────────────────────────── */

/* ── RATING + SOCIAL PROOF ROW ──────────────────────────────────── */
@keyframes mnt-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.75); }
}

/* ── PRICE BLOCK ────────────────────────────────────────────────── */

/* v2.3.8 — Master Dev Prompt:
 *     "Style it in a high-contrast color (e.g., Deep Navy or Black)
 *      with a font size of 1.75rem."
 * The Action Orange is reserved for the ATC/Buy CTAs only — making
 * the price navy keeps the action button visually dominant and the
 * price scannable but quiet. */

/* ── URGENCY STRIP ──────────────────────────────────────────────── */

/* ── SCARCITY BADGE PULSE ───────────────────────────────────────── */
@keyframes mnt-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.3); }
    50%       { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* ── STOCK PROGRESS BAR ─────────────────────────────────────────── */

/* ── ADD TO CART WRAP ───────────────────────────────────────────── */
.mnt-add-to-cart-wrap--primary form.cart {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}
.mnt-add-to-cart-wrap--primary .quantity { flex-shrink: 0; }
.mnt-add-to-cart-wrap--primary .qty {
    width: 64px !important;
    height: 52px !important;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    background: #f9fafb;
    color: #0d1b2a;
    -moz-appearance: textfield;
}
.mnt-add-to-cart-wrap--primary .qty::-webkit-inner-spin-button,
.mnt-add-to-cart-wrap--primary .qty::-webkit-outer-spin-button { -webkit-appearance: none; }

/* PRIMARY ATC button — orange gradient + animated glow */
@keyframes mnt-atc-glow {
    0%, 100% { box-shadow: 0 6px 20px rgba(255,96,0,0.35), 0 1px 3px rgba(0,0,0,0.1); }
    50%       { box-shadow: 0 8px 28px rgba(255,96,0,0.55), 0 1px 3px rgba(0,0,0,0.1); }
}

/* ── ATC MICRO-COPY ─────────────────────────────────────────────── */

/* ── BUY NOW BUTTON ─────────────────────────────────────────────── */

/* ── WHATSAPP BUTTON ────────────────────────────────────────────── */

/* ── TRUST QUARTET GRID ─────────────────────────────────────────── */

/* ── SHORT DESCRIPTION ──────────────────────────────────────────── */

/* ── SOLD PROOF ─────────────────────────────────────────────────── */

/* ── TABLET ADJUSTMENTS ─────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
 * v2.3.6 — HIGH-CONVERSION TRIGGERS
 * ═══════════════════════════════════════════════════════════════════════════
 * Adds: inline scarcity pill that sits adjacent to the price, an explicit
 * flex row for price+savings+scarcity so they wrap gracefully on mobile,
 * and a loading state for the Buy Now express-checkout button.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* The flex row that holds: [PRICE]  [Save %]  [Only X left – Order Soon!] */

/* Inline scarcity pill — sits NEXT TO the price (spec: directly adjacent). */

/* Critical (≤5 units) — pulsing red, MAXIMUM urgency. */

/* Low (6–15 units) — calmer amber, still urgent. */

@keyframes mnt-scarcity-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
        transform: scale(1.03);
    }
}

/* Respect reduced-motion users — kill the pulse. */

/* Mobile: pill drops to its own line under the price for legibility. */

/* Buy Now → loading state while navigating to checkout. */

/* ─── Inline 24H "X sold" social proof pill (price-row) ─────────────────── */

/* ─── Minimalist 3-cell Trust Bar (sits directly under buttons) ─────────── */ /* secure transfer = trust green */ /* authentic = authority blue */

/* =====================================================================
   PDP RESET — v2.5.0
   ----------------------------------------------------------------------
   Single-product page rebuild. Clean white canvas, CSS Grid 60/40 on
   desktop with a sticky right "Decision Center", single-column on
   mobile/tablet with a square 1:1 swipeable scroll-snap gallery and
   dot indicators.

   Owns 100% of the gallery markup — the default WooCommerce
   `woocommerce_show_product_images` action is unhooked in functions.php
   so Flexslider / PhotoSwipe never render here. This means we can drop
   all of WC's gray boxes, borders and rounded backgrounds without
   fighting the core JS.
   ===================================================================== */

/* ── Outer shell — pure white canvas, edge-to-edge on mobile ────────── */
.pdp-shell {
    background: #ffffff;
    padding: 0.75rem 1rem 2.5rem;
    color: #0f172a;
}
@media (min-width: 768px) {
    .pdp-shell { padding: 1.25rem 1.25rem 3rem; }
}
@media (min-width: 1024px) {
    .pdp-shell { padding: 1.5rem 1.5rem 4rem; }
}

/* ── Product wrapper — kill WooCommerce defaults ────────────────────── */
.pdp-product {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── The 60/40 grid ─────────────────────────────────────────────────── */
.pdp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .pdp-grid {
        grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
        gap: 3rem;
        align-items: start;
    }
}

/* =====================================================================
   GALLERY — left column
   ===================================================================== */
.pdp-gallery {
    position: relative;
    background: #ffffff;
    margin: 0;
}

/* ── Mobile / tablet: square swipeable slider ───────────────────────── */
.pdp-gallery__track {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 0;
}
.pdp-gallery__track::-webkit-scrollbar { display: none; }

.pdp-gallery__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
}

.pdp-gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    background: #ffffff;
}

/* ── Mobile: dot indicator ──────────────────────────────────────────── */
.pdp-gallery__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0 0.25rem;
}
.pdp-gallery__dot {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background-color 200ms ease, width 200ms ease, transform 200ms ease;
    touch-action: manipulation;
}
.pdp-gallery__dot:hover { background: #94a3b8; }
.pdp-gallery__dot.is-active {
    background: #003366;
    width: 22px;
    transform: scale(1);
}
.pdp-gallery__dot:focus-visible {
    outline: 2px solid #FF6000;
    outline-offset: 2px;
}

/* ── Desktop: vertical stack, dots hidden, true vertical gallery ────── */
@media (min-width: 1024px) {
    .pdp-gallery__track {
        display: block;
        flex-direction: unset;
        overflow: visible;
        scroll-snap-type: none;
        aspect-ratio: auto;
        height: auto;
        width: 100%;
    }
    .pdp-gallery__slide {
        flex: none;
        width: 100%;
        height: auto;
        display: block;
        margin: 0 0 1.25rem 0;
        background: #ffffff;
        scroll-snap-align: none;
    }
    .pdp-gallery__slide:last-child { margin-bottom: 0; }
    .pdp-gallery__image {
        width: 100%;
        height: auto;
        max-height: 600px;
        object-fit: contain;
        object-position: center;
    }
    .pdp-gallery__dots { display: none; }
}

/* =====================================================================
   STICKY DECISION CENTER — right column
   ===================================================================== */
.pdp-summary-wrap { width: 100%; }

@media (min-width: 1024px) {
    .pdp-summary-wrap {
        position: sticky;
        top: 6rem;                /* sticky top-24 (4px * 24) */
        align-self: start;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        padding-right: 0.25rem;
    }
}

/* The summary itself — clean canvas, subtle dividers between blocks */
.pdp-summary,
.pdp-summary.summary,
.pdp-summary.entry-summary {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0.25rem 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    color: #0f172a;
}

/* Title */
.pdp-summary .product_title,
.pdp-summary h1.product_title {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
    .pdp-summary .product_title,
    .pdp-summary h1.product_title {
        font-size: 1.875rem;
        line-height: 1.2;
    }
}

/* Star rating row */
.pdp-summary .woocommerce-product-rating {
    margin: 0 0 0.75rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Price block — Action Orange anchor */
.pdp-summary .price,
.pdp-summary p.price,
.pdp-summary span.price {
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 800;
    color: #FF6000;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pdp-summary .price del,
.pdp-summary .price del *,
.pdp-summary p.price del {
    color: #94a3b8;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: line-through;
}
.pdp-summary .price ins {
    background: transparent;
    text-decoration: none;
}

/* Excerpt / short description */
.pdp-summary .woocommerce-product-details__short-description {
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.pdp-summary .woocommerce-product-details__short-description :last-child { margin-bottom: 0; }

/* Variations / form */
.pdp-summary form.cart,
.pdp-summary .variations_form {
    background: #ffffff !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 1rem !important;
}

.pdp-summary table.variations {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0 0 0.875rem !important;
}
.pdp-summary table.variations th,
.pdp-summary table.variations td {
    border: 0 !important;
    background: transparent !important;
    padding: 0.375rem 0 !important;
    vertical-align: middle;
}
.pdp-summary table.variations th.label,
.pdp-summary table.variations label {
    font-weight: 600;
    color: #0f172a;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding-right: 0.75rem !important;
}
.pdp-summary table.variations select {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    color: #0f172a;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 18px 18px;
    padding-right: 2.25rem;
}
.pdp-summary table.variations select:focus {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.15);
}
.pdp-summary .reset_variations {
    display: inline-block;
    margin-top: 0.5rem;
    color: #475569;
    font-size: 0.8125rem;
    text-decoration: underline;
}

/* Quantity + Add to cart row */
.pdp-summary .woocommerce-variation-add-to-cart,
.pdp-summary form.cart:not(.variations_form),
.pdp-summary form.cart.grouped_form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: stretch;
    margin-top: 0.25rem !important;
}

.pdp-summary .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}
.pdp-summary .quantity input.qty {
    border: 0 !important;
    background: transparent !important;
    width: 64px;
    height: 48px;
    text-align: center;
    font-weight: 600;
    color: #0f172a;
    font-size: 1rem;
    -moz-appearance: textfield;
}
.pdp-summary .quantity input.qty::-webkit-outer-spin-button,
.pdp-summary .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pdp-summary .quantity input.qty:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(0, 51, 102, 0.15);
}

.pdp-summary button.single_add_to_cart_button,
.pdp-summary .single_add_to_cart_button {
    flex: 1 1 200px;
    min-height: 48px;
    background: #FF6000 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0 1.25rem !important;
    cursor: pointer;
    transition: background-color 180ms ease, transform 120ms ease, box-shadow 200ms ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 14px -6px rgba(255, 96, 0, 0.55);
}
.pdp-summary button.single_add_to_cart_button:hover,
.pdp-summary .single_add_to_cart_button:hover {
    background: #e55600 !important;
}
.pdp-summary button.single_add_to_cart_button:active {
    transform: translateY(1px);
}
.pdp-summary button.single_add_to_cart_button:disabled,
.pdp-summary button.single_add_to_cart_button.disabled {
    background: #cbd5e1 !important;
    box-shadow: none;
    cursor: not-allowed;
}

/* Variation single-price block — same orange anchor as the static price. */
.pdp-summary .woocommerce-variation-price .price,
.pdp-summary .woocommerce-variation-price span.price {
    font-size: 1.375rem;
    color: #FF6000;
    border: 0;
    padding: 0;
    margin: 0 0 0.5rem;
}
.pdp-summary .woocommerce-variation-availability {
    margin: 0 0 0.5rem;
    color: #16a34a;
    font-size: 0.875rem;
    font-weight: 600;
}
.pdp-summary .woocommerce-variation-description { color: #334155; font-size: 0.875rem; margin: 0 0 0.75rem; }

/* Stock pill */
.pdp-summary .stock {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0.625rem 0 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.pdp-summary .stock.in-stock { color: #16a34a; }
.pdp-summary .stock.out-of-stock { color: #dc2626; }

/* Meta */
.pdp-summary .product_meta {
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid #f1f5f9;
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.7;
}
.pdp-summary .product_meta > span { display: block; }
.pdp-summary .product_meta a { color: #003366; text-decoration: none; }
.pdp-summary .product_meta a:hover { text-decoration: underline; }

/* =====================================================================
   BELOW-THE-FOLD — tabs, upsells, related (full width)
   ===================================================================== */
.pdp-after {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #f1f5f9;
}
.pdp-after .woocommerce-tabs {
    background: #ffffff;
    border: 0;
    padding: 0;
    margin: 0 0 2.5rem;
}
.pdp-after .woocommerce-tabs ul.tabs {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.pdp-after .woocommerce-tabs ul.tabs::before,
.pdp-after .woocommerce-tabs ul.tabs::after { display: none; }
.pdp-after .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.pdp-after .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 0.625rem 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #475569;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 150ms ease, border-color 150ms ease;
    margin-bottom: -0.625rem;
}
.pdp-after .woocommerce-tabs ul.tabs li a:hover { color: #003366; }
.pdp-after .woocommerce-tabs ul.tabs li.active a {
    color: #003366;
    border-bottom-color: #FF6000;
}
.pdp-after .woocommerce-tabs .panel {
    background: #ffffff;
    color: #334155;
    line-height: 1.6;
    padding: 0.5rem 0 0;
}
.pdp-after .related,
.pdp-after .upsells {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #f1f5f9;
}
.pdp-after .related > h2,
.pdp-after .upsells > h2 {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =====================================================================
   ACCESSIBILITY — reduced motion respects user preference
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pdp-gallery__track { scroll-behavior: auto; }
    .pdp-gallery__dot,
    .pdp-summary button.single_add_to_cart_button { transition: none !important; }
}

/* =====================================================================
   PDP CRO v2.6.0 — Sale badge, scarcity bar, WhatsApp CTA, trust row
   ----------------------------------------------------------------------
   All four blocks live inside the sticky `.pdp-summary` Decision Center
   from the v2.5.0 PDP rebuild. Layout sequence inside the summary:

     title  →  rating  →  PRICE (+sale badge)  →  STOCK BAR  →
     excerpt  →  variations  →  qty + ADD-TO-CART  →
     WHATSAPP CTA  →  TRUST ROW  →  meta

   Class prefix `mnt-pdp-*` keeps them visually scoped to the PDP and
   distinguishes them from the broader `.mnt-cart-*` / `.neuro-*`
   design-system primitives.
   ===================================================================== */

/* ── 1. Sale badge — appended inline to .price by filter ────────────── */
.pdp-summary .price .mnt-pdp-sale-badge,
.pdp-summary p.price .mnt-pdp-sale-badge,
.mnt-pdp-sale-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 4px 10px;
    background: #dc2626;
    color: #ffffff !important;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: 0 2px 6px -2px rgba(220, 38, 38, 0.55);
    text-decoration: none !important;
}

/* ── 2. Scarcity / Stock-level bar ──────────────────────────────────── */
.mnt-pdp-stock {
    margin: 0 0 1rem;
    padding: 0.625rem 0.75rem 0.75rem;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 10px;
}
.mnt-pdp-stock__msg {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    color: #b91c1c;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}
.mnt-pdp-stock__ico {
    flex: 0 0 14px;
    color: #dc2626;
}
.mnt-pdp-stock__num {
    color: #dc2626;
    font-weight: 800;
    font-size: 0.9375rem;
    margin: 0 1px;
}
.mnt-pdp-stock__track {
    width: 100%;
    height: 6px;
    background: #fee2e2;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.mnt-pdp-stock__fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626 0%, #f97316 100%);
    border-radius: 999px;
    position: relative;
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mnt-pdp-stock__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: mnt-pdp-stock-shimmer 1.8s linear infinite;
}
@keyframes mnt-pdp-stock-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── 3. WhatsApp CTA — high-contrast green, sits under Add-to-Cart ──── */
.mnt-pdp-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0.625rem 0 0;
    min-height: 48px;
    padding: 0 1.25rem;
    background: #25D366;
    color: #ffffff !important;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 180ms ease, transform 120ms ease, box-shadow 200ms ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 14px -6px rgba(37, 211, 102, 0.55);
}
.mnt-pdp-whatsapp:hover,
.mnt-pdp-whatsapp:focus {
    background: #1ebe5b;
    color: #ffffff !important;
    text-decoration: none !important;
}
.mnt-pdp-whatsapp:active { transform: translateY(1px); }
.mnt-pdp-whatsapp:focus-visible {
    outline: 2px solid #003366;
    outline-offset: 2px;
}
.mnt-pdp-whatsapp__ico {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #ffffff;
}

/* ── 4. Trust row — Free Delivery · Secure Bank Transfer · 1Y Warranty */
.mnt-pdp-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.875rem 0 0;
    padding: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.mnt-pdp-trust__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
    padding: 0.25rem 0.125rem;
}
.mnt-pdp-trust__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}
.mnt-pdp-trust__cell[data-tone="orange"] .mnt-pdp-trust__ico { color: #FF6000; border-color: #FFD9BF; background: #FFF6EF; }
.mnt-pdp-trust__cell[data-tone="blue"]   .mnt-pdp-trust__ico { color: #003366; border-color: #C7D7E8; background: #EEF3F9; }
.mnt-pdp-trust__cell[data-tone="green"]  .mnt-pdp-trust__ico { color: #16a34a; border-color: #BBF7D0; background: #ECFDF5; }
.mnt-pdp-trust__label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
@media (min-width: 480px) {
    .mnt-pdp-trust__label { font-size: 0.75rem; }
}

/* ── Reduced-motion users — kill the shimmer & button transitions ──── */
@media (prefers-reduced-motion: reduce) {
    .mnt-pdp-stock__fill::after { animation: none; }
    .mnt-pdp-whatsapp { transition: none; }
}

/* =====================================================================
   PDP TABS v2.7.0 — Accordion (Description / Specifications / Reviews)
   ----------------------------------------------------------------------
   Uses native <details> for zero-JS toggling + free a11y. The
   responsive default-open behavior (open on >=1024px, closed on
   mobile) is set in pdp-gallery.js so SEO crawlers still see all
   content rendered. Transitions use a CSS-only animation on
   ::details-content where supported, falling back gracefully.
   ===================================================================== */
.mnt-pdp-accordion {
    margin: 0;
    padding: 0;
}

.mnt-pdp-acc__item {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    margin: 0;
    padding: 0;
}
.mnt-pdp-acc__item:last-child {
    border-bottom: 1px solid #e2e8f0;
}

/* Hide the default disclosure marker on every browser */
.mnt-pdp-acc__item > summary,
.mnt-pdp-acc__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.125rem 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
    -webkit-user-select: none;
    transition: color 150ms ease;
}
.mnt-pdp-acc__item > summary::-webkit-details-marker { display: none; }
.mnt-pdp-acc__item > summary::marker { content: ""; }

.mnt-pdp-acc__summary:hover { color: #003366; }
.mnt-pdp-acc__summary:focus-visible {
    outline: 2px solid #FF6000;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Chevron — pure CSS, rotates when the <details> is open. */
.mnt-pdp-acc__chev {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    position: relative;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
    color: #475569;
}
.mnt-pdp-acc__chev::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 2px;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    border-radius: 1px;
}
.mnt-pdp-acc__item[open] > .mnt-pdp-acc__summary .mnt-pdp-acc__chev {
    transform: rotate(180deg);
}

/* Body — clean white canvas, normal text styles for embedded content. */
.mnt-pdp-acc__body {
    padding: 0 0.25rem 1.5rem;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.65;
}
.mnt-pdp-acc__body > :first-child { margin-top: 0; }
.mnt-pdp-acc__body > :last-child  { margin-bottom: 0; }

/* Embedded WC tab content overrides — kill any leftover headings,
   strip default Specifications table chrome, white-out backgrounds. */
.mnt-pdp-acc__body h2,
.mnt-pdp-acc__body h3.product_meta-title { display: none !important; }

.mnt-pdp-acc__body table.shop_attributes,
.mnt-pdp-acc__body table.woocommerce-product-attributes {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
    background: transparent;
}
.mnt-pdp-acc__body table.shop_attributes th,
.mnt-pdp-acc__body table.shop_attributes td,
.mnt-pdp-acc__body table.woocommerce-product-attributes th,
.mnt-pdp-acc__body table.woocommerce-product-attributes td {
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent !important;
    padding: 0.625rem 0 !important;
    font-style: normal !important;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}
.mnt-pdp-acc__body table.shop_attributes th,
.mnt-pdp-acc__body table.woocommerce-product-attributes th {
    width: 38%;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding-right: 1rem !important;
}
.mnt-pdp-acc__body table.shop_attributes tr:last-child th,
.mnt-pdp-acc__body table.shop_attributes tr:last-child td,
.mnt-pdp-acc__body table.woocommerce-product-attributes tr:last-child th,
.mnt-pdp-acc__body table.woocommerce-product-attributes tr:last-child td { border-bottom: 0 !important; }

/* The accordion replaces the old `.woocommerce-tabs` block from
   v2.5.0 — neutralize anything that accidentally leaks through. */
.pdp-after .woocommerce-tabs { display: none !important; }

/* Smooth open/close where supported (Chromium 129+, Safari 18+). */
@supports (interpolate-size: allow-keywords) {
    .mnt-pdp-acc__item {
        interpolate-size: allow-keywords;
    }
    .mnt-pdp-acc__item::details-content {
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: opacity 220ms ease, height 220ms cubic-bezier(0.22, 1, 0.36, 1), content-visibility 220ms allow-discrete;
    }
    .mnt-pdp-acc__item[open]::details-content {
        opacity: 1;
        height: auto;
    }
}

/* =====================================================================
   PDP STICKY MOBILE CTA BAR — only visible <1024px and after the user
   has scrolled past the main Add-to-Cart button.
   ===================================================================== */
.mnt-pdp-stickybar {
    /* Hidden by default. JS removes `hidden` and adds `is-visible`
       once the main Add-to-Cart button has scrolled off-screen. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--neuro-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 24px -10px rgba(15, 23, 42, 0.18);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
    pointer-events: none;
}
.mnt-pdp-stickybar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
/* Neutralize the [hidden] attribute when JS toggles `is-visible` —
   we control display via transform, not display:none, so transitions
   actually run. */
.mnt-pdp-stickybar[hidden] { display: none; }
.mnt-pdp-stickybar.is-visible { display: flex; }

/* Hide on desktop entirely — the sticky Decision Center already
   keeps the CTA in view on >=1024px. */
@media (min-width: 1024px) {
    .mnt-pdp-stickybar { display: none !important; }
}

/* Reserve scroll-space at the bottom of every product page on mobile
   so the last bit of accordion content isn't hidden behind the bar. */
@media (max-width: 1023px) {
    body.single-product.has-pdp-stickybar-visible {
        padding-bottom: calc(
            var(--neuro-bottom-nav-h, 64px)
            + 64px /* approx mnt-pdp-stickybar height */
            + env(safe-area-inset-bottom, 0px)
        );
    }
}

/* Bar children */
.mnt-pdp-stickybar__product {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none !important;
    color: #0f172a;
    background: transparent;
    padding: 0;
}
.mnt-pdp-stickybar__thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: inline-block;
}
.mnt-pdp-stickybar__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mnt-pdp-stickybar__meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    line-height: 1.2;
}
.mnt-pdp-stickybar__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.mnt-pdp-stickybar__price {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #FF6000;
    line-height: 1.2;
    display: block;
}
.mnt-pdp-stickybar__price del,
.mnt-pdp-stickybar__price del * {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.75rem;
    margin-right: 4px;
}
.mnt-pdp-stickybar__price ins {
    background: transparent;
    text-decoration: none;
}
.mnt-pdp-stickybar__price .mnt-pdp-sale-badge { display: none; } /* no room in the bar */

.mnt-pdp-stickybar__cta {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 0 1rem;
    background: #FF6000;
    color: #ffffff !important;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 180ms ease, transform 120ms ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 14px -6px rgba(255, 96, 0, 0.55);
}
.mnt-pdp-stickybar__cta:hover { background: #e55600; color: #ffffff !important; }
.mnt-pdp-stickybar__cta:active { transform: translateY(1px); }
.mnt-pdp-stickybar__cta.added::after { content: " ✓"; }
.mnt-pdp-stickybar__cta.loading {
    opacity: 0.85;
    cursor: progress;
}

/* Reduced motion — instant slide */
@media (prefers-reduced-motion: reduce) {
    .mnt-pdp-stickybar { transition: none; }
    .mnt-pdp-acc__chev { transition: none; }
}

/* Anchor span used to scroll into the main form — invisible. */
.mnt-pdp-anchor {
    display: block;
    height: 0;
    width: 0;
    overflow: hidden;
    /* Offset so the smooth-scroll lands a little above the sticky
       header instead of glued to the top. */
    scroll-margin-top: 6rem;
}

/* =====================================================================
   FOOTER SOCIAL LINKS — v2.8.0
   ----------------------------------------------------------------------
   Sits between the footer link columns and the © copyright row.
   Inline-SVG icons inherit color via `currentColor`, default to a
   muted white (we're on the navy footer), and snap to Action Orange
   (#FF6000) on hover — except for TikTok which keeps its native red
   accent on hover for instant brand recognition.
   ===================================================================== */
.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;

    /* The brief asks for at least 40px of vertical breathing room
       between the icons and the copyright text below them. */
    margin: 40px auto 32px;
    padding: 0 16px;

    /* Sit cleanly inside the navy footer; copyright bar handles its
       own border, so no extra divider needed here. */
}

.footer-social-links__item {
    /* 44×44 hit area — Apple HIG / WCAG 2.5.5 minimum tap target. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;          /* visual padding around the 24px glyph */
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    text-decoration: none !important;
    line-height: 0;
    transition: color 180ms ease, background-color 180ms ease, transform 140ms ease;
    -webkit-tap-highlight-color: rgba(255, 96, 0, 0.18);
}
.footer-social-links__item:hover,
.footer-social-links__item:focus-visible {
    color: #FF6000; /* Action Orange — the global hover token */
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}
.footer-social-links__item:focus-visible {
    outline: 2px solid #FF6000;
    outline-offset: 2px;
}
.footer-social-links__item:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.10);
}

/* Per-platform native-color hover (subtle, only kicks in on hover so
   the default state stays cohesive with the footer palette). */
.footer-social-links__item--facebook:hover,
.footer-social-links__item--facebook:focus-visible  { color: #1877F2; }
.footer-social-links__item--linkedin:hover,
.footer-social-links__item--linkedin:focus-visible  { color: #0A66C2; }
.footer-social-links__item--youtube:hover,
.footer-social-links__item--youtube:focus-visible   { color: #FF0033; }
.footer-social-links__item--tiktok:hover,
.footer-social-links__item--tiktok:focus-visible    { color: #FF6000; }
/* Instagram keeps the global Action Orange — its real brand gradient
   would clash with the navy footer at icon-size. */

/* The actual SVG glyph: 24×24 as the brief requires. */
.footer-social-links__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
}
.footer-social-links__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Mobile / tablet tweaks ---------------------------------------------- */
@media (max-width: 767px) {
    .footer-social-links {
        gap: 12px;            /* keep 44px tap targets reachable but row-snug */
        margin: 32px auto;    /* still well above the copyright row */
    }
    .footer-social-links__item {
        padding: 10px;        /* preserved 44px hit area */
    }
}

/* Z-index hygiene: the icons live inside the static footer, so they
   sit at the natural document layer (z-index: auto). The fixed
   WhatsApp button (z:60), mobile bottom nav (z:80), and PDP sticky
   bar (z:90) all stack ABOVE them — which is exactly what we want
   so the user can scroll up to the icons without the floating bars
   ever covering them in normal flow. The only requirement is to
   guarantee enough scroll-padding at the bottom so the icons aren't
   permanently hidden behind those fixed elements; that is already
   handled by the global `body { padding-bottom: ... }` rule which
   reserves room for the bottom nav + service bar + safe-area inset. */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .footer-social-links__item { transition: none; }
    .footer-social-links__item:hover,
    .footer-social-links__item:active { transform: none; }
}

/* =====================================================================
   PAGE — VOLANT DIGITAL LTD (v2.9.0)
   ----------------------------------------------------------------------
   Corporate-tech aesthetic for the parent-company sales page at
   /volant-digital-ltd/. Clean white canvas, Deep Navy authority,
   Action Orange CTAs only — same brand language as the PDP.
   Mobile-first sticky "Get Started" rides above the bottom nav.
   ===================================================================== */

/* Base typography on the page — guarantee 16px floor for legibility
   even if upstream Tailwind utilities miss a node. */
.mnt-volant {
    font-size: 16px;
    line-height: 1.6;
}
.mnt-volant p { font-size: max(16px, 1rem); }

/* Hero: subtle tech-grid background, pure CSS, zero asset cost. */
.mnt-volant__hero { isolation: isolate; }
.mnt-volant__grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 20% 0%, rgba(255, 96, 0, 0.18), transparent 55%),
        radial-gradient(circle at 90% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
    background-size: 48px 48px, 48px 48px, auto, auto;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.55) 70%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.55) 70%, transparent);
}

/* Hero CTA — same lift as the PDP buttons for muscle-memory feel. */
.mnt-volant__cta--primary { will-change: transform; }
.mnt-volant__cta--primary:hover { transform: translateY(-1px); }
.mnt-volant__cta--primary:active { transform: translateY(0); }

/* Pillar cards — subtle hover animation: lift + colored shadow +
   icon tile slides into Action Orange. Saliency without noise. */
.mnt-volant__card {
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        border-color 220ms ease;
    will-change: transform;
}
.mnt-volant__card:hover,
.mnt-volant__card:focus-within {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 14px 32px -14px rgba(0, 51, 102, 0.28);
}
.mnt-volant__card-icon {
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background-color 220ms ease;
}
.mnt-volant__card:hover .mnt-volant__card-icon {
    transform: scale(1.06) rotate(-3deg);
}

/* Global-presence market chips. */
.mnt-volant__market {
    transition:
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 200ms ease,
        box-shadow 200ms ease;
}
.mnt-volant__market:hover {
    transform: translateY(-3px);
    border-color: #003366;
    box-shadow: 0 10px 22px -12px rgba(0, 51, 102, 0.3);
}
.mnt-volant__market-flag {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mnt-volant__market:hover .mnt-volant__market-flag {
    transform: scale(1.1) rotate(-4deg);
}

/* Reduced motion — drop transforms, keep border / shadow cues. */
@media (prefers-reduced-motion: reduce) {
    .mnt-volant__card,
    .mnt-volant__card-icon,
    .mnt-volant__market,
    .mnt-volant__market-flag,
    .mnt-volant__cta--primary { transition: none; transform: none; }
    .mnt-volant__card:hover,
    .mnt-volant__market:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   STICKY MOBILE "GET STARTED" — only on this page, only <md.
   --------------------------------------------------------------------- */
.mnt-volant-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--neuro-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
    z-index: 88; /* below the bottom nav (z:80 isn't real — nav uses z auto in
                    its own stacking context; 88 sits below the PDP sticky bar
                    z:90 just in case templates ever co-render). */
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9));
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -8px 24px -10px rgba(15, 23, 42, 0.18);
    display: block;
}
@media (min-width: 768px) {
    .mnt-volant-sticky-cta { display: none !important; }
}

.mnt-volant-sticky-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px; /* tap-target generous */
    padding: 0 18px;
    background: #FF6000;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.02em;
    border-radius: 999px;
    text-decoration: none !important;
    box-shadow: 0 8px 22px -8px rgba(255, 96, 0, 0.6);
    transition: background-color 180ms ease, transform 120ms ease;
}
.mnt-volant-sticky-cta__btn:hover { background: #ff7a26; }
.mnt-volant-sticky-cta__btn:active { transform: translateY(1px); }

.mnt-volant-sticky-cta__icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

/* Reserve scroll space at the bottom of the page only on the Volant
   page so the closing CTA is never pinned under the sticky button. */
@media (max-width: 767px) {
    body.page-template-page-volant-digital-ltd,
    body.page.page-volant-digital-ltd {
        padding-bottom: calc(
            var(--neuro-bottom-nav-h, 64px)
            + 70px /* sticky CTA height incl. padding */
            + env(safe-area-inset-bottom, 0px)
        );
    }
}