/* =========================================================
   MyRobo — sitewide mobile/responsive fixes.
   Loaded LAST (end of <body>, see partials/footer.php) so it
   wins cascade ties against the per-page <style> blocks that
   sit earlier in the document — without needing !important
   everywhere or having to duplicate rules into every view.
   ========================================================= */

/* Never allow ANY element to force horizontal page scroll on
   a phone — a safety net on top of the one already in
   partials/header.php. */
/* NOTE: deliberately NOT setting overflow-x here — any overflow
   value other than "visible" on html/body breaks position:sticky
   for the site header (.site-topbar). The safety net below is
   scoped to actual overflow-prone elements instead. */
img, video, iframe { max-width: 100%; }

/* -----------------------------------------------------------
   Kit / product cards — used on Kits listing, Wishlist,
   "Related Kits" blocks, etc. (".kit-card .body").
   The action row can hold 2–3 buttons (View / Add / Remove);
   on a ~160px-wide phone card that's too tight to sit on one
   line, so let it wrap into two neatly instead of squeezing
   or overflowing.
----------------------------------------------------------- */
@media (max-width: 420px) {
    .kit-card .body .d-flex.gap-2 {
        flex-wrap: wrap;
    }
    .kit-card .body .d-flex.gap-2 > .flex-fill {
        flex: 1 1 100%;
    }
    .kit-card .body .d-flex.gap-2 > a.btn-sm,
    .kit-card .body .d-flex.gap-2 > button.btn-sm {
        flex: 1 1 auto;
    }
}

/* Kit grids default to 2-up on phones (col-6) via Bootstrap,
   which is fine down to ~380px; below that, a single column
   reads much better than two very cramped cards. */
@media (max-width: 380px) {
    .kit-card { font-size: .95rem; }
}

/* -----------------------------------------------------------
   Kit details — purchase row (qty input + Add to Cart +
   Buy Now + wishlist icon). Four controls in one row is too
   tight below ~576px, so stack them.
----------------------------------------------------------- */
@media (max-width: 576px) {
    .purchase-actions {
        flex-wrap: wrap;
    }
    .purchase-actions #qtyInput {
        width: 100% !important;
        order: 1;
    }
    .purchase-actions #addToCartBtn {
        order: 2;
        flex: 1 1 calc(50% - 8px);
    }
    .purchase-actions #buyNowBtn {
        order: 3;
        flex: 1 1 calc(50% - 8px);
    }
    .purchase-actions #wishlistBtn {
        order: 4;
    }
}

/* -----------------------------------------------------------
   Cart & Wishlist line items — tighten spacing so the
   quantity form + line total + remove icon don't feel cramped
   on narrow phones.
----------------------------------------------------------- */
@media (max-width: 400px) {
    .cart-line-form .form-control { width: 56px !important; }
    .cart-line-form .btn { padding-left: 8px; padding-right: 8px; font-size: .8rem; }
}

/* Admin-panel table responsiveness lives in assets/css/admin.css
   (and its inline safety-net copy in admin/layouts/main.php),
   since the admin panel is a separate layout from the public
   site that this stylesheet covers. */