@charset "UTF-8";

/* ============================================================
   AE24 Mega Menu v3.0.0
   Sidebar (6 styles) + brand list (5 hovers) + adaptive search.
   All classes namespaced ae24mm-* to avoid theme conflicts.
   ============================================================ */

:root {
  --ae24mm-primary:      #66B94A;
  --ae24mm-primary-dk:   #4FA336;
  --ae24mm-primary-soft: rgba(102,185,74,0.08);
  --ae24mm-primary-soft-2: rgba(102,185,74,0.16);
  --ae24mm-accent:       #00D563;
  --ae24mm-dark:         #1a1a1a;
  --ae24mm-border:       #e9ecef;
  --ae24mm-gray-50:      #fafafa;
  --ae24mm-gray-100:     #f8f9fa;
  --ae24mm-gray-200:     #e9ecef;
  --ae24mm-gray-300:     #dee2e6;
  --ae24mm-gray-400:     #ced4da;
  --ae24mm-gray-500:     #adb5bd;
  --ae24mm-gray-600:     #6c757d;
  --ae24mm-gray-700:     #495057;
  --ae24mm-gray-800:     #343a40;
  --ae24mm-shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --ae24mm-shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --ae24mm-shadow-lg:    0 14px 50px rgba(0,0,0,0.12);
  --ae24mm-max-width:    1170px;
  --ae24mm-z:            9900;
}

/* Hide native WP submenu */
.ae24mm-trigger .ae24mm-sub-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
[hidden] { display: none !important; }

/* ── Panel base ──────────────────────────────────────────── */
.ae24mm-panel {
  position: absolute;
  left: 0; right: 0;
  z-index: var(--ae24mm-z);
  /* Always non-interactive: the outer wrapper is full-viewport-width but the
     visible card is centered at max 1170px. If the outer catches hover the
     side gutters (the empty space between the card and the viewport edge)
     keep the panel open after the cursor leaves the visible card. The inner
     element gets pointer-events:auto so only the card area is hoverable.
     mouseenter/mouseleave listeners on the outer still fire because the
     events bubble up from the inner. */
  pointer-events: none;
  visibility: hidden;
}
.ae24mm-panel--open { visibility: visible; }

.ae24mm-anim--fade  { opacity: 0; transition: opacity .2s, visibility .2s; }
.ae24mm-anim--fade.ae24mm-panel--open { opacity: 1; }
.ae24mm-anim--slide { opacity: 0; transform: translateY(-10px); transition: opacity .2s, transform .2s, visibility .2s; }
.ae24mm-anim--slide.ae24mm-panel--open { opacity: 1; transform: translateY(0); }
.ae24mm-anim--scale { opacity: 0; transform: scaleY(.97); transform-origin: top center; transition: opacity .18s, transform .18s, visibility .18s; }
.ae24mm-anim--scale.ae24mm-panel--open { opacity: 1; transform: scaleY(1); }

.ae24mm-panel-inner {
  max-width: var(--ae24mm-max-width);
  margin: 0 auto;
  background: white;
  border-radius: 14px;
  box-shadow: var(--ae24mm-shadow-lg);
  overflow: hidden;
  border: 1px solid var(--ae24mm-border);
  border-top: 3px solid var(--ae24mm-primary);
  /* The visible card is the actual hover hitbox — leaving it sideways
     into the gutter now triggers mouseleave on the outer panel correctly. */
  pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════
   MENU SHELL — sidebar + main panel grid
   ════════════════════════════════════════════════════════════ */
.ae24mm-menu {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 460px;
}
.ae24mm-side {
  background: var(--ae24mm-gray-100);
  border-right: 1px solid var(--ae24mm-border);
  padding: 16px 14px;
}

.ae24mm-main { padding: 28px 36px; display: flex; flex-direction: column; }
.ae24mm-main-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ae24mm-border);
  margin-bottom: 22px;
  gap: 16px;
}
.ae24mm-main-title { display: flex; align-items: center; gap: 12px; }
.ae24mm-main-title-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--ae24mm-primary-soft);
  color: var(--ae24mm-primary-dk);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ae24mm-main-title-ico svg { width: 20px; height: 20px; }
.ae24mm-main-title h3 { font-size: 17px; font-weight: 700; color: var(--ae24mm-dark); line-height: 1.1; margin: 0; }
.ae24mm-main-title small { display: block; font-size: 12px; color: var(--ae24mm-gray-500); font-weight: 500; margin-top: 3px; }

.ae24mm-main-link {
  font-size: 13px;
  color: var(--ae24mm-primary-dk) !important;
  text-decoration: none !important;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ae24mm-border);
  background: white;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ae24mm-main-link svg { width: 12px; height: 12px; transition: transform .15s; }
.ae24mm-main-link:hover { border-color: var(--ae24mm-primary); background: var(--ae24mm-primary-soft); }
.ae24mm-main-link:hover svg { transform: translateX(3px); }

