/* =========================================================
   SEARCH RESULT
========================================================= */

.header-search-results {
    padding: 6px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 18px 45px rgba(48, 30, 100, .14);

    overflow: scroll;
    max-height:70vh;
}


/* Individual product */

.search-result {
    position: relative;

    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;

    gap: 11px;

    min-height: 66px;

    padding: 7px 9px;

    border: 0;
    border-radius: 12px;

    transition: background .18s ease, transform .18s ease;
}


/* Separator */

.search-result + .search-result {
    margin-top: 2px;
}


/* Hover */

.search-result:hover {
    background: var(--primary-faint);
}


/* =========================================================
   IMAGE
========================================================= */

.search-result__image {
    position: relative;

    width: 52px;
    height: 52px;

    overflow: hidden;

    border: 1px solid #EEEAF5;
    border-radius: 11px;

    background: #F5F3F8;

    flex-shrink: 0;
}

.search-result__image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 2px;

    transition: transform .25s ease;
}

.search-result:hover .search-result__image img {
    transform: scale(1.06);
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.search-result__content {
    min-width: 0;
}

.search-result__name {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color: var(--text);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;

    transition: color .18s ease;
}

.search-result:hover .search-result__name {
    color: var(--primary);
}


/* =========================================================
   META
========================================================= */

.search-result__meta {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 600;
}


/* Category */

.search-result__category {
    color: var(--primary);

    font-weight: 700;
}


/* Green dot */

.search-result__dot {
    width: 4px;
    height: 4px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #20B26B;
}


/* Stock */

.search-result__stock {
    color: #669176;
}


/* =========================================================
   PRICE SIDE
========================================================= */

.search-result__right {
    position: relative;

    min-width: 72px;

    padding-right: 20px;

    text-align: right;
}

.search-result__right > small {
    display: block;

    margin-bottom: 1px;

    color: var(--muted);

    font-size: 6px;
    font-weight: 600;
}


/* Price row */

.search-result__price-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;

    gap: 4px;
}


/* Main price */

.search-result__price {
    color: var(--primary);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: -.03em;

    white-space: nowrap;
}


/* MRP */

.search-result__price-row del {
    color: #AAA5B1;

    font-size: 7px;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   ARROW
========================================================= */

.search-result__arrow {
    position: absolute;

    top: 50%;
    right: 0;

    transform: translateY(-50%);

    width: 17px;
    height: 17px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    color: var(--primary);

    background: var(--primary-soft);

    font-size: 8px;

    transition: .18s ease;
}

.search-result:hover .search-result__arrow {
    color: #fff;

    background: var(--primary);

    transform:
        translateY(-50%)
        translateX(2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .header-search-results {
        padding: 4px;

        border-radius: 13px;
    }


    .search-result {
        grid-template-columns: 45px minmax(0, 1fr) auto;

        gap: 8px;

        min-height: 57px;

        padding: 6px;

        border-radius: 10px;
    }


    .search-result__image {
        width: 45px;
        height: 45px;

        border-radius: 9px;
    }


    .search-result__name {
        font-size: 9px;
    }


    .search-result__meta {
        margin-top: 3px;

        font-size: 10px;
    }


    .search-result__right {
        min-width: 61px;

        padding-right: 17px;
    }


    .search-result__price {
        font-size: 11px;
    }


    .search-result__price-row del {
        display: none;
    }


    .search-result__right > small {
        font-size: 5px;
    }


    .search-result__arrow {
        width: 15px;
        height: 15px;

        font-size: 7px;
    }

}

/* =========================================================
   SEARCH - NO PRODUCTS FOUND
========================================================= */

.search-empty {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 18px 16px;

    border: 1px solid rgba(109, 66, 245, .08);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--primary-faint),
            #fff
        );
}


/* Icon */

.search-empty__icon {
    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: var(--primary);

    background: var(--primary-soft);

    font-size: 17px;
}


/* Content */

.search-empty__content {
    min-width: 0;
}

.search-empty__content strong {
    display: block;

    margin-bottom: 4px;

    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}

.search-empty__content p {
    max-width: 330px;

    margin: 0;

    color: var(--muted);

    font-size: 7px;
    font-weight: 500;
    line-height: 1.55;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .search-empty {
        gap: 10px;

        padding: 14px 11px;

        border-radius: 11px;
    }

    .search-empty__icon {
        width: 39px;
        height: 39px;

        border-radius: 11px;

        font-size: 15px;
    }

    .search-empty__content strong {
        font-size: 9px;
    }

    .search-empty__content p {
        font-size: 6px;
    }

}