/* Fixed Position Categories Fix - Additional Styles */

/* Set a minimum height for the container to ensure proper layout */
.container {
    min-height: 50px;
}

/* Create fixed positioning for the categories section */
.categories-section {
    background-color: var(--card-bg) !important;
    position: relative !important;
}

/* Force the featured section to be well below the categories */
.featured-offers-section {
    clear: both !important;
    position: relative !important;
}

/* Spacer to physically separate the sections */
.section-spacer {
    display: block !important;
    height: 200px !important;
    width: 100% !important;
    clear: both !important;
    background-color: var(--card-bg) !important;
}

/* Handle overflow from categories */
.categories-grid {
    overflow: visible !important;
    margin-bottom: 50px !important;
}

/* Fix for mobile devices */
@media (max-width: 768px) {
    .categories-section {
        margin-bottom: 100px !important;
    }
    
    .section-spacer {
        height: 150px !important;
    }
    
    .featured-offers-section {
        margin-top: 100px !important;
    }
}