/*
 * IndoSurgicals Product + Technical Article Design System — v1.4
 * --------------------------------------------------------------------------
 * Canonical public content contract for migrated product descriptions and
 * /page/ technical/article bodies.  Root-page theme variables remain the
 * single source of truth for width, typography and palette.
 *
 * Legacy authored content that carries embedded CSS continues to opt out via
 * .isp-product-description--custom / .isp-page-body--authored until migrated.
 */

:root {
    --isp-pa-content-max: var(--isp-root-content-max, 1190px);
    --isp-pa-text: var(--isp-root-text, #263746);
    --isp-pa-muted: var(--isp-root-muted, #687986);
    --isp-pa-navy: var(--isp-root-navy, #405365);
    --isp-pa-navy-dark: var(--isp-root-navy-dark, #273c4d);
    --isp-pa-teal: var(--isp-root-teal, #008f87);
    --isp-pa-teal-dark: var(--isp-root-teal-dark, #00746f);
    --isp-pa-mint: var(--isp-root-mint, #63c4ad);
    --isp-pa-soft: var(--isp-root-soft, #f4f7f7);
    --isp-pa-soft-alt: var(--isp-root-soft-alt, #eef4f4);
    --isp-pa-teal-soft: var(--isp-root-teal-soft, #eaf7f5);
    --isp-pa-line: var(--isp-root-line, #d8e2e3);
    --isp-pa-line-strong: var(--isp-root-line-strong, #c7d5d7);
    --isp-pa-white: var(--isp-root-white, #fff);
    --isp-pa-font: var(--isp-root-font, 'Poppins', Arial, Helvetica, sans-serif);
    --isp-pa-radius-sm: var(--isp-root-radius-sm, 9px);
    --isp-pa-radius-md: var(--isp-root-radius-md, 13px);
    --isp-pa-radius-lg: var(--isp-root-radius-lg, 17px);
    --isp-pa-radius-xl: var(--isp-root-radius-xl, 18px);
    --isp-pa-shadow-sm: var(--isp-root-shadow-sm, 0 7px 20px rgba(31,58,75,.045));
    --isp-pa-shadow-md: var(--isp-root-shadow-md, 0 11px 30px rgba(31,58,75,.06));
    --isp-pa-h1: var(--isp-root-h1-size, clamp(34px, 3.4vw, 45px));
    --isp-pa-h2: var(--isp-root-h2-size, 27px);
    --isp-pa-h3: var(--isp-root-h3-size, 15px);
    --isp-pa-h4: var(--isp-root-h3-size, 15px);
    --isp-pa-body: var(--isp-root-body-size, 14px);
    --isp-pa-small: var(--isp-root-small-size, 12px);
    --isp-pa-card-y: var(--isp-root-card-pad-y, 28px);
    --isp-pa-card-x: var(--isp-root-card-pad-x, 30px);
}

/* --------------------------------------------------------------------------
   1. One public width + one vertical rhythm
   -------------------------------------------------------------------------- */
html body .isp-product-page,
html body .isp-info-page {
    color: var(--isp-pa-text);
    font-family: var(--isp-pa-font);
}

html body .isp-product-page .isp-product-shell,
html body .isp-info-page .isp-info-shell {
    width: min(95%, var(--isp-pa-content-max)) !important;
    max-width: var(--isp-pa-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body .isp-product-page {
    padding-top: 14px !important;
    padding-bottom: 44px !important;
}

html body .isp-info-page {
    padding-top: 14px !important;
    padding-bottom: 44px !important;
}

/* --------------------------------------------------------------------------
   2. Shared surface geometry
   -------------------------------------------------------------------------- */
html body .isp-product-page .isp-product-gallery,
html body .isp-product-page .isp-quote-card,
html body .isp-product-page .isp-product-details-section,
html body .isp-info-page .isp-info-hero,
html body .isp-info-page .isp-info-content-card {
    border-color: var(--isp-pa-line) !important;
    border-radius: var(--isp-pa-radius-lg) !important;
    box-shadow: var(--isp-pa-shadow-md) !important;
}

html body .isp-product-page .isp-product-details-section,
html body .isp-info-page .isp-info-content-card {
    background: var(--isp-pa-white) !important;
}

html body .isp-product-page .isp-product-details-section {
    padding: var(--isp-pa-card-y) var(--isp-pa-card-x) !important;
}

/* Product gallery/quotation keep their functional layout, but belong to the
   same restrained manufacturer visual system. */
html body .isp-product-page .isp-product-hero {
    gap: 22px !important;
    margin-bottom: 14px;
}

html body .isp-product-page .isp-product-gallery {
    border-radius: var(--isp-pa-radius-lg) !important;
}

html body .isp-product-page .isp-quote-card {
    border-radius: var(--isp-pa-radius-lg) !important;
}

/* Technical/article hero: same geometry as root pages, less marketing-heavy. */
html body .isp-info-page .isp-info-hero {
    margin: 0 0 14px !important;
    padding: 30px 32px !important;
    background:
        radial-gradient(circle at 95% 8%, rgba(99,196,173,.16), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f5faf9 100%) !important;
}

html body .isp-info-page .isp-info-content-card {
    margin: 0 0 14px !important;
    padding: var(--isp-pa-card-y) var(--isp-pa-card-x) !important;
}

/* --------------------------------------------------------------------------
   3. Canonical page titles / section headings
   -------------------------------------------------------------------------- */
html body .isp-product-page .isp-product-summary h1,
html body .isp-info-page .isp-info-hero h1 {
    color: var(--isp-pa-navy-dark) !important;
    font-family: var(--isp-pa-font) !important;
    font-size: var(--isp-pa-h1) !important;
    line-height: 1.09 !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
}

html body .isp-product-page .isp-product-eyebrow,
html body .isp-product-page .isp-section-heading > span,
html body .isp-info-page .isp-info-eyebrow {
    color: var(--isp-pa-teal-dark) !important;
    font-family: var(--isp-pa-font) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

html body .isp-product-page .isp-section-heading {
    margin-bottom: 21px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--isp-pa-line) !important;
}

html body .isp-product-page .isp-section-heading h2 {
    margin: 4px 0 0 !important;
    color: var(--isp-pa-navy-dark) !important;
    font-family: var(--isp-pa-font) !important;
    font-size: var(--isp-pa-h2) !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

/* --------------------------------------------------------------------------
   4. Canonical migrated content body
   -------------------------------------------------------------------------- */
html body .isp-content-body {
    width: 100%;
    max-width: 100%;
    color: var(--isp-pa-text);
    font-family: var(--isp-pa-font);
    font-size: var(--isp-pa-body);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

html body .isp-content-body > :first-child { margin-top: 0 !important; }
html body .isp-content-body > :last-child { margin-bottom: 0 !important; }

html body .isp-content-body :where(p, li, dt, dd, blockquote, figcaption) {
    color: var(--isp-pa-text);
    font-family: var(--isp-pa-font) !important;
    font-size: var(--isp-pa-body) !important;
    line-height: 1.7 !important;
}

html body .isp-content-body p {
    margin: 0 0 15px !important;
}

html body .isp-content-body :where(h2, h3, h4, h5, h6) {
    max-width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--isp-pa-navy-dark) !important;
    font-family: var(--isp-pa-font) !important;
    text-align: left !important;
    text-transform: none !important;
}

html body .isp-content-body h2 {
    margin: 30px 0 13px !important;
    font-size: var(--isp-pa-h2) !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

html body .isp-content-body h3 {
    margin: 24px 0 10px !important;
    font-size: var(--isp-pa-h3) !important;
    line-height: 1.32 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}

html body .isp-content-body :where(h4, h5, h6) {
    margin: 20px 0 9px !important;
    font-size: var(--isp-pa-h4) !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
}

html body .isp-content-body strong { color: var(--isp-pa-navy-dark); }

html body .isp-content-body a:not(.isp-content-button) {
    color: var(--isp-pa-teal-dark) !important;
    font-weight: 650;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

html body .isp-content-body a:not(.isp-content-button):hover,
html body .isp-content-body a:not(.isp-content-button):focus {
    color: var(--isp-pa-teal) !important;
}

html body .isp-content-body :where(ul, ol) {
    margin: 13px 0 20px !important;
    padding-left: 24px !important;
}

html body .isp-content-body li {
    margin: 0 0 8px !important;
    padding-left: 3px !important;
}

html body .isp-content-body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--isp-pa-radius-sm);
}

html body .isp-content-body :where(iframe, video) { max-width: 100%; }

html body .isp-content-body blockquote {
    margin: 20px 0 !important;
    padding: 16px 18px !important;
    border: 1px solid #cfe7e3 !important;
    border-left: 4px solid var(--isp-pa-teal) !important;
    border-radius: 0 var(--isp-pa-radius-sm) var(--isp-pa-radius-sm) 0 !important;
    background: var(--isp-pa-teal-soft) !important;
}

/* --------------------------------------------------------------------------
   5. One technical/specification table system
   -------------------------------------------------------------------------- */
html body .isp-content-body .isp-table-scroll,
html body .isp-content-body .isp-table-wrap,
html body .isp-content-body .table-responsive {
    width: 100%;
    max-width: 100%;
    margin: 18px 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--isp-pa-line);
    border-radius: 12px;
    background: var(--isp-pa-white);
}

html body .isp-content-body table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 !important;
    border: 1px solid var(--isp-pa-line) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    background: var(--isp-pa-white) !important;
    color: var(--isp-pa-text) !important;
    font-family: var(--isp-pa-font) !important;
    font-size: var(--isp-pa-small) !important;
    line-height: 1.55 !important;
    overflow: hidden;
}

/* Wrapper owns the outer border when present. */
html body .isp-content-body :where(.isp-table-scroll, .isp-table-wrap, .table-responsive) > table {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

html body .isp-content-body th,
html body .isp-content-body td {
    padding: 11px 13px !important;
    border: 0 !important;
    border-right: 1px solid var(--isp-pa-line) !important;
    border-bottom: 1px solid var(--isp-pa-line) !important;
    background: var(--isp-pa-white) !important;
    color: var(--isp-pa-text) !important;
    font-family: var(--isp-pa-font) !important;
    font-size: var(--isp-pa-small) !important;
    line-height: 1.55 !important;
    vertical-align: top !important;
    text-align: left !important;
}

html body .isp-content-body th {
    background: var(--isp-pa-soft) !important;
    color: var(--isp-pa-navy-dark) !important;
    font-weight: 800 !important;
}

html body .isp-content-body tr > :last-child { border-right: 0 !important; }
html body .isp-content-body tr:last-child > * { border-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   6. Shared authored components for future migrations
   -------------------------------------------------------------------------- */
html body .isp-content-card {
    margin: 18px 0 !important;
    padding: 20px 22px !important;
    border: 1px solid var(--isp-pa-line) !important;
    border-radius: var(--isp-pa-radius-md) !important;
    background: var(--isp-pa-white) !important;
    box-shadow: var(--isp-pa-shadow-sm) !important;
}

html body .isp-content-note {
    margin: 18px 0 !important;
    padding: 16px 18px !important;
    border: 1px solid #cfe7e3 !important;
    border-radius: var(--isp-pa-radius-md) !important;
    background: var(--isp-pa-teal-soft) !important;
    color: var(--isp-pa-text) !important;
}

html body .isp-content-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 !important;
}

html body .isp-content-button {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 17px !important;
    border: 1px solid var(--isp-pa-teal) !important;
    border-radius: var(--isp-pa-radius-sm) !important;
    background: var(--isp-pa-teal) !important;
    color: #fff !important;
    font-family: var(--isp-pa-font) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 7px 18px rgba(0,143,135,.16);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html body .isp-content-button:hover,
html body .isp-content-button:focus {
    border-color: var(--isp-pa-teal-dark) !important;
    background: var(--isp-pa-teal-dark) !important;
    color: #fff !important;
    box-shadow: 0 9px 22px rgba(0,116,111,.2);
    outline: none;
}

html body .isp-content-button--secondary {
    border-color: var(--isp-pa-line-strong) !important;
    background: var(--isp-pa-white) !important;
    color: var(--isp-pa-navy) !important;
    box-shadow: none;
}

html body .isp-content-button--secondary:hover,
html body .isp-content-button--secondary:focus {
    border-color: var(--isp-pa-teal) !important;
    background: var(--isp-pa-teal-soft) !important;
    color: var(--isp-pa-teal-dark) !important;
}

/* Standard component for a real product-specific online listing. It is only
   rendered when a migrated page actually contains a verified purchase URL. */
html body .isp-online-purchase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 20px 0 !important;
    padding: 16px 18px !important;
    border: 1px solid #cfe7e3 !important;
    border-radius: var(--isp-pa-radius-md) !important;
    background: linear-gradient(135deg, #f7fbfa 0%, var(--isp-pa-teal-soft) 100%) !important;
}

/* Keep marketplace actions together on desktop. The copy grows to consume
   the available space, naturally pushing the compact action group to the
   right without splitting individual marketplace buttons into separate rows. */
html body .isp-online-purchase__copy {
    flex: 1 1 520px;
    min-width: 0;
    padding-right: 8px;
}

html body .isp-online-purchase > .isp-content-button {
    flex: 0 0 auto;
    min-width: 104px;
    margin: 0 !important;
}

html body .isp-online-purchase__copy strong,
html body .isp-online-purchase__copy span { display: block; }
html body .isp-online-purchase__copy strong {
    color: var(--isp-pa-navy-dark);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
}
html body .isp-online-purchase__copy span {
    margin-top: 3px;
    color: var(--isp-pa-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. Shared bottom support strip
   -------------------------------------------------------------------------- */
html body .isp-page-support {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 14px 0 0;
    padding: 22px 24px;
    border: 1px solid var(--isp-pa-line);
    border-radius: var(--isp-pa-radius-lg);
    background:
        radial-gradient(circle at 96% 6%, rgba(99,196,173,.18), transparent 31%),
        linear-gradient(135deg, #f8fbfb 0%, #ffffff 62%, #eef8f6 100%);
    box-shadow: var(--isp-pa-shadow-sm);
}

html body .isp-page-support__copy strong,
html body .isp-page-support__copy span { display: block; }
html body .isp-page-support__copy strong {
    color: var(--isp-pa-navy-dark);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;
}
html body .isp-page-support__copy span {
    margin-top: 4px;
    color: var(--isp-pa-muted);
    font-size: 12.5px;
    line-height: 1.55;
}
html body .isp-page-support__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Product return link aligns with the common button language without becoming
   another primary CTA. */
html body .isp-product-page .isp-category-return {
    margin-top: 14px !important;
}
html body .isp-product-page .isp-category-return a {
    min-height: 42px !important;
    padding: 9px 14px !important;
    border: 1px solid var(--isp-pa-line-strong) !important;
    border-radius: var(--isp-pa-radius-sm) !important;
    background: var(--isp-pa-white) !important;
    color: var(--isp-pa-navy) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   8. Legacy safety: do not force migrated rules onto historical authored CSS
   -------------------------------------------------------------------------- */
html body .isp-product-description--custom,
html body .isp-page-body--authored {
    overflow-wrap: anywhere;
}
html body .isp-product-description--custom img,
html body .isp-page-body--authored img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   9. Responsive behaviour
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    html body .isp-product-page .isp-product-shell,
    html body .isp-info-page .isp-info-shell {
        width: min(100% - 24px, var(--isp-pa-content-max)) !important;
    }

    html body .isp-product-page,
    html body .isp-info-page {
        padding-top: 12px !important;
        padding-bottom: 28px !important;
    }

    html body .isp-product-page .isp-product-hero { margin-bottom: 12px; }

    html body .isp-info-page .isp-info-hero {
        margin-bottom: 12px !important;
        padding: 24px 22px !important;
    }

    html body .isp-info-page .isp-info-content-card {
        margin-bottom: 12px !important;
        padding: 22px 20px !important;
    }

    html body .isp-product-page .isp-product-details-section {
        padding: 22px 20px !important;
    }

    html body .isp-content-body h2 { margin-top: 26px !important; }

    html body .isp-page-support {
        grid-template-columns: 1fr;
        padding: 19px 18px;
    }
    html body .isp-page-support__actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
    html body .isp-product-page .isp-product-shell,
    html body .isp-info-page .isp-info-shell {
        width: calc(100% - 20px) !important;
    }

    html body .isp-product-page .isp-product-summary h1,
    html body .isp-info-page .isp-info-hero h1 {
        font-size: 30px !important;
        line-height: 1.12 !important;
    }

    html body .isp-content-body { font-size: 14px !important; }
    html body .isp-content-body :where(p, li, dt, dd, blockquote, figcaption) { font-size: 14px !important; }
    html body .isp-content-body h2 { font-size: 24px !important; }
    html body .isp-content-body h3 { font-size: 18px !important; }
    html body .isp-content-body :where(h4,h5,h6) { font-size: 15px !important; }

    html body .isp-content-actions,
    html body .isp-page-support__actions { display: grid; grid-template-columns: 1fr; }
    html body .isp-content-button { width: 100%; }

    html body .isp-online-purchase { align-items: stretch; }
    html body .isp-online-purchase__copy {
        flex-basis: 100%;
        padding-right: 0;
    }
    html body .isp-online-purchase .isp-content-button {
        width: 100%;
        min-width: 0;
    }

    html body .isp-content-body .isp-table-scroll,
    html body .isp-content-body .isp-table-wrap,
    html body .isp-content-body .table-responsive {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*
     * Canonical technical/specification tables must fit a phone viewport.
     * Do not force a desktop minimum width here: that caused the first
     * column to be clipped on 320-430px product pages.
     */
    html body .isp-content-body :where(.isp-table-scroll, .isp-table-wrap, .table-responsive, .isp-page-table-shell) > table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    html body .isp-content-body :where(.isp-table-scroll, .isp-table-wrap, .table-responsive, .isp-page-table-shell) > table th {
        width: 38% !important;
    }

    html body .isp-content-body :where(.isp-table-scroll, .isp-table-wrap, .table-responsive, .isp-page-table-shell) > table td {
        width: 62% !important;
    }

    html body .isp-content-body :where(.isp-table-scroll, .isp-table-wrap, .table-responsive, .isp-page-table-shell) > table th,
    html body .isp-content-body :where(.isp-table-scroll, .isp-table-wrap, .table-responsive, .isp-page-table-shell) > table td {
        padding: 9px 8px !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        white-space: normal !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .isp-content-button { transition: none; }
}


/* --------------------------------------------------------------------------
   10. Canonical product / article video presentation
   --------------------------------------------------------------------------
   A video should read as intentional technical media, not as a browser-default
   300x150 iframe.  Keep it restrained and manufacturer-like: centered,
   responsive, 16:9, and visually related to the shared card system.
   -------------------------------------------------------------------------- */
html body .isp-content-body .isp-media-embed {
    position: relative !important;
    display: block !important;
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    aspect-ratio: 16 / 9 !important;
    margin: 16px auto 30px !important;
    overflow: hidden !important;
    border: 1px solid var(--isp-pa-line-strong) !important;
    border-radius: var(--isp-pa-radius-md) !important;
    background: #071521 !important;
    box-shadow: 0 12px 30px rgba(31,58,75,.10) !important;
    isolation: isolate !important;
}

html body .isp-content-body .isp-media-embed::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

html body .isp-content-body .isp-media-embed iframe,
html body .isp-content-body .isp-media-embed video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #071521 !important;
}

/* Keep the media heading close enough to the frame to read as one section. */
html body .isp-content-body h2 + .isp-media-embed,
html body .isp-content-body h3 + .isp-media-embed {
    margin-top: 13px !important;
}

@media (max-width: 900px) {
    html body .isp-content-body .isp-media-embed {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 27px !important;
    }
}

@media (max-width: 560px) {
    html body .isp-content-body .isp-media-embed {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 25px !important;
        border-radius: 10px !important;
        box-shadow: 0 8px 22px rgba(31,58,75,.09) !important;
    }
}