/* ── Wrapper ────────────────────────────────────────────────── */
.cs-wrapper {
    position: relative;
    user-select: none;
    /* No overflow:hidden here — that lives on cs-track-outer only,
       so peek (negative translateX) is not clipped prematurely */
}

/* ── Full width override ────────────────────────────────────── */
.cs-fullwidth {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Prevent horizontal scrollbar caused by 100vw including scrollbar width */
html:has(.cs-fullwidth) {
    overflow-x: hidden;
}

.cs-track {
    display: flex;
    will-change: transform;
    /* transition applied via JS using configured speed */
}

/* ── Track ──────────────────────────────────────────────────── */
.cs-track-outer {
    overflow: hidden;
    width: 100%;
}

/* When full width, the wrapper itself must not clip the side arrows */
.cs-fullwidth {
    overflow: visible;
}

/* But the track-outer inside fullwidth must still clip slides */
.cs-fullwidth .cs-track-outer {
    overflow: hidden;
}

.cs-track.cs-animating {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Slides ─────────────────────────────────────────────────── */
.cs-slide {
    flex-shrink: 0;
    box-sizing: border-box;
}

.cs-slide-img {
    display: block;
    width: 100%;
    height: auto;        /* default: natural proportional height */
    object-fit: cover;
}

.cs-rounded,
.cs-rounded .cs-slide-img {
    border-radius: 10px;
    overflow: hidden;
}

.cs-slide.cs-rounded {
    overflow: hidden;
}

.cs-slide-text {
    display: block;
    width: 100%;
    word-wrap: break-word;
}

/* ── Arrows — sides ─────────────────────────────────────────── */
.cs-arrows--sides {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    height: var(--cs-img-height, 300px);
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
}

.cs-arrows--sides .cs-arrow {
    pointer-events: all;
    position: relative;
    z-index: 11;
    flex-shrink: 0;
    margin: 0 20px;
}

.cs-arrows--sides .cs-arrow {
    pointer-events: all;
}

/* ── Arrows — below right ───────────────────────────────────── */
.cs-arrows--below {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ── Arrow button base ──────────────────────────────────────── */
.cs-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    border: 2px solid #8fbc6b !important;
    background-color: transparent !important;
    line-height: 1 !important;
    transition: opacity 0.2s, background-color 0.2s !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Fallback size */
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
}

.cs-arrow svg {
    width: 55% !important;
    height: 55% !important;
    display: block !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cs-arrow svg polygon {
    fill: #8fbc6b !important;
}

.cs-arrow:hover {
    background-color: rgba(143, 188, 107, 0.15) !important;
}

.cs-arrow[aria-disabled="true"] {
    opacity: 0.3 !important;
    cursor: default !important;
}

/* ── Hover-only arrow visibility ────────────────────────────── */
.cs-arrows--hover .cs-arrow {
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}

.cs-wrapper:hover .cs-arrows--hover .cs-arrow,
.cs-arrows--hover:hover .cs-arrow {
    opacity: 1 !important;
}