/* ================================================
   MTECH4U - MOBILE RESPONSIVE FIX
   Dedicated mobile stylesheet - overrides all
================================================ */

/* =============================================
   GLOBAL MOBILE BASE
============================================= */
*, *::before, *::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Hero slide inner ALWAYS uses flex-direction row on desktop, column on mobile */
.hero-slide-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}

/* =============================================
   TABLET — max 1100px
============================================= */
@media screen and (max-width: 1100px) {
  .container { padding: 0 20px; }
  .nav-search { max-width: 240px; }
  .categories-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .products-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .flash-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .newsletter-inner { padding: 44px 40px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   TABLET SMALL — max 900px
============================================= */
@media screen and (max-width: 900px) {

  /* --- Navbar --- */
  .top-bar { display: none !important; }
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; }
  .nav-search { max-width: 180px; }

  /* --- Hero --- */
  .hero-slider { min-height: 400px; }
  .hero-slide { position: relative !important; }
  .hero-slide-inner {
    display: block !important;
    text-align: center;
    padding: 40px 20px 60px !important;
    max-width: 600px;
    margin: 0 auto;
  }
  .hero-image-wrap { display: none !important; }
  .hero-content { max-width: 100%; }
  .hero-badge { display: inline-flex; margin: 0 auto 18px; }
  .hero-actions {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-stats {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
  }
  .hero-subtitle { margin: 0 auto 28px !important; }

  /* --- Newsletter --- */
  .newsletter-inner {
    display: block !important;
    padding: 36px 28px;
    border-radius: 16px;
  }
  .newsletter-content { margin-bottom: 24px; }
  .newsletter-title { font-size: 24px; }

  /* --- Footer --- */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }

  /* --- Flash --- */
  .flash-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* --- Testimonials --- */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================
   MOBILE LARGE — max 768px
============================================= */
@media screen and (max-width: 768px) {

  /* --- Sections --- */
  .section { padding: 40px 0 !important; }
  .container { padding: 0 16px; }
  .section-title { font-size: 22px !important; }

  /* --- Navbar --- */
  .nav-inner {
    height: 60px !important;
    padding: 0 16px !important;
    gap: 10px !important;
  }
  .nav-logo-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
  .nav-logo-text .brand-name { font-size: 17px !important; }
  .nav-logo-text .brand-sub { display: none !important; }
  .nav-search { display: none !important; }
  .nav-btn { width: 36px !important; height: 36px !important; font-size: 15px !important; }
  .btn-login { padding: 7px 12px !important; font-size: 13px !important; }

  /* --- Announcement Bar --- */
  .announcement-bar {
    font-size: 11.5px !important;
    padding: 7px 40px 7px 12px !important;
  }

  /* --- Hero --- */
  .hero-slider { min-height: 360px !important; }
  .hero-slide-inner { padding: 32px 16px 56px !important; }
  .hero-title { font-size: 26px !important; line-height: 1.2 !important; }
  .hero-subtitle { font-size: 14px !important; max-width: 100% !important; }
  .hero-badge { font-size: 11px !important; padding: 5px 12px !important; }
  .btn-primary, .btn-outline {
    padding: 11px 20px !important;
    font-size: 13.5px !important;
  }
  .hero-stat .number { font-size: 22px !important; }
  .hero-stats { gap: 18px !important; }
  .slider-arrow { width: 36px !important; height: 36px !important; font-size: 13px !important; }

  /* --- Categories --- */
  .categories-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .category-card { padding: 18px 8px !important; }
  .cat-icon-wrap {
    width: 50px !important;
    height: 50px !important;
    font-size: 22px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }
  .cat-name { font-size: 12.5px !important; }
  .cat-count { font-size: 10.5px !important; }

  /* --- Products Grid --- */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-img-wrap { height: 170px !important; }
  .product-info { padding: 12px !important; }
  .product-name { font-size: 13px !important; }
  .price-new { font-size: 15px !important; }
  .add-to-cart-btn { padding: 9px !important; font-size: 12.5px !important; }

  /* --- Flash Deals --- */
  .flash-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .flash-img-wrap { height: 140px !important; }
  .flash-name { font-size: 13px !important; }
  .flash-price-new { font-size: 15px !important; }
  .flash-title { font-size: 20px !important; }
  .countdown { flex-wrap: wrap !important; gap: 4px !important; }
  .count-unit { min-width: 36px !important; padding: 5px 7px !important; }
  .count-unit .num { font-size: 16px !important; }

  /* --- Features --- */
  .features-section { padding: 44px 0 !important; }
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .feature-card { padding: 22px 14px !important; }
  .feature-icon-wrap {
    width: 54px !important;
    height: 54px !important;
    font-size: 24px !important;
    margin-bottom: 14px !important;
  }
  .feature-title { font-size: 14px !important; }
  .feature-desc { font-size: 12.5px !important; }

  /* --- Newsletter --- */
  .newsletter-section { padding: 40px 0 !important; }
  .newsletter-inner { padding: 28px 20px !important; border-radius: 16px !important; }
  .newsletter-title { font-size: 20px !important; }
  .newsletter-desc { font-size: 13px !important; }
  .newsletter-form {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .newsletter-input { width: 100% !important; padding: 12px 14px !important; }
  .newsletter-submit {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }

  /* --- Footer --- */
  .footer { padding: 40px 0 0 !important; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 32px !important;
  }
  .footer-socials { flex-wrap: wrap !important; }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 0 !important;
  }
  .footer-payments { flex-wrap: wrap !important; gap: 6px !important; }

  /* --- WhatsApp Float --- */
  .whatsapp-float { bottom: 18px !important; right: 16px !important; }
  .whatsapp-btn { width: 50px !important; height: 50px !important; font-size: 22px !important; }
  .scroll-top { right: 18px !important; bottom: 78px !important; }
}

/* =============================================
   MOBILE — max 480px
============================================= */
@media screen and (max-width: 480px) {

  /* --- Navbar --- */
  .nav-inner { padding: 0 12px !important; gap: 8px !important; }
  .btn-login { display: none !important; }
  .nav-logo-text .brand-name { font-size: 16px !important; }

  /* --- Hero --- */
  .hero-slider { min-height: 340px !important; }
  .hero-slide-inner { padding: 24px 14px 52px !important; }
  .hero-title { font-size: 22px !important; }
  .hero-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .btn-primary, .btn-outline {
    width: 100% !important;
    max-width: 260px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hero-stat .number { font-size: 18px !important; }
  .hero-stat .label { font-size: 10.5px !important; }
  .hero-stats { gap: 14px !important; margin-top: 22px !important; }

  /* --- Categories --- */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .category-card { padding: 16px 8px !important; border-radius: 14px !important; }
  .cat-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }
  .cat-name { font-size: 11.5px !important; }
  .cat-count { font-size: 10px !important; }

  /* --- Products --- */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .product-img-wrap { height: 145px !important; }
  .product-info { padding: 10px !important; }
  .product-cat { font-size: 9.5px !important; letter-spacing: 0.5px !important; }
  .product-name { font-size: 12.5px !important; }
  .stars i { font-size: 10px !important; }
  .rating-num { font-size: 10px !important; }
  .price-new { font-size: 14px !important; }
  .price-old { font-size: 11px !important; }
  .product-prices { gap: 6px !important; margin-bottom: 10px !important; }
  .add-to-cart-btn {
    padding: 8px 6px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }
  .product-wishlist { width: 28px !important; height: 28px !important; font-size: 12px !important; top: 8px !important; right: 8px !important; }
  .product-badge { font-size: 9.5px !important; padding: 2px 6px !important; border-radius: 4px !important; }
  .product-badges { top: 8px !important; left: 8px !important; gap: 3px !important; }

  /* --- Flash Deals --- */
  .flash-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .flash-img-wrap { height: 175px !important; }
  .flash-title { font-size: 18px !important; }
  .flash-badge { font-size: 11.5px !important; }

  /* --- Section Headers --- */
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }
  .view-all-link { font-size: 13px !important; padding: 6px 12px !important; }
  .section-title { font-size: 20px !important; }
  .section-eyebrow { font-size: 10.5px !important; }

  /* --- Features --- */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .feature-card {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    padding: 18px 16px !important;
    gap: 16px !important;
  }
  .feature-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .feature-title { font-size: 13.5px !important; margin-bottom: 4px !important; }
  .feature-desc { font-size: 12px !important; line-height: 1.5 !important; }

  /* --- Countdown --- */
  .count-unit { min-width: 32px !important; padding: 4px 6px !important; }
  .count-unit .num { font-size: 14px !important; }
  .count-unit .lbl { font-size: 8px !important; }
  .count-sep { font-size: 14px !important; margin-bottom: 8px !important; }
  .countdown-label { font-size: 11.5px !important; }

  /* --- Testimonials --- */
  .testimonial-card { padding: 18px !important; border-radius: 14px !important; }
  .testimonial-text { font-size: 13px !important; margin-bottom: 14px !important; }
  .testimonial-name { font-size: 13.5px !important; }

  /* --- Footer --- */
  .footer-copy { font-size: 11.5px !important; }
  .payment-badge { font-size: 10px !important; padding: 3px 7px !important; }
}

/* =============================================
   TINY MOBILE — max 375px
============================================= */
@media screen and (max-width: 375px) {
  .nav-inner { padding: 0 10px !important; }
  .hero-title { font-size: 20px !important; }
  .categories-grid { gap: 6px !important; }
  .products-grid { gap: 6px !important; }
  .product-img-wrap { height: 130px !important; }
  .flash-grid { gap: 10px !important; }
  .container { padding: 0 12px !important; }
  .section { padding: 32px 0 !important; }
}

/* =============================================
   TOUCH DEVICE IMPROVEMENTS
============================================= */
@media (hover: none) and (pointer: coarse) {
  /* Always show quick action buttons on touch */
  .product-quick-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent) !important;
    padding: 16px 8px 8px !important;
  }
  .qa-btn { font-size: 11px !important; padding: 7px 4px !important; }

  /* Active states instead of hover */
  .category-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--border-light) !important; }
  .category-card:active { transform: scale(0.96) !important; }
  .product-card:hover { transform: none !important; box-shadow: none !important; }
  .product-card:active { transform: scale(0.98) !important; box-shadow: var(--shadow) !important; }
  .flash-card:hover { transform: none !important; }
  .flash-card:active { transform: scale(0.98) !important; }
  .btn-primary:hover { transform: none !important; }
  .btn-primary:active { transform: scale(0.97) !important; }
  .add-to-cart-btn:hover { background: var(--white) !important; color: var(--primary) !important; }
  .add-to-cart-btn:active { background: var(--primary) !important; color: white !important; }

  /* Bigger tap targets */
  .nav-btn { width: 42px !important; height: 42px !important; }
  .hamburger { padding: 8px !important; }
  .footer-links a { padding: 8px 0 !important; }
  .mobile-nav-links a { padding: 15px 20px !important; min-height: 52px !important; }
}

/* =============================================
   MOBILE NAV — ensure it works
============================================= */
@media screen and (max-width: 900px) {
  .mobile-nav { display: block !important; }
}

/* Fix: prevent horizontal scroll globally */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}