.embla-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    background:      var(--nav-btn-bg);
    color:           var(--nav-btn-color);
    border:          none;
    border-radius:   50%;
    width:           var(--nav-btn-size);
    height:          var(--nav-btn-size);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      opacity 0.3s ease, background 0.2s ease, filter 0.2s ease;
    padding:         0;
}
.embla-prev { left: 1rem; }
.embla-next { right: 1rem; }

/* RTL — flip side arrows */
[dir="rtl"] .embla-prev { left: auto; right: 1rem; }
[dir="rtl"] .embla-next { right: auto; left: 1rem; }
[dir="rtl"] .embla-prev svg { transform: scaleX(-1); }
[dir="rtl"] .embla-next svg { transform: scaleX(-1); }
.embla-btn:hover { filter: brightness(0.85); }
.embla-btn:focus { outline: none; }
.embla-btn:disabled,
.embla-btn[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.embla-btn:focus-visible {
    outline:        3px solid var(--wp--preset--color--primary, #0070f3);
    outline-offset: 2px;
}
.embla-btn svg { fill: currentColor; pointer-events: none; }

/* ─── Arrow Position: Sides (default) ─── */
/* Arrows at vertical center, left/right edges — no nav-bar needed */

/* ─── Arrow Position: Outside ─── */
/* Arrows outside slider area with horizontal padding — no nav-bar needed */
.embla-slider[data-arrow-position="outside"] {
    padding-left:  calc(var(--nav-btn-size) + 16px);
    padding-right: calc(var(--nav-btn-size) + 16px);
}
.embla-slider[data-arrow-position="outside"] .embla-prev {
    left: 0;
}
.embla-slider[data-arrow-position="outside"] .embla-next {
    right: 0;
}

/* RTL — flip outside arrow positions */
[dir="rtl"] .embla-slider[data-arrow-position="outside"] .embla-prev {
    left: auto;
    right: 0;
}
[dir="rtl"] .embla-slider[data-arrow-position="outside"] .embla-next {
    right: auto;
    left: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Navigation Bar  (v3 — CSS-order layout system)
   ═══════════════════════════════════════════════════════════════════
   HTML order is always:  [Prev] [Next] [Dots?] [Counter?]
   CSS `order` + flex rearranges per arrow-position variant.
   ─────────────────────────────────────────────────────────────── */

.embla-nav-bar {
    display:     flex;
    align-items: center;
    gap:         8px;
    z-index:     10;
}

/* ─── Placement: Inside (overlay on slide bottom) ─── */
.embla-slider[data-nav-placement="inside"] .embla-nav-bar {
    position: absolute;
    bottom:   var(--nav-offset-y, 12px);
    left:     var(--nav-offset-x, 12px);
    right:    var(--nav-offset-x, 12px);
}

/* ─── Placement: Outside (below slide in normal flow) ─── */
.embla-slider[data-nav-placement="outside"] .embla-nav-bar {
    position: relative;
    padding:  var(--nav-offset-y, 12px) var(--nav-offset-x, 12px) 0;
}

/* ─── Nav-bar child resets ─── */
.embla-nav-bar .embla-btn {
    position:    static;
    top:         auto;
    left:        auto;
    right:       auto;
    transform:   none;
    flex-shrink: 0;
}
.embla-nav-bar .embla-dots {
    padding:   0;
    min-width: 0;
}
.embla-nav-bar .embla-counter {
    position:       static;
    flex-shrink:    0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Bottom Right  —  [Prev][Next]  ·····  [·Dots·]  ·····  [Counter]
   Dots are absolutely centered on the full slider width.
   ═══════════════════════════════════════════════════════════════════ */
.embla-slider[data-arrow-position="bottom-right"] .embla-nav-bar .embla-prev    { order: 1; }
.embla-slider[data-arrow-position="bottom-right"] .embla-nav-bar .embla-next    { order: 2; }
.embla-slider[data-arrow-position="bottom-right"] .embla-nav-bar .embla-dots {
    order:     3;
    position:  absolute;
    left:      50%;
    top:       50%;
    transform: translate(-50%, -50%);
}
.embla-slider[data-arrow-position="bottom-right"] .embla-nav-bar .embla-counter { order: 4; margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════
   Bottom Left  —  [Counter]  ·····  [·Dots·]  ·····  [Prev][Next]
   Dots are absolutely centered on the full slider width.
   ═══════════════════════════════════════════════════════════════════ */
.embla-slider[data-arrow-position="bottom-left"] .embla-nav-bar .embla-counter { order: 1; }
.embla-slider[data-arrow-position="bottom-left"] .embla-nav-bar .embla-dots {
    order:     2;
    position:  absolute;
    left:      50%;
    top:       50%;
    transform: translate(-50%, -50%);
}
.embla-slider[data-arrow-position="bottom-left"] .embla-nav-bar .embla-prev    { order: 3; margin-left: auto; }
.embla-slider[data-arrow-position="bottom-left"] .embla-nav-bar .embla-next    { order: 4; }

/* ═══════════════════════════════════════════════════════════════════
   Bottom Center  —  centered [Prev] [Dots] [Next]  ·  [Counter] →
   Counter is absolutely positioned so the group stays truly centred.
   ═══════════════════════════════════════════════════════════════════ */
.embla-slider[data-arrow-position="bottom-center"] .embla-nav-bar {
    justify-content: center;
}
.embla-slider[data-arrow-position="bottom-center"] .embla-nav-bar .embla-prev    { order: 1; }
.embla-slider[data-arrow-position="bottom-center"] .embla-nav-bar .embla-dots    { order: 2; flex: 0 1 auto; }
.embla-slider[data-arrow-position="bottom-center"] .embla-nav-bar .embla-next    { order: 3; }
.embla-slider[data-arrow-position="bottom-center"] .embla-nav-bar .embla-counter {
    order:     4;
    position:  absolute;
    right:     0;
    top:       50%;
    transform: translateY(-50%);
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive — scale down navigation on small screens
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .embla-slider {
        --nav-btn-size: 36px;
    }
    /* Override arrow-style variants (higher specificity than [data-arrow-style] rules) */
    .embla-slider[data-arrow-style="rounded"]  { --nav-btn-size: 42px; }
    .embla-slider[data-arrow-style="circle"]   { --nav-btn-size: 40px; }
    .embla-slider[data-arrow-style="minimal"]  { --nav-btn-size: 36px; }

    .embla-slider[data-arrow-position="outside"] {
        padding-left:  calc(var(--nav-btn-size) + 8px);
        padding-right: calc(var(--nav-btn-size) + 8px);
    }
    .embla-nav-bar {
        gap: 6px;
    }
    .embla-counter {
        font-size: 11px;
        padding:   3px 8px;
        min-width: 2.5em;
    }
}