/**
* Swiper Options CSS
*/
@media all {

    .swiper {
        --swiper-speed: 250;
        position: relative;
    }

    .swiper-slider {
        --swiper-slides-view: 1;
        --swiper-effect: slide;
        --swiper-autoplay: false;
        --swiper-autoplay-delay: 5000;
        --swiper-loop: true;
        overflow: hidden;
    }

    .swiper-slider .swiper-prev {
        margin-left: var(--page-padding);
    }
    .swiper-slider .swiper-next {
        margin-right: var(--page-padding);
    }

    .swiper-carousel {
        --swiper-slides-view: 1;
        --swiper-effect: slide;
        --swiper-autoplay: false;
        --swiper-loop: false;
        --swiper-gap: var(--container-gap);
        margin-left: calc(var(--swiper-gap) / -2);
        margin-right: calc(var(--swiper-gap) / -2);
        width: calc(100% + var(--swiper-gap));
        overflow: visible;
    }

    /* dots */

    .swiper-dots {
        --swiper-pagination-bullet-size: .75rem;
        --swiper-pagination-bullet-horizontal-gap: .375rem;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
    }

    /* nav */

    .swiper-nav button {
        position: absolute;
        top: calc(50% - var(--size-vertical-gap) / 2);
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        background-color: transparent;
        padding: 0;
        font-size: 3.75em;
        border: 0 none transparent;
        color: var(--color-text);
        line-height: 0;
        padding: var(--swiper-gap);
    }

    .swiper-nav button:not(.swiper-button-disabled):focus,
    .swiper-nav button:not(.swiper-button-disabled):hover {
        color: var(--color-1);
    }

    .swiper-nav button.swiper-button-disabled {
        opacity: .05;
    }

    .swiper-nav .swiper-prev {
        left: 0;
    }    
    .swiper-nav .swiper-next {
        right: 0;
    }

    /* nav - carousel */

    .swiper-carousel .swiper-nav button {
        top: 0;
        bottom: var(--size-vertical-gap);
        transform: none;
        width: calc((var(--page-width) - var(--content-width-outer)) / 2);
        display: grid;
        align-items: center;
        height: 100%;
    }

    .swiper-carousel button i {
        display: none;
    }

    .swiper-carousel .swiper-prev {
        margin-right: calc(var(--swiper-gap) / 2);
        left: unset;
        right: 100%;
        justify-content: right;
    }    
    .swiper-carousel .swiper-next {
        margin-left: calc(var(--swiper-gap) / 2);
        left: 100%;
        right: unset;
        justify-content: left;
    }

    .swiper-pagination {
        --swiper-pagination-top: unset;
        --swiper-pagination-bottom: 0;
        width: unset !important;
        right: unset !important;
        left: unset !important;
        margin-left:  auto;
        margin-right:  auto;
        padding: calc(var(--container-gap) / 2);
        padding: 0 var(--size-1);
        display: flex;
        justify-content: center;
        /*! bottom: 0; */
        position: relative;
    }
    
    .swiper-pagination .swiper-pagination-bullet {
        position: relative;
        background-color: var(--ce-color-fg);
    }

    .swiper-pagination-bullet::before {
        --bullet-offset: calc(var(--swiper-pagination-bullet-horizontal-gap) * -1);
        content: "";
        position: absolute;
        display: block;
        z-index: -1;
        top: var(--bullet-offset);
        right: var(--bullet-offset);
        bottom: var(--bullet-offset);
        left: var(--bullet-offset);
    }

    .swiper-slider .swiper-pagination {
        margin-bottom: var(--size-4);
    }

    .swiper-carousel .swiper-dots {
        position: relative
    }

    .swiper-carousel .swiper-pagination {
        position: relative;
        margin-top: var(--page-gap);
    }

    .swiper-carousel .swiper-pagination.swiper-pagination-lock {
        margin-bottom: 0;
    }

    .product-accessories .swiper-carousel .swiper-pagination ,
    .ce-grid-fullwidth-bg .swiper-carousel .swiper-pagination {
        background-color: transparent;
    }

    .swiper-grid-carousel.header-set {
        display: grid;
        grid-template-columns: repeat(23, minmax(0, 1fr));
        grid-template-rows: repeat(2, auto);
    }

    .swiper-grid-carousel.header-set .ce-header {
        grid-column: 1 / -8;
        grid-row: 1 / -2;
    }

    .swiper-grid-carousel.header-set .swiper {
        grid-column: 1 / -1;
        grid-row: 2 / -1;
    }

    .swiper-grid-carousel.header-set .swiper-dots {
        grid-column: 17 / -1;
        grid-row: 1 / -2;
        display: grid;
        align-items: center;
    }

    .swiper-dots .swiper-pagination-bullet {
        border-radius: 100%;
        display: block;
        background-color: var(--ce-color-fg);
        opacity: .125;
    }

    .ce-inverted .swiper-dots .swiper-pagination-bullet {
        opacity: .25;
    }

    .swiper-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
        opacity: 1;
        background-color: var(--color-1);
    }

    .swiper-slider + .swiper-dots .swiper-pagination-bullet {
        background-color: var(--color-text-light);
        opacity: .25;
    }

    .swiper-slider + .swiper-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
        opacity: 1;
    }

    .swiper-slider .swiper-nav button,
    .swiper-slider .swiper-dots .swiper-pagination {
        transition: var(--transition-default);
        transition-property: opacity;
        opacity: 0;
    }

    .swiper-slider:hover .swiper-nav button,
    .swiper-slider:hover .swiper-dots .swiper-pagination {
        opacity: 1;
    }

    .swiper-dots .swiper-pagination-bullet:hover {
        background-color: var(--color-1-hover);
        opacity: 1;
    }    

    .swiper-slider + .swiper-dots .swiper-pagination-bullet:focus ,
    .swiper-slider + .swiper-dots .swiper-pagination-bullet:hover {
        background-color: var(--color-1);
        opacity: 1;
    }

    .swiper-wrapper {
        margin-inline: calc(var(--swiper-gap) / -2);
    }

    .swiper-slide {
        box-sizing: border-box;
        padding: 0 calc(var(--swiper-gap) / 2);
        width: calc(100% / var(--swiper-slides-view)) !important;
        height: unset;
        display: flex;
    }

    .swiper-slide > .ce-element {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

}

