body {
    font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.primary-gradient {
    background: linear-gradient(135deg, #fc5904 0%, #d44a03 100%);
}

.bg-luxe-gradient {
    background: linear-gradient(135deg, #fc5904 0%, #d84c03 100%);
}

.premium-gradient {
    background: linear-gradient(135deg, #fc5904 0%, #d84c04 100%);
}

.bg-orange-gradient {
    background: linear-gradient(180deg, #fc5904 0%, #db5007 100%);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

#mobile-drawer {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
}

#mobile-drawer.active {
    transform: translateX(0);
}

#drawer-overlay {
    display: none;
}

#drawer-overlay.active {
    display: block;
}

.carousel-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.carousel-track {
    display: flex;
    gap: 1rem;
}

.carousel-item {
    flex: 0 0 calc(14.2857% - 0.5rem);
}

.categories img {
    width: 250px;
    height: 150px;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .carousel-item {
        flex: 0 0 calc(33.3333% - 0.67rem);
    }
}

@media (max-width: 768px) {
    .carousel-track {
        gap: 0.75rem;
    }

    .carousel-item {
        flex: 0 0 calc(50% - 0.375rem);
    }

    .categories img {
        width: 100%;
        height: 120px;
    }
}