/**
 * CEFEGEN MEGA MENU — cfg-menu.css v4.12.10
 * ========================================
 * v4.12.3 — Fixed nav overflowing on laptop widths (~1280-1400px), which
 *           pushed the cart icon / "Comprar prueba" button off the right
 *           edge of the screen. See notes on .cfg-links, .cfg-acts, and
 *           the 1440px media query below.
 * v4.12.4 — The 1440px breakpoint added in 4.12.3 raised .cfg-link padding
 *           from 7px to 9px, which largely cancelled out the font-size
 *           reduction. Tightened padding to 6px so the breakpoint actually
 *           compacts the menu; overflow-x scroll on .cfg-links is now a
 *           genuine fallback rather than doing most of the work.
 * v4.12.5 — Two follow-ups reported after 4.12.3 landed on staging:
 *           (1) chevron icons appeared to "duplicate"/ghost while
 *           scrolling .cfg-links horizontally — caused by a static
 *           "transform: rotate(0deg)" on every chevron forcing an
 *           unnecessary GPU compositing layer inside the new scroll
 *           container. Removed; visually identical, no more ghosting.
 *           (2) the scrollbar on .cfg-links was hidden entirely, giving
 *           users no clue the row could scroll. Now shown as a thin,
 *           brand-blue bar instead of hidden.
 * v4.12.6 — ES confirmed as the permanent worst-case menu (6 nav items);
 *           FR/PT run shorter menus via admin overrides and won't grow
 *           past that. With the content now fixed, tightened
 *           .cfg-acts/.cfg-ghost/.cfg-cta/.cfg-cart-bar spacing in the
 *           1440px breakpoint too, so the full ES menu is meant to fit
 *           on common laptop widths without ever needing the .cfg-links
 *           scroll — that scroll remains in the CSS only as a defensive
 *           fallback. NOTE: this environment has no real browser, so
 *           these values are reasoned from character counts, not
 *           pixel-measured against the actual system font — verify on
 *           staging at 1280×800 and 1366×768 before calling it final.
 * v4.12.7 — Widened --max-w from 1200px to 1600px. This variable drives
 *           both .cfg-bar-in and .cfg-pi (mega-panel), so both grew
 *           together and stay aligned by construction rather than by
 *           coincidence. Also fixed: the compact media query only
 *           overrode .cfg-bar-in's padding, not .cfg-pi's, leaving the
 *           panel 8px wider per side than the bar at laptop widths —
 *           matched now. Query ceiling raised 1440px → 1600px to match.
 *           Goal: the ES menu should no longer need to squeeze this hard
 *           or fall back to the .cfg-links scroll at all under normal use.
 *           NOTE: if a separate cfg-menu-custom.css override on the live
 *           site sets its own width for .cfg-pi or --max-w, that will
 *           take precedence over this file and should be checked too if
 *           bar/panel still don't match after updating.
 * v4.12.8 — Two follow-ups from staging review:
 *           (1) 1600px left a visibly large gap between "Blog" and the CTA
 *           buttons. .cfg-links is flex:1, so it absorbs 100% of any
 *           slack between the nav's real content width and the box width,
 *           and that slack was landing right there. Dialed --max-w back
 *           to 1440px (close to what the ES nav actually needs at
 *           comfortable spacing) and matched the compact query's ceiling
 *           back to 1440px too.
 *           (2) opening a parent nav item showed a brief second/ghost
 *           arrow — same GPU-compositing glitch as the 4.12.5 scroll fix,
 *           this time triggered by the "transition: transform .2s" that
 *           animates the chevron from rotate(0) to rotate(180deg) on
 *           open. Dropped "transform" from the transition list, so the
 *           rotation switches instantly instead of animating — no more
 *           in-between frame to ghost. Chevron still flips open/closed,
 *           just without the .2s animation.
 * v4.12.9 — Removed the "compact" media query entirely; its values are now
 *           the permanent base styles (see the long note next to --max-w
 *           below for why the query-ceiling approach was a recurring bug).
 *           --max-w lowered 1440px → 1300px to shrink the "Blog"→CTA gap
 *           further, especially visible on PT/FR (fewer nav items than
 *           ES). If the double-arrow-on-open bug from 4.12.8 still shows
 *           unchanged after installing this: that's a strong sign the
 *           browser/server is still serving the pre-4.12.8 CSS — check
 *           the file was actually overwritten and clear any page/object
 *           cache before re-testing, rather than assuming the fix didn't
 *           work.
 * ========================================
 * All rules scoped to .cfg-nav to prevent conflicts.
 *
 * FIGMA TOKENS — update these variables first:
 * Open Figma → Header frame → inspect each element → copy hex values.
 *
 * --blue:    Primary blue  (nav underline, CTA bg, icon stroke, badge fill)
 * --blue-dk: Dark blue     (topbar bg, CTA hover, gradient end)
 * --blue-lt: Light blue    (icon bg, badge fill, info card bg)
 * --text:    Primary text  (nav item hover, headings)
 * --muted:   Secondary     (nav default, body copy in panels)
 * --faint:   Tertiary      (column labels, section labels)
 * --border:  Dividers      (column separators, panel borders)
 * --bg:      Panel bg      (white or off-white from Figma)
 * --soft:    Card bg       (info card background)
 *
 * FONT — replace the font-family value in .cfg-nav with the
 * exact font name from Figma (e.g. 'Inter', 'Poppins', 'DM Sans').
 * Ensure that font is already enqueued globally in Elementor.
 */

