/* =====================================================
   Elementor Mobile Carousel — Frontend Styles
   ===================================================== */

/* ── Desktop: arrows, dots hidden ─────────────────────── */
.emc-arrow,
.emc-dots {
    display: none !important;
}

/* =====================================================
   SHARED MOBILE STYLES (applied via JS class .emc-active)
   ===================================================== */

/* Wrapper — lateral padding so arrows don't overlap content */
.emc-container {
    position: relative !important;
    width: 100% !important;
    padding: var(--emc-padding, 0) var(--emc-arrow-margin, 24px) !important;
    box-sizing: border-box !important;
}
.emc-container.emc-no-arrows {
    padding-left: var(--emc-padding, 0) !important;
    padding-right: var(--emc-padding, 0) !important;
}

/* Carousel scroll strip */
.emc-active {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: var(--emc-gap, 0) !important;
    padding: 0 !important;
}

/* Each slide — respect editor width, only add snap behavior */
.emc-active > * {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
}

/* ── Multi-card layout (only for .emc-always carousels) ──
   Mobile is always one card per view. Tablet (>=768px) and desktop
   (>=1025px) show a configurable number of cards, optionally revealing a
   peek of the next card via --emc-peek. Spacing between cards is set with
   --emc-card-gap, independent of the global slide gap. Non-always carousels
   keep their intrinsic Elementor widths and are unaffected. */

/* Force the strip to fill the wrapper. Elementor can set a reduced container
   width (e.g. --width:80%) on the element, which would leave empty space on
   the side where the next arrow sits. */
.emc-always.emc-active,
.emc-always .emc-active {
    width: 100% !important;
    max-width: 100% !important;
}
.emc-always.emc-active > *,
.emc-always .emc-active > * {
    flex-basis: 100% !important;
    width: auto !important;
    max-width: none !important;
}
@media (min-width: 768px) {
    .emc-always.emc-active,
    .emc-always .emc-active {
        gap: var(--emc-card-gap, 0px) !important;
    }
    .emc-always.emc-active > *,
    .emc-always .emc-active > * {
        flex-basis: calc(
            (100% - var(--emc-peek, 0px) - (var(--emc-cards-tablet, 1) - 1) * var(--emc-card-gap, 0px))
            / var(--emc-cards-tablet, 1)
        ) !important;
    }
}
@media (min-width: 1025px) {
    .emc-always.emc-active > *,
    .emc-always .emc-active > * {
        flex-basis: calc(
            (100% - var(--emc-peek, 0px) - (var(--emc-cards-desktop, 1) - 1) * var(--emc-card-gap, 0px))
            / var(--emc-cards-desktop, 1)
        ) !important;
    }
}

/* ── Infinite loop (cloned slide sets) ────────────────────
   JS clones the whole slide set before and after the real one and
   teleports scrollLeft by exactly one cycle once a scroll settles.
   The strip declares scroll-behavior:smooth, which would ANIMATE that
   teleport and expose the trick as a full rewind, so JS wraps the
   assignment in .emc-no-anim to switch the animation off for it. */
.emc-active.emc-no-anim {
    scroll-behavior: auto !important;
}

/* Clones are decorative duplicates: they must never be read out or
   focused. JS also strips their ids and sets tabindex="-1"; this rule
   is the CSS half of the same contract. */
