/* ============================================================
   Menu Plays! v4.0.0
   Presets are scoped to the Elementor widget wrapper class:
   .mp-preset-{name}

   IMPORTANT — DO NOT "MODERNISE" THIS FILE:
   Every shape below is drawn BY HAND with CSS gradients and
   pseudo-elements. There is no clip-path, no SVG, no path
   tracing and no browser auto-clipping anywhere in this file.
   Elementor flips and mangles auto-traced shapes; that is
   exactly why the geometry is painted manually.

   HOW THE HAND-DRAWN SHAPES WORK
   ------------------------------
   A cut shape is composed of two centre bands plus four corner
   boxes of --mp-cx by --mp-cy. A cut corner is a box split on
   its own diagonal via `linear-gradient(to <corner>, ...)`; a
   square corner is the same box filled solid. The `to <corner>`
   keyword puts the 50% line exactly on the box diagonal at ANY
   aspect ratio, which is what lets one technique draw a 45°
   chamfer, a shallow bevel and a full hexagon point.

   The border reuses the SAME boxes and the SAME diagonals as the
   fill, so a stroke always lands on the cut and can never come out
   flipped or offset.

   WHY NOTHING IS DRAWN IN ::before / ::after
   ------------------------------------------
   Elementor's Nav Menu "Pointer" options (Framed, Background,
   Underline, Overline, Double Line) claim .elementor-item:before
   and :after and overwrite background-color, height, inset and
   z-index on them. A frame parked in a pseudo-element therefore
   vanishes the moment a pointer is active — which looks exactly
   like "the border controls do nothing on the drawn shapes",
   while the rounded presets keep working because their border is
   a native CSS border. So frame AND fill are painted as one
   background layer stack on the element itself, and the pointer
   pseudo-elements are neutralised below.

   TOKEN CONTRACT
   --------------
   Written by the widget controls:
     --mp-fill-start / --mp-fill-end / --mp-gradient-angle       (normal)
     --mp-fill-start-h / --mp-fill-end-h / --mp-gradient-angle-h (hover)
     --mp-fill-start-a / --mp-fill-end-a / --mp-gradient-angle-a (active)
     --mp-bd-color / --mp-bd-color-h / --mp-bd-color-a
     --mp-bd-w      border / stroke thickness
     --mp-bd-style  native border style
     --mp-corner-size   corner size: radius, cut depth or HUD arm length
     --mp-accent    glow

   Declared per preset as its designed default:
     --mp-def-1 / --mp-def-2      resting fill
     --mp-def-1h / --mp-def-2h    designed hover + active tint
     --mp-def-bc1 / --mp-def-bc2  designed border colour(s)
     --mp-cx / --mp-cy            corner box size

   Resolved per state and consumed by the presets:
     --mp-f1 / --mp-f2 / --mp-ga  fill + angle
     --mp-bc1 / --mp-bc2          border colour
   A control value ALWAYS wins over a preset default.
   ============================================================ */

/* ----------------------------------------------------------
   Shared base + normal-state token resolution
   ---------------------------------------------------------- */
