@charset "UTF-8";

/* ============================================================
   AE24 CTA Widgets — v1.9.4
   Design language aligned with ae24-zones-pro:
     Primary       : #66B94A  (--ae24-primary)
     Secondary     : #00D563  (--ae24-secondary)
     Surface grad  : linear-gradient(135deg, #66B94A 0%, #00D563 100%)
     Border radius : 4px (universal)
     Card shadow   : 0 4px 36px rgba(0,0,0,0.08)
     Button hover  : ::after slide animation (matches .ae24-btn)
     Font          : Manrope
============================================================ */

/* ============================================================
   1. CTA BANNER
============================================================ */

.ae24-cta-banner {
    background: linear-gradient(135deg, #66B94A 0%, #00D563 100%);
    border-radius: 4px;
    padding: 48px 40px;
    text-align: center;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ae24-cta-banner__heading {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 14px;
    line-height: 1.3;
}

.ae24-cta-banner__subtext {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 28px;
    line-height: 1.6;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* Button — flat 4px corners, slide ::after animation like .ae24-btn */
.ae24-cta-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #66B94A;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.2s ease-in-out;
}

.ae24-cta-banner__btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    z-index: -1;
    background: rgba(102, 185, 74, 0.08);
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -4em, 0);
    transform-origin: 0% 100%;
    transition: all 0.35s ease-in-out;
}

.ae24-cta-banner__btn:hover {
    color: #66B94A;
    text-decoration: none;
    box-shadow: 0 2px 2px rgba(0,0,0,0.055),
                0 4px 4px rgba(0,0,0,0.055),
                0 8px 8px rgba(0,0,0,0.055),
                0 16px 16px rgba(0,0,0,0.055);
}

.ae24-cta-banner__btn:hover::after {
    transform: rotate3d(0, 0, 1, 0deg);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.ae24-cta-banner__btn svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

/* ============================================================
   2. EMERGENCY STRIP
============================================================ */

.ae24-emergency-strip {
    background: #f4faf0;
    border: 1px solid #cce8ba;
    border-radius: 4px;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ae24-emergency-strip__text {
    flex: 1;
    min-width: 0;
}

.ae24-emergency-strip__heading {
    font-size: 17px;
    font-weight: 700;
    color: #221f1f;
    margin: 0 0 4px;
    line-height: 1.3;
}

.ae24-emergency-strip__subtext {
    font-size: 14px;
    font-weight: 400;
    color: #4d4d4d;
    margin: 0;
    line-height: 1.5;
}

.ae24-emergency-strip__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #66B94A;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.05);
}

.ae24-emergency-strip__btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #66B94A 0%, #00D563 100%);
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -4em, 0);
    transform-origin: 0% 100%;
    transition: all 0.35s ease-in-out;
}

.ae24-emergency-strip__btn:hover {
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 2px 2px rgba(0,0,0,0.055),
                0 4px 4px rgba(0,0,0,0.055),
                0 8px 8px rgba(0,0,0,0.055),
                0 16px 16px rgba(0,0,0,0.055);
}

.ae24-emergency-strip__btn:hover::after {
    transform: rotate3d(0, 0, 1, 0deg);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.ae24-emergency-strip__btn svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* ============================================================
   3. BOOKING CARD
   Specificity: .elementor-widget-ae24-booking-card prefix beats
   theme styles without !important on structural properties.
   !important reserved for <a> color/decoration theme overrides only.
============================================================ */

.elementor-widget-ae24-booking-card .ae24-bc {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 36px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: box-shadow 0.2s ease-in-out;
}

.elementor-widget-ae24-booking-card .ae24-bc:hover {
    box-shadow: 0 4px 60px rgba(0, 0, 0, 0.16);
}

/* Header band */
.elementor-widget-ae24-booking-card .ae24-bc__header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #66B94A 0%, #00D563 100%);
    padding: 16px 20px;
    color: #ffffff;
}

.elementor-widget-ae24-booking-card .ae24-bc__header-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.9;
}

.elementor-widget-ae24-booking-card .ae24-bc__header-icon svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
}

.elementor-widget-ae24-booking-card .ae24-bc__header-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

/* Body */
.elementor-widget-ae24-booking-card .ae24-bc__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* SEO paragraph */
.elementor-widget-ae24-booking-card .ae24-bc__seo-text {
    font-size: 14px;
    line-height: 1.7;
    color: #4d4d4d;
    margin: 0;
    padding: 0 0 4px;
    border-bottom: 1px solid #e6e9eb;
}

.elementor-widget-ae24-booking-card .ae24-bc__seo-text p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.elementor-widget-ae24-booking-card .ae24-bc__seo-text strong {
    font-weight: 700;
    color: #221f1f;
}

/* Links in SEO text — mirrors the theme's a.link:after pattern exactly.
   Plain <a> tags from the Elementor WYSIWYG don't have class="link" so they
   never get the theme's ::after; we replicate it here at a readable opacity. */
.elementor-widget-ae24-booking-card .ae24-bc__seo-text a,
.elementor-widget-ae24-booking-card .ae24-bc__seo-text a:visited {
    color: #66B94A;
    text-decoration: none;
    display: inline-block;    /* required for ::after position:absolute to work */
    position: relative;
    transition: color 0.2s ease-in-out;
}

.elementor-widget-ae24-booking-card .ae24-bc__seo-text a:hover {
    color: #4e9a34;
    text-decoration: none;
}

/* ::after underline — same geometry as theme's a.link:after.
   opacity raised to 0.35 so it is actually visible against the white card;
   border-bottom:1px solid inherits currentColor (#66B94A). */
.elementor-widget-ae24-booking-card .ae24-bc__seo-text a::after {
    content: "";
    height: 0;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 1px;
    border-bottom: 1px solid;
    opacity: 0.35;
    transition: width 0.2s ease-in-out 0s;
}

/* Hover: sweep underline away from the right — identical to a.link:hover:after */
.elementor-widget-ae24-booking-card .ae24-bc__seo-text a:hover::after {
    right: 0;
    left: auto;
    width: 0;
}

/* a.link — theme's a.link:after rule is lower specificity so our rule above wins;
   keep display+position so layout is unchanged. No extra overrides needed. */
.elementor-widget-ae24-booking-card .ae24-bc__seo-text a.link {
    display: inline-block;
    position: relative;
}

/* Tel-pill + link-pill carry a full pill border — suppress the ::after underline. */
.elementor-widget-ae24-booking-card .ae24-bc__seo-text a[href^="tel"]::after,
.elementor-widget-ae24-booking-card .ae24-bc__seo-text a.link-pill::after {
    display: none;
}

/* Phone pill in SEO text */
.elementor-widget-ae24-booking-card .ae24-bc__seo-text a[href^="tel"],
.elementor-widget-ae24-booking-card .ae24-bc__seo-text a[href^="tel"]:visited {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: rgba(102, 185, 74, 0.08) !important;
    border: 1px solid rgba(102, 185, 74, 0.3) !important;
    border-radius: 4px;
    padding: 0 7px !important;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.8;
}

.elementor-widget-ae24-booking-card .ae24-bc__seo-text a[href^="tel"]:hover {
    background: rgba(102, 185, 74, 0.15) !important;
    border-color: #66B94A !important;
}

/* Phone row — entire row is clickable (stretched-link over the number's <a>) */
.elementor-widget-ae24-booking-card .ae24-bc__phone-row {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(102, 185, 74, 0.06);
    border: 1px solid rgba(102, 185, 74, 0.22);
    border-radius: 12px;
    padding: 14px 16px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.elementor-widget-ae24-booking-card .ae24-bc__phone-row:hover {
    background: rgba(102, 185, 74, 0.12);
    border-color: #66B94A;
    transform: translateY(-2px);
}

.elementor-widget-ae24-booking-card .ae24-bc__phone-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 4px;
    background: rgba(102, 185, 74, 0.15);
    color: #66B94A;
    flex-shrink: 0;
}

.elementor-widget-ae24-booking-card .ae24-bc__phone-icon-wrap svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.elementor-widget-ae24-booking-card .ae24-bc__phone-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.elementor-widget-ae24-booking-card .ae24-bc__phone-label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

/* Phone number link */
.elementor-widget-ae24-booking-card .ae24-bc__phone-number,
.elementor-widget-ae24-booking-card .ae24-bc__phone-number:visited {
    font-size: 18px;
    font-weight: 800;
    color: #66B94A !important;
    line-height: 1.2;
    text-decoration: none !important;
    display: block;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.elementor-widget-ae24-booking-card .ae24-bc__phone-number:hover {
    color: #4e9a34 !important;
    text-decoration: none !important;
}

/* Stretched link: the number's <a> covers the whole .ae24-bc__phone-row,
   so a tap/click anywhere in the row triggers the tel: link. */
.elementor-widget-ae24-booking-card .ae24-bc__phone-number::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Booking button — flat 4px, slide animation */
.elementor-widget-ae24-booking-card .ae24-bc__booking-btn,
.elementor-widget-ae24-booking-card .ae24-bc__booking-btn:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #66B94A !important;
    border-radius: 12px;
    padding: 12px 16px !important;
    font-size: 14px;
    font-weight: 600;
    color: #66B94A !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease-in-out;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.elementor-widget-ae24-booking-card .ae24-bc__booking-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #66B94A 0%, #00D563 100%);
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -4em, 0);
    transform-origin: 0% 100%;
    transition: all 0.35s ease-in-out;
}

.elementor-widget-ae24-booking-card .ae24-bc__booking-btn:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.055),
                0 4px 4px rgba(0,0,0,0.055),
                0 8px 8px rgba(0,0,0,0.055),
                0 16px 16px rgba(0,0,0,0.055) !important;
}

.elementor-widget-ae24-booking-card .ae24-bc__booking-btn:hover::after {
    transform: rotate3d(0, 0, 1, 0deg);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.elementor-widget-ae24-booking-card .ae24-bc__booking-arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.elementor-widget-ae24-booking-card .ae24-bc__booking-arrow svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Info badges */
.elementor-widget-ae24-booking-card .ae24-bc__badges {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 6px;
    border-top: 1px solid #e6e9eb;
}

.elementor-widget-ae24-booking-card .ae24-bc__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #66B94A;
    background: rgba(102, 185, 74, 0.08);
    border-radius: 4px;
    padding: 6px 10px;
    line-height: 1.3;
}

.elementor-widget-ae24-booking-card .ae24-bc__badge svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
    opacity: 0.75;
}

/* Tablet 500–768px: the card is wide here, so place the two info badges
   side by side (each fills half) instead of stacked. Below 500 / above 768
   they stay stacked (the default). */
@media (min-width: 500px) and (max-width: 768px) {
    .elementor-widget-ae24-booking-card .ae24-bc__badges {
        flex-direction: row;
    }
    .elementor-widget-ae24-booking-card .ae24-bc__badge {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ============================================================
   4. APPLIANCE HERO (Brand Hero layout) — 18 card variants
   Green gradient sidebar + light card panel.
   Design tokens: 20px card radius / 16px button radius.

   Card Style selector via data-card="<id>":
     LEGACY (4)   c0 · c1 · c5 · v3
     IMPROVED (4) i0 · i1 · i5 · i3   (refined legacy + 20px radius)
     NEW (10)     n1 Ghost Outline · n2 Aurora Corner · n3 Minimal Pulse
                  n4 Magazine Fusion · n5 Floating Icon · n6 Glass Frosted
                  n7 Speed Ribbon · n8 Perforated Ticket · n9 Paper Stack
                  n10 Dual-Tone Split

   Optional toggle data-hover-line="on|off" — applies to c0/i0 only.
============================================================ */

.ae24-bh {
    --ae24bh-primary:   #66B94A;
    --ae24bh-secondary: #3d8f2a;
    --ae24bh-dark:      #1a1a1a;
    --ae24bh-card-r:    20px;
    --ae24bh-btn-r:     16px;
    --ae24bh-border:    #eceae4;

    display: grid;
    grid-template-columns: 40% 60%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 20px 60px rgba(102,185,74,.18);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1a1a1a;
    box-sizing: border-box;
    position: relative;
}

.ae24-bh *,
.ae24-bh *::before,
.ae24-bh *::after {
    box-sizing: border-box;
}

/* ── LEFT SIDEBAR (D2 — green gradient with dot pattern) ── */
.ae24-bh__left {
    padding: 44px 36px 36px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255,255,255,.08) 0%, transparent 60%),
        linear-gradient(160deg, var(--ae24bh-primary) 0%, var(--ae24bh-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.ae24-bh__left::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
    pointer-events: none;
}

.ae24-bh__left::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
    background-size: 22px 22px;
    opacity: .5;
    pointer-events: none;
}

.ae24-bh__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 7px 14px 7px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    width: fit-content;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,.12);
    position: relative;
    z-index: 1;
}

.ae24-bh__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    position: relative;
}

.ae24-bh__badge-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    animation: ae24bh-pulse 1.6s ease-out infinite;
}

@keyframes ae24bh-pulse {
    0%   { transform: scale(.5); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

.ae24-bh__heading {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 0 0 14px;
    position: relative;
    z-index: 1;
}

.ae24-bh__sub {
    font-size: 13px;
    color: rgba(255,255,255,.78);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 300px;
    position: relative;
    z-index: 1;
}

.ae24-bh__stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.ae24-bh__stat {
    padding: 14px 10px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    text-align: center;
}

.ae24-bh__stat-num {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.ae24-bh__stat-label {
    font-size: 9px;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    margin-top: 4px;
    line-height: 1.3;
}

.ae24-bh__phone {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #1a1a1a;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    transition: transform .25s;
}

.ae24-bh__phone:hover {
    transform: translateY(-1px);
    color: #fff;
}

.ae24-bh__phone-ico {
    width: 38px;
    height: 38px;
    background: var(--ae24bh-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ae24-bh__phone-ico svg {
    width: 17px;
    height: 17px;
    stroke: #fff;
}

.ae24-bh__phone-text {
    flex: 1;
    min-width: 0;
}

.ae24-bh__phone-label {
    font-size: 10px;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    display: block;
    margin-bottom: 2px;
}

.ae24-bh__phone-num {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.01em;
    display: block;
}

/* ── RIGHT GRID (D2 — light grey panel with 2x2 cards) ──── */
.ae24-bh__right {
    background: #f6f6f3;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
}

/* ── CARD BASE (locked typography + 20px radius — shared) ── */
.ae24-bh__card {
    background: #fff;
    border-radius: var(--ae24bh-card-r);
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    cursor: pointer;
    color: #1a1a1a;
    text-decoration: none;
    border: 1px solid var(--ae24bh-border);
    transition: transform .35s cubic-bezier(.22,1,.36,1),
                box-shadow .35s cubic-bezier(.22,1,.36,1),
                border-color .25s, background .25s;
    overflow: hidden;
    isolation: isolate;
}

.ae24-bh__card-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ae24bh-primary);
    background: rgba(102,185,74,.10);
    padding: 4px 9px;
    border-radius: 50px;
    border: 1px solid rgba(102,185,74,.22);
    z-index: 2;
}

.ae24-bh__card-num {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    font-weight: 900;
}

.ae24-bh__card-icon-wrap {
    width: 44px;
    height: 44px;
    color: #1a1a1a;
    transition: color .25s, background .25s, border-color .25s, transform .25s;
    margin-bottom: 2px;
    margin-left: -7px;   /* compensate SVG viewBox left padding (rect x=7/48) */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}

.ae24-bh__card-icon-wrap svg {
    width: 44px;
    height: 44px;
}

/* Fridge SVG is slimmer (rect x=10 vs x=7) — extra offset on 3rd card */
.ae24-bh__right > .ae24-bh__card:nth-child(3) .ae24-bh__card-icon-wrap {
    margin-left: -10px;
}

.ae24-bh__card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ae24-bh__card-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -.012em;
    line-height: 1.28;
    margin: 0;
}

.ae24-bh__card-hint {
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7280;
    line-height: 1.45;
    margin: 0;
}

.ae24-bh__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ae24bh-primary);
    letter-spacing: .01em;
    margin-top: 10px;
}

