.embla-dots {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             8px;
    padding:         16px 0 8px;
}
.embla-dots__btn {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        none;
    background:    var(--dot-color);
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s ease, transform 0.2s ease;
    flex-shrink:   0;
}
.embla-dots__btn.is-active   { background: var(--dot-color-active); transform: scale(1.35); }
.embla-dots__btn:not(.is-active):hover {
    opacity:   0.7;
    transform: scale(1.15);
}
.embla-dots__btn:focus { outline: none; }
.embla-dots__btn:focus-visible {
    outline:        2px solid var(--wp--preset--color--primary, #0070f3);
    outline-offset: 3px;
}

/* ─── Autoplay Dot Progress Animation ─── */
@keyframes embla-dot-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.embla-dots__btn.is-autoplaying {
    position: relative;
    overflow: hidden;
}
.embla-dots__btn.is-autoplaying::after {
    content:          '';
    position:         absolute;
    inset:            0;
    background:       var(--dot-color-active, #fff);
    border-radius:    inherit;
    transform-origin: left center;
    transform:        scaleX(0);
    animation:        embla-dot-fill var(--autoplay-delay, 5s) linear forwards;
    pointer-events:   none;
}
/* RTL — fill from right */
[dir="rtl"] .embla-dots__btn.is-autoplaying::after {
    transform-origin: right center;
}
/* When paused (hovers, drag), freeze the animation */
.embla-slider.is-autoplay-paused .embla-dots__btn.is-autoplaying::after {
    animation-play-state: paused;
}

/* ─── Dot Position Variants ─── */

/* Right — vertical strip on the right side */
.embla-slider[data-dot-position="right"] .embla-dots {
    position:        absolute;
    right:           12px;
    top:             50%;
    transform:       translateY(-50%);
    flex-direction:  column;
    padding:         0;
    z-index:         10;
}

/* Left — vertical strip on the left side */
.embla-slider[data-dot-position="left"] .embla-dots {
    position:        absolute;
    left:            12px;
    top:             50%;
    transform:       translateY(-50%);
    flex-direction:  column;
    padding:         0;
    z-index:         10;
}