[class*="mp-preset-"] .elementor-item {
    --mp-accent: #00e5ff;
    --mp-accent-start: #00e5ff;
    --mp-accent-end: #18aee0;

    --mp-f1n: var(--mp-fill-start, var(--mp-def-1, #132746));
    --mp-f2n: var(--mp-fill-end,   var(--mp-def-2, #254e86));
    --mp-gan: var(--mp-gradient-angle, 135deg);

    --mp-f1: var(--mp-f1n);
    --mp-f2: var(--mp-f2n);
    --mp-ga: var(--mp-gan);

    --mp-bc1: var(--mp-bd-color, var(--mp-def-bc1, #ffffff));
    --mp-bc2: var(--mp-bd-color, var(--mp-def-bc2, var(--mp-def-bc1, #ffffff)));

    --mp-bd-w: 1px;
    --mp-bd-style: solid;

    /* EDGE FEATHER — a hard colour stop in a gradient is drawn with NO
       antialiasing, so every hand-drawn diagonal stair-steps. Giving each
       stop a sub-pixel transition band forces the browser to antialias it.
       The band is centred on the true edge, so the geometry does not move.
       --mp-aa   silhouette edges (fill against nothing)
       --mp-aa-b stroke edges, clamped so a 1px stroke keeps a solid core */
    --mp-aa: .5px;
    --mp-aa-b: min(.5px, calc(var(--mp-bd-w) / 3));

    position: relative;
    display: inline-block;
    white-space: nowrap;
    color: #ffffff !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

[class*="mp-preset-"] .elementor-item > *,
[class*="mp-preset-"] .elementor-item {
    isolation: isolate;
}

/* ACTIVE resolution — before :hover so hovering an active item still hovers */
[class*="mp-preset-"] .elementor-item.elementor-item-active,
[class*="mp-preset-"] li.current-menu-item > .elementor-item {
    --mp-f1: var(--mp-fill-start-a, var(--mp-def-1h, var(--mp-f1n)));
    --mp-f2: var(--mp-fill-end-a,   var(--mp-def-2h, var(--mp-f2n)));
    --mp-ga: var(--mp-gradient-angle-a, var(--mp-gan));
    --mp-bc1: var(--mp-bd-color-a, var(--mp-bd-color, var(--mp-def-bc1, #ffffff)));
    --mp-bc2: var(--mp-bd-color-a, var(--mp-bd-color, var(--mp-def-bc2, var(--mp-def-bc1, #ffffff))));
}

/* HOVER resolution */
[class*="mp-preset-"] .elementor-item:hover,
[class*="mp-preset-"] .elementor-item:focus {
    --mp-f1: var(--mp-fill-start-h, var(--mp-def-1h, var(--mp-f1n)));
    --mp-f2: var(--mp-fill-end-h,   var(--mp-def-2h, var(--mp-f2n)));
    --mp-ga: var(--mp-gradient-angle-h, var(--mp-gan));
    --mp-bc1: var(--mp-bd-color-h, var(--mp-bd-color, var(--mp-def-bc1, #ffffff)));
    --mp-bc2: var(--mp-bd-color-h, var(--mp-bd-color, var(--mp-def-bc2, var(--mp-def-bc1, #ffffff))));
}

/* ----------------------------------------------------------
   HOVER HYGIENE
   Themes and Elementor both like to add a text underline on
   link hover. On a styled menu item that reads as a stray line
   appearing under the label. Menu Plays! draws its own rules
   (see Underline / Overline below), so the browser's one is
   switched off in every state.
   ---------------------------------------------------------- */
[class*="mp-preset-"] .elementor-item,
[class*="mp-preset-"] .elementor-item:hover,
[class*="mp-preset-"] .elementor-item:focus,
[class*="mp-preset-"] .elementor-item:active,
[class*="mp-preset-"] .elementor-item.elementor-item-active {
    text-decoration: none !important;
}

/* ----------------------------------------------------------
   ELEMENTOR POINTER NEUTRALISER
   The Nav Menu widget paints its Pointer effects into
   .elementor-item:before / :after. Those would sit on top of a
   styled shape and, for the Framed and Background pointers, cover
   it entirely. Menu Plays! draws its own states, so the pointer
   pseudo-elements are switched off for styled items only. Any
   pseudo-element this plugin genuinely needs is re-declared after
   this block with !important.
   ---------------------------------------------------------- */
[class*="mp-preset-"] .elementor-item::before,
[class*="mp-preset-"] .elementor-item::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

/* ----------------------------------------------------------
   NO FILL — Background Type: None, per state.
   Kills the painted fill while leaving every hand-drawn edge.
   ---------------------------------------------------------- */
/* The drawn shapes keep their frame and fill in ONE background stack, so
   "no fill" cannot mean "no background-image" any more — it means the fill
   tokens go transparent while the frame layers keep painting. */
.mp-bg-none[class*="mp-preset-"] .elementor-item {
    --mp-fill-start: transparent;
    --mp-fill-end: transparent;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mp-bgh-none[class*="mp-preset-"] .elementor-item:hover,
.mp-bgh-none[class*="mp-preset-"] .elementor-item:focus {
    --mp-fill-start-h: transparent;
    --mp-fill-end-h: transparent;
    background-color: transparent !important;
}

.mp-bga-none[class*="mp-preset-"] .elementor-item.elementor-item-active,
.mp-bga-none[class*="mp-preset-"] li.current-menu-item > .elementor-item {
    --mp-fill-start-a: transparent;
    --mp-fill-end-a: transparent;
    background-color: transparent !important;
}

/* Glass Chrome mixes its fill with white/black to build the gloss ramp, so a
   transparent token still leaves a tint. It has a native border, so its
   background-image can simply be dropped instead. */
.mp-bg-none.mp-preset-glass-chrome .elementor-item {
    background-image: none !important;
}

.mp-bgh-none.mp-preset-glass-chrome .elementor-item:hover,
.mp-bgh-none.mp-preset-glass-chrome .elementor-item:focus {
    background-image: none !important;
}

.mp-bga-none.mp-preset-glass-chrome .elementor-item.elementor-item-active,
.mp-bga-none.mp-preset-glass-chrome li.current-menu-item > .elementor-item {
    background-image: none !important;
}

/* ==========================================================
   ROUNDED FAMILY — native border, corner size = radius
   ========================================================== */
/* 1. PILL — fully rounded */
.mp-preset-pill .elementor-item {
    --mp-def-1: #132746;
    --mp-def-2: #254e86;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), white 16%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), white 16%);
    --mp-def-bc1: #ffffff;   /* visible at rest; 'no border' = Thickness 0 */
    border: var(--mp-bd-w) var(--mp-bd-style) var(--mp-bc1) !important;
    border-radius: var(--mp-corner-size, 999px) !important;
    background: linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

/* 2. FROSTED GLASS — soft radius, real backdrop blur */
.mp-preset-frosted-glass .elementor-item {
    --mp-def-1: rgba(255,255,255,.24);
    --mp-def-2: rgba(255,255,255,.07);
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), white 25%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), white 12%);
    --mp-def-bc1: rgba(255,255,255,.55);
    border: var(--mp-bd-w) var(--mp-bd-style) var(--mp-bc1) !important;
    border-radius: var(--mp-corner-size, 14px) !important;
    background: linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -1px 0 rgba(255,255,255,.08),
        0 8px 28px rgba(0,0,0,.18);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
}

.mp-preset-frosted-glass .elementor-item:hover,
.mp-preset-frosted-glass .elementor-item:focus,
.mp-preset-frosted-glass .elementor-item.elementor-item-active {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 10px 34px rgba(0,0,0,.22);
}

/* 3. GLASS CHROME — vertical chrome ramp + polished edges */
.mp-preset-glass-chrome .elementor-item {
    --mp-def-1: #132746;
    --mp-def-2: #254e86;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), white 10%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), white 10%);
    border: var(--mp-bd-w) var(--mp-bd-style) var(--mp-bc1) !important;
    border-radius: var(--mp-corner-size, 12px) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--mp-f2), white 28%),
            color-mix(in srgb, var(--mp-f1), black 18%)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -1px 0 rgba(0,0,0,.28),
        0 4px 14px rgba(0,0,0,.25);
}

.mp-preset-glass-chrome .elementor-item:hover,
.mp-preset-glass-chrome .elementor-item:focus,
.mp-preset-glass-chrome .elementor-item.elementor-item-active {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--mp-f2), white 38%),
            color-mix(in srgb, var(--mp-f1), black 8%)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 6px 18px rgba(0,0,0,.3);
}

/* 4. NEON TECH — tight radius, lit edge */
.mp-preset-neon-tech .elementor-item {
    --mp-def-1: #0b1020;
    --mp-def-2: #0b1020;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), var(--mp-accent) 10%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), var(--mp-accent) 10%);
    --mp-def-bc1: var(--mp-accent-start);
    --mp-def-bc2: var(--mp-accent-end);
    border: var(--mp-bd-w) var(--mp-bd-style) var(--mp-bc1) !important;
    border-radius: var(--mp-corner-size, 8px) !important;
    background: linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
    box-shadow:
        inset 0 0 12px color-mix(in srgb, var(--mp-accent), transparent 90%),
        0 0 0 1px color-mix(in srgb, var(--mp-accent), transparent 75%),
        0 0 16px color-mix(in srgb, var(--mp-accent), transparent 82%);
    text-shadow: 0 0 9px color-mix(in srgb, var(--mp-accent), transparent 36%);
}

.mp-preset-neon-tech .elementor-item:hover,
.mp-preset-neon-tech .elementor-item:focus,
.mp-preset-neon-tech .elementor-item.elementor-item-active {
    box-shadow:
        inset 0 0 18px color-mix(in srgb, var(--mp-accent), transparent 82%),
        0 0 0 1px var(--mp-accent),
        0 0 26px color-mix(in srgb, var(--mp-accent), transparent 60%);
}

/* 5. TERMINAL — monospace, prompt glyph */
.mp-preset-terminal .elementor-item {
    --mp-def-1: color-mix(in srgb, #132746, black 14%);
    --mp-def-2: color-mix(in srgb, #254e86, black 30%);
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), var(--mp-accent) 8%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), var(--mp-accent) 10%);
    --mp-def-bc1: color-mix(in srgb, var(--mp-accent), transparent 55%);
    border: var(--mp-bd-w) var(--mp-bd-style) var(--mp-bc1) !important;
    border-radius: var(--mp-corner-size, 3px) !important;
    background: linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 13px color-mix(in srgb, var(--mp-accent), transparent 90%);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: .035em;
}

/* Re-declared AFTER the pointer neutraliser, with !important, so the prompt
   glyph survives both that reset and Elementor's own pointer CSS. */
.mp-preset-terminal .elementor-item::before {
    content: ">_" !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    inset: auto !important;
    background: none !important;
    border: 0 !important;
    margin-right: .55em;
    color: var(--mp-accent);
    opacity: .9;
    transform: translateY(-.02em);
}

.mp-preset-terminal .elementor-item:hover,
.mp-preset-terminal .elementor-item:focus,
.mp-preset-terminal .elementor-item.elementor-item-active {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--mp-accent), transparent 35%),
        0 0 18px color-mix(in srgb, var(--mp-accent), transparent 78%);
}
/* 6. BLADE — hand-drawn parallelogram. Two full-height slant boxes plus a
   centre band. It is DRAWN, not skewed, so the label stays upright and the
   border stays registered to the slant at any thickness. */
.mp-preset-blade .elementor-item {
    --mp-c: var(--mp-corner-size, 16px);
    --mp-cx: min(var(--mp-c), 50%);
    --mp-cxp: var(--mp-c);
    --mp-mitre: calc(var(--mp-bd-w) * 0.75);
    --mp-def-1: #132746;
    --mp-def-2: #254e86;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), white 16%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), white 16%);
    --mp-def-bc1: var(--mp-accent-start);
    --mp-def-bc2: var(--mp-accent-end);
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding-left: calc(var(--mp-corner-size, 16px) + .3em) !important;
    padding-right: calc(var(--mp-corner-size, 16px) + .3em) !important;
    background:
        /* ---- FRAME (on top) ---- */
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left var(--mp-cxp) top 0 / calc(100% - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left 0 bottom 0 / calc(100% - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc1) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) left 0 top 0 / var(--mp-cx) 100% no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc2) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) right 0 top 0 / var(--mp-cx) 100% no-repeat,
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc1) calc(50% + var(--mp-aa, .5px))) left var(--mp-cxp) top var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-cxp) bottom var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        /* ---- FILL (underneath) ---- */
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) left calc(var(--mp-cxp) - .5px) top 0 / calc(100% - var(--mp-cx) - var(--mp-cx) + 1px) 100% no-repeat,
        linear-gradient(to top left, var(--mp-f1) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 top 0 / var(--mp-cx) 100% no-repeat,
        linear-gradient(to bottom right, var(--mp-f2) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 top 0 / var(--mp-cx) 100% no-repeat !important;
    box-shadow: 0 0 16px color-mix(in srgb, var(--mp-accent), transparent 88%);
    font-weight: 600;
    letter-spacing: .04em;
}

.mp-preset-blade .elementor-item:hover,
.mp-preset-blade .elementor-item:focus,
.mp-preset-blade .elementor-item.elementor-item-active {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mp-accent), transparent 72%);
}


/* ==========================================================
   HUD FAMILY — rectangular, corner size = bracket arm length
   ========================================================== */

/* 7. HUD FRAME — a COMPLETE frame plus heavier corner ticks. Frame, ticks and
   fill are all painted as background layers on the element itself: Elementor's
   Nav Menu pointer styles own ::before and ::after, so nothing structural may
   live there.

   Cleanliness notes (v3.8):
   - The inner rails were removed. Running a second faint line 5px inside a
     full frame reads as a smeared duplicate of the frame itself.
   - The resting inset glow was removed. An 18px inset haze behind the label
     is what made the surface look foggy rather than crisp; the glow now only
     appears on hover, where it is a deliberate state change.
   - The default fill was a milky white wash (9% white). That is what made the
     "transparent" look dirty. It now defaults to genuinely transparent, and
     the Background controls fill it when a fill is wanted. */
.mp-preset-hud-frame .elementor-item {
    --mp-arm: var(--mp-corner-size, 22px);
    --mp-def-1: transparent;
    --mp-def-2: transparent;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), var(--mp-accent) 12%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), transparent 82%);
    --mp-def-bc1: var(--mp-accent-start);
    --mp-def-bc2: var(--mp-accent-end);
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background:
        /* ---- FRAME: four continuous edges ---- */
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left 0 top 0 / 100% var(--mp-bd-w) no-repeat,
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left 0 bottom 0 / 100% var(--mp-bd-w) no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) left 0 top 0 / var(--mp-bd-w) 100% no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) right 0 top 0 / var(--mp-bd-w) 100% no-repeat,
        /* ---- FRAME: eight corner ticks at double weight ---- */
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 top 0 / var(--mp-arm) calc(var(--mp-bd-w) * 2) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 top 0 / calc(var(--mp-bd-w) * 2) var(--mp-arm) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 top 0 / var(--mp-arm) calc(var(--mp-bd-w) * 2) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 top 0 / calc(var(--mp-bd-w) * 2) var(--mp-arm) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 bottom 0 / var(--mp-arm) calc(var(--mp-bd-w) * 2) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 bottom 0 / calc(var(--mp-bd-w) * 2) var(--mp-arm) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 bottom 0 / var(--mp-arm) calc(var(--mp-bd-w) * 2) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 bottom 0 / calc(var(--mp-bd-w) * 2) var(--mp-arm) no-repeat,
        /* ---- FILL ---- */
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

.mp-preset-hud-frame .elementor-item:hover,
.mp-preset-hud-frame .elementor-item:focus,
.mp-preset-hud-frame .elementor-item.elementor-item-active {
    box-shadow: 0 0 18px color-mix(in srgb, var(--mp-accent), transparent 82%);
}

/* 8. HUD CORNER — brackets ONLY. No continuous edges at all, which is what
   separates it from HUD Frame. */
.mp-preset-hud-corner .elementor-item {
    --mp-arm: var(--mp-corner-size, 26px);
    /* Same cleanliness pass as HUD Frame: no milky default wash. */
    --mp-def-1: transparent;
    --mp-def-2: transparent;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), var(--mp-accent) 10%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), transparent 92%);
    --mp-def-bc1: var(--mp-accent-start);
    --mp-def-bc2: var(--mp-accent-end);
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background:
        /* ---- FRAME: eight arms, two per corner, nothing in between ---- */
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 top 0 / var(--mp-arm) var(--mp-bd-w) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 top 0 / var(--mp-bd-w) var(--mp-arm) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 top 0 / var(--mp-arm) var(--mp-bd-w) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 top 0 / var(--mp-bd-w) var(--mp-arm) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 bottom 0 / var(--mp-arm) var(--mp-bd-w) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 bottom 0 / var(--mp-bd-w) var(--mp-arm) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 bottom 0 / var(--mp-arm) var(--mp-bd-w) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 bottom 0 / var(--mp-bd-w) var(--mp-arm) no-repeat,
        /* ---- FILL ---- */
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

.mp-preset-hud-corner .elementor-item:hover,
.mp-preset-hud-corner .elementor-item:focus,
.mp-preset-hud-corner .elementor-item.elementor-item-active {
    box-shadow:
        inset 0 0 22px color-mix(in srgb, var(--mp-accent), transparent 88%),
        0 0 18px color-mix(in srgb, var(--mp-accent), transparent 82%);
}

/* ==========================================================
   CUT FAMILY — hand-drawn corners, corner size = cut depth
   ========================================================== */
/* 9. CYBER CUT — octagon: all four corners chamfered */
.mp-preset-cyber-cut .elementor-item {
    --mp-c: var(--mp-corner-size, 14px);
    --mp-cx: min(var(--mp-c), 50%);
    --mp-cy: min(var(--mp-c), 50%);
    --mp-cxp: var(--mp-c);
    --mp-cyp: var(--mp-c);
    --mp-mitre: calc(var(--mp-bd-w) * 0.4142);
    --mp-def-1: #132746;
    --mp-def-2: #254e86;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), var(--mp-accent) 16%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), var(--mp-accent) 14%);
    --mp-def-bc1: var(--mp-accent-start);
    --mp-def-bc2: var(--mp-accent-end);
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* MANUALLY DRAWN SHAPE + BORDER — every segment painted and positioned by
       hand. No clip-path, no SVG, no auto-tracing, and no pseudo-elements. */
    background:
        /* ---- FRAME (painted on top of the fill) ---- */
        /* straight edges — each one stops exactly where a cut begins */
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left var(--mp-cxp) top 0 / calc(100% - var(--mp-cx) - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left var(--mp-cxp) bottom 0 / calc(100% - var(--mp-cx) - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) left 0 top var(--mp-cyp) / var(--mp-bd-w) calc(100% - var(--mp-cy) - var(--mp-cy)) no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) right 0 top var(--mp-cyp) / var(--mp-bd-w) calc(100% - var(--mp-cy) - var(--mp-cy)) no-repeat,
        /* chamfer strokes — same box and same diagonal as the fill above, drawn
           flush INSIDE the cut (50% - w .. 50%) so the stroke lies on the fill
           exactly like the straight edges do, at any thickness */
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc1) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) left 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc2) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) right 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom left, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc1) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) left 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc2) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) right 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        /* MITRE PATCHES — a butt joint between a diagonal and a straight edge
           leaves a notch that grows with thickness. Each patch is a hand-drawn
           right triangle sized off the border width that fills exactly that notch. */
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc1) calc(50% + var(--mp-aa, .5px))) left var(--mp-cxp) top var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc1) calc(50% + var(--mp-aa, .5px))) left var(--mp-bd-w) top calc(var(--mp-cyp) - var(--mp-mitre)) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-cxp) top var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-bd-w) top calc(var(--mp-cyp) - var(--mp-mitre)) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc1) calc(50% + var(--mp-aa, .5px))) left var(--mp-cxp) bottom var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc1) calc(50% + var(--mp-aa, .5px))) left var(--mp-bd-w) bottom calc(var(--mp-cyp) - var(--mp-mitre)) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-cxp) bottom var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-bd-w) bottom calc(var(--mp-cyp) - var(--mp-mitre)) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        /* ---- FILL (underneath) ---- */
        /* centre bands */
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) left 0 top calc(var(--mp-cyp) - .5px) / 100% calc(100% - var(--mp-cy) - var(--mp-cy) + 1px) no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) left calc(var(--mp-cxp) - .5px) top 0 / calc(100% - var(--mp-cx) - var(--mp-cx) + 1px) 100% no-repeat,
        /* four corner boxes — a cut corner is split on the box diagonal, a square
           corner is filled solid. The `to <corner>` keyword puts the 50% line on
           the box's own diagonal at ANY aspect ratio, so one technique draws a 45°
           chamfer, a shallow bevel and a full hexagon point. */
        linear-gradient(to top left, var(--mp-f1) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to top right, var(--mp-f2) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom left, var(--mp-f1) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom right, var(--mp-f2) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat !important;
    box-shadow: 0 0 18px color-mix(in srgb, var(--mp-accent), transparent 86%);
    text-transform: uppercase;
    letter-spacing: .055em;
    font-weight: 600;
}

