/* MEGRA MATRIX — Phone A easy-read (not app UI) */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 16px !important; line-height: 1.5 !important; }

  .site-header, header.site-header, .header, nav.nav, .nav-bar {
    flex-wrap: wrap !important;
  }
  .site-header, .topbar, .header-inner, .nav-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .brand img, .logo img, a.brand img {
    max-height: 36px !important;
    width: auto !important;
  }
  .nav a, nav a, .menu a {
    font-size: 15px !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .btn, a.btn, .button, a.cta, .wa-btn, a[href*="wa.me"] {
    font-size: 15px !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
  }

  main, .main, .wrap, .container, .content, .section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  h1 { font-size: clamp(1.35rem, 5.5vw, 1.8rem) !important; line-height: 1.25 !important; }
  h2 { font-size: clamp(1.15rem, 4.5vw, 1.4rem) !important; }
  h3 { font-size: clamp(1.05rem, 4vw, 1.2rem) !important; }
  p, li, .answer-block, .card p, .spec, td, th {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  /* grids → stack */
  .grid, .cards, .product-grid, .cat-grid, .features, .row {
    display: block !important;
  }
  .grid > *, .cards > *, .product-grid > *, .cat-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .hero, .hero-grid, .split {
    display: block !important;
  }
  .hero img, .hero-visual img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  footer, .site-footer, .footer {
    font-size: 14px !important;
    padding: 16px 12px !important;
  }

  input, select, textarea, button {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* lang switch tap */
  .lang-switch a {
    font-size: 14px !important;
    padding: 8px 10px !important;
    min-height: 40px !important;
  }
}