/**
 * Mobile responsiveness overrides for WooCommerce pages.
 *
 * The shop archive, cart, and checkout templates lay out their main sections
 * with inline `style="display:grid; grid-template-columns:..."` declarations.
 * Inline styles can't carry media queries, so these rules use `!important`
 * inside breakpoints to collapse those fixed multi-column grids on small
 * screens. Loaded as a plain stylesheet (no build step required).
 */

/* ── Tablet / small laptop and below ───────────────────────────── */
@media (max-width: 900px) {
    /* Two-column content/aside splits → single column */
    .av-r-split { grid-template-columns: 1fr !important; gap: 40px !important; }

    /* Shop sidebar (filters) + grid → stack */
    .av-r-shop  { grid-template-columns: 1fr !important; gap: 32px !important; }

    /* Checkout: form + order summary → stack */
    .av-r-checkout { grid-template-columns: 1fr !important; gap: 40px !important; }

    /* Checkout inner field pairs (First/Last name, etc.) → single column */
    .av-r-checkout div[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Product grid: 3 columns → 2 */
    .av-r-pgrid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Phones ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* Tighten oversized section side padding on phones */
    .av-r-section { padding-left: 20px !important; padding-right: 20px !important; }

    /* Cart line item: image | (name + qty + price wrap) */
    .av-r-cartrow {
        grid-template-columns: 72px 1fr !important;
        gap: 8px 16px !important;
    }
}