.mp-preset-cyber-cut .elementor-item:hover,
.mp-preset-cyber-cut .elementor-item:focus,
.mp-preset-cyber-cut .elementor-item.elementor-item-active {
    box-shadow: 0 0 22px color-mix(in srgb, var(--mp-accent), transparent 72%);
}

/* 10. GAMING BLOCK — hexagon: both ends come to a full point.
   --mp-cy is 50%, so the same corner-box code draws a full point. */
.mp-preset-gaming-block .elementor-item {
    --mp-c: var(--mp-corner-size, 18px);
    --mp-cx: min(var(--mp-c), 50%);
    --mp-cy: calc(50% + 0.5px);
    --mp-cxp: var(--mp-c);
    --mp-cyp: 50%;
    --mp-mitre: calc(var(--mp-bd-w) * 0.62);
    --mp-def-1: #132746;
    --mp-def-2: #254e86;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), white 18%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), white 18%);
    --mp-def-bc1: var(--mp-accent-start);
    --mp-def-bc2: var(--mp-accent-end);
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* MANUALLY DRAWN SHAPE + BORDER — every segment painted and positioned by
       hand. No clip-path, no SVG, no auto-tracing, and no pseudo-elements. */
    background:
        /* ---- FRAME (painted on top of the fill) ---- */
        /* straight edges — each one stops exactly where a cut begins */
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left var(--mp-cxp) top 0 / calc(100% - var(--mp-cx) - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left var(--mp-cxp) bottom 0 / calc(100% - var(--mp-cx) - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) left 0 top var(--mp-cyp) / var(--mp-bd-w) calc(100% - var(--mp-cy) - var(--mp-cy)) no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) right 0 top var(--mp-cyp) / var(--mp-bd-w) calc(100% - var(--mp-cy) - var(--mp-cy)) no-repeat,
        /* chamfer strokes — same box and same diagonal as the fill above, drawn
           flush INSIDE the cut (50% - w .. 50%) so the stroke lies on the fill
           exactly like the straight edges do, at any thickness */
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc1) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) left 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc2) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) right 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom left, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc1) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) left 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc2) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) right 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        /* MITRE PATCHES — a butt joint between a diagonal and a straight edge
           leaves a notch that grows with thickness. Each patch is a hand-drawn
           right triangle sized off the border width that fills exactly that notch. */
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc1) calc(50% + var(--mp-aa, .5px))) left var(--mp-cxp) top var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-cxp) top var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc1) calc(50% + var(--mp-aa, .5px))) left var(--mp-cxp) bottom var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-cxp) bottom var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        /* ---- FILL (underneath) ---- */
        /* centre bands */
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) left 0 top calc(var(--mp-cyp) - .5px) / 100% calc(100% - var(--mp-cy) - var(--mp-cy) + 1px) no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) left calc(var(--mp-cxp) - .5px) top 0 / calc(100% - var(--mp-cx) - var(--mp-cx) + 1px) 100% no-repeat,
        /* four corner boxes — a cut corner is split on the box diagonal, a square
           corner is filled solid. The `to <corner>` keyword puts the 50% line on
           the box's own diagonal at ANY aspect ratio, so one technique draws a 45°
           chamfer, a shallow bevel and a full hexagon point. */
        linear-gradient(to top left, var(--mp-f1) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to top right, var(--mp-f2) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom left, var(--mp-f1) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom right, var(--mp-f2) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat !important;
    box-shadow: 0 0 16px color-mix(in srgb, var(--mp-accent), transparent 84%);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.mp-preset-gaming-block .elementor-item:hover,
.mp-preset-gaming-block .elementor-item:focus,
.mp-preset-gaming-block .elementor-item.elementor-item-active {
    transform: translateY(-2px);
    box-shadow: 0 0 24px color-mix(in srgb, var(--mp-accent), transparent 66%);
}

/* 11. TACTICAL — asymmetric: only top-left and bottom-right are cut */
.mp-preset-tactical .elementor-item {
    --mp-c: var(--mp-corner-size, 13px);
    --mp-cx: min(var(--mp-c), 50%);
    --mp-cy: min(var(--mp-c), 50%);
    --mp-cxp: var(--mp-c);
    --mp-cyp: var(--mp-c);
    --mp-mitre: calc(var(--mp-bd-w) * 0.4142);
    --mp-def-1: #132746;
    --mp-def-2: #254e86;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), white 12%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), white 12%);
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* MANUALLY DRAWN SHAPE + BORDER — every segment painted and positioned by
       hand. No clip-path, no SVG, no auto-tracing, and no pseudo-elements. */
    background:
        /* ---- FRAME (painted on top of the fill) ---- */
        /* straight edges — each one stops exactly where a cut begins */
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left var(--mp-cxp) top 0 / calc(100% - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left 0 bottom 0 / calc(100% - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) left 0 top var(--mp-cyp) / var(--mp-bd-w) calc(100% - var(--mp-cy)) no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) right 0 top 0 / var(--mp-bd-w) calc(100% - var(--mp-cy)) no-repeat,
        /* chamfer strokes — same box and same diagonal as the fill above, drawn
           flush INSIDE the cut (50% - w .. 50%) so the stroke lies on the fill
           exactly like the straight edges do, at any thickness */
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc1) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) left 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc2) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) right 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        /* MITRE PATCHES — a butt joint between a diagonal and a straight edge
           leaves a notch that grows with thickness. Each patch is a hand-drawn
           right triangle sized off the border width that fills exactly that notch. */
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc1) calc(50% + var(--mp-aa, .5px))) left var(--mp-cxp) top var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc1) calc(50% + var(--mp-aa, .5px))) left var(--mp-bd-w) top calc(var(--mp-cyp) - var(--mp-mitre)) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-cxp) bottom var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-bd-w) bottom calc(var(--mp-cyp) - var(--mp-mitre)) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        /* ---- FILL (underneath) ---- */
        /* centre bands */
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) left 0 top calc(var(--mp-cyp) - .5px) / 100% calc(100% - var(--mp-cy) - var(--mp-cy) + 1px) no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) left calc(var(--mp-cxp) - .5px) top 0 / calc(100% - var(--mp-cx) - var(--mp-cx) + 1px) 100% no-repeat,
        /* four corner boxes — a cut corner is split on the box diagonal, a square
           corner is filled solid. The `to <corner>` keyword puts the 50% line on
           the box's own diagonal at ANY aspect ratio, so one technique draws a 45°
           chamfer, a shallow bevel and a full hexagon point. */
        linear-gradient(to top left, var(--mp-f1) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(var(--mp-f2), var(--mp-f2)) right 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(var(--mp-f1), var(--mp-f1)) left 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom right, var(--mp-f2) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat !important;
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--mp-accent), transparent 58%);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .92em;
}

.mp-preset-tactical .elementor-item:hover,
.mp-preset-tactical .elementor-item:focus,
.mp-preset-tactical .elementor-item.elementor-item-active {
    box-shadow:
        inset 0 -3px 0 var(--mp-accent),
        0 0 16px color-mix(in srgb, var(--mp-accent), transparent 82%);
}

