/* =========================
   BANNER / SLIDER
========================= */

.store-home-banner {
    margin-top: 28px;
    margin-bottom: 58px;
}

    .store-home-banner .carousel,
    .store-home-banner .carousel-inner,
    .store-home-banner .carousel-item,
    .store-home-banner .store-banner-link {
        border-radius: 32px;
        overflow: hidden;
    }

    .store-home-banner .carousel-item {
        background: #f3f4f6;
    }

        .store-home-banner .carousel-item img {
            width: 100%;
            height: clamp(220px, 42vw, 520px);
            object-fit: cover;
            object-position: center center;
            display: block;
            box-shadow: var(--store-shadow-lg);
        }

/* стрелки */
.store-banner-control {
    width: 56px;
    height: 56px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: 1;
    background: rgba(37, 40, 43, 0.42);
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .store-banner-control:hover {
        background: rgba(37, 40, 43, 0.58);
    }

    .store-banner-control.carousel-control-prev {
        left: 18px;
    }

    .store-banner-control.carousel-control-next {
        right: 18px;
    }

    .store-banner-control .carousel-control-prev-icon,
    .store-banner-control .carousel-control-next-icon {
        width: 22px;
        height: 22px;
        filter: brightness(0) invert(1);
    }

/* точки */
.store-banner-indicators {
    margin-bottom: 18px;
    gap: 8px;
}

    .store-banner-indicators button {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50%;
        border: 0 !important;
        background: rgba(255, 255, 255, 0.72) !important;
        opacity: 1 !important;
        transition: transform 0.2s ease, background 0.2s ease;
    }

        .store-banner-indicators button.active {
            background: var(--store-accent) !important;
            transform: scale(1.15);
        }

/* мобильный слайдер, если используешь отдельно */
.store-mobile-slider-wrap {
    position: relative;
}

.store-mobile-slider {
    overflow-x: auto;
    scroll-behavior: smooth;
}

.store-slider-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--store-accent) 0%, var(--store-accent-hover) 100%);
    color: #fff;
    z-index: 5;
    box-shadow: 0 10px 20px rgba(174, 116, 109, 0.22);
}

    .store-slider-arrow.left {
        left: -10px;
    }

    .store-slider-arrow.right {
        right: -10px;
    }

/* =========================
   TABLET
========================= */

@media (max-width: 991.98px) {
    .store-home-banner .carousel,
    .store-home-banner .carousel-inner,
    .store-home-banner .carousel-item,
    .store-home-banner .store-banner-link,
    .store-home-banner .carousel-item img {
        border-radius: 24px;
    }

        .store-home-banner .carousel-item img {
            height: 320px;
        }

    .store-banner-control {
        width: 48px;
        height: 48px;
    }

        .store-banner-control.carousel-control-prev {
            left: 12px;
        }

        .store-banner-control.carousel-control-next {
            right: 12px;
        }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 767.98px) {
    .store-home-banner {
        margin-top: 18px;
        margin-bottom: 36px;
    }

        .store-home-banner .carousel,
        .store-home-banner .carousel-inner,
        .store-home-banner .carousel-item,
        .store-home-banner .store-banner-link,
        .store-home-banner .carousel-item img {
            border-radius: 20px;
        }

            .store-home-banner .carousel-item img {
                height: 220px;
            }

    .store-banner-control {
        width: 42px;
        height: 42px;
    }

        .store-banner-control .carousel-control-prev-icon,
        .store-banner-control .carousel-control-next-icon {
            width: 18px;
            height: 18px;
        }

    .store-banner-indicators {
        margin-bottom: 10px;
    }
}