.cfg-nav * { box-sizing: border-box; margin: 0; padding: 0; }

.cfg-nav {
  /* ── FIGMA TOKENS: update these ── */
  --blue:    #2a6db5;
  --blue-dk: #1d4f85;
  --blue-lt: #e8f1fb;
  --text:    #1a1a1a;
  --muted:   #5a6475;
  --faint:   #9ca3af;
  --border:  #e2e6ea;
  --bg:      #ffffff;
  --soft:    #f7f9fc;
  /* ── FIGMA SPACING: update these ── */
  --nav-h:     88px;   /* navbar height */
  /* v4.12.8: dialed back from 1600px. Both .cfg-bar-in and .cfg-pi keep
     their old alignment (still the same shared variable), but 1600px left
     a visibly large empty gap between "Blog" and the CTA buttons — .cfg-
     links (flex:1) absorbs 100% of any slack between the nav's own
     content width and the box width, and that slack lands right there.
     v4.12.9: two things fixed together here.
     (1) Every version since 4.12.4 tied the "compact" media query's
     ceiling to this variable's value. That was a recurring conceptual
     bug: once the viewport goes ABOVE that ceiling, the query stops
     applying — but .cfg-bar-in is capped at --max-w regardless of
     viewport, so the box itself doesn't get any wider past that point.
     Spacing would revert to the old roomy values for a box that was
     still only --max-w wide, reopening the overflow right above
     whatever ceiling was chosen. That media query is now removed
     entirely — its values are the permanent base styles on .cfg-link/
     .cfg-plain/.cfg-bar-in/.cfg-logo/.cfg-acts/.cfg-ghost/.cfg-cta/
     .cfg-cart-bar/.cfg-pi, so there's no viewport threshold left to get
     wrong.
     (2) With spacing now fixed regardless of viewport, --max-w is
     lowered further to 1300px so the "Blog"-to-CTA gap (100% of the
     slack .cfg-links absorbs) stays small on PT/FR too, which have
     fewer nav items than ES and so more of that slack to show. */
  --max-w:     1300px; /* max content width */
  --pad-h:     28px;   /* horizontal padding — no longer read by any rule
                           in this file (all now hardcode 20px directly);
                           kept defined in case an override file uses it. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: relative;
  width: 100%;
}

/* ── TOPBAR ────────────────────────────────────────────────── */
.cfg-tb {
  /* Full-bleed even when the shortcode sits inside a boxed Elementor container. */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #2a6db5;
  color: rgba(255,255,255,.85);
  font-size: 11.5px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  padding: 5px max(28px, calc((100vw - 1200px) / 2 + 28px));
}
.cfg-tb a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  display: flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.cfg-tb a:hover { color: #fff; }
.cfg-tb svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

.cfg-langs { display: flex; align-items: center; gap: 2px; }
.cfg-langs a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 3px;
  transition: all .15s;
}
.cfg-langs a:hover,
.cfg-langs a.active { color: #fff; background: rgba(255,255,255,.2); }

/* ── Cart icon (topbar) ───────────────────────────────────────── */
.cfg-cart-icon { position: relative; display: flex; align-items: center; }
.cfg-cart-icon svg { width: 17px !important; height: 17px !important; } /* bigger than the 13px phone/calendar icons, so the badge has room to be readable */
.cfg-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: #fff;
  color: #d32f2f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Mobile drawer switcher — same data as .cfg-langs, styled for the light drawer background */
.cfg-mob-langs {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.cfg-mob-langs a {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 5px;
  border: 1px solid var(--border);
  transition: all .15s;
}
.cfg-mob-langs a:hover,
.cfg-mob-langs a.active { color: #fff; background: var(--blue); border-color: var(--blue); }

/* ── NAVBAR ────────────────────────────────────────────────── */
.cfg-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 9999;
}
.cfg-bar-in {
  max-width: var(--max-w);
  margin: 0 auto;
  /* v4.12.9: was "0 var(--pad-h)" (28px). See the v4.12.9 note on --max-w
     above — this is now the permanent value, not a breakpoint override. */
  padding: 0 20px;
  display: flex;
  align-items: stretch;
  height: var(--nav-h);
}

/* Cart icon in the main navbar — always visible (desktop, tablet, phone),
   unlike the topbar cart it replaces, which disappeared below 1024px
   because .cfg-tb itself is hidden at that breakpoint. Sits right before
   the hamburger so it reads as "cart + menu" on mobile, the usual pattern. */
.cfg-cart-bar {
  display: flex;
  align-items: center;
  /* v4.12.9: was margin-left:4px / padding:0 10px — see v4.12.9 note above. */
  margin-left: 2px;
  padding: 0 6px;
  color: var(--blue-dk);
  flex-shrink: 0;
}
.cfg-cart-bar .cfg-cart-icon svg {
  width: 24px !important;
  height: 24px !important;
  fill: none;
  stroke: var(--blue-dk);
  stroke-width: 1.75;
}
.cfg-cart-bar:hover .cfg-cart-icon svg { stroke: var(--blue); }
.cfg-cart-bar .cfg-cart-count { background: var(--blue-dk); color: #fff; box-shadow: none; }

/* Logo */
.cfg-logo {
  display: flex; align-items: center;
  /* v4.12.9: was margin-right:12px / margin-left:-12px — see v4.12.9 note above. */
  margin-right: 6px; margin-left: -7px;
  flex-shrink: 0;
}
.cfg-logo a { display: flex; align-items: center; flex-shrink: 0; }
.cfg-logo img, .cfg-logo svg {
  width: auto;
  max-width: none !important;
  flex-shrink: 0 !important;
}

/* Nav links */
.cfg-links {
  display: flex; align-items: stretch; flex: 1; list-style: none; gap: 0;
  /* v4.12.3: min-width:0 lets this row shrink below its content's natural
     width instead of forcing .cfg-bar-in wider than the viewport. Without
     it, flex items default to min-width:auto and refuse to shrink past
     their own content — on laptop-width screens (~1280-1366px) that pushed
     .cfg-acts / the cart icon / hamburger clean off the right edge of the
     screen. overflow-x is the safety net: if the links still don't fit
     (e.g. longer FR/PT translations), the row scrolls internally instead
     of spilling out and hiding the buy button / cart.
     v4.12.5: the scrollbar used to be hidden entirely (scrollbar-width:none
     etc). That made the fallback silently undiscoverable — nothing on
     screen told the user this row could scroll. Left visible now, styled
     thin and in the brand blue, so it reads as an intentional UI element
     rather than a browser default. */
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;                      /* Firefox */
  scrollbar-color: var(--blue) transparent;   /* Firefox */
}
.cfg-links::-webkit-scrollbar { height: 4px; }
.cfg-links::-webkit-scrollbar-track { background: transparent; }
.cfg-links::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 2px; }
.cfg-links li { position: relative; display: flex; flex-shrink: 0; }

.cfg-link {
  display: flex; align-items: center;
  /* v4.12.9: was gap:4px / padding:0 7px / font-size:14.5px — see the
     v4.12.9 note near --max-w above; these are now the permanent values. */
  gap: 3px;
  padding: 0 6px;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  cursor: pointer; white-space: nowrap;
  background: none; border: none; font-family: inherit;
  height: var(--nav-h);
  transition: color .15s;
  position: relative; text-decoration: none;
  /* Prevent text jump on active state */
  border-bottom: 2px solid transparent;
}
.cfg-link:hover,
.cfg-link.cfg-active,
.cfg-link[aria-expanded=true] { color: var(--blue); }

/* Active page indicator */
.cfg-link.cfg-active { border-bottom-color: var(--blue); color: var(--blue); }

/* Open panel indicator */
.cfg-link[aria-expanded=true]::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 7px; right: 7px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px 2px 0 0;
}

/* Chevron hardening: prevents page-specific Elementor/Hello CSS from hiding or restyling menu arrows. */
.cfg-nav .cfg-link > svg.cfg-chev {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  height: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  flex: 0 0 12px !important;
  overflow: visible !important;
  fill: none !important;
  color: var(--text) !important;
  stroke: var(--text) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  /* v4.12.5: removed the unconditional "transform: rotate(0deg) !important"
     that used to sit here. A static 0deg transform is visually identical to
     no transform at all, but it forces every chevron onto its own GPU
     compositing layer. With ~12 of these inside the now-scrollable
     .cfg-links row, that caused a repaint/ghosting glitch during horizontal
     scroll (duplicated-looking arrows). No transform on the resting state
     removes that layer entirely; the rotated (open) state below still gets
     one only while a panel is actually open. */
  transform-origin: 50% 50% !important;
  /* v4.12.8: dropped "transform" from the transition list (kept only
     "stroke .15s"). Animating the rotate(0deg) → rotate(180deg) flip on
     open/close hits the same compositing glitch as the scroll case above —
     for the ~0.2s of the animation, the chevron sits on its own GPU layer
     mid-rotation, and a stale frame of it could get left behind, reading
     as a second overlapping arrow. Switching instantly (no transition) is
     a one-frame change, so there's no in-between state to ghost. */
  transition: stroke .15s !important;
  pointer-events: none !important;
}
.cfg-nav .cfg-link > svg.cfg-chev polyline,
.cfg-nav .cfg-link > svg.cfg-chev path {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: none !important;
  stroke: inherit !important;
  stroke-width: inherit !important;
  stroke-linecap: inherit !important;
  stroke-linejoin: inherit !important;
}
.cfg-nav .cfg-link:hover > svg.cfg-chev,
.cfg-nav .cfg-link.cfg-active > svg.cfg-chev,
.cfg-nav .cfg-link[aria-expanded="true"] > svg.cfg-chev {
  color: var(--blue) !important;
  stroke: var(--blue) !important;
}
.cfg-nav .cfg-link[aria-expanded="true"] > svg.cfg-chev {
  transform: rotate(180deg) !important;
}

.cfg-plain {
  display: flex; align-items: center;
  /* v4.12.9: was padding:0 7px / font-size:14.5px — see v4.12.9 note above. */
  padding: 0 6px;
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; text-decoration: none;
  height: var(--nav-h);
  transition: color .15s;
  border-bottom: 2px solid transparent;
}
.cfg-plain:hover { color: var(--blue); }
.cfg-plain.cfg-active { color: var(--blue); border-bottom-color: var(--blue); }

/* Actions */
/* v4.12.3: flex-shrink:0 keeps .cfg-acts at its natural width — it is
   excluded from the shrinking, not "compressed last". The layout is now:
   logo (fixed) — .cfg-links (flexible, shrinks/scrolls) — .cfg-acts (fixed)
   — cart (fixed). .cfg-links is the only element that absorbs overflow. */
/* v4.12.9: gap:10px→6px, padding-left:16px→10px — see v4.12.9 note above. */
.cfg-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 10px; flex-shrink: 0; }

.cfg-ghost {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
  /* v4.12.9: was padding:8px 14px — see v4.12.9 note above. */
  padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 7px;
  background: none; cursor: pointer; font-family: inherit;
  white-space: nowrap; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.cfg-ghost:hover { border-color: var(--blue); color: var(--blue); }
.cfg-ghost svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.cfg-cta {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #fff;
  /* v4.12.9: was padding:9px 20px — see v4.12.9 note above. */
  padding: 8px 14px; border-radius: 7px;
  background: var(--blue); border: none; cursor: pointer;
  font-family: inherit; white-space: nowrap; text-decoration: none;
  transition: background .15s;
}
.cfg-cta:hover { background: var(--blue-dk); }
.cfg-cta svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; }

/* ── MEGA PANEL ────────────────────────────────────────────── */
.cfg-panel {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  z-index: 9998;
  animation: cfgFade .18s ease;
}
.cfg-panel.open { display: block; }
@keyframes cfgFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cfg-pi {
  max-width: var(--max-w);
  margin: 0 auto;
  /* v4.12.9: was "28px var(--pad-h) 20px" (28px horizontal) — matched to
     .cfg-bar-in's 20px so the bar and the open panel line up exactly at
     every width, not just inside a breakpoint. See v4.12.9 note above. */
  padding: 28px 20px 20px;
  display: grid;
  gap: 0;
}

/* Column layout per panel — adjust grid-template-columns to match Figma */
#p-pat .cfg-pi { grid-template-columns: 1.1fr 1fr 1.1fr; }
#p-adn .cfg-pi { grid-template-columns: 1.2fr 1fr 1fr; }
#p-gen .cfg-pi { grid-template-columns: 1.2fr 1fr 1.1fr; }
#p-and .cfg-pi { grid-template-columns: 1.3fr 1.1fr; }
#p-nos .cfg-pi { grid-template-columns: 1fr 1fr 1.1fr; }
#p-pro .cfg-pi { grid-template-columns: 1.1fr 1fr 1.1fr; }

.cfg-col { padding: 0 22px; border-right: 1px solid var(--border); }
.cfg-col:first-child { padding-left: 0; }
.cfg-col:last-child  { border-right: none; padding-right: 0; }

.cfg-lbl {
  font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.cfg-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0;
  font-size: 13px; color: var(--muted);
  text-decoration: none;
  transition: color .12s;
  border-radius: 4px;
}
.cfg-item:hover { color: var(--blue); }
.cfg-item:hover .cfg-ico { background: #d6e6f7; }

.cfg-ico {
  width: 26px; height: 26px;
  background: var(--blue-lt);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s;
}
.cfg-ico svg { width: 13px; height: 13px; fill: none; stroke: var(--blue); stroke-width: 2; }

.cfg-iname { flex: 1; }

.cfg-bdg {
  font-size: 10px; font-weight: 500;
  padding: 2px 6px; border-radius: 20px; white-space: nowrap;
}
.cfg-bdg-b { background: var(--blue-lt); color: var(--blue-dk); }
.cfg-bdg-o { background: #fff4e6; color: #7c4a00; }

/* Section divider within a column */
.cfg-div {
  border: none;
  border-top: 1px solid var(--border);
  margin: 11px 0 10px;
}
.cfg-sub {
  font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 5px;
}

/* ── Highlight card ─────────────────────────────────────────── */
.cfg-hl {
  background: linear-gradient(145deg, var(--blue) 0%, var(--blue-dk) 100%);
  border-radius: 12px; padding: 20px; color: #fff;
  display: flex; flex-direction: column; gap: 10px;
  height: 100%;
}
.cfg-hl-tag   { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.cfg-hl-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.cfg-hl-body  { font-size: 12px; opacity: .85; line-height: 1.6; }
.cfg-hl-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--blue-dk);
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 7px;
  border: none; cursor: pointer; font-family: inherit;
  align-self: flex-start; text-decoration: none;
  transition: background .15s;
}
.cfg-hl-cta:hover { background: #eaf1fb; }
.cfg-hl-cta svg { width: 13px; height: 13px; fill: none; stroke: var(--blue); stroke-width: 2.5; }
.cfg-hl-trust {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size: 11px; opacity: .7;
  display: flex; align-items: center; gap: 5px;
}
.cfg-hl-trust svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2; }

/* ── Info card ──────────────────────────────────────────────── */
.cfg-ic {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.cfg-ic .ic-tag  { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 4px; }
.cfg-ic .ic-body { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ── Panel footer ───────────────────────────────────────────── */
.cfg-pf {
  border-top: 1px solid var(--border);
  margin-top: 16px; padding-top: 12px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  grid-column: 1 / -1;
}
.cfg-fl {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted); text-decoration: none;
  transition: color .12s;
}
.cfg-fl:hover { color: var(--blue); }
.cfg-fl svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.cfg-fl.ml { margin-left: auto; }

/* ── Hamburger ──────────────────────────────────────────────── */
.cfg-hbg {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px; margin-left: auto;
}
.cfg-hbg span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.cfg-hbg.is-active span:nth-child(1),
.cfg-hbg.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cfg-hbg.is-active span:nth-child(2),
.cfg-hbg.open span:nth-child(2) { opacity: 0; }
.cfg-hbg.is-active span:nth-child(3),
.cfg-hbg.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ──────────────────────────────────────────── */
.cfg-mob {
  display: none;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 12px 24px 28px;
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 9997;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  max-height: 85vh; overflow-y: auto;
}
.cfg-mob.is-open,
.cfg-mob.open { display: block; }

.cfg-ms { margin-bottom: 0; }

/* Pillar link row — always visible */
.cfg-ms-hd-wrap {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border);
}
.cfg-ms-pillar {
  flex: 1;
  display: block;
  padding: 14px 0;
  font-size: 15px; font-weight: 700; color: var(--text);
  text-decoration: none;
  transition: color .12s;
}
.cfg-ms-pillar:hover { color: var(--blue); }

/* Expand toggle button */
.cfg-ms-toggle {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 14px 8px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted) !important;
}
.cfg-ms-toggle svg.arr {
  width: 16px; height: 16px;
  fill: none; stroke: var(--muted); stroke-width: 2;
  transition: transform .2s;
}
.cfg-ms-toggle.is-active svg.arr,
.cfg-ms-toggle.open svg.arr { transform: rotate(180deg); stroke: var(--blue); }
.cfg-ms-toggle:hover svg.arr { stroke: var(--blue); }

/* Legacy .cfg-ms-hd support */
.cfg-ms-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0 10px;
  font-size: 13px; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: color .12s;
}
.cfg-ms-hd:hover { color: var(--blue); }
.cfg-ms-hd svg.arr { width: 14px; height: 14px; fill: none; stroke: var(--faint); stroke-width: 2; flex-shrink: 0; transition: transform .2s; }
.cfg-ms-hd.is-active svg.arr,
.cfg-ms-hd.open svg.arr { transform: rotate(180deg); }
.cfg-ms-hd.is-active,
.cfg-ms-hd.open { color: var(--blue); }

