/* =====================================================================
   RESPONSIVE RULES
   Phase 01 — Foundation
   Mobile-first overrides layered on top of style.css.
   ===================================================================== */

/* ---- Tablet and below (<= 991px) ---- */
@media (max-width: 991px) {
    .nav-search { min-width: 160px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Mobile (<= 767px) ---- */
@media (max-width: 767px) {
    .header-topbar { display: none; }

    .nav-links,
    .nav-search { display: none; }

    .navbar { padding: 12px 0; }

    .mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: var(--radius-sm);
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.12);
        color: var(--white);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px 0 24px;
        text-align: left;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    /* Sticky bottom action bar (WhatsApp / Request Quotation / Add to
       Enquiry) becomes visible on product pages — see Phase 08 for the
       page template that populates this. */
    .sticky-actions {
        display: flex;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    body.has-sticky-actions { padding-bottom: 72px; }

    .error-code { font-size: 3rem; }
}

/* ---- Small mobile (<= 420px) ---- */
@media (max-width: 420px) {
    .container { padding: 0 16px; }
    h1 { font-size: 1.75rem; }
}