/* ======================================================
   EXTRA SMALL MOBILE (0px – 375px)
====================================================== */
@media (max-width: 375px) {

    .cart-header {
        font-size: 16px;
        padding: 10px 12px;
    }

    .progress-section {
        margin: 10px;
        padding: 12px;
    }

    .product-section {
        padding: 10px 12px;
    }

    .cart-footer {
        padding: 12px 15px;
    }

    .product-image {
        width: 60px;
        height: 75px;
    }

    .product-title {
        font-size: 12px;
    }

    .product-price {
        font-size: 14px;
    }
    .btn-continue{
        padding: 6px 4px;
        font-size: 12px;
    }
        .btn-checkout{
            padding: 6px 4px;
            font-size: 12px;
        }
        .view-all-link{
            display: none;
        }
}


/* ======================================================
   SMALL MOBILE (0px – 575px)
====================================================== */
@media (max-width: 575px) {

    .shop-space-card img {
        height: 160px;
    }

    .space-overlay {
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
        padding: 6px 8px !important;
    }

    .space-overlay span {
        font-size: 12px !important;
    }

    .quantity-input-group {
        max-width: 100%;
    }

    .add-to-cart-btn {
        width: 100%;
    }

    .product-details-wrapper .product-title {
        font-size: 1.4rem;
        font-weight: 400;
    }

    /* Cart modal */
    .cart-side-modal .cart-side-modal-dialog {
        width: 100%;
        max-width: 100%;
    }

    .cart-header {
        font-size: 18px;
        padding: 12px 15px;
    }

    .view-cart-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .cart-footer {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    .login_page {
        padding: 15px;
    }

    .login_page .login-card {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .login_page .logo {
        width: 80px;
    }

    .login_page .otp-input {
        width: 50px;
        height: 50px;
    }
}


/* ======================================================
   MOBILE (0px – 767px)
====================================================== */
@media (max-width: 767px) {

    .search-result-item {
        gap: 12px;
        padding: 12px;
    }

    .img-box {
        width: 70px;
        height: 70px;
    }

    .search-result-title {
        font-size: 13px;
    }

    .current-price {
        font-size: 14px;
    }

    .hero-image-container {
        border-radius: 0;
    }

    .heroSlider-next,
    .heroSlider-prev {
        display: none;
    }

    .color-tab {
        font-size: 12px;
        padding: 6px 12px;
    }

    .BannerSwiper,
    .BannerSwiper img {
        height: 250px;
    }

    .footer-section {
        text-align: center;
    }

    .social-icons {
        justify-content: center;
    }

    .whatsapp-float {
        bottom: 100px;
    }

    .description-card {
        padding: 20px;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .ck-content {
        font-size: 15px;
    }

    .cart-side-modal .cart-side-modal-dialog {
        max-width: 85%;
    }

    .about-banner {
        aspect-ratio: 4 / 2;
    }

   
    .contact-form-card {
        padding: 25px;
    }
}


/* ======================================================
   TABLET (0px – 991px)
====================================================== */
@media (max-width: 991px) {

    .main-header {
        display: none !important;
    }

    .mobile-header,
    .mobile-bottom-nav {
        display: block;
    }

    .category-dropdown:hover .products-mega-dropdown {
        opacity: 0;
        visibility: hidden;
    }

    .hover-icons {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        visibility: visible;
    }

    :root {
        --header-height: 70px;
    }
    
    .whatsapp-float {
        bottom: 100px;
    }
}


/* ======================================================
   SMALL DESKTOP (992px – 1199px)
====================================================== */
@media (min-width: 992px) and (max-width: 1199px) {

    .main-nav {
        gap: 15px;
        margin-right: 20px;
    }

    .main-header .container {
        gap: 20px;
    }

    .search-wrapper {
        max-width: 200px;
    }

    

    .header-actions {
        gap: 16px;
    }

    .category-link {
        font-size: 14px;
    }
}


/* ======================================================
   DESKTOP ONLY (992px and up)
====================================================== */
@media (min-width: 992px) {

    .mobile-header,
    .mobile-sidebar,
    .mobile-bottom-nav,
    .search-modal {
        display: none !important;
    }

    .shop-space-card:hover img {
        transform: scale(1.1);
    }
}