.cfg-mob-sub { display: none; padding: 4px 0 4px 12px; }
.cfg-mob-sub.is-open,
.cfg-mob-sub.open { display: block; }

.cfg-mi {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 10px 14px;
  font-size: 13.5px; color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color .12s;
  min-height: 44px;
}
.cfg-mi:last-child { border-bottom: none; }
.cfg-mi:hover { color: var(--blue); }
.cfg-mi > svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; opacity: .4; }
/* Icon for mobile items (same as desktop .cfg-ico) */
.cfg-mi .cfg-ico {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--blue-lt); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.cfg-mi .cfg-ico svg { width: 13px; height: 13px; fill: none; stroke: var(--blue); stroke-width: 2; opacity: 1; }

.cfg-mob-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px;
  background: var(--blue); color: #fff !important;
  font-size: 13px; font-weight: 600;
  border-radius: 7px; border: none; cursor: pointer;
  font-family: inherit; margin-top: 16px; text-decoration: none !important;
  transition: background .15s;
}
.cfg-mob-cta:hover { background: var(--blue-dk); }
.cfg-mob-cta svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; }

/* ── Mobile drawer header with close button ── */
.cfg-mob-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  padding: 10px 0 14px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--blue);
  gap: 12px;
}
.cfg-mob-header-logo {
  display: flex; align-items: center; justify-content: flex-start;
  min-width: 0;
}
.cfg-mob-header-logo a { display: flex; align-items: center; flex-shrink: 0; }
.cfg-mob-header-logo img {
  width: auto;
  max-width: none !important;
  flex-shrink: 0 !important;
}
.cfg-mob-header-phone {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--blue-dk);
  text-decoration: none; white-space: nowrap;
}
.cfg-mob-header-phone svg { width: 13px; height: 13px; fill: none; stroke: var(--blue-dk); stroke-width: 2; flex-shrink: 0; }
.cfg-mob-header-phone:hover { color: var(--blue); }
.cfg-mob-close {
  background: none !important; border: none !important; cursor: pointer;
  padding: 6px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; flex-shrink: 0;
}
.cfg-mob-close:hover { background: #f0f2f4 !important; }
.cfg-mob-close svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--text); stroke-width: 2;
  stroke-linecap: round;
}

