/* IndoSurgicals Global Mobile Surface Refinement v1.1
 * Mobile Refinement Patch 1.6
 * -------------------------------------------------------------------------
 * Purpose: remove the repeated desktop-style mint hero wash + teal left rail
 * from public pages on mobile/tablet, and establish one clean neutral canvas.
 * All rules are strictly <= 900px. Desktop 901px+ is untouched.
 *
 * This stylesheet intentionally targets only PAGE-IDENTITY/HERO surfaces.
 * It does not flatten semantic cards, callouts, tables, product cards, dark
 * trust panels, forms, CTA buttons, or authored article components.
 */

@media only screen and (max-width: 900px) {
    /* Mobile canvas normalization. The shared root system later assigns
       #f5f7f8 to classed body elements with !important, which is more specific
       than a generic body rule. Override both the token and every public body
       class so no grey/mint gutter can remain around the content cards. */
    html body {
        --isp-root-page-bg: #ffffff;
        background: #ffffff !important;
    }

    html body.isp-root-site-body,
    html body.isp-root-page-body,
    html body.isp-information-page-body,
    html body.isp-root-home-body,
    html body.isp-root-products-body,
    html body.isp-root-warranty-body,
    html body.isp-catalogue-body,
    html body.isp-category-faq-page-body,
    html body.isp-exhibition-category-body,
    html body.isp-exhibition-page-body,
    html body.isp-testimonial-page-body,
    html body.isp-career-job-body,
    html body.isp-enquiry-cart-page {
        background: #ffffff !important;
        background-image: none !important;
    }

    /* Shared main page canvases. Keep the hierarchy in cards and spacing rather
       than using full-page mint/grey washes. */
    html body .isp-home,
    html body .isp-root-page,
    html body .isp-info-page,
    html body .isp-products-directory-page,
    html body .isp-category-page,
    html body .isp-subcategory-page,
    html body .isp-testimonial-page,
    html body .isp-exhibition-page,
    html body .isp-enquiry-page,
    html body .isp-category-faq-page,
    html body .isp-catalogue-page,
    html body .isp-exhibition-category-page,
    html body .blog-page {
        background-color: #ffffff !important;
    }

    /* One clean mobile hero language across the public website. Specificity is
       deliberately high because several page stylesheets are loaded after
       head.php and some shared-theme declarations use !important. */
    html body .isp-home .isp-home-intro,
    html body .isp-root-page .isp-root-hero,
    html body .isp-info-page .isp-info-hero,
    html body .isp-products-directory-page .isp-products-directory-hero,
    html body .isp-category-page .isp-category-hero,
    html body .isp-subcategory-page .isp-subcategory-hero,
    html body .isp-testimonial-page .isp-testimonial-hero,
    html body .isp-exhibition-page .isp-exhibition-hero,
    html body .isp-enquiry-page .isp-enquiry-hero,
    html body .isp-category-faq-page .isp-category-faq-hero,
    html body .isp-catalogue-page .isp-catalogue-intro,
    html body .isp-exhibition-category-page .isp-exhibition-category-intro,
    html body .blog-page .blog-hero,
    html body .blog-page .blog-category-header {
        background: #ffffff !important;
        background-image: none !important;
    }

    /* Remove only the decorative vertical brand rail attached to the primary
       page-identity surfaces. Internal list bullets/callouts remain unchanged. */
    html body .isp-home .isp-home-intro::before,
    html body .isp-root-page .isp-root-hero::before,
    html body .isp-info-page .isp-info-hero::before,
    html body .isp-products-directory-page .isp-products-directory-hero::before,
    html body .isp-category-page .isp-category-hero::before,
    html body .isp-subcategory-page .isp-subcategory-hero::before,
    html body .isp-testimonial-page .isp-testimonial-hero::before,
    html body .isp-exhibition-page .isp-exhibition-hero::before,
    html body .isp-enquiry-page .isp-enquiry-hero::before,
    html body .isp-category-faq-page .isp-category-faq-hero::before,
    html body .isp-catalogue-page .isp-catalogue-intro::before,
    html body .isp-exhibition-category-page .isp-exhibition-category-intro::before,
    html body .blog-page .blog-hero::before,
    html body .blog-page .blog-category-header::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Root/info heroes retain their card geometry, but without the mint wash the
       border should be quieter so it reads as a premium surface, not a box. */
    html body .isp-root-page .isp-root-hero,
    html body .isp-info-page .isp-info-hero,
    html body .isp-products-directory-page .isp-products-directory-hero,
    html body .isp-category-page .isp-category-hero,
    html body .isp-subcategory-page .isp-subcategory-hero,
    html body .isp-testimonial-page .isp-testimonial-hero,
    html body .isp-exhibition-page .isp-exhibition-hero,
    html body .isp-enquiry-page .isp-enquiry-hero,
    html body .isp-category-faq-page .isp-category-faq-hero,
    html body .isp-catalogue-page .isp-catalogue-intro,
    html body .isp-exhibition-category-page .isp-exhibition-category-intro,
    html body .blog-page .blog-hero,
    html body .blog-page .blog-category-header {
        border-color: #e3ebec !important;
        box-shadow: 0 8px 24px rgba(31, 58, 75, .045) !important;
    }

    /* Homepage uses a full-width hero rather than a bordered card. */
    html body .isp-home .isp-home-intro {
        box-shadow: none !important;
    }
}

