.cscc-carousel {
    --cscc-spv: 5;
    --cscc-gap: 16px;
    --cscc-hover-zoom: 1.035;
    --cscc-hover-brightness: .9;
    --cscc-hover-duration: 700ms;
    --cscc-arrow-shift: 5px;
    --cscc-fade-reach: 38px;
    --cscc-fade-midpoint: 16px;
    --cscc-fade-edge-alpha: 0;
    --cscc-fade-color: #ffffff;
    --cscc-fade-color-strength: 1;
    --cscc-tint-color: #000000;
    --cscc-tint-opacity: 0;
    --cscc-tint-hover-opacity: var(--cscc-tint-opacity);
    position: relative;
    width: 100%;
    min-width: 0;
}

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

.cscc-carousel__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.cscc-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.cscc-carousel__track {
    display: flex;
    align-items: stretch;
    gap: var(--cscc-gap);
    width: 100%;
    min-width: 0;
}

.cscc-carousel__slide {
    flex: 0 0 calc((100% - (var(--cscc-gap) * (var(--cscc-spv) - 1))) / var(--cscc-spv));
    min-width: 0;
    scroll-snap-align: start;
}

/* CARD */
.jas-category-card {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #fff;
    line-height: 1;
    text-decoration: none !important;
    isolation: isolate;
    font-family: "Fira Sans Condensed", sans-serif;
}

/* IMAGE */
.jas-category-card__picture {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.jas-category-card__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    vertical-align: bottom;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    object-position: 50% 50%;
    transition:
        transform var(--cscc-hover-duration) cubic-bezier(.2, .75, .25, 1),
        filter 450ms ease;
}

/* OPTIONAL COLOR TINT LAYER */
.jas-category-card__tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: var(--cscc-tint-color);
    opacity: var(--cscc-tint-opacity);
    mix-blend-mode: normal;
    transition: opacity 350ms ease;
}

.jas-category-card:hover .jas-category-card__tint,
.jas-category-card:focus-visible .jas-category-card__tint {
    opacity: var(--cscc-tint-hover-opacity);
}

/* GRADIENT */
.jas-category-card__overlay {
    --cscc-overlay-bottom: rgba(0, 0, 0, .45);
    --cscc-overlay-middle: rgba(0, 0, 0, .12);
    --cscc-overlay-top: rgba(0, 0, 0, 0);
    --cscc-overlay-mid-stop: 34%;
    --cscc-overlay-top-stop: 64%;
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
    background: linear-gradient(
        to top,
        var(--cscc-overlay-bottom) 0%,
        var(--cscc-overlay-middle) var(--cscc-overlay-mid-stop),
        var(--cscc-overlay-top) var(--cscc-overlay-top-stop)
    );
    transition:
        opacity 300ms ease,
        transform 400ms cubic-bezier(.2, .75, .25, 1);
}

/* TEXT POSITION */
.jas-category-card__content {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 5;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    font-family: "Fira Sans", sans-serif;
}

