.aj-slider--accessible { overflow: visible; }
.aj-carousel { position: relative; min-width: 0; width: 100%; }
.aj-carousel__track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: .35rem; scroll-padding: .35rem; align-items: stretch; scrollbar-width: none; -ms-overflow-style: none; }
/* Hide the native horizontal scrollbar — the carousel already exposes prev/next
   buttons, dots and full keyboard nav; the bar was just visual noise under every
   slider. The track stays scrollable by touch/trackpad. */
.aj-carousel__track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.aj-carousel__track > * { flex: 0 0 calc(100% - .7rem); min-width: 0; margin: 0; scroll-snap-align: start; box-sizing: border-box; }
.aj-carousel__track.is-moving { scroll-snap-type: none; }
.aj-carousel__viewport { position: relative; }
/* Full-size layer over the track so the buttons anchor to the slide box exactly;
   the layer itself is click-through, the buttons opt back in. */
.aj-carousel__overlay { position: absolute; inset: 0; pointer-events: none; }
.aj-carousel__overlay[hidden] { display: none; }
.aj-carousel__overlay button { pointer-events: auto; }
.aj-carousel__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .65rem; margin-top: 1rem; }
.aj-carousel__controls[hidden] { display: none; }
.aj-carousel button { min-width: 44px; min-height: 44px; border: 1px solid currentColor; border-radius: .4rem; padding: .5rem .85rem; font: inherit; color: inherit; background: transparent; cursor: pointer; }
.aj-carousel button:disabled { opacity: .5; cursor: default; }

/* Overlaid controls — round icon buttons on the slide box itself: prev/next on
   the left/right edges (vertically centred), pause bottom-centre. Dots + the
   live-region sit in .aj-carousel__controls below. */
.aj-carousel__overlay [data-prev],
.aj-carousel__overlay [data-next],
.aj-carousel__overlay [data-pause] {
    position: absolute;
    z-index: 2;
    width: 44px; height: 44px;
    padding: 0;
    display: grid; place-items: center;
    border: 1px solid var(--gray-200, rgba(15, 23, 42, .14));
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--gray-900, #0f172a);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
}
.aj-carousel__overlay [data-prev],
.aj-carousel__overlay [data-next] { top: 50%; transform: translateY(-50%); }
.aj-carousel__overlay [data-prev] { left: 4px; }
.aj-carousel__overlay [data-next] { right: 4px; }
.aj-carousel__overlay [data-pause] { left: 50%; bottom: 12px; transform: translateX(-50%); }
.aj-carousel__chevron { display: block; width: 22px; height: 22px; }

/* Dim "next slide in Ns" hint, bottom-right. JS shows it only while a countdown
   is actually running; hidden entirely under reduced-motion. */
.aj-carousel__countdown {
    position: absolute;
    right: 10px; bottom: 10px;
    z-index: 2;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px; line-height: 1.7;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgba(15, 23, 42, .45);
    pointer-events: none;
    user-select: none;
}
.aj-carousel__countdown[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .aj-carousel__countdown { display: none !important; } }

.aj-carousel__ico { display: block; }
.aj-carousel__ico--play,
.aj-carousel__overlay [data-pause][data-paused] .aj-carousel__ico--pause { display: none; }
.aj-carousel__overlay [data-pause][data-paused] .aj-carousel__ico--play { display: block; }
@media (min-width: 640px) {
    .aj-carousel__overlay [data-prev] { left: -12px; }
    .aj-carousel__overlay [data-next] { right: -12px; }
}
@media (prefers-color-scheme: dark) {
    .aj-carousel__overlay [data-prev],
    .aj-carousel__overlay [data-next],
    .aj-carousel__overlay [data-pause] { background: rgba(17, 24, 39, .92); color: #f8fafc; border-color: rgba(248, 250, 252, .18); }
}

/* Standard visually-hidden utility — the theme uses .screen-reader-text (e.g.
   carousel.php's position live-region, the button labels) but ships no rule for
   it; define it here so it's guaranteed wherever the carousel loads. */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
    position: fixed !important; top: 8px; left: 8px;
    width: auto; height: auto;
    padding: .75rem 1rem; margin: 0;
    clip: auto; white-space: normal;
    background: #fff; color: #111; z-index: 100000;
}
.aj-carousel__dots { display: flex; gap: .4rem; flex-wrap: wrap; }
.aj-carousel__dots [aria-current="true"] { box-shadow: inset 0 0 0 2px currentColor; font-weight: 700; }
.aj-carousel :focus-visible { outline: 3px solid var(--primary, currentColor); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .aj-carousel__track { scroll-behavior: auto !important; } }