/* ─── Progress Bar ─── */
/* Always hugs the slide bottom like a border.
   - Outside nav: sits in normal flow directly after the viewport.
   - Inside nav:  absolute at bottom:0 so the nav-bar floats above it. */

.embla-progress {
    position:   relative;
    width:      100%;
    height:     var(--progress-height, 3px);
    background: var(--dot-color, rgba(255, 255, 255, 0.3));
    overflow:   hidden;
}

.embla-progress__bar {
    position:         absolute;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    background:       var(--dot-color-active, #ffffff);
    transform-origin: 0 0;
    transform:        scaleX(0);
    will-change:      transform;
    transition:       transform 0.15s ease-out;
}

/* Inside placement + bottom arrows: progress bar at the absolute bottom edge */
.embla-slider[data-nav-placement="inside"][data-arrow-position^="bottom"] .embla-progress {
    position: absolute;
    bottom:   0;
    left:     0;
    right:    0;
    z-index:  9;
}