/* ============================================================
   ===== Mobile Optimisation (Jul 2026) =====
   Additive stylesheet, loaded LAST. Every rule is scoped inside
   a max-width media query so desktop rendering is unchanged.
   ============================================================ */

@media (max-width: 767px) {
    /* --- 1. Prevent iOS auto-zoom: keep every form control at >= 16px ---
       (mobile search bars were 14-15px; at <=374px html drops to 14px
       making 1rem checkout inputs 14px — both trigger Safari zoom) */
    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;
    }
    .mobile-search-bar input,
    .mobile-menu-search-form input,
    .header-search-input,
    .promo-code-row input {
        font-size: 16px;
    }
    /* Inline-styled inputs need !important to beat style="" */
    #emailCaptureInput,
    #affiliateNameInput,
    #affiliateEmailInput {
        font-size: 16px !important;
    }
    /* Class-only selectors elsewhere out-specify the blanket rule above:
       .sort-select (products.css sets 0.8125-0.875rem on a <select>) and
       .review-modal-body input[type="text"] (reviews.css sets 0.875rem)
       would still trigger iOS zoom — pin them to 16px explicitly. */
    select.sort-select,
    .review-modal-body input[type="text"] {
        font-size: 16px;
    }
    /* Keep wholesale OTP digits large (restore after blanket rule above) */
    .ws-otp-inputs input {
        font-size: 1.25rem;
    }

    /* --- 2. Horizontal overflow guard ---
       overflow-x: clip does NOT create a scroll container, so the
       sticky header keeps working (unlike overflow-x: hidden). */
    body {
        overflow-x: clip;
    }
    #main-content img {
        max-width: 100%;
        height: auto;
    }
    /* Any table inside page content scrolls sideways instead of
       stretching the page (QC report tables, spec tables). */
    #main-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Long unbroken strings (CAS numbers, hashes, emails) wrap */
    #main-content code,
    #main-content .cas-number {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* --- 3. Touch targets: 44px minimum --- */
    .modal-close,
    .mobile-menu-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    .toast-close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .toast-action-btn,
    .email-capture-copy-btn {
        min-height: 44px;
    }
    .header-search-btn,
    .mobile-search-bar button,
    .mobile-menu-search-form button {
        min-width: 48px;
        min-height: 44px;
    }
    .mobile-menu-link,
    .bottom-nav-item {
        min-height: 48px;
    }
    .utility-bar .crypto-badge {
        min-height: 24px;
        display: inline-flex;
        align-items: center;
    }

    /* --- 4. Generic modals: never taller than the *visual* viewport ---
       (90vh overflows behind the mobile URL bar; cart/checkout modals
       already go full-screen in cart.css and are excluded here) */
    .modal:not(.cart-modal):not(.checkout-modal) .modal-content {
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .cart-modal .modal-body,
    .checkout-modal .modal-body {
        overscroll-behavior: contain;
    }

    /* --- 5. Pay page: crypto address readable + comfortable to tap
       (was shrunk to 0.65rem; !important needed to beat inline style) --- */
    .pay-crypto-addr {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        padding: 10px 12px !important;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        background: rgba(0, 0, 0, 0.035);
    }

    /* --- 6. Report lightbox: fit small screens incl. notch safe areas --- */
    .report-lightbox {
        padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem
                 max(0.75rem, env(safe-area-inset-bottom));
    }
    .report-lightbox-img {
        max-width: 96vw;
        max-height: 68dvh;
    }
    .report-lightbox-close {
        top: max(0.75rem, env(safe-area-inset-top));
        right: 0.75rem;
    }

    /* --- 7. Mobile menu drawer: respect safe areas, smooth scroll --- */
    .mobile-menu {
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    /* --- 8. Checkout niceties --- */
    /* Shipping method cards: readable text, comfortable tap area */
    .shipping-option {
        min-height: 64px;
    }
    /* Country select: don't let long names overflow the two-col row */
    .form-group select {
        max-width: 100%;
        text-overflow: ellipsis;
    }
    /* Order notes textarea shouldn't be resizable sideways */
    .form-group textarea {
        resize: vertical;
        max-width: 100%;
    }
}

@media (max-width: 419px) {
    /* Stack the two shipping-method cards on narrow phones —
       side by side they drop below ~165px each and the Express
       card's text becomes unreadable. Requires flex-wrap on the
       .shipping-method-row container (set in header.ejs). */
    .shipping-method-row .shipping-option {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

@media (max-width: 479px) {
    /* Email capture / affiliate modals: stacked input + button */
    #emailCaptureForm > div[style*="display:flex"] {
        flex-direction: column;
    }
    #emailCaptureForm .btn {
        width: 100%;
    }
    /* Telegram modal CTA fills width for an easy tap */
    #telegramRepsModal .modal-body > a {
        display: flex !important;
        width: 100%;
        justify-content: center;
    }
}