/* ── Mobile CTAs row ── */
.cfg-mob-ctas {
  display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;
}
.cfg-mob-cta-primary,
.cfg-mob-cta-secondary {
  flex: 1; min-width: 120px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px;
  font-size: 13px; font-weight: 600; border-radius: 7px;
  text-decoration: none !important; transition: background .15s, color .15s;
  white-space: nowrap;
}
.cfg-mob-cta-primary {
  background: var(--blue); color: #fff !important; border: none;
}
.cfg-mob-cta-primary:hover { background: var(--blue-dk); }
.cfg-mob-cta-secondary {
  background: none; color: var(--blue) !important;
  border: 1.5px solid var(--blue);
}
.cfg-mob-cta-secondary:hover { background: var(--blue-lt); }
.cfg-mob-cta-primary svg,
.cfg-mob-cta-secondary svg {
  width: 13px; height: 13px; fill: none; stroke-width: 2; stroke: currentColor; flex-shrink: 0;
}

/* ── Hover intent delay (desktop) ───────────────────────────── */
/* Panels stay open briefly when mouse moves between nav and panel */
.cfg-panel { transition: none; }


/* Prevent page scrolling while the full-screen mobile menu is open. */
body.cfg-menu-active,
html.cfg-menu-open,
body.cfg-menu-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
/* v4.12.3: was max-width:1180px. That left common laptop widths (1280px,
   1366px, 1440px…) using full-size desktop spacing, which was just wide
   enough to overflow and push the cart/CTA off-screen. Raised to 1440px so
   those screens get the tighter spacing too; .cfg-links overflow-x above
   is the fallback for anything this still doesn't fully solve. */