.ae24-bh__card-cta-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform .25s;
}

.ae24-bh__card-cta-arrow svg {
    width: 14px;
    height: 14px;
}

.ae24-bh__card:hover .ae24-bh__card-cta-arrow {
    transform: translateX(3px);
}

/* card-inner: display:contents for legacy/improved cards
   (layout-transparent), overridden to flex for variants
   that need an inner padded region (v3/i3/n4/n8/n10).   */
.ae24-bh__card-inner {
    display: contents;
}

.ae24-bh__card-meta {
    display: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--ae24bh-primary, #66B94A);
    letter-spacing: .01em;
}

/* ════════════════════════════════════════════════════════════
   LEGACY · C0 · Original prototype card
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="c0"] .ae24-bh__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ae24bh-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    z-index: 3;
}
.ae24-bh[data-card="c0"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(102,185,74,.18);
}
.ae24-bh[data-card="c0"] .ae24-bh__card:hover::before { transform: scaleX(1); }
.ae24-bh[data-card="c0"] .ae24-bh__card:hover .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="c0"] .ae24-bh__card-cta {
    opacity: 0;
    transform: translateX(-6px);
    transition: all .3s;
}
.ae24-bh[data-card="c0"] .ae24-bh__card:hover .ae24-bh__card-cta { opacity: 1; transform: translateX(0); }

/* ════════════════════════════════════════════════════════════
   LEGACY · C1 · Footer CTA bar
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="c1"] .ae24-bh__card {
    padding-bottom: 0;
    gap: 6px;
}
.ae24-bh[data-card="c1"] .ae24-bh__card-icon-wrap,
.ae24-bh[data-card="c1"] .ae24-bh__card-icon-wrap svg { width: 44px; height: 44px; }
.ae24-bh[data-card="c1"] .ae24-bh__card-cta {
    margin: 14px -20px 0;
    padding: 12px 20px;
    background: rgba(102,185,74,.08);
    border-top: 1px solid rgba(102,185,74,.18);
    transition: background .25s, color .25s;
}
.ae24-bh[data-card="c1"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(102,185,74,.18);
}
.ae24-bh[data-card="c1"] .ae24-bh__card:hover .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="c1"] .ae24-bh__card:hover .ae24-bh__card-cta {
    background: var(--ae24bh-primary);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════
   LEGACY · C5 · Hover glow lift
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="c5"] .ae24-bh__card {
    box-shadow: 0 6px 16px rgba(0,0,0,.05);
    border-color: #ececea;
}
.ae24-bh[data-card="c5"] .ae24-bh__card-icon-wrap,
.ae24-bh[data-card="c5"] .ae24-bh__card-icon-wrap svg { width: 44px; height: 44px; }
.ae24-bh[data-card="c5"] .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="c5"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(102,185,74,.28);
}

/* ════════════════════════════════════════════════════════════
   LEGACY · V3 · Editorial Number
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="v3"] .ae24-bh__card { padding: 0; gap: 0; }
.ae24-bh[data-card="v3"] .ae24-bh__card-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 20px;
    min-height: 190px;
    gap: 8px;
}
.ae24-bh[data-card="v3"] .ae24-bh__card-tag { display: none; }
.ae24-bh[data-card="v3"] .ae24-bh__card-num {
    display: block;
    position: absolute;
    top: 4px;
    right: 16px;
    font-size: 86px;
    font-weight: 900;
    color: rgba(102,185,74,.1);
    line-height: .9;
    letter-spacing: -.04em;
    transition: color .25s;
    z-index: 0;
}
.ae24-bh[data-card="v3"] .ae24-bh__card-icon-wrap {
    width: 46px;
    height: 46px;
    align-self: flex-start;
    color: var(--ae24bh-primary);
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}
.ae24-bh[data-card="v3"] .ae24-bh__card-icon-wrap svg { width: 44px; height: 44px; }
.ae24-bh[data-card="v3"] .ae24-bh__card-body { position: relative; z-index: 1; }
.ae24-bh[data-card="v3"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="v3"] .ae24-bh__card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0;
    padding: 13px 24px;
    background: transparent;
    border-top: 1px dashed #e8e8e6;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: none;
    letter-spacing: 0;
    transition: border-color .25s, color .25s;
}
.ae24-bh[data-card="v3"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(102,185,74,.3);
}
.ae24-bh[data-card="v3"] .ae24-bh__card:hover .ae24-bh__card-num { color: rgba(102,185,74,.22); }
.ae24-bh[data-card="v3"] .ae24-bh__card:hover .ae24-bh__card-cta {
    border-top-style: solid;
    border-top-color: var(--ae24bh-primary);
    color: var(--ae24bh-primary);
}

/* ════════════════════════════════════════════════════════════
   IMPROVED · I0 · Original Refined — 20px radius, optional top-line
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="i0"] .ae24-bh__card { padding: 22px; }
.ae24-bh[data-card="i0"] .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="i0"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="i0"] .ae24-bh__card-cta {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .3s, transform .3s;
}
.ae24-bh[data-card="i0"] .ae24-bh__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #66B94A, #00D563);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    z-index: 3;
    border-radius: var(--ae24bh-card-r) var(--ae24bh-card-r) 0 0;
}
.ae24-bh[data-card="i0"] .ae24-bh__card:hover {
    border-color: rgba(102,185,74,.4);
    transform: translateY(-4px);
    box-shadow: 0 2px 8px rgba(0,0,0,.03), 0 18px 36px -14px rgba(102,185,74,.28);
}
.ae24-bh[data-card="i0"] .ae24-bh__card:hover .ae24-bh__card-cta {
    opacity: 1;
    transform: translateX(0);
}
/* top-line only shows when toggled on via [data-hover-line="on"] */
.ae24-bh[data-hover-line="on"][data-card="i0"] .ae24-bh__card:hover::before { transform: scaleX(1); }
/* legacy c0 also respects the toggle (when "off", suppress top line) */
.ae24-bh[data-hover-line="off"][data-card="c0"] .ae24-bh__card:hover::before { transform: scaleX(0); }

/* ════════════════════════════════════════════════════════════
   IMPROVED · I1 · Footer CTA Refined — gradient hover, cleaner
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="i1"] .ae24-bh__card {
    padding: 22px 22px 0;
    gap: 8px;
}
.ae24-bh[data-card="i1"] .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="i1"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="i1"] .ae24-bh__card-cta {
    width: auto;
    margin: 16px -22px 0;
    padding: 14px 22px;
    background: #fafaf8;
    border-top: 1px solid var(--ae24bh-border);
    justify-content: space-between;
    color: #1a1a1a;
    transition: background .3s, color .3s, border-color .3s;
    display: flex;
}
.ae24-bh[data-card="i1"] .ae24-bh__card-cta-text { display: flex; }
.ae24-bh[data-card="i1"] .ae24-bh__card:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -14px rgba(102,185,74,.3);
}
.ae24-bh[data-card="i1"] .ae24-bh__card:hover .ae24-bh__card-cta {
    background: linear-gradient(95deg, #66B94A 0%, #3d8f2a 100%);
    color: #fff;
    border-top-color: transparent;
}

/* ════════════════════════════════════════════════════════════
   IMPROVED · I5 · Glow Refined — softer diffuse, ring halo
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="i5"] .ae24-bh__card {
    padding: 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
    border-color: #f0efeb;
}
.ae24-bh[data-card="i5"] .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="i5"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="i5"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-6px);
    box-shadow:
        0 2px 8px rgba(0,0,0,.04),
        0 24px 52px -16px rgba(102,185,74,.4),
        0 0 0 4px rgba(102,185,74,.08);
}

/* ════════════════════════════════════════════════════════════
   IMPROVED · I3 · Editorial Refined — outlined stroke number
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="i3"] .ae24-bh__card { padding: 0; gap: 0; }
.ae24-bh[data-card="i3"] .ae24-bh__card-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 18px;
    min-height: 198px;
    gap: 10px;
    position: relative;
}
.ae24-bh[data-card="i3"] .ae24-bh__card-tag {
    top: 18px;
    left: 22px;
    right: auto;
}
.ae24-bh[data-card="i3"] .ae24-bh__card-num {
    display: block;
    position: absolute;
    top: -6px;
    right: 14px;
    font-size: 96px;
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(102,185,74,.22);
    transition: -webkit-text-stroke-color .3s;
    z-index: 0;
}
.ae24-bh[data-card="i3"] .ae24-bh__card-icon-wrap {
    margin-top: 30px;
    color: var(--ae24bh-primary);
    position: relative;
    z-index: 1;
}
.ae24-bh[data-card="i3"] .ae24-bh__card-body { position: relative; z-index: 1; }
.ae24-bh[data-card="i3"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="i3"] .ae24-bh__card-cta {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 12px 22px;
    border-top: 1px solid var(--ae24bh-border);
    justify-content: space-between;
    color: #1a1a1a;
    transition: color .25s, border-color .25s;
}
.ae24-bh[data-card="i3"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -14px rgba(102,185,74,.3);
}
.ae24-bh[data-card="i3"] .ae24-bh__card:hover .ae24-bh__card-num { -webkit-text-stroke-color: rgba(102,185,74,.55); }
.ae24-bh[data-card="i3"] .ae24-bh__card:hover .ae24-bh__card-cta { color: var(--ae24bh-primary); border-top-color: rgba(102,185,74,.35); }

/* ════════════════════════════════════════════════════════════
   NEW · N1 · Ghost Outline — conic gradient mask border on hover
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n1"] .ae24-bh__card {
    padding: 22px;
    border: 1.5px solid #ebeae4;
}
.ae24-bh[data-card="n1"] .ae24-bh__card-icon-wrap { color: #1a1a1a; }
.ae24-bh[data-card="n1"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n1"] .ae24-bh__card::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from 120deg, #66B94A, #00D563, #3d8f2a, #66B94A, #00D563);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s;
    z-index: 0;
    pointer-events: none;
}
.ae24-bh[data-card="n1"] .ae24-bh__card:hover::before { opacity: 1; }
.ae24-bh[data-card="n1"] .ae24-bh__card:hover {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -16px rgba(102,185,74,.3), 0 0 24px rgba(102,185,74,.12);
}
.ae24-bh[data-card="n1"] .ae24-bh__card:hover .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }

/* ════════════════════════════════════════════════════════════
   NEW · N2 · Aurora Corner — radial glow blob expanding
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n2"] .ae24-bh__card { padding: 22px; }
.ae24-bh[data-card="n2"] .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="n2"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n2"] .ae24-bh__card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102,185,74,.28) 0%, rgba(0,213,99,.14) 40%, rgba(102,185,74,0) 70%);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    z-index: 0;
    pointer-events: none;
}
.ae24-bh[data-card="n2"] .ae24-bh__card-inner,
.ae24-bh[data-card="n2"] .ae24-bh__card-tag,
.ae24-bh[data-card="n2"] .ae24-bh__card-icon-wrap,
.ae24-bh[data-card="n2"] .ae24-bh__card-body,
.ae24-bh[data-card="n2"] .ae24-bh__card-cta { position: relative; z-index: 1; }
.ae24-bh[data-card="n2"] .ae24-bh__card:hover::before { transform: scale(1.9); }
.ae24-bh[data-card="n2"] .ae24-bh__card:hover {
    border-color: rgba(102,185,74,.45);
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -14px rgba(102,185,74,.25);
}

/* ════════════════════════════════════════════════════════════
   NEW · N3 · Minimal Pulse — animated status dot, pill CTA
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n3"] .ae24-bh__card {
    padding: 22px;
    border-color: #f0efeb;
}
.ae24-bh[data-card="n3"] .ae24-bh__card-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    top: 18px; left: 22px; right: auto;
    background: transparent;
    border: none;
    padding: 0;
    color: #9ca3af;
}
.ae24-bh[data-card="n3"] .ae24-bh__card-tag::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: #66B94A;
    box-shadow: 0 0 0 0 rgba(102,185,74,.5);
    animation: ae24bh-n3pulse 1.8s infinite;
}
@keyframes ae24bh-n3pulse {
    0%   { box-shadow: 0 0 0 0 rgba(102,185,74,.55); }
    70%  { box-shadow: 0 0 0 9px rgba(102,185,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(102,185,74,0); }
}
.ae24-bh[data-card="n3"] .ae24-bh__card-icon-wrap {
    margin-top: 16px;
    color: #1a1a1a;
}
.ae24-bh[data-card="n3"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n3"] .ae24-bh__card-cta {
    align-self: flex-start;
    padding: 8px 14px;
    background: rgba(102,185,74,.1);
    border-radius: var(--ae24bh-btn-r);
    transition: background .3s, color .3s, padding .3s;
}
.ae24-bh[data-card="n3"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -12px rgba(102,185,74,.24);
}
.ae24-bh[data-card="n3"] .ae24-bh__card:hover .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="n3"] .ae24-bh__card:hover .ae24-bh__card-cta {
    background: var(--ae24bh-primary);
    color: #fff;
    padding: 8px 18px;
}

/* ════════════════════════════════════════════════════════════
   NEW · N4 · Magazine Fusion — gradient-clipped number + top line
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n4"] .ae24-bh__card { padding: 0; gap: 0; }
.ae24-bh[data-card="n4"] .ae24-bh__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #66B94A 0%, #00D563 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    z-index: 3;
    border-radius: var(--ae24bh-card-r) var(--ae24bh-card-r) 0 0;
}
.ae24-bh[data-card="n4"] .ae24-bh__card:hover::before { transform: scaleX(1); }
.ae24-bh[data-card="n4"] .ae24-bh__card-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 22px 18px;
    min-height: 200px;
    gap: 10px;
    position: relative;
}
.ae24-bh[data-card="n4"] .ae24-bh__card-tag { display: none; }
.ae24-bh[data-card="n4"] .ae24-bh__card-num {
    display: block;
    position: absolute;
    top: 10px; right: 20px;
    font-size: 76px;
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, rgba(102,185,74,.20) 0%, rgba(0,213,99,.06) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    z-index: 0;
}
.ae24-bh[data-card="n4"] .ae24-bh__card-icon-wrap {
    color: var(--ae24bh-primary);
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}
.ae24-bh[data-card="n4"] .ae24-bh__card-body { position: relative; z-index: 1; }
.ae24-bh[data-card="n4"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n4"] .ae24-bh__card-cta {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 12px 22px;
    border-top: 1px solid var(--ae24bh-border);
    justify-content: space-between;
    color: #1a1a1a;
    transition: color .25s, border-color .25s;
}
.ae24-bh[data-card="n4"] .ae24-bh__card:hover {
    border-color: rgba(102,185,74,.35);
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -14px rgba(102,185,74,.26);
}
.ae24-bh[data-card="n4"] .ae24-bh__card:hover .ae24-bh__card-cta { color: var(--ae24bh-primary); border-top-color: rgba(102,185,74,.3); }

/* ════════════════════════════════════════════════════════════
   NEW · N5 · Floating Icon Circle — icon overhangs above card
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n5"] .ae24-bh__card {
    padding: 42px 20px 20px;
    text-align: center;
    overflow: visible;
}
.ae24-bh[data-card="n5"] .ae24-bh__card-tag { top: 14px; right: 14px; }
.ae24-bh[data-card="n5"] .ae24-bh__card-icon-wrap {
    position: absolute;
    top: -24px; left: 50%;
    transform: translateX(-50%);
    width: 54px; height: 54px;
    background: #fff;
    border: 1.5px solid var(--ae24bh-border);
    border-radius: 50%;
    color: var(--ae24bh-primary);
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.12);
    margin: 0;
    transition: transform .3s, background .3s, color .3s, box-shadow .3s, border-color .3s;
}
.ae24-bh[data-card="n5"] .ae24-bh__card-icon-wrap svg { width: 28px; height: 28px; }
.ae24-bh[data-card="n5"] .ae24-bh__card-body { align-items: center; gap: 5px; }
.ae24-bh[data-card="n5"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n5"] .ae24-bh__card-cta { align-self: center; margin-top: 8px; }
.ae24-bh[data-card="n5"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -14px rgba(102,185,74,.28);
}
.ae24-bh[data-card="n5"] .ae24-bh__card:hover .ae24-bh__card-icon-wrap {
    background: linear-gradient(135deg, #66B94A 0%, #00D563 100%);
    color: #fff;
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 12px 22px -4px rgba(102,185,74,.5);
    border-color: transparent;
}

/* ════════════════════════════════════════════════════════════
   NEW · N6 · Glass Frosted — semi-transparent + backdrop blur
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n6"] .ae24-bh__right {
    background: linear-gradient(135deg, #e8f3e1 0%, #f6f6f3 45%, #dbecd1 100%);
}
.ae24-bh[data-card="n6"] .ae24-bh__card {
    padding: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.48) 100%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-color: rgba(255,255,255,.85);
    box-shadow:
        0 8px 24px -12px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
}
.ae24-bh[data-card="n6"] .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="n6"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n6"] .ae24-bh__card:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.65) 100%);
    border-color: rgba(102,185,74,.4);
    transform: translateY(-3px);
    box-shadow:
        0 14px 30px -12px rgba(102,185,74,.22),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* ════════════════════════════════════════════════════════════
   NEW · N7 · Speed Ribbon — diagonal corner ribbon
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n7"] .ae24-bh__card { padding: 22px; }
.ae24-bh[data-card="n7"] .ae24-bh__card-tag { display: none; }
.ae24-bh[data-card="n7"] .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="n7"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n7"] .ae24-bh__card::before {
    content: '24h';
    position: absolute;
    top: 16px; right: -30px;
    width: 110px;
    background: linear-gradient(90deg, #66B94A 0%, #3d8f2a 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 5px 0;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px -4px rgba(61,143,42,.5);
    z-index: 2;
}
.ae24-bh[data-card="n7"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(102,185,74,.26);
}

/* ════════════════════════════════════════════════════════════
   NEW · N8 · Perforated Ticket — dashed divider with notches
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n8"] .ae24-bh__card { padding: 0; gap: 0; }
.ae24-bh[data-card="n8"] .ae24-bh__card-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 16px;
    gap: 10px;
}
.ae24-bh[data-card="n8"] .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="n8"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n8"] .ae24-bh__card-cta {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 14px 22px;
    border-top: 1.5px dashed #d4d3cd;
    justify-content: space-between;
    background: #fafaf8;
    color: #1a1a1a;
    transition: background .25s, color .25s, border-color .25s;
}
.ae24-bh[data-card="n8"] .ae24-bh__card-cta::before,
.ae24-bh[data-card="n8"] .ae24-bh__card-cta::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #f6f6f3;
    border: 1px solid var(--ae24bh-border);
}
.ae24-bh[data-card="n8"] .ae24-bh__card-cta::before { left: -10px; }
.ae24-bh[data-card="n8"] .ae24-bh__card-cta::after  { right: -10px; }
.ae24-bh[data-card="n8"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(102,185,74,.22);
}
.ae24-bh[data-card="n8"] .ae24-bh__card:hover .ae24-bh__card-cta {
    background: rgba(102,185,74,.09);
    color: var(--ae24bh-primary);
    border-top-color: rgba(102,185,74,.45);
}

/* ════════════════════════════════════════════════════════════
   NEW · N9 · Paper Stack — layered offset shadow stack
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n9"] .ae24-bh__card {
    padding: 22px;
    box-shadow:
        3px 3px 0 -1px #fff,
        3px 3px 0 0 var(--ae24bh-border),
        6px 6px 0 -1px #fff,
        6px 6px 0 0 var(--ae24bh-border);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .25s;
}
.ae24-bh[data-card="n9"] .ae24-bh__card-icon-wrap { color: var(--ae24bh-primary); }
.ae24-bh[data-card="n9"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n9"] .ae24-bh__card:hover {
    transform: translate(-3px, -3px);
    border-color: var(--ae24bh-primary);
    box-shadow:
        3px 3px 0 -1px #fff,
        3px 3px 0 0 rgba(102,185,74,.45),
        6px 6px 0 -1px #fff,
        6px 6px 0 0 rgba(102,185,74,.22),
        10px 10px 22px -8px rgba(102,185,74,.3);
}

/* ════════════════════════════════════════════════════════════
   NEW · N10 · Dual-Tone Split — horizontal split, number straddles
   ════════════════════════════════════════════════════════════ */
