/* IndoSurgicals Mobile Refinement Patch 2.17
 * Products Directory — deterministic full card system
 * --------------------------------------------------------------------------
 * IMPORTANT: this file is loaded from /products.php AFTER:
 *   products-directory-modern.css
 *   desktop-product-discovery.css
 *   indos-root-pages.css
 * That ordering is intentional. Older <=680px rules flatten directory sections
 * back to edge-to-edge blocks; this final layer restores the approved mobile
 * card language without touching desktop >=901px.
 */

@media only screen and (max-width: 900px) {
    html body.isp-root-products-body .isp-products-directory-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 6px 0 16px !important;
        background: transparent !important;
    }

    html body.isp-root-products-body .isp-products-directory-shell {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    /* One shared outer-card geometry for every major directory section. */
    html body.isp-root-products-body .isp-products-directory-hero,
    html body.isp-root-products-body .isp-products-directory-search-section,
    html body.isp-root-products-body .isp-products-directory-section,
    html body.isp-root-products-body .isp-products-directory-enquiry {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border: 1px solid #e1e9eb !important;
        border-left-width: 1px !important;
        border-right-width: 1px !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 5px 16px rgba(31, 58, 75, .04) !important;
        overflow: hidden !important;
    }

    html body.isp-root-products-body .isp-products-directory-hero::before,
    html body.isp-root-products-body .isp-products-directory-enquiry::before {
        content: none !important;
        display: none !important;
    }

    /* Hero — same density as the refined root/home cards. */
    html body.isp-root-products-body .isp-products-directory-hero {
        padding: 16px 13px 15px !important;
        gap: 15px !important;
    }

    html body.isp-root-products-body .isp-products-directory-hero-copy,
    html body.isp-root-products-body .isp-products-directory-trust,
    html body.isp-root-products-body .isp-products-directory-section-heading > div,
    html body.isp-root-products-body .isp-products-directory-search-copy {
        min-width: 0 !important;
    }

    html body.isp-root-products-body .isp-products-directory-eyebrow {
        margin-bottom: 5px !important;
    }

    html body.isp-root-products-body .isp-products-directory-hero h1 {
        margin: 0 !important;
    }

    html body.isp-root-products-body .isp-products-directory-hero-copy > p {
        margin-top: 12px !important;
    }

    html body.isp-root-products-body .isp-products-directory-meta {
        margin-top: 15px !important;
    }

    html body.isp-root-products-body .isp-products-directory-actions {
        margin-top: 17px !important;
    }

    html body.isp-root-products-body .isp-products-directory-trust {
        gap: 7px !important;
    }

    html body.isp-root-products-body .isp-products-directory-trust > div {
        border-color: #dce7e8 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    /* Search becomes another clean white card, not a separate mint panel. */
    html body.isp-root-products-body .isp-products-directory-search-section {
        padding: 15px 13px !important;
        gap: 13px !important;
    }

    html body.isp-root-products-body .isp-products-directory-search-copy > span {
        margin-bottom: 5px !important;
    }

    html body.isp-root-products-body .isp-products-directory-search-copy p {
        margin-top: 6px !important;
    }

    html body.isp-root-products-body .isp-products-directory-search-box input {
        background: #ffffff !important;
        border-color: #d5e2e4 !important;
        box-shadow: none !important;
    }

    /* Main category directory card. */
    html body.isp-root-products-body .isp-products-directory-section {
        padding: 15px 12px 13px !important;
    }

    html body.isp-root-products-body .isp-products-directory-section-heading {
        margin-bottom: 14px !important;
        padding-bottom: 12px !important;
        gap: 10px !important;
        border-bottom-color: #e6edef !important;
    }

    html body.isp-root-products-body .isp-products-directory-grid {
        gap: 10px !important;
    }

    /* Category cards remain cards, but use the same quieter geometry. */
    html body.isp-root-products-body .isp-directory-card {
        border: 1px solid #dfe8ea !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: 0 3px 12px rgba(31, 58, 75, .035) !important;
        overflow: hidden !important;
    }

    html body.isp-root-products-body .isp-directory-card-header {
        border-bottom-color: #e8eef0 !important;
    }

    html body.isp-root-products-body .isp-directory-card-image {
        border-color: #e1e9eb !important;
        background: #ffffff !important;
    }

    /* Bottom enquiry remains a page-level action, but visually belongs to the
       same card system and no longer uses the old mint/left-rail treatment. */
    html body.isp-root-products-body .isp-products-directory-enquiry {
        padding: 15px 13px !important;
        gap: 13px !important;
        border-left: 1px solid #e1e9eb !important;
    }

    html body.isp-root-products-body .isp-products-directory-enquiry > div > span {
        margin-bottom: 5px !important;
    }

    html body.isp-root-products-body .isp-products-directory-enquiry p {
        margin-top: 6px !important;
    }

    html body.isp-root-products-body .isp-products-directory-enquiry > a {
        margin-top: 0 !important;
    }
}

@media only screen and (max-width: 430px) {
    html body.isp-root-products-body .isp-products-directory-page {
        padding-top: 5px !important;
    }

    html body.isp-root-products-body .isp-products-directory-shell {
        gap: 8px !important;
    }

    html body.isp-root-products-body .isp-products-directory-hero,
    html body.isp-root-products-body .isp-products-directory-search-section,
    html body.isp-root-products-body .isp-products-directory-section,
    html body.isp-root-products-body .isp-products-directory-enquiry {
        border-radius: 14px !important;
    }

    html body.isp-root-products-body .isp-products-directory-hero {
        padding: 14px 11px !important;
    }

    html body.isp-root-products-body .isp-products-directory-search-section,
    html body.isp-root-products-body .isp-products-directory-enquiry {
        padding: 13px 11px !important;
    }

    html body.isp-root-products-body .isp-products-directory-section {
        padding: 13px 10px 12px !important;
    }

    html body.isp-root-products-body .isp-products-directory-grid {
        gap: 9px !important;
    }

    html body.isp-root-products-body .isp-directory-card {
        border-radius: 13px !important;
    }
}