/* 12. ARROW TAB — flat left edge, right end comes to a point */
.mp-preset-arrow-tab .elementor-item {
    --mp-c: var(--mp-corner-size, 18px);
    --mp-cx: min(var(--mp-c), 50%);
    --mp-cy: calc(50% + 0.5px);
    --mp-cxp: var(--mp-c);
    --mp-cyp: 50%;
    --mp-mitre: calc(var(--mp-bd-w) * 0.62);
    --mp-def-1: #132746;
    --mp-def-2: #254e86;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), var(--mp-accent) 14%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), var(--mp-accent) 14%);
    --mp-def-bc1: var(--mp-accent-start);
    --mp-def-bc2: var(--mp-accent-end);
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* MANUALLY DRAWN SHAPE + BORDER — every segment painted and positioned by
       hand. No clip-path, no SVG, no auto-tracing, and no pseudo-elements. */
    background:
        /* ---- FRAME (painted on top of the fill) ---- */
        /* straight edges — each one stops exactly where a cut begins */
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left 0 top 0 / calc(100% - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(90deg, var(--mp-bc1), var(--mp-bc2)) left 0 bottom 0 / calc(100% - var(--mp-cx)) var(--mp-bd-w) no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) left 0 top 0 / var(--mp-bd-w) 100% no-repeat,
        linear-gradient(180deg, var(--mp-bc1), var(--mp-bc2)) right 0 top var(--mp-cyp) / var(--mp-bd-w) calc(100% - var(--mp-cy) - var(--mp-cy)) no-repeat,
        /* chamfer strokes — same box and same diagonal as the fill above, drawn
           flush INSIDE the cut (50% - w .. 50%) so the stroke lies on the fill
           exactly like the straight edges do, at any thickness */
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc2) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) right 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-bd-w) - var(--mp-aa-b, .5px)), var(--mp-bc2) calc(50% - var(--mp-bd-w) + var(--mp-aa-b, .5px)) calc(50% - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-aa-b, .5px))) right 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        /* MITRE PATCHES — a butt joint between a diagonal and a straight edge
           leaves a notch that grows with thickness. Each patch is a hand-drawn
           right triangle sized off the border width that fills exactly that notch. */
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-cxp) top var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-bc2) calc(50% + var(--mp-aa, .5px))) right var(--mp-cxp) bottom var(--mp-bd-w) / var(--mp-mitre) var(--mp-mitre) no-repeat,
        /* ---- FILL (underneath) ---- */
        /* centre bands */
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) left 0 top calc(var(--mp-cyp) - .5px) / 100% calc(100% - var(--mp-cy) - var(--mp-cy) + 1px) no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) left calc(var(--mp-cxp) - .5px) top 0 / calc(100% - var(--mp-cx) - var(--mp-cx) + 1px) 100% no-repeat,
        /* four corner boxes — a cut corner is split on the box diagonal, a square
           corner is filled solid. The `to <corner>` keyword puts the 50% line on
           the box's own diagonal at ANY aspect ratio, so one technique draws a 45°
           chamfer, a shallow bevel and a full hexagon point. */
        linear-gradient(var(--mp-f1), var(--mp-f1)) left 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to top right, var(--mp-f2) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 top 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(var(--mp-f1), var(--mp-f1)) left 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat,
        linear-gradient(to bottom right, var(--mp-f2) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 bottom 0 / var(--mp-cx) var(--mp-cy) no-repeat !important;
    padding-right: calc(var(--mp-corner-size, 18px) + .4em) !important;
    letter-spacing: .04em;
    font-weight: 600;
}

.mp-preset-arrow-tab .elementor-item:hover,
.mp-preset-arrow-tab .elementor-item:focus,
.mp-preset-arrow-tab .elementor-item.elementor-item-active {
    transform: translateX(3px);
}

/* ==========================================================
   LEGACY COMPATIBILITY
   Values removed in earlier versions still render as a pill
   instead of going unstyled. Safe to delete once unused.
   ========================================================== */
.mp-preset-pill-outlined .elementor-item,
.mp-preset-pill-loader .elementor-item,
.mp-preset-pill-dots .elementor-item {
    --mp-def-1: #132746;
    --mp-def-2: #254e86;
    --mp-def-1h: color-mix(in srgb, var(--mp-f1n), white 16%);
    --mp-def-2h: color-mix(in srgb, var(--mp-f2n), white 16%);
    --mp-def-bc1: #ffffff;   /* visible at rest; 'no border' = Thickness 0 */
    overflow: visible !important;
    border: var(--mp-bd-w) var(--mp-bd-style) var(--mp-bc1) !important;
    border-radius: var(--mp-corner-size, 999px) !important;
    background: linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

.mp-preset-pill-outlined .elementor-item::before,
.mp-preset-pill-outlined .elementor-item::after,
.mp-preset-pill-loader .elementor-item::before,
.mp-preset-pill-loader .elementor-item::after,
.mp-preset-pill-dots .elementor-item::before,
.mp-preset-pill-dots .elementor-item::after,
.mp-preset-pill-dots .menu-item::before {
    display: none !important;
}

/* ==========================================================
   Accessibility / reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    [class*="mp-preset-"] .elementor-item,
    [class*="mp-preset-"] .elementor-item::before,
    [class*="mp-preset-"] .elementor-item::after {
        transition: none !important;
    }
}

/* ==========================================================
   MENU PREFIX — a standalone element beside each menu item
   ==========================================================
   The prefix box is a sibling of .elementor-item, never a child,
   so the menu item's own shape/frame never encloses it.

   SHAPES ARE HAND-DRAWN. Circle, Square, Rectangle and Diamond
   are natively traceable, so they use a real CSS border. Every
   ANGLED shape (Triangle in four directions, Polygon) is painted
   as background layers — fill underneath, frame on top — exactly
   like the menu shapes.

   WHY NOT clip-path: clip-path cuts the element's border off
   along the angled edges, so an outlined triangle is impossible
   with it — you get a border on the flat edge only. That is why
   Triangle and Polygon appeared to ignore the border controls.
   ========================================================== */
.mp-prefix-enabled-yes .menu-item {
    --mp-prefix-gap: 8px;
}

.mp-prefix-enabled-yes .menu-item > .mp-menu-prefix {
    /* control tokens (Elementor writes these) */
    --mp-prefix-size: 2.15em;
    --mp-prefix-border-width: 1px;
    --mp-prefix-border-color: #ffffff;
    --mp-prefix-fill: transparent;

    /* short aliases used by the drawing code */
    --mp-pfx-w: var(--mp-prefix-border-width);
    --mp-pfx-bc: var(--mp-prefix-border-color);
    --mp-pfx-f: var(--mp-prefix-fill);
    --mp-aa: .5px;
    --mp-aa-p: min(.5px, calc(var(--mp-pfx-w) / 3));
    --mp-pfx-cx: calc(var(--mp-prefix-size) * .28);
    --mp-pfx-cy: calc(50% + 0.5px);

    box-sizing: border-box;
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mp-prefix-size);
    height: var(--mp-prefix-size);
    min-width: var(--mp-prefix-size);
    margin: 0 var(--mp-prefix-gap) 0 0;
    border: var(--mp-pfx-w) solid var(--mp-pfx-bc);
    background: var(--mp-pfx-f);
    color: inherit;
    font-size: .72em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    z-index: 2;
    pointer-events: none;
}

.mp-prefix-enabled-yes .menu-item > .mp-menu-prefix > .mp-menu-prefix-text {
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* ---------- Placement ---------- */
.mp-prefix-place-before .menu-item,
.mp-prefix-place-after .menu-item {
    display: inline-flex !important;
    align-items: center;
}

.mp-prefix-place-before .menu-item > .mp-menu-prefix {
    order: 0;
    margin: 0 var(--mp-prefix-gap) 0 0;
}

.mp-prefix-place-after .menu-item > .mp-menu-prefix {
    order: 3;
    margin: 0 0 0 var(--mp-prefix-gap);
}

.mp-prefix-place-above .menu-item,
.mp-prefix-place-below .menu-item {
    display: inline-flex !important;
    align-items: center;
    flex-direction: column !important;
}

.mp-prefix-place-above .menu-item > .mp-menu-prefix {
    order: 0;
    margin: 0 0 var(--mp-prefix-gap) 0;
}

.mp-prefix-place-above .menu-item > .elementor-item { order: 1; }
.mp-prefix-place-below .menu-item > .elementor-item { order: 0; }

.mp-prefix-place-below .menu-item > .mp-menu-prefix {
    order: 1;
    margin: var(--mp-prefix-gap) 0 0 0;
}

/* ---------- Natively traceable shapes: real CSS border ---------- */
.mp-prefix-shape-circle .menu-item > .mp-menu-prefix {
    border-radius: 50%;
}

.mp-prefix-shape-square .menu-item > .mp-menu-prefix {
    border-radius: 0;
}

.mp-prefix-shape-rectangle .menu-item > .mp-menu-prefix {
    width: calc(var(--mp-prefix-size) * 1.3);
    min-width: calc(var(--mp-prefix-size) * 1.3);
    height: calc(var(--mp-prefix-size) * .82);
    border-radius: .18em;
}

/* A rotated square is a true diamond and keeps a real border. */
.mp-prefix-shape-diamond .menu-item > .mp-menu-prefix {
    width: calc(var(--mp-prefix-size) * .86);
    min-width: calc(var(--mp-prefix-size) * .86);
    height: calc(var(--mp-prefix-size) * .86);
    border-radius: 0;
    transform: rotate(45deg);
}

.mp-prefix-shape-diamond .menu-item > .mp-menu-prefix .mp-menu-prefix-text {
    transform: rotate(-45deg);
}

.mp-prefix-place-before.mp-prefix-shape-diamond .menu-item > .mp-menu-prefix {
    margin-right: calc(var(--mp-prefix-gap) + .18em);
}

.mp-prefix-place-after.mp-prefix-shape-diamond .menu-item > .mp-menu-prefix {
    margin-left: calc(var(--mp-prefix-gap) + .18em);
}

/* ---------- Hand-drawn angled shapes ---------- */

.mp-prefix-shape-triangle .menu-item > .mp-menu-prefix {
    width: calc(var(--mp-prefix-size) * 1.5);
    min-width: calc(var(--mp-prefix-size) * 1.5);
    height: calc(var(--mp-prefix-size) * 1.3);
}


.mp-prefix-shape-triangle.mp-prefix-triangle-up .menu-item > .mp-menu-prefix {
    border: 0 !important;
    border-radius: 0 !important;
    background:
        /* frame */
        linear-gradient(var(--mp-pfx-bc), var(--mp-pfx-bc)) left 0 bottom 0 / 100% var(--mp-pfx-w) no-repeat,
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) left 0 top 0 / 50% 100% no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) right 0 top 0 / 50% 100% no-repeat,
        /* fill */
        linear-gradient(to top left, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 top 0 / calc(50% + .5px) 100% no-repeat,
        linear-gradient(to top right, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 top 0 / calc(50% + .5px) 100% no-repeat !important;
}

.mp-prefix-shape-triangle.mp-prefix-triangle-up .menu-item > .mp-menu-prefix .mp-menu-prefix-text {
    transform: translateY(.42em);
    font-size: .78em;
}

.mp-prefix-shape-triangle.mp-prefix-triangle-down .menu-item > .mp-menu-prefix {
    border: 0 !important;
    border-radius: 0 !important;
    background:
        /* frame */
        linear-gradient(var(--mp-pfx-bc), var(--mp-pfx-bc)) left 0 top 0 / 100% var(--mp-pfx-w) no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% + var(--mp-aa-p, .5px)) calc(50% + var(--mp-pfx-w) - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-pfx-w) + var(--mp-aa-p, .5px))) left 0 top 0 / 50% 100% no-repeat,
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% + var(--mp-aa-p, .5px)) calc(50% + var(--mp-pfx-w) - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-pfx-w) + var(--mp-aa-p, .5px))) right 0 top 0 / 50% 100% no-repeat,
        /* fill */
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-pfx-f) calc(50% + var(--mp-aa, .5px))) left 0 top 0 / calc(50% + .5px) 100% no-repeat,
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-pfx-f) calc(50% + var(--mp-aa, .5px))) right 0 top 0 / calc(50% + .5px) 100% no-repeat !important;
}

