/*
============================================================
PREMIUM ECOLÓGICA
AJAXSEARCH — BOARD 2 V8B
============================================================
*/


/* ========================================================
   CAMPO
======================================================== */

.premium-board-header__search.block-swissup-ajaxsearch {
    position: relative !important;
    overflow: visible !important;
}

.premium-board-header__search
.twitter-typeahead {
    display: block !important;
    width: 100% !important;
}

.premium-board-header__search #search {
    box-sizing: border-box !important;

    width: 100% !important;
    height: 42px !important;

    padding: 0 46px 0 17px !important;

    color: #23342a !important;
    background: #f6f9f7 !important;

    border: 1px solid #dce7df !important;
    border-radius: 22px !important;

    font-size: 13px !important;

    box-shadow: none !important;
}

.premium-board-header__search #search:focus {
    background: #fff !important;

    border-color: #168846 !important;

    box-shadow:
        0 0 0 3px rgba(22,136,70,.08) !important;
}


/* ========================================================
   DROPDOWN
======================================================== */

.premium-board-header__search
.tt-menu.block-swissup-ajaxsearch-results {
    box-sizing: border-box !important;

    position: absolute !important;

    top: calc(100% + 8px) !important;
    left: 50% !important;
    right: auto !important;

    width: min(610px, calc(100vw - 32px)) !important;
    min-width: 100% !important;

    max-height: 590px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    transform: translateX(-50%) !important;

    background: #fff !important;

    border: 1px solid #dfe8e2 !important;
    border-radius: 14px !important;

    box-shadow:
        0 18px 50px rgba(15,75,46,.15),
        0 4px 14px rgba(15,75,46,.06) !important;

    z-index: 10050 !important;
}


/* ========================================================
   CABEÇALHO QUE O JS V8B INSERE
======================================================== */

.premium-ajax-v8b__header {
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 44px;

    padding: 0 18px;

    background: #fbfcfb;

    border-bottom: 1px solid #e7ede9;
}

.premium-ajax-v8b__header strong {
    color: #143f2b;

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

    letter-spacing: .04em;

    text-transform: uppercase;
}

.premium-ajax-v8b__header span {
    color: #78847d;

    font-size: 10px;
}


/* ========================================================
   DATASET
======================================================== */

.premium-board-header__search
.tt-dataset.wrapper.list {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ========================================================
   SUGESTÕES
======================================================== */

.premium-board-header__search
.tt-suggestion {
    box-sizing: border-box !important;

    position: relative !important;

    min-height: 104px !important;

    margin: 0 !important;
    padding: 13px 17px !important;

    background: #fff !important;

    border: 0 !important;
    border-bottom: 1px solid #edf1ee !important;

    cursor: pointer !important;

    transition:
        background .15s ease !important;
}

.premium-board-header__search
.tt-suggestion:last-child {
    border-bottom: 0 !important;
}

.premium-board-header__search
.tt-suggestion:hover,
.premium-board-header__search
.tt-suggestion.tt-cursor {
    background: #f5faf6 !important;
}


/* Links */

.premium-board-header__search
.tt-suggestion a,
.premium-board-header__search
.tt-suggestion a:visited {
    color: #24352b !important;

    text-decoration: none !important;
}


/* ========================================================
   IMAGENS
======================================================== */

.premium-board-header__search
.tt-suggestion img {
    width: 76px !important;
    height: 76px !important;

    max-width: 76px !important;
    max-height: 76px !important;

    margin-right: 15px !important;

    object-fit: contain !important;

    background: #f7faf8 !important;

    border-radius: 9px !important;
}


/*
 * O template Swissup possui variações de markup.
 * Estes seletores cobrem as classes usuais sem alterar vendor.
 */

.premium-board-header__search
.tt-suggestion .product-image,
.premium-board-header__search
.tt-suggestion .image {
    flex: 0 0 76px !important;
}


/* ========================================================
   NOME DO PRODUTO
======================================================== */

.premium-board-header__search
.tt-suggestion strong,
.premium-board-header__search
.tt-suggestion .name,
.premium-board-header__search
.tt-suggestion .product-name {
    color: #173f2c !important;

    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.32 !important;
}


/* Highlight da busca */

.premium-board-header__search
.tt-highlight {
    color: #168846 !important;
    font-weight: 800 !important;
}


/* ========================================================
   PREÇO
======================================================== */

.premium-board-header__search
.tt-suggestion .price,
.premium-board-header__search
.tt-suggestion [class*="price"] {
    color: #168846 !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}


/* ========================================================
   INFORMAÇÕES SECUNDÁRIAS / SKU
======================================================== */

.premium-board-header__search
.tt-suggestion small,
.premium-board-header__search
.tt-suggestion .sku,
.premium-board-header__search
.tt-suggestion [class*="sku"] {
    color: #8a948e !important;

    font-size: 9.5px !important;
    line-height: 1.35 !important;
}


/* ========================================================
   SETA VISUAL
======================================================== */

.premium-board-header__search
.tt-suggestion:after {
    content: "›";

    position: absolute;

    top: 50%;
    right: 17px;

    color: #168846;

    font-size: 21px;
    font-weight: 400;

    transform: translateY(-50%);
}


/* ========================================================
   RODAPÉ — VER TODOS
======================================================== */

.premium-ajax-v8b__footer {
    position: sticky;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    min-height: 51px;

    padding: 8px 17px;

    background: #fbfcfb;

    border-top: 1px solid #dfe8e2;

    z-index: 3;
}

.premium-ajax-v8b__footer span {
    color: #69776f;

    font-size: 10px;
}

.premium-ajax-v8b__footer a,
.premium-ajax-v8b__footer a:visited {
    display: inline-flex;
    align-items: center;

    min-height: 33px;

    padding: 0 14px;

    color: #fff !important;
    background: #168846;

    border-radius: 17px;

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

    text-decoration: none !important;
}

.premium-ajax-v8b__footer a:hover {
    background: #0f6f38;
}


/* ========================================================
   SCROLL
======================================================== */

.premium-board-header__search
.tt-menu::-webkit-scrollbar {
    width: 6px;
}

.premium-board-header__search
.tt-menu::-webkit-scrollbar-thumb {
    background: #c7d8cd;
    border-radius: 10px;
}


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

@media (max-width: 767px) {

    .premium-board-header__search
    .tt-menu.block-swissup-ajaxsearch-results {
        position: absolute !important;

        top: calc(100% + 6px) !important;
        left: 0 !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        max-height: min(68vh, 520px) !important;

        transform: none !important;

        border-radius: 12px !important;
    }


    .premium-board-header__search
    .tt-suggestion {
        min-height: 89px !important;

        padding: 10px 12px !important;
    }


    .premium-board-header__search
    .tt-suggestion img {
        width: 62px !important;
        height: 62px !important;

        max-width: 62px !important;
        max-height: 62px !important;

        margin-right: 10px !important;
    }


    .premium-board-header__search
    .tt-suggestion strong,
    .premium-board-header__search
    .tt-suggestion .name,
    .premium-board-header__search
    .tt-suggestion .product-name {
        font-size: 12px !important;
    }


    .premium-board-header__search
    .tt-suggestion .price,
    .premium-board-header__search
    .tt-suggestion [class*="price"] {
        font-size: 12px !important;
    }


    .premium-board-header__search
    .tt-suggestion:after {
        right: 10px;
    }


    .premium-ajax-v8b__header {
        padding-left: 12px;
        padding-right: 12px;
    }


    .premium-ajax-v8b__footer {
        padding-left: 12px;
        padding-right: 12px;
    }

}