@media (max-width: 1024px) and (min-width: 768px) {
  .cfg-tb    { display: none; }
  .cfg-link  { padding: 0 7px; font-size: 12px; }
  .cfg-plain { padding: 0 7px; font-size: 12px; }
  .cfg-bar-in { padding: 0 20px; }
  .cfg-pi    { padding: 18px 20px 14px; }
  .cfg-col   { padding: 0 14px; }
  .cfg-logo  { margin-right: 6px; margin-left: -7px; }
}
@media (max-width: 767px) {
  /* Hide desktop nav elements */
  .cfg-tb                        { display: none !important; }
  .cfg-links, .cfg-acts          { display: none !important; }

  /* Show hamburger */
  .cfg-hbg                       { display: flex !important; }

  /* Navbar bar */
  .cfg-bar-in                    { padding: 0 16px !important; }
  .cfg-nav                       { width: 100% !important; }
  .cfg-logo                      { margin-right: 4px !important; }

  /* Break out of any Elementor overflow:hidden container */
  .cfg-mob,
  body > .cfg-mob {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    z-index: 2147483647 !important;
    padding-top: 60px !important;
    background: #fff !important;
  }
  .cfg-mob.is-open,
  .cfg-mob.open,
  body > .cfg-mob.is-open,
  body > .cfg-mob.open { display: block !important; }

  /* Close button — stays in normal flow, no fixed positioning */
  .cfg-hbg.is-active,
  .cfg-hbg.open {
    background: none !important;
    border: none !important;
  }
  .cfg-hbg.is-active span,
  .cfg-hbg.open span { background: var(--text) !important; }
}

