/* ==========================================
   OBDPRICE UK - Desktop Search Discovery
   ========================================== */

@media screen and (min-width: 990px) {

    /* Main dropdown container */
    #obd-search-discovery {
        display: none;
        position: fixed;
        z-index: 99991;

        /* Width and position controlled by JS */
        max-width: calc(100vw - 24px);
        min-width: 0;

        max-height: calc(100vh - 120px);
        overflow-x: hidden;
        overflow-y: auto;

        padding: 18px 16px 14px;

        background: #fff;
        border: 1px solid #e7e9ee;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .17);

        color: #17212e;
        box-sizing: border-box;
    }

    #obd-search-discovery,
    #obd-search-discovery * {
        box-sizing: border-box;
    }

    #obd-search-discovery.obd-open {
        display: block;
    }

    /* ==========================================
       Section Headings
       ========================================== */

    #obd-search-discovery .obd-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    #obd-search-discovery .obd-heading-title {
        display: flex;
        align-items: center;
        gap: 8px;

        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
    }

    #obd-search-discovery .obd-heading-icon {
        color: #e00012;
        font-size: 19px;
        line-height: 1;
    }

    #obd-search-discovery .obd-heading-link {
        color: #e00012;
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
    }

    #obd-search-discovery .obd-heading-link:hover {
        text-decoration: underline;
    }

    /* ==========================================
       Search by Function
       4 columns x 2 rows
       ========================================== */

    #obd-search-discovery .obd-functions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    #obd-search-discovery .obd-function {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 7px;

        min-width: 0;
        min-height: 82px;

        padding: 10px 5px;

        background: #fff6f6;
        border: 1px solid #fff0f0;
        border-radius: 7px;

        color: #17212e;
        text-decoration: none;
        text-align: center;

        transition:
            background .2s ease,
            border-color .2s ease,
            transform .2s ease;
    }

    #obd-search-discovery .obd-function:hover {
        background: #ffeded;
        border-color: #e00012;
        transform: translateY(-2px);
    }

    #obd-search-discovery .obd-function svg {
        width: 25px;
        height: 25px;
        flex-shrink: 0;

        stroke: #ed0015;
        stroke-width: 1.9;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    #obd-search-discovery .obd-function-name {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.35;
    }

    /* ==========================================
       Divider
       ========================================== */

    #obd-search-discovery .obd-divider {
        height: 1px;
        margin: 16px 0;
        background: #e6e9ee;
    }

    /* ==========================================
       Popular Products
       5 columns x 1 row
       ========================================== */

    #obd-search-discovery .obd-products {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
    }

    #obd-search-discovery .obd-product {
        display: flex;
        flex-direction: column;

        min-width: 0;
        padding: 7px;

        background: #fff;
        border: 1px solid #e7e9ee;
        border-radius: 7px;

        color: #17212e;
        text-decoration: none;

        transition:
            border-color .2s ease,
            box-shadow .2s ease;
    }

    #obd-search-discovery .obd-product:hover {
        border-color: #e00012;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .07);
    }

    /* Product image */
    #obd-search-discovery .obd-product-image {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 86px;

        background: #fafafa;
        border-radius: 5px;
        overflow: hidden;
    }

    #obd-search-discovery .obd-product-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Product name */
    #obd-search-discovery .obd-product-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;

        min-height: 32px;
        margin: 8px 0 7px;

        font-size: 10px;
        font-weight: 500;
        line-height: 1.5;

        overflow-wrap: anywhere;
    }

    /* Product price and arrow */
    #obd-search-discovery .obd-product-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 3px;

        margin-top: auto;
    }

    #obd-search-discovery .obd-product-price {
        min-width: 0;
        color: #e00012;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    #obd-search-discovery .obd-product-arrow {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 21px;
        height: 21px;
        flex: 0 0 21px;

        background: #e00012;
        border-radius: 50%;

        color: #fff;
        font-size: 13px;
        line-height: 1;
    }

    /* ==========================================
       Loading and unavailable states
       ========================================== */

    #obd-search-discovery .obd-loading,
    #obd-search-discovery .obd-unavailable {
        color: #8c95a3;
        font-size: 10px;
        text-align: center;
    }

    #obd-search-discovery .obd-note {
        margin: 10px 0 0;
        color: #8c95a3;
        font-size: 10px;
        line-height: 1.5;
    }

    /* ==========================================
       Backdrop
       ========================================== */

    #obd-search-discovery-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99989;
        background: rgba(17, 24, 39, .50);
    }

    #obd-search-discovery-backdrop.obd-open {
        display: block;
    }

    /* Hide original suggestions while
       discovery dropdown is active */
    body.obd-discovery-active #suggest-menu-list {
        display: none;
    }

    /* ==========================================
       Smaller desktop screens
       ========================================== */

    @media screen and (max-width: 1150px) {

        #obd-search-discovery {
            padding: 14px 12px 12px;
        }

        #obd-search-discovery .obd-functions {
            gap: 6px;
        }

        #obd-search-discovery .obd-function {
            min-height: 76px;
            padding: 8px 4px;
        }

        #obd-search-discovery .obd-function-name {
            font-size: 10px;
        }

        #obd-search-discovery .obd-function svg {
            width: 23px;
            height: 23px;
        }

        #obd-search-discovery .obd-products {
            gap: 5px;
        }

        #obd-search-discovery .obd-product {
            padding: 5px;
        }

        #obd-search-discovery .obd-product-image {
            height: 75px;
        }

        #obd-search-discovery .obd-product-price {
            font-size: 11px;
        }
    }
}

/* ==========================================
   Mobile - keep existing search unchanged
   ========================================== */

@media screen and (max-width: 989px) {

    #obd-search-discovery,
    #obd-search-discovery-backdrop {
        display: none;
    }
}