.hehoblocks-custom-featured-category {
    margin-block: var(--heho-space-9, 3rem);
}

.hehoblocks-custom-featured-category--bg-gray {
    background-color: var(--heho-color-bg-soft);
    padding-block: var(--heho-space-12, 4rem);
}

.hehoblocks-custom-featured-category__inner {
    max-width: var(--heho-container-max, 96rem);
    margin-inline: auto;
    padding-inline: var(--heho-container-padding-x, 1rem);
}

/* ── Header (vertical stack: subtitle, title+nav, description) ────────────── */
.hehoblocks-custom-featured-category__header {
    display: flex;
    flex-direction: column;
    gap: var(--heho-space-3, 0.75rem);
    margin-bottom: var(--heho-space-7, 1.875rem);
}

.hehoblocks-custom-featured-category__subtitle {
    margin: 0;
    color: var(--heho-color-bg-dark, #666);
    font-family: var(--heho-font-primary);
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-align: center;
}

.hehoblocks-custom-featured-category__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
}

.hehoblocks-custom-featured-category__title {
    margin: 0;
    color: #fff;
    font-family: var(--heho-font-primary);
    font-size: var(--heho-font-size-xl, 1.625rem);
    font-weight: var(--heho-font-weight-bold, 700);
    line-height: 1.75rem;
    text-transform: uppercase;
    padding-inline: 2rem;
    background-color: var(--heho-color-bg-dark);
}

.hehoblocks-custom-featured-category__description {
    color: var(--heho-color-bg-dark, #252525);
    font-size: var(--heho-font-size-base, 1rem);
    line-height: var(--heho-line-height-base, 1.5);
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.hehoblocks-custom-featured-category__description > :first-child { margin-top: 0; }
.hehoblocks-custom-featured-category__description > :last-child  { margin-bottom: 0; }

/* ── Nav buttons (sit on the right of the title row) ──────────────────────── */
.hehoblocks-custom-featured-category__nav {
    display: inline-flex;
    gap: var(--heho-space-2, 0.5rem);
    flex-shrink: 0;
}

.hehoblocks-custom-featured-category__nav-btn {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background-color: var(--heho-color-bg, #FFF);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;

    &[data-hb-cfc-prev] {
        background-color: var(--heho-color-text-muted);
    }

    &[data-hb-cfc-next] {
        background-color: var(--heho-color-accent-red-1);
    }

}

.hehoblocks-custom-featured-category__nav-btn:hover:not(:disabled),
.hehoblocks-custom-featured-category__nav-btn:focus-visible:not(:disabled) {
    background-color: var(--heho-color-primary, #AC0424);
    border-color: var(--heho-color-primary, #AC0424);
    color: #FFF;
    outline: none;
}

.hehoblocks-custom-featured-category__nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Slider track — CSS scroll-snap, no JS dependency for layout ──────────── */
.hehoblocks-custom-featured-category__slider {
    position: relative;
}

.hehoblocks-custom-featured-category__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--heho-space-5, 1.25rem) * 3)) / 4);
    gap: var(--heho-space-5, 1.25rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
}

/* No carousel: center the (few) products inside the container. */
.hehoblocks-custom-featured-category__track:not([data-hb-cfc-track]) {
    justify-content: center;
}

.hehoblocks-custom-featured-category__track::-webkit-scrollbar {
    display: none; /* Chromium / Safari */
}

.hehoblocks-custom-featured-category__slide {
    scroll-snap-align: start;
    min-width: 0;
}

/* ── Responsive — breakpoints can't use CSS vars, see heho.css ────────────── */
@media (max-width: 1199px) {
    .hehoblocks-custom-featured-category__track {
        grid-auto-columns: calc((100% - (var(--heho-space-5, 1.25rem) * 2)) / 3);
    }
}

@media (max-width: 768px) {
    .hehoblocks-custom-featured-category__track {
        grid-auto-columns: calc((100% - var(--heho-space-5, 1.25rem)) / 2);
    }
    .hehoblocks-custom-featured-category__title {
        font-size: var(--heho-font-size-2xl, 1.875rem);
    }
}

@media (max-width: 480px) {
    .hehoblocks-custom-featured-category__track {
        grid-auto-columns: 80%;
    }
    .hehoblocks-custom-featured-category__nav-btn {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.25rem;
    }
}