/* ── Theme override block — unified, no contradictions ─────── */

/* ── Theme override: scoped to .cfg-nav to beat theme specificity ── */

/* Nav buttons: blue text on hover, transparent background always */
.cfg-nav .cfg-link,
.cfg-nav .cfg-link:hover,
.cfg-nav .cfg-link:focus,
.cfg-nav .cfg-link[aria-expanded=true],
.cfg-nav .cfg-link.cfg-active,
.cfg-nav .cfg-plain,
.cfg-nav .cfg-plain:hover,
.cfg-nav .cfg-plain:focus,
.cfg-nav .cfg-plain.cfg-active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.cfg-nav .cfg-link:hover,
.cfg-nav .cfg-link[aria-expanded=true],
.cfg-nav .cfg-link.cfg-active     { color: var(--blue) !important; }
.cfg-nav .cfg-plain:hover,
.cfg-nav .cfg-plain.cfg-active    { color: var(--blue) !important; }

/* Anchors inside nav: no theme overrides */
.cfg-nav a                        { text-decoration: none !important; }
.cfg-nav a:hover,
.cfg-nav a:focus                  { background: transparent !important; background-color: transparent !important; }

/* Panel items */
.cfg-nav .cfg-item:hover .cfg-iname { color: var(--blue) !important; }

