/* =========================================================
   KihCarpet Search Page
   ========================================================= */

.kih-search-page,
.kih-search-page * {
    box-sizing: border-box;
}


/* =========================================================
   PAGE
   ========================================================= */

.kih-search-page {
    width: 100%;

    padding:
        36px
        0
        70px;

    background:
        linear-gradient(
            180deg,
            #fbfdfb 0%,
            #f6faf7 100%
        );

    color:
        #24442f;
}


.kih-search-page__container {
    width:
        min(
            1380px,
            calc(100% - 48px)
        );

    margin:
        0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.kih-search-page__header {
    max-width: 760px;

    margin:
        0 auto
        24px;

    text-align: center;
}


.kih-search-page__eyebrow {
    display: inline-block;

    margin-bottom: 7px;

    color:
        #169447;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.kih-search-page__title {
    margin:
        0 0 9px !important;

    color:
        #123f24 !important;

    font-size:
        clamp(
            30px,
            4vw,
            45px
        ) !important;

    line-height: 1.1;

    font-weight:
        800 !important;
}


.kih-search-page__description {
    margin: 0;

    color:
        #65776b;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   SEARCH FORM
   ========================================================= */

.kih-search-page__form-wrap {
    position: relative;

    width:
        min(
            900px,
            100%
        );

    margin:
        0 auto
        26px;
}


.kih-search-page__form-wrap
.kih-search-page__form {
    width: 100%;
    margin: 0;
}


.kih-search-page__form-wrap
.kih-live-search {
    z-index: 180;
}


.kih-search-page__form {
    position: relative;

    width:
        min(
            900px,
            100%
        );

    height: 60px;

    margin:
        0 auto
        26px;

    display: flex;

    align-items: center;

    background: #fff;

    border:
        1px solid
        #cde1d2;

    border-radius: 16px;

    box-shadow:
        0 10px 34px
        rgba(
            26,
            78,
            40,
            .08
        );

    overflow: hidden;
}


.kih-search-page__form:focus-within {
    border-color:
        #7bc390;
}


.kih-search-page__form-icon {
    flex:
        0 0 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #168c41;
}


.kih-search-page__form-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
}


.kih-search-page__input {
    flex: 1;

    min-width: 0;

    height:
        58px !important;

    margin:
        0 !important;

    padding:
        0 8px !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #263f2e !important;

    font-size:
        15px !important;

    outline:
        0 !important;

    box-shadow:
        none !important;
}


.kih-search-page__submit {
    height: 42px;

    margin-right: 8px;

    padding:
        0 22px !important;

    border:
        0 !important;

    border-radius: 10px;

    background:
        #168e42 !important;

    color:
        #fff !important;

    font-size: 13px;

    font-weight: 750;

    cursor: pointer;
}


.kih-search-page__submit:hover {
    background:
        #0d7d38 !important;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.kih-search-page__summary {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin:
        30px 0
        18px;

    padding:
        13px 16px;

    background: #fff;

    border:
        1px solid
        #d8e7dc;

    border-radius: 12px;

    color:
        #617068;

    font-size: 13px;
}


.kih-search-page__summary strong {
    color:
        #154728;
}


.kih-search-page__count {
    white-space: nowrap;
}


/* =========================================================
   NOTICE
   ========================================================= */

.kih-search-page__notice {
    max-width: 900px;

    margin: 0 auto;

    padding: 13px;

    background:
        #fff7dc;

    border:
        1px solid
        #ead9a5;

    border-radius: 10px;

    color:
        #70591c;

    text-align: center;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.kih-search-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: 24px;
}


.kih-search-filters:empty {
    display: none;
}


.kih-search-layout:has(
    .kih-search-filters:not(:empty)
) {
    grid-template-columns:
        300px
        minmax(0, 1fr);
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.kih-search-products {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 18px;

    align-items: start;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.kih-search-product {
    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: #fff;

    border:
        1px solid
        #d4e5d8;

    border-radius: 15px;

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


.kih-search-product:hover {
    transform:
        translateY(-2px);

    border-color:
        #b6d9c0;

    box-shadow:
        0 10px 26px
        rgba(
            24,
            81,
            40,
            .08
        );
}


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

.kih-search-product__image {
    display: block;

    aspect-ratio:
        1 / 1.12;

    overflow: hidden;

    background:
        #f3f6f3;
}


.kih-search-product__image img {
    display: block;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    object-fit: cover;
}


/* =========================================================
   BODY
   ========================================================= */

.kih-search-product__body {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 11px;
}


/* =========================================================
   STOCK
   ========================================================= */

.kih-search-product__stock {
    margin-bottom: 5px;

    font-size: 9.5px;

    font-weight: 650;
}


.kih-search-product__stock.is-in-stock {
    color:
        #188d43;
}


.kih-search-product__stock.is-out-of-stock {
    color:
        #aa5045;
}


/* =========================================================
   TITLE
   ========================================================= */

.kih-search-product__title {
    margin:
        0 0 5px !important;

    color:
        #193c26 !important;

    font-size:
        12.5px !important;

    line-height: 1.35;

    font-weight:
        700 !important;
}


.kih-search-product__title a {
    color:
        inherit !important;

    text-decoration:
        none !important;
}


.kih-search-product__title a:hover {
    color:
        #12823d !important;
}


/* =========================================================
   SKU
   ========================================================= */

.kih-search-product__sku {
    margin-bottom: 6px;

    color:
        #879187;

    font-size: 9px;
}


/* =========================================================
   BASE PRICE
   ========================================================= */

.kih-search-product__price {
    margin:
        2px 0 9px;

    color:
        #1ea24b;

    font-size: 17px;

    line-height: 1.25;

    font-weight: 750;
}


.kih-search-product__price del {
    color:
        #929b94;

    font-size: 10px;
}


.kih-search-product__price ins {
    text-decoration: none;
}


/* =========================================================
   VARIANTS BLOCK
   ========================================================= */

.kih-search-product__variants {
    margin:
        0 0 10px;

    padding: 8px;

    background:
        #f8fcf9;

    border:
        1px solid
        #d8e9dc;

    border-radius: 10px;
}


.kih-search-product__variants-head {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    margin-bottom: 6px;

    color:
        #405e49;

    font-size: 9.5px;

    font-weight: 700;
}


.kih-search-product__variants-count {
    display: inline-flex;

    justify-content: center;

    align-items: center;

    min-width: 19px;
    height: 19px;

    padding:
        0 5px;

    background:
        #e5f4e9;

    border:
        1px solid
        #cae5d1;

    border-radius:
        999px;

    color:
        #16823d;

    font-size: 8px;
}


/* =========================================================
   ASYNC LOADING
   ========================================================= */

.kih-search-product__variants-loading {
    min-height: 45px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 7px;

    color:
        #718078;

    font-size: 8.5px;

    text-align: center;
}


.kih-search-product__variants-loading::before {
    content: "";

    width: 13px;
    height: 13px;

    flex:
        0 0 13px;

    margin-right: 6px;

    border:
        2px solid
        #d4e8d9;

    border-top-color:
        #199248;

    border-radius:
        50%;

    animation:
        kihSearchCardVariantSpin
        .7s linear infinite;
}


.kih-search-product__variants-loading.is-error {
    color:
        #a25b52;
}


.kih-search-product__variants-loading.is-error::before {
    display: none;
}


@keyframes kihSearchCardVariantSpin {

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   VARIANT LIST
   ========================================================= */

.kih-search-product__variants-list {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 5px;

    max-height: 158px;

    overflow-y: auto;

    padding-right: 3px;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        #9ac7a6
        #edf5ef;
}


.kih-search-product__variants-list::-webkit-scrollbar {
    width: 5px;
}


.kih-search-product__variants-list::-webkit-scrollbar-track {
    background:
        #edf5ef;
}


.kih-search-product__variants-list::-webkit-scrollbar-thumb {
    background:
        #9ac7a6;

    border-radius:
        999px;
}


/* =========================================================
   VARIANT
   ========================================================= */

.kih-search-product__variant {
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 2px;

    min-width: 0;

    min-height: 45px;

    padding:
        4px;

    background:
        #edf8f0;

    border:
        1px solid
        #c4e2cc;

    border-radius:
        8px;

    color:
        #0b7834 !important;

    text-align: center;

    text-decoration:
        none !important;

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


.kih-search-product__variant:hover {
    background:
        #ddf3e3;

    border-color:
        #78c08b;

    transform:
        translateY(-1px);
}


.kih-search-product__variant-value {
    max-width: 100%;

    overflow: hidden;

    color:
        #087332;

    font-size: 9.5px;

    line-height: 1.15;

    font-weight: 800;

    text-overflow: ellipsis;
}


.kih-search-product__variant-price {
    max-width: 100%;

    color:
        #1a9d49;

    font-size: 8.5px;

    font-weight: 750;

    white-space: nowrap;
}


/* =========================================================
   OUT OF STOCK VARIANT
   ========================================================= */

.kih-search-product__variant.is-out-of-stock {
    background:
        #f5f6f5;

    border-color:
        #dedfdf;

    opacity: .7;
}


.kih-search-product__variant.is-out-of-stock
.kih-search-product__variant-value {
    color:
        #858d87;

    text-decoration:
        line-through;
}


.kih-search-product__variant.is-out-of-stock
.kih-search-product__variant-price {
    color:
        #999;
}


.kih-search-product__variant-stock {
    color:
        #a15b53;

    font-size: 7px;

    font-weight: 700;

    text-transform:
        uppercase;
}


/* =========================================================
   PRODUCT BUTTON
   ========================================================= */

.kih-search-product__button {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 39px;

    margin-top: auto;

    padding:
        7px 10px;

    background:
        #edf8f0;

    border:
        1px solid
        #bee0c7;

    border-radius: 9px;

    color:
        #087731 !important;

    font-size: 10.5px;

    font-weight: 750;

    text-decoration:
        none !important;
}


.kih-search-product__button:hover {
    background:
        #e1f3e6;
}


/* =========================================================
   EMPTY
   ========================================================= */

.kih-search-empty {
    padding:
        65px 20px;

    background: #fff;

    border:
        1px solid
        #d9e8dd;

    border-radius: 15px;

    text-align: center;
}


.kih-search-empty__icon {
    margin-bottom: 12px;

    color:
        #6fb683;

    font-size: 44px;
}


.kih-search-empty h2 {
    margin:
        0 0 8px !important;

    color:
        #183e27 !important;

    font-size:
        23px !important;
}


.kih-search-empty p {
    margin: 0;

    color:
        #77847b;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.kih-search-pagination {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 30px;
}


.kih-search-pagination__item {
    min-width: 37px;
    height: 37px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    background: #fff;

    border:
        1px solid
        #d1e4d6;

    border-radius: 9px;

    color:
        #395b44 !important;

    font-size: 12px;

    font-weight: 650;

    text-decoration:
        none !important;
}


.kih-search-pagination__item:hover {
    background:
        #edf8f0;
}


.kih-search-pagination__item.is-current {
    background:
        #168e42;

    border-color:
        #168e42;

    color:
        #fff !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .kih-search-products {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .kih-search-layout:has(
        .kih-search-filters:not(:empty)
    ) {
        grid-template-columns:
            250px
            minmax(0, 1fr);
    }

}


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

@media (max-width: 767px) {

    .kih-search-page {
        padding:
            25px
            0
            48px;
    }


    .kih-search-page__container {
        width:
            calc(
                100% - 16px
            );
    }


    .kih-search-page__header {
        margin-bottom:
            18px;
    }


    .kih-search-page__title {
        font-size:
            28px !important;
    }


    .kih-search-page__description {
        font-size:
            12px;
    }


    .kih-search-page__form {
        height: 51px;

        margin-bottom:
            20px;

        border-radius:
            12px;
    }


    .kih-search-page__form-icon {
        flex-basis:
            41px;
    }


    .kih-search-page__input {
        height:
            49px !important;

        font-size:
            12.5px !important;
    }


    .kih-search-page__submit {
        height: 37px;

        margin-right: 6px;

        padding:
            0 12px !important;

        font-size: 11px;
    }


    .kih-search-page__summary {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 23px;

        padding:
            10px 11px;
    }


    .kih-search-layout,
    .kih-search-layout:has(
        .kih-search-filters:not(:empty)
    ) {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .kih-search-products {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px;
    }


    .kih-search-product {
        border-radius: 11px;
    }


    .kih-search-product__body {
        padding: 7px;
    }


    .kih-search-product__stock {
        font-size: 8px;
    }


    .kih-search-product__title {
        font-size:
            10.5px !important;
    }


    .kih-search-product__sku {
        font-size: 8px;
    }


    .kih-search-product__price {
        font-size: 15px;
    }


    .kih-search-product__variants {
        padding: 6px;
    }


    .kih-search-product__variants-head {
        font-size: 8px;
    }


    .kih-search-product__variants-list {
        grid-template-columns:
            1fr;

        max-height: 135px;
    }


    .kih-search-product__variant {
        min-height: 39px;
    }


    .kih-search-product__variant-value {
        font-size: 8.5px;
    }


    .kih-search-product__variant-price {
        font-size: 7.5px;
    }


    .kih-search-product__button {
        min-height: 35px;

        font-size: 9px;
    }

}