/* ============================================================
   MERI Responsive CSS
   Mobile-first breakpoints
   ============================================================ */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
  :root {
    --space-4xl: 72px;
    --space-3xl: 48px;
    --space-2xl: 36px;
  }

  .container {
    padding: 0 var(--space-md);
  }

  /* Hide desktop nav, show mobile */
  .main-navigation { display: none; }
  .header-cta { display: none; }
  .mobile-menu-toggle { display: flex; }
  .mobile-menu-container { display: block; }
}

/* Phone: 480px - 767px */
@media (max-width: 767px) {
  :root {
    --space-4xl: 56px;
    --space-3xl: 40px;
    --space-2xl: 28px;
  }

  .header-inner {
    height: 60px;
  }

  .meri-logo {
    height: 28px;
  }

  .btn--lg {
    padding: 14px 28px;
    font-size: 0.95rem;
  }

  .meri-quick-specs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small Phone: < 480px */
@media (max-width: 479px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.15rem; }

  .meri-quick-specs {
    grid-template-columns: 1fr;
  }

  .meri-product-actions {
    flex-direction: column;
  }

  .meri-product-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}