/* ===================================
   LARYOH FASHION - INDEX MOBILE OPTIMIZATION
   =================================== */

/* Default Desktop Styles (Restoring Desktop UI precisely) */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    padding: 0 5%;
}

@media (max-width: 768px) {
    /* 1. Hero Section Optimization */
    .hero {
        height: 55vh !important; /* Shorter hero for mobile focus */
        min-height: 400px !important;
        margin-top: 65px !important;
    }

    .hero-content {
        padding: 1.5rem !important;
    }

    .hero-content h1 {
        font-size: 2.4rem !important; /* Smaller text */
        line-height: 1.2 !important;
        margin-bottom: 0.8rem !important;
    }

    .hero-content p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 10px;
    }

    .btn-main {
        padding: 0.8rem 2rem !important;
        font-size: 1rem !important;
    }

    /* 2. Promo Grid (Category Section) */
    .section-modern {
        padding: 40px 15px !important;
    }

    .promo-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 items per row */
        gap: 12px !important;
        padding: 0 !important;
    }

    .product-card-v2 {
        border-radius: 12px !important;
    }

    .product-details-v2 {
        padding: 10px 5px !important;
    }

    .product-details-v2 h3 {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
    }

    .badge-special {
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
        border-radius: 6px !important;
        top: 10px !important;
        left: 10px !important;
    }

    /* 3. Launching Soon Popup */
    .notify-popup {
        bottom: 20px !important;
        right: 20px !important;
        left: 20px !important; /* Full width on tiny screens */
        text-align: center;
        font-size: 0.85rem !important;
        padding: 12px 15px !important;
    }

    /* 4. Other Layout Fixes */
    .section-title-modern h2 {
        font-size: 1.8rem !important;
    }

    .section-title-modern p {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 45vh !important;
    }
    
    .hero-content h1 {
        font-size: 2rem !important;
    }
    
    .promo-grid {
        gap: 10px !important;
    }
}