/* TEXT SWITCHING AREA */
.jas-category-card__title {
    position: relative;
    display: block;
    width: 100%;
    height: 1.25em;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #fff;
    font-size: clamp(15px, 1.5vw, 24px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* CATEGORY NAME */
.jas-category-card__name {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 300ms ease,
        transform 420ms cubic-bezier(.2, .75, .25, 1);
}

/* CTA */
.jas-category-card__cta {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: .76em;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .1em;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(100%);
    transition:
        opacity 300ms ease,
        transform 420ms cubic-bezier(.2, .75, .25, 1);
}

.jas-category-card__arrow {
    display: inline-block;
    line-height: 1;
    transition: transform 300ms ease;
}

/* HOVER */
.jas-category-card:hover .jas-category-card__image,
.jas-category-card:hover .jas-category-card__overlay,
.jas-category-card:focus-visible .jas-category-card__image {
    transform: scale(var(--cscc-hover-zoom));
    filter: brightness(var(--cscc-hover-brightness));
}

.jas-category-card:hover .jas-category-card__name,
.jas-category-card:focus-visible .jas-category-card__name {
    opacity: 0;
    transform: translateY(-100%);
}

.jas-category-card:hover .jas-category-card__cta,
.jas-category-card:focus-visible .jas-category-card__cta {
    opacity: 1;
    transform: translateY(0);
}

.jas-category-card:hover .jas-category-card__arrow,
.jas-category-card:focus-visible .jas-category-card__arrow {
    transform: translateX(var(--cscc-arrow-shift));
}

/* NAVIGATION */
.cscc-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: #111;
    font: inherit;
    font-size: 30px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    transition: opacity 180ms ease, transform 180ms ease;
}

.cscc-carousel__arrow:hover {
    transform: translateY(-50%) scale(1.05);
}

.cscc-carousel__arrow--prev { left: 12px; }
.cscc-carousel__arrow--next { right: 12px; }
.cscc-carousel__arrow[disabled] { opacity: .35; cursor: default; }

.cscc-carousel__empty {
    width: 100%;
    padding: 28px;
    border: 1px dashed #bbb;
    text-align: center;
    color: #666;
}


/* Alignment overrides */
.cscc-align--left .jas-category-card__name { text-align: left; }
.cscc-align--left .jas-category-card__cta { justify-content: flex-start; text-align: left; }
.cscc-align--center .jas-category-card__name { text-align: center; }
.cscc-align--center .jas-category-card__cta { justify-content: center; text-align: center; }
.cscc-align--right .jas-category-card__name { text-align: right; }
.cscc-align--right .jas-category-card__cta { justify-content: flex-end; text-align: right; }

/* Manual vertical content placement. These intentionally override preset placement. */
.cscc-content-pos--top .jas-category-card__content {
    top: 24px !important;
    bottom: auto !important;
    transform: none !important;
}
.cscc-content-pos--center .jas-category-card__content {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}
.cscc-content-pos--bottom .jas-category-card__content {
    top: auto !important;
    bottom: 24px !important;
    transform: none !important;
}

/* Continuous marquee */
.cscc-mode--marquee .cscc-carousel__viewport,
.cscc-mode--marquee .cscc-carousel__viewport.is-dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.cscc-mode--marquee .cscc-carousel__slide { scroll-snap-align: none; }

/* Quick design presets. Elementor Style controls can override these defaults. */
.cscc-preset--jasmine-classic {
    --cscc-hover-zoom: 1.035;
    --cscc-hover-brightness: .9;
    --cscc-hover-duration: 700ms;
}
.cscc-preset--jasmine-classic .jas-category-card { border-radius: 0; }
.cscc-preset--jasmine-classic .jas-category-card__image { aspect-ratio: 5 / 7; object-fit: cover; }
.cscc-preset--jasmine-classic .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,.45); --cscc-overlay-middle: rgba(0,0,0,.12); --cscc-overlay-top: rgba(0,0,0,0); --cscc-overlay-mid-stop: 34%; --cscc-overlay-top-stop: 64%; }
.cscc-preset--jasmine-classic .jas-category-card__name { text-align: center; }
.cscc-preset--jasmine-classic .jas-category-card__cta { justify-content: center; text-align: center; }

.cscc-preset--editorial {
    --cscc-hover-zoom: 1.02;
    --cscc-hover-brightness: .92;
    --cscc-hover-duration: 850ms;
}
.cscc-preset--editorial .jas-category-card { border-radius: 0; }
.cscc-preset--editorial .jas-category-card__image { aspect-ratio: 4 / 5; object-fit: cover; }
.cscc-preset--editorial .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,.56); --cscc-overlay-middle: rgba(0,0,0,.16); --cscc-overlay-top: rgba(0,0,0,0); --cscc-overlay-mid-stop: 42%; --cscc-overlay-top-stop: 72%; }
.cscc-preset--editorial .jas-category-card__title { font-size: clamp(16px, 1.65vw, 27px); font-weight: 500; letter-spacing: .035em; }
.cscc-preset--editorial .jas-category-card__name { text-align: left; }
.cscc-preset--editorial .jas-category-card__cta { justify-content: flex-start; text-align: left; letter-spacing: .08em; }
.cscc-preset--editorial .cscc-card-badge { border-radius: 2px; }

