/* ============================================================================
   COSMETICS GROWTH — MOBILE OVERRIDES
   Created: 2026-05-09 via /ui-ux-pro-max audit
   Purpose: Site-wide mobile viewport fixes — touch targets ≥44px, body text
            ≥14px, eyebrow/label legibility, iOS auto-zoom prevention.
   Strategy: Single shared file linked from every user-facing HTML page after
             the page's own stylesheet so cascade + !important win across all
             three site design systems (index, pages.css, bespoke pages).
   ============================================================================ */

@media (max-width: 768px) {
  /* --- 1. NAV (always-visible bar) ------------------------------------- */
  .nav-cta,
  a.nav-cta,
  button.nav-cta {
    min-height: 44px !important;
    padding: 12px 18px !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .nav-hamburger {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }
  .nav-logo {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  .nav-logo-img { height: 32px !important; }
  .nav-links a:not(.nav-cta) { font-size: 14px !important; }

  /* --- 2. MOBILE MENU (overlay drawer) --------------------------------- */
  .mobile-menu-link,
  a.mobile-menu-link {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 18px !important;
    padding: 10px 0 !important;
    line-height: 1.3 !important;
  }
  .mobile-menu-section-title,
  .mobile-menu-label {
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
  }
  .mobile-menu-cta {
    min-height: 52px !important;
    padding: 16px 32px !important;
    font-size: 14px !important;
  }

  /* --- 3. EYEBROWS / SMALL LABELS -------------------------------------- */
  .section-eyebrow,
  .hero-eyebrow,
  .section-label,
  .services-eyebrow,
  [class*="-eyebrow"] {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.4 !important;
  }
  .hero-ai-badge,
  [class*="hero-ai-badge"],
  .ai-active,
  [class*="ai-active"] {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    padding: 4px 10px !important;
    line-height: 1.2 !important;
  }
  .ai-pulse {
    min-width: 5px !important;
    min-height: 5px !important;
  }

  /* --- 4. HERO --------------------------------------------------------- */
  .hero-sub,
  [class*="hero-sub"] {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  .hero-bullets,
  .hero-bullet,
  .hero-spec-row span,
  .hero-spec-item {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .tg-item,
  .hero-trust-strip .tg-item {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  .hero-cta-primary,
  .hero-cta-secondary,
  a.hero-cta,
  [class*="hero-cta"] {
    min-height: 52px !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    letter-spacing: 0.06em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .shiny-cta,
  a.shiny-cta,
  button.shiny-cta {
    min-height: 56px !important;
    padding: 18px 28px !important;
    font-size: 15px !important;
    letter-spacing: 0.08em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .btn-ghost,
  a.btn-ghost {
    min-height: 52px !important;
    padding: 16px 22px !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
  }
  .scroll-hint-text {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }

  /* --- 5. SECTION TITLES & SUBS ---------------------------------------- */
  .section-title,
  .section-heading {
    font-size: clamp(28px, 8.5vw, 36px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
  }
  .section-sub,
  .section-desc {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
  .page-hero h1 { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.1 !important; }
  .page-hero p { font-size: 16px !important; line-height: 1.6 !important; }

  /* --- 6. CTAs (generic) ----------------------------------------------- */
  .btn-cta,
  a.btn-cta,
  button.btn-cta {
    min-height: 48px !important;
    padding: 14px 28px !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
  }
  .stack-card-btn,
  a.stack-card-btn {
    min-height: 48px !important;
    padding: 14px 22px !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- 7. FEATURE / CASE / BLOG CARDS ---------------------------------- */
  .feature-card h3,
  .case-card-body h3,
  .blog-card-body h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }
  .feature-card p,
  .case-card-body p,
  .blog-card-body p { font-size: 15px !important; line-height: 1.6 !important; }
  .case-stat-value,
  .stat-block .stat-value { font-size: 28px !important; }
  .case-stat-label,
  .stat-block .stat-label,
  .stat-lbl,
  .ai-stat-lbl { font-size: 12px !important; letter-spacing: 0.1em !important; }
  .blog-card-tag,
  .article-tag { font-size: 11px !important; letter-spacing: 0.16em !important; }
  .case-card-link,
  .blog-card-link {
    font-size: 14px !important;
    min-height: 40px !important;
    padding: 8px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* --- 8. TESTIMONIALS ------------------------------------------------- */
  .testimonial-text { font-size: 16px !important; line-height: 1.55 !important; }
  .testimonial-author { font-size: 14px !important; }
  .testimonials-wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* --- 9. FAQ ---------------------------------------------------------- */
  .faq-q,
  .faq-question {
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 14px 0 !important;
    line-height: 1.4 !important;
  }
  .faq-a,
  .faq-answer p { font-size: 15px !important; line-height: 1.6 !important; }

  /* --- 10. PROSE / BLOG BODY ------------------------------------------- */
  .prose p,
  .prose li,
  .policy-content p,
  .policy-content li,
  .terms-content p,
  .terms-content li { font-size: 16px !important; line-height: 1.7 !important; }
  .prose h2,
  .policy-content h2,
  .terms-content h2 { font-size: 24px !important; line-height: 1.2 !important; }
  .prose h3,
  .policy-content h3,
  .terms-content h3 { font-size: 19px !important; line-height: 1.25 !important; }
  .prose blockquote { font-size: 16px !important; padding: 16px 20px !important; }
  .toc-title { font-size: 11px !important; letter-spacing: 0.16em !important; }
  .toc a { font-size: 15px !important; }
  .article-meta-item { font-size: 13px !important; }

  /* --- 11. PROCEDURE CARDS --------------------------------------------- */
  .procedure-card-fee { font-size: 13px !important; }
  .procedure-card-cta {
    font-size: 13px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* --- 12. DISPUTES SECTION -------------------------------------------- */
  .dispute-quote { font-size: 13px !important; line-height: 1.55 !important; }

  /* --- 13. SERVICES STACK SUB ------------------------------------------ */
  .services-stack-sub,
  [class*="services-stack-sub"] { font-size: 14px !important; line-height: 1.5 !important; }

  /* --- 14. FOOTER ------------------------------------------------------ */
  .social-icon,
  a.social-icon {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .footer-link,
  .footer a,
  .footer-nav a,
  .footer-link-group a,
  .footer-nav-col a,
  ul.footer-nav-list li a {
    min-height: 44px !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
  }
  .footer-nav-label {
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
  }
  .footer-bottom p,
  .footer-legal a { font-size: 12px !important; }

  /* --- 15. BACK LINK --------------------------------------------------- */
  .back-link {
    min-height: 44px !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* --- 16. STATS ROW --------------------------------------------------- */
  .stats-row { padding: 24px 16px !important; }

  /* --- 17. BADGES ------------------------------------------------------ */
  .badge { font-size: 12px !important; letter-spacing: 0.1em !important; }

  /* --- 18. INPUTS — PREVENT iOS ZOOM ON FOCUS -------------------------- */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* --- 19. ROW GAP SAFETY (8px+ between adjacent CTAs) ----------------- */
  .hero-cta-row,
  .button-row,
  [class*="cta-row"] { gap: 12px !important; }

  /* --- 20. NO HORIZONTAL SCROLL ---------------------------------------- */
  html, body { overflow-x: hidden !important; -webkit-text-size-adjust: 100% !important; }
}

/* --- 21. SMALL PHONES (≤380px iPhone SE / mini) ------------------------ */
@media (max-width: 380px) {
  .section-title,
  .section-heading { font-size: 26px !important; }
  .hero-headline,
  h1.hero-h1 { font-size: clamp(34px, 11vw, 42px) !important; line-height: 1.05 !important; }
  .nav-cta {
    padding: 10px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
  }
  .mobile-menu-link { font-size: 16px !important; }
}

/* --- 22. RESPECT REDUCED-MOTION (a11y, applies all viewports) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}