/* ================================================================
   HBXG MOBILE RESPONSIVE CSS
   SAFE: All rules are inside max-width: 767px breakpoint ONLY.
   Desktop (768px+) is completely untouched.
   Target: iPhone SE (375px), iPhone 14 (390px), Android mid (412px)
   ================================================================ */

/* ── 1. TOPBAR ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .topbar { display: none; }
}

/* ── 2. HEADER ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  header { position: sticky; top: 0; z-index: 1000; }
  .hdr { height: 58px; padding: 0 16px; }
  .logo img { height: 32px; }
  nav#primary-nav { display: none !important; }
  .hamburger { display: flex; }
  /* Sticky offset for anything after header */
  .dnav { top: 58px !important; }
}

/* ── 3. HAMBURGER MOBILE NAV ────────────────────────────────── */
@media (max-width: 767px) {
  .mob-nav { padding: 12px 16px 16px; }
  .mob-nav a { padding: 13px 0; font-size: 13px; }
  .mob-nav .m-cta { font-size: 13px; padding: 13px 20px; }
}

/* ── 4. HERO SECTION ────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero { min-height: 90vh; min-height: 90svh; }
  .hero-ct {
    padding: 64px 16px 48px 16px !important;
    max-width: 100%;
  }
  .hero .h1 { font-size: clamp(30px, 8vw, 42px); letter-spacing: -0.5px; }
  .hero-desc { font-size: 14px; margin-bottom: 24px; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn-g,
  .hero-btns .btn-ol { width: 100%; justify-content: center; padding: 14px 20px; }
  .hero-stats { gap: 18px; padding-top: 20px; flex-wrap: wrap; }
  .hstat-n { font-size: 24px; }
  .hstat-l { font-size: 10px; }
  .hero-pill { margin-bottom: 16px; }
  .hero-pill span { font-size: 9px; letter-spacing: 1.5px; }
}

/* ── 5. TRUST BAR ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .tbar { padding: 12px 16px; }
  .tbar-in { gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
  .ti { font-size: 11px; }
  .ti-sep { display: none; }
}

/* ── 6. SECTION PADDING ─────────────────────────────────────── */
@media (max-width: 767px) {
  .sec { padding: 40px 0; }
  .sec-sm { padding: 28px 0; }
  .wrap { padding: 0 16px; }

  /* Override inline padding on hero/page-header sections */
  section[style*="padding:64px 0"] { padding: 36px 0 28px !important; }
  section[style*="padding:72px 0"] { padding: 40px 0 !important; }
  section[style*="padding:60px 0"] { padding: 36px 0 !important; }
  section[style*="padding:56px 0"] { padding: 32px 0 !important; }
  section[style*="padding:48px 0"] { padding: 28px 0 !important; }

  /* Inner .wrap padding inside inline sections */
  section[style*="padding"] .wrap { padding: 0 16px; }
}

