/* ==========================================================================
   PHARMACY SLIDESHOW ITEM
   ========================================================================== */



/* Carousel */

.cwf-grid__column--page-layout .swiper.swiper-spotlight,
.cwf-grid__column--page-layout div.spotlight-single {
    margin-bottom: 0 !important;
    padding: 0;
}

@media (min-width: 1024px) {

    .cwf-grid__column--page-layout .swiper.swiper-spotlight,
    .cwf-grid__column--page-layout div.spotlight-single {
        padding: 0;
    }

}

@media (min-width: 1024px) {
    .swiper-wrapper .cwf-grid {
        gap: 3rem;
    }
}

.swiper-slide.spotlight-carousel__item {
    height: auto;
}

@media (min-width: 768px) {
    .spotlight-carousel__desc-text p {
        font-size: 1.2rem;
        line-height: 1.6;
    }
}

.spotlight-carousel__desc-text h3 {
    font-weight: 700;
}

.spotlight-carousel__desc-text a {
    text-decoration: underline;
}

.spotlight-carousel__desc-text .t4_button {
    text-align: center;
}

@media (min-width: 992px) {

    .spotlight-carousel__desc-text .t4_button {
        text-align: left;
    }

}

.spotlight-carousel__desc-text .t4_button a {
    text-decoration: none;
}

.spotlight-carousel__image {
    width: 100%;
}

.spotlight-carousel__image img {
    width: 100% !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.spotlight-carousel__desc-text {
    width: 100%;
}

@media (min-width: 992px) {

    .spotlight-carousel__desc-text,
    .spotlight-carousel__image {
        place-self: center;
    }
}

.cwf-grid .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 1rem));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 1rem));
    background: transparent;
    border: 3px solid var(--swiper-pagination-color, #80225f);
    opacity: 1;
}

.cwf-grid .swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color, #80225f);
    border: none;
}

.cwf-grid .swiper-horizontal>.swiper-pagination-bullets,
.cwf-grid .swiper-pagination-bullets.swiper-pagination-horizontal,
.cwf-grid .swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 0;
}

.cwf-grid .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.cwf-grid .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .cwf-grid .swiper-pagination-bullet {
        transition: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .cwf-grid .swiper-pagination-bullet {
        transition: all 0.1s linear;
    }
}

.cwf-grid .swiper-pagination-bullet:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cwf-grid .swiper-pagination-bullet:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .cwf-grid .swiper-pagination-bullet:hover {
        transform: scale(120%);
    }
}


/* From Compass carousel */

.chs-carousel__controls {
    --chs-carousel__controls--padding: 0.5rem;
    align-items: center;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding-top: var(--chs-carousel__controls--padding);
    width: 100%
}

@media (min-width:1024px) {

    .chs-carousel:is([data-navigation],
        [data-autoplay]) .chs-carousel__controls {
        --chs-carousel__controls--padding: 1rem
    }
}

.chs-carousel__container {
    margin: var(--cwf-contain--margin, 0 auto);
    max-width: var(--cwf-contain--max-width, 1400px);
    width: var(--cwf-contain--width, 100%)
}

.chs-carousel__controls .chs-carousel__container {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between
}

.chs-carousel__scrollbar {
    background-color: #ececec;
    flex: 1;
    height: 1rem;
    position: relative
}

.chs-carousel__scrollbar:hover {
    cursor: pointer
}

@media (min-width:1024px) {
    .chs-carousel__scrollbar {
        height: .5rem
    }
}

