.wp-block-basic-egg-carousel.svvc-carousel,
.svvc-carousel {
    --svvc-current-gap: var(--svvc-gap-desktop, 24px);
    --svvc-current-height: var(--svvc-height-desktop, 560px);
    --svvc-bg-color: #111111;
    --svvc-bg-image: none;
    --svvc-bg-opacity: 0;
    --svvc-bg-size: cover;
    --svvc-bg-position: center center;
    --svvc-outer-padding: 0px;
    --svvc-bg-radius: 0px;
    --svvc-bg-offset-top: 0px;
    --svvc-bg-offset-right: 0px;
    --svvc-bg-offset-bottom: 0px;
    --svvc-bg-offset-left: 0px;
    --svvc-bg-arrow-connect: 0px;
    --svvc-fade-top: 0px;
    --svvc-fade-right: 0px;
    --svvc-fade-bottom: 0px;
    --svvc-fade-left: 0px;
    --svvc-fade-min-alpha: 0;
    --svvc-arrow-bg: #ffffff;
    --svvc-arrow-bg-layer: #ffffff;
    --svvc-arrow-color: #111111;
    --svvc-arrow-opacity: 1;
    --svvc-arrow-offset: 56px;
    --svvc-arrow-fixed-height: 180px;
    --svvc-arrow-half-width: 34px;
    --svvc-arrow-icon-size: 30px;
    --svvc-dot-size: 10px;
    --svvc-dot-active-color: #111111;
    --svvc-dot-active-opacity: 1;
    --svvc-dot-inactive-color: #111111;
    --svvc-dot-inactive-opacity: 0.32;
    --svvc-slide-bg-color: #111111;
    --svvc-slide-bg-opacity: 0;
    --svvc-slide-fade-top: 0px;
    --svvc-slide-fade-right: 0px;
    --svvc-slide-fade-bottom: 0px;
    --svvc-slide-fade-left: 0px;
    --svvc-slide-fade-min-alpha: 0;
    --svvc-viewport-height: var(--svvc-current-height, 560px);
    --svvc-viewport-center: 50%;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: var(--svvc-max-width, 80%);
    margin-left: auto;
    margin-right: auto;
    padding: var(--svvc-outer-padding);
    border-radius: var(--svvc-bg-radius);
    overflow: visible;
    isolation: isolate;
}

.svvc-carousel::before {
    content: "";
    position: absolute;
    top: calc(var(--svvc-outer-padding, 0px) - var(--svvc-bg-offset-top, 0px));
    left: calc(var(--svvc-outer-padding, 0px) - var(--svvc-bg-arrow-connect, 0px) - var(--svvc-bg-offset-left, 0px));
    right: calc(var(--svvc-outer-padding, 0px) - var(--svvc-bg-arrow-connect, 0px) - var(--svvc-bg-offset-right, 0px));
    height: calc(var(--svvc-viewport-height, var(--svvc-current-height, 560px)) + var(--svvc-bg-offset-top, 0px) + var(--svvc-bg-offset-bottom, 0px));
    z-index: 0;
    border-radius: var(--svvc-bg-radius, 0px);
    background-color: var(--svvc-bg-color);
    background-image: var(--svvc-bg-image);
    background-size: var(--svvc-bg-size);
    background-position: var(--svvc-bg-position);
    background-repeat: no-repeat;
    opacity: var(--svvc-bg-opacity);
    pointer-events: none;
}

