/* =========================================================
   HEADER GLOBAL
   Comparadordeprecios.com
   ========================================================= */

.site-header.product-search-header{
    position:sticky;
    top:0;
    z-index:40;
    width:100%;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid #e2e8f0;
    box-shadow:0 1px 0 rgba(15,23,42,.03);
}

.site-header.product-search-header .product-search-header-inner{
    width:min(1100px,calc(100% - 32px));
    height:72px;
    margin:0 auto;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
}


/* LOGO */

.site-header.product-search-header .header-brand-logo{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.site-header.product-search-header .header-brand-logo img{
    display:block;
    width:auto;
    height:36px;
    max-width:100px;
    object-fit:contain;
}


/* BUSCADOR */

.product-header-search{
    flex:1;
    min-width:0;
    max-width:1100px;
    display:flex;
    align-items:center;
    gap:8px;
}

.product-header-query-wrap{
    position:relative;
    flex:1;
    min-width:0;
}

.product-header-query-wrap > input{
    width:100%;
    height:42px;
    box-sizing:border-box;
    border:1px solid #d7e1ec;
    border-radius:11px;
    background:#fff;
    padding:0 42px 0 42px;
    font:inherit;
    color:#172b45;
    outline:none;
    box-shadow:0 2px 8px rgba(18,68,145,.03);
}

.product-header-query-wrap > input:focus{
    border-color:#9fc4f4;
    box-shadow:0 0 0 3px rgba(17,112,206,.08);
}

.product-header-search-icon{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:22px;
    color:#718197;
    pointer-events:none;
}


/* SUGERENCIAS */

.product-header-suggestions{
    position:absolute;
    z-index:70;
    left:0;
    right:0;
    top:48px;
    background:#fff;
    border:1px solid #dbe5f0;
    border-radius:12px;
    padding:6px;
    box-shadow:0 16px 40px rgba(15,42,75,.14);
    max-height:360px;
    overflow:auto;
}

.product-header-suggestions button{
    display:block;
    width:100%;
    border:0;
    background:#fff;
    text-align:left;
    padding:10px 12px;
    border-radius:8px;
    color:#172b45;
    cursor:pointer;
}

.product-header-suggestions button:hover{
    background:#f5f8fc;
}

.product-header-suggestions span{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}

.product-header-suggestions small{
    color:#8190a5;
    font-size:11px;
}


/* BOTONES */

.product-header-action{
    height:42px;
    box-sizing:border-box;
    border:0;
    border-radius:10px;
    padding:0 15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font:inherit;
    white-space:nowrap;
    text-decoration:none;
    cursor:pointer;
}

.product-header-action svg{
    flex:0 0 auto;
}

.product-header-scan{
    background:#f1f5f9;
    color:#1170CE;
    font-weight:600;
}

.product-header-scan:hover{
    background:#e8f0f8;
}

.product-header-submit{
    background:#1170CE;
    color:#fff;
    font-weight:600;
}

.product-header-submit:hover{
    background:#0d62b7;
}

.product-header-login{
    background:#fff;
    color:#1170CE;
    border:1px solid #cfe0f4;
    font-weight:600;
}

.product-header-login:hover{
    background:#f7fbff;
}


/* MÓVIL */

@media(max-width:700px){

    .site-header.product-search-header .product-search-header-inner{
        width:calc(100% - 16px);
        height:64px;
        gap:6px;
    }

    .site-header.product-search-header .header-brand-logo img{
        height:28px;
        max-width:78px;
    }

    .product-header-search{
        gap:6px;
    }

    .product-header-query-wrap > input{
        padding-left:36px;
        padding-right:10px;
    }

    .product-header-search-icon{
        left:12px;
    }

    .product-header-action{
        width:42px;
        min-width:42px;
        padding:0;
        gap:0;
    }

    .product-header-action-label{
        display:none;
    }

    .product-header-suggestions span{
        display:block;
    }

    .product-header-suggestions small{
        display:block;
        margin-top:2px;
    }
}