.chs-carousel__handle {
    background-color: var(--cwf-accent--background, var(--cwf-color--blue, #006894));
    height: 1rem;
    left: 0;
    position: relative;
    top: 0;
    width: 100%
}

.chs-carousel__handle:hover {
    cursor: -webkit-grab;
    cursor: grab
}

@media (min-width:1024px) {
    .chs-carousel__handle {
        height: .5rem
    }
}

.chs-carousel__pagination {
    --chs-carousel__pagination--padding: 0.75rem;
    padding-left: var(--chs-carousel__pagination--padding);
    padding-right: var(--chs-carousel__pagination--padding)
}

@media (min-width:1024px) {
    .chs-carousel__pagination {
        --chs-carousel__pagination--padding: 1rem
    }

    .chs-carousel__fraction {
        display: none
    }

    .cwf-grid>.chs-carousel .chs-carousel__fraction {
        display: block
    }
}

.chs-carousel__dots {
    --chs-carousel__dots--display: none;
    display: var(--chs-carousel__dots--display)
}

@media (min-width:1024px) {
    .chs-carousel__dots {
        --chs-carousel__dots--display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem
    }

    .cwf-grid>.chs-carousel .chs-carousel__dots {
        --chs-carousel__dots--display: none
    }
}

.chs-carousel__dot {
    --chs-carousel__dot--width: 1.75rem;
    --chs-carousel__dot--height: 0.5rem;
    --chs-carousel__dot--background-color: #ccc;
    --chs-carousel__dot--scale: 1;
    --chs-carousel__dot--angle: polygon(15.1916980475% 0%, 100% 0%, 84.8083019525% 100%, 0% 100%);
    background-color: var(--chs-carousel__dot--background-color);
    border: none;
    border-radius: 0;
    -webkit-clip-path: var(--chs-carousel__dot--angle);
    clip-path: var(--chs-carousel__dot--angle);
    display: block;
    height: var(--chs-carousel__dot--height);
    padding: 0;
    transform: scale(var(--chs-carousel__dot--scale));
    transition: background-color .1s ease-in-out, transform .1s ease-in-out;
    width: var(--chs-carousel__dot--width)
}

@media (prefers-reduced-motion:reduce) {
    .chs-carousel__dot {
        transition: transform 0s
    }
}

:root[data-reduced-motion=true] .chs-carousel__dot {
    transition: transform 0s
}

@media (prefers-reduced-motion:no-preference) {
    .chs-carousel__dot {
        transition: background-color .1s ease-in-out, transform .1s ease-in-out
    }
}

:root[data-reduced-motion=false] .chs-carousel__dot {
    transition: background-color .1s ease-in-out, transform .1s ease-in-out
}

.chs-carousel__dot:first-child {
    --chs-carousel__dot--angle: polygon(0% 0%, 100% 0%, 82.276352278% 100%, 0% 100%)
}

.chs-carousel__dot:first-child,
.chs-carousel__dot:last-child {
    --chs-carousel__dot--width: 1.5rem
}

.chs-carousel__dot:last-child {
    --chs-carousel__dot--angle: polygon(17.723647722% 0%, 100% 0%, 100% 100%, 0% 100%)
}

.chs-carousel__dot:hover {
    cursor: pointer
}

.chs-carousel__dot--active {
    --chs-carousel__dot--background-color: var(--cwf-accent--background, var(--cwf-color--blue, #006894));
    --chs-carousel__dot--scale: 1.5
}

.chs-carousel__navigation {
    display: flex
}

.chs-carousel__button {
    --chs-carousel__button--background-color: transparent;
    --chs-carousel__button--font-size: 1rem;
    --chs-carousel__button--color: #444;
    align-items: center;
    background-color: var(--chs-carousel__button--background-color);
    border: none;
    border-radius: .25rem;
    color: var(--chs-carousel__button--color);
    display: flex;
    font-size: var(--chs-carousel__button--font-size);
    padding: .5rem .75rem;
    transition: color .1s ease-in-out
}

.chs-carousel__button:hover {
    cursor: pointer
}

.chs-carousel__button:focus,
.chs-carousel__button:hover {
    --chs-carousel__button--background-color: #f8f8f8;
    --chs-carousel__button--color: var(--cwf-accent--background, var(--cwf-color--blue, #006894))
}

.chs-carousel__button--disabled {
    --chs-carousel__button--background-color: transparent !important;
    --chs-carousel__button--color: #757575 !important
}

.chs-carousel__button--disabled:hover {
    cursor: not-allowed
}

.chs-carousel__button--pause .chs-carousel__pause,
.chs-carousel__button--play .chs-carousel__play {
    display: none
}

.chs-carousel__pause,
.chs-carousel__play {
    height: var(--chs-carousel__button--font-size);
    min-height: var(--chs-carousel__button--font-size);
    min-width: var(--chs-carousel__button--font-size);
    width: var(--chs-carousel__button--font-size)
}

.chs-carousel__chevron {
    height: calc(var(--chs-carousel__button--font-size)*1.125);
    min-height: calc(var(--chs-carousel__button--font-size)*1.125);
    min-width: calc(var(--chs-carousel__button--font-size)*1.125);
    width: calc(var(--chs-carousel__button--font-size)*1.125)
}

.chs-carousel__chevron--left,
.chs-carousel__pause,
.chs-carousel__play {
    margin-right: .5rem
}

.chs-carousel__chevron--right {
    margin-left: .5rem
}