/* Shopix-style homepage product carousels (KG3 brand) */

.home-carousel {
    --home-carousel-slide-width: min(88vw, 280px);
    --home-carousel-gap: 0.875rem;
    --shop-brand: #af3e3e;
}

@media (min-width: 640px) {
    .home-carousel {
        --home-carousel-slide-width: 300px;
    }
}

@media (min-width: 1024px) {
    .home-carousel {
        --home-carousel-slide-width: calc((100% - 3 * var(--home-carousel-gap)) / 4);
    }

    .home-carousel__slide {
        max-width: calc((100% - 3 * var(--home-carousel-gap)) / 4);
    }
}

@media (min-width: 1536px) {
    .home-carousel {
        --home-carousel-slide-width: calc((100% - 4 * var(--home-carousel-gap)) / 5);
    }

    .home-carousel__slide {
        max-width: calc((100% - 4 * var(--home-carousel-gap)) / 5);
    }
}

.home-carousel__nav {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.home-carousel__nav-btn {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    color: #334155;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease,
        opacity 0.2s ease;
}

.home-carousel__nav-btn:hover:not(:disabled) {
    border-color: rgb(175 62 62 / 0.35);
    color: var(--shop-brand);
    background: #fff8f8;
}

.home-carousel__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.home-carousel__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-right: 0.25rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.home-carousel__view-all:hover {
    border-color: rgb(175 62 62 / 0.3);
    color: var(--shop-brand);
}

.home-carousel__shell {
    margin: 0 -0.25rem;
}

.home-carousel__viewport {
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y pinch-zoom;
}

.home-carousel__viewport.is-dragging {
    cursor: grabbing;
}

.home-carousel__track {
    display: flex;
    margin-left: calc(var(--home-carousel-gap) * -1);
    backface-visibility: hidden;
}

.home-carousel__slide {
    flex: 0 0 var(--home-carousel-slide-width);
    min-width: 0;
    padding-left: var(--home-carousel-gap);
    scroll-snap-align: start;
}

.home-carousel__slide .shop-card {
    height: 100%;
}

.shop-card__badge--brand {
    background: var(--shop-brand);
}

.shop-card__badge--kit {
    background: #0f172a;
}

.shop-card__badge--secondary {
    top: 2.75rem;
}

@media (max-width: 639px) {
    .home-carousel__view-all {
        display: none;
    }
}