.ae24mm-foot {
  margin-top: auto;             /* glue to bottom of flex parent */
  padding-top: 20px;
  border-top: 1px solid var(--ae24mm-border);
  display: flex; align-items: center; gap: 14px;
}
.ae24mm-search {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  border-radius: 999px !important;
  background: var(--ae24mm-gray-100);
  border: 0 !important;                    /* no border in default state */
  outline: 0 !important;
  box-shadow: none;
  transition: background .15s ease, box-shadow .15s ease;
  max-width: 380px;
}
.ae24mm-search:hover {
  background: #eef0f2;          /* slight darken on hover */
}
.ae24mm-search:focus-within {
  background: white;
  box-shadow: 0 0 0 1px var(--ae24mm-primary), 0 4px 14px rgba(102,185,74,.15);
}
.ae24mm-search svg { width: 14px; height: 14px; color: var(--ae24mm-gray-400); flex-shrink: 0; }
/* Reset theme defaults that leak into our search input — themes often add
   border/box-shadow/background on input[type=search] which then renders as
   a visible rectangle inside our pill-shaped wrapper. */
.ae24mm-search input,
.ae24mm-search input[type="search"],
.ae24mm-search input[type="text"] {
  flex: 1;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  font-family: inherit;
  font-size: 13px;
  color: var(--ae24mm-dark);
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
.ae24mm-search input:focus,
.ae24mm-search input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.ae24mm-search input::placeholder { color: var(--ae24mm-gray-400); opacity: 1; }
/* Webkit-specific: kill the search input's clear button "×" and decoration */
.ae24mm-search input::-webkit-search-decoration,
.ae24mm-search input::-webkit-search-cancel-button,
.ae24mm-search input::-webkit-search-results-button,
.ae24mm-search input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}
.ae24mm-foot-count { margin-left: auto; font-size: 12px; color: var(--ae24mm-gray-500); }
.ae24mm-foot-count b { color: var(--ae24mm-dark); font-weight: 700; }
.ae24mm-foot-cta {
  font-size: 13px;
  color: var(--ae24mm-primary-dk) !important;
  text-decoration: none !important;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ae24mm-primary);
  color: white !important;
  transition: all .15s;
}
.ae24mm-foot-cta:hover { background: var(--ae24mm-primary-dk); }
.ae24mm-foot-cta svg { width: 12px; height: 12px; transition: transform .15s; }
.ae24mm-foot-cta:hover svg { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════
   SIDEBAR CARD scaffold
   ════════════════════════════════════════════════════════════ */
.ae24mm-scard {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  text-decoration: none !important;
  color: var(--ae24mm-gray-700) !important;
  margin-bottom: 4px;
  transition: all .18s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ae24mm-scard-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .18s;
}
.ae24mm-scard-ico svg { width: 22px; height: 22px; }
.ae24mm-scard-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ae24mm-scard-name { font-size: 14px; font-weight: 700; color: var(--ae24mm-dark); line-height: 1.2; }
.ae24mm-scard-meta { font-size: 12px; color: var(--ae24mm-gray-500); margin-top: 2px; }
.ae24mm-scard-arrow {
  color: var(--ae24mm-gray-400); flex-shrink: 0;
  transition: all .18s;
  position: relative; z-index: 1;
}
.ae24mm-scard-arrow svg { width: 14px; height: 14px; }

/* Number watermark — toggleable */
.ae24mm-show-numbers .ae24mm-scard::before {
  content: attr(data-num);
  position: absolute;
  right: 10px; bottom: -10px;
  font-size: 38px; font-weight: 800;
  color: var(--ae24mm-gray-200);
  letter-spacing: -1px; line-height: 1;
  pointer-events: none;
  transition: color .18s;
}

/* ── ss1 ── PREMIUM CARD ─────────────────────────────────── */
.ae24mm-ss1 .ae24mm-scard { border-radius: 14px; background: white; border: 1px solid var(--ae24mm-border); }
.ae24mm-ss1 .ae24mm-scard-ico { background: white; box-shadow: var(--ae24mm-shadow-sm); color: var(--ae24mm-gray-700); }
.ae24mm-ss1 .ae24mm-scard:hover { border-color: var(--ae24mm-primary); transform: translateX(2px); }
.ae24mm-ss1 .ae24mm-scard:hover .ae24mm-scard-ico { color: var(--ae24mm-primary); }
.ae24mm-ss1 .ae24mm-scard.is-active { border-color: var(--ae24mm-primary); box-shadow: 0 4px 14px rgba(102,185,74,.18); }
.ae24mm-ss1 .ae24mm-scard.is-active .ae24mm-scard-ico { background: var(--ae24mm-primary); color: white; }
.ae24mm-ss1 .ae24mm-scard.is-active::before { color: rgba(102,185,74,.22) !important; }
.ae24mm-ss1 .ae24mm-scard.is-active .ae24mm-scard-arrow { color: var(--ae24mm-primary); }

/* ── ss2 ── SIDE STRIPE (closest to original) ────────────── */
.ae24mm-ss2 .ae24mm-side { padding: 22px 0; }
.ae24mm-ss2 .ae24mm-scard {
  border-radius: 0; background: transparent;
  border-left: 3px solid transparent;
  padding: 14px 22px; margin-bottom: 2px;
}
.ae24mm-ss2 .ae24mm-scard-ico { background: white; box-shadow: var(--ae24mm-shadow-sm); color: var(--ae24mm-gray-700); border-radius: 8px; }
.ae24mm-ss2 .ae24mm-scard::before { right: 18px !important; bottom: -8px !important; }
.ae24mm-ss2 .ae24mm-scard:hover { background: rgba(255,255,255,.6); }
.ae24mm-ss2 .ae24mm-scard:hover .ae24mm-scard-ico { color: var(--ae24mm-primary); }
.ae24mm-ss2 .ae24mm-scard.is-active { background: white; border-left-color: var(--ae24mm-primary); }
.ae24mm-ss2 .ae24mm-scard.is-active .ae24mm-scard-ico { background: var(--ae24mm-primary); color: white; }
.ae24mm-ss2 .ae24mm-scard.is-active .ae24mm-scard-arrow { color: var(--ae24mm-primary); }

/* ── ss3 ── FILLED ACTIVE ─────────────────────────────────── */
.ae24mm-ss3 .ae24mm-scard { border-radius: 12px; background: transparent; }
.ae24mm-ss3 .ae24mm-scard-ico { background: white; box-shadow: var(--ae24mm-shadow-sm); color: var(--ae24mm-gray-700); }
.ae24mm-ss3 .ae24mm-scard:hover { background: white; box-shadow: var(--ae24mm-shadow-sm); }
.ae24mm-ss3 .ae24mm-scard:hover .ae24mm-scard-ico { color: var(--ae24mm-primary); }
.ae24mm-ss3 .ae24mm-scard.is-active {
  background: linear-gradient(135deg, var(--ae24mm-primary) 0%, var(--ae24mm-primary-dk) 100%);
  box-shadow: 0 6px 18px rgba(102,185,74,.32);
}
.ae24mm-ss3 .ae24mm-scard.is-active::before { color: rgba(255,255,255,.16) !important; }
.ae24mm-ss3 .ae24mm-scard.is-active .ae24mm-scard-name { color: white; }
.ae24mm-ss3 .ae24mm-scard.is-active .ae24mm-scard-meta { color: rgba(255,255,255,.78); }
.ae24mm-ss3 .ae24mm-scard.is-active .ae24mm-scard-ico { background: rgba(255,255,255,.2); color: white; box-shadow: none; }
.ae24mm-ss3 .ae24mm-scard.is-active .ae24mm-scard-arrow { color: white; }

/* ── ss4 ── OUTLINED ───────────────────────────────────────── */
.ae24mm-ss4 .ae24mm-side { background: white; }
.ae24mm-ss4 .ae24mm-scard { border-radius: 12px; background: var(--ae24mm-gray-50); border: 2px solid transparent; }
.ae24mm-ss4 .ae24mm-scard-ico { background: white; color: var(--ae24mm-gray-700); border: 1px solid var(--ae24mm-border); }
.ae24mm-ss4 .ae24mm-scard:hover { border-color: var(--ae24mm-gray-300); }
.ae24mm-ss4 .ae24mm-scard:hover .ae24mm-scard-ico { color: var(--ae24mm-primary); border-color: var(--ae24mm-primary); }
.ae24mm-ss4 .ae24mm-scard.is-active { background: var(--ae24mm-primary-soft); border-color: var(--ae24mm-primary); }
.ae24mm-ss4 .ae24mm-scard.is-active::before { color: rgba(102,185,74,.22) !important; }
.ae24mm-ss4 .ae24mm-scard.is-active .ae24mm-scard-ico { background: white; border-color: var(--ae24mm-primary); color: var(--ae24mm-primary); }
.ae24mm-ss4 .ae24mm-scard.is-active .ae24mm-scard-arrow { color: var(--ae24mm-primary); }

/* ── ss5 ── COMPACT PILLS ─────────────────────────────────── */
.ae24mm-ss5 .ae24mm-side { padding: 14px 12px; }
.ae24mm-ss5 .ae24mm-scard {
  border-radius: 999px; padding: 10px 14px;
  margin-bottom: 6px; background: white;
  border: 1px solid var(--ae24mm-border); gap: 10px;
}
.ae24mm-ss5 .ae24mm-scard-ico {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--ae24mm-gray-100); color: var(--ae24mm-gray-700);
}
.ae24mm-ss5 .ae24mm-scard-ico svg { width: 18px; height: 18px; }
.ae24mm-ss5 .ae24mm-scard-name { font-size: 13px; }
.ae24mm-ss5 .ae24mm-scard-meta { font-size: 11px; }
.ae24mm-ss5 .ae24mm-scard-arrow { display: none; }
.ae24mm-ss5 .ae24mm-scard::before { font-size: 28px !important; right: 14px !important; bottom: -6px !important; }
.ae24mm-ss5 .ae24mm-scard:hover { border-color: var(--ae24mm-primary); }
.ae24mm-ss5 .ae24mm-scard:hover .ae24mm-scard-ico { background: var(--ae24mm-primary-soft); color: var(--ae24mm-primary); }
.ae24mm-ss5 .ae24mm-scard.is-active {
  border-color: var(--ae24mm-primary);
  background: linear-gradient(90deg, white 0%, var(--ae24mm-primary-soft) 100%);
}
.ae24mm-ss5 .ae24mm-scard.is-active::before { color: rgba(102,185,74,.22) !important; }
.ae24mm-ss5 .ae24mm-scard.is-active .ae24mm-scard-ico { background: var(--ae24mm-primary); color: white; }