.ae24-bh[data-card="n10"] .ae24-bh__card {
    padding: 0; gap: 0;
    background: linear-gradient(to bottom, #fff 0%, #fff 62%, #eef6e8 62%, #e6f1dd 100%);
}
.ae24-bh[data-card="n10"] .ae24-bh__card-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 14px;
    min-height: 190px;
    gap: 10px;
    position: relative;
}
.ae24-bh[data-card="n10"] .ae24-bh__card-tag { display: none; }
.ae24-bh[data-card="n10"] .ae24-bh__card-num {
    display: block;
    position: absolute;
    top: 50%; right: 20px;
    font-size: 78px;
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.05em;
    color: rgba(102,185,74,.2);
    transform: translateY(-52%);
    transition: color .3s;
    z-index: 0;
}
.ae24-bh[data-card="n10"] .ae24-bh__card-icon-wrap {
    color: var(--ae24bh-primary);
    position: relative;
    z-index: 1;
}
.ae24-bh[data-card="n10"] .ae24-bh__card-body { position: relative; z-index: 1; }
.ae24-bh[data-card="n10"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="n10"] .ae24-bh__card-cta {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 12px 22px;
    background: transparent;
    justify-content: space-between;
    color: #1a1a1a;
    transition: color .25s;
}
.ae24-bh[data-card="n10"] .ae24-bh__card:hover {
    border-color: var(--ae24bh-primary);
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -14px rgba(102,185,74,.3);
}
.ae24-bh[data-card="n10"] .ae24-bh__card:hover .ae24-bh__card-num { color: rgba(102,185,74,.38); }
.ae24-bh[data-card="n10"] .ae24-bh__card:hover .ae24-bh__card-cta { color: var(--ae24bh-primary); }

/* ────────────────────────────────────────────────────────────
   EDITORIAL FAMILY · derived from V3 Legacy
     E1 Compact · E2 Grid · E3 Row · E4 Magazine · E5 Premium
──────────────────────────────────────────────────────────── */

/* ── E1 · EDITORIAL COMPACT — tight rhythm, dense editorial ── */
.ae24-bh[data-card="e1"] .ae24-bh__card { padding: 0; gap: 0; }
.ae24-bh[data-card="e1"] .ae24-bh__card-inner {
    display: flex; flex-direction: column; flex: 1;
    padding: 16px 18px 12px;
    min-height: 150px;
    gap: 4px;
}
.ae24-bh[data-card="e1"] .ae24-bh__card-tag,
.ae24-bh[data-card="e1"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="e1"] .ae24-bh__card-num {
    display: block; position: absolute;
    top: 4px; right: 14px;
    font-size: 58px; font-weight: 900;
    color: rgba(102,185,74,.08);
    line-height: .9; letter-spacing: -.04em;
    transition: color .25s; z-index: 0;
}
.ae24-bh[data-card="e1"] .ae24-bh__card-icon-wrap {
    width: 40px; height: 40px; margin-bottom: 2px;
    color: #66B94A; position: relative; z-index: 1;
}
.ae24-bh[data-card="e1"] .ae24-bh__card-icon-wrap svg { width: 38px; height: 38px; }
.ae24-bh[data-card="e1"] .ae24-bh__card-body { position: relative; z-index: 1; }
.ae24-bh[data-card="e1"] .ae24-bh__card-name { font-size: 17px; font-weight: 600; }
.ae24-bh[data-card="e1"] .ae24-bh__card-sub  { font-size: 12.5px; margin-top: 2px; }
.ae24-bh[data-card="e1"] .ae24-bh__card-cta {
    display: flex; align-items: center; justify-content: space-between;
    width: auto; margin: 0 14px;
    padding: 10px 6px;
    background: transparent; border-top: 1px dashed #f0efeb;
    font-size: 13px; font-weight: 700; color: #1a1a1a;
    text-transform: none; letter-spacing: 0;
    transition: border-color .25s, color .25s;
}
.ae24-bh[data-card="e1"] .ae24-bh__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(102,185,74,.25);
}
.ae24-bh[data-card="e1"] .ae24-bh__card:hover .ae24-bh__card-num { color: rgba(102,185,74,.18); }
.ae24-bh[data-card="e1"] .ae24-bh__card:hover .ae24-bh__card-cta { border-top-color: #66B94A; color: #66B94A; }

/* ── E2 · EDITORIAL GRID — diagonal balance (icon TL · number BR) ── */
.ae24-bh[data-card="e2"] .ae24-bh__card { padding: 18px 18px 16px; gap: 0; overflow: hidden; }
.ae24-bh[data-card="e2"] .ae24-bh__card::after {
    content: ""; position: absolute; left: 18px; right: 18px; bottom: 0;
    height: 2px; background: #66B94A;
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease;
}
.ae24-bh[data-card="e2"] .ae24-bh__card-inner {
    display: flex; flex-direction: column; flex: 1;
    min-height: 155px; gap: 6px;
}
.ae24-bh[data-card="e2"] .ae24-bh__card-tag,
.ae24-bh[data-card="e2"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="e2"] .ae24-bh__card-num {
    display: block; position: absolute;
    bottom: 8px; right: 16px;
    font-size: 52px; font-weight: 900;
    color: rgba(102,185,74,.13);
    line-height: .85; letter-spacing: -.04em;
    transition: color .25s; z-index: 0;
}
.ae24-bh[data-card="e2"] .ae24-bh__card-icon-wrap {
    width: 38px; height: 38px; color: #66B94A;
    position: relative; z-index: 1; margin-bottom: 0;
}
.ae24-bh[data-card="e2"] .ae24-bh__card-icon-wrap svg { width: 36px; height: 36px; }
.ae24-bh[data-card="e2"] .ae24-bh__card-body { position: relative; z-index: 1; }
.ae24-bh[data-card="e2"] .ae24-bh__card-name { font-size: 18px; font-weight: 700; }
.ae24-bh[data-card="e2"] .ae24-bh__card-sub  { font-size: 13px; margin-top: 4px; }
.ae24-bh[data-card="e2"] .ae24-bh__card-cta {
    display: inline-flex; align-self: flex-start; margin-top: 10px;
    padding: 0; background: transparent; border: 0;
    font-size: 13px; font-weight: 700; color: #66B94A;
    gap: 6px; position: relative; z-index: 1;
    text-transform: none; letter-spacing: 0;
}
.ae24-bh[data-card="e2"] .ae24-bh__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -14px rgba(102,185,74,.3);
}
.ae24-bh[data-card="e2"] .ae24-bh__card:hover::after { transform: scaleX(1); }
.ae24-bh[data-card="e2"] .ae24-bh__card:hover .ae24-bh__card-num { color: rgba(102,185,74,.28); }