.cscc-preset--soft-rounded {
    --cscc-hover-zoom: 1.045;
    --cscc-hover-brightness: .94;
    --cscc-hover-duration: 650ms;
    --cscc-nav-bg: rgba(255,255,255,.84);
}
.cscc-preset--soft-rounded .jas-category-card { border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.cscc-preset--soft-rounded .jas-category-card__image { aspect-ratio: 4 / 5; object-fit: cover; }
.cscc-preset--soft-rounded .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,.36); --cscc-overlay-middle: rgba(0,0,0,.09); --cscc-overlay-top: rgba(0,0,0,0); --cscc-overlay-mid-stop: 38%; --cscc-overlay-top-stop: 70%; }
.cscc-preset--soft-rounded .jas-category-card__name { text-align: center; }
.cscc-preset--soft-rounded .jas-category-card__cta { justify-content: center; }
.cscc-preset--soft-rounded .cscc-card-badge { border-radius: 999px; }

.cscc-preset--minimal {
    --cscc-hover-zoom: 1.015;
    --cscc-hover-brightness: .98;
    --cscc-hover-duration: 500ms;
}
.cscc-preset--minimal .jas-category-card { border-radius: 0; }
.cscc-preset--minimal .jas-category-card__image { aspect-ratio: 5 / 7; object-fit: cover; }
.cscc-preset--minimal .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,.25); --cscc-overlay-middle: rgba(0,0,0,.04); --cscc-overlay-top: rgba(0,0,0,0); --cscc-overlay-mid-stop: 32%; --cscc-overlay-top-stop: 58%; }
.cscc-preset--minimal .jas-category-card__title { font-weight: 500; letter-spacing: .12em; }
.cscc-preset--minimal .jas-category-card__name { text-align: center; }
.cscc-preset--minimal .jas-category-card__cta { justify-content: center; font-size: .70em; }

.cscc-preset--bold-overlay {
    --cscc-hover-zoom: 1.055;
    --cscc-hover-brightness: .82;
    --cscc-hover-duration: 600ms;
}
.cscc-preset--bold-overlay .jas-category-card { border-radius: 0; }
.cscc-preset--bold-overlay .jas-category-card__image { aspect-ratio: 4 / 5; object-fit: cover; }
.cscc-preset--bold-overlay .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,.74); --cscc-overlay-middle: rgba(0,0,0,.27); --cscc-overlay-top: rgba(0,0,0,.02); --cscc-overlay-mid-stop: 48%; --cscc-overlay-top-stop: 78%; }
.cscc-preset--bold-overlay .jas-category-card__title { font-weight: 700; letter-spacing: .045em; }
.cscc-preset--bold-overlay .jas-category-card__name { text-align: center; }
.cscc-preset--bold-overlay .jas-category-card__cta { justify-content: center; }

/* Top Center · Clean */
.cscc-preset--top-center {
    --cscc-hover-zoom: 1.025;
    --cscc-hover-brightness: .94;
    --cscc-hover-duration: 720ms;
}
.cscc-preset--top-center .jas-category-card { border-radius: 0; }
.cscc-preset--top-center .jas-category-card__image { aspect-ratio: 5 / 7; object-fit: cover; }
.cscc-preset--top-center .jas-category-card__content { top: 24px; bottom: auto !important; transform: none; }
.cscc-preset--top-center .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,0); --cscc-overlay-middle: rgba(0,0,0,.05); --cscc-overlay-top: rgba(0,0,0,.48); --cscc-overlay-mid-stop: 56%; --cscc-overlay-top-stop: 100%; }
.cscc-preset--top-center .jas-category-card__title { font-weight: 600; letter-spacing: .10em; }
.cscc-preset--top-center .jas-category-card__name { text-align: center; }
.cscc-preset--top-center .jas-category-card__cta { justify-content: center; text-align: center; }

/* Top Left · Magazine */
.cscc-preset--top-editorial {
    --cscc-hover-zoom: 1.018;
    --cscc-hover-brightness: .96;
    --cscc-hover-duration: 900ms;
}
.cscc-preset--top-editorial .jas-category-card { border-radius: 0; }
.cscc-preset--top-editorial .jas-category-card__image { aspect-ratio: 4 / 5; object-fit: cover; }
.cscc-preset--top-editorial .jas-category-card__content { top: 28px; bottom: auto !important; transform: none; }
.cscc-preset--top-editorial .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,0); --cscc-overlay-middle: rgba(0,0,0,.03); --cscc-overlay-top: rgba(0,0,0,.58); --cscc-overlay-mid-stop: 60%; --cscc-overlay-top-stop: 100%; }
.cscc-preset--top-editorial .jas-category-card__title { font-size: clamp(16px, 1.55vw, 26px); font-weight: 500; letter-spacing: .035em; }
.cscc-preset--top-editorial .jas-category-card__name { text-align: left; }
.cscc-preset--top-editorial .jas-category-card__cta { justify-content: flex-start; text-align: left; font-size: .69em; letter-spacing: .12em; }