/* ── ss6 ── EDITORIAL MINIMAL ─────────────────────────────── */
.ae24mm-ss6 .ae24mm-side { background: white; padding: 22px 12px; }
.ae24mm-ss6 .ae24mm-scard {
  border-radius: 0; background: transparent;
  padding: 13px 12px;
  border-bottom: 1px solid var(--ae24mm-gray-100); margin-bottom: 0;
}
.ae24mm-ss6 .ae24mm-scard:last-child { border-bottom: none; }
.ae24mm-ss6 .ae24mm-scard-ico { background: transparent; border: 1.5px solid var(--ae24mm-gray-200); color: var(--ae24mm-gray-600); border-radius: 8px; }
.ae24mm-ss6 .ae24mm-scard::before { font-size: 26px !important; right: 8px !important; bottom: -4px !important; color: var(--ae24mm-gray-100) !important; }
.ae24mm-ss6 .ae24mm-scard:hover { background: var(--ae24mm-gray-50); }
.ae24mm-ss6 .ae24mm-scard:hover .ae24mm-scard-ico { border-color: var(--ae24mm-primary); color: var(--ae24mm-primary); }
.ae24mm-ss6 .ae24mm-scard:hover .ae24mm-scard-name { color: var(--ae24mm-primary-dk); }
.ae24mm-ss6 .ae24mm-scard.is-active { background: linear-gradient(90deg, var(--ae24mm-primary-soft) 0%, transparent 80%); }
.ae24mm-ss6 .ae24mm-scard.is-active::before { color: var(--ae24mm-primary) !important; opacity: .35; }
.ae24mm-ss6 .ae24mm-scard.is-active .ae24mm-scard-ico { border-color: var(--ae24mm-primary); background: var(--ae24mm-primary); color: white; }
.ae24mm-ss6 .ae24mm-scard.is-active .ae24mm-scard-name { color: var(--ae24mm-primary-dk); }
.ae24mm-ss6 .ae24mm-scard.is-active .ae24mm-scard-arrow { color: var(--ae24mm-primary); }