.svvc-carousel.svvc-has-edge-fade::before {
    -webkit-mask-image:
        linear-gradient(to right, rgba(0, 0, 0, var(--svvc-fade-min-alpha)) 0, #000 var(--svvc-fade-left), #000 calc(100% - var(--svvc-fade-right)), rgba(0, 0, 0, var(--svvc-fade-min-alpha)) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, var(--svvc-fade-min-alpha)) 0, #000 var(--svvc-fade-top), #000 calc(100% - var(--svvc-fade-bottom)), rgba(0, 0, 0, var(--svvc-fade-min-alpha)) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, rgba(0, 0, 0, var(--svvc-fade-min-alpha)) 0, #000 var(--svvc-fade-left), #000 calc(100% - var(--svvc-fade-right)), rgba(0, 0, 0, var(--svvc-fade-min-alpha)) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, var(--svvc-fade-min-alpha)) 0, #000 var(--svvc-fade-top), #000 calc(100% - var(--svvc-fade-bottom)), rgba(0, 0, 0, var(--svvc-fade-min-alpha)) 100%);
    mask-composite: intersect;
}

.svvc-carousel *,
.svvc-carousel *::before,
.svvc-carousel *::after {
    box-sizing: border-box;
}

.svvc-viewport,
.svvc-arrow,
.svvc-dots {
    position: relative;
    z-index: 1;
}

.svvc-viewport {
    overflow: hidden;
    width: 100%;
    border-radius: inherit;
}

.svvc-height-fixed .svvc-viewport {
    height: var(--svvc-current-height);
}

.svvc-height-ratio .svvc-viewport {
    aspect-ratio: var(--svvc-aspect-ratio, 16 / 9);
}

.svvc-track {
    display: flex;
    gap: var(--svvc-current-gap);
    align-items: stretch;
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 280ms ease;
    will-change: transform;
    touch-action: pan-y;
}

.svvc-slide {
    flex: 0 0 var(--svvc-slide-basis, 100%);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: var(--svvc-slide-align, center);
    padding: var(--svvc-slide-padding, 32px);
    background: transparent;
    color: inherit;
    border: 1px solid var(--wp--preset--color--contrast-3, rgba(0, 0, 0, 0.12));
    border-radius: var(--wp--custom--border--radius, 16px);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.svvc-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--svvc-slide-bg-color);
    opacity: var(--svvc-slide-bg-opacity, 1);
    pointer-events: none;
}