/* effect: next/prev slides transparent with grayscale image */

@media all {

    .swiper-carousel {
        --inactive-slide-opacity: .25;
    }
    
    .swiper-carousel .ce-header ,
    .swiper-carousel .ce-header > * ,
    .ce-text-on-image .ce-textmedia-inner::before ,
    .swiper-carousel .ce-bodytext ,
    .swiper-carousel .ce-gallery .ce-media-image {
        transition: all calc(var(--swiper-speed) / 1000 * 1s) ease-in-out;
    }

    .swiper-carousel .ce-bodytext {
        transition-property: opacity;
    }    
    .swiper-carousel .swiper-slide:not(.swiper-slide-visible) .ce-bodytext {
        opacity: var(--inactive-slide-opacity);
    }

    .swiper-carousel .ce-header {
        transition-property: opacity;
    }
    .swiper-carousel .swiper-slide:not(.swiper-slide-visible) .ce-header {
        opacity: var(--inactive-slide-opacity);
    }

    .swiper-carousel .swiper-slide:not(.swiper-slide-visible) .ce-text-on-image .ce-header ,
    .swiper-carousel .swiper-slide .ce-text-on-image .ce-header {
        opacity: 1;
    }

    .swiper-carousel .swiper-slide:not(.swiper-slide-visible) .ce-text-on-image .ce-textmedia-inner::before {
        top: 50%;
        opacity: var(--inactive-slide-opacity);
    }

    .swiper-carousel .ce-header > * {
        transition-property: color;
    }
    .swiper-carousel .swiper-slide:not(.swiper-slide-visible) .ce-header > * {
        color: var(--color-text-dark);
    }
    .swiper-carousel .swiper-slide .ce-text-on-image .ce-header > * {
        color: var(--color-text-light);
    }

    .swiper-carousel .ce-gallery {
        overflow: hidden;
    }

    .swiper-carousel .ce-gallery .ce-media-image {
        transition-property: filter, opacity;
        transition-property: all;
    }
    .swiper-carousel .swiper-slide:not(.swiper-slide-visible) .ce-gallery .ce-media-image {
        filter: grayscale(1) blur(.0625rem);
        opacity: var(--inactive-slide-opacity);
    }

}

@media(min-width: 36rem) {

    .swiper-carousel {
        --swiper-slides-view: 2;
    }

}

@media(min-width: 48rem) {

    .swiper-carousel {
        --swiper-slides-view: 3;
    }

}

@media(min-width: 62rem) {

}

@media(min-width: 108rem) {

    .swiper-carousel button i {
        display: block;
    }

}

@media(min-width: 120rem) {

}