/* ════════════════════════════════════════════════════════════
   BRAND LIST — base + 5 hover variants
   ════════════════════════════════════════════════════════════ */
.ae24mm-brands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  flex: 1;
  align-content: start;
}
.ae24mm-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 4px;
  text-decoration: none !important;
  color: var(--ae24mm-gray-700) !important;
  font-size: 14.5px; font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: all .14s;
  position: relative;
}
.ae24mm-brand-arrow {
  margin-left: auto;
  opacity: 0;
  transform: translateX(-6px);
  transition: all .14s;
  color: var(--ae24mm-primary);
}
.ae24mm-brand-arrow svg { width: 13px; height: 13px; }
/* Brand dot bullet — fixed 6×6px size. Hover ONLY brightens opacity 0.45 → 1.
   Size is LOCKED via min/max width+height so no variant can grow the dot.
   This matches the mobile menu's dot behavior 1:1. */
.ae24mm-brand::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  min-width: 6px; max-width: 6px;
  min-height: 6px; max-height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--ae24mm-primary);
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity .14s ease;
  transform: none;
}

/* ── bh1 ── Slide right (default) ────────────────────────── */
.ae24mm-bh1 .ae24mm-brand:hover {
  color: var(--ae24mm-primary-dk) !important;
  border-bottom-color: rgba(102,185,74,.2);
  padding-left: 8px;
}
.ae24mm-bh1 .ae24mm-brand:hover::before { opacity: 1; }

/* ── bh2 ── Background fill ──────────────────────────────── */
.ae24mm-bh2 .ae24mm-brand { border-radius: 8px; }
.ae24mm-bh2 .ae24mm-brand:hover {
  background: var(--ae24mm-primary-soft);
  color: var(--ae24mm-primary-dk) !important;
  font-weight: 600;
  padding-left: 10px;
}
.ae24mm-bh2 .ae24mm-brand:hover::before { opacity: 1; }

/* ── bh3 ── Underline grow ───────────────────────────────── */
.ae24mm-bh3 .ae24mm-brand { border-radius: 0; position: relative; }
.ae24mm-bh3 .ae24mm-brand::after {
  content: '';
  position: absolute;
  left: 4px; bottom: 4px;
  width: 0; height: 2px;
  background: var(--ae24mm-primary);
  transition: width .25s ease;
}
.ae24mm-bh3 .ae24mm-brand:hover { color: var(--ae24mm-primary-dk) !important; }
.ae24mm-bh3 .ae24mm-brand:hover::after { width: calc(100% - 16px); }
.ae24mm-bh3 .ae24mm-brand:hover::before { opacity: 1; }

/* ── bh4 ── Arrow reveal ─────────────────────────────────── */
.ae24mm-bh4 .ae24mm-brand { border-radius: 8px; padding-right: 8px; }
.ae24mm-bh4 .ae24mm-brand:hover {
  background: white;
  box-shadow: 0 1px 0 var(--ae24mm-border);
  color: var(--ae24mm-primary-dk) !important;
}
.ae24mm-bh4 .ae24mm-brand:hover .ae24mm-brand-arrow { opacity: 1; transform: translateX(0); }
.ae24mm-bh4 .ae24mm-brand:hover::before { opacity: 1; }

