.w-carousel {
    --_carousel-item-aspect-ratio: 908/512;
    --_carousel-item-max-width: var(--container-content-column);
    --_carousel-item-width: min(var(--_carousel-item-max-width), 100vw - (var(--gutter) * 2));
    --_carousel-item-gap: 1.25rem;
    --_carousel-item-min-width: var(--_carousel-item-width);
    position: relative;
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--container-content, var(--content-width))) minmax(var(--gutter), 1fr);
    inline-size: 100vw;
    margin-inline-start: calc(50% - 50vw);
    overflow: hidden;
    touch-action: pan-y;
}

.w-carousel__viewport {
    grid-column: 1 / -1;
    grid-row: 1;
    overflow: visible;
}

.w-carousel__track {
    display: flex;
    gap: var(--_carousel-item-gap);
    inline-size: max-content;
    padding-inline-start: max(var(--gutter), calc((100vw - var(--container-content, var(--content-width))) / 2));
    transition: transform 0.45s var(--easing-snappy, cubic-bezier(0.22, 1, 0.36, 1));
    will-change: transform;
    cursor: grab;
}

.w-carousel[data-dragging],
.w-carousel[data-dragging] .w-carousel__track {
    cursor: grabbing;
}

.w-carousel__item {
    position: relative;
    flex: 0 0 var(--_carousel-item-width);
    inline-size: var(--_carousel-item-width);
    margin: 0;
    user-select: none;
}

.w-carousel__item > figcaption {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.24s ease 0.08s, transform 0.24s ease 0.08s, visibility 0.24s ease 0.08s;
}

.w-carousel__item:not([data-active]) > figcaption {
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    visibility: hidden;
    transition-delay: 0s;
}

.w-product-display [data-carousel-animation="ScaleToFocus"] .w-carousel__item > figcaption {
    transform: none;
    transition-property: opacity, visibility;
}

.w-product-display [data-carousel-animation="ScaleToFocus"] .w-carousel__item[data-active] > figcaption {
    /* Reveal after the track and slide-width transitions finish. */
    transition-delay: 0.45s;
    transition-duration: 0.12s, 0s;
    transition-timing-function: ease-out;
}

.w-carousel__item img {
    pointer-events: none;
}

.w-carousel__item img,
.w-carousel__item video,
.w-carousel__media-placeholder {
    aspect-ratio: var(--_carousel-item-aspect-ratio, auto);
    inline-size: 100%;
}

.w-carousel__item img,
.w-carousel__item video {
    object-fit: cover;
    display: block;
}

.w-carousel__nav {
    grid-row: 1;
    block-size: 100%;
    inline-size: 100%;
    min-block-size: 0;
    margin: auto;
    padding: var(--gutter) 0;
    border: 0;
    background: transparent;
    color: var(--color-black);
    cursor: pointer;
    opacity: 0;
    position: relative;
}

.w-carousel__nav > svg {
    width: min(50%, 2rem);
    height: auto;
}

.w-carousel__nav:hover,
.w-carousel__nav:focus-visible {
    opacity: 1;
}

.w-carousel__nav--prev {
    grid-column: 1;
    justify-content: start;
    padding-inline-start: min(2.5dvw, var(--gutter));
}

.w-carousel__nav--next {
    grid-column: 3;
    justify-content: end;
    padding-inline-end: min(2.5dvw, var(--gutter));
}

.w-carousel__dots {
    max-width: var(--_carousel-item-max-width);
    width: 100%;
}

.w-carousel__dot {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    min-height: 0;
    padding: 0.125rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-gray-600);
    background-clip: content-box;
    cursor: pointer;
    transition: padding 0.15s ease;
}

.w-carousel__dot[data-active] {
    background-color: var(--color-theme-primary);
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .w-product-display [data-carousel-animation="ScaleToFocus"] .w-carousel__item[data-active] > figcaption {
        transition-delay: 0s;
        transition-duration: 0.01s, 0s;
    }

    .w-carousel__item > figcaption {
        transform: none;
        transition: opacity 0.01s linear, visibility 0.01s linear;
    }
}

/* Resize the layout box so the track's gap remains constant during animation. */
[data-carousel-focus-ready] [data-carousel-slide] {
    flex-basis: auto;
    inline-size: var(--_carousel-slide-width);
    min-inline-size: 0;
    transition: inline-size 0.45s var(--easing-snappy, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.45s ease;
}

/* Keep caption wrapping and the page height independent of the active slide. */
[data-carousel-focus-ready][data-carousel-stable-content="true"] [data-carousel-track] {
    min-block-size: var(--_carousel-content-height);
    align-items: flex-start;
}

[data-carousel-focus-ready][data-carousel-stable-content="true"] .w-carousel__item > figcaption {
    inline-size: var(--_carousel-content-width);
}

/* Preserve the Product Card subgrid while letting each column follow its item. */
[data-carousel-focus-ready] .w-product-display__card-carousel-track {
    grid-auto-columns: max-content;
}

[data-carousel-repositioning] [data-carousel-slide],
[data-carousel-repositioning] [data-carousel-track] {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-carousel-focus-ready] [data-carousel-slide],
    [data-carousel-focus-ready] [data-carousel-track] {
        transition: none;
    }
}