/* Highlight CTA: white bg, dark blue text */
.cfg-nav .cfg-hl-cta,
.cfg-nav .cfg-hl-cta:link,
.cfg-nav .cfg-hl-cta:visited,
.cfg-nav .cfg-hl-cta:hover,
.cfg-nav .cfg-hl-cta:focus        { color: var(--blue-dk) !important; text-decoration: none !important; }
.cfg-nav .cfg-hl-cta              { background: #fff !important; }
.cfg-nav .cfg-hl-cta:hover        { background: #eaf1fb !important; }

/* ── Mobile: ensure cfg-bar is always visible ── */
@media (max-width: 767px) {
  .cfg-bar     { display: block !important; }
  .cfg-bar-in  { display: flex !important; align-items: center; }
  /* Logo on left, hamburger on right */
  .cfg-logo    { flex: 1; justify-content: flex-start; }
  .cfg-hbg     { flex-shrink: 0; }
}

/* ── Mobile: z-index fix — ensure nav and drawer are above Elementor sections ── */
@media (max-width: 767px) {
  .cfg-nav,
  .cfg-bar,
  .cfg-bar-in { position: relative; z-index: 99998 !important; }

  /* The shortcode container must not clip */
  .elementor-widget-shortcode,
  .elementor-widget-container { overflow: visible !important; }
}