/* ── bh5 ── Card lift ────────────────────────────────────── */
.ae24mm-bh5 .ae24mm-brand { border-radius: 10px; border: 1px solid transparent; }
.ae24mm-bh5 .ae24mm-brand:hover {
  background: white;
  border-color: var(--ae24mm-primary);
  box-shadow: 0 4px 12px rgba(102,185,74,.18);
  transform: translateY(-2px);
  color: var(--ae24mm-primary-dk) !important;
}
.ae24mm-bh5 .ae24mm-brand:hover::before { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   SEARCH RESULTS — adaptive layouts
   ════════════════════════════════════════════════════════════ */
.ae24mm-results,
.ae24mm-brands {
  flex: 1;                              /* keep filling, glue foot to bottom */
  align-content: start;
  min-height: 280px;                    /* stable area to avoid panel jumping */
  transition: opacity .14s ease, gap .25s ease;
}

/* Crossfade swap state */
.ae24mm-results.is-swapping,
.ae24mm-brands.is-swapping {
  opacity: 0;
  pointer-events: none;
}

/* Staggered item entrance — applies on every innerHTML rebuild */
@keyframes ae24mm-item-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ae24mm-results > *,
.ae24mm-brands > * {
  animation: ae24mm-item-in .26s cubic-bezier(.2,.7,.4,1) both;
}
.ae24mm-results > *:nth-child(1),  .ae24mm-brands > *:nth-child(1)  { animation-delay: 0ms; }
.ae24mm-results > *:nth-child(2),  .ae24mm-brands > *:nth-child(2)  { animation-delay: 16ms; }
.ae24mm-results > *:nth-child(3),  .ae24mm-brands > *:nth-child(3)  { animation-delay: 32ms; }
.ae24mm-results > *:nth-child(4),  .ae24mm-brands > *:nth-child(4)  { animation-delay: 48ms; }
.ae24mm-results > *:nth-child(5),  .ae24mm-brands > *:nth-child(5)  { animation-delay: 64ms; }
.ae24mm-results > *:nth-child(6),  .ae24mm-brands > *:nth-child(6)  { animation-delay: 80ms; }
.ae24mm-results > *:nth-child(7),  .ae24mm-brands > *:nth-child(7)  { animation-delay: 92ms; }
.ae24mm-results > *:nth-child(8),  .ae24mm-brands > *:nth-child(8)  { animation-delay: 104ms; }
.ae24mm-results > *:nth-child(n+9),
.ae24mm-brands  > *:nth-child(n+9) { animation-delay: 116ms; }

.ae24mm-results[data-count] { display: grid; gap: 8px 24px; }

/* Many — keep brand grid look (compact dot list) */
.ae24mm-results[data-count="many"] { grid-template-columns: repeat(4, 1fr); }
.ae24mm-results[data-count="many"] .ae24mm-rcard {
  background: transparent; border: none; padding: 9px 4px;
  flex-direction: row; gap: 11px; align-items: center;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.ae24mm-results[data-count="many"] .ae24mm-rcard .ae24mm-rmeta,
.ae24mm-results[data-count="many"] .ae24mm-rcard .ae24mm-rcta,
.ae24mm-results[data-count="many"] .ae24mm-rcard .ae24mm-rico { display: none; }
.ae24mm-results[data-count="many"] .ae24mm-rcard .ae24mm-rname { font-size: 14.5px; font-weight: 500; }
.ae24mm-results[data-count="many"] .ae24mm-rcard::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  min-width: 6px; max-width: 6px;
  min-height: 6px; max-height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--ae24mm-primary);
  opacity: 0.45;
  flex-shrink: 0;
  transition: opacity .14s ease;
  transform: none;
}
.ae24mm-results[data-count="many"] .ae24mm-rcard:hover {
  color: var(--ae24mm-primary-dk) !important;
  border-bottom-color: rgba(102,185,74,.2);
  padding-left: 8px;
}
/* Hover: opacity ONLY — dot stays 6×6px */
.ae24mm-results[data-count="many"] .ae24mm-rcard:hover::before { opacity: 1; }

