/* ============================================================
   mobile-fixes.css  —  loaded AFTER style.css
   Makes every page fit and read well on phones & tablets.
   Added Jun 2026 (responsive pass).
   ============================================================ */

/* 1. Kill horizontal scroll caused by off-canvas drawers / overlays
      (the cart sidebar lives at right:-400px and was widening the page,
      pushing the footer & nav off-screen on every page). */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 2. Media never overflows its container */
img, video, svg, iframe, table {
    max-width: 100%;
}
img, video { height: auto; }

/* 3. Long words / URLs wrap instead of forcing width */
p, li, a, h1, h2, h3, h4, span, td, th {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 4. Vehicle-detail image gallery: let the grid column shrink so the
      thumbnail strip's own overflow-x:auto actually engages (mobile grid
      uses 1fr whose implicit min-width:auto = min-content otherwise). */
.vd-layout, .vd-layout > * { min-width: 0; }
.vd-thumbstrip { min-width: 0; width: 100%; }
.vd-gallery, .vd-main-img, .vd-main-img img { max-width: 100%; }

/* ---------- Tablet & below (<= 1024px) ---------- */
@media (max-width: 1024px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Phones (<= 600px) ---------- */
@media (max-width: 600px) {
    /* Comfortable side padding, never edge-to-edge text */
    .container { padding-left: 0.9rem; padding-right: 0.9rem; }

    /* Tap-friendly, full-width primary actions inside forms/cards */
    .btn,
    button.btn,
    .btn-primary,
    .btn-dark,
    .btn-outline {
        min-height: 44px;
    }
    form .btn,
    .vd-form .btn,
    .checkout-form .btn,
    .contact-form .btn,
    .product-card-actions .btn {
        width: 100%;
    }

    /* The cart drawer should never be wider than the screen */
    .cart-sidebar { width: 100%; right: -100%; max-width: 100vw; }

    /* Stack any 2-up rows the templates use inline */
    .form-row,
    .vd-form .form-row { grid-template-columns: 1fr !important; }

    /* Headings that are huge on desktop scale down */
    h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    h2 { font-size: clamp(1.35rem, 6vw, 1.9rem); }

    /* Footer: single column, readable */
    .footer-grid { grid-template-columns: 1fr !important; gap: 1.75rem; }
    .footer-bottom { flex-direction: column; gap: 0.6rem; text-align: center; }
    .footer-bottom-links { flex-wrap: wrap; justify-content: center; }

    /* Wide spec / data tables scroll inside their own box */
    .table-wrap, .responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 5. Generic guard: any element that tries to exceed the viewport
      width is clamped (belt-and-braces for ad-hoc inline widths). */
@media (max-width: 600px) {
    .hero, .section, .page-header, .vd-layout, .shop-grid,
    .product-grid, .vehicle-grid, .services-grid { max-width: 100vw; }
}