/* =====================================
   MOBILE RESPONSIVE FIX (CLEAN VERSION)
   Applies to ALL pages
===================================== */

@media (max-width: 768px) {

  /* ---------- HEADER ---------- */
  .header {
    position: sticky;
    top: 0;
    z-index: 10000;
    background: #fff;
  }

  .nav {
    flex-wrap: wrap;
    gap: 15px;
  }

  /* ---------- DROPDOWN ---------- */
  .dropdown {
    position: relative;
  }

  .dropdown-content {
    display: none;
    position: static;
    width: 100%;
    box-shadow: none;
    background: #fff;
  }

  .dropdown.open .dropdown-content {
    display: block;
  }

  /* ---------- HERO (INDEX) ---------- */
  .hero {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px 20px;
    position: relative;
    z-index: 1;
  }

  .hero-image {
    order: 1; /* image on top */
  }

  .hero-image img {
    pointer-events: none;
  }



  /* ---------- FOOD PAGE ---------- */
  .food-hero {
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
    padding: 40px 20px;
  }

  .food-hero-text {
        order: 1;
    }

  .food-grid {
    grid-template-columns: 1fr; /* products vertical */
    padding: 20px;
  }

  /* ---------- TECH / APP / POS ---------- */
  .tech-hero,
  .app-showcase,
  .pos-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 40px 20px;
  }

  .tech-hero-image,
  .app-image,
  .pos-image {
    order: -1; /* image on top */
  }

  /* ---------- FOOTER ---------- */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ---------- FLOATING CONTACT ---------- */
  .floating-contact-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 12000;
    pointer-events: auto;
  }

  .floating-contact {
    pointer-events: auto;
  }
}