@media only screen and (max-width: 430px) {
    /* Keep the smallest-phone surfaces light and precise. */
    html body .isp-root-page .isp-root-hero,
    html body .isp-info-page .isp-info-hero,
    html body .isp-products-directory-page .isp-products-directory-hero,
    html body .isp-category-page .isp-category-hero,
    html body .isp-subcategory-page .isp-subcategory-hero,
    html body .isp-testimonial-page .isp-testimonial-hero,
    html body .isp-exhibition-page .isp-exhibition-hero,
    html body .isp-enquiry-page .isp-enquiry-hero,
    html body .isp-category-faq-page .isp-category-faq-hero,
    html body .isp-catalogue-page .isp-catalogue-intro,
    html body .isp-exhibition-category-page .isp-exhibition-category-intro,
    html body .blog-page .blog-hero,
    html body .blog-page .blog-category-header {
        box-shadow: 0 5px 16px rgba(31, 58, 75, .035) !important;
    }
}

/* ========================================================================== 
   IndoSurgicals Mobile Refinement Patch 1.9
   Homepage Hero Card + Compact First-Screen Rhythm
   MOBILE ONLY — desktop >= 901px remains untouched.
   ========================================================================== */
@media only screen and (max-width: 900px) {
    /* The homepage was the only primary hero deliberately left full-bleed in
       Patch 1.6. Give it the same restrained card language as other pages. */
    html body .isp-home .isp-home-intro {
        width: calc(100% - 16px) !important;
        margin: 6px auto 10px !important;
        padding: 16px 12px 17px !important;
        overflow: hidden !important;
        border: 1px solid #e2eaed !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 5px 16px rgba(31, 58, 75, .035) !important;
    }

    /* Avoid a second gutter inside the new outer card. */
    html body .isp-home .isp-home-intro > .isp-home-width {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* The old hero fine-tuning still supplied 28px top padding. This was the
       blank band visible between the header and the first kicker. */
    html body .isp-home .isp-home-intro-grid {
        gap: 14px !important;
    }

    html body .isp-home .isp-home-intro-copy > .isp-home-kicker {
        margin-top: 0 !important;
    }

    html body .isp-home .isp-home-intro h1 {
        margin-top: 5px !important;
    }

    html body .isp-home .isp-home-intro-copy > p {
        margin-top: 13px !important;
    }

    html body .isp-home .isp-home-intro-copy > .isp-home-actions {
        margin-top: 17px !important;
    }

    /* Tighten the handoff from the intro card to the next homepage block. */
    html body .isp-home .isp-home-buyer-paths {
        padding-top: 8px !important;
    }
}

@media only screen and (max-width: 430px) {
    html body .isp-home .isp-home-intro {
        width: calc(100% - 12px) !important;
        margin-top: 5px !important;
        margin-bottom: 8px !important;
        padding: 14px 10px 15px !important;
        border-radius: 14px !important;
    }

    html body .isp-home .isp-home-intro-grid {
        gap: 12px !important;
    }
}

/* ========================================================================== 
   IndoSurgicals Mobile Refinement Patch 2.0
   Category + Subcategory Compact Card Treatment
   MOBILE ONLY — desktop >= 901px remains untouched.
   ========================================================================== */
@media only screen and (max-width: 900px) {
    /* Match the compact first-screen treatment established on the homepage:
       small outer gutters, restrained card depth and tighter vertical rhythm. */
    html body .isp-category-page,
    html body .isp-subcategory-page {
        padding-top: 4px !important;
        padding-bottom: 22px !important;
    }

    html body .isp-category-page :is(
        .isp-category-hero,
        .isp-category-grid-section,
        .isp-category-information
    ),
    html body .isp-subcategory-page :is(
        .isp-subcategory-hero,
        .isp-products-section,
        .isp-subcategory-information,
        .isp-related-section
    ) {
        width: calc(100% - 16px) !important;
        margin: 6px auto 10px !important;
        border: 1px solid #e2eaed !important;
        border-radius: 16px !important;
        background-color: #ffffff !important;
        box-shadow: 0 5px 16px rgba(31, 58, 75, .035) !important;
    }

    /* Hero density: preserve the established typography but remove the old
       desktop-scale internal whitespace around it. */
    html body .isp-category-page .isp-category-hero,
    html body .isp-subcategory-page .isp-subcategory-hero {
        gap: 14px !important;
        padding: 17px 14px 18px !important;
    }

    html body .isp-category-page .isp-category-eyebrow,
    html body .isp-subcategory-page .isp-subcategory-eyebrow {
        margin-bottom: 5px !important;
    }

    html body .isp-category-page .isp-category-intro,
    html body .isp-subcategory-page .isp-subcategory-intro {
        margin-top: 11px !important;
    }

    html body .isp-category-page .isp-category-meta,
    html body .isp-subcategory-page .isp-subcategory-meta {
        margin-top: 14px !important;
    }

    html body .isp-category-page .isp-category-hero-actions,
    html body .isp-subcategory-page .isp-subcategory-hero-actions {
        margin-top: 16px !important;
        gap: 8px !important;
    }

    /* Main list/information cards receive the same economical inner spacing. */
    html body .isp-category-page :is(
        .isp-category-grid-section,
        .isp-category-information
    ),
    html body .isp-subcategory-page :is(
        .isp-products-section,
        .isp-subcategory-information,
        .isp-related-section
    ) {
        padding: 17px 14px !important;
    }

    html body .isp-category-page .isp-section-heading,
    html body .isp-subcategory-page .isp-section-heading {
        gap: 12px !important;
        margin-bottom: 14px !important;
        padding-bottom: 12px !important;
    }

    html body .isp-category-page .isp-section-heading p,
    html body .isp-subcategory-page .isp-section-heading p {
        margin-top: 6px !important;
    }

    /* Keep the existing grids/card logic, simply tighten the space between
       cards so the page feels intentional rather than oversized. */
    html body .isp-category-page .isp-category-grid,
    html body .isp-subcategory-page .isp-product-grid {
        gap: 10px !important;
    }

    html body .isp-category-page .isp-category-card,
    html body .isp-subcategory-page .isp-product-card,
    html body .isp-subcategory-page .isp-related-card {
        box-shadow: 0 4px 12px rgba(31, 58, 75, .04) !important;
    }

    /* Category quotation callout: keep its semantic mint tint, but remove the
       old thick left stripe and align it with the same mobile gutter system. */
    html body .isp-category-page .isp-category-enquiry {
        width: calc(100% - 16px) !important;
        margin: 6px auto 10px !important;
        padding: 17px 14px !important;
        border: 1px solid #d4e7e4 !important;
        border-radius: 16px !important;
        box-shadow: 0 5px 16px rgba(31, 58, 75, .03) !important;
    }

    /* Pagination should visually belong to the list above it, not create a
       separate oversized band. */
    html body .isp-category-page .isp-category-pagination,
    html body .isp-subcategory-page .isp-subcategory-pagination {
        margin: 8px auto 10px !important;
        padding: 0 8px !important;
    }

    /* Tighten the descriptions without altering their authored content. */
    html body .isp-category-page .isp-category-description,
    html body .isp-subcategory-page .isp-description-content {
        padding-top: 14px !important;
    }

    html body .isp-category-page .isp-category-information-note,
    html body .isp-subcategory-page .isp-bulk-enquiry-note {
        margin-top: 18px !important;
    }
}

@media only screen and (max-width: 430px) {
    html body .isp-category-page :is(
        .isp-category-hero,
        .isp-category-grid-section,
        .isp-category-information,
        .isp-category-enquiry
    ),
    html body .isp-subcategory-page :is(
        .isp-subcategory-hero,
        .isp-products-section,
        .isp-subcategory-information,
        .isp-related-section
    ) {
        width: calc(100% - 12px) !important;
        margin-top: 5px !important;
        margin-bottom: 8px !important;
        border-radius: 14px !important;
    }

    html body .isp-category-page .isp-category-hero,
    html body .isp-subcategory-page .isp-subcategory-hero,
    html body .isp-category-page :is(
        .isp-category-grid-section,
        .isp-category-information,
        .isp-category-enquiry
    ),
    html body .isp-subcategory-page :is(
        .isp-products-section,
        .isp-subcategory-information,
        .isp-related-section
    ) {
        padding: 14px 10px 15px !important;
    }

    /* Keep count pills beneath/alongside headings without forcing the heading
       block to become unnecessarily narrow. */
    html body .isp-category-page .isp-section-heading,
    html body .isp-subcategory-page .isp-section-heading {
        gap: 9px !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }

    html body .isp-category-page .isp-category-grid,
    html body .isp-subcategory-page .isp-product-grid,
    html body .isp-subcategory-page .isp-related-grid {
        gap: 9px !important;
    }
}