/**
 * PPE Theme — main.css
 * Supplemental responsive & mobile-specific fixes (v10.1)
 * ─────────────────────────────────────────────────────────
 * These rules sit AFTER style.css so they can safely override
 * anything that causes layout problems on mobile without
 * touching the primary stylesheet.
 */

/* ── 1. Prevent horizontal scroll on all devices ──────────────────────────── */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── 2. Ensure all containers cannot exceed viewport ──────────────────────── */
.container {
  max-width: 100%;
}

/* ── 3. Tables — horizontal scroll within container instead of page scroll ── */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
  -webkit-overflow-scrolling: touch;
}

/* Except explicitly excluded tables (mega menu, admin) */
.mega-menu table,
#wpadminbar table {
  display: table;
  overflow-x: visible;
}

/* ── 4. Embeds / iframes ──────────────────────────────────────────────────── */
iframe,
embed,
object,
video {
  max-width: 100%;
}

/* ── 5. Mobile-specific section fixes ────────────────────────────────────── */
@media (max-width: 480px) {

  /* Trust bar: 1 column on very small phones */
  .trust-grid {
    grid-template-columns: 1fr !important;
  }

  /* Product cards: smaller text so 2-up grid fits */
  .pcp-title {
    font-size: 0.82rem;
  }

  /* Shop product grid: 2 up minimum */
  .shop-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero headline */
  .hero-title {
    font-size: 1.6rem;
  }

  /* Stat/number grid */
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Quote cart form fields */
  .ppe-qcart-form-row {
    flex-direction: column;
  }

  /* Single-product page chip buttons: allow wrapping */
  .p41-chips {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Shipping-info template: zones table scroll */
  .sp-zones-table {
    font-size: 0.8rem;
  }

  /* Price filter inputs: prevent overflow */
  .price-filter-form,
  .price-inputs {
    width: 100%;
  }
  .price-input-wrap input {
    max-width: 100%;
  }
}

@media (max-width: 768px) {

  /* Breadcrumb: allow wrapping */
  .breadcrumb {
    flex-wrap: wrap;
    font-size: 0.78rem;
  }

  /* Category hero banner: smaller text */
  .cat-hero-title {
    font-size: 1.5rem;
  }

  /* B2B form: stack fields */
  .b2b-form-row {
    grid-template-columns: 1fr !important;
  }

  /* Shop toolbar: wrap on mobile */
  .shop-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Pagination: smaller gap */
  .woocommerce-pagination ul {
    gap: 4px;
  }

  /* Footer bottom: stack links */
  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Quote cart: full width */
  .ppe-qcart-inner {
    grid-template-columns: 1fr !important;
  }

  /* Contact form layout */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {

  /* Show mobile filter button */
  .mobile-filter-btn {
    display: flex !important;
  }

  /* Hide desktop sidebar in shop */
  .shop-sidebar {
    display: none;
  }
  .shop-sidebar.sidebar-open {
    display: block;
  }

  /* Full-width product grid without sidebar */
  .shop-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. Location/country pages: mobile improvements ──────────────────────── */
@media (max-width: 768px) {
  .loc-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .loc-hero-inner {
    grid-template-columns: 1fr;
  }
  .loc-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 7. Certifications / about page: responsive ───────────────────────────── */
@media (max-width: 640px) {
  .cert-logos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 8. Fix mega menu not showing on wider tablets ────────────────────────── */
@media (min-width: 769px) {
  .main-nav {
    display: flex !important;
  }
}