.el59-category-coverflow {
    --el59-accent: var(--el59-button-bg, var(--color-primary, #ff5e14));
    position: relative;
    overflow: hidden;
    background: var(--el59-background);
    color: var(--el59-text);
    isolation: isolate;
}

.el59-category-coverflow__container { margin-inline: auto; }
.el59-category-coverflow__heading { margin: 0 0 10px; color: var(--el59-text); font-size: clamp(1.45rem, 2.3vw, 2.35rem); font-weight: 800; }
.el59-category-coverflow__intro { max-width: 720px; margin-bottom: 18px; color: var(--el59-text); opacity: .78; }

.el59-category-coverflow__viewport { width: 100%; padding: clamp(12px, 2vw, 30px) 0; }
.el59-category-coverflow__viewport.swiper { overflow: visible; }
.el59-category-coverflow__viewport .swiper-wrapper { align-items: stretch; }
.el59-category-coverflow__viewport .swiper-slide { display: flex; height: auto; transition: opacity .35s ease, filter .35s ease; }
.el59-category-coverflow__viewport .swiper-slide:not(.swiper-slide-active) { opacity: .56; filter: saturate(.74); }
.el59-category-coverflow__viewport .swiper-slide-prev,
.el59-category-coverflow__viewport .swiper-slide-next { opacity: .77; filter: saturate(.9); }

.el59-category-coverflow__card {
    position: relative;
    display: grid;
    width: 100%;
    min-height: clamp(300px, 34vw, 540px);
    overflow: hidden;
    color: #fff;
    background: #20242b;
    text-decoration: none;
    transition: transform .38s ease, box-shadow .38s ease;
}

.el59-category-coverflow__viewport .swiper-slide:not(.swiper-slide-active) .el59-category-coverflow__card { transform: scale(.88); }
.el59-category-coverflow__viewport .swiper-slide-active .el59-category-coverflow__card { box-shadow: 0 20px 42px rgb(0 0 0 / .18); }
.el59-category-coverflow__card:hover { color: #fff; }
.el59-category-coverflow__card:focus-visible { outline: 3px solid var(--el59-accent); outline-offset: 4px; }
.el59-category-coverflow__image,
.el59-category-coverflow__image-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }
.el59-category-coverflow__image { object-fit: cover; transition: transform .65s ease; }
.el59-category-coverflow__card:hover .el59-category-coverflow__image { transform: scale(1.055); }
.el59-category-coverflow__image-placeholder { display: grid; place-items: center; background: linear-gradient(135deg, #5b6270, #222831); font-size: 2.35rem; }
.el59-category-coverflow__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 10 13 / .06) 20%, rgb(8 10 13 / .82) 100%); }
.el59-category-coverflow__content { position: relative; z-index: 1; display: flex; align-self: end; flex-direction: column; align-items: center; justify-content: end; gap: 15px; width: 100%; min-height: 51%; padding: 28px 22px; text-align: center; }
.el59-category-coverflow__title { font-size: clamp(1.25rem, 2.35vw, 2.35rem); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.el59-category-coverflow__cta { display: inline-flex; align-items: center; justify-content: center; min-width: 145px; min-height: 40px; padding: 8px 18px; border: 1px solid var(--el59-accent); background: var(--el59-accent); color: var(--el59-button-text, #fff); font-size: .82rem; font-weight: 700; transition: filter .22s ease, transform .22s ease; }
.el59-category-coverflow__card:hover .el59-category-coverflow__cta { color: var(--el59-button-text, #fff); filter: brightness(.92); transform: translateY(-1px); }

.el59-category-coverflow__viewport--single { width: min(100% - 24px, 620px); margin-inline: auto; }
.el59-category-coverflow__single-wrapper { display: flex; }
.el59-category-coverflow__single-slide { width: 100%; }

.el59-category-coverflow__mock-track { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.1vw, 18px); width: min(100% + 180px, 1560px); margin-inline: auto; padding: 18px 0; transform: translateX(0); }
.el59-category-coverflow__mock-slide { flex: 0 1 24%; min-width: 0; opacity: .55; transform: scale(.84); }
.el59-category-coverflow__mock-slide.is-active { z-index: 1; opacity: 1; transform: scale(1); }
.el59-category-coverflow__mock-slide .el59-category-coverflow__card { min-height: clamp(220px, 24vw, 410px); }

@media (max-width: 991.98px) {
    .el59-category-coverflow__card { min-height: clamp(290px, 50vw, 460px); }
    .el59-category-coverflow__content { padding: 22px 16px; }
}

@media (max-width: 600px) {
    .el59-category-coverflow__container { width: min(100% - 32px, 540px); }
    .el59-category-coverflow__viewport { padding-block: 6px 16px; }
    .el59-category-coverflow__card { min-height: min(122vw, 460px); }
    .el59-category-coverflow__viewport .swiper-slide:not(.swiper-slide-active) .el59-category-coverflow__card { transform: scale(.92); }
    .el59-category-coverflow__content { gap: 12px; min-height: 48%; padding: 18px 14px; }
    .el59-category-coverflow__title { font-size: 1.3rem; }
    .el59-category-coverflow__cta { min-width: 128px; min-height: 36px; font-size: .75rem; }
    .el59-category-coverflow__mock-track { width: 140%; gap: 4px; transform: translateX(8%); }
    .el59-category-coverflow__mock-slide { flex-basis: 32%; }
}

@media (prefers-reduced-motion: reduce) {
    .el59-category-coverflow__card,
    .el59-category-coverflow__image,
    .el59-category-coverflow__viewport .swiper-slide { transition-duration: .01ms; }
}
