/* MOBILE APP OPTIMIZATION - CRITICAL FIX */

html, body {
    max-width: 100vw;
    width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
    position: static !important;
    touch-action: auto !important;
}

*, *::before, *::after { max-width: 100%; }
img { max-width: 100%; height: auto; display: block; }
html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
button, a, input, select, textarea { min-height: 44px; min-width: 44px; }

@media (max-width: 768px) {
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 10px !important; }
    .product-card { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
    .product-card img { width: 100% !important; height: auto !important; max-height: 180px !important; object-fit: cover !important; }
    .main-header { padding: 0 8px !important; }
    .nav-container { padding: 0 !important; }
    .desktop-nav, .desktop-search { display: none !important; }
    .hero { height: auto !important; min-height: 400px !important; padding: 20px 10px !important; margin-top: 0 !important; position: relative !important; z-index: 1 !important; }
    .hero h1 { font-size: 1.8rem !important; }
    .hero p { font-size: 0.95rem !important; }
    .hero-slide { padding-top: 40px !important; }
    .mobile-bottom-nav { padding-bottom: max(env(safe-area-inset-bottom), 10px) !important; }
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}

.badges-stack { position: absolute !important; top: 10px !important; left: 10px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; z-index: 100 !important; width: auto !important; pointer-events: none; }
.badge-narin-pink { background: linear-gradient(135deg, #f48fb1, #db2777) !important; color: white !important; font-size: 0.65rem !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 20px !important; }
.badge-narin-discount { background: rgba(255, 255, 255, 0.95) !important; color: #db2777 !important; font-size: 0.65rem !important; font-weight: 800 !important; padding: 3px 10px !important; border-radius: 20px !important; border: 1px solid #fce7f3 !important; }