/* 4 results */
.ae24mm-results[data-count="4"] { grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* 3 results */
.ae24mm-results[data-count="3"] { grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* 2 results */
.ae24mm-results[data-count="2"] { grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* 1 result */
.ae24mm-results[data-count="1"] { grid-template-columns: 1fr; }
/* 0 results */
.ae24mm-results[data-count="0"] { grid-template-columns: 1fr; }

/* Result card base */
.ae24mm-rcard {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 14px;
  background: var(--ae24mm-gray-50);
  border: 1.5px solid var(--ae24mm-border);
  text-decoration: none !important;
  color: inherit !important;
  transition: all .18s ease;
  position: relative;
  overflow: hidden;
}
.ae24mm-rcard:hover {
  background: white;
  border-color: var(--ae24mm-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(102,185,74,.16);
}
.ae24mm-rico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: white;
  border: 1px solid var(--ae24mm-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ae24mm-gray-700);
  font-size: 13px; font-weight: 800;
  letter-spacing: -0.3px;
  flex-shrink: 0;
  transition: all .18s;
}
.ae24mm-rcard:hover .ae24mm-rico { background: var(--ae24mm-primary); border-color: var(--ae24mm-primary); color: white; }
.ae24mm-rname { font-size: 15px; font-weight: 700; color: var(--ae24mm-dark); }
.ae24mm-rmeta { font-size: 12px; color: var(--ae24mm-gray-500); }
.ae24mm-rcta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--ae24mm-border);
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--ae24mm-primary-dk);
}
.ae24mm-rcta svg { width: 11px; height: 11px; transition: transform .15s; }
.ae24mm-rcard:hover .ae24mm-rcta svg { transform: translateX(3px); }

/* 2-result variant — bigger, side-by-side */
.ae24mm-results[data-count="2"] .ae24mm-rcard {
  flex-direction: row; align-items: center;
  padding: 22px; gap: 16px;
}
.ae24mm-results[data-count="2"] .ae24mm-rico { width: 56px; height: 56px; font-size: 16px; }
.ae24mm-results[data-count="2"] .ae24mm-rname { font-size: 17px; }
.ae24mm-results[data-count="2"] .ae24mm-rcta {
  margin-top: 0; padding-top: 0; border-top: none; margin-left: auto;
}
.ae24mm-results[data-count="2"] .ae24mm-rtext {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}

/* 3-result */
.ae24mm-results[data-count="3"] .ae24mm-rico { width: 48px; height: 48px; font-size: 14px; }

