.alexfill-carousel { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; isolation: isolate; background: #173b2d; }
.alexfill-carousel-slider { position: relative; width: 100%; max-width: 1500px; margin: 0 auto; overflow: visible; aspect-ratio: var(--banner-desktop-ratio, 16 / 5); touch-action: pan-y; }
.alexfill-carousel-track { display: flex; width: 100%; height: 100%; transform: translate3d(0,0,0); transition: transform .74s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.alexfill-carousel-track.is-dragging { transition: none; }
.alexfill-carousel-item { position: relative; display: block; flex: 0 0 100%; min-width: 0; height: 100%; overflow: hidden; text-decoration: none; }
.alexfill-carousel-item picture { display: block; width: 100%; height: 100%; }
.alexfill-carousel-item img, .alexfill-carousel-item video { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: 0; }
.alexfill-carousel-controls { position: absolute; z-index: 2; left: 50%; bottom: 23px; transform: translateX(-50%); width: 100%; max-width: 1500px; padding: 0 32px; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; pointer-events: none; }
.alexfill-carousel-progress { display: flex; flex-wrap: nowrap; flex: 0 1 532px; min-width: 0; gap: min(8px, calc(100% / (var(--banner-count, 10) * 3))); pointer-events: auto; }
.alexfill-carousel-progress-item { display: flex; align-items: flex-end; flex: 1 1 46px; width: 46px; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.alexfill-carousel-progress-rail { display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(65,78,69,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.42), 0 1px 3px rgba(0,0,0,.3); }
.alexfill-carousel-progress-rail span { display: block; width: 100%; height: 100%; background: rgba(196,210,126,.88); transform: scaleX(0); transform-origin: left center; }
.alexfill-carousel-arrows { display: flex; gap: 8px; pointer-events: auto; }
.alexfill-carousel-arrows button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,.7); border-radius: 50%; padding: 0; color: rgba(255,255,255,.82); background: rgba(20,36,28,.46); box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; }
.alexfill-carousel-arrows svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Optical correction keeps the chevron tips balanced within the circles. */
.alexfill-carousel-arrows [data-hero-direction="-1"] svg { transform: translateX(-1px); }
.alexfill-carousel-arrows [data-hero-direction="1"] svg { transform: translateX(1px); }
.alexfill-carousel-arrows button { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.alexfill-carousel-progress-rail { transition: background-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
  .alexfill-carousel-arrows button:hover { color: #e1f7d6; border-color: rgba(185,235,166,.9); background-color: rgba(30,64,40,.58); box-shadow: 0 0 8px rgba(145,235,166,.26), inset 0 0 5px rgba(145,235,166,.1); }
  .alexfill-carousel-progress-item:hover .alexfill-carousel-progress-rail { background-color: rgba(92,128,77,.65); box-shadow: 0 0 0 1px rgba(193,238,169,.8), 0 0 8px rgba(145,235,166,.32); }
}
.alexfill-carousel-controls[hidden] { display: none; }
.alexfill-carousel-item img:not([src]) { visibility: hidden; }

.alexfill-carousel-controls button:focus-visible, .alexfill-carousel-item:focus-visible { outline: 2px solid #bce6a2; outline-offset: -2px; }
@media (max-width: 800px) {
  .alexfill-carousel-slider { aspect-ratio: var(--banner-mobile-ratio, 16 / 9); }
  .alexfill-carousel-controls { bottom: 0; padding: 0 16px; gap: 12px; }
  .alexfill-carousel-progress { flex: 1; gap: min(5px, calc(100% / (var(--banner-count, 10) * 3))); max-width: 530px; }
  .alexfill-carousel-progress-item { flex: 1; width: auto; height: 40px; }
  .alexfill-carousel-progress-rail { height: 3px; }
  .alexfill-carousel-arrows { display: none; }
  .alexfill-carousel-arrows button { width: 28px; height: 28px; font-size: 22px; }
}