/* =========================================================
   MODORA SEARCH V2.1
========================================================= */

.mv21-search-stage,
.mv21-search-stage * {
    box-sizing:border-box;
}

.mv21-search-stage {
    position:relative;
    z-index:120;
    padding:18px 0 14px;
    overflow:visible;
}

.mv21-search-panel {
    position:relative;
    display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(480px,1.28fr);
    align-items:center;
    gap:55px;
    min-height:190px;
    padding:34px 42px;

    background:
        radial-gradient(
            circle at 6% 20%,
            rgba(255,255,255,.62),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #d8bd8c 0%,
            #eadcc2 45%,
            #f4ede2 100%
        );

    border:1px solid rgba(25,20,12,.08);
    overflow:visible;
}

.mv21-search-panel:after {
    content:"M";
    position:absolute;
    right:26px;
    top:50%;
    transform:translateY(-50%);
    font-family:Georgia,serif;
    font-size:165px;
    line-height:1;
    color:rgba(30,20,10,.035);
    pointer-events:none;
}

.mv21-search-copy {
    position:relative;
    z-index:2;
}

.mv21-search-eyebrow {
    margin-bottom:11px;
    font-size:9px;
    font-weight:900;
    letter-spacing:2.3px;
    color:#72562d;
}

.mv21-search-copy h2 {
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:38px;
    line-height:.98;
    font-weight:400;
    letter-spacing:-1.7px;
    color:#15120d;
}

.mv21-search-copy h2 em {
    display:block;
    color:#886532;
    font-weight:400;
}

.mv21-search-copy p {
    max-width:430px;
    margin:14px 0 0;
    color:rgba(20,15,10,.60);
    font-size:12px;
    line-height:1.65;
}

.mv21-search-box {
    position:relative;
    z-index:5;
    min-width:0;
}

.mv21-search-input-wrap {
    width:100%;
    min-height:64px;

    display:flex;
    align-items:center;

    background:#fff;
    border:1px solid rgba(20,20,20,.10);

    box-shadow:
        0 18px 42px rgba(45,32,13,.12);

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

.mv21-search-input-wrap:focus-within {
    transform:translateY(-2px);
    border-color:rgba(133,96,43,.42);

    box-shadow:
        0 24px 55px rgba(45,32,13,.18);
}

.mv21-search-icon {
    width:62px;
    min-width:62px;
    height:62px;

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

    color:#99713b;
}

#mv21-search-input {
    width:100%;
    height:62px;

    padding:0 10px 0 0;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    color:#171717;
    font-family:Poppins,Arial,sans-serif;
    font-size:15px;
    font-weight:500;

    appearance:none;
    -webkit-appearance:none;
}

#mv21-search-input::placeholder {
    color:#8c867d;
    opacity:1;
}

.mv21-search-clear {
    width:54px;
    min-width:54px;
    height:62px;

    display:none;
    align-items:center;
    justify-content:center;

    padding:0;

    border:0;
    background:transparent;

    color:#968a79;
    font-size:24px;
    cursor:pointer;
}

.mv21-search-hints {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;

    margin-top:11px;

    color:#705a38;
    font-size:9px;
    font-weight:700;
}

.mv21-search-hints > span {
    margin-right:3px;
    opacity:.75;
}

.mv21-search-hints button {
    padding:5px 9px;

    border:1px solid rgba(64,44,17,.16);
    background:rgba(255,255,255,.30);

    color:#493718;
    font:inherit;

    cursor:pointer;
    transition:.15s ease;
}

.mv21-search-hints button:hover {
    background:#111;
    border-color:#111;
    color:#fff;
}


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

.mv21-search-dropdown {
    display:none;

    position:fixed;
    z-index:2147483000;

    background:#fff;
    border:1px solid rgba(20,20,20,.10);

    box-shadow:
        0 30px 80px rgba(0,0,0,.22);

    overflow:hidden;
}

.mv21-search-dropdown.is-visible {
    display:block;
}

.mv21-search-results {
    max-height:min(68vh,650px);
    overflow-y:auto;
    padding:13px;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #fbf8f2 100%
        );
}

.mv21-search-results::-webkit-scrollbar {
    width:7px;
}

.mv21-search-results::-webkit-scrollbar-thumb {
    background:#ccb07d;
}