/* 1-result hero */
.ae24mm-results[data-count="1"] .ae24mm-rcard {
  padding: 32px 36px;
  background: linear-gradient(135deg, white 0%, var(--ae24mm-primary-soft) 100%);
  border: 2px solid var(--ae24mm-primary);
  flex-direction: row; align-items: center;
  gap: 24px;
  box-shadow: 0 8px 30px rgba(102,185,74,.18);
}
.ae24mm-results[data-count="1"] .ae24mm-rcard:hover {
  transform: none;
  box-shadow: 0 12px 36px rgba(102,185,74,.26);
}
.ae24mm-results[data-count="1"] .ae24mm-rico {
  width: 80px; height: 80px;
  background: var(--ae24mm-primary);
  border-color: var(--ae24mm-primary);
  color: white; font-size: 20px;
  border-radius: 18px;
}
.ae24mm-results[data-count="1"] .ae24mm-rname { font-size: 28px; font-weight: 800; }
.ae24mm-results[data-count="1"] .ae24mm-rmeta { font-size: 14px; }
.ae24mm-results[data-count="1"] .ae24mm-rtext { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ae24mm-results[data-count="1"] .ae24mm-rcta {
  margin: 0; padding: 12px 22px;
  border: none;
  background: var(--ae24mm-primary);
  color: white;
  border-radius: 999px;
  font-size: 14px; font-weight: 700;
}
.ae24mm-results[data-count="1"] .ae24mm-rcta svg { color: white; }
.ae24mm-results[data-count="1"] .ae24mm-rcard:hover .ae24mm-rcta { background: var(--ae24mm-primary-dk); }

/* 0-result empty */
.ae24mm-empty {
  text-align: center;
  padding: 50px 30px;
  background: var(--ae24mm-gray-50);
  border-radius: 14px;
  border: 1.5px dashed var(--ae24mm-gray-300);
}
.ae24mm-empty-ico {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  background: white;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ae24mm-gray-500);
  border: 1.5px solid var(--ae24mm-border);
}
.ae24mm-empty-ico svg { width: 32px; height: 32px; }
.ae24mm-empty h4 { font-size: 18px; font-weight: 700; color: var(--ae24mm-dark); margin: 0 0 6px 0; }
.ae24mm-empty p { font-size: 14px; color: var(--ae24mm-gray-600); margin-bottom: 22px; }
.ae24mm-empty-suggest {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.ae24mm-empty-suggest a {
  text-decoration: none !important;
  background: white;
  border: 1px solid var(--ae24mm-border);
  padding: 7px 16px;
  border-radius: 999px;
  color: var(--ae24mm-gray-700) !important;
  font-weight: 600;
  font-size: 13px;
  transition: all .15s;
}
.ae24mm-empty-suggest a:hover {
  border-color: var(--ae24mm-primary);
  color: var(--ae24mm-primary) !important;
  background: var(--ae24mm-primary-soft);
}

/* ── Responsive: hide panel below breakpoint ────────────── */
@media (max-width: 1024px) {
  .ae24mm-panel { display: none !important; }
  .ae24mm-trigger .ae24mm-sub-hidden {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════
   v3.6 — 01 MARCHI SIDEBAR CARD · BRAND PANEL LAYOUTS · ZONES
   ════════════════════════════════════════════════════════════ */

/* ── Marchi card visual variants (cross-sidebar-style) ──── */
/* Marchi is hover-only (no parent page) — cursor signals "no link". */
.ae24mm-scard--marchi { position: relative; cursor: default; }
/* Star overlay on the icon chip */
.ae24mm-scard--mcs-star::after {
  content: '★';
  position: absolute;
  top: 9px; left: 38px;
  font-size: 12px;
  color: #ffaa00;
  pointer-events: none;
  line-height: 1;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
/* ss2 places the icon further left — adjust star position */
.ae24mm-ss2 .ae24mm-scard--mcs-star::after { left: 46px; }
.ae24mm-ss5 .ae24mm-scard--mcs-star::after { top: 4px; left: 32px; font-size: 10px; }

/* Count badge in meta */
.ae24mm-scard--mcs-badge .ae24mm-scard-meta strong {
  display: inline-block;
  padding: 1px 8px;
  background: var(--ae24mm-primary);
  color: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-right: 5px;
}

/* Gradient background (additive — works on top of any ss-N background) */
.ae24mm-scard--mcs-gradient:not(.is-active) {
  background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(102,185,74,0.10) 100%);
}
.ae24mm-scard--mcs-gradient.is-active {
  background-image: linear-gradient(135deg, rgba(102,185,74,0.10) 0%, rgba(102,185,74,0.20) 100%);
}

/* Accent stripe — show always (35% opacity inactive, full when active) */
.ae24mm-ss2 .ae24mm-scard--mcs-accent {
  border-left-color: rgba(102,185,74,.35);
}
.ae24mm-ss2 .ae24mm-scard--mcs-accent.is-active {
  border-left-color: var(--ae24mm-primary);
}
/* For non-ss2 sidebars, simulate accent with a small left-side bar */
.ae24mm-scard--mcs-accent:not(.ae24mm-ss2 .ae24mm-scard)::before {
  /* no-op — defer to the ::before number watermark on ss-N */
}

/* ════════════════════════════════════════════════════════════
   BRAND PANEL LAYOUTS (A1-A5)
   When the active sidebar card is the Marchi card, the main pane
   uses one of these layouts. Appliance cards still use the
   default flat 4-col grid (.ae24mm-brands).
   ════════════════════════════════════════════════════════════ */

/* A1 — Flat A-Z (matches the default .ae24mm-brands grid; no extra rules needed) */

/* A2 — A-Z grouped sections */
.ae24mm-bpl-grouped {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 8px;
  flex: 1;
  align-content: start;
}
.ae24mm-bpl-grouped .ae24mm-bgroup { display: flex; flex-direction: column; }
.ae24mm-bpl-grouped .ae24mm-bghead {
  font-size: 11px; font-weight: 800;
  color: var(--ae24mm-gray-500);
  letter-spacing: .7px;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--ae24mm-gray-100);
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* A3 — Featured + all */
.ae24mm-bpl-featured { display: flex; flex-direction: column; flex: 1; }
.ae24mm-bpl-featured .ae24mm-featured-head {
  font-size: 11px; font-weight: 800;
  color: var(--ae24mm-primary-dk);
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.ae24mm-bpl-featured .ae24mm-featured-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ae24mm-gray-100);
}
.ae24mm-bpl-featured .ae24mm-fcard {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px;
  background: linear-gradient(135deg, white 0%, var(--ae24mm-primary-soft) 100%);
  border: 1px solid var(--ae24mm-primary);
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--ae24mm-primary-dk) !important;
  font-size: 14px; font-weight: 800;
  transition: all .14s;
}
.ae24mm-bpl-featured .ae24mm-fcard::before { content: '★'; color: #ffaa00; font-size: 12px; }
.ae24mm-bpl-featured .ae24mm-fcard:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102,185,74,.15); }
.ae24mm-bpl-featured .ae24mm-brands {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
}

/* A4 — Letter rail */
.ae24mm-bpl-rail { display: flex; flex-direction: column; flex: 1; }
.ae24mm-bpl-rail .ae24mm-letter-rail {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ae24mm-gray-100);
}
.ae24mm-bpl-rail .ae24mm-letter-rail a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 30px;
  font-size: 12px; font-weight: 800;
  color: var(--ae24mm-gray-600);
  background: white;
  border: 1px solid var(--ae24mm-border);
  border-radius: 6px;
  text-decoration: none !important;
  transition: all .14s;
  padding: 0 6px;
  cursor: pointer;
}
.ae24mm-bpl-rail .ae24mm-letter-rail a.is-active {
  background: var(--ae24mm-primary);
  border-color: var(--ae24mm-primary);
  color: white !important;
}
.ae24mm-bpl-rail .ae24mm-letter-rail a:hover:not(.is-active) {
  border-color: var(--ae24mm-primary);
  color: var(--ae24mm-primary-dk) !important;
}

