.food-menu-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--food-menu-carousel-gap, 0.75rem);
    padding: var(--food-menu-carousel-padding-y, 0) var(--food-menu-carousel-padding-x, 0);
    --food-menu-item-padding-y: 0.75rem;
    --food-menu-item-padding-x: 1.25rem;
    --food-menu-item-border-radius: 999px;
    --food-menu-item-border-color: rgba(0, 0, 0, 0.1);
    --food-menu-item-background: #ffffff;
    --food-menu-item-text: #000000;
    --food-menu-item-hover-background: #f0f0f0;
    --food-menu-item-hover-text: #000000;
    --food-menu-item-active-background: #f04c23;
    --food-menu-item-active-text: #ffffff;
    --food-menu-arrow-background: rgba(0, 0, 0, 0.05);
    --food-menu-arrow-icon: #000000;
    --food-menu-arrow-hover-background: rgba(0, 0, 0, 0.15);
    --food-menu-arrow-hover-icon: #000000;
    --food-menu-arrow-size: 2.25rem;
}

.food-menu-carousel__track {
    display: flex;
    overflow-x: auto;
    gap: var(--food-menu-carousel-gap, 0.75rem);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0;
    scrollbar-width: none;
}

.food-menu-carousel__track::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.food-menu-carousel__track::-webkit-scrollbar-thumb,
.food-menu-carousel__track::-webkit-scrollbar-track {
    background: transparent;
}

.food-menu-carousel__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--food-menu-item-padding-y, 0.75rem) var(--food-menu-item-padding-x, 1.25rem);
    border-radius: var(--food-menu-item-border-radius, 999px);
    border: 1px solid var(--food-menu-item-border-color, rgba(0, 0, 0, 0.1));
    background-color: var(--food-menu-item-background, #ffffff);
    color: var(--food-menu-item-text, inherit);
    text-decoration: none;
    scroll-snap-align: center;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.food-menu-carousel__item:hover,
.food-menu-carousel__item:focus {
    background-color: var(--food-menu-item-hover-background, #f0f0f0);
    color: var(--food-menu-item-hover-text, inherit);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    outline: none;
}

.food-menu-carousel__item.is-active,
.food-menu-carousel__item[aria-current="true"] {
    background-color: var(--food-menu-item-active-background, #f04c23);
    color: var(--food-menu-item-active-text, #ffffff);
    box-shadow: 0 6px 16px rgba(240, 76, 35, 0.25);
}

.food-menu-carousel__label {
    font-weight: 600;
    white-space: nowrap;
}

.food-menu-carousel__nav {
    border: none;
    background-color: var(--food-menu-arrow-background, rgba(0, 0, 0, 0.05));
    color: var(--food-menu-arrow-icon, inherit);
    width: var(--food-menu-arrow-size, 2.25rem);
    height: var(--food-menu-arrow-size, 2.25rem);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex: 0 0 auto;
}

.food-menu-carousel__nav:hover,
.food-menu-carousel__nav:focus {
    background-color: var(--food-menu-arrow-hover-background, rgba(0, 0, 0, 0.15));
    color: var(--food-menu-arrow-hover-icon, inherit);
    outline: none;
}

.food-menu-carousel__nav[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.food-menu-carousel__placeholder {
    padding: 1.5rem;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: center;
}

@media (max-width: 600px) {
    .food-menu-carousel {
        gap: 0.5rem;
    }

    .food-menu-carousel__track {
        gap: 0.5rem;
    }
}