/*
 * IndoSurgicals Desktop Buyer Journey — Patch 28 v1.0.0
 * --------------------------------------------------------------------------
 * Scope: desktop only (>= 901px).
 * Covers: shared Smart Search suggestions, search-results page, quotation
 * enquiry form, and enquiry cart presentation.
 *
 * Safety:
 * - Search ranking/suggestion API/URLs remain unchanged.
 * - Enquiry/cart form field names, routes, validation, reCAPTCHA and CRM sync
 *   remain unchanged.
 * - Mobile/tablet <=900px remains governed by the completed mobile system.
 */

/* New Patch 28-only element stays absent from the completed <=900px UI. */
.isp-search-refine { display: none; }

@media (min-width: 901px) {
    /* ======================================================================
       1. Shared header Smart Search — product discovery workspace
       ====================================================================== */
    html body .isp-search-suggestions {
        top: calc(100% + 10px);
        max-height: min(66vh, 570px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid #cfdde1;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 24px 58px rgba(26, 52, 68, .18);
    }

    html body .isp-search-suggestion {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        gap: 13px;
        min-height: 76px;
        padding: 10px 14px;
        border-bottom: 1px solid #edf2f3;
        transition: background var(--isp-ds-duration-fast) var(--isp-ds-ease),
                    box-shadow var(--isp-ds-duration-fast) var(--isp-ds-ease);
    }

    html body .isp-search-suggestion:hover,
    html body .isp-search-suggestion.is-active {
        background: #f1faf8;
        box-shadow: inset 3px 0 0 var(--isp-ds-teal);
    }

    html body .isp-search-suggestion-media {
        width: 58px;
        height: 58px;
        border: 1px solid #e2ebed;
        border-radius: 11px;
        background: #f8fafb;
    }

    html body .isp-search-suggestion-title {
        color: var(--isp-ds-navy-dark);
        font-size: 13px;
        line-height: 1.32;
        font-weight: 700;
    }

    html body .isp-search-suggestion-meta {
        margin-top: 5px;
        color: #6d808a;
        font-size: 11px;
        line-height: 1.35;
    }

    html body .isp-search-suggestion-type {
        min-width: 72px;
        padding: 6px 9px;
        border: 1px solid #d2ebe5;
        background: #edf8f5;
        color: var(--isp-ds-teal-dark);
        font-size: 9.5px;
        font-weight: 800;
    }

    html body .isp-search-suggestion-footer {
        position: sticky;
        bottom: 0;
        min-height: 42px;
        padding: 10px 14px;
        border-top: 1px solid #dfe8ea;
        background: rgba(248, 251, 251, .97);
        backdrop-filter: blur(7px);
        color: #6c808b;
        font-size: 10.5px;
    }

    html body .isp-search-suggestion-footer strong {
        color: var(--isp-ds-teal-dark);
        font-weight: 800;
    }

    /* ======================================================================
       2. Full search-results page
       ====================================================================== */
    html body .isp-smart-search-page {
        min-height: 58vh;
        padding: 24px 0 48px;
        background: #f4f7f8;
    }

    html body .isp-smart-search-page > .container {
        width: min(var(--isp-ds-content-max), calc(100% - (var(--isp-ds-gutter) * 2))) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    html body .isp-search-shell {
        max-width: none;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    html body .isp-search-hero {
        gap: 28px;
        min-height: 142px;
        padding: 27px 30px;
        border: 1px solid var(--isp-ds-line);
        border-radius: 18px 18px 0 0;
        background:
            radial-gradient(circle at 93% 5%, rgba(99, 196, 173, .17), transparent 29%),
            linear-gradient(135deg, #ffffff 0%, #f8fbfb 58%, #edf8f6 100%);
        box-shadow: var(--isp-ds-shadow-sm);
    }

    html body .isp-search-kicker {
        margin-bottom: 7px;
        color: var(--isp-ds-teal-dark);
        font-size: 10.5px;
        letter-spacing: .13em;
    }

    html body .isp-search-hero h1 {
        color: var(--isp-ds-navy-dark);
        font-size: clamp(30px, 2.5vw, 40px);
        line-height: 1.08;
        letter-spacing: -.035em;
    }

    html body .isp-search-hero p {
        max-width: 710px;
        margin-top: 9px;
        color: var(--isp-ds-muted);
        font-size: 13.5px;
        line-height: 1.55;
    }

    html body .isp-search-summary-badge {
        min-width: 150px;
        height: 50px;
        border-color: #cbe5df;
        background: #edf8f5;
        box-shadow: none;
    }

    /* Search again: added in Patch 28, visual only. */
    html body .isp-search-refine {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0;
        margin: -1px 0 0;
        padding: 18px 20px;
        border: 1px solid var(--isp-ds-line);
        border-top-color: #e7eeee;
        background: #fff;
        box-shadow: var(--isp-ds-shadow-xs);
    }

    html body .isp-search-refine-field {
        position: relative;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    html body .isp-search-refine-field::before {
        content: "⌕";
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-52%);
        color: #6f818b;
        font-size: 21px;
        line-height: 1;
        pointer-events: none;
    }

    html body .isp-search-refine input {
        width: 100%;
        height: 48px;
        margin: 0;
        padding: 0 16px 0 46px;
        border: 1px solid #cbd9dd;
        border-right: 0;
        border-radius: 11px 0 0 11px;
        background: #fbfcfc;
        color: var(--isp-ds-text);
        font-size: 13.5px;
        font-weight: 500;
        outline: 0;
        transition: border-color var(--isp-ds-duration-fast) var(--isp-ds-ease),
                    box-shadow var(--isp-ds-duration-fast) var(--isp-ds-ease),
                    background var(--isp-ds-duration-fast) var(--isp-ds-ease);
    }

    html body .isp-search-refine input:focus {
        border-color: var(--isp-ds-teal);
        background: #fff;
        box-shadow: inset 0 0 0 1px var(--isp-ds-teal), 0 0 0 3px rgba(0,143,135,.08);
    }

    html body .isp-search-refine button {
        min-width: 124px;
        height: 48px;
        margin: 0;
        padding: 0 21px;
        border: 1px solid var(--isp-ds-teal);
        border-radius: 0 11px 11px 0;
        background: var(--isp-ds-teal);
        color: #fff;
        font-size: 12.5px;
        font-weight: 800;
        cursor: pointer;
        transition: background var(--isp-ds-duration-fast) var(--isp-ds-ease),
                    border-color var(--isp-ds-duration-fast) var(--isp-ds-ease);
    }

    html body .isp-search-refine button:hover,
    html body .isp-search-refine button:focus-visible {
        border-color: var(--isp-ds-teal-dark);
        background: var(--isp-ds-teal-dark);
    }

    html body .isp-search-correction {
        margin: 14px 0 0;
        padding: 11px 14px;
        border-color: #cae4df;
        border-radius: 11px;
        background: #f7fbfa;
        font-size: 12px;
    }

    html body .isp-search-toolbar {
        gap: 13px;
        margin: 14px 0 0;
        padding: 11px 13px;
        border-color: #dce7e8;
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--isp-ds-shadow-xs);
    }

    html body .isp-search-filters a {
        min-height: 34px;
        padding: 6px 11px;
        border-color: #d7e3e5;
        background: #f8fafb !important;
        color: #415968;
        font-size: 11.5px;
        font-weight: 700;
    }

    html body .isp-search-filters a:hover {
        border-color: #a9d2ca;
        background: #f2faf8 !important;
        color: var(--isp-ds-teal-dark);
    }

    html body .isp-search-filters a.is-active {
        border-color: var(--isp-ds-teal) !important;
        background: var(--isp-ds-teal) !important;
        color: #fff !important;
        box-shadow: none;
    }

    html body .isp-search-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 16px 0 24px;
    }

    html body .isp-search-result-card {
        grid-template-columns: 142px minmax(0, 1fr);
        min-height: 192px;
        border-color: #dce6e8;
        border-radius: 15px;
        background: #fff;
        box-shadow: var(--isp-ds-shadow-xs);
    }

    html body .isp-search-result-card:hover {
        transform: translateY(-2px);
        border-color: #afd5ce;
        box-shadow: var(--isp-ds-shadow-sm);
    }

    html body .isp-search-result-media {
        padding: 15px;
        border-right-color: #edf2f3;
        background: #f8fafb;
    }

    html body .isp-search-result-media img {
        max-height: 158px;
    }

    html body .isp-search-result-body {
        padding: 17px 18px 15px;
    }

    html body .isp-search-result-body h2 {
        margin-bottom: 7px;
        color: var(--isp-ds-navy-dark);
        font-size: 16.5px;
        line-height: 1.3;
        font-weight: 700;
    }

    html body .isp-search-result-body p {
        color: #687b86;
        font-size: 12px;
        line-height: 1.52;
    }

    html body .isp-search-open-link {
        min-height: 30px;
        align-items: center;
        color: var(--isp-ds-teal-dark);
        font-size: 10.5px;
        font-weight: 800;
        text-decoration: none;
    }

    html body .isp-search-pagination {
        padding-bottom: 8px !important;
    }

    html body .isp-search-empty-state {
        margin-top: 16px;
        padding: 54px 24px 60px;
        border: 1px solid var(--isp-ds-line);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--isp-ds-shadow-xs);
    }

    /* ======================================================================
       3. Direct quotation enquiry form — form first, guidance second
       ====================================================================== */
    html body .isp-enquiry-page {
        padding: 12px 0 44px;
    }

    html body .isp-enquiry-hero {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr);
        gap: 28px;
        margin-bottom: 14px;
        padding: 30px 32px;
        border-radius: 18px;
        box-shadow: var(--isp-ds-shadow-sm);
    }

    html body .isp-enquiry-hero h1 {
        margin: 6px 0 10px !important;
        font-size: clamp(33px, 3vw, 43px) !important;
        line-height: 1.08 !important;
    }

    html body .isp-enquiry-hero-copy > p {
        max-width: 760px;
        font-size: 14px;
        line-height: 1.6;
    }

    html body .isp-enquiry-hero-actions {
        gap: 9px;
        margin-top: 17px;
    }

    html body .isp-enquiry-hero-actions a {
        min-height: 42px;
        padding: 9px 15px;
        border-radius: 9px;
        font-size: 12px;
    }

    html body .isp-enquiry-hero-panel {
        gap: 8px;
    }

    html body .isp-enquiry-hero-panel > div {
        min-height: 58px;
        padding: 11px 13px;
        border-radius: 11px;
        box-shadow: none;
    }

    html body .isp-enquiry-benefits {
        gap: 10px;
        margin-bottom: 14px;
    }

    html body .isp-enquiry-benefits article {
        gap: 11px;
        min-height: 90px;
        padding: 14px 15px;
        border-radius: 12px;
        box-shadow: var(--isp-ds-shadow-xs);
    }

    html body .isp-enquiry-benefit-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    html body .isp-enquiry-benefits h2 {
        margin-bottom: 3px !important;
        font-size: 13px !important;
    }

    html body .isp-enquiry-benefits p {
        font-size: 11px;
        line-height: 1.48;
    }

    html body .isp-enquiry-layout {
        grid-template-columns: minmax(0, 1.52fr) minmax(310px, .62fr);
        gap: 16px;
    }

    html body .isp-enquiry-form-card {
        order: 1;
        border-radius: 16px;
        box-shadow: var(--isp-ds-shadow-sm);
    }

    html body .isp-enquiry-guidance {
        order: 2;
        top: 86px;
        padding: 23px;
        border-radius: 16px;
        box-shadow: var(--isp-ds-shadow-xs);
    }

    html body .isp-enquiry-guidance h2 {
        margin: 5px 0 9px !important;
        font-size: 22px !important;
    }

    html body .isp-enquiry-guidance > p {
        font-size: 12.5px;
        line-height: 1.6;
    }

    html body .isp-enquiry-guidance ul {
        margin-top: 15px !important;
    }

    html body .isp-enquiry-guidance li {
        margin-bottom: 9px !important;
        padding-left: 24px !important;
        font-size: 11.5px;
        line-height: 1.5;
    }

    html body .isp-enquiry-help-card,
    html body .isp-enquiry-privacy-note {
        margin-top: 15px;
        padding: 14px;
    }

    html body .isp-enquiry-form-head {
        padding: 21px 24px 18px;
    }

    html body .isp-enquiry-form-head h2 {
        margin: 4px 0 8px !important;
        font-size: 24px !important;
    }

    html body #indosurgicals_enquiry_form {
        padding: 21px 24px 24px;
    }

    html body .isp-enquiry-fieldset {
        margin-bottom: 20px;
    }

    html body .isp-enquiry-fieldset legend {
        margin-bottom: 12px;
        padding-bottom: 8px;
        font-size: 12.5px;
    }

    html body .isp-enquiry-field-grid {
        gap: 13px 14px;
    }

    html body .isp-enquiry-field label {
        margin-bottom: 6px;
        font-size: 11.5px;
        font-weight: 700;
    }

    html body .isp-enquiry-field input,
    html body .isp-enquiry-field select,
    html body .isp-enquiry-field textarea,
    html body .contact-phone-grid input,
    html body .contact-phone-grid select {
        border-radius: 9px !important;
    }

    html body .isp-enquiry-submit-area {
        margin-top: 16px;
        padding-top: 18px;
    }

    html body .isp-enquiry-submit-copy button {
        min-width: 178px;
        min-height: 46px;
        border-radius: 10px;
        background: var(--isp-ds-teal) !important;
        box-shadow: 0 10px 20px rgba(0, 143, 135, .18) !important;
    }

    html body .isp-enquiry-submit-copy button:hover,
    html body .isp-enquiry-submit-copy button:focus-visible {
        background: var(--isp-ds-teal-dark) !important;
    }

    /* ======================================================================
       4. Enquiry Cart — selected products + sticky buyer details
       ====================================================================== */
    html body .isp-enquiry-cart-page .container {
        width: min(var(--isp-ds-content-max), calc(100% - (var(--isp-ds-gutter) * 2))) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    html body .isp-enquiry-cart-page .inner_full_panel,
    html body .isp-enquiry-cart-page .text_container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    html body .ind-cart-pro {
        padding: 8px 0 42px;
        font-family: var(--isp-ds-font-sans);
    }

    html body .ind-cart-pro .ind-cart-top {
        gap: 20px;
        margin-bottom: 14px;
        padding: 22px 24px;
        border-color: #cfe4e0;
        border-radius: 16px;
        background:
            radial-gradient(circle at 95% 8%, rgba(99,196,173,.16), transparent 28%),
            linear-gradient(135deg, #fff 0%, #f7fbfa 100%);
        box-shadow: var(--isp-ds-shadow-xs);
    }

    html body .ind-cart-pro .ind-cart-top h1 {
        font-size: 28px;
        line-height: 1.12;
    }

    html body .ind-cart-pro .ind-cart-top p {
        max-width: 720px;
        margin-top: 7px;
        font-size: 12.5px;
        line-height: 1.55;
    }

    html body .ind-cart-pro .ind-cart-count {
        min-width: 108px;
        padding: 9px 13px;
        background: var(--isp-ds-teal);
        font-size: 11.5px;
        box-shadow: none;
    }

    html body .ind-cart-pro .ind-cart-layout {
        grid-template-columns: minmax(0, 1.45fr) minmax(360px, .65fr);
        gap: 16px;
    }

    html body .ind-cart-pro .ind-card {
        border-color: #d9e4e6;
        border-radius: 16px;
        box-shadow: var(--isp-ds-shadow-sm);
    }

    html body .ind-cart-pro .ind-card-head {
        padding: 15px 17px 13px;
        background: #fbfcfc;
    }

    html body .ind-cart-pro .ind-card-head h2 {
        font-size: 17px;
        line-height: 1.3;
    }

    html body .ind-cart-pro .ind-card-head p {
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.45;
    }

    html body .ind-cart-pro .ind-add-products-link {
        min-height: 34px;
        padding: 7px 11px;
        border-radius: 8px;
        background: var(--isp-ds-teal);
        font-size: 10.5px;
        box-shadow: none;
    }

    html body .ind-cart-pro .ind-products-body {
        padding: 0 14px 13px;
    }

    html body .ind-cart-pro .ind-products-table th {
        padding: 9px 9px;
        background: #f4f8f8;
        font-size: 9.5px;
        letter-spacing: .07em;
    }

    html body .ind-cart-pro .ind-products-table td {
        padding: 11px 9px;
        font-size: 12.5px;
        line-height: 1.48;
    }

    html body .ind-cart-pro .ind-product-name {
        font-size: 13.5px;
        line-height: 1.34;
    }

    html body .ind-cart-pro .ind-product-sku {
        padding: 3px 7px;
        border-radius: 6px;
        font-size: 9.5px;
    }

    html body .ind-cart-pro .ind-variant-list {
        gap: 4px 9px;
        margin-top: 6px;
    }

    html body .ind-cart-pro .ind-variant-list li {
        font-size: 10px;
        line-height: 1.4;
    }

    html body .ind-cart-pro .ind-qty-cell {
        width: 205px;
    }

    html body .ind-cart-pro .ind-qty-input {
        width: 58px !important;
        height: 33px;
        font-size: 12px;
    }

    html body .ind-cart-pro .ind-action-link {
        min-height: 33px;
        padding: 6px 8px;
        font-size: 10px;
    }

    html body .ind-cart-pro .ind-summary-box {
        min-width: 138px;
        padding: 8px 11px;
        border-radius: 10px;
    }

    html body .ind-cart-pro .ind-summary-label {
        font-size: 9.5px;
    }

    html body .ind-cart-pro .ind-summary-value {
        font-size: 18px;
    }

    html body .ind-cart-pro #indosurgicals_enquiry_cart_form {
        position: sticky;
        top: 86px;
        align-self: start;
    }

    html body .ind-cart-pro .ind-form-body {
        padding: 16px 17px 18px;
    }

    html body .ind-cart-pro .ind-form-note {
        margin-bottom: 13px;
        padding: 10px 11px;
        border-radius: 9px;
        font-size: 10.5px;
        line-height: 1.5;
    }

    html body .ind-cart-pro .ind-form-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    html body .ind-cart-pro .ind-field-full {
        grid-column: auto;
    }

    html body .ind-cart-pro .ind-field label {
        margin-bottom: 5px;
        font-size: 11px;
    }

    html body .ind-cart-pro .ind-field input,
    html body .ind-cart-pro .ind-field textarea,
    html body .ind-cart-pro .ind-field select {
        min-height: 39px;
        padding: 8px 10px;
        border-radius: 8px !important;
        font-size: 12px;
    }

    html body .ind-cart-pro .ind-field textarea {
        min-height: 82px;
    }

    html body .ind-cart-pro .ind-phone-row {
        grid-template-columns: minmax(130px, .9fr) minmax(0, 1.1fr);
        gap: 8px;
    }

    html body .ind-cart-pro .ind-contact-help,
    html body .ind-cart-pro .ind-contact-error {
        margin-top: 5px;
        font-size: 9.5px;
    }

    html body .ind-cart-pro .ind-actions {
        gap: 12px;
        margin-top: 14px;
    }

    html body .ind-cart-pro .ind-submit {
        width: 100%;
        min-width: 0;
        min-height: 45px;
        padding: 10px 16px !important;
        border-radius: 9px !important;
        background: var(--isp-ds-teal) !important;
        font-size: 13px !important;
        box-shadow: 0 10px 20px rgba(0,143,135,.18) !important;
    }

    html body .ind-cart-pro .ind-submit:hover,
    html body .ind-cart-pro .ind-submit:focus-visible {
        background: var(--isp-ds-teal-dark) !important;
    }

    html body .ind-cart-pro .ind-empty {
        padding: 45px 24px;
    }

}

/* Compact desktop/laptop safety. Existing mobile remains untouched. */
@media (min-width: 901px) and (max-width: 1120px) {
    html body .isp-enquiry-layout {
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    }

    html body .ind-cart-pro .ind-cart-layout {
        grid-template-columns: 1fr;
    }

    html body .ind-cart-pro #indosurgicals_enquiry_cart_form {
        position: static;
    }

    html body .ind-cart-pro .ind-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .ind-cart-pro .ind-field-full {
        grid-column: 1 / -1;
    }
}

@media (min-width: 901px) and (max-width: 1020px) {
    html body .isp-search-results-grid {
        grid-template-columns: 1fr;
    }

    html body .isp-enquiry-hero {
        grid-template-columns: 1fr;
    }

    html body .isp-enquiry-hero-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body .isp-enquiry-layout {
        grid-template-columns: 1fr;
    }

    html body .isp-enquiry-form-card {
        order: 1;
    }

    html body .isp-enquiry-guidance {
        order: 2;
        position: static;
    }
}