/* -------------------------------------------------------
   CAROUSEL — optimized for exactly 3 slides
--------------------------------------------------------- */

.carousel {
    position: relative;
    overflow: hidden;
}

/* Outer frame controls width + height */
.carousel-frame {
    position: relative;
    overflow: hidden;
    width: 90vw;
    /* max-width: 1200px; */
    height: 100%;
    min-height: 460px;
    margin: 0 auto;
    background: #fff;
    box-sizing: border-box;
}

/* Container that moves left/right */
.carousel-items {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;

    /* Slides placed horizontally */
    white-space: nowrap;

    /* Smooth movement */
    transition: left 0.8s ease-in-out;
}

/* Slide widths — each slide = 100% of frame */
.carousel-item-accessible {
    display: inline-block;
    width: 90vw;
    height: 100%;
    vertical-align: top;
    box-sizing: border-box;

    padding: 1px 20px 15px;
    white-space: normal;
    /* allow text inside to wrap */
}

/* -------------------------------------------------------
   SLIDE POSITIONS (only 3 slides)
--------------------------------------------------------- */

.carousel-items[data-carousel-item-accessible-shown="1"] {
    left: 0%;
}

.carousel-items[data-carousel-item-accessible-shown="2"] {
    left: -100%;
}

.carousel-items[data-carousel-item-accessible-shown="3"] {
    left: -200%;
}

/* -------------------------------------------------------
   LENTILS / DOTS
--------------------------------------------------------- */

.lentils {
    text-align: center;
}

.lentil {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    border-radius: 50%;
    background: #3279bf;
    border: 3px solid transparent;
    cursor: pointer;
}

.lentil.enabled {
    background: red;
}

.lentil:focus {
    outline: none;
    border-color: black;
}

/* -------------------------------------------------------
   ARROWS
--------------------------------------------------------- */

[class^="carousel-arrow"] {
    width: 50px;
    height: 50px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-arrow-left {
    left: 38%;
    transform: translateY(0%) scaleX(-1);
    /* flip it */
}

.carousel-arrow-left path,
.carousel-arrow-right path {
    fill: #707070;
}

.carousel-arrow-right {
    right: 38%;
    transform: translateY(0%);
}

[class^="carousel-arrow"] circle {
    fill: #3279bf;
    stroke: #3279bf;
}

[class^="carousel-arrow"].disabled {
    pointer-events: none;
    opacity: 0.45;
}

[class^="carousel-arrow"].disabled circle {
    fill: #ccc;
    stroke: #ccc;
}

[class^="carousel-arrow"]:not(.disabled):hover circle,
[class^="carousel-arrow"]:not(.disabled):focus circle {
    stroke: black;
}