/* ============================================================
   QSC — Mobile Optimisation (Jul 2026)
   Additive, mobile-only deepening pass. Every rule is scoped
   inside @media (max-width: …) queries so desktop rendering
   is completely unchanged. Loaded after all page stylesheets.
   ============================================================ */

@media (max-width: 767px) {

    /* --- 1. iOS auto-zoom guard ---------------------------------
       Safari zooms the page when a focused input has a computed
       font-size below 16px. Several inputs (promo code, email
       capture popup, affiliate modal, header search, pay-page
       crypto guide) use 14px — some via inline styles, hence the
       !important. Scoped to text-entry controls only. */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* --- 2. Touch targets ---------------------------------------- */
    /* Header warehouse selector was ~34px tall */
    .warehouse-btn {
        min-height: 44px;
        padding: 8px 12px;
    }
    /* Copy buttons inside the discount-code / affiliate cards */
    .email-capture-copy-btn {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }
    /* Pay-page tap-to-copy crypto address rows (~30px tall before) */
    .pay-crypto-addr {
        min-height: 44px;
        padding: 12px 8px;
    }
    /* Trust-bar links are tappable — give them breathing room */
    a.trust-bar-item {
        padding: 4px 2px;
    }
    /* Mobile menu links: guarantee 44px rows */
    .mobile-nav-links a {
        min-height: 44px;
    }

    /* --- 3. Toast vs. bottom nav ---------------------------------
       Both the notification toast and the mobile bottom nav anchor
       to the bottom edge; lift the toast above the 64px nav bar
       (plus iPhone home-indicator safe area). */
    .notification-toast {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* --- 4. Modal bottom sheets: dynamic viewport + safe area ---- */
    .modal-content {
        max-height: 92dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .checkout-modal-content {
        max-height: 100dvh;
    }
    .checkout-modal .modal-body {
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }
    /* Mobile slide-in menu: keep footer links clear of home bar */
    .mobile-menu {
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    }

    /* --- 5. Long unbroken text overflow guards ------------------- */
    .cart-item-name,
    .cart-item-spec,
    .checkout-item-name,
    .checkout-item-spec,
    .search-result-name,
    .toast-message,
    .toast-subtitle,
    #confirmShippingAddress,
    #confirmOrderItems {
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 0;
    }
    /* Keep the flexible cart/checkout columns shrinkable so a long
       product name never pushes the price off-screen */
    .cart-item-info,
    .checkout-item-info,
    .search-result-info {
        min-width: 0;
    }

    /* --- 6. Search dropdown: cap to visible viewport -------------- */
    .search-dropdown {
        max-height: 60dvh;
    }

    /* --- 7. Report lightbox tuning ------------------------------- */
    .report-lightbox {
        padding: 0.75rem;
    }
    .report-lightbox-img {
        max-width: 94vw;
        max-height: 68dvh;
    }
    .report-lightbox-close {
        top: calc(0.75rem + env(safe-area-inset-top, 0px));
        right: 0.75rem;
    }
    .report-lightbox-verify {
        min-height: 44px;
    }

    /* --- 8. Payment page (pay.ejs) ------------------------------- */
    .pay-btn {
        min-height: 52px;
    }
    .pay-contact-btn {
        min-height: 44px;
    }
    .pay-crypto-addr {
        -webkit-user-select: all;
        user-select: all;
    }
}

@media (max-width: 479px) {

    /* --- 9. Checkout shipping-method cards -----------------------
       Standard / Express sit side-by-side in an inline-styled flex
       row and get cramped on narrow phones — stack them. */
    div:has(> .shipping-option) {
        flex-direction: column;
    }
    .shipping-option {
        width: 100%;
    }

    /* --- 10. Email capture / affiliate popup: stack input + button */
    #emailCaptureForm > div[style*="display:flex"] {
        flex-direction: column;
    }
    #emailCaptureForm .btn {
        width: 100%;
    }

    /* Discount-code card: let long codes wrap instead of overflowing */
    .email-capture-code-card {
        flex-wrap: wrap;
    }
    .email-capture-code-card span {
        overflow-wrap: anywhere;
    }

    /* Warehouse grid cards comfortable on small screens */
    #warehouseGrid > *,
    #firstVisitWarehouseGrid > * {
        min-height: 44px;
    }
}

@media (max-width: 359px) {

    /* --- 11. Ultra-narrow devices -------------------------------- */
    .trust-bar-inner {
        gap: 0.5rem;
    }
    .warehouse-btn {
        padding: 8px 8px;
    }
    .report-lightbox-img {
        max-width: 96vw;
    }
}