.emc-active > .emc-clone {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* ── Mouse drag-to-scroll ─────────────────────────────── */
.emc-active.emc-draggable {
    cursor: grab !important;
}
.emc-active.emc-dragging {
    cursor: grabbing !important;
    /* Disable snap while dragging so the strip follows the pointer smoothly;
       JS snaps to the nearest slide on release. */
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
.emc-active.emc-dragging * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* Hide scrollbar */
.emc-active::-webkit-scrollbar {
    display: none !important;
}
.emc-active {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* ── Arrows ───────────────────────────────────────────── */
.emc-container .emc-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: var(--emc-arrow-size, 35px) !important;
    height: var(--emc-arrow-size, 35px) !important;
    cursor: pointer !important;
    z-index: var(--emc-arrow-zindex, 10) !important;
    opacity: var(--emc-arrow-opacity, 0.8) !important;
    pointer-events: auto !important;
    background: var(--emc-arrow-bg, #333) !important;
    border: none !important;
    border-radius: var(--emc-arrow-radius, 50px) !important;
    box-sizing: border-box !important;
    padding: var(--emc-arrow-padding, 0) !important;
    transition: opacity 0.3s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.emc-container .emc-arrow.emc-left {
    left: var(--emc-arrow-offset, 0) !important;
}
.emc-container .emc-arrow.emc-right {
    right: var(--emc-arrow-offset, 0) !important;
}

.emc-arrow svg {
    width: var(--emc-arrow-icon-size, 60%) !important;
    height: var(--emc-arrow-icon-size, 60%) !important;
    fill: none !important;
    stroke: var(--emc-arrow-color, #fff) !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    display: block !important;
}

.emc-arrow:hover {
    opacity: 1 !important;
}

.emc-arrow:disabled,
.emc-arrow[disabled] {
    opacity: 0.25 !important;
    pointer-events: none !important;
}

/* ── Dots ─────────────────────────────────────────────── */
.emc-container .emc-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--emc-dot-spacing, 6px) !important;
    margin-top: var(--emc-dot-bottom, 15px) !important;
    padding: 0 !important;
    list-style: none !important;
}

.emc-dot {
    width: var(--emc-dot-size, 10px) !important;
    height: var(--emc-dot-size, 10px) !important;
    border-radius: 50% !important;
    background: var(--emc-dot-color, #ccc) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.emc-dot.active {
    background: var(--emc-dot-active, #333) !important;
    transform: scale(1.25) !important;
}

/* ── Hide arrows/dots when per-element class used ─────── */
.emc-container.emc-no-arrows .emc-arrow {
    display: none !important;
}
.emc-container.emc-no-dots .emc-dots {
    display: none !important;
}

/* ── Arrows aligned to the dots row ───────────────────────
   Global "Arrows at dots level" setting or per-carousel
   .emc-arrows-bottom. Arrows drop to the bottom corners and
   align with the dots: the dots row is given min-height = arrow
   size, and both the arrows and the dots box are anchored to
   bottom:0, so their vertical centers coincide. Lateral padding
   and arrow offset are left to the existing Side Margin / Offset
   settings and the emc-px/pl/pr utilities — no extra padding here. */
.emc-container.emc-arrows-bottom .emc-arrow {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
}
.emc-container.emc-arrows-bottom .emc-dots {
    min-height: var(--emc-arrow-size, 35px) !important;
}

/* ── Right-edge fade overlay (opt-in per carousel) ─────────
   Add .emc-fade-1 or .emc-fade-2 to a carousel to fade its right
   edge into a solid colour — a "there's more" hint that blends the
   last visible card into the section background. Two classes so a
   site can have two background colours (e.g. white vs light-blue
   sections). Colours are set in admin (Fade colour 1 / 2) and land
   as --emc-fade-1-color / --emc-fade-2-color. JS copies the class
   from the carousel element to .emc-container. Kept below the
   arrows (z-index) so they stay clickable and visible.

   The fade only makes sense when a next card is peeking: with a
   single card filling the viewport there is nothing to blend, and
   the gradient would just wash out the right edge of that card. So
   the width is derived from the peek and collapses to 0 when there
   is none — see the --emc-fade-size block below. */
.emc-container.emc-fade-1::after,
.emc-container.emc-fade-2::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: var(--emc-fade-width, var(--emc-fade-size, 0px)) !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: var(--emc-fade-zindex, 9) !important;
}

/* Fade width, derived from the peek.
   --emc-fade-size is the computed default; --emc-fade-width is a manual
   escape hatch that wins at any breakpoint (for carousels that show a
   partial card through Elementor's intrinsic widths rather than --emc-peek).

   Below 768px every carousel is single-card — the multi-card calc() that
   consumes --emc-peek lives in the >=768px media queries — so the peek is
   effectively 0 here no matter what .emc-peek-{n} says, and the fade is off. */
.emc-container.emc-fade-1,
.emc-container.emc-fade-2 {
    --emc-fade-size: 0px;
}
@media (min-width: 768px) {
    .emc-container.emc-fade-1,
    .emc-container.emc-fade-2 {
        /* Tunable: how far the gradient reaches in from the right edge.
           var(--emc-peek) covers exactly the peeking card, so it goes from
           fully visible at its left edge to fully blended at the viewport
           edge. Peek 0 => 0 => no fade. */
        --emc-fade-size: var(--emc-peek, 0px);
    }
}
.emc-container.emc-fade-1::after {
    background: linear-gradient(to right, transparent, var(--emc-fade-1-color, #E9F1FA)) !important;
}
.emc-container.emc-fade-2::after {
    background: linear-gradient(to right, transparent, var(--emc-fade-2-color, #ffffff)) !important;
}

/* ── Desktop: hide everything generated ───────────────── */
@media (min-width: 2561px) {
    /* Fallback: extremely large screen, keep hidden */
    .emc-arrow, .emc-dots { display: none !important; }
}

/* =====================================================
   LATERAL SPACING UTILITY CLASSES
   Per-carousel override of the lateral padding so arrows
   don't overlap content. Applied to .emc-container
   (JS copies matching emc-(px|pl|pr)-{n} from element).
   Overrides the global "Side Margin (px)" setting.
   ===================================================== */

/* Padding both sides (px) */
.emc-container.emc-px-0  { padding-left:  0   !important; padding-right:  0   !important; }
.emc-container.emc-px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.emc-container.emc-px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.emc-container.emc-px-30 { padding-left: 30px !important; padding-right: 30px !important; }
.emc-container.emc-px-40 { padding-left: 40px !important; padding-right: 40px !important; }
.emc-container.emc-px-50 { padding-left: 50px !important; padding-right: 50px !important; }
.emc-container.emc-px-60 { padding-left: 60px !important; padding-right: 60px !important; }
.emc-container.emc-px-80 { padding-left: 80px !important; padding-right: 80px !important; }

/* Padding left only (pl) */
.emc-container.emc-pl-0  { padding-left:  0   !important; }
.emc-container.emc-pl-10 { padding-left: 10px !important; }
.emc-container.emc-pl-20 { padding-left: 20px !important; }
.emc-container.emc-pl-30 { padding-left: 30px !important; }
.emc-container.emc-pl-40 { padding-left: 40px !important; }
.emc-container.emc-pl-50 { padding-left: 50px !important; }
.emc-container.emc-pl-60 { padding-left: 60px !important; }
.emc-container.emc-pl-80 { padding-left: 80px !important; }

/* Padding right only (pr) */
.emc-container.emc-pr-0  { padding-right:  0   !important; }
.emc-container.emc-pr-10 { padding-right: 10px !important; }
.emc-container.emc-pr-20 { padding-right: 20px !important; }
.emc-container.emc-pr-30 { padding-right: 30px !important; }
.emc-container.emc-pr-40 { padding-right: 40px !important; }
.emc-container.emc-pr-50 { padding-right: 50px !important; }
.emc-container.emc-pr-60 { padding-right: 60px !important; }
.emc-container.emc-pr-80 { padding-right: 80px !important; }

/* =====================================================
   SHADOW PADDING UTILITY CLASSES
   Makes box-shadows on slides fully visible (top, bottom AND
   sides) while keeping one slide per view. The trick:
   1. padding: Npx on the strip — creates the safe zone where
      the shadow can paint without being clipped by overflow.
   2. gap: 2*Npx between slides — pushes the next slide past
      the right padding zone so it doesn't peek through.
   3. scroll-padding-inline: Npx — shifts the snap landing zone
      inward by N, so when snapped the slide's left edge sits
      at viewport+N (not at viewport edge), making the left
      pad zone visible — that's where the lateral shadow lives.
   4. width / flex-basis 100% on slides — forces a single slide
      per view regardless of Elementor's intrinsic widths.
   ===================================================== */

/* 1. Each variant only declares the pad amount in a custom property. */
.emc-active.emc-shadow,
.emc-active.emc-shadow-15 { --emc-shadow-pad: 15px; }
.emc-active.emc-shadow-5  { --emc-shadow-pad: 5px;  }
.emc-active.emc-shadow-10 { --emc-shadow-pad: 10px; }
.emc-active.emc-shadow-20 { --emc-shadow-pad: 20px; }
.emc-active.emc-shadow-25 { --emc-shadow-pad: 25px; }
.emc-active.emc-shadow-30 { --emc-shadow-pad: 30px; }

/* 2. SHARED: inner padding + snap inset paint the shadow on all four sides.
   Applies to every layout — single-card AND .emc-always multi-card. */
.emc-active.emc-shadow,
.emc-active.emc-shadow-5,
.emc-active.emc-shadow-10,
.emc-active.emc-shadow-15,
.emc-active.emc-shadow-20,
.emc-active.emc-shadow-25,
.emc-active.emc-shadow-30 {
    padding: var(--emc-shadow-pad) !important;
    scroll-padding-inline: var(--emc-shadow-pad) !important;
}

/* 3. SINGLE-CARD ONLY: gap = 2× pad hides the next slide and width:100%
   forces one slide per view. Excluded on .emc-always so its multi-card
   flex-basis and --emc-card-gap survive (this was the incompatibility:
   shadow used to override the visible-card count on desktop). */
.emc-active.emc-shadow:not(.emc-always),
.emc-active.emc-shadow-5:not(.emc-always),
.emc-active.emc-shadow-10:not(.emc-always),
.emc-active.emc-shadow-15:not(.emc-always),
.emc-active.emc-shadow-20:not(.emc-always),
.emc-active.emc-shadow-25:not(.emc-always),
.emc-active.emc-shadow-30:not(.emc-always) {
    gap: calc(var(--emc-shadow-pad) * 2) !important;
}
.emc-active.emc-shadow:not(.emc-always) > *,
.emc-active.emc-shadow-5:not(.emc-always) > *,
.emc-active.emc-shadow-10:not(.emc-always) > *,
.emc-active.emc-shadow-15:not(.emc-always) > *,
.emc-active.emc-shadow-20:not(.emc-always) > *,
.emc-active.emc-shadow-25:not(.emc-always) > *,
.emc-active.emc-shadow-30:not(.emc-always) > * {
    width: 100% !important;
    flex-basis: 100% !important;
}

/* =====================================================
   CARDS-PER-VIEW UTILITY CLASSES (per-carousel)
   Override the global "Cards on desktop / tablet" for a single
   carousel. Only a CSS custom property is set; it inherits down to
   the slides, where the .emc-always multi-card calc() consumes it.
   No JS needed — these vars cascade from the carousel element.
   Pair with .emc-always (multi-card is desktop/tablet only; mobile
   always shows one card per view).
   ===================================================== */

/* Desktop (>=1025px) */
.emc-cards-1 { --emc-cards-desktop: 1 !important; }
.emc-cards-2 { --emc-cards-desktop: 2 !important; }
.emc-cards-3 { --emc-cards-desktop: 3 !important; }
.emc-cards-4 { --emc-cards-desktop: 4 !important; }
.emc-cards-5 { --emc-cards-desktop: 5 !important; }
.emc-cards-6 { --emc-cards-desktop: 6 !important; }

/* Tablet (768px–1024px) */
.emc-cards-tablet-1 { --emc-cards-tablet: 1 !important; }
.emc-cards-tablet-2 { --emc-cards-tablet: 2 !important; }
.emc-cards-tablet-3 { --emc-cards-tablet: 3 !important; }
.emc-cards-tablet-4 { --emc-cards-tablet: 4 !important; }
.emc-cards-tablet-5 { --emc-cards-tablet: 5 !important; }
.emc-cards-tablet-6 { --emc-cards-tablet: 6 !important; }

/* =====================================================
   NEXT-CARD PEEK (OFFSET) UTILITY CLASSES (per-carousel)
   Opt-in offset: only carousels carrying one of these classes leave
   part of the next card visible as a "there's more" hint. Sets the
   inherited --emc-peek custom property the multi-card calc() already
   subtracts, so no JS is needed. Overrides the global "Next card
   peek" setting for that carousel only. Pair with .emc-always.
   ===================================================== */
.emc-peek-10  { --emc-peek: 10px  !important; }
.emc-peek-20  { --emc-peek: 20px  !important; }
.emc-peek-30  { --emc-peek: 30px  !important; }
.emc-peek-40  { --emc-peek: 40px  !important; }
.emc-peek-50  { --emc-peek: 50px  !important; }
.emc-peek-60  { --emc-peek: 60px  !important; }
.emc-peek-80  { --emc-peek: 80px  !important; }
.emc-peek-100 { --emc-peek: 100px !important; }
.emc-peek-120 { --emc-peek: 120px !important; }
.emc-peek-150 { --emc-peek: 150px !important; }
.emc-peek-200 { --emc-peek: 200px !important; }
.emc-peek-250 { --emc-peek: 250px !important; }
.emc-peek-300 { --emc-peek: 300px !important; }

/* =====================================================
   MOBILE-ONLY SHADOW PADDING UTILITY CLASSES (<=767px)
   Same effect as .emc-shadow-* but scoped to phones, so a carousel
   can have shadow padding only on mobile (or a different amount than
   desktop). On phones every carousel is single-card (multi-card layout
   starts at 768px), so the gap/width rules apply unconditionally here.
   JS copies emc-m-shadow* from the element to the .emc-active strip.
   ===================================================== */
@media (max-width: 767px) {
    .emc-active.emc-m-shadow,
    .emc-active.emc-m-shadow-15 { --emc-shadow-pad: 15px; }
    .emc-active.emc-m-shadow-5  { --emc-shadow-pad: 5px;  }
    .emc-active.emc-m-shadow-10 { --emc-shadow-pad: 10px; }
    .emc-active.emc-m-shadow-20 { --emc-shadow-pad: 20px; }
    .emc-active.emc-m-shadow-25 { --emc-shadow-pad: 25px; }
    .emc-active.emc-m-shadow-30 { --emc-shadow-pad: 30px; }

    .emc-active.emc-m-shadow,
    .emc-active.emc-m-shadow-5,
    .emc-active.emc-m-shadow-10,
    .emc-active.emc-m-shadow-15,
    .emc-active.emc-m-shadow-20,
    .emc-active.emc-m-shadow-25,
    .emc-active.emc-m-shadow-30 {
        padding: var(--emc-shadow-pad) !important;
        scroll-padding-inline: var(--emc-shadow-pad) !important;
        gap: calc(var(--emc-shadow-pad) * 2) !important;
    }
    .emc-active.emc-m-shadow > *,
    .emc-active.emc-m-shadow-5 > *,
    .emc-active.emc-m-shadow-10 > *,
    .emc-active.emc-m-shadow-15 > *,
    .emc-active.emc-m-shadow-20 > *,
    .emc-active.emc-m-shadow-25 > *,
    .emc-active.emc-m-shadow-30 > * {
        width: 100% !important;
        flex-basis: 100% !important;
    }
}

/* =====================================================
   BOTH-SIDE PEEK (.emc-peek-both)
   Leaves part of the PREVIOUS and the NEXT card visible, with the
   active card sitting centred between them. The default peek is
   next-only: the multi-card calc() subtracts --emc-peek once, so the
   spare width always ends up at the right end of the strip.

   Different mechanism here — nothing is subtracted from the card:
   1. padding-inline: P on the strip carves a dead zone at BOTH ends,
      so the content box (what a 100% card fills) is already
      clientWidth - 2P.
   2. scroll-padding-inline: P moves the snap landing zone inward by
      the same P, so a snapped card's left edge sits at P instead of
      at the viewport edge — that gap is where the previous card shows.
   Symmetric by construction: prev sliver = next sliver = P - gap.

   Because it never touches flex-basis, it needs no media query and so
   — unlike next-only peek — it works below 768px too, which is the
   main use case for a mobile carousel.

   JS resolves the global "Peek mode" setting and the per-carousel
   .emc-peek-both / .emc-peek-next classes into this single class on
   the strip (the strip can be .e-con-inner, a child of the element
   carrying the class, hence the copy).

   MUST STAY LAST IN THE FILE: .emc-shadow-* and .emc-m-shadow-* declare
   the same two properties at equal specificity, so the winner is decided
   by source order. Adding --emc-shadow-pad into the calc() keeps the
   shadow's side breathing room instead of dropping it when both are on.
   ===================================================== */
.emc-active.emc-peek-both {
    /* border-box or the inset is added OUTSIDE the strip: .emc-always pins the
       strip to width:100%, and with the default content-box that 100% is the
       content area, so the two insets push the strip past the container and the
       page gains a horizontal scrollbar. */
    box-sizing: border-box !important;
    padding-inline: calc(var(--emc-peek, 0px) + var(--emc-shadow-pad, 0px)) !important;
    scroll-padding-inline: calc(var(--emc-peek, 0px) + var(--emc-shadow-pad, 0px)) !important;
}

/* Single-card carousels: force the card to fill the content box, so one
   card per view no matter what intrinsic width Elementor gave it. Same
   trick .emc-shadow-* uses. .emc-always is excluded — its own multi-card
   flex-basis takes over from 768px up. */
.emc-active.emc-peek-both:not(.emc-always) > * {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: none !important;
}

/* Multi-card: same calc as the default one MINUS the --emc-peek term.
   The peek already lives in the strip's padding here; subtracting it
   again would shrink the cards twice and leave a lopsided right gap. */
@media (min-width: 768px) {
    .emc-always.emc-active.emc-peek-both > *,
    .emc-always .emc-active.emc-peek-both > * {
        flex-basis: calc(
            (100% - (var(--emc-cards-tablet, 1) - 1) * var(--emc-card-gap, 0px))
            / var(--emc-cards-tablet, 1)
        ) !important;
    }
}
@media (min-width: 1025px) {
    .emc-always.emc-active.emc-peek-both > *,
    .emc-always .emc-active.emc-peek-both > * {
        flex-basis: calc(
            (100% - (var(--emc-cards-desktop, 1) - 1) * var(--emc-card-gap, 0px))
            / var(--emc-cards-desktop, 1)
        ) !important;
    }
}

/* Edge fade below 768px. The fade width is normally forced to 0 on phones
   because next-only peek is a >=768px feature and there is nothing peeking
   to blend. With both-side peek there IS a peeking card at every width, so
   the gradient earns its place again. JS copies .emc-peek-both to the
   container alongside the .emc-fade-* classes. */
@media (max-width: 767px) {
    .emc-container.emc-peek-both.emc-fade-1,
    .emc-container.emc-peek-both.emc-fade-2 {
        --emc-fade-size: var(--emc-peek, 0px);
    }
}

/* =====================================================
   ELEMENTOR NESTED TABS (.e-n-tabs)
   A carousel inside a tab panel gets wrapped in .emc-container, which
   breaks the direct-child rule Elementor hides closed panels with:
       .e-n-tabs-content > .e-con:not(.e-active) { display: none }
   Left alone the closed panel keeps rendering, and since
   .e-n-tabs-content is a flex row it lands next to the open one and
   spills off the side of the screen. JS mirrors the panel's e-active
   state onto the wrapper as .emc-tab-hidden; this is the other half.

   The wrapper is hidden rather than the panel inside it so the arrows
   and dots go away with it - hiding only the panel would leave the
   chrome of a closed tab floating over the open one.
   ===================================================== */
.e-n-tabs-content > .emc-container.emc-tab-hidden {
    display: none !important;
}