/* Center · Statement */
.cscc-preset--center-statement {
    --cscc-hover-zoom: 1.04;
    --cscc-hover-brightness: .88;
    --cscc-hover-duration: 700ms;
    --cscc-tint-color: #000000;
    --cscc-tint-opacity: .20;
    --cscc-tint-hover-opacity: .30;
}
.cscc-preset--center-statement .jas-category-card { border-radius: 0; }
.cscc-preset--center-statement .jas-category-card__image { aspect-ratio: 4 / 5; object-fit: cover; }
.cscc-preset--center-statement .jas-category-card__content { top: 50%; bottom: auto !important; transform: translateY(-50%); }
.cscc-preset--center-statement .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,.16); --cscc-overlay-middle: rgba(0,0,0,.06); --cscc-overlay-top: rgba(0,0,0,.16); --cscc-overlay-mid-stop: 50%; --cscc-overlay-top-stop: 100%; }
.cscc-preset--center-statement .jas-category-card__title { font-size: clamp(17px, 1.7vw, 29px); font-weight: 650; letter-spacing: .08em; }
.cscc-preset--center-statement .jas-category-card__name { text-align: center; }
.cscc-preset--center-statement .jas-category-card__cta { justify-content: center; text-align: center; }

/* Center · Color Wash */
.cscc-preset--center-tint {
    --cscc-hover-zoom: 1.03;
    --cscc-hover-brightness: .96;
    --cscc-hover-duration: 800ms;
    --cscc-tint-color: #7f6657;
    --cscc-tint-opacity: .24;
    --cscc-tint-hover-opacity: .34;
}
.cscc-preset--center-tint .jas-category-card { border-radius: 14px; }
.cscc-preset--center-tint .jas-category-card__image { aspect-ratio: 5 / 7; object-fit: cover; }
.cscc-preset--center-tint .jas-category-card__tint { mix-blend-mode: multiply; }
.cscc-preset--center-tint .jas-category-card__content { top: 50%; bottom: auto !important; transform: translateY(-50%); }
.cscc-preset--center-tint .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,.12); --cscc-overlay-middle: rgba(0,0,0,.03); --cscc-overlay-top: rgba(0,0,0,.12); --cscc-overlay-mid-stop: 50%; --cscc-overlay-top-stop: 100%; }
.cscc-preset--center-tint .jas-category-card__title { font-weight: 600; letter-spacing: .09em; }
.cscc-preset--center-tint .jas-category-card__name { text-align: center; }
.cscc-preset--center-tint .jas-category-card__cta { justify-content: center; text-align: center; }
.cscc-preset--center-tint .cscc-card-badge { border-radius: 999px; }

/* Center · Frosted Label */
.cscc-preset--frosted-center {
    --cscc-hover-zoom: 1.025;
    --cscc-hover-brightness: .97;
    --cscc-hover-duration: 650ms;
}
.cscc-preset--frosted-center .jas-category-card { border-radius: 16px; }
.cscc-preset--frosted-center .jas-category-card__image { aspect-ratio: 4 / 5; object-fit: cover; }
.cscc-preset--frosted-center .jas-category-card__content {
    top: 50%;
    bottom: auto !important;
    transform: translateY(-50%);
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.52);
    border-radius: 12px;
    background: rgba(255,255,255,.74);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cscc-preset--frosted-center .jas-category-card__overlay { --cscc-overlay-bottom: rgba(0,0,0,.10); --cscc-overlay-middle: rgba(0,0,0,.02); --cscc-overlay-top: rgba(0,0,0,.02); --cscc-overlay-mid-stop: 48%; --cscc-overlay-top-stop: 100%; }
