/* v14-mobile-deep — 2026-05-11
 *
 * Deep mobile audit fixes. Covers issues NOT addressed by v11–v13:
 *
 *   1. Homepage: duplicate hero content removed in HTML, receipt cards stack
 *   2. Homepage: picks-strip grid override for inline styles
 *   3. Homepage: AFM cluster SVG scrollable on small screens
 *   4. Homepage: tool-cards single-column at wider breakpoint
 *   5. About page: hero h1 and drop-cap sizing
 *   6. General: blockquote max-width on mobile
 *   7. Hero product card: prevent overflow on narrow screens
 *   8. Hamburger nav: ensure it's always visible and tappable
 *   9. Content sections: tighter padding on mobile
 *  10. Sticky buy bar: text truncation fix
 *
 * ~2KB. Loaded last after v13.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. HOMEPAGE — receipt cards, hero sizing
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Receipt verification cards — stack vertically */
  .dr-hero-receipts {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }
  .dr-receipt {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Hero headline — prevent overflow */
  #vp-h1,
  .hero-headline,
  .home-hero h1 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Hero product card — prevent it from being too wide */
  .hero-product-card {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  /* Hero actions — stack on very narrow screens */
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .hero-action {
    text-align: center !important;
    justify-content: center !important;
  }

  /* Hero trust row — wrap properly */
  .hero-trust {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    font-size: 12px !important;
  }

  /* Hero sub-text — full width, no cramped max-width */
  .hero-cta-sub,
  .hero-tools-hint {
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   2. PICKS STRIP — override inline grid styles
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .picks-strip {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   3. AFM CLUSTER — scrollable on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .afm-cluster {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }
  .afm-cluster svg {
    min-width: 480px;
    height: auto;
  }
  .afm-cluster-cta {
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   4. TOOL CARDS — single column earlier
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .tool-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   5. ABOUT PAGE — hero sizing fixes
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ab-hero h1 {
    font-size: clamp(28px, 8vw, 48px) !important;
    line-height: 1.1 !important;
  }
  .ab-lede::first-letter {
    font-size: 3em !important;
  }
  .ab-lede {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* About stats row */
  .ab-stats {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   6. BLOCKQUOTES — no cramped max-width on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  blockquote {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 16px !important;
    font-size: 15px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   7. SECTIONS — tighter padding on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Prevent any child from causing horizontal scroll */
  .section > * {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Images: never wider than viewport */
  .section img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   8. NAV — hamburger always visible on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .nav-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Ensure nav inner is flex row */
  .dr-canon-nav .inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 0 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   9. STICKY BUY BAR — text doesn't overflow
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .home-sticky-buy-inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .home-sticky-buy-text {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .home-sticky-buy a.hero-action {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   10. SUPPORT/HONEST PAGES — card grids
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .support-grid,
  .honest-grid,
  .tier-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   11. FOCUS PAGE — timer panel on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .fs-timer {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 18px !important;
  }
  .fs-timer-actions {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .fs-timer-display {
    font-size: 40px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   12. DARK MODE — ensure mobile overrides work in dark mode
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  [data-theme="dark"] .dr-hero-receipts {
    gap: 8px !important;
  }
  [data-theme="dark"] .hero-product-card {
    border-color: rgba(255,255,255,0.06) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   13a. HONEST PAGE — AI loop SVG scrollable on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .hon-loop {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hon-loop svg {
    min-width: 520px;
    height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   13b. ABOUT PAGE — hide SVG stamp on mobile (illegible at 390px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .ab-hero-stamp {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   13c. SPIRALING BADGE — shift up when sticky buy bar is present
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  body.uses-vp-hero .spiraling-badge-link {
    bottom: 76px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   13d. KIT PAGE — sticky buy bar hide secondary CTA on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .sbb-secondary {
    display: none !important;
  }
  .sbb-inner {
    gap: 10px !important;
  }
  .sbb-text strong {
    font-size: 13px !important;
  }
  .sbb-price {
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   13. EXTRA-SMALL (≤380px) — tighter everything
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hero-actions {
    gap: 8px !important;
  }
  .hero-action {
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
  .dr-receipt {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .hero-trust {
    font-size: 11px !important;
  }
  .picks-strip {
    gap: 8px !important;
  }
  blockquote {
    padding: 12px !important;
    font-size: 14px !important;
  }
}