.mp-prefix-shape-triangle.mp-prefix-triangle-down .menu-item > .mp-menu-prefix .mp-menu-prefix-text {
    transform: translateY(-.42em);
    font-size: .78em;
}

.mp-prefix-shape-triangle.mp-prefix-triangle-left .menu-item > .mp-menu-prefix {
    border: 0 !important;
    border-radius: 0 !important;
    background:
        /* frame */
        linear-gradient(var(--mp-pfx-bc), var(--mp-pfx-bc)) right 0 top 0 / var(--mp-pfx-w) 100% no-repeat,
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) left 0 top 0 / 100% 50% no-repeat,
        linear-gradient(to bottom left, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) left 0 bottom 0 / 100% 50% no-repeat,
        /* fill */
        linear-gradient(to top left, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 top 0 / 100% calc(50% + .5px) no-repeat,
        linear-gradient(to bottom left, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 bottom 0 / 100% calc(50% + .5px) no-repeat !important;
}

.mp-prefix-shape-triangle.mp-prefix-triangle-left .menu-item > .mp-menu-prefix .mp-menu-prefix-text {
    transform: translateX(.45em);
    font-size: .78em;
}

.mp-prefix-shape-triangle.mp-prefix-triangle-right .menu-item > .mp-menu-prefix {
    border: 0 !important;
    border-radius: 0 !important;
    background:
        /* frame */
        linear-gradient(var(--mp-pfx-bc), var(--mp-pfx-bc)) left 0 top 0 / var(--mp-pfx-w) 100% no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) left 0 top 0 / 100% 50% no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) left 0 bottom 0 / 100% 50% no-repeat,
        /* fill */
        linear-gradient(to top right, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 top 0 / 100% calc(50% + .5px) no-repeat,
        linear-gradient(to bottom right, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 bottom 0 / 100% calc(50% + .5px) no-repeat !important;
}

.mp-prefix-shape-triangle.mp-prefix-triangle-right .menu-item > .mp-menu-prefix .mp-menu-prefix-text {
    transform: translateX(-.45em);
    font-size: .78em;
}

.mp-prefix-shape-polygon .menu-item > .mp-menu-prefix {
    --mp-pfx-mitre: calc(var(--mp-pfx-w) * 0.62);
    width: calc(var(--mp-prefix-size) * 1.25);
    min-width: calc(var(--mp-prefix-size) * 1.25);
    height: calc(var(--mp-prefix-size) * .92);
    border: 0 !important;
    border-radius: 0 !important;
    background:
        /* frame: flat top and bottom edges */
        linear-gradient(var(--mp-pfx-bc), var(--mp-pfx-bc)) left var(--mp-pfx-cx) top 0 / calc(100% - var(--mp-pfx-cx) - var(--mp-pfx-cx)) var(--mp-pfx-w) no-repeat,
        linear-gradient(var(--mp-pfx-bc), var(--mp-pfx-bc)) left var(--mp-pfx-cx) bottom 0 / calc(100% - var(--mp-pfx-cx) - var(--mp-pfx-cx)) var(--mp-pfx-w) no-repeat,
        /* frame: four hand-drawn point strokes, flush inside the cut */
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) left 0 top 0 / var(--mp-pfx-cx) var(--mp-pfx-cy) no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) right 0 top 0 / var(--mp-pfx-cx) var(--mp-pfx-cy) no-repeat,
        linear-gradient(to bottom left, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) left 0 bottom 0 / var(--mp-pfx-cx) var(--mp-pfx-cy) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-pfx-w) - var(--mp-aa-p, .5px)), var(--mp-pfx-bc) calc(50% - var(--mp-pfx-w) + var(--mp-aa-p, .5px)) calc(50% - var(--mp-aa-p, .5px)), transparent calc(50% + var(--mp-aa-p, .5px))) right 0 bottom 0 / var(--mp-pfx-cx) var(--mp-pfx-cy) no-repeat,
        /* frame: mitre patches where each point meets a flat edge */
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-pfx-bc) calc(50% + var(--mp-aa, .5px))) left var(--mp-pfx-cx) top var(--mp-pfx-w) / var(--mp-pfx-mitre) var(--mp-pfx-mitre) no-repeat,
        linear-gradient(to top right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-pfx-bc) calc(50% + var(--mp-aa, .5px))) right var(--mp-pfx-cx) top var(--mp-pfx-w) / var(--mp-pfx-mitre) var(--mp-pfx-mitre) no-repeat,
        linear-gradient(to bottom left, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-pfx-bc) calc(50% + var(--mp-aa, .5px))) left var(--mp-pfx-cx) bottom var(--mp-pfx-w) / var(--mp-pfx-mitre) var(--mp-pfx-mitre) no-repeat,
        linear-gradient(to bottom right, transparent 0 calc(50% - var(--mp-aa, .5px)), var(--mp-pfx-bc) calc(50% + var(--mp-aa, .5px))) right var(--mp-pfx-cx) bottom var(--mp-pfx-w) / var(--mp-pfx-mitre) var(--mp-pfx-mitre) no-repeat,
        /* fill: centre band plus four point triangles */
        linear-gradient(var(--mp-pfx-f), var(--mp-pfx-f)) left calc(var(--mp-pfx-cx) - .5px) top 0 / calc(100% - var(--mp-pfx-cx) - var(--mp-pfx-cx) + 1px) 100% no-repeat,
        linear-gradient(to top left, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 top 0 / var(--mp-pfx-cx) var(--mp-pfx-cy) no-repeat,
        linear-gradient(to top right, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 top 0 / var(--mp-pfx-cx) var(--mp-pfx-cy) no-repeat,
        linear-gradient(to bottom left, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) left 0 bottom 0 / var(--mp-pfx-cx) var(--mp-pfx-cy) no-repeat,
        linear-gradient(to bottom right, var(--mp-pfx-f) 0 calc(50% - var(--mp-aa, .5px)), transparent calc(50% + var(--mp-aa, .5px))) right 0 bottom 0 / var(--mp-pfx-cx) var(--mp-pfx-cy) no-repeat !important;
}

/* ==========================================================
   PREFIX CONNECTOR — a standalone line between the prefix and
   the menu item.
   ==========================================================
   Purely additive: nothing above this block is touched.

   The connector is its own sibling inside the menu item, never
   inside the prefix and never inside the clickable anchor, so
   neither element's shape or frame encloses it.

   It holds two <i> segments. That is what makes the "slit"
   control trivial and exact: the slit IS the flex gap between
   the two segments, so the line is cut in the middle without
   any masking or overlay. Solid / dashed / dotted are drawn by
   a real CSS border on each segment (so dash and dot sizing
   tracks the thickness the way a divider does); slashed is
   hand-drawn with a repeating gradient, since no border-style
   produces it.
   ========================================================== */
.mp-conn-yes .menu-item > .mp-menu-connector {
    /* Defaults are written as var() FALLBACKS, never as local declarations.
       Declaring them here would shadow any value inherited from an ancestor
       and make the controls look dead. */
    --mp-aa: .5px;
    --mp-aa-c: min(.5px, calc(var(--mp-conn-width, 1px) / 3));
    --mp-conn-slash-size: max(7px, calc(var(--mp-conn-width, 1px) * 5));
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    order: 0;
    gap: var(--mp-conn-slit, 0px);
    pointer-events: none;
    z-index: 1;
}

.mp-conn-yes .menu-item > .mp-menu-connector > i {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    border: 0;
    font-style: normal;
}

/* ---------- Horizontal run (placement Before / After) ---------- */
.mp-prefix-place-before.mp-conn-yes .menu-item > .mp-menu-connector,
.mp-prefix-place-after.mp-conn-yes .menu-item > .mp-menu-connector {
    flex-direction: row;
    width: var(--mp-conn-length, 24px);
    min-width: var(--mp-conn-length, 24px);
    height: auto;
}

.mp-prefix-place-before.mp-conn-yes .menu-item > .mp-menu-connector > i,
.mp-prefix-place-after.mp-conn-yes .menu-item > .mp-menu-connector > i {
    height: 0;
    border-top: var(--mp-conn-width, 1px) var(--mp-conn-style, solid) var(--mp-conn-color, #ffffff);
}

/* Sits between the prefix and the link. Its own Gap control sets the distance
   to the menu item; left unset it falls back to the prefix Gap so the two
   sides stay even without touching a second control. */
.mp-prefix-place-before.mp-conn-yes .menu-item > .mp-menu-connector {
    margin: 0 var(--mp-conn-gap, var(--mp-prefix-gap, 8px)) 0 0;
}

.mp-prefix-place-after.mp-conn-yes .menu-item > .mp-menu-connector {
    order: 2;
    margin: 0 0 0 var(--mp-conn-gap, var(--mp-prefix-gap, 8px));
}

/* ---------- Vertical run (placement Above / Below) ---------- */
.mp-prefix-place-above.mp-conn-yes .menu-item > .mp-menu-connector,
.mp-prefix-place-below.mp-conn-yes .menu-item > .mp-menu-connector {
    flex-direction: column;
    height: var(--mp-conn-length, 24px);
    min-height: var(--mp-conn-length, 24px);
    width: auto;
}

.mp-prefix-place-above.mp-conn-yes .menu-item > .mp-menu-connector > i,
.mp-prefix-place-below.mp-conn-yes .menu-item > .mp-menu-connector > i {
    width: 0;
    border-left: var(--mp-conn-width, 1px) var(--mp-conn-style, solid) var(--mp-conn-color, #ffffff);
}

.mp-prefix-place-above.mp-conn-yes .menu-item > .mp-menu-connector {
    margin: 0 0 var(--mp-conn-gap, var(--mp-prefix-gap, 8px)) 0;
}

.mp-prefix-place-below.mp-conn-yes .menu-item > .mp-menu-connector {
    margin: var(--mp-conn-gap, var(--mp-prefix-gap, 8px)) 0 0 0;
}

/* ---------- Slashed — hand drawn, no border-style can do it ---------- */
.mp-connstyle-slashed.mp-conn-yes .menu-item > .mp-menu-connector > i {
    border: 0 !important;
}

.mp-prefix-place-before.mp-connstyle-slashed.mp-conn-yes .menu-item > .mp-menu-connector > i,
.mp-prefix-place-after.mp-connstyle-slashed.mp-conn-yes .menu-item > .mp-menu-connector > i {
    height: var(--mp-conn-slash-size);
    background: repeating-linear-gradient(60deg, var(--mp-conn-color, #ffffff) 0 calc(var(--mp-conn-width, 1px) - var(--mp-aa-c, .5px)), transparent calc(var(--mp-conn-width, 1px) + var(--mp-aa-c, .5px)) calc(var(--mp-conn-width, 1px) * 3.4));
}

/* ---------- Connector → Item gap ----------
   Moves the menu item relative to the connector only. Elementor's own menu
   spacing widens every item at once, which is not the same thing. This is a
   margin on the item's connector-facing side, so a NEGATIVE value pulls the
   item in tighter than the connector's own Gap can reach, and a positive one
   pushes it away — without affecting any other item spacing. */
.mp-prefix-place-before.mp-conn-yes .menu-item > .elementor-item {
    margin-left: var(--mp-item-gap, 0px);
}

.mp-prefix-place-after.mp-conn-yes .menu-item > .elementor-item {
    margin-right: var(--mp-item-gap, 0px);
}

.mp-prefix-place-above.mp-conn-yes .menu-item > .elementor-item {
    margin-top: var(--mp-item-gap, 0px);
}

.mp-prefix-place-below.mp-conn-yes .menu-item > .elementor-item {
    margin-bottom: var(--mp-item-gap, 0px);
}

.mp-prefix-place-above.mp-connstyle-slashed.mp-conn-yes .menu-item > .mp-menu-connector > i,
.mp-prefix-place-below.mp-connstyle-slashed.mp-conn-yes .menu-item > .mp-menu-connector > i {
    width: var(--mp-conn-slash-size);
    background: repeating-linear-gradient(150deg, var(--mp-conn-color, #ffffff) 0 calc(var(--mp-conn-width, 1px) - var(--mp-aa-c, .5px)), transparent calc(var(--mp-conn-width, 1px) + var(--mp-aa-c, .5px)) calc(var(--mp-conn-width, 1px) * 3.4));
}

/* ==========================================================
   EXTRA UNDERLINE / OVERLINE
   ==========================================================
   Independent of the shape presets — works with a preset, or on
   a plain menu with no preset at all.

   Drawn as real spans inside the anchor, positioned absolutely.
   Not pseudo-elements (Elementor's pointer styles own those) and
   not background layers (the shape presets own the anchor's
   background). Two segments, so the middle slit is the flex gap
   between them and the line is genuinely cut, not overlaid.

   Width and Slit are percentages of the menu item, so they keep
   their proportions as labels change length.
   ========================================================== */
.mp-rule-u-yes .elementor-nav-menu .elementor-item,
.mp-rule-o-yes .elementor-nav-menu .elementor-item {
    position: relative;
}

.mp-rule-u-yes .elementor-item > .mp-rule,
.mp-rule-o-yes .elementor-item > .mp-rule {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: var(--mp-rule-width, 100%);
    display: flex;
    align-items: center;
    gap: var(--mp-rule-slit, 0%);
    pointer-events: none;
}

.mp-rule-u-yes .elementor-item > .mp-rule > i,
.mp-rule-o-yes .elementor-item > .mp-rule > i {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 0;
    border-top: var(--mp-rule-w, 2px) var(--mp-rule-style, solid) var(--mp-rule-color, currentColor);
}

.mp-rule-u-yes .elementor-item > .mp-rule-u {
    bottom: var(--mp-rule-offset, 0px);
}

.mp-rule-o-yes .elementor-item > .mp-rule-o {
    top: var(--mp-rule-offset, 0px);
}

/* ==========================================================
   HOVER EFFECTS
   ==========================================================
   Independent of the shape presets — each one composes on top
   of whatever preset (or no preset) is in use.

   The label lives in .mp-fx-t > .mp-fx-a and sweeps live in
   .mp-fx-sweep, both real spans inside the anchor. Pseudo-
   elements on THOSE are fair game (Elementor only claims the
   ones on .elementor-item), which is how the flip's back face
   and the glitch's ghosts are drawn.

   Tokens: --mp-fx-color, --mp-fx-color-2, --mp-fx-dur,
           --mp-fx-size
   ========================================================== */
/* The anchor must be a positioning context for the sweep layers — the shape
   presets provide one, a plain menu does not. */
[class*="mp-fx-"] .elementor-nav-menu .elementor-item {
    position: relative;
}

[class*="mp-fx-"] .elementor-item > .mp-fx-t {
    position: relative;
    display: inline-block;
    z-index: 1;
    /* The presets isolate their children, and isolation forces
       transform-style back to flat — which turns the 3D flip into a plain
       2D mirror. The label wrapper opts out. */
    isolation: auto;
}

[class*="mp-fx-"] .elementor-item > .mp-fx-sweep {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* ---------- Neon Glow ----------
   drop-shadow follows the alpha of the painted shape, so the glow
   traces a hand-drawn octagon or bracket instead of a box. */
.mp-fx-neon .elementor-item {
    transition: filter var(--mp-fx-dur, .35s) ease;
}

.mp-fx-neon .elementor-item:hover,
.mp-fx-neon .elementor-item:focus {
    filter:
        drop-shadow(0 0 calc(var(--mp-fx-size, 10px) * .45) var(--mp-fx-color, #00e5ff))
        drop-shadow(0 0 var(--mp-fx-size, 10px) var(--mp-fx-color, #00e5ff));
}

.mp-fx-neon .elementor-item:hover > .mp-fx-t,
.mp-fx-neon .elementor-item:focus > .mp-fx-t {
    text-shadow: 0 0 calc(var(--mp-fx-size, 10px) * .8) var(--mp-fx-color, #00e5ff);
}

/* ---------- Loader — fill wipe ---------- */
.mp-fx-loader .elementor-item > .mp-fx-sweep {
    inset: var(--mp-bd-w, 0px);
    border-radius: inherit;
    background: var(--mp-fx-color, #00e5ff);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--mp-fx-dur, .35s) cubic-bezier(.4, 0, .2, 1);
}

.mp-fx-loader .elementor-item:hover > .mp-fx-sweep,
.mp-fx-loader .elementor-item:focus > .mp-fx-sweep {
    transform: scaleX(1);
}

/* ---------- Loader — underline wipe ---------- */
.mp-fx-loader-line .elementor-item > .mp-fx-sweep {
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mp-fx-size, 3px);
    background: var(--mp-fx-color, #00e5ff);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--mp-fx-dur, .35s) cubic-bezier(.4, 0, .2, 1);
}

.mp-fx-loader-line .elementor-item:hover > .mp-fx-sweep,
.mp-fx-loader-line .elementor-item:focus > .mp-fx-sweep {
    transform: scaleX(1);
}

/* ---------- Chrome Shine ---------- */
.mp-fx-shine .elementor-item {
    overflow: hidden !important;
}

.mp-fx-shine .elementor-item > .mp-fx-sweep {
    top: -30%;
    bottom: -30%;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg,
        transparent,
        color-mix(in srgb, var(--mp-fx-color, #ffffff), transparent 55%),
        transparent);
    transform: translateX(0) skewX(-18deg);
    transition: transform calc(var(--mp-fx-dur, .35s) * 2) ease;
}

.mp-fx-shine .elementor-item:hover > .mp-fx-sweep,
.mp-fx-shine .elementor-item:focus > .mp-fx-sweep {
    transform: translateX(330%) skewX(-18deg);
}

/* ---------- HUD Scanline ---------- */
.mp-fx-scan .elementor-item {
    overflow: hidden !important;
}

.mp-fx-scan .elementor-item > .mp-fx-sweep {
    left: 0;
    right: 0;
    top: 0;
    height: var(--mp-fx-size, 3px);
    background: linear-gradient(90deg,
        transparent,
        var(--mp-fx-color, #00e5ff),
        transparent);
    opacity: 0;
    transform: translateY(-100%);
}

.mp-fx-scan .elementor-item:hover > .mp-fx-sweep,
.mp-fx-scan .elementor-item:focus > .mp-fx-sweep {
    opacity: 1;
    animation: mp-fx-scan calc(var(--mp-fx-dur, .35s) * 3) linear infinite;
}

@keyframes mp-fx-scan {
    from { transform: translateY(-100%); }
    to   { transform: translateY(calc(var(--mp-fx-item-h, 46px))); }
}

/* ---------- Flip in place ---------- */
.mp-fx-flipx .elementor-item,
.mp-fx-flipy .elementor-item {
    perspective: 600px;
}

.mp-fx-flipx .elementor-item > .mp-fx-t,
.mp-fx-flipy .elementor-item > .mp-fx-t {
    transform-style: preserve-3d;
    transition: transform var(--mp-fx-dur, .45s) cubic-bezier(.3, .8, .3, 1);
}

.mp-fx-flipx .elementor-item > .mp-fx-t > .mp-fx-a,
.mp-fx-flipy .elementor-item > .mp-fx-t > .mp-fx-a,
.mp-fx-flipx .elementor-item > .mp-fx-t > .mp-fx-b,
.mp-fx-flipy .elementor-item > .mp-fx-t > .mp-fx-b {
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.mp-fx-flipx .elementor-item > .mp-fx-t > .mp-fx-b,
.mp-fx-flipy .elementor-item > .mp-fx-t > .mp-fx-b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mp-fx-color, #00e5ff);
    white-space: nowrap;
}

.mp-fx-flipx .elementor-item > .mp-fx-t > .mp-fx-b { transform: rotateX(180deg); }
.mp-fx-flipy .elementor-item > .mp-fx-t > .mp-fx-b { transform: rotateY(180deg); }

.mp-fx-flipx .elementor-item:hover > .mp-fx-t,
.mp-fx-flipx .elementor-item:focus > .mp-fx-t { transform: rotateX(180deg); }

.mp-fx-flipy .elementor-item:hover > .mp-fx-t,
.mp-fx-flipy .elementor-item:focus > .mp-fx-t { transform: rotateY(180deg); }

/* ---------- RGB Glitch ----------
   Two offset ghost copies plus a jitter. Deliberately no clip-path:
   the split is done with colour offsets, which stays crisp at any size. */
.mp-fx-glitch .elementor-item > .mp-fx-t::before,
.mp-fx-glitch .elementor-item > .mp-fx-t::after {
    content: attr(data-mp-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.mp-fx-glitch .elementor-item > .mp-fx-t::before { color: var(--mp-fx-color, #ff2d95); }
.mp-fx-glitch .elementor-item > .mp-fx-t::after  { color: var(--mp-fx-color-2, #00e5ff); }

.mp-fx-glitch .elementor-item:hover > .mp-fx-t::before,
.mp-fx-glitch .elementor-item:focus > .mp-fx-t::before {
    opacity: .9;
    animation: mp-fx-glitch-a calc(var(--mp-fx-dur, .35s)) steps(2, end) infinite;
}

.mp-fx-glitch .elementor-item:hover > .mp-fx-t::after,
.mp-fx-glitch .elementor-item:focus > .mp-fx-t::after {
    opacity: .9;
    animation: mp-fx-glitch-b calc(var(--mp-fx-dur, .35s)) steps(2, end) infinite;
}

.mp-fx-glitch .elementor-item:hover > .mp-fx-t,
.mp-fx-glitch .elementor-item:focus > .mp-fx-t {
    animation: mp-fx-shake calc(var(--mp-fx-dur, .35s)) steps(3, end) infinite;
}

@keyframes mp-fx-glitch-a {
    0%   { transform: translate(calc(var(--mp-fx-size, 3px) * -1), 1px); }
    50%  { transform: translate(var(--mp-fx-size, 3px), -1px); }
    100% { transform: translate(calc(var(--mp-fx-size, 3px) * -.6), 0); }
}

@keyframes mp-fx-glitch-b {
    0%   { transform: translate(var(--mp-fx-size, 3px), -1px); }
    50%  { transform: translate(calc(var(--mp-fx-size, 3px) * -1), 1px); }
    100% { transform: translate(calc(var(--mp-fx-size, 3px) * .6), 0); }
}

@keyframes mp-fx-shake {
    0%, 100% { transform: translate(0, 0); }
    33%      { transform: translate(-1px, 1px); }
    66%      { transform: translate(1px, -1px); }
}

/* ---------- Matrix scramble ----------
   The glyph cycling is done in JS (see menu-plays.js); this is only the
   look. Text only — the wrapper, frame and fill are untouched. */
.mp-fx-matrix .elementor-item > .mp-fx-t {
    font-variant-ligatures: none;
    font-feature-settings: "tnum" 1;
}

.mp-fx-matrix .elementor-item:hover > .mp-fx-t,
.mp-fx-matrix .elementor-item:focus > .mp-fx-t {
    color: var(--mp-fx-color, #22ff88);
    text-shadow:
        0 0 calc(var(--mp-fx-size, 8px) * .6) var(--mp-fx-color, #22ff88),
        0 0 var(--mp-fx-size, 8px) color-mix(in srgb, var(--mp-fx-color, #22ff88), transparent 55%);
}

/* Reduced motion: keep the colour change, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    [class*="mp-fx-"] .elementor-item > .mp-fx-t,
    [class*="mp-fx-"] .elementor-item > .mp-fx-t::before,
    [class*="mp-fx-"] .elementor-item > .mp-fx-t::after,
    [class*="mp-fx-"] .elementor-item > .mp-fx-sweep {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================
   BRACKETS & BRACES — menu presets
   ==========================================================
   Additive: nothing above this block changes.

   These are MARK presets. The fill defaults to transparent so
   the label sits inside a bracket rather than inside a filled
   chip; the Background controls still fill it if you want one.

   Everything is hand-drawn as background layers on the element
   itself. Straight arms are plain gradient bars, round and
   curly strokes are radial-gradient rings, and the slashes use
   the same corner-keyword diagonal as the cut-corner presets.
   No clip-path, no SVG, no pseudo-elements.

   Corner Size drives the bracket size (arm length / arc depth).
   Border Thickness drives the stroke weight, Border Color its
   colour, in all three states.
   ========================================================== */
.mp-preset-bracket-square .elementor-item,
.mp-preset-bracket-square-tb .elementor-item,
.mp-preset-bracket-round .elementor-item,
.mp-preset-bracket-round-tb .elementor-item,
.mp-preset-bracket-curly .elementor-item,
.mp-preset-bracket-curly-tb .elementor-item,
.mp-preset-bracket-slash .elementor-item {
    --mp-brk: var(--mp-corner-size, 10px);
    --mp-def-1: transparent;
    --mp-def-2: transparent;
    --mp-def-1h: color-mix(in srgb, var(--mp-accent), transparent 86%);
    --mp-def-2h: color-mix(in srgb, var(--mp-accent), transparent 92%);
    --mp-def-bc1: var(--mp-accent-start);
    --mp-def-bc2: var(--mp-accent-end);
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Room for the marks so they never sit on top of the label. */
.mp-preset-bracket-square .elementor-item,
.mp-preset-bracket-round .elementor-item,
.mp-preset-bracket-curly .elementor-item,
.mp-preset-bracket-slash .elementor-item {
    padding-left: calc(var(--mp-brk) + .6em) !important;
    padding-right: calc(var(--mp-brk) + .6em) !important;
}

.mp-preset-bracket-square-tb .elementor-item,
.mp-preset-bracket-round-tb .elementor-item,
.mp-preset-bracket-curly-tb .elementor-item {
    /* A radial ring on a very flat ellipse draws thinner than its nominal
       width and breaks up at 1px, so the arc stroke is scaled here. */
    --mp-arc-w: calc(var(--mp-bd-w) * 2.6);
    padding-top: calc(var(--mp-brk) + .3em) !important;
    padding-bottom: calc(var(--mp-brk) + .3em) !important;
}

/* ---------- [ ]  square, sides ---------- */
.mp-preset-bracket-square .elementor-item {
    background:
        /* [ */
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 top 0 / var(--mp-bd-w) 100% no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 top 0 / var(--mp-brk) var(--mp-bd-w) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 bottom 0 / var(--mp-brk) var(--mp-bd-w) no-repeat,
        /* ] */
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 top 0 / var(--mp-bd-w) 100% no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 top 0 / var(--mp-brk) var(--mp-bd-w) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 bottom 0 / var(--mp-brk) var(--mp-bd-w) no-repeat,
        /* fill */
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

/* ---------- square, top & bottom ---------- */
.mp-preset-bracket-square-tb .elementor-item {
    background:
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 top 0 / 100% var(--mp-bd-w) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 top 0 / var(--mp-bd-w) var(--mp-brk) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 top 0 / var(--mp-bd-w) var(--mp-brk) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 bottom 0 / 100% var(--mp-bd-w) no-repeat,
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 bottom 0 / var(--mp-bd-w) var(--mp-brk) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 bottom 0 / var(--mp-bd-w) var(--mp-brk) no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

/* ---------- ( )  round, sides — one elliptical ring per side ---------- */
.mp-preset-bracket-round .elementor-item {
    background:
        radial-gradient(ellipse 100% 50% at 100% 50%, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc1) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) left 0 top 0 / var(--mp-brk) 100% no-repeat,
        radial-gradient(ellipse 100% 50% at 0 50%, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc2) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) right 0 top 0 / var(--mp-brk) 100% no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

/* ---------- round, top & bottom ---------- */
.mp-preset-bracket-round-tb .elementor-item {
    /* A radial ring on a very flat ellipse draws thinner than its nominal
       width and breaks up at 1px, so the arc stroke is scaled here. */
    --mp-arc-w: calc(var(--mp-bd-w) * 2.6);
    background:
        radial-gradient(ellipse 50% 100% at 50% 100%, transparent 0 calc(100% - var(--mp-arc-w) - 0.6px), var(--mp-bc1) calc(100% - var(--mp-arc-w)) calc(100% - 0.6px), transparent 100%) left 0 top 0 / 100% var(--mp-brk) no-repeat,
        radial-gradient(ellipse 50% 100% at 50% 0, transparent 0 calc(100% - var(--mp-arc-w) - 0.6px), var(--mp-bc2) calc(100% - var(--mp-arc-w)) calc(100% - 0.6px), transparent 100%) left 0 bottom 0 / 100% var(--mp-brk) no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

/* ---------- { }  curly, sides — two arcs per brace plus the middle nub
   that is what separates a brace from a round bracket ---------- */
.mp-preset-bracket-curly .elementor-item {
    background:
        /* middle nubs — `center` is used deliberately: a percentage offset in
           background-position resolves against (box - image), not the box, so
           a calc() of 50% would land in the wrong place */
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) left 0 center / calc(var(--mp-brk) * .5) var(--mp-bd-w) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) right 0 center / calc(var(--mp-brk) * .5) var(--mp-bd-w) no-repeat,
        radial-gradient(ellipse 100% 100% at 100% 100%, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc1) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) left 0 top 0 / var(--mp-brk) 50% no-repeat,
        radial-gradient(ellipse 100% 100% at 100% 0, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc1) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) left 0 bottom 0 / var(--mp-brk) 50% no-repeat,
        radial-gradient(ellipse 100% 100% at 0 100%, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc2) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) right 0 top 0 / var(--mp-brk) 50% no-repeat,
        radial-gradient(ellipse 100% 100% at 0 0, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc2) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) right 0 bottom 0 / var(--mp-brk) 50% no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

/* ---------- curly, top & bottom ---------- */
.mp-preset-bracket-curly-tb .elementor-item {
    background:
        /* middle nubs, pointing away from the label */
        linear-gradient(var(--mp-bc1), var(--mp-bc1)) center top 0 / var(--mp-bd-w) calc(var(--mp-brk) * .5) no-repeat,
        linear-gradient(var(--mp-bc2), var(--mp-bc2)) center bottom 0 / var(--mp-bd-w) calc(var(--mp-brk) * .5) no-repeat,
        radial-gradient(ellipse 100% 100% at 100% 100%, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc1) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) left 0 top 0 / 50% var(--mp-brk) no-repeat,
        radial-gradient(ellipse 100% 100% at 0 100%, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc2) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) right 0 top 0 / 50% var(--mp-brk) no-repeat,
        radial-gradient(ellipse 100% 100% at 100% 0, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc1) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) left 0 bottom 0 / 50% var(--mp-brk) no-repeat,
        radial-gradient(ellipse 100% 100% at 0 0, transparent 0 calc(100% - var(--mp-bd-w) - 0.6px), var(--mp-bc2) calc(100% - var(--mp-bd-w)) calc(100% - 0.6px), transparent 100%) right 0 bottom 0 / 50% var(--mp-brk) no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

/* ----------  /  /  slashes ---------- */
.mp-preset-bracket-slash .elementor-item {
    background:
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-bd-w) / 2 - var(--mp-aa-b, .5px)), var(--mp-bc1) calc(50% - var(--mp-bd-w) / 2 + var(--mp-aa-b, .5px)) calc(50% + var(--mp-bd-w) / 2 - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-bd-w) / 2 + var(--mp-aa-b, .5px))) left 0 top 0 / var(--mp-brk) 100% no-repeat,
        linear-gradient(to top left, transparent 0 calc(50% - var(--mp-bd-w) / 2 - var(--mp-aa-b, .5px)), var(--mp-bc2) calc(50% - var(--mp-bd-w) / 2 + var(--mp-aa-b, .5px)) calc(50% + var(--mp-bd-w) / 2 - var(--mp-aa-b, .5px)), transparent calc(50% + var(--mp-bd-w) / 2 + var(--mp-aa-b, .5px))) right 0 top 0 / var(--mp-brk) 100% no-repeat,
        linear-gradient(var(--mp-ga), var(--mp-f1), var(--mp-f2)) !important;
}

/* Shared hover / active accent for the bracket family. */
.mp-preset-bracket-square .elementor-item:hover,
.mp-preset-bracket-square-tb .elementor-item:hover,
.mp-preset-bracket-round .elementor-item:hover,
.mp-preset-bracket-round-tb .elementor-item:hover,
.mp-preset-bracket-curly .elementor-item:hover,
.mp-preset-bracket-curly-tb .elementor-item:hover,
.mp-preset-bracket-slash .elementor-item:hover,
.mp-preset-bracket-square .elementor-item.elementor-item-active,
.mp-preset-bracket-square-tb .elementor-item.elementor-item-active,
.mp-preset-bracket-round .elementor-item.elementor-item-active,
.mp-preset-bracket-round-tb .elementor-item.elementor-item-active,
.mp-preset-bracket-curly .elementor-item.elementor-item-active,
.mp-preset-bracket-curly-tb .elementor-item.elementor-item-active,
.mp-preset-bracket-slash .elementor-item.elementor-item-active {
    text-shadow: 0 0 10px color-mix(in srgb, var(--mp-accent), transparent 45%);
}

/* ==========================================================
   ELEMENTOR NATIVE WORDPRESS MENU DIVIDER EXTENSION
   Uses Elementor's native Divider controls as the source of truth.
   The added controls only provide tilt + before/after spacing, while
   this targets the actual native menu pseudo-element directly.
   ========================================================== */
.mp-native-divider-enhanced .elementor-nav-menu > li:not(:last-child) {
    position: relative;
}

/* Horizontal/default menu: directly target the same native selector that
   works in Elementor custom CSS: .elementor-nav-menu > li::after */
.mp-native-divider-enhanced .elementor-nav-menu > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: var(--mp-native-divider-height, 40px);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-left-width: var(--mp-native-divider-width, 1px);
    border-left-style: var(--mp-native-divider-style, solid);
    border-left-color: var(--mp-native-divider-color, currentColor);
    background: none;
    transform: translate(50%, -50%) rotate(var(--mp-native-divider-angle, 0deg));
    transform-origin: center center;
    pointer-events: none;
    z-index: 2;
}

/* Vertical menu: native divider is horizontal. */
.mp-native-divider-enhanced .elementor-nav-menu--layout-vertical > li:not(:last-child)::after,
.mp-native-divider-enhanced .elementor-nav-menu--main.elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child)::after,
.mp-native-divider-enhanced .elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: var(--mp-native-divider-height, 40px);
    height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-top-width: var(--mp-native-divider-width, 1px);
    border-top-style: var(--mp-native-divider-style, solid);
    border-top-color: var(--mp-native-divider-color, currentColor);
    background: none;
    transform: translate(-50%, 50%) rotate(var(--mp-native-divider-angle, 0deg));
    transform-origin: center center;
    pointer-events: none;
    z-index: 2;
}

/* Gap Before/After: driven by Elementor control variables so the controls
   update the actual pseudo-element position and item spacing. */
.mp-native-divider-enhanced .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item:not(:last-child),
.mp-native-divider-enhanced .elementor-nav-menu--layout-horizontal > li.menu-item:not(:last-child) {
    margin-right: var(--mp-native-divider-gap-before, 0px);
}
.mp-native-divider-enhanced .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item:not(:first-child),
.mp-native-divider-enhanced .elementor-nav-menu--layout-horizontal > li.menu-item:not(:first-child) {
    margin-left: var(--mp-native-divider-gap-after, 0px);
}

.mp-native-divider-enhanced .elementor-nav-menu--layout-vertical .elementor-nav-menu > li.menu-item:not(:last-child),
.mp-native-divider-enhanced .elementor-nav-menu--layout-vertical > li.menu-item:not(:last-child) {
    margin-bottom: var(--mp-native-divider-gap-before, 0px);
}
.mp-native-divider-enhanced .elementor-nav-menu--layout-vertical .elementor-nav-menu > li.menu-item:not(:first-child),
.mp-native-divider-enhanced .elementor-nav-menu--layout-vertical > li.menu-item:not(:first-child) {
    margin-top: var(--mp-native-divider-gap-after, 0px);
}

/* Preserve Elementor's native line styles. */
.mp-native-divider-enhanced[data-mp-divider-style="solid"] {
    --mp-native-divider-style: solid;
}
.mp-native-divider-enhanced[data-mp-divider-style="dashed"] {
    --mp-native-divider-style: dashed;
}
.mp-native-divider-enhanced[data-mp-divider-style="dotted"] {
    --mp-native-divider-style: dotted;
}
.mp-native-divider-enhanced[data-mp-divider-style="double"] {
    --mp-native-divider-style: double;
}
.mp-native-divider-enhanced[data-mp-divider-style="groove"],
.mp-native-divider-enhanced[data-mp-divider-style="grooved"] {
    --mp-native-divider-style: groove;
}

/* Slashed: repeated diagonal strokes ////// while remaining the same
   native ::after divider target and honoring Tilt Angle. */
.mp-native-divider-enhanced[data-mp-divider-style="slashed"] .elementor-nav-menu > li:not(:last-child)::after {
    width: max(7px, calc(var(--mp-native-divider-width, 1px) * 7));
    height: var(--mp-native-divider-height, 40px);
    border: 0;
    background: repeating-linear-gradient(
        -45deg,
        var(--mp-native-divider-color, currentColor) 0,
        var(--mp-native-divider-color, currentColor) 2px,
        transparent 2px,
        transparent 7px
    );
    transform: translate(50%, -50%) rotate(var(--mp-native-divider-angle, 0deg));
}

.mp-native-divider-enhanced[data-mp-divider-style="slashed"] .elementor-nav-menu--layout-vertical > li:not(:last-child)::after,
.mp-native-divider-enhanced[data-mp-divider-style="slashed"] .elementor-nav-menu--main.elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child)::after,
.mp-native-divider-enhanced[data-mp-divider-style="slashed"] .elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child)::after {
    width: var(--mp-native-divider-height, 40px);
    height: max(7px, calc(var(--mp-native-divider-width, 1px) * 7));
    border: 0;
    background: repeating-linear-gradient(
        -45deg,
        var(--mp-native-divider-color, currentColor) 0,
        var(--mp-native-divider-color, currentColor) 2px,
        transparent 2px,
        transparent 7px
    );
    transform: translate(-50%, 50%) rotate(var(--mp-native-divider-angle, 0deg));
}

/* ==========================================================
   PLUGIN-OWNED CUSTOM DIVIDER
   Uses the same native menu pseudo-element the user can target
   with Elementor Custom CSS:
   .elementor-nav-menu > li:not(:last-child)::after
   The plugin only adds the controls/state around that target.
   ========================================================== */
.mp-custom-divider-yes .elementor-nav-menu > li:not(:last-child) {
    position: relative;
    margin-right: calc(var(--mp-custom-divider-gap-before, 0px) + var(--mp-custom-divider-gap-after, 0px)) !important;
}

.mp-custom-divider-yes .elementor-nav-menu > li:not(:last-child)::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: calc(-1 * var(--mp-custom-divider-gap-before, 0px)) !important;
    left: auto !important;
    bottom: auto !important;
    width: 0 !important;
    height: var(--mp-custom-divider-length, 16px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-left: var(--mp-custom-divider-width, 1px) solid var(--mp-custom-divider-color, #888888) !important;
    background: none !important;
    color: var(--mp-custom-divider-color, #888888) !important;
    transform: translate(50%, -50%) rotate(var(--mp-custom-divider-angle, 0deg)) !important;
    transform-origin: center center !important;
    pointer-events: none !important;
    z-index: 999 !important;
}

.mp-custom-divider-yes[data-mp-custom-divider-style="dashed"] .elementor-nav-menu > li:not(:last-child)::after {
    border-left-style: dashed !important;
}

.mp-custom-divider-yes[data-mp-custom-divider-style="dotted"] .elementor-nav-menu > li:not(:last-child)::after {
    border-left-style: dotted !important;
}

/* Reference-CSS slash treatment: //////
   The pseudo-element remains the divider target; the repeated diagonal
   strokes make the shape visibly slash-like while the same Tilt Angle
   control rotates the whole divider freely. */
.mp-custom-divider-yes[data-mp-custom-divider-style="slashed"] .elementor-nav-menu > li:not(:last-child)::after {
    width: max(9px, calc(var(--mp-custom-divider-width, 1px) * 8)) !important;
    height: var(--mp-custom-divider-length, 16px) !important;
    border: 0 !important;
    background: repeating-linear-gradient(
        -45deg,
        var(--mp-custom-divider-color, #888888) 0,
        var(--mp-custom-divider-color, #888888) max(1px, var(--mp-custom-divider-width, 1px)),
        transparent max(1px, var(--mp-custom-divider-width, 1px)),
        transparent 6px
    ) !important;
    transform: translate(50%, -50%) rotate(var(--mp-custom-divider-angle, 0deg)) !important;
}

/* Vertical menu: the same controls rotate the native target in the
   perpendicular direction without changing any Elementor menu markup. */
.mp-custom-divider-yes .elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child),
.mp-custom-divider-yes .elementor-nav-menu--main.elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child) {
    margin-right: 0 !important;
    margin-bottom: calc(var(--mp-custom-divider-gap-before, 0px) + var(--mp-custom-divider-gap-after, 0px)) !important;
}

.mp-custom-divider-yes .elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child)::after,
.mp-custom-divider-yes .elementor-nav-menu--main.elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child)::after {
    top: auto !important;
    right: auto !important;
    bottom: calc(-1 * var(--mp-custom-divider-gap-before, 0px)) !important;
    left: 50% !important;
    width: var(--mp-custom-divider-length, 16px) !important;
    height: 0 !important;
    border: 0 !important;
    border-top: var(--mp-custom-divider-width, 1px) solid var(--mp-custom-divider-color, #888888) !important;
    transform: translate(-50%, 50%) rotate(var(--mp-custom-divider-angle, 0deg)) !important;
}

.mp-custom-divider-yes[data-mp-custom-divider-style="slashed"] .elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child)::after,
.mp-custom-divider-yes[data-mp-custom-divider-style="slashed"] .elementor-nav-menu--main.elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child)::after {
    width: var(--mp-custom-divider-length, 16px) !important;
    height: max(9px, calc(var(--mp-custom-divider-width, 1px) * 8)) !important;
    border: 0 !important;
    background: repeating-linear-gradient(
        -45deg,
        var(--mp-custom-divider-color, #888888) 0,
        var(--mp-custom-divider-color, #888888) max(1px, var(--mp-custom-divider-width, 1px)),
        transparent max(1px, var(--mp-custom-divider-width, 1px)),
        transparent 6px
    ) !important;
    transform: translate(-50%, 50%) rotate(var(--mp-custom-divider-angle, 0deg)) !important;
}