/* OmniVerve Mobile CSS — v8 */

@media (max-width: 1024px) {

  /* ── NAV LOGO ── */
  .nav-logo img {
    height: 48px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ── HERO LOGO ENTFERNEN ── */
  #hero img,
  #hero .hero-logo,
  #hero .hero-brand,
  #hero .hero-wordmark,
  #hero picture,
  .hero-content img,
  .hero-content picture {
    display: none !important;
  }

  /* ── HERO HEADLINE (tablet) ── */
  .hero-h1,
  .page-h1,
  .news-h1,
  .page-hero-title,
  .aff-hero-content h1,
  .reg-hero-inner h1 {
    font-size: clamp(2.8rem, 10vw, 5rem) !important;
    line-height: 1.0 !important;
  }

  /* ── HERO BUTTONS ── */
  .hero-ctas {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── HERO PADDING ── */
  .hero-content {
    padding-block: calc(var(--nav-h) + 3rem) 4rem !important;
  }

  /* ── STATS BAR ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stat-cell {
    padding: 1.75rem 1rem !important;
  }

  .stat-number {
    font-size: 2rem !important;
  }

  .stat-label {
    font-size: clamp(0.8rem, 3vw, 0.9rem) !important;
    color: rgba(248,248,248,0.75) !important;
    letter-spacing: 0.1em !important;
  }

  /* ── GRIDS ── */
  .products-grid,
  .news-grid,
  .features-grid,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── CONTAINER ── */
  .container {
    padding-inline: 1.25rem !important;
  }

  /* ── SECTIONS ── */
  #products, #shop, #about,
  #newsletter, section {
    padding-block: 3.5rem !important;
  }

  /* ── ABOUT ── */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* ── FOOTER ── */
  .footer-top {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .footer-nav {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* ── NEWSLETTER FORM ── */
  #newsletter-form > div {
    flex-direction: column !important;
  }

  #newsletter-form input,
  #newsletter-form button {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* ── FORMS ── */
  input, textarea, select {
    font-size: 16px !important;
  }

  .form-row, .form-grid {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .form-row > *, .form-grid > * {
    width: 100% !important;
  }

  /* ── CHECKBOX + LABEL PAIRS ── */
  .form-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .form-check input[type="checkbox"] {
    flex-shrink: 0 !important;
    margin-top: 0.2rem !important;
    width: 18px !important;
    height: 18px !important;
  }

  .form-check span {
    flex: 1 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* ── HEADLINES ── */
  h2 { font-size: clamp(1.5rem, 5vw, 2.5rem) !important; }
  h3 { font-size: clamp(1.1rem, 3vw, 1.5rem) !important; }

  /* ── TWO COLUMN ── */
  .about-split, .two-col,
  [class*="two-col"], [class*="split"] {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  /* ── PRICING ── */
  .pricing-grid, [class*="pricing"] {
    grid-template-columns: 1fr !important;
  }

  /* ── FILTER ── */
  .filter-bar, [class*="filter-bar"] {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* ── PROCESS ── */
  .process-steps, [class*="steps"],
  [class*="timeline"] {
    flex-direction: column !important;
  }

  /* ── CTA BAND ── */
  [class*="cta-band"], .cta-band-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }

  /* ── TABLES ── */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── BUTTONS ── */
  .btn { min-height: 48px !important; }
}

/* ── Mobile: ≤768px ── */
@media (max-width: 768px) {

  /* ── NAV TOGGLE ── */
  .nav-links  { display: none !important; }
  .nav-burger { display: flex !important; }

  /* ── NAV LOGO ── */
  .nav-logo img {
    height: 40px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ── HERO HEADLINES (all page types) ── */
  .hero-h1,
  .page-h1,
  .news-h1,
  .page-hero-title,
  .aff-hero-content h1,
  .reg-hero-inner h1 {
    font-size: clamp(2.1rem, 9.5vw, 2.75rem) !important;
    line-height: 1.05 !important;
  }

  /* ── STATS LABEL ── */
  .stat-label {
    font-size: clamp(0.8rem, 3vw, 0.9rem) !important;
    letter-spacing: 0.1em !important;
  }

  /* ── MOBILE SIDEBAR NAV ── */
  .mobile-menu-overlay nav {
    gap: 0.25rem !important;
    padding: 1.25rem !important;
  }
  .mobile-menu-overlay a {
    font-size: 1.25rem !important;
    letter-spacing: 0.08em !important;
    padding: 0.65rem 1.5rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── HAMBURGER ICON ── */
  /* Visual: 20×14px icon. Tap target padded to 44×44px for accessibility. */
  .nav-burger {
    padding: 15px 12px !important;
    gap: 4px !important;
  }
  .nav-burger span {
    width: 20px !important;
  }
  /* Adjust X-close animation: gap=4px + height=2px = 6px translateY */
  .nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }
}

/* ── Extra-small: ≤480px ── */
@media (max-width: 480px) {
  .stat-number { font-size: 1.8rem !important; }

  .container { padding-inline: 1rem !important; }

  h2 { font-size: clamp(1.3rem, 6vw, 1.8rem) !important; }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}