.cscc-preset--frosted-center .jas-category-card__title { font-weight: 650; letter-spacing: .075em; }
.cscc-preset--frosted-center .jas-category-card__name,
.cscc-preset--frosted-center .jas-category-card__cta { color: #171717; text-align: center; }
.cscc-preset--frosted-center .jas-category-card__cta { justify-content: center; }
.cscc-preset--frosted-center .cscc-card-badge { background: rgba(255,255,255,.88); color: #171717; }

@media (max-width: 767px) {
    .cscc-content-pos--top .jas-category-card__content { top: 14px !important; }
    .cscc-content-pos--bottom .jas-category-card__content { bottom: 14px !important; }
    .cscc-preset--top-center .jas-category-card__content,
    .cscc-preset--top-editorial .jas-category-card__content { top: 14px; }

    .jas-category-card__title {
        height: auto;
        min-height: 2.5em;
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    .jas-category-card__name {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        line-height: 1.25;
        text-align: center;
        opacity: 1;
        transform: none;
    }

    .jas-category-card__cta {
        display: none;
    }

    .cscc-carousel--mobile-cta .jas-category-card__cta {
        display: flex;
    }

    .jas-category-card:hover .jas-category-card__name,
    .jas-category-card:focus-visible .jas-category-card__name {
        opacity: 1;
        transform: translateY(0);
    }

    .cscc-carousel__arrow {
        display: none;
    }
}

@media (hover: none) {
    .jas-category-card__image {
        transform: none;
        filter: none;
    }

    .jas-category-card__name {
        opacity: 1;
        transform: none;
    }

    .jas-category-card__cta {
        display: none;
    }

    .cscc-carousel--mobile-cta .jas-category-card__cta {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jas-category-card__image,
    .jas-category-card__name,
    .jas-category-card__cta,
    .jas-category-card__arrow,
    .cscc-carousel__viewport {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* v0.2 interaction + merchandising */
.cscc-carousel {
    --cscc-nav-size: 42px;
    --cscc-nav-color: #111;
    --cscc-nav-bg: rgba(255,255,255,.9);
    --cscc-nav-offset: 12px;
    --cscc-pagination-color: #111;
    --cscc-pagination-gap: 14px;
}

.cscc-carousel--mouse-drag .cscc-carousel__viewport {
    cursor: grab;
}

.cscc-carousel--mouse-drag .jas-category-card,
.cscc-carousel--mouse-drag .jas-category-card__image,
.cscc-carousel--mouse-drag .jas-category-card__picture {
    -webkit-user-drag: none;
    user-drag: none;
}

.cscc-carousel--mouse-drag .jas-category-card__image {
    pointer-events: none;
}

.cscc-carousel--mouse-drag .cscc-carousel__viewport.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.cscc-carousel--edge-fade.cscc-fade--both .cscc-carousel__viewport {
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0,0,0,var(--cscc-fade-edge-alpha)) 0,
        rgba(0,0,0,.52) var(--cscc-fade-midpoint),
        #000 var(--cscc-fade-reach),
        #000 calc(100% - var(--cscc-fade-reach)),
        rgba(0,0,0,.52) calc(100% - var(--cscc-fade-midpoint)),
        rgba(0,0,0,var(--cscc-fade-edge-alpha)) 100%
    );
    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,var(--cscc-fade-edge-alpha)) 0,
        rgba(0,0,0,.52) var(--cscc-fade-midpoint),
        #000 var(--cscc-fade-reach),
        #000 calc(100% - var(--cscc-fade-reach)),
        rgba(0,0,0,.52) calc(100% - var(--cscc-fade-midpoint)),
        rgba(0,0,0,var(--cscc-fade-edge-alpha)) 100%
    );
}

.cscc-carousel--edge-fade.cscc-fade--left .cscc-carousel__viewport {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,var(--cscc-fade-edge-alpha)) 0, rgba(0,0,0,.52) var(--cscc-fade-midpoint), #000 var(--cscc-fade-reach), #000 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,var(--cscc-fade-edge-alpha)) 0, rgba(0,0,0,.52) var(--cscc-fade-midpoint), #000 var(--cscc-fade-reach), #000 100%);
}

.cscc-carousel--edge-fade.cscc-fade--right .cscc-carousel__viewport {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--cscc-fade-reach)), rgba(0,0,0,.52) calc(100% - var(--cscc-fade-midpoint)), rgba(0,0,0,var(--cscc-fade-edge-alpha)) 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--cscc-fade-reach)), rgba(0,0,0,.52) calc(100% - var(--cscc-fade-midpoint)), rgba(0,0,0,var(--cscc-fade-edge-alpha)) 100%);
}