/* A5 — Avatar / logo cards */
.ae24mm-bpl-avatar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex: 1;
  align-content: start;
}
.ae24mm-bpl-avatar .ae24mm-avatar {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  background: white;
  border: 1px solid var(--ae24mm-border);
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--ae24mm-dark) !important;
  transition: all .14s;
}
.ae24mm-bpl-avatar .ae24mm-avatar:hover {
  border-color: var(--ae24mm-primary);
  box-shadow: 0 3px 10px rgba(102,185,74,.12);
}
.ae24mm-bpl-avatar .ae24mm-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ae24mm-primary-soft);
  color: var(--ae24mm-primary-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.ae24mm-bpl-avatar .ae24mm-avname { font-size: 13.5px; font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   ZONE STRIP (Z1-Z4) — rendered at the bottom of the panel
   (inside the mega menu chrome, never above the page nav)
   ════════════════════════════════════════════════════════════ */
.ae24mm-zones {
  padding: 12px 28px;
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--ae24mm-border);
}
.ae24mm-zones-label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--ae24mm-primary-dk);
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.ae24mm-zones-label svg { width: 13px; height: 13px; }
.ae24mm-zones-list {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  flex: 1;
}
.ae24mm-zones-list::-webkit-scrollbar { display: none; }
.ae24mm-zones-list a {
  flex-shrink: 0;
  text-decoration: none !important;
  font-weight: 700;
  color: var(--ae24mm-dark) !important;
  transition: all .14s;
  white-space: nowrap;
}

/* "All locations" CTA — pinned at the right of the strip, OUTSIDE the
   scrollable list, so it is never clipped or scrolled off-screen. */
.ae24mm-zones-more {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(102,185,74,0.12);
  border: 1px solid rgba(102,185,74,0.30);
  color: #2f6e22 !important;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
  text-decoration: none !important;
  transition: background .14s, border-color .14s, color .14s;
}
.ae24mm-zones-more:hover { background: var(--ae24mm-primary); border-color: var(--ae24mm-primary); color: #fff !important; }

/* Z1 — Classic pill strip */
.ae24mm-zones--pill { background: var(--ae24mm-gray-100); }
.ae24mm-zones--pill .ae24mm-zones-list a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: white;
  border: 1px solid var(--ae24mm-border);
  border-radius: 999px;
  font-size: 12.5px;
}
.ae24mm-zones--pill .ae24mm-zones-list a::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%; background: var(--ae24mm-primary);
}
.ae24mm-zones--pill .ae24mm-zones-list a:hover { border-color: var(--ae24mm-primary); color: var(--ae24mm-primary-dk) !important; }
.ae24mm-zones--pill .ae24mm-zones-list a.is-more { background: var(--ae24mm-primary); border-color: var(--ae24mm-primary); color: white !important; }
.ae24mm-zones--pill .ae24mm-zones-list a.is-more::before { background: white; opacity: .7; }

/* Z2 — Outlined buttons */
.ae24mm-zones--outlined { background: white; }
.ae24mm-zones--outlined .ae24mm-zones-list a {
  padding: 6px 13px;
  background: white;
  border: 1.5px solid var(--ae24mm-gray-300);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ae24mm-gray-700) !important;
}
.ae24mm-zones--outlined .ae24mm-zones-list a:hover { border-color: var(--ae24mm-primary); color: var(--ae24mm-primary-dk) !important; }
.ae24mm-zones--outlined .ae24mm-zones-list a.is-more {
  border-color: var(--ae24mm-primary);
  color: var(--ae24mm-primary-dk) !important;
  background: var(--ae24mm-primary-soft);
}

/* Z3 — Chunky buttons */
.ae24mm-zones--chunky {
  background: var(--ae24mm-gray-100);
  padding: 16px 28px;
  gap: 14px;
}
.ae24mm-zones--chunky .ae24mm-zones-list { gap: 8px; }
.ae24mm-zones--chunky .ae24mm-zones-list a {
  padding: 9px 18px;
  background: white;
  border: 1px solid var(--ae24mm-border);
  border-radius: 9px;
  font-size: 13px; font-weight: 800;
  box-shadow: var(--ae24mm-shadow-sm);
}
.ae24mm-zones--chunky .ae24mm-zones-list a:hover { border-color: var(--ae24mm-primary); color: var(--ae24mm-primary-dk) !important; transform: translateY(-1px); }
.ae24mm-zones--chunky .ae24mm-zones-list a.is-more {
  background: var(--ae24mm-primary);
  border-color: var(--ae24mm-primary);
  color: white !important;
}

/* Z4 — Chip top (a thin geo bar at the top of main pane, opt-in) */
.ae24mm-geo-chip-top {
  display: flex; align-items: center; gap: 12px;
  margin: -28px -36px 22px;
  padding: 10px 28px;
  background: linear-gradient(90deg, var(--ae24mm-primary-soft) 0%, var(--ae24mm-primary-soft-2) 100%);
  border-bottom: 1px solid var(--ae24mm-border);
  font-size: 12px;
}
.ae24mm-geo-chip-top .ae24mm-geo-label { color: var(--ae24mm-primary-dk); font-weight: 700; }
.ae24mm-geo-chip-top .ae24mm-geo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  background: white;
  border: 1px solid rgba(102,185,74,.4);
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
  color: var(--ae24mm-primary-dk) !important;
  text-decoration: none !important;
}
.ae24mm-geo-chip-top .ae24mm-geo-chip svg { width: 12px; height: 12px; }
.ae24mm-geo-chip-top .ae24mm-geo-all {
  margin-left: auto;
  font-size: 12px;
  color: var(--ae24mm-primary-dk) !important;
  font-weight: 700;
  text-decoration: none !important;
}