/* ===== MOBILE-FIRST E-COMMERCE CSS ===== */

/* --- BASE MOBILE (max 768px) --- */
@media (max-width: 768px) {

  header { padding: 0 16px !important; }
  .header-inner { height: 60px !important; }
  .logo-text { font-size: 20px !important; }
  .logo-sub { display: none !important; }
  nav { display: none !important; }
  .hamburger { display: flex !important; }
  .header-actions { gap: 8px !important; }
  .header-actions button { padding: 6px !important; font-size: 20px !important; }
  .cart-count { font-size: 9px !important; width: 16px !important; height: 16px !important; }

  .announcement-bar { font-size: 11px !important; padding: 8px 12px !important; }
  .announcement-bar span { margin: 0 8px !important; }

  .hero { padding: 40px 16px 32px !important; min-height: auto !important; }
  .hero-inner { grid-template-columns: 1fr !important; gap: 0 !important; text-align: center !important; }
  .hero-visual { display: none !important; }
  .hero h1 { font-size: 28px !important; margin-bottom: 14px !important; line-height: 1.2 !important; }
  .hero-badge { font-size: 10px !important; padding: 6px 12px !important; margin-bottom: 14px !important; }
  .hero-desc { font-size: 14px !important; margin-bottom: 24px !important; }
  .hero-ctas { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .hero-ctas .btn-primary, .hero-ctas .btn-outline { width: 100% !important; max-width: 280px !important; justify-content: center !important; padding: 14px 20px !important; font-size: 15px !important; }
  .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 28px !important; }
  .hero-stat strong { font-size: 20px !important; }
  .hero-stat span { font-size: 11px !important; }

  .trust-bar { padding: 12px 16px !important; overflow-x: auto !important; }
  .trust-bar-inner { flex-wrap: nowrap !important; gap: 16px !important; justify-content: flex-start !important; }
  .trust-item { flex-shrink: 0 !important; font-size: 12px !important; }

  #products { padding: 48px 16px !important; }
  .section-header { margin-bottom: 28px !important; }
  .section-header h2 { font-size: 24px !important; }
  .section-header p { font-size: 14px !important; }
  .products-filter { gap: 8px !important; margin-bottom: 24px !important; flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 4px !important; justify-content: flex-start !important; }
  .filter-btn { flex-shrink: 0 !important; padding: 8px 16px !important; font-size: 12px !important; }

  .products-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .product-card { border-radius: 12px !important; }
  .product-img { height: 130px !important; font-size: 50px !important; }
  .product-info { padding: 12px !important; }
  .product-name { font-size: 13px !important; margin-bottom: 4px !important; }
  .product-desc { display: none !important; }
  .product-category { font-size: 9px !important; }
  .stars { font-size: 11px !important; }
  .rating-count { font-size: 10px !important; }
  .product-variants { gap: 4px !important; margin-bottom: 8px !important; }
  .variant-btn { font-size: 9px !important; padding: 3px 7px !important; }
  .urgency-timer { font-size: 10px !important; padding: 5px 8px !important; margin-bottom: 6px !important; }
  .stock-text { font-size: 9px !important; }
  .product-footer { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .price-current { font-size: 16px !important; }
  .price-old { font-size: 11px !important; }
  .price-save { font-size: 9px !important; }
  .add-to-cart { width: 100% !important; justify-content: center !important; padding: 9px 12px !important; font-size: 12px !important; border-radius: 8px !important; }
  .card-qty-ctrl { width: 100% !important; justify-content: space-between !important; border-radius: 8px !important; }
  .product-badge { font-size: 8px !important; padding: 3px 8px !important; top: 10px !important; left: 10px !important; }
  .product-wishlist { width: 28px !important; height: 28px !important; font-size: 12px !important; top: 10px !important; right: 10px !important; }

  #why { padding: 48px 16px !important; }
  .features-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .feature-card { padding: 20px 14px !important; }
  .feature-icon { width: 48px !important; height: 48px !important; font-size: 22px !important; margin-bottom: 12px !important; }
  .feature-card h3 { font-size: 13px !important; }
  .feature-card p { font-size: 12px !important; }

  #nutrition { padding: 48px 16px !important; }
  .nutrition-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .nutrition-content h2 { font-size: 24px !important; }
  .nutrition-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .nutrition-stat strong { font-size: 20px !important; }

  #testimonials { padding: 48px 16px !important; }
  .testimonials-grid { grid-template-columns: 1fr !important; }

  #about { padding: 48px 16px !important; }
  .about-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .about-content h2 { font-size: 24px !important; }
  .about-metrics { grid-template-columns: 1fr 1fr !important; }
  .about-visual { padding: 28px 20px !important; }
  .about-visual-emoji { font-size: 60px !important; }

  #blog { padding: 48px 16px !important; }
  .blog-grid { grid-template-columns: 1fr !important; }

  #contact { padding: 48px 16px !important; }
  .contact-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .contact-form { padding: 20px !important; }
  .form-row { grid-template-columns: 1fr !important; }

  .cart-sidebar { width: 100% !important; right: -100% !important; }
  .cart-sidebar.open { right: 0 !important; }
  .cart-header { padding: 18px 16px !important; }
  .cart-items { padding: 12px 16px !important; }
  .cart-footer { padding: 16px !important; }
  .cart-upsell { margin: 8px 16px !important; }

  .checkout-overlay { padding: 0 !important; align-items: flex-end !important; }
  .checkout-modal { border-radius: 24px 24px 0 0 !important; max-height: 92vh !important; padding: 24px 16px !important; }
  .cform-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  .mobile-buy-bar { display: flex !important; padding: 10px 16px !important; gap: 10px !important; }
  .mobile-buy-bar .btn-cart { font-size: 14px !important; padding: 13px !important; }
  .mobile-buy-bar .btn-buynow { font-size: 14px !important; padding: 13px !important; }

  .whatsapp-float { bottom: 72px !important; right: 16px !important; width: 50px !important; height: 50px !important; font-size: 22px !important; }

  footer { padding: 48px 16px 90px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; }
  .footer-badges { justify-content: center !important; flex-wrap: wrap !important; }

  .toast { bottom: 80px !important; font-size: 13px !important; padding: 12px 18px !important; max-width: 90vw !important; white-space: normal !important; text-align: center !important; }

  .mobile-menu { top: 60px !important; padding: 12px 16px !important; }
  .mobile-menu a { padding: 14px 16px !important; font-size: 15px !important; }

  .section-tag { font-size: 10px !important; }
}

/* --- SMALL PHONES (max 380px) --- */
@media (max-width: 380px) {
  .products-grid { grid-template-columns: 1fr !important; }
  .product-img { height: 160px !important; font-size: 64px !important; }
  .product-info { padding: 14px !important; }
  .product-name { font-size: 15px !important; }
  .product-desc { display: block !important; font-size: 12px !important; }
  .product-footer { flex-direction: row !important; align-items: center !important; }
  .add-to-cart { width: auto !important; }
  .card-qty-ctrl { width: auto !important; }
  .hero h1 { font-size: 26px !important; }
  .features-grid { grid-template-columns: 1fr !important; }
}

/* --- TABLET (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr !important; text-align: center !important; }
  .hero-visual { display: none !important; }
  .hero-ctas { justify-content: center !important; }
  .hero-stats { justify-content: center !important; }
  .products-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .nutrition-inner { grid-template-columns: 1fr !important; }
  .about-inner { grid-template-columns: 1fr !important; }
  .contact-inner { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* --- FADE IN ANIMATION --- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 769px) {
  .product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(45,106,79,0.18); }
}

.cart-btn { transition: transform 0.2s; }

section[id] { scroll-margin-top: 80px; }
@media (max-width: 768px) {
  section[id] { scroll-margin-top: 60px; }
}