.category-3d-banner {
    --c3d-bg: var(--bg-page, var(--bs-body-bg));
    --c3d-surface: var(--bg-surface, var(--bs-body-bg));
    --c3d-border: var(--border-subtle, var(--bs-border-color));
    --c3d-text: var(--text-primary, var(--bs-body-color));
    --c3d-skeleton-base: var(--bg-surface, var(--bs-secondary-bg, var(--bs-body-bg)));
    --c3d-skeleton-highlight: var(--bg-page, var(--bs-tertiary-bg, var(--bs-body-bg)));
    --c3d-radius: 12px;

    color: var(--c3d-text);
    margin-block: 12px 20px;
}

.category-3d-banner__inner {
    position: relative;
}

.category-3d-banner__swiper {
    padding-inline: 18px;
}

.category-3d-banner__track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-3d-banner__item {
    display: block;
    flex: 0 0 auto;
}

.category-3d-banner__track::-webkit-scrollbar {
    height: 0;
    display: none;
}

.category-3d-banner--wheel .category-3d-banner__swiper {
    position: relative;
    overflow: hidden;
    perspective: var(--c3d-wheel-perspective, 1200px);
    touch-action: pan-y;
    user-select: none;
}

.category-3d-banner--wheel .category-3d-banner__swiper .swiper-wrapper {
    position: relative;
    height: var(--c3d-wheel-height, 330px);
    transform-style: preserve-3d;
    display: block;
}

.category-3d-banner--wheel .category-3d-banner__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--c3d-card-w, 160px);
    max-width: none;
    opacity: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition: opacity 140ms ease;
}

.category-3d-banner--wheel .category-3d-banner__frame {
    backface-visibility: hidden;
}

.category-3d-banner__swiper .swiper-wrapper {
    align-items: center;
}

.category-3d-banner__swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-3d-banner__card {
    width: 100%;
    max-width: 220px;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.category-3d-banner__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 2;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: none;
}

.category-3d-banner__skeleton {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--c3d-skeleton-base) 0%,
        var(--c3d-skeleton-highlight) 50%,
        var(--c3d-skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: c3d-shimmer 1.2s ease-in-out infinite;
    transition: opacity 220ms ease;
}

.category-3d-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-3d-banner__img.is-loaded + .category-3d-banner__skeleton,
.category-3d-banner__img.is-loaded ~ .category-3d-banner__skeleton {
    opacity: 0;
    pointer-events: none;
}

.category-3d-banner__fade {
    /* Keep container visually invisible: no gradient overlays. */
    display: none;
}

.category-3d-banner__fade--start {
    inset-inline-start: 0;
    background: linear-gradient(to right, var(--c3d-bg), transparent);
}

.category-3d-banner__fade--end {
    inset-inline-end: 0;
    background: linear-gradient(to left, var(--c3d-bg), transparent);
}

:dir(rtl) .category-3d-banner__fade--start {
    background: linear-gradient(to left, var(--c3d-bg), transparent);
}

:dir(rtl) .category-3d-banner__fade--end {
    background: linear-gradient(to right, var(--c3d-bg), transparent);
}

.category-3d-banner__card:focus-visible {
    outline: 2px solid var(--c3d-border);
    outline-offset: 3px;
}

@media (min-width: 992px) {
    .category-3d-banner--desktop-align {
        margin-inline: 0;
    }

    .category-3d-banner--desktop-align .category-3d-banner__swiper {
        padding-inline: 0;
    }

    .category-3d-banner__inner::before,
    .category-3d-banner__inner::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 32px;
        pointer-events: none;
        z-index: 5;
        opacity: 0.75;
    }

    .category-3d-banner__inner::before {
        left: 0;
        background: linear-gradient(to right, var(--c3d-bg), transparent);
    }

    .category-3d-banner__inner::after {
        right: 0;
        background: linear-gradient(to left, var(--c3d-bg), transparent);
    }
}

@keyframes c3d-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-3d-banner__skeleton {
        animation: none;
    }
    .category-3d-banner--wheel .category-3d-banner__card {
        transition: none;
    }
}