/* Optional colored veil layered above the transparent mask. */
.cscc-carousel--edge-fade.cscc-fade-color--enabled::before,
.cscc-carousel--edge-fade.cscc-fade-color--enabled::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 14;
    width: var(--cscc-fade-reach);
    pointer-events: none;
    opacity: var(--cscc-fade-color-strength);
}

.cscc-carousel--edge-fade.cscc-fade-color--enabled::before {
    left: 0;
    background: linear-gradient(
        to right,
        var(--cscc-fade-color) 0,
        var(--cscc-fade-color) var(--cscc-fade-midpoint),
        transparent var(--cscc-fade-reach)
    );
}

.cscc-carousel--edge-fade.cscc-fade-color--enabled::after {
    right: 0;
    background: linear-gradient(
        to left,
        var(--cscc-fade-color) 0,
        var(--cscc-fade-color) var(--cscc-fade-midpoint),
        transparent var(--cscc-fade-reach)
    );
}

.cscc-carousel--edge-fade.cscc-fade-color--enabled.cscc-fade--left::after,
.cscc-carousel--edge-fade.cscc-fade-color--enabled.cscc-fade--right::before {
    display: none;
}

.cscc-card-badge {
    position: absolute;
    z-index: 6;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 6px 10px;
    background: #fff;
    color: #111;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

.cscc-card-badge--inherit { }
.cscc-card-badge--top-left,
.cscc-badge-global--top-left .cscc-card-badge--inherit { top: 14px; left: 14px; right: auto; bottom: auto; }
.cscc-card-badge--top-right,
.cscc-badge-global--top-right .cscc-card-badge--inherit { top: 14px; right: 14px; left: auto; bottom: auto; }
.cscc-card-badge--bottom-left,
.cscc-badge-global--bottom-left .cscc-card-badge--inherit { bottom: 14px; left: 14px; right: auto; top: auto; }
.cscc-card-badge--bottom-right,
.cscc-badge-global--bottom-right .cscc-card-badge--inherit { bottom: 14px; right: 14px; left: auto; top: auto; }

.cscc-carousel__arrow {
    width: var(--cscc-nav-size);
    height: var(--cscc-nav-size);
    background: var(--cscc-nav-bg);
    color: var(--cscc-nav-color);
    line-height: var(--cscc-nav-size);
}

.cscc-carousel__arrow--prev { left: var(--cscc-nav-offset); }
.cscc-carousel__arrow--next { right: var(--cscc-nav-offset); }

.cscc-carousel__pagination {
    margin-top: var(--cscc-pagination-gap);
}

.cscc-carousel__pagination--dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.cscc-carousel__dot {
    appearance: none;
    width: 7px;
    height: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--cscc-pagination-color);
    opacity: .25;
    cursor: pointer;
    transition: width 180ms ease, opacity 180ms ease;
}

.cscc-carousel__dot.is-active {
    width: 22px;
    opacity: 1;
}

.cscc-carousel__pagination--progress {
    position: relative;
    width: 100%;
    height: 2px;
    overflow: hidden;
    background: color-mix(in srgb, var(--cscc-pagination-color) 18%, transparent);
}

.cscc-carousel__progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--cscc-pagination-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms ease;
}

@media (max-width: 767px) {
    .cscc-carousel--mobile-arrows .cscc-carousel__arrow {
        display: block;
    }

    .cscc-card-badge {
        min-height: 20px;
        padding: 5px 7px;
        font-size: 8px;
    }
    .cscc-card-badge--top-left,
    .cscc-badge-global--top-left .cscc-card-badge--inherit { top: 8px; left: 8px; right: auto; bottom: auto; }
    .cscc-card-badge--top-right,
    .cscc-badge-global--top-right .cscc-card-badge--inherit { top: 8px; right: 8px; left: auto; bottom: auto; }
    .cscc-card-badge--bottom-left,
    .cscc-badge-global--bottom-left .cscc-card-badge--inherit { bottom: 8px; left: 8px; right: auto; top: auto; }
    .cscc-card-badge--bottom-right,
    .cscc-badge-global--bottom-right .cscc-card-badge--inherit { bottom: 8px; right: 8px; left: auto; top: auto; }

}