/* Barra di ricerca nell'intestazione (_SearchInputClerkPartial), caricata dopo style.css */
/* stesse misure della barra originale (331 x 38 px, 34 px su smartphone): lo spazio accanto serve ad altri elementi */
.vt-hs { position: relative; display: flex; align-items: center; width: 331px; max-width: 55rem; height: 38px; background: var(--White);
    border: .15rem solid #6D6D6D; border-radius: 3rem; padding: 0 3px 0 0; transition: border-color .2s, box-shadow .2s; }
.vt-hs:hover { border-color: var(--Black); }
.vt-hs:focus-within { border-color: var(--Red); box-shadow: 0 0 0 .4rem rgba(219, 56, 49, .18); }
.vt-hs-ico { flex: none; width: 1.8rem; height: 1.8rem; margin: 0 1rem 0 1.4rem; fill: none; stroke: var(--Black); stroke-width: 2.2; stroke-linecap: round; }
.vt-hs-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--Black);
    font: 500 1.4rem Montserrat, sans-serif; padding: 0; }
.vt-hs-input::placeholder { color: #6D6D6D; opacity: 1; }
.vt-hs-input::-webkit-search-cancel-button { display: none; }
.vt-hs-clear { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #6D6D6D; font-size: 2rem; line-height: 1; }
.vt-hs-clear:hover { background: var(--LightGrey); color: var(--Black); }
.vt-hs-go { flex: none; height: 30px; padding: 0 1.6rem; border: 0; border-radius: 3rem; background: var(--Red); color: var(--White);
    font: 700 1.2rem Montserrat, sans-serif; text-transform: uppercase; transition: background .2s; }
.vt-hs-go:hover { background: var(--Black); }
.vt-hs button:focus-visible { outline: .3rem solid var(--Blue); outline-offset: .2rem; }
header .search-bar.clerk { z-index: 1000; }
@media (max-width: 991px) {
    .vt-hs { width: 100%; max-width: none; height: 34px; }
    .vt-hs-go { height: 26px; padding: 0 1.2rem; }
    .vt-hs-clear { width: 26px; height: 26px; }
}

/* Intestazione sotto i 1200 px (.nav-mobile): la ricerca sta nella barra in alto tra logo e icone, come
   su desktop e con la stessa altezza; sotto i 768 px non ci sta e va a capo a tutta larghezza */
.nav-mobile .search-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; padding: 0 2.4rem; }
.nav-mobile .search-nav .vt-hs { width: 100%; max-width: 44rem; }
@media (min-width: 768px) {
    .nav-mobile .search-nav .vt-hs { height: 38px; }
    .nav-mobile .search-nav .vt-hs-go { height: 30px; padding: 0 1.6rem; }
}
@media (max-width: 767px) {
    .nav-mobile { flex-wrap: wrap; }
    .nav-mobile .search-nav { order: 3; flex-basis: 100%; padding: 1.2rem 0 0; }
    .nav-mobile .search-nav .vt-hs { max-width: none; }
}

/* Intestazione desktop (nav.search, da 1200 px): la riga non va mai a capo. Con l'accesso cantiere,
   servizio clienti e profilo prendono più spazio e il carrello finiva sotto il logo: ora è la ricerca
   a stringersi (fino a 331 px quando c'è posto). Sotto i 1400 px meno aria tra le colonne */
@media (min-width: 992px) {
    header nav.search .row { flex-wrap: nowrap; }
    header nav.search .row > .col-lg { min-width: 0; }
    header nav.search .vt-hs { width: 100%; max-width: 331px; }
}
@media (min-width: 992px) and (max-width: 1399px) {
    header nav.search .header-auto-col { padding-left: 1.2rem; padding-right: 1.2rem; }
}