/* ================================================================
   RESPONSIVE FIXES  —  loaded after style_new.css
   Targeted overrides only; no layout regressions on desktop.
   ================================================================ */

/* ── 1. GLOBAL: kill text-align:justify on phones ───────────────
   style_new.css applies justify to .about_text, .pp_text, .faqa,
   .cate_table_single, .description_medical, etc. on every screen.
   Justify creates jagged gaps on narrow viewports.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    p,
    li,
    td,
    .about_text,
    p.about_text,
    .description_medical,
    .faqa,
    .cate_table_single,
    .text_cate_single,
    .pdtext,
    .catalog_text,
    li.Features_text_ineer,
    p.polices_text,
    .product-detail p {
        text-align: left !important;
    }
}

/* ── 2. .wrapper fixed 380 px width ─────────────────────────────
   Breaks on 320-375 px phones. Make it fluid with a max-width cap.
   ────────────────────────────────────────────────────────────── */
.wrapper {
    width: 100% !important;
    max-width: 380px !important;
    box-sizing: border-box !important;
}

@media (max-width: 420px) {
    .wrapper form {
        padding: 10px 16px 40px !important;
    }
}

/* ── 3. .img_bg fixed 750 px height (product-detail hero) ───────
   On 360-px phones that would be >2× the viewport height.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .img_bg {
        height: 420px !important;
    }
}

@media (max-width: 767.98px) {
    .img_bg {
        height: 320px !important;
    }
}

@media (max-width: 575.98px) {
    .img_bg {
        height: 220px !important;
    }
}

/* ── 4. Images with hard-coded px dimensions ────────────────────
   .img-showcase img  400×400, .product-img a img  120×130,
   .product_img img   190×190 — all overflow on phones.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .img-showcase img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .product-img a img,
    .product-imgg a img {
        width: 100px !important;
        height: 100px !important;
    }
}

@media (max-width: 575.98px) {
    .product_img img,
    img.img_order {
        width: 130px !important;
        height: 130px !important;
    }

    /* Prevent any image from breaking the viewport */
    img {
        max-width: 100%;
    }
}

/* ── 5. .psdi  75 px side padding — too wide on phones ──────────
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .psdi {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

@media (max-width: 575.98px) {
    .psdi {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ── 6. .compare-section fixed top:200px right:20px ─────────────
   Off-screen or blocking content on small phones.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .compare-section {
        top: auto !important;
        bottom: 90px !important;
        right: 8px !important;
        z-index: 998 !important;
    }
}

/* ── 7. Order / booking track images fixed widths ───────────────
   .ordertrack_img 500px, .orderdetail_img 400px
   ────────────────────────────────────────────────────────────── */
.ordertrack_img,
.orderdetail_img,
.booking_track_img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* ── 8. .section-description — the section page description div ─
   Sits inside a <div class="pp_text section-description">.
   The existing rule hides *p*.pp_text on ≤991 px; a div is safe,
   but we force visible + good typography for every screen.
   ────────────────────────────────────────────────────────────── */
.section-description {
    display: block !important;
    text-align: left !important;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 28px;
}

@media (max-width: 767.98px) {
    .section-description {
        padding: 0 4px;
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* Make section-description cards stack nicely on mobile */
    .section-description .row {
        --bs-gutter-x: 12px;
    }
}

@media (max-width: 575.98px) {
    .section-description [class*="col-lg"],
    .section-description [class*="col-sm"] {
        margin-bottom: 12px;
    }
}

/* ── 9. Contact form padding on mobile ──────────────────────────
   .contact__form already goes width:100% at ≤991px;
   reduce inner padding so it doesn't feel cramped.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .contact__form {
        padding: 20px 16px !important;
    }
}

/* ── 10. Product-detail .main_daetils width:70% ─────────────────
   On a 360-px screen 70% ≈ 252 px which crowds content.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .main_daetils {
        width: 100% !important;
    }
}

/* ── 11. Scroll tables on mobile instead of overflowing ─────────
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    table.table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 12. .tarking_box heavy margin at 576 px ────────────────────
   ────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .tarking_box {
        margin: 12px 6px 0 !important;
    }

    .order_pointer.mt-2 {
        font-size: 13px !important;
    }
}

/* ── 13. Product card heights — let content dictate height ───────
   Fixed heights clip text/buttons on small screens.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .single-product,
    .single-producting,
    .single-producting1 {
        height: auto !important;
        min-height: unset !important;
    }
}

/* ── 14. Section page: show description on tablet/mobile ─────────
   The medical_section heading and description area.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    section.medical_section p.pp_text {
        display: block !important;
    }

    .pageheading h1 {
        font-size: 22px !important;
    }
}

@media (max-width: 575.98px) {
    .pageheading h1 {
        font-size: 20px !important;
    }
}

/* ── 15. Search input bar mobile usability ───────────────────────
   ────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .input-group.searchInput {
        margin: 6px 0 !important;
    }

    .searchInput input.form-control {
        font-size: 14px !important;
        height: 42px !important;
    }

    .searchInput button {
        height: 42px !important;
    }
}

/* ── 16. Off-canvas / hamburger menu — smooth slide ─────────────
   Add transition if missing.
   ────────────────────────────────────────────────────────────── */
.off_canvas_menu_wrapper {
    transition: margin-left 0.3s ease, transform 0.3s ease !important;
}

/* ── 17. Overflow safety net — stop horizontal scroll ───────────
   Some fixed-px elements still escape; catch them here.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    body {
        overflow-x: hidden;
    }

    .container,
    .container-fluid {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ── 18. Homepage about/intro paragraph justify fix ─────────────
   This text sits below the hero on mobile and looks ragged.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .about_text,
    p.about_text,
    .home-about p,
    .intro_text p,
    .home_desc p {
        text-align: left !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
}

/* ── 19. Footer on mobile — stack columns cleanly ───────────────
   ────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .footer-section .footer-title {
        margin-top: 20px !important;
    }

    .footer-section p {
        font-size: 13px !important;
        text-align: left !important;
    }

    .footer-bottom {
        font-size: 12px !important;
        padding: 10px !important;
        text-align: center !important;
    }
}

/* ── 20. Catalog / product-list grid on mobile ───────────────────
   ────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .grid-cate {
        columns: 1 !important;
    }

    .cta-container {
        columns: 1 !important;
    }

    .pf_products_grid {
        columns: 1 !important;
    }
}

/* ── 21. product-imgs fixed 440 px at 576-767 px ────────────────
   ────────────────────────────────────────────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {
    .product-imgs {
        width: 100% !important;
        max-width: 440px !important;
    }
}

/* ── 22. .med_bg consistent across breakpoints ───────────────────
   ────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .med_bg {
        height: auto !important;
        min-height: unset !important;
    }
}