/* ── E3 · EDITORIAL ROW — horizontal list, number as watermark ── */
.ae24-bh[data-card="e3"] .ae24-bh__card { padding: 0; gap: 0; overflow: hidden; }
.ae24-bh[data-card="e3"] .ae24-bh__card-inner {
    display: flex; flex-direction: row; align-items: center;
    padding: 16px 18px;
    min-height: 72px;
    gap: 14px; flex: 1;
}
.ae24-bh[data-card="e3"] .ae24-bh__card-tag,
.ae24-bh[data-card="e3"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="e3"] .ae24-bh__card-num {
    display: block; position: absolute;
    top: 50%; right: -10px; transform: translateY(-50%);
    font-size: 110px; font-weight: 900;
    color: rgba(102,185,74,.07);
    line-height: .9; letter-spacing: -.06em;
    transition: color .25s; z-index: 0; pointer-events: none;
}
.ae24-bh[data-card="e3"] .ae24-bh__card-icon-wrap {
    width: 40px; height: 40px; flex-shrink: 0;
    color: #66B94A; position: relative; z-index: 1; margin-bottom: 0;
}
.ae24-bh[data-card="e3"] .ae24-bh__card-icon-wrap svg { width: 38px; height: 38px; }
.ae24-bh[data-card="e3"] .ae24-bh__card-body {
    flex: 1; min-width: 0; position: relative; z-index: 1;
}
.ae24-bh[data-card="e3"] .ae24-bh__card-name { font-size: 17px; font-weight: 700; }
.ae24-bh[data-card="e3"] .ae24-bh__card-sub  {
    font-size: 13px; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ae24-bh[data-card="e3"] .ae24-bh__card-cta {
    display: inline-flex; flex-shrink: 0; margin: 0;
    padding: 0; background: transparent; border: 0;
    color: #66B94A; position: relative; z-index: 1;
}
.ae24-bh[data-card="e3"] .ae24-bh__card-cta-text { display: none; }
.ae24-bh[data-card="e3"] .ae24-bh__card-cta-arrow { width: 32px; height: 32px; }
.ae24-bh[data-card="e3"] .ae24-bh__card-cta-arrow svg { width: 22px; height: 22px; }
.ae24-bh[data-card="e3"] .ae24-bh__card:hover {
    border-color: #66B94A;
    transform: translateX(3px);
}
.ae24-bh[data-card="e3"] .ae24-bh__card:hover .ae24-bh__card-num { color: rgba(102,185,74,.15); }

/* ── E4 · EDITORIAL MAGAZINE — maximalist, number bleeds off edge ── */
.ae24-bh[data-card="e4"] .ae24-bh__card { padding: 0; gap: 0; overflow: hidden; }
.ae24-bh[data-card="e4"] .ae24-bh__card-inner {
    display: flex; flex-direction: column; flex: 1;
    padding: 18px 22px 18px;
    min-height: 200px;
    gap: 0;
}
.ae24-bh[data-card="e4"] .ae24-bh__card-tag,
.ae24-bh[data-card="e4"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="e4"] .ae24-bh__card-num {
    display: block; position: absolute;
    top: 50%; right: -14px; transform: translateY(-50%);
    font-size: 112px; font-weight: 900;
    color: rgba(102,185,74,.14);
    line-height: .85; letter-spacing: -.06em;
    transition: color .3s, transform .3s; z-index: 0; pointer-events: none;
}
.ae24-bh[data-card="e4"] .ae24-bh__card-icon-wrap {
    width: 36px; height: 36px; color: #66B94A;
    position: relative; z-index: 1; margin-bottom: 0; align-self: flex-start;
}
.ae24-bh[data-card="e4"] .ae24-bh__card-icon-wrap svg { width: 34px; height: 34px; }
.ae24-bh[data-card="e4"] .ae24-bh__card-body {
    margin-top: auto; position: relative; z-index: 1;
}
.ae24-bh[data-card="e4"] .ae24-bh__card-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ae24-bh[data-card="e4"] .ae24-bh__card-sub  { font-size: 13px; margin-top: 4px; }
.ae24-bh[data-card="e4"] .ae24-bh__card-cta {
    display: inline-flex; margin-top: 10px;
    padding: 0; background: transparent; border: 0;
    font-size: 12px; font-weight: 700; color: #66B94A;
    gap: 6px; text-transform: uppercase; letter-spacing: .08em;
    position: relative; z-index: 1;
}
.ae24-bh[data-card="e4"] .ae24-bh__card:hover {
    border-color: #66B94A;
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -18px rgba(102,185,74,.35);
}
.ae24-bh[data-card="e4"] .ae24-bh__card:hover .ae24-bh__card-num {
    color: rgba(102,185,74,.32);
    transform: translateY(-50%) translateX(-4px);
}

/* ── E5 · EDITORIAL PREMIUM — elevated, solid Prenota button (snap-ready on mobile) ── */
.ae24-bh[data-card="e5"] .ae24-bh__card {
    padding: 0; gap: 0; overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fafbf9 100%);
}
.ae24-bh[data-card="e5"] .ae24-bh__card-inner {
    display: flex; flex-direction: column; flex: 1;
    padding: 20px 20px 14px;
    min-height: 170px;
    gap: 8px;
}
.ae24-bh[data-card="e5"] .ae24-bh__card-tag,
.ae24-bh[data-card="e5"] .ae24-bh__card-meta { display: none; }
.ae24-bh[data-card="e5"] .ae24-bh__card-num {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 14px; right: 14px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(102,185,74,.12);
    font-size: 15px; font-weight: 800; color: #66B94A;
    line-height: 1; letter-spacing: 0;
    transition: background .25s, color .25s; z-index: 1;
}
.ae24-bh[data-card="e5"] .ae24-bh__card-icon-wrap {
    width: 50px; height: 50px; color: #66B94A;
    position: relative; z-index: 1; margin-bottom: 4px;
}
.ae24-bh[data-card="e5"] .ae24-bh__card-icon-wrap svg { width: 48px; height: 48px; }
.ae24-bh[data-card="e5"] .ae24-bh__card-body { position: relative; z-index: 1; }
.ae24-bh[data-card="e5"] .ae24-bh__card-name { font-size: 19px; font-weight: 700; }
.ae24-bh[data-card="e5"] .ae24-bh__card-sub  { font-size: 13px; margin-top: 4px; }
.ae24-bh[data-card="e5"] .ae24-bh__card-cta {
    display: flex; align-items: center; justify-content: center;
    width: auto; margin: 12px 16px 0;
    padding: 12px 18px;
    background: #66B94A; color: #fff;
    border: 0; border-radius: 14px;
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    gap: 8px;
    transition: background .25s;
}
.ae24-bh[data-card="e5"] .ae24-bh__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -16px rgba(102,185,74,.4);
}
.ae24-bh[data-card="e5"] .ae24-bh__card:hover .ae24-bh__card-num {
    background: #66B94A; color: #fff;
}
.ae24-bh[data-card="e5"] .ae24-bh__card:hover .ae24-bh__card-cta { background: #5aa43f; }

/* ============================================================
   5. RESPONSIVE
   Aligned with Elementor breakpoints:
     ≤1024px  tablet  (menu collapse point)
     ≤767px   mobile
     ≤480px   small mobile
============================================================ */

/* ── Tablet ≤1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {

    /* Emergency strip: tighten padding (layout — inline vs stacked — is
       controlled by the per-device Layout toggle; default is stacked here). */
    .ae24-emergency-strip {
        padding: 16px 20px;
        gap: 16px;
    }

    .ae24-emergency-strip__heading {
        font-size: 16px;
    }

    .ae24-emergency-strip__btn {
        font-size: 14px;
        padding: 10px 18px;
    }

    /* Booking card body: tighter padding frees horizontal space */
    .elementor-widget-ae24-booking-card .ae24-bc__body {
        padding: 16px;
        gap: 12px;
    }

    /* Phone row: shrink icon + gap so phone number has more room */
    .elementor-widget-ae24-booking-card .ae24-bc__phone-row {
        gap: 10px;
        padding: 12px 14px;
    }

    .elementor-widget-ae24-booking-card .ae24-bc__phone-icon-wrap {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .elementor-widget-ae24-booking-card .ae24-bc__phone-icon-wrap svg {
        width: 17px;
        height: 17px;
    }

    .elementor-widget-ae24-booking-card .ae24-bc__phone-label {
        font-size: 10px;
    }

    .elementor-widget-ae24-booking-card .ae24-bc__phone-number {
        font-size: 14px;
    }

    /* Badges: smaller to prevent wrapping in narrow columns */
    .elementor-widget-ae24-booking-card .ae24-bc__badge {
        font-size: 12px;
        padding: 5px 8px;
    }

    /* Appliance Hero — tighten sidebar + card padding */
    .ae24-bh__left {
        padding: 32px 24px 28px;
    }

    .ae24-bh__heading {
        font-size: 24px;
    }

    .ae24-bh__sub {
        font-size: 12px;
        margin-bottom: 22px;
    }

    .ae24-bh__stats {
        gap: 6px;
        margin-bottom: 20px;
    }

    .ae24-bh__stat {
        padding: 11px 6px;
    }

    .ae24-bh__stat-num {
        font-size: 16px;
    }

    .ae24-bh__phone {
        padding: 12px 14px;
        gap: 10px;
    }

    .ae24-bh__phone-ico {
        width: 34px;
        height: 34px;
    }

    .ae24-bh__phone-num {
        font-size: 15px;
    }

    .ae24-bh__right {
        padding: 16px;
        gap: 12px;
    }

    .ae24-bh__card {
        padding: 20px 18px 18px;
    }

    .ae24-bh__card-name {
        font-size: 16px;
    }

    .ae24-bh__card-hint {
        font-size: 12px;
    }

    .ae24-bh__card-icon-wrap,
    .ae24-bh__card-icon-wrap svg { width: 40px; height: 40px; }

    .ae24-bh[data-card="c1"] .ae24-bh__card-cta { margin: 12px -16px 0; padding: 10px 16px; }
    .ae24-bh[data-card="i1"] .ae24-bh__card { padding: 20px 18px 0; }
    .ae24-bh[data-card="i1"] .ae24-bh__card-cta { margin: 14px -18px 0; padding: 12px 18px; }
    .ae24-bh[data-card="i3"] .ae24-bh__card-inner { min-height: 184px; padding: 20px 18px 16px; }
    .ae24-bh[data-card="i3"] .ae24-bh__card-num { font-size: 80px; }
    .ae24-bh[data-card="i3"] .ae24-bh__card-cta { padding: 11px 18px; }
    .ae24-bh[data-card="v3"] .ae24-bh__card-inner { min-height: 170px; }
    .ae24-bh[data-card="v3"] .ae24-bh__card-num { font-size: 68px; }
    .ae24-bh[data-card="n4"] .ae24-bh__card-num { font-size: 64px; }
    .ae24-bh[data-card="n4"] .ae24-bh__card-inner { min-height: 188px; padding: 22px 18px 16px; }
    .ae24-bh[data-card="n4"] .ae24-bh__card-cta { padding: 11px 18px; }
    .ae24-bh[data-card="n5"] .ae24-bh__card { padding: 38px 18px 18px; }
    .ae24-bh[data-card="n5"] .ae24-bh__card-icon-wrap { width: 50px; height: 50px; }
    .ae24-bh[data-card="n5"] .ae24-bh__card-icon-wrap svg { width: 26px; height: 26px; }
    .ae24-bh[data-card="n7"] .ae24-bh__card::before { width: 96px; right: -28px; font-size: 9px; padding: 4px 0; }
    .ae24-bh[data-card="n8"] .ae24-bh__card-inner { padding: 20px 18px 14px; }
    .ae24-bh[data-card="n8"] .ae24-bh__card-cta { padding: 12px 18px; }
    .ae24-bh[data-card="n10"] .ae24-bh__card-inner { min-height: 180px; padding: 20px 18px 12px; }
    .ae24-bh[data-card="n10"] .ae24-bh__card-num { font-size: 68px; }
    .ae24-bh[data-card="n10"] .ae24-bh__card-cta { padding: 11px 18px; }

    /* Editorial family */
    .ae24-bh[data-card="e1"] .ae24-bh__card-inner { min-height: 140px; padding: 14px 16px 10px; }
    .ae24-bh[data-card="e1"] .ae24-bh__card-num { font-size: 52px; right: 12px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card { padding: 16px 16px 14px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-inner { min-height: 148px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-num { font-size: 46px; right: 14px; bottom: 8px; }
    .ae24-bh[data-card="e3"] .ae24-bh__card-inner { padding: 14px 16px; min-height: 68px; }
    .ae24-bh[data-card="e3"] .ae24-bh__card-num { font-size: 96px; right: -8px; }
    .ae24-bh[data-card="e4"] .ae24-bh__card-inner { min-height: 188px; padding: 16px 20px; }
    .ae24-bh[data-card="e4"] .ae24-bh__card-num { font-size: 100px; }
    .ae24-bh[data-card="e5"] .ae24-bh__card-inner { min-height: 160px; padding: 18px 18px 12px; }
    .ae24-bh[data-card="e5"] .ae24-bh__card-icon-wrap,
    .ae24-bh[data-card="e5"] .ae24-bh__card-icon-wrap svg { width: 46px; height: 46px; }
    .ae24-bh[data-card="e5"] .ae24-bh__card-cta { margin: 10px 14px 0; padding: 11px 16px; }
}

/* ── Mobile ≤767px ───────────────────────────────────────── */
@media (max-width: 767px) {

    /* CTA Banner */
    .ae24-cta-banner {
        padding: 36px 24px;
    }

    .ae24-cta-banner__heading {
        font-size: 20px;
    }

    .ae24-cta-banner__subtext {
        font-size: 14px;
    }

    .ae24-cta-banner__btn {
        font-size: 15px;
        padding: 13px 28px;
    }

    /* Emergency strip: tighten spacing (stacking handled by the Layout toggle,
       which defaults to stacked on tablet & mobile and is per-device editable). */
    .ae24-emergency-strip {
        gap: 14px;
        padding: 18px 20px;
    }

    .ae24-emergency-strip__btn {
        font-size: 15px;
        padding: 12px 22px;
    }

    /* Booking card */
    .elementor-widget-ae24-booking-card .ae24-bc__body {
        padding: 28px 36px;
        gap: 12px;
    }

    .elementor-widget-ae24-booking-card .ae24-bc__phone-number {
        font-size: 15px;
    }

    /* Appliance Hero — stack to single column, cards stay 2-col */
    .ae24-bh {
        grid-template-columns: 1fr;
    }

    .ae24-bh__left {
        padding: 28px 24px 24px;
        border-radius: 20px 20px 0 0;
    }

    .ae24-bh__heading {
        font-size: 22px;
    }

    .ae24-bh__sub {
        font-size: 13px;
    }

    .ae24-bh__stats {
        gap: 6px;
        margin-bottom: 18px;
    }

    .ae24-bh__stat {
        padding: 10px 6px;
    }

    .ae24-bh__stat-num {
        font-size: 15px;
    }

    .ae24-bh__stat-label {
        font-size: 10px;
    }

    .ae24-bh__phone {
        padding: 12px 14px;
        gap: 10px;
    }

    .ae24-bh__phone-ico {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .ae24-bh__phone-num {
        font-size: 16px;
    }

    .ae24-bh__right {
        padding: 14px;
        gap: 10px;
        border-radius: 0 0 20px 20px;
    }

    .ae24-bh__card {
        padding: 18px 16px 16px;
    }

    .ae24-bh__card-name {
        font-size: 16px;
    }

    .ae24-bh__card-hint {
        font-size: 12px;
    }

    /* Variant overrides at ≤767px */
    .ae24-bh[data-card="c1"] .ae24-bh__card-cta { margin: 10px -14px 0; padding: 10px 14px; }
    .ae24-bh[data-card="i1"] .ae24-bh__card { padding: 18px 16px 0; }
    .ae24-bh[data-card="i1"] .ae24-bh__card-cta { margin: 12px -16px 0; padding: 11px 16px; }
    .ae24-bh[data-card="i3"] .ae24-bh__card-num { font-size: 78px; }
    .ae24-bh[data-card="v3"] .ae24-bh__card-num { font-size: 64px; }
    .ae24-bh[data-card="v3"] .ae24-bh__card-inner { min-height: 160px; }
    .ae24-bh[data-card="n4"] .ae24-bh__card-num { font-size: 64px; }
    .ae24-bh[data-card="n10"] .ae24-bh__card-num { font-size: 64px; }

    /* Editorial family — mobile behaviour */
    /* E1: stays single-column, tighter */
    .ae24-bh[data-card="e1"] .ae24-bh__card-inner { min-height: 128px; padding: 14px 16px 10px; }
    .ae24-bh[data-card="e1"] .ae24-bh__card-num { font-size: 50px; right: 12px; }
    .ae24-bh[data-card="e1"] .ae24-bh__card-cta { margin: 0 14px; padding: 10px 4px; }
    /* E2: FORCES 2-column grid at mobile (editorial grid signature) */
    .ae24-bh[data-card="e2"] .ae24-bh__right { grid-template-columns: 1fr 1fr; }
    .ae24-bh[data-card="e2"] .ae24-bh__card { padding: 14px 14px 12px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-inner { min-height: 138px; gap: 4px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-icon-wrap,
    .ae24-bh[data-card="e2"] .ae24-bh__card-icon-wrap svg { width: 34px; height: 34px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-name { font-size: 15px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-sub  { font-size: 11.5px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-num  { font-size: 40px; right: 10px; bottom: 6px; }
    /* E3: horizontal rows, stays single-column */
    .ae24-bh[data-card="e3"] .ae24-bh__card-inner { padding: 12px 14px; min-height: 64px; gap: 12px; }
    .ae24-bh[data-card="e3"] .ae24-bh__card-num { font-size: 84px; right: -6px; }
    /* E4: magazine, stays single-column */
    .ae24-bh[data-card="e4"] .ae24-bh__card-inner { min-height: 170px; padding: 14px 18px; }
    .ae24-bh[data-card="e4"] .ae24-bh__card-num { font-size: 94px; right: -10px; }
    /* E5: horizontal scroll-snap carousel at mobile */
    .ae24-bh[data-card="e5"] .ae24-bh__right {
        display: flex; grid-template-columns: none;
        overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px; padding: 12px 14px;
        scrollbar-width: none;
    }
    .ae24-bh[data-card="e5"] .ae24-bh__right::-webkit-scrollbar { display: none; }
    .ae24-bh[data-card="e5"] .ae24-bh__card {
        flex: 0 0 78%; scroll-snap-align: start;
    }
    .ae24-bh[data-card="e5"] .ae24-bh__card-inner { min-height: 180px; padding: 20px 20px 14px; }
    .ae24-bh[data-card="e5"] .ae24-bh__card-icon-wrap,
    .ae24-bh[data-card="e5"] .ae24-bh__card-icon-wrap svg { width: 50px; height: 50px; }
}

/* ── Small mobile ≤480px ─────────────────────────────────── */
@media (max-width: 480px) {

    .ae24-cta-banner {
        padding: 28px 16px;
    }

    .ae24-cta-banner__heading {
        font-size: 18px;
    }

    .ae24-emergency-strip {
        padding: 16px;
    }

    .elementor-widget-ae24-booking-card .ae24-bc__body {
        padding: 24px;
    }

    .elementor-widget-ae24-booking-card .ae24-bc__phone-number {
        font-size: 14px;
    }

    /* Appliance Hero — collapse cards to single column */
    .ae24-bh__left {
        padding: 24px 18px 20px;
    }

    .ae24-bh__heading {
        font-size: 20px;
    }

    .ae24-bh__badge {
        font-size: 11px;
        padding: 5px 10px;
    }

    .ae24-bh__stats {
        margin-bottom: 16px;
    }

    .ae24-bh__stat-num {
        font-size: 14px;
    }

    .ae24-bh__phone {
        padding: 11px 12px;
    }

    .ae24-bh__phone-ico {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .ae24-bh__phone-num {
        font-size: 15px;
    }

    .ae24-bh__right {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 8px;
    }

    .ae24-bh__card {
        padding: 16px 14px 14px;
    }

    /* Variant overrides at ≤480px */
    .ae24-bh[data-card="c1"] .ae24-bh__card-cta { margin: 10px -14px 0; padding: 10px 14px; }
    .ae24-bh[data-card="i3"] .ae24-bh__card-num { font-size: 70px; right: 12px; }
    .ae24-bh[data-card="i3"] .ae24-bh__card-inner { min-height: 158px; padding: 18px 14px 14px; }
    .ae24-bh[data-card="v3"] .ae24-bh__card-num { font-size: 56px; right: 12px; top: 8px; }
    .ae24-bh[data-card="v3"] .ae24-bh__card-inner { min-height: 150px; padding: 18px 14px 14px; }
    .ae24-bh[data-card="n4"] .ae24-bh__card-num { font-size: 56px; right: 12px; }
    .ae24-bh[data-card="n4"] .ae24-bh__card-inner { min-height: 158px; padding: 18px 14px 12px; }
    .ae24-bh[data-card="n10"] .ae24-bh__card-num { font-size: 58px; right: 12px; }
    .ae24-bh[data-card="n10"] .ae24-bh__card-inner { min-height: 152px; padding: 18px 14px 10px; }

    /* Editorial family — small mobile polish */
    .ae24-bh[data-card="e1"] .ae24-bh__card-num { font-size: 44px; top: 6px; right: 10px; }
    .ae24-bh[data-card="e1"] .ae24-bh__card-inner { min-height: 124px; padding: 14px 14px 10px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-inner { min-height: 128px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-num { font-size: 36px; right: 8px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-icon-wrap,
    .ae24-bh[data-card="e2"] .ae24-bh__card-icon-wrap svg { width: 30px; height: 30px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-name { font-size: 14px; }
    .ae24-bh[data-card="e2"] .ae24-bh__card-sub  { font-size: 11px; }
    .ae24-bh[data-card="e3"] .ae24-bh__card-inner { padding: 12px 12px; gap: 10px; }
    .ae24-bh[data-card="e3"] .ae24-bh__card-num { font-size: 72px; right: -4px; }
    .ae24-bh[data-card="e4"] .ae24-bh__card-inner { min-height: 160px; padding: 14px 16px; }
    .ae24-bh[data-card="e4"] .ae24-bh__card-num { font-size: 82px; right: -8px; }
    .ae24-bh[data-card="e4"] .ae24-bh__card-name { font-size: 18px; }
    .ae24-bh[data-card="e5"] .ae24-bh__card { flex-basis: 82%; }
    .ae24-bh[data-card="e5"] .ae24-bh__card-inner { min-height: 170px; padding: 18px 18px 12px; }
}

/* ============================================================
   6. SIDEBAR MENU  (ae24-sidebar-menu widget)
   Owns its own markup — no third-party styles to fight.
   Variants: gradient (default) · outlined · flat · numbered
============================================================ */

.ae24-sm {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Optional header above the menu */
.ae24-sm__head {
    padding: 0 0 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e6e9e0;
}
.ae24-sm__head-kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4ea03a;
    margin-bottom: 4px;
}
.ae24-sm__head-title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #16181a;
    line-height: 1.3;
}

/* The item list */
.ae24-sm__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Each item (the card) */
.ae24-sm__item {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 12px;
    overflow: hidden;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.ae24-sm__item:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* Current page — brand ring with a white gap + soft lift (colour set via the
   Elementor "Current Page Highlight" control → --ae24sm-current). Reads clearly
   on both the green gradient cards and the white outlined/numbered variants. */
/* Current page is marked by its ARROW (a filled, haloed circle), NOT a card
   ring. The card keeps a normal subtle shadow; !important neutralises any old
   Elementor-cached ring CSS from the previous Highlight control, so no ring
   shows even before the page is re-saved. */
.ae24-sm__item.is-current {
    position: relative;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(20, 22, 18, 0.06) !important;
}
/* Active arrow: keep the normal white circle, add a small dot badge at the
   top-right (white-bordered so it reads on the circle and the card) — a quiet
   "you are here" marker. */
.ae24-sm--arrow-circle .ae24-sm__item.is-current .ae24-sm__arrow {
    position: relative;
    overflow: visible;
}
.ae24-sm--arrow-circle .ae24-sm__item.is-current .ae24-sm__arrow::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ae24sm-current, #2f6320);
    border: 1.5px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* Inline-arrow variant: no circle — tint the chevron instead. */
.ae24-sm--arrow-inline .ae24-sm__item.is-current .ae24-sm__arrow {
    color: var(--ae24sm-current, #2f6320) !important;
}

/* Link inside each card — fills the card area */
.ae24-sm__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    color: inherit;
    text-decoration: none !important;
    width: 100%;
    box-sizing: border-box;
}
.ae24-sm__link:hover {
    text-decoration: none !important;
}

/* Title + subtitle stack */
.ae24-sm__text {
    flex: 1;
    min-width: 0;
}
.ae24-sm__title {
    display: block;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -.2px;
}
.ae24-sm__sub {
    display: block;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 3px;
    letter-spacing: .1px;
}

/* Number badge (numbered variant) */
.ae24-sm__num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(102,185,74,0.12);
    color: #3d8a2e;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .5px;
}

/* Arrow (circle by default) */
.ae24-sm__arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    color: #3d8a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background .15s ease, color .15s ease;
    box-shadow: 0 2px 6px -1px rgba(0,0,0,0.12);
}
.ae24-sm__arrow svg {
    width: 14px;
    height: 14px;
    display: block;
}
.ae24-sm__item:hover .ae24-sm__arrow {
    transform: translateX(2px);
}

/* Inline arrow variant — no circle */
.ae24-sm--arrow-inline .ae24-sm__arrow {
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    color: currentColor;
}
.ae24-sm--arrow-inline .ae24-sm__arrow svg {
    width: 16px;
    height: 16px;
}

/* No-arrow variant */
.ae24-sm--no-arrow .ae24-sm__arrow {
    display: none;
}

/* ─── Variant: gradient (default) ─────────────────────────── */
.ae24-sm--gradient .ae24-sm__item {
    background: linear-gradient(135deg, #7ce04e 0%, #66B94A 100%);
    color: #ffffff;
}
.ae24-sm--gradient .ae24-sm__title { color: #ffffff; }
.ae24-sm--gradient .ae24-sm__sub   { color: rgba(255,255,255,0.85); }
.ae24-sm--gradient .ae24-sm__arrow { background: #ffffff; color: #3d8a2e; }
.ae24-sm--gradient .ae24-sm__item:hover .ae24-sm__arrow {
    background: #16181a;
    color: #ffffff;
}

/* Tonal shift — subsequent cards a touch darker (stack effect) */
.ae24-sm--tonal .ae24-sm__item:nth-child(2) { background: linear-gradient(135deg, #80d65a 0%, #5fa642 100%); }
.ae24-sm--tonal .ae24-sm__item:nth-child(3) { background: linear-gradient(135deg, #95dd6f 0%, #5b9c40 100%); }
.ae24-sm--tonal .ae24-sm__item:nth-child(4) { background: linear-gradient(135deg, #a8e285 0%, #4e8d36 100%); }
.ae24-sm--tonal .ae24-sm__item:nth-child(5) { background: linear-gradient(135deg, #b8e899 0%, #3f7a2a 100%); }
.ae24-sm--tonal .ae24-sm__item:nth-child(n+6) { background: linear-gradient(135deg, #c5edaa 0%, #2f6320 100%); }

/* ─── Variant: outlined (white card, green border on hover) ─ */
.ae24-sm--outlined .ae24-sm__item {
    background: #ffffff;
    border: 1px solid #e6e9e0;
    color: #16181a;
}
.ae24-sm--outlined .ae24-sm__item:hover {
    border-color: #66B94A;
}
.ae24-sm--outlined .ae24-sm__title { color: #16181a; }
.ae24-sm--outlined .ae24-sm__sub   { color: #6a6e63; }
.ae24-sm--outlined .ae24-sm__arrow {
    background: rgba(102,185,74,0.10);
    color: #3d8a2e;
    box-shadow: none;
}
.ae24-sm--outlined .ae24-sm__item:hover .ae24-sm__arrow {
    background: #66B94A;
    color: #ffffff;
}

/* ─── Variant: flat (subtle rows with hover stripe) ───────── */
.ae24-sm--flat .ae24-sm__list { gap: 0; }
.ae24-sm--flat .ae24-sm__item {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid #e6e9e0;
    position: relative;
}
.ae24-sm--flat .ae24-sm__item:last-child { border-bottom: 0; }
.ae24-sm--flat .ae24-sm__item:hover {
    transform: none;
    filter: none;
    background: #f9faf6;
}
.ae24-sm--flat .ae24-sm__item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #66B94A;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .15s ease;
}
.ae24-sm--flat .ae24-sm__item:hover::before {
    transform: scaleY(1);
}
.ae24-sm--flat .ae24-sm__title { color: #16181a; }
.ae24-sm--flat .ae24-sm__sub   { color: #6a6e63; }
.ae24-sm--flat .ae24-sm__arrow {
    background: transparent;
    color: #6a6e63;
    box-shadow: none;
    width: auto;
    height: auto;
}

/* ─── Variant: numbered (white cards with 01-XX badges) ───── */
.ae24-sm--numbered .ae24-sm__item {
    background: #ffffff;
    border: 1px solid #e6e9e0;
    color: #16181a;
}
.ae24-sm--numbered .ae24-sm__item:hover {
    border-color: #66B94A;
    background: #f9faf6;
}
.ae24-sm--numbered .ae24-sm__title { color: #16181a; }
.ae24-sm--numbered .ae24-sm__sub   { color: #6a6e63; }
.ae24-sm--numbered .ae24-sm__arrow {
    background: transparent;
    color: #6a6e63;
    box-shadow: none;
    width: auto;
    height: auto;
}
.ae24-sm--numbered .ae24-sm__item:hover .ae24-sm__num {
    background: #66B94A;
    color: #ffffff;
}

/* ─── Mobile tweaks ───────────────────────────────────────── */
@media (max-width: 480px) {
    .ae24-sm__link { padding: 14px 16px; gap: 10px; }
    .ae24-sm__title { font-size: 14px; }
    .ae24-sm__sub   { font-size: 10.5px; }
    .ae24-sm__arrow { width: 28px; height: 28px; }
    .ae24-sm__arrow svg { width: 12px; height: 12px; }
}

/* ─── Scroll list mode (v2.9.56 · carousel v2.9.58) ──────────
   For long menus (e.g. all brands) the stacked full-width cards
   become a 2000px+ tower. Scroll mode keeps the exact cards but
   contains them in a searchable, fading scroll panel; on mobile
   the same cards become a horizontal swipe carousel (a nested
   vertical scroll is poor on phones). JS: ae24-sidebar-menu.js */

/* shared: header count + search + empty */
.ae24-sm__head-count {
    font-size: 12px; font-weight: 700; color: #6a6e63; margin-left: 2px;
}
.ae24-sm__search { position: relative; margin-bottom: 12px; }
/* Hardened against theme input leakage (the live theme restyles inputs):
   structure forced with !important; colours come from Elementor controls. */
.ae24-sm__search-input {
    width: 100% !important; box-sizing: border-box !important;
    position: relative; z-index: 1; display: block !important;
    border: 1.5px solid #e6e9e0; border-radius: 11px !important; background: #fbfcfa;
    padding: 11px 14px 11px 38px !important; margin: 0 !important;
    font-family: 'Manrope', -apple-system, sans-serif !important;
    font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2 !important;
    color: #16181a; height: auto !important; min-height: 0 !important;
    outline: none !important; box-shadow: none !important;
    -webkit-appearance: none !important; appearance: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ae24-sm__search-input::placeholder { color: #9aa093 !important; font-weight: 600 !important; opacity: 1 !important; }
.ae24-sm__search-input:focus {
    border-color: #66B94A; background: #fff; box-shadow: 0 0 0 4px rgba(102,185,74,.12) !important;
}
.ae24-sm__search-ico {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 16px !important; height: 16px !important; color: #9aa093; pointer-events: none; z-index: 2;
}
.ae24-sm__empty { font-size: 12.5px; color: #6a6e63; text-align: center; padding: 16px 4px; }
.ae24-sm__empty[hidden] { display: none; }

/* ── Scroll mode — keeps the exact cards, just contains them ── */
.ae24-sm__scrollbox { position: relative; }
.ae24-sm__scroll {
    max-height: 440px; overflow-y: auto; overflow-x: hidden;
    padding: 0;                                    /* flush — active ring is inset, so no clipping */
    scrollbar-width: none;                         /* no scrollbar by default (toggle to show) */
    -webkit-overflow-scrolling: touch;
}
.ae24-sm__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* opt-in thin scrollbar via the "Show Scrollbar" control */
.ae24-sm--scrollbar .ae24-sm__scroll { scrollbar-width: thin; scrollbar-color: rgba(102,185,74,.30) transparent; }
.ae24-sm--scrollbar .ae24-sm__scroll::-webkit-scrollbar { width: 7px; display: block; }
.ae24-sm--scrollbar .ae24-sm__scroll::-webkit-scrollbar-thumb { background: rgba(102,185,74,.28); border-radius: 99px; }
.ae24-sm--scrollbar .ae24-sm__scroll::-webkit-scrollbar-track { background: transparent; }
/* End fade — bottom edge (desktop) / right edge (mobile carousel). Shown while
   there's more to scroll; hidden once you reach the end. */
.ae24-sm__scrollbox::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
    z-index: 2; pointer-events: none;
    background: linear-gradient(transparent, var(--ae24sm-fade, #fff));
    opacity: 1; transition: opacity .2s ease;
}
.ae24-sm__scrollbox.is-end::after { opacity: 0; }
/* Start fade — top edge (desktop) / left edge (mobile carousel). Hidden at the
   very start; appears once you've scrolled away from it. (z-index lifts it
   above the cards, since ::before paints under content by default.) */
.ae24-sm__scrollbox::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42px;
    z-index: 2; pointer-events: none;
    background: linear-gradient(var(--ae24sm-fade, #fff), transparent);
    opacity: 1; transition: opacity .2s ease;
}
.ae24-sm__scrollbox.is-start::before { opacity: 0; }

/* bottom scroll instruction — sits under the fade cutoff, fades out at the end */
.ae24-sm__hint {
    margin-top: 11px; text-align: center;
    font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .01em;
    color: #9aa093; transition: opacity .2s ease; user-select: none;
}
.ae24-sm__scrollbox.is-end ~ .ae24-sm__hint { opacity: 0; visibility: hidden; }

/* ── Mobile carousel (Scroll mode) ───────────────────────────
   Below the chosen breakpoint, the vertical scroll list turns
   into a horizontal swipe carousel of the SAME cards: peeking
   next card, scroll-snap, drag (mouse) / swipe (touch), and a
   right-edge fade. Gated by .ae24-sm--car-mobile / --car-tablet
   so the breakpoint is selectable from Elementor. The --ae24sm-* vars are set
   on the wrapper by the carousel controls; the fallbacks below are the
   defaults when a control is left untouched. */

@media (max-width: 1024px) {
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__search { display: none !important; }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__scroll {
      max-height: none !important; overflow: visible !important; padding: 0 !important;
  }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__list {
      flex-direction: row !important; flex-wrap: nowrap !important;
      overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
      padding-bottom: 4px;
  }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__list::-webkit-scrollbar { display: none; }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__list.is-grabbing { cursor: grabbing; }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__item {
      flex: 0 0 auto; min-width: var(--ae24sm-card, 78%);   /* width = MINIMUM; grows to fit longer names */
      scroll-snap-align: start;
  }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__link  { padding: var(--ae24sm-car-pad, 14px) 18px; }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__text  { min-width: 0; }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__title { font-size: var(--ae24sm-car-title, 15px); white-space: nowrap; }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__sub   { font-size: var(--ae24sm-car-sub, 11px); white-space: nowrap; }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll.ae24-sm--gradient .ae24-sm__item            { background: linear-gradient(135deg, #7ce04e 0%, #66B94A 100%) !important; }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll.ae24-sm--gradient .ae24-sm__item:nth-child(even) { background: linear-gradient(135deg, #8ad968 0%, #54993b 100%) !important; }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__scrollbox::after {
      top: 0; bottom: 0; right: 0; left: auto; width: 36px; height: auto;
      background: linear-gradient(to right, transparent, var(--ae24sm-fade, #fff));
  }
  .ae24-sm--car-tablet.ae24-sm--mode-scroll .ae24-sm__scrollbox::before {
      top: 0; bottom: 0; left: 0; right: auto; width: 36px; height: auto;
      background: linear-gradient(to right, var(--ae24sm-fade, #fff), transparent);
  }
}

@media (max-width: 767px) {
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__search { display: none !important; }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__scroll {
      max-height: none !important; overflow: visible !important; padding: 0 !important;
  }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__list {
      flex-direction: row !important; flex-wrap: nowrap !important;
      overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
      padding-bottom: 4px;
  }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__list::-webkit-scrollbar { display: none; }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__list.is-grabbing { cursor: grabbing; }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__item {
      flex: 0 0 auto; min-width: var(--ae24sm-card, 78%);   /* width = MINIMUM; grows to fit longer names */
      scroll-snap-align: start;
  }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__link  { padding: var(--ae24sm-car-pad, 14px) 18px; }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__text  { min-width: 0; }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__title { font-size: var(--ae24sm-car-title, 15px); white-space: nowrap; }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__sub   { font-size: var(--ae24sm-car-sub, 11px); white-space: nowrap; }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll.ae24-sm--gradient .ae24-sm__item            { background: linear-gradient(135deg, #7ce04e 0%, #66B94A 100%) !important; }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll.ae24-sm--gradient .ae24-sm__item:nth-child(even) { background: linear-gradient(135deg, #8ad968 0%, #54993b 100%) !important; }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__scrollbox::after {
      top: 0; bottom: 0; right: 0; left: auto; width: 36px; height: auto;
      background: linear-gradient(to right, transparent, var(--ae24sm-fade, #fff));
  }
  .ae24-sm--car-mobile.ae24-sm--mode-scroll .ae24-sm__scrollbox::before {
      top: 0; bottom: 0; left: 0; right: auto; width: 36px; height: auto;
      background: linear-gradient(to right, var(--ae24sm-fade, #fff), transparent);
  }
}

/* ============================================================
   7. FAQ ACCORDION  (ae24-faq-accordion widget)

   1-to-1 visual clone of PowerPack Advanced Accordion as
   rendered on the live Pavia page (post-17378.css):

       .pp-accordion-item             border-top 1px #00000018
       .pp-accordion-tab-title        20px 0 / 16px / 400 / 24px / #221F1F
       .pp-accordion-tab-title.active color #000000
       .pp-accordion-toggle-icon svg  fill #221F1F (active #000), 16px
       .pp-accordion-tab-content      0 0 20px 0 / 15px / line-height 1.7

   Out-of-the-box renders identical to PowerPack default. All
   visual customisations live on Elementor controls in the PHP
   widget — this file is just the structural baseline.
============================================================ */

/* .ae24-faq is just a stack of items — any outer card belongs on
   Elementor's wrapper (.elementor-widget-container or .elementor-element)
   via the user's Advanced-tab settings, matching PowerPack's pattern. */
.ae24-faq {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.ae24-faq__item {
    background: transparent;
    border: 0;
    border-top: 1px solid #00000018;   /* hairline between items */
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    overflow: hidden;
}
/* No hairline above the very first item (only between items). */
.ae24-faq__item:first-child {
    border-top: 0;
}
/* PowerPack drops the first title's top padding so the title sits
   flush against the card's top edge (only the wrapper's 32px stays).
   !important because stale Elementor inline CSS has higher specificity
   (.elementor-XXXX .elementor-element.elementor-element-YYY .ae24-faq__title). */
.ae24-faq__item:first-child .ae24-faq__title {
    padding-top: 0 !important;
}

/* ── Question header — PP typography ─────────────────────── */
/* Theme/Elementor apply a default button drop-shadow + focus ring
   that bleed into the answer area below. Force them off with
   !important so the title stays flush like PowerPack. */
.ae24-faq__title,
.ae24-faq__title:hover,
.ae24-faq__title:focus,
.ae24-faq__title:active,
.ae24-faq__title:focus-visible {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    margin: 0;
    padding: 20px 0;                   /* PP exact */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;                   /* PP exact */
    font-weight: 400;                  /* PP exact */
    line-height: 24px;                 /* PP exact */
    color: #221F1F;                    /* PP exact */
    text-align: left;
    -webkit-appearance: none;
            appearance: none;
    box-shadow: none !important;       /* kill theme drop-shadow */
    outline: 0 !important;             /* kill focus ring */
    text-decoration: none;
    transition: none;
    white-space: normal;               /* theme <button> reset forces nowrap;
                                          allow long questions to wrap to lines */
}
.ae24-faq__item[data-active="true"] .ae24-faq__title {
    color: #000000;                    /* PP exact active color */
}

.ae24-faq__q {
    flex: 1;
    min-width: 0;                  /* let the flex child shrink so a long
                                      question wraps instead of overflowing
                                      and pushing the toggle icon off-screen */
    white-space: normal;           /* defeat inherited nowrap from the button reset */
    overflow-wrap: break-word;     /* break an over-long word as a last resort */
    font: inherit;
    color: inherit;
}

/* ── Toggle icon — POLISH v1 (only deviation from PowerPack) ──
   Collapsed → green-soft circle with green plus
   Open      → dark circle with white minus
   Everything else (item, title, answer) stays PP-identical. */
.ae24-faq__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f9ef;
    color: #3d8a2e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* !important on the SVG only — defensive override for stale
   Elementor inline CSS emitted by old icon_size / icon_color controls
   (now orphaned). Once the page is updated in Elementor and post-XXXX.css
   regenerates, these can drop the !important. */
.ae24-faq__icon svg {
    width: 14px !important;
    height: 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    color: inherit !important;
}
/* PowerPack-style display toggle */
.ae24-faq__icon-plus  { display: block; }
.ae24-faq__icon-minus { display: none;  }
.ae24-faq__item[data-active="true"] .ae24-faq__icon {
    background: #16181a;
    color: #ffffff;
}
.ae24-faq__item[data-active="true"] .ae24-faq__icon-plus  { display: none;  }
.ae24-faq__item[data-active="true"] .ae24-faq__icon-minus { display: block; }

/* ── Answer panel — PP typography ────────────────────────── */
/* Collapsed panels are CSS-class driven, NOT the native [hidden]
   attribute. [hidden] hides via the browser UA stylesheet even when
   this file is absent (e.g. the generator's element-picker preview),
   which left every Q&A but the first one invisible and unmappable.
   A plain class means: stylesheet present → panel collapsed; stylesheet
   stripped → every Q&A visible and individually mappable, like PowerPack. */
.ae24-faq__content--collapsed { display: none; }
.ae24-faq__content,
.ae24-faq__answer {
    box-shadow: none !important;       /* kill any inherited theme shadow */
    background: transparent !important;
}
.ae24-faq__answer {
    padding: 0 0 20px;                 /* PP exact */
    font-family: inherit;
    font-size: 15px;                   /* PP exact */
    line-height: 1.7;                  /* PP exact */
    color: inherit;
}
.ae24-faq__answer > *:first-child { margin-top: 0; }
.ae24-faq__answer > *:last-child  { margin-bottom: 0; }
.ae24-faq__answer p { margin: 0 0 10px; }
.ae24-faq__answer p:last-child { margin-bottom: 0; }
.ae24-faq__answer strong { font-weight: 700; }

/* Preserve the .link.colorPrimary semantic used by zone .txt content */
.ae24-faq__answer a.link.colorPrimary {
    color: #3d8a2e;
    font-weight: 700;
    border-bottom: 0;
    text-decoration: none;
}
.ae24-faq__answer a.link.colorPrimary:hover {
    text-decoration: underline;
}

/* ============================================================
   8. COMMON PROBLEMS  (ae24-common-problems widget)

   Renders the locked-content HTML structure unchanged:

       <h3><strong>{heading}</strong></h3>
       <ul>
         <li><strong>{title}</strong> — {causes}</li>
         …
       </ul>

   Visual: 2-column grid of cards with a green left-border accent,
   bold dark title on its own line, lighter subtext below. The em-
   dash (kept in the DOM for SEO) is hidden via the .__sep span.
============================================================ */
.ae24-problems {
    width: 100%;
}

/* ── Heading ─────────────────────────────────────────────── */
.ae24-problems__heading {
    margin: 0 0 20px;
    color: #16181a;
    font-weight: 700;
    line-height: 1.3;
}
.ae24-problems__heading strong {
    font-weight: inherit;
    color: inherit;
}

/* ── Grid ────────────────────────────────────────────────── */
.ae24-problems__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* ── Card ────────────────────────────────────────────────── */
.ae24-problems__item {
    background: #fafcf7;
    border: 1px solid #e6e9e0;
    border-left: 4px solid #3d8a2e;    /* green accent */
    border-radius: 8px;
    padding: 14px 18px 14px 22px;
    line-height: 1.5;
    color: #8a8f87;                    /* lighter subtext color */
    font-size: 14px;
    margin: 0;
}

/* Title — bold dark, block so causes wrap to a new line */
.ae24-problems__item > strong {
    display: block;
    color: #16181a;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 4px;
}

/* Em-dash (or whichever separator) — kept in DOM, hidden visually */
.ae24-problems__sep {
    display: none;
}

/* Smaller screens: 1 column */
@media (max-width: 600px) {
    .ae24-problems__list {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   8b. COMMON PROBLEMS — SERVICE CARD layout (display_mode=cards)

   Repurpose of the block on generic-brand pages → "appliances we
   repair": icon + linked title + arrow, fully clickable. Restrained
   P1 family: flat cards, SOLID greens (no gradient), no hover lift,
   no icon scaling. Variants R1 (disc) / R3 (tint) / R4 (frame) and
   two colour schemes (original cream / white). Adaptive flex grid:
   2-up, a lone odd card grows to full width.
============================================================ */
.ae24-svc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    --svc-accent: #6aae47;        /* matches common-problems accent_color on live pages */
    --svc-accent-deep: #3d8a2e;
    --svc-ink: #16181a;
    --svc-sub: #8a8f87;
    --svc-line: #e6e9e0;
    --svc-pill-bg: rgba(102,185,74,.08);
    --svc-pill-bd: rgba(102,185,74,.30);
    --svc-arr-bg: rgba(61,138,46,.10);
    --svc-hover-bd: #d3e2c9;
    --svc-card-bg: #ffffff;
    --svc-card-bg-hover: #f6faf3;
    --svc-ease: cubic-bezier(.22,.61,.36,1);
}
.ae24-svc.is-original { --svc-card-bg: #66B94A0D; --svc-card-bg-hover: #66B94A1A; }  /* matches common-problems card_bg */
.ae24-svc.is-white    { --svc-card-bg: #ffffff; --svc-card-bg-hover: #f6faf3; }
/* Appliance-Types widget: default heading to match common-problems (16px / 700) */
.elementor-widget-ae24-appliance-types .ae24-problems__heading { font-size: 16px; font-weight: 700; }

.ae24-svc__item {
    position: relative;
    box-sizing: border-box;       /* so 50% basis includes padding (theme-independent) */
    flex: 1 1 calc(50% - 6px);
    min-width: 260px;
    display: flex;
    align-items: center;          /* icon stays vertically centred */
    gap: 15px;
    background: var(--svc-card-bg);
    border: 1px solid var(--svc-line);
    border-radius: 8px;            /* matches common-problems card radius */
    padding: 14px 50px 14px 22px;  /* matches common-problems 14/_/14/22, +arrow room */
    margin: 0;
    overflow: hidden;
    transition: border-color .26s var(--svc-ease), background-color .3s var(--svc-ease);
}
/* accent rail as a pseudo so it can recolour with no layout shift */
.ae24-svc__item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--svc-accent);
    transition: background .26s var(--svc-ease);
}
.ae24-svc__ico {
    position: relative;
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--svc-pill-bg);
    border: 1px solid var(--svc-pill-bd);
    color: var(--svc-accent);
    transition: background .26s var(--svc-ease), border-color .26s var(--svc-ease);
}
.ae24-svc__ico svg {
    width: 23px; height: 23px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ae24-svc__bd { min-width: 0; flex: 1; }
.ae24-svc__t {
    display: inline;
    font-weight: 700;
    font-size: 15px;
    color: var(--svc-ink);
    text-decoration: none;
    line-height: 1.34;
    transition: color .22s var(--svc-ease);
}
.ae24-svc__t strong { font-weight: inherit; color: inherit; }
.ae24-svc__sub {
    display: block;
    font-size: 13px;
    color: var(--svc-sub);
    line-height: 1.5;
    margin-top: 3px;
}
.ae24-svc__arr {
    position: absolute;
    right: 15px; top: 50%;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--svc-accent);
    transform: translateY(-50%);
    transition: background .26s var(--svc-ease), color .26s var(--svc-ease), transform .3s var(--svc-ease);
}
.ae24-svc__arr svg {
    width: 15px; height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* stretched link — the title anchor covers the whole card */
.ae24-svc__t::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
}
.ae24-svc__item:focus-within { outline: 2px solid var(--svc-accent); outline-offset: 3px; }
.ae24-svc__t:focus-visible { outline: none; }

/* toggles */
.ae24-svc.no-icon .ae24-svc__ico { display: none; }
.ae24-svc.no-arrow .ae24-svc__arr { display: none; }
.ae24-svc.no-arrow .ae24-svc__item { padding-right: 22px; }

/* arrow rest state by variant */
.ae24-svc--r1 .ae24-svc__arr,
.ae24-svc--r4 .ae24-svc__arr { background: var(--svc-arr-bg); }
.ae24-svc--r3 .ae24-svc__arr { background: transparent; width: 22px; height: 22px; }

/* ── R1 · Disc — arrow disc fills solid green, eases 2px ── */
.ae24-svc--r1 .ae24-svc__item:hover { border-color: var(--svc-hover-bd); }
.ae24-svc--r1 .ae24-svc__item:hover::before { background: var(--svc-accent-deep); }
.ae24-svc--r1 .ae24-svc__item:hover .ae24-svc__ico { background: rgba(61,138,46,.13); }
.ae24-svc--r1 .ae24-svc__item:hover .ae24-svc__t { color: var(--svc-accent); }
.ae24-svc--r1 .ae24-svc__item:hover .ae24-svc__arr {
    background: var(--svc-accent); color: #fff;
    transform: translateY(-50%) translateX(2px);
}

/* ── R3 · Tint — card surface warms a shade ── */
.ae24-svc--r3 .ae24-svc__item:hover { background-color: var(--svc-card-bg-hover); border-color: var(--svc-hover-bd); }
.ae24-svc--r3 .ae24-svc__item:hover::before { background: var(--svc-accent-deep); }
.ae24-svc--r3 .ae24-svc__item:hover .ae24-svc__t { color: var(--svc-accent); }
.ae24-svc--r3 .ae24-svc__item:hover .ae24-svc__arr {
    color: var(--svc-accent-deep);
    transform: translateY(-50%) translateX(4px);
}

/* ── R4 · Frame — hairline becomes a clean green ring ── */
.ae24-svc--r4 .ae24-svc__item:hover { border-color: var(--svc-accent); }
.ae24-svc--r4 .ae24-svc__item:hover::before { background: var(--svc-accent-deep); }
.ae24-svc--r4 .ae24-svc__item:hover .ae24-svc__ico { border-color: rgba(61,138,46,.45); }
.ae24-svc--r4 .ae24-svc__item:hover .ae24-svc__t { color: var(--svc-accent); }
.ae24-svc--r4 .ae24-svc__item:hover .ae24-svc__arr {
    background: var(--svc-accent); color: #fff;
    transform: translateY(-50%) translateX(2px);
}

@media (max-width: 600px) {
    .ae24-svc__item { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ae24-svc__item, .ae24-svc__item * { transition-duration: .01ms !important; }
}

/* ============================================================
   9. MAP  (ae24-map widget) — Leaflet + Positron + city boundary

   Renders into the page DOM (not an iframe), so every element
   is stylable. Tiles: CartoDB Positron (keyless). Boundary:
   OpenStreetMap Nominatim admin polygon, server-side cached,
   styled via CSS custom properties from Elementor controls:

       --ae24-bound-stroke         (default #3d8a2e)
       --ae24-bound-weight         (default 2.5)
       --ae24-bound-dash           (default "6 4")
       --ae24-bound-fill           (default #66B94A)
       --ae24-bound-fill-opacity   (default 0.10)

   The widget is rendered with `widgetType: ae24-map` and the
   same `address`/`zoom`/`height` settings the generator already
   uses for Elementor's built-in google_maps — drop-in compat.
============================================================ */
.ae24-map {
    position: relative;
    width: 100%;
    height: 360px;                          /* Elementor height control overrides */
    background: #eef2eb;                    /* shows behind tiles while loading */
    border-style: solid;
    border-color: #e6e9e0;
    border-width: 0;
    border-radius: 12px;
    overflow: hidden;                       /* clip tiles to rounded corners */
    z-index: 0;                             /* keep Leaflet UI above page chrome */
    /* Boundary polygon style — overridable via Elementor controls */
    --ae24-bound-stroke:       #3d8a2e;
    --ae24-bound-weight:       2.5;
    --ae24-bound-dash:         6 4;
    --ae24-bound-fill:         #66B94A;
    --ae24-bound-fill-opacity: 0.10;
}

/* Mobile cooperative-gesture hint — a brief overlay shown when a one-finger
   pan is attempted on touch (added by coopGestures() in ae24-map.js /
   ae24-zone-map.js). One finger scrolls the page; two fingers move the map. */
.ae24-map-hint {
    position: absolute;
    inset: 0;
    z-index: 1200;                         /* above tiles + controls (transient) */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    box-sizing: border-box;
    background: rgba(20, 24, 15, 0.52);
    color: #fff;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;                  /* never blocks taps or scrolling */
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.ae24-map-hint-on .ae24-map-hint {
    opacity: 1;
    visibility: visible;
}

/* ── Tile-pane filter target (Normal + :hover CSS filters land here) ── */
.ae24-map .leaflet-tile-pane {
    transition: filter 0.3s ease;
}

/* ── Restyled zoom controls to match brand ───────────────────
   !important on dimensions + display so mobile theme button
   rules (which often re-pad/re-size <a> tags inside Leaflet)
   can't collapse the "+" button. `box-sizing: border-box` so
   any inherited padding stays inside the 32×32 box. */
.ae24-map .leaflet-bar {
    border: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.16) !important;
}
.ae24-map .leaflet-bar a {
    display: block !important;
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 30px !important;       /* 32 − 2 (bottom border) keeps glyph centered */
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    color: #16181a !important;
    border: 0 !important;
    border-bottom: 1px solid #e6e9e0 !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
}
.ae24-map .leaflet-bar a:hover {
    background: #f3f9ef !important;
    color: #3d8a2e !important;
}
.ae24-map .leaflet-bar a:last-child {
    border-bottom: 0 !important;
    line-height: 32px !important;       /* no bottom border on last child */
}
.ae24-map .leaflet-bar a:focus-visible {
    outline: 2px solid #66B94A !important;
    outline-offset: -2px !important;
}

/* ── Discreet attribution (tile providers' terms require credit) ───── */
.ae24-map .leaflet-control-attribution {
    background: rgba(255,255,255,0.6);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    border-radius: 4px 0 0 0;
    font-size: 9px;
    line-height: 1.2;
    color: #999;
    padding: 1px 5px;
    box-shadow: none;
}
.ae24-map .leaflet-control-attribution a {
    color: #6b9d5b;
    text-decoration: none;
}
.ae24-map .leaflet-control-attribution a:hover { text-decoration: underline; }

/* ── Editor preview · while Leaflet hasn't booted yet ──────── */
.ae24-map:not(.leaflet-container)::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #eef2eb 0%, #fafcf7 100%);
    z-index: 0;
}

/* ============================================================
   9. ZONE HERO  (ae24-zone-hero widget)

   Five variants — A (Split), B (Overlay), C (Minimal), D (Stats),
   E (Urgent). Each variant has the same content fields; only the
   visual layout template differs. Customisable accent via
   --hero-accent / --hero-accent-soft / --hero-ink CSS vars.
============================================================ */
.ae24-hero {
    --hero-accent: #3d8a2e;
    --hero-accent-soft: #f3f9ef;
    --hero-accent-light: #5cb650;
    --hero-ink: #16181a;
    --hero-ink-2: #221F1F;
    --hero-muted: #6b7066;
    --hero-line: #e6e9e0;
    --hero-bg: #fbfaf7;
    --hero-radius: 20px;

    position: relative;
    overflow: hidden;
    border-radius: var(--hero-radius);
    width: 100%;
    font-family: inherit;
}

/* ── Shared atoms ────────────────────────────────────────── */
.ae24-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    color: var(--hero-ink);
    border: 1px solid var(--hero-line);
    margin-bottom: 18px;
}
.ae24-hero__chip-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hero-accent);
}

.ae24-hero__title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--hero-ink);
    margin: 0 0 14px;
    letter-spacing: -0.8px;
}
.ae24-hero__title-accent {
    font-style: normal;
    color: var(--hero-accent);
}
.ae24-hero__title-sep {
    color: var(--hero-muted);
    font-weight: 400;
    margin: 0 4px;
}

.ae24-hero__subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: var(--hero-muted);
    margin: 0 0 24px;
    max-width: 580px;
}

.ae24-hero__ctas {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ae24-hero__primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--hero-accent-light), var(--hero-accent));
    color: #fff;
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(61,138,46,0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ae24-hero__primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(61,138,46,0.40);
    color: #fff;
}
.ae24-hero__cta-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.ae24-hero__primary--xl {
    padding: 18px 28px;
    font-size: 17px;
}
.ae24-hero__primary--xl .ae24-hero__cta-icon {
    width: 22px; height: 22px;
}

.ae24-hero__secondary {
    font-size: 14px;
    color: var(--hero-muted);
}
.ae24-hero__secondary a {
    color: var(--hero-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.ae24-hero__secondary a:hover {
    color: var(--hero-ink);
}

/* ── A — Split: text left, image right ───────────────────── */
.ae24-hero--a {
    background: linear-gradient(135deg, #fbfaf7 0%, var(--hero-accent-soft) 100%);
    border: 1px solid var(--hero-line);
}
.ae24-hero--a .ae24-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    padding: 48px;
}
.ae24-hero--a .ae24-hero__image {
    border-radius: 16px;
    height: 320px;
    background-color: var(--hero-ink);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.ae24-hero--a .ae24-hero__image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom right, rgba(22,24,26,0.15), rgba(22,24,26,0.45));
}

/* ── B — Full Overlay ─────────────────────────────────────── */
.ae24-hero--b {
    background: var(--hero-ink);
    color: #fff;
    min-height: 380px;
}
.ae24-hero--b .ae24-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--hero-ink);
}
.ae24-hero--b .ae24-hero__bg::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(22,24,26,0.55) 0%, rgba(22,24,26,0.78) 100%);
}
.ae24-hero--b .ae24-hero__inner {
    position: relative; z-index: 1;
    padding: 72px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ae24-hero--b .ae24-hero__chip {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    color: #fff;
    border-color: rgba(255,255,255,0.20);
}
.ae24-hero--b .ae24-hero__title {
    color: #fff;
    font-size: 46px;
    max-width: 720px;
}
.ae24-hero--b .ae24-hero__title-accent {
    color: var(--hero-accent-light);
}
.ae24-hero--b .ae24-hero__title-sep {
    color: rgba(255,255,255,0.5);
}
.ae24-hero--b .ae24-hero__subtitle {
    color: rgba(255,255,255,0.85);
    max-width: 600px;
}
.ae24-hero--b .ae24-hero__secondary {
    color: rgba(255,255,255,0.7);
}
.ae24-hero--b .ae24-hero__secondary a {
    color: var(--hero-accent-light);
}
.ae24-hero--b .ae24-hero__primary {
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* ── C — Minimal Centered ─────────────────────────────────── */
.ae24-hero--c {
    background: #fff;
    border: 1px solid var(--hero-line);
    text-align: center;
}
.ae24-hero--c .ae24-hero__inner {
    position: relative; z-index: 1;
    padding: 64px 32px;
    max-width: 880px;
    margin: 0 auto;
}
.ae24-hero--c .ae24-hero__chip {
    background: var(--hero-accent-soft);
    color: var(--hero-accent);
    border-color: transparent;
    font-weight: 600;
}
.ae24-hero--c .ae24-hero__title {
    font-size: 48px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -1px;
}
.ae24-hero--c .ae24-hero__title-accent {
    background: linear-gradient(135deg, var(--hero-accent-light), var(--hero-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ae24-hero--c .ae24-hero__subtitle {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}
.ae24-hero--c .ae24-hero__ctas {
    justify-content: center;
}
.ae24-hero--c .ae24-hero__blob {
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hero-accent-soft) 0%, transparent 70%);
    pointer-events: none;
}
.ae24-hero--c .ae24-hero__blob--tl { top: -100px; left: -100px; }
.ae24-hero--c .ae24-hero__blob--br { bottom: -100px; right: -100px; }

/* ── D — Stats Hero ───────────────────────────────────────── */
.ae24-hero--d {
    background: #fff;
    border: 1px solid var(--hero-line);
}
.ae24-hero--d .ae24-hero__inner {
    padding: 56px 48px;
}
.ae24-hero--d .ae24-hero__title { font-size: 40px; max-width: 720px; }
.ae24-hero--d .ae24-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 32px 0 28px;
    padding: 24px;
    background: linear-gradient(135deg, var(--hero-accent-soft) 0%, #fff 100%);
    border-radius: 16px;
    border: 1px solid var(--hero-line);
}
.ae24-hero--d .ae24-hero__stat { text-align: center; }
.ae24-hero--d .ae24-hero__stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--hero-accent);
    letter-spacing: -0.5px;
    line-height: 1;
    margin-bottom: 8px;
}
.ae24-hero--d .ae24-hero__stat-label {
    font-size: 13px;
    color: var(--hero-muted);
    font-weight: 500;
}

/* ── E — Urgent ───────────────────────────────────────────── */
.ae24-hero--e {
    background: #fff;
    border: 1px solid #fee2c1;
}
.ae24-hero--e .ae24-hero__urgent-stripe {
    background: linear-gradient(135deg, #ff8a3d, #e85d2c);
    color: #fff;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.ae24-hero--e .ae24-hero__urgent-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: ae24-hero-pulse 2s infinite;
}
@keyframes ae24-hero-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(255,255,255,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0   rgba(255,255,255,0); }
}
.ae24-hero--e .ae24-hero__inner {
    padding: 56px 48px;
}
.ae24-hero--e .ae24-hero__chip {
    background: #fff7ef;
    border-color: #fee2c1;
    color: #c44a1c;
    font-weight: 600;
}
.ae24-hero--e .ae24-hero__chip-dot { background: #e85d2c; }
.ae24-hero--e .ae24-hero__title { font-size: 44px; }
.ae24-hero--e .ae24-hero__title-accent { color: #e85d2c; }

/* ── Mobile (all variants) ────────────────────────────────── */
@media (max-width: 780px) {
    .ae24-hero__title { font-size: 30px !important; }
    .ae24-hero--a .ae24-hero__inner { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
    .ae24-hero--a .ae24-hero__image { height: 200px; }
    .ae24-hero--b .ae24-hero__inner,
    .ae24-hero--d .ae24-hero__inner,
    .ae24-hero--e .ae24-hero__inner { padding: 40px 28px; }
    .ae24-hero--c .ae24-hero__inner { padding: 48px 28px; }
    .ae24-hero--d .ae24-hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   10. ZONE MAP  (ae24-zone-map widget — v1.0.0)
   ============================================================
   Extends section 9 (ae24-map). Shares all --ae24-bound-* CSS
   custom properties so polygon styling stays visually identical
   to the single-city map. Adds marker variables for the new
   pin layer and cluster-bubble styling.

   --ae24-marker-city         (default #3d8a2e)
   --ae24-marker-nbhd         (default #c08a2c)  Milan/Monza/Como Centro
   --ae24-marker-radius       (default 4.5)
   ============================================================ */

.ae24-zone-map {
    /* Falls under .ae24-map base styles — only marker tokens needed */
    --ae24-marker-city:   #3d8a2e;
    --ae24-marker-nbhd:   #c08a2c;
    --ae24-marker-radius: 4.5;
}

/* Marker hover halo — subtle ring that doesn't shift layout */
.ae24-zone-map .leaflet-interactive {
    transition: filter 0.15s ease, transform 0.15s ease;
}
.ae24-zone-map .leaflet-interactive:hover {
    filter: drop-shadow(0 0 4px rgba(61, 138, 46, 0.55));
}

/* Tooltip — paper-cream aesthetic to feel cohesive */
.leaflet-tooltip.ae24-zone-tip {
    background: #f3eee2;
    color: #1c1a16;
    border: 1px solid #c9c1a8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 4px 10px;
    border-radius: 3px;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}
.leaflet-tooltip.ae24-zone-tip:before {
    border-top-color: #c9c1a8;   /* arrow stroke */
}
.ae24-zone-tip-name { font-weight: 600; }
.ae24-zone-tip-meta {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 10.5px;
    color: #6b685b;
    letter-spacing: 0.04em;
}
.ae24-zone-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    background: #c08a2c;
    color: #fff;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 9px;
    letter-spacing: 0.12em;
    font-weight: 700;
    border-radius: 2px;
    text-transform: uppercase;
    vertical-align: 2px;
}

/* Cluster bubble — moss green, count in the body font (Manrope) */
.ae24-cluster-wrap {
    background: transparent;
    border: 0;
}
.ae24-cluster {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #3d8a2e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 0 0 4px rgba(61, 138, 46, 0.22);
    transition: transform 0.18s cubic-bezier(.2,.7,.2,1);
}
.ae24-cluster-wrap:hover .ae24-cluster {
    transform: scale(1.12);
}

/* Accessibility city list — hidden visually but available to
   screenreaders and search-engine crawlers (risk H2 / D1). */
.ae24-zone-cities-a11y {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    list-style: none;
}

/* Print stylesheet — hide the map; the A11y list surfaces in print (risk H3) */
@media print {
    .ae24-zone-map {
        display: none;
    }
    .ae24-zone-cities-a11y {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        list-style: disc;
        padding-left: 24px;
        margin: 8px 0;
    }
}

/* Editor placeholder (shown only in Elementor editor when zone unresolved) */
.ae24-zone-map-placeholder {
    /* Inline styles handle this; rule exists for editor cache clearing */
}

/* Mobile tweaks — wider hit-targets, smaller cluster threshold visual */
@media (max-width: 768px) {
    .ae24-zone-map {
        --ae24-marker-radius: 5.5;   /* easier to tap */
    }
    .ae24-cluster { width: 32px; height: 32px; font-size: 12px; }
}

/* ── Big touch zoom controls (mobile / tablet) ───────────────────
   Opt-in via .ae24-big-touch class (set by JS when payload.bigTouch
   is true). Applies at <= 768px so desktop keeps the slim default. */
@media (max-width: 768px) {
    .ae24-big-touch .leaflet-bar a.leaflet-control-zoom-in,
    .ae24-big-touch .leaflet-bar a.leaflet-control-zoom-out {
        width:  44px;
        height: 44px;
        line-height: 44px;
        font-size: 22px;
        font-weight: 600;
    }
    .ae24-big-touch .leaflet-control-zoom {
        border: 1px solid #c9c1a8;
        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
        border-radius: 6px;
        overflow: hidden;
    }
    .ae24-big-touch .leaflet-control-zoom a {
        border-color: #d6cdb2 !important;
        color: #1c1a16;
        background: #f3eee2;
    }
    .ae24-big-touch .leaflet-control-zoom a:hover,
    .ae24-big-touch .leaflet-control-zoom a:active {
        background: #3d8a2e;
        color: #fff;
    }
}

/* On tablet (769-1024 px) keep desktop-size but slightly nudge up */
@media (min-width: 769px) and (max-width: 1024px) {
    .ae24-big-touch .leaflet-bar a.leaflet-control-zoom-in,
    .ae24-big-touch .leaflet-bar a.leaflet-control-zoom-out {
        width:  36px;
        height: 36px;
        line-height: 36px;
        font-size: 18px;
    }
}

/* Device debug attribute — invisible but lets the editor verify in DevTools */
.ae24-zone-map[data-ae24-device] {
    position: relative;
}

/* ============================================================
   ZONE MAP · Editorial Overlay (Variant A) — v2.9.13
   A floating info card (zone name + live città/quartieri counts +
   legend) plus a labelled anchor pin on the namesake city. Purely
   additive over the base .ae24-zone-map; positioning lives on a
   .ae24-zone-map-wrap that wraps the Leaflet container.
   ============================================================ */
.ae24-zone-map-wrap {
    position: relative;
    /* Contain the overlay's z-index inside this wrapper so its high stacking
       value can't leak to the page root and paint over the sticky site header
       (#site-header-sticky, z-index 50). Internal map↔overlay ordering is
       unaffected. */
    isolation: isolate;
    /* Fallback tokens; Elementor overrides per-instance via selectors.
       Mirrored here so the overlay (a sibling of .ae24-map) can read them. */
    --ae24-ov-accent:   #3d8a2e;
    --ae24-marker-city: #3d8a2e;
    --ae24-marker-nbhd: #c08a2c;
    --ae24-bound-stroke:#3d8a2e;
}

/* The card */
.ae24-zone-overlay {
    position: absolute;
    z-index: 600;
    pointer-events: none;            /* never intercept map drag/zoom */
    max-width: 232px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(28, 26, 22, 0.10);
    border-radius: 14px;
    padding: 13px 15px;
    box-shadow: 0 18px 40px -18px rgba(28, 26, 22, 0.5);
    font-family: 'Manrope', system-ui, sans-serif;
    color: #1c1a16;
}
.ae24-zone-overlay--top-left     { top: 14px;    left: 14px;  }
.ae24-zone-overlay--top-right    { top: 14px;    right: 14px; }
.ae24-zone-overlay--bottom-left  { bottom: 24px; left: 14px;  }
.ae24-zone-overlay--bottom-right { bottom: 24px; right: 14px; }

.ae24-zone-ov-eyebrow {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ae24-ov-accent, #3d8a2e);
}
.ae24-zone-ov-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 3px 0 0;
}
.ae24-zone-ov-counts {
    display: flex;
    gap: 16px;
    margin-top: 11px;
}
.ae24-zone-ov-stat {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.ae24-zone-ov-stat .num {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 700;
    font-size: 21px;
}
.ae24-zone-ov-stat .lab {
    font-size: 11px;
    color: #6b685b;
    margin-top: 4px;
}
.ae24-zone-ov-stat.is-city .num { color: var(--ae24-marker-city, #3d8a2e); }
.ae24-zone-ov-stat.is-nbhd .num { color: var(--ae24-marker-nbhd, #c08a2c); }

.ae24-zone-ov-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(28, 26, 22, 0.10);
}
.ae24-zone-ov-legend .row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #54514a;
}
.ae24-zone-ov-legend .sw {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.3px solid #1c1a16;
    flex: none;
}
.ae24-zone-ov-legend .sw.is-city { background: var(--ae24-marker-city, #3d8a2e); }
.ae24-zone-ov-legend .sw.is-nbhd { background: var(--ae24-marker-nbhd, #c08a2c); }
.ae24-zone-ov-legend .sw.is-zone {
    background: rgba(102, 185, 74, 0.18);
    border-style: dashed;
    border-color: var(--ae24-bound-stroke, #3d8a2e);
}

/* Anchor pin (namesake city) — divIcon set by JS */
.ae24-zone-anchor { background: transparent; border: 0; }
.ae24-zone-anchor-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--ae24-marker-city, #3d8a2e);
    border: 3px solid #fff;
    box-shadow: 0 3px 9px rgba(28, 26, 22, 0.45);
}
.ae24-zone-anchor-pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--ae24-marker-city, #3d8a2e);
    opacity: 0.30;
}
@media (prefers-reduced-motion: no-preference) {
    .ae24-zone-anchor-pulse { animation: ae24-anchor-pulse 2.6s ease-out infinite; }
}
@keyframes ae24-anchor-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0;   }
}
.leaflet-tooltip.ae24-zone-anchor-label {
    background: #1c1a16;
    color: #fff;
    border: 0;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 8px;
    border-radius: 6px;
    box-shadow: 0 5px 14px -4px rgba(28, 26, 22, 0.6);
}
.leaflet-tooltip.ae24-zone-anchor-label:before { display: none; }   /* no arrow */

/* Responsive — keep the card compact on small screens */
@media (max-width: 768px) {
    .ae24-zone-overlay { max-width: 62%; padding: 11px 13px; }
    .ae24-zone-ov-name { font-size: 16px; }
    .ae24-zone-ov-stat .num { font-size: 18px; }
    /* clear the big-touch zoom buttons when the card is bottom-anchored */
    .ae24-zone-overlay--bottom-left,
    .ae24-zone-overlay--bottom-right { bottom: 58px; }
}
@media (max-width: 480px) {
    .ae24-zone-ov-legend { display: none; }
}

/* Print — overlay/anchor hidden with the map; the a11y list carries the content */
@media print {
    .ae24-zone-overlay,
    .ae24-zone-anchor,
    .leaflet-tooltip.ae24-zone-anchor-label { display: none !important; }
}

/* ============================================================
   CITY MAP · Info Overlay + center pin — v2.9.74
   A floating card naming the city (+ legend) over .ae24-map, plus a
   branded pulsing pin for places OSM has no admin polygon for (frazioni
   Nominatim only returns a point for — e.g. Gualdrasco). Mirrors the
   zone overlay's visual language. Positioning lives on .ae24-map-wrap,
   which wraps the single Leaflet container.
   ============================================================ */
.ae24-map-wrap {
    position: relative;
    /* Keep the overlay's high z-index from leaking to the page root. */
    isolation: isolate;
    --ae24-ov-accent:    #3d8a2e;
    --ae24-marker-city:  #3d8a2e;
    --ae24-bound-stroke: #3d8a2e;
}

.ae24-city-overlay {
    position: absolute;
    z-index: 600;
    pointer-events: none;            /* never intercept map drag/zoom */
    max-width: 232px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(28, 26, 22, 0.10);
    border-radius: 14px;
    padding: 13px 15px;
    box-shadow: 0 18px 40px -18px rgba(28, 26, 22, 0.5);
    font-family: 'Manrope', system-ui, sans-serif;
    color: #1c1a16;
}
.ae24-city-overlay--top-left     { top: 14px;    left: 14px;  }
.ae24-city-overlay--top-right    { top: 14px;    right: 14px; }
.ae24-city-overlay--bottom-left  { bottom: 24px; left: 14px;  }
.ae24-city-overlay--bottom-right { bottom: 24px; right: 14px; }

.ae24-city-ov-eyebrow {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ae24-ov-accent, #3d8a2e);
}
.ae24-city-ov-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 3px 0 0;
}
.ae24-city-ov-sub {
    font-size: 12.5px;
    color: #6b685b;
    margin-top: 4px;
    line-height: 1.3;
}
.ae24-city-ov-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(28, 26, 22, 0.10);
}
.ae24-city-ov-legend .row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #54514a;
}
.ae24-city-ov-legend .sw {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.3px solid #1c1a16;
    flex: none;
}
.ae24-city-ov-legend .sw.is-city { background: var(--ae24-marker-city, #3d8a2e); }
.ae24-city-ov-legend .sw.is-zone {
    background: rgba(102, 185, 74, 0.18);
    border-style: dashed;
    border-color: var(--ae24-bound-stroke, #3d8a2e);
}

/* No-polygon places render a dashed coverage-radius circle (an L.circle styled
   by the boundary CSS vars), not a pin — so nothing extra is needed here. */

@media (max-width: 768px) {
    .ae24-city-overlay { max-width: 64%; padding: 11px 13px; }
    .ae24-city-ov-name { font-size: 16px; }
    /* clear the big-touch zoom buttons when the card is bottom-anchored */
    .ae24-city-overlay--bottom-left,
    .ae24-city-overlay--bottom-right { bottom: 58px; }
}

@media print {
    .ae24-city-overlay { display: none !important; }
}