/* Responsive adjustments */
@media (max-width: 1024px) {

    .explore-grid,
    .crocs-grid {
        grid-template-columns: 1fr;
    }

    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-banner {
        height: 300px;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .promo-red-banner {
        flex-direction: column;
        gap: 15px;
    }

    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .alo-hero-split {
        grid-template-columns: 1fr;
    }

    .search-bar {
        display: none;
        /* simple hide for mobile, would need mobile toggle usually */
    }
    .section_title-BIG {
        font-size: 25px;
        font-weight: 800;
    }
    .hilight_text {
        font-size: 20px;
        font-weight: 700;
    }
}

@media (max-width: 676px) {
    .dark-section{
        padding: 30px 0;
    }
    .section-title{
        font-size: 17px;
        font-weight: 700
    }
    .tabs {
        gap: 10px;
    }
    .btn_tabs_clickble {
        font-weight: 700;
        font-size: 12px;
    }
    .section_title-BIG {
        font-size: 18px;
    }
}
@media (max-width: 567px) {
    .explore-categories {
        gap: 10px;
    }
    .cat-mini-card {
        padding: 10px;
    }
    .cat-mini-card h5 {
        font-size: 10px;
        margin: 0 0 5px 0;
    }
    .explore-btn {
        background: var(--white_color);
        color: var(--dark-bg-2);
        padding: 10px 20px;
        border-radius: 30px;
    }
    .marquee-strip {
        color: var(--white_color);
        padding: 13px 0;
        font-size: 12px;
    }
    .promo-red-banner h3 {
        font-size: 25px;
        font-weight: 800;
    }
    .promo-red-banner {
        color: var(--white_color);
        padding: 20px;
        margin: 20px 0;
    }
    .alo-section {
        padding: 30px 0;
    }
    .nav-actions {
        gap: 15px;
    }
    .brand_image{
        width: 70px;
    }
    .bottom-nav ul{
        gap: 20px;
    }
}
@media (max-width: 450px) {
    .product-card{
        padding: 10px;
    }
    .search-pill {
        font-size: 0.7rem;
    }
}