.svvc-slide-has-edge-fade .svvc-slide::before {
    -webkit-mask-image:
        linear-gradient(to right, rgba(0, 0, 0, var(--svvc-slide-fade-min-alpha)) 0, #000 var(--svvc-slide-fade-left), #000 calc(100% - var(--svvc-slide-fade-right)), rgba(0, 0, 0, var(--svvc-slide-fade-min-alpha)) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, var(--svvc-slide-fade-min-alpha)) 0, #000 var(--svvc-slide-fade-top), #000 calc(100% - var(--svvc-slide-fade-bottom)), rgba(0, 0, 0, var(--svvc-slide-fade-min-alpha)) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, rgba(0, 0, 0, var(--svvc-slide-fade-min-alpha)) 0, #000 var(--svvc-slide-fade-left), #000 calc(100% - var(--svvc-slide-fade-right)), rgba(0, 0, 0, var(--svvc-slide-fade-min-alpha)) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, var(--svvc-slide-fade-min-alpha)) 0, #000 var(--svvc-slide-fade-top), #000 calc(100% - var(--svvc-slide-fade-bottom)), rgba(0, 0, 0, var(--svvc-slide-fade-min-alpha)) 100%);
    mask-composite: intersect;
}

.svvc-slide > * {
    position: relative;
    z-index: 1;
}

.svvc-height-fixed .svvc-track,
.svvc-height-ratio .svvc-track,
.svvc-height-fixed .svvc-slide,
.svvc-height-ratio .svvc-slide {
    height: 100%;
}

.svvc-slide > *:first-child {
    margin-top: 0;
}

.svvc-slide > *:last-child {
    margin-bottom: 0;
}

.svvc-slide img,
.svvc-slide video {
    max-width: 100%;
    height: auto;
}

.svvc-has-shadow .svvc-slide {
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.svvc-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 999px;
    background: var(--svvc-arrow-bg, #fff);
    color: var(--svvc-arrow-color, #111);
    opacity: var(--svvc-arrow-opacity, 1);
    overflow: visible;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.svvc-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: var(--svvc-arrow-icon-size, 30px);
    height: var(--svvc-arrow-icon-size, 30px);
    background: currentColor;
    clip-path: polygon(25% 12%, 42% 0%, 90% 50%, 42% 100%, 25% 88%, 58% 50%);
    transform-origin: center center;
    box-sizing: border-box;
}

.svvc-prev::before {
    transform: translate(-50%, -50%) scaleX(-1);
}

.svvc-next::before {
    transform: translate(-50%, -50%);
}

.svvc-arrow:hover,
.svvc-arrow:focus-visible {
    transform: translateY(-50%) scale(1.04);
}

.svvc-arrow:disabled {
    cursor: default;
    opacity: calc(var(--svvc-arrow-opacity, 1) * 0.35);
}

.svvc-prev {
    left: calc(var(--svvc-arrow-offset, 56px) * -1);
}

.svvc-next {
    right: calc(var(--svvc-arrow-offset, 56px) * -1);
}


.svvc-arrow-shape-half-moon {
    --svvc-bg-arrow-connect: max(0px, calc(var(--svvc-arrow-offset, 56px) - var(--svvc-arrow-half-width, 34px)));
}

.svvc-arrow-shape-half-moon .svvc-arrow {
    top: var(--svvc-viewport-center, 50%);
    width: var(--svvc-arrow-half-width, 34px);
    height: var(--svvc-arrow-fixed-height, 180px);
    min-height: 64px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.svvc-arrow-shape-half-moon.svvc-arrow-height-auto .svvc-arrow {
    height: var(--svvc-viewport-height, var(--svvc-current-height, 560px));
}

.svvc-arrow-shape-half-moon.svvc-arrow-height-auto:not(.is-ready) .svvc-arrow {
    height: var(--svvc-arrow-fixed-height, 180px);
}

.svvc-arrow-shape-half-moon .svvc-prev {
    border-radius: 999px 0 0 999px;
    padding-left: 0;
    padding-right: 0;
}

.svvc-arrow-shape-half-moon .svvc-next {
    border-radius: 0 999px 999px 0;
    padding-left: 0;
    padding-right: 0;
}

.svvc-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.svvc-dot {
    width: var(--svvc-dot-size, 10px);
    height: var(--svvc-dot-size, 10px);
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: var(--svvc-dot-inactive-color, #111111);
    opacity: var(--svvc-dot-inactive-opacity, 0.32);
    cursor: pointer;
}

.svvc-dot.is-active {
    background: var(--svvc-dot-active-color, #111111);
    opacity: var(--svvc-dot-active-opacity, 1);
}

.svvc-carousel.is-no-js .svvc-track,
.svvc-carousel:not(.is-ready) .svvc-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 2px;
}

.svvc-carousel.is-no-js .svvc-slide,
.svvc-carousel:not(.is-ready) .svvc-slide {
    scroll-snap-align: start;
}

@media (max-width: 1024px) {
    .svvc-carousel {
        --svvc-current-gap: var(--svvc-gap-desktop, 24px);
    }
}

@media (max-width: 767px) {
    .svvc-carousel {
        --svvc-current-gap: var(--svvc-gap-mobile, 16px);
        --svvc-current-height: var(--svvc-height-mobile, 520px);
        max-width: var(--svvc-mobile-max-width, 100%);
    }

    .svvc-slide {
        padding: min(var(--svvc-slide-padding, 32px), 24px);
        border-radius: 14px;
    }

    .svvc-arrow {
        width: 38px;
        height: 38px;
    }

    .svvc-prev {
        left: calc(var(--svvc-arrow-offset, 42px) * -1);
    }

    .svvc-next {
        right: calc(var(--svvc-arrow-offset, 42px) * -1);
    }

    .svvc-arrow-shape-half-moon .svvc-arrow {
        width: var(--svvc-arrow-half-width, 34px);
        min-height: 56px;
    }
}

/* v1.3.5 auto height per slide mode */
.svvc-height-auto-slide .svvc-viewport {
    height: auto;
    transition: height 220ms ease;
}

.svvc-height-auto-slide .svvc-track {
    align-items: flex-start;
}

.svvc-height-auto-slide .svvc-slide {
    height: auto;
}

/* v2.2: optional desktop proportional scaling for slide contents */
.svvc-scale-desktop .svvc-slide-scale-inner {
    display: block;
    width: 100%;
    max-width: none;
    transform-origin: top left;
    will-change: transform;
}

@media (max-width: 767px) {
    .svvc-scale-desktop .svvc-slide-scale-inner {
        width: auto !important;
        height: auto !important;
        transform: none !important;
    }
}