/* ── 7. TYPOGRAPHY ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .h1 { font-size: clamp(28px, 7vw, 38px); }
  .h2 { font-size: clamp(22px, 5.5vw, 30px); }
  .h3 { font-size: clamp(16px, 4vw, 20px); }
  .lead { font-size: 14px; }
  .tag { font-size: 9px; }
}

/* ── 8. PRODUCTS PAGE: MODEL ROWS (inline 1fr 2fr grid) ─────── */
@media (max-width: 767px) {
  /* These are inline-style grids — use attribute selector to override */
  [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Model image panel stacked above content */
  [style*="grid-template-columns:1fr 2fr"] > div:first-child {
    min-height: 200px !important;
    max-height: 240px !important;
  }
  [style*="grid-template-columns:1fr 2fr"] > div:first-child img {
    min-height: 200px !important;
    max-height: 240px !important;
    height: 220px !important;
  }
  /* Content panel on mobile */
  [style*="grid-template-columns:1fr 2fr"] > div:last-child {
    padding: 22px 16px !important;
  }
  /* Spec chips inside model rows */
  [style*="grid-template-columns:1fr 2fr"] .spec-mini {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Button groups inside model rows */
  [style*="grid-template-columns:1fr 2fr"] [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }
}

/* ── 9. PRODUCTS: PRODUCT CARDS GRID ───────────────────────── */
@media (max-width: 767px) {
  .prod-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .pc-body { padding: 12px; }
  .pc-name { font-size: 14px; }
  .pc-desc { font-size: 11px; }
}
@media (max-width: 380px) {
  .prod-grid { grid-template-columns: 1fr !important; }
}

/* ── 10. PRODUCTS: FULL GRID (all models page) ───────────────── */
@media (max-width: 767px) {
  .full-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}
@media (max-width: 380px) {
  .full-grid { grid-template-columns: 1fr !important; }
}

/* ── 11. FINANCE PAGE: TWO-COLUMN INLINE GRIDS ──────────────── */
@media (max-width: 767px) {
  /* Finance hero / content split */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:56px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:48px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:44px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:40px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:36px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:32px"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Finance estimate pairs (keep 2-col but tighter) */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:18px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ── 12. FINANCE TABLE: HORIZONTAL SCROLL ──────────────────── */
@media (max-width: 767px) {
  /* Ensure any table wrapper allows scroll */
  [style*="overflow-x:auto"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Reduce table font on mobile */
  table[style*="min-width"] {
    font-size: 12px !important;
    min-width: 580px !important;
  }
  table[style*="min-width"] th,
  table[style*="min-width"] td {
    padding: 10px 10px !important;
    font-size: 12px !important;
  }
  /* Parts table */
  table[style*="border-collapse"] {
    font-size: 12px !important;
  }
  table[style*="border-collapse"] th,
  table[style*="border-collapse"] td {
    padding: 10px 10px !important;
  }
}

/* ── 13. PARTS PAGE: SERVICE GRID ──────────────────────────── */
@media (max-width: 767px) {
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .maint-cards { grid-template-columns: 1fr !important; }
  .parts-grid { grid-template-columns: 1fr !important; }
  .parts-sidebar { position: static !important; }
  .interval-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── 14. INDUSTRY CARDS ─────────────────────────────────────── */
@media (max-width: 767px) {
  .ind-sec { padding: 40px 0; }
  .ind-grid { grid-template-columns: 1fr 1fr !important; gap: 3px !important; }
  .ind-card { height: 220px; }
  .ind-ct { padding: 14px; }
  .ind-ct h3 { font-size: 14px; }
  .ind-ct p { display: none; }
}
@media (max-width: 420px) {
  .ind-grid { grid-template-columns: 1fr !important; }
  .ind-card { height: 180px; }
  .ind-ct p { display: block; font-size: 11.5px; }
}

/* ── 15. NEWS / BLOG GRID ───────────────────────────────────── */
@media (max-width: 767px) {
  .news-grid { grid-template-columns: 1fr !important; }
  .nc { border-radius: 8px; }
  .nc-img { height: 160px; }
  .nc-body { padding: 14px; }
}

/* ── 16. PROCESS STEPS ──────────────────────────────────────── */
@media (max-width: 767px) {
  .proc-steps { grid-template-columns: 1fr !important; }
}

/* ── 17. ABOUT PAGE ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .abt-hero-in { grid-template-columns: 1fr !important; }
  .abt-story-in { grid-template-columns: 1fr !important; }
  .abt-stats-in { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .why-grid { grid-template-columns: 1fr !important; }
  .creds-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── 18. FINANCE STRIP ──────────────────────────────────────── */
@media (max-width: 767px) {
  .fin-strip { padding: 40px 0; }
  .fin-strip .wrap { grid-template-columns: 1fr !important; gap: 28px !important; padding: 0 16px !important; }
  .fin-in { grid-template-columns: 1fr !important; }
  .fin-hero-in { grid-template-columns: 1fr !important; }
  .fin-card { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* ── 19. CTA SECTION ────────────────────────────────────────── */
@media (max-width: 767px) {
  .cta-in { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-in .btn-g,
  .cta-in .btn-ol,
  .cta-in .btn-dk,
  .cta-in .btn-ol-dk { width: 100%; justify-content: center; }
}

/* ── 20. COMPARISON TABLE SECTION ──────────────────────────── */
@media (max-width: 767px) {
  .cmp-sec { padding: 36px 0; }
  .cmp-sec .wrap { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-sec table { min-width: 500px; font-size: 11px; }
  .cmp-sec table th,
  .cmp-sec table td { padding: 8px 10px; font-size: 11px; }
}

/* ── 21. SPEC MINI (product detail specs) ───────────────────── */
@media (max-width: 767px) {
  .spec-mini { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* ── 22. CONTACT PAGE / FORMS ───────────────────────────────── */
@media (max-width: 767px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .fg { grid-template-columns: 1fr !important; }
  .fg-item.full { grid-column: 1 !important; }
  /* WP/UM forms */
  .um-form input,
  .um-form textarea,
  .um-form select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select { font-size: 16px !important; /* Prevents iOS zoom on focus */ }
}

/* ── 23. DEMO NAV (DNAV) ────────────────────────────────────── */
@media (max-width: 767px) {
  .dnav { 
    top: 58px !important;
    padding: 8px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .dnav::-webkit-scrollbar { display: none; }
  .dnav a { font-size: 10px; padding: 5px 11px; white-space: nowrap; flex-shrink: 0; }
  .dnav span { display: none; }
}

/* ── 24. BUTTONS: GLOBAL MOBILE ─────────────────────────────── */
@media (max-width: 767px) {
  .btn-g, .btn-dk, .btn-ol, .btn-ol-dk {
    padding: 12px 22px;
    font-size: 12px;
  }
}

/* ── 25. FLOATING BUTTONS ───────────────────────────────────── */
@media (max-width: 767px) {
  .floats { bottom: 16px; right: 12px; gap: 8px; }
  .fl-btn { width: 44px; height: 44px; font-size: 18px; }
  .fl-wa-single { bottom: 16px; right: 14px; width: 48px; height: 48px; }
}

/* ── 26. FOOTER ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ft-inner { 
    grid-template-columns: 1fr 1fr !important; 
    gap: 24px !important; 
    padding: 0 16px !important;
  }
  .ft-inner > div:last-child {
    grid-column: 1 / -1 !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .ft-top { padding: 36px 0 28px; }
  .ft-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .ft-bot-in { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 16px; }
  .ft-bottom { padding: 0 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Override inline footer grid */
  footer [style*="grid-template-columns:1.6fr 1fr 1fr 1.3fr"] {
    grid-template-columns: 1fr 1fr !important;
    padding: 0 16px !important;
    gap: 24px !important;
  }
}
@media (max-width: 480px) {
  .ft-inner { grid-template-columns: 1fr !important; }
  .ft-grid { grid-template-columns: 1fr !important; }
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
  }
  footer [style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 16px !important;
  }
}

/* ── 27. GENERAL OVERFLOW PREVENTION ───────────────────────── */
@media (max-width: 767px) {
  /* Prevent any single element from causing horizontal overflow */
  main, section, article, aside, .wrap {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* But allow explicit scroll containers */
  [style*="overflow-x:auto"],
  .cmp-sec,
  .dnav { overflow-x: auto !important; }

  /* Images: prevent overflow */
  img { max-width: 100%; height: auto; }

  /* Inline max-width overrides that can cause issues at small sizes */
  [style*="max-width:640px"],
  [style*="max-width:620px"],
  [style*="max-width:560px"],
  [style*="max-width:540px"],
  [style*="max-width:700px"] {
    max-width: 100% !important;
  }
}

/* ── 28. ACTION GALLERY / AG SECTION ────────────────────────── */
@media (max-width: 767px) {
  .ag-sec { padding: 40px 0; }
  .ag-grid { grid-template-columns: 1fr !important; }
}

/* ── 29. CREDENTIALS GRID ───────────────────────────────────── */
@media (max-width: 767px) {
  .creds-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}
@media (max-width: 380px) {
  .creds-grid { grid-template-columns: 1fr !important; }
}

/* ── 30. FIN CARD ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .fin-card { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}
@media (max-width: 380px) {
  .fin-card { grid-template-columns: 1fr !important; }
}

/* ── 31. PAGE HEADER SECTIONS (dark hero banners) ───────────── */
@media (max-width: 767px) {
  /* All page hero banners use this pattern */
  section[style*="background:var(--black)"][style*="padding:64px"] .wrap {
    padding: 0 16px;
  }
  section[style*="background:var(--black)"][style*="padding:64px"] .h1 {
    font-size: clamp(26px, 7vw, 36px);
  }
  section[style*="background:var(--black)"][style*="padding:64px"] [style*="max-width"] {
    max-width: 100% !important;
  }
}

/* ── 32. INLINE CONTENT SECTIONS ────────────────────────────── */
@media (max-width: 767px) {
  /* Finance/About/Parts content blocks with inline padding */
  [style*="padding:32px 36px"] { padding: 20px 16px !important; }
  [style*="padding:28px 32px"] { padding: 16px 14px !important; }
  [style*="padding:24px 28px"] { padding: 16px 14px !important; }
  [style*="padding:0 40px"] { padding: 0 16px !important; }
  [style*="padding:40px"] { padding: 24px 16px !important; }
}

/* ── 33. PRODUCT SPEC DETAIL BUTTONS ────────────────────────── */
@media (max-width: 767px) {
  /* Spec detail action buttons in product rows */
  [style*="display:flex"][style*="gap:12px"] > .btn-g,
  [style*="display:flex"][style*="gap:12px"] > .btn-ol-dk,
  [style*="display:flex"][style*="gap:12px"] > .btn-dk {
    flex: 1;
    justify-content: center;
    min-width: 0;
    font-size: 11px;
    padding: 11px 14px;
  }
}

/* ── 34. POPUP / MODAL FORMS ────────────────────────────────── */
@media (max-width: 767px) {
  .pum-container { 
    width: 94vw !important; 
    max-width: 94vw !important;
    margin: 0 auto !important;
    padding: 20px 16px !important;
  }
}

/* ── 35. WHATSAPP CHAT WIDGET ────────────────────────────────── */
@media (max-width: 767px) {
  /* Ensure WA chat widget doesn't cover content */
  .wp-whatsapp-chat { bottom: 70px !important; right: 14px !important; }
}

/* ── 36. SKIP LINK ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .skip-link { font-size: 11px; padding: 6px 12px; }
}