/* section */

.mv21-s-section {
    padding:4px 0 12px;
}

.mv21-s-title {
    padding:8px 8px 9px;

    color:#87652f;

    font-size:9px;
    font-weight:900;
    letter-spacing:1.8px;
    text-transform:uppercase;
}


/* PRODUCTS */

.mv21-s-products {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.mv21-s-product {
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    align-items:center;
    gap:12px;

    min-width:0;
    padding:8px;

    color:#111 !important;
    text-decoration:none !important;

    background:#fff;
    border:1px solid rgba(20,20,20,.06);

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

.mv21-s-product:hover {
    transform:translateY(-2px);
    background:#faf5eb;
}

.mv21-s-img {
    width:72px;
    height:88px;

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

    overflow:hidden;
    background:#f5f3ef;
}

.mv21-s-img img {
    display:block;

    width:auto !important;
    height:auto !important;

    max-width:92% !important;
    max-height:92% !important;

    margin:auto;

    object-fit:contain !important;
    object-position:center !important;
}

.mv21-s-info {
    min-width:0;
}

.mv21-s-name {
    display:-webkit-box;

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

    color:#1a1a1a;
    font-size:11px;
    line-height:1.4;
    font-weight:700;
}

.mv21-s-meta {
    margin-top:4px;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    color:#8a8378;
    font-size:9px;
}

.mv21-s-price-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;

    margin-top:6px;
}

.mv21-s-price {
    color:#8d6732;
    font-size:11px;
    font-weight:900;
}

.mv21-s-old {
    color:#aaa;
    font-size:10px;
    text-decoration:line-through;
}

.mv21-s-discount {
    padding:2px 5px;

    background:#111;
    color:#fff;

    font-size:8px;
    font-weight:900;
}


/* brands/categories */

.mv21-s-link {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;

    padding:9px 10px;

    color:#181818 !important;
    text-decoration:none !important;

    border-bottom:1px solid rgba(20,20,20,.055);
}

.mv21-s-link:hover {
    background:#f7f1e7;
}

.mv21-s-link strong {
    font-size:11px;
    font-weight:700;
}

.mv21-s-link small {
    color:#9b9387;
    font-size:9px;
}

.mv21-s-empty {
    padding:28px 16px;
    text-align:center;
    color:#837d73;
    font-size:12px;
}

.mv21-search-footer {
    padding:10px 14px;

    border-top:1px solid rgba(0,0,0,.07);

    background:#f5efe4;
    color:#817258;

    font-size:9px;
    font-weight:700;
    text-align:center;
    letter-spacing:.4px;
}


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

@media(max-width:900px) {

    .mv21-search-panel {
        grid-template-columns:1fr;
        gap:24px;

        padding:29px 30px;
    }

    .mv21-search-copy {
        max-width:650px;
    }

    .mv21-search-copy h2 {
        font-size:34px;
    }
}

@media(max-width:640px) {

    .mv21-search-stage {
        padding-top:10px;
    }

    .mv21-search-panel {
        gap:20px;
        min-height:0;
        padding:25px 19px;
    }

    .mv21-search-copy h2 {
        font-size:31px;
    }

    .mv21-search-copy p {
        font-size:11px;
    }

    .mv21-search-input-wrap,
    #mv21-search-input,
    .mv21-search-icon,
    .mv21-search-clear {
        min-height:56px;
        height:56px;
    }

    .mv21-search-icon {
        width:52px;
        min-width:52px;
    }

    #mv21-search-input {
        font-size:16px;
    }

    .mv21-s-products {
        grid-template-columns:1fr;
    }

    .mv21-search-hints {
        gap:5px;
    }
}

/* FIX: search input text visibility */
#mv21-search-input,
#mv21-search-input:focus,
#mv21-search-input:active {
    color:#171717 !important;
    -webkit-text-fill-color:#171717 !important;
    caret-color:#8d6732 !important;
}

#mv21-search-input::placeholder {
    color:#8c867d !important;
    -webkit-text-fill-color:#8c867d !important;
    opacity:1 !important;
}

#mv21-search-input:-webkit-autofill,
#mv21-search-input:-webkit-autofill:hover,
#mv21-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color:#171717 !important;
    caret-color:#8d6732 !important;
}
