/* advnce labs — shared mobile/responsive base
   Linked from every HTML page. Catches universal patterns; page-specific
   overrides still live in each page's <style> block. */

/* ────────────────────────────────────────────────
   Universal — apply to all viewports
   ──────────────────────────────────────────────── */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent iOS auto-zoom on form inputs — requires font-size >= 16px */
input, select, textarea, button {
  font-size: 16px;
}

/* Keep touch targets tappable */
button, a.btn, .nav-link, .nav-back, .btn-order, .submit-btn {
  min-height: 44px;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* ────────────────────────────────────────────────
   Phone (≤ 640px)
   ──────────────────────────────────────────────── */

@media (max-width: 640px) {

  /* Nav — tighten padding, let logo stay, allow links to wrap/scroll */
  nav {
    padding: 0 14px !important;
    height: 54px !important;
  }
  .nav-brand, .nav-brand-text {
    font-size: 13px !important;
    letter-spacing: 2px !important;
  }
  .nav-links {
    gap: 12px !important;
  }
  .nav-links .nav-link,
  .nav-links a {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }

  /* Generic page / container paddings */
  .page, .catalog-body, .hero, .hero-inner, .page-header-inner,
  .section, .tiers-inner, .about-inner, .faq-inner,
  .protocols-inner, .legal-inner, .about-hero, .about-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Headings scale down */
  h1, .hero-title, .section-title, .page-title, .ph-title {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.5px !important;
  }
  h2, .tiers-title {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.05 !important;
  }
  h3 {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }

  /* Body text stays readable */
  p, .hero-sub, .section-sub, .about-p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Grids with 2+ columns fall to a single column.
     NOTE: .hero-content is intentionally excluded — it's a flex layout
     on index.html with a 3D-transformed vial group; forcing display:block
     collapses the height:auto on .hero-vials and makes the absolutely-
     positioned vials float upward into the headline. */
  .hero-grid,
  .hero,
  .about-grid,
  .tier-grid,
  .stat-grid,
  .feature-grid,
  .split-grid,
  .two-col,
  .product-page,
  .page {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* Scroll long rows horizontally if they can't stack */
  .hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .hero-stats .stat-num { font-size: 24px !important; }
  .hero-stats .stat-label { font-size: 8px !important; letter-spacing: 1px !important; }

  /* Tables / cart rows stay within the viewport */
  .cart-item, .summary-line, .item-row {
    font-size: 13px !important;
  }
  .item-name { font-size: 14px !important; }
  .item-price { font-size: 14px !important; }

  /* Buttons — full width on mobile CTAs */
  .btn, .cta, .submit-btn, .btn-order, .primary-btn {
    width: 100%;
    display: block;
    text-align: center;
  }

  /* Footers */
  footer, .foot, .site-foot, .page-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-align: center;
  }
  .page-footer, .foot-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Images / illustrations don't blow up.
     NOTE: .hero-vials excluded — its height is intentionally fixed because
     the vials inside use position:absolute with `bottom:` offsets; auto-
     height collapses the container to 0 and the vials escape upward. */
  .vial-display {
    height: auto !important;
    max-height: 380px;
  }
}

/* ────────────────────────────────────────────────
   Small phone (≤ 400px) — extra squeeze
   ──────────────────────────────────────────────── */

@media (max-width: 400px) {
  nav {
    padding: 0 10px !important;
  }
  .nav-links {
    gap: 8px !important;
  }
  .nav-links .nav-link {
    font-size: 8px !important;
    letter-spacing: 1px !important;
  }
  h1, .hero-title, .section-title {
    font-size: 28px !important;
  }
}

/* ────────────────────────────────────────────────
   Tablet (641px – 900px) — prevent weird mid sizes
   ──────────────────────────────────────────────── */

@media (min-width: 641px) and (max-width: 900px) {
  .page, .hero-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}