/* =========================================================
   Improntae Blocks — riscrittura stile: header
   Classi verificate nel tema Warehouse 4.8.2: #desktop-header,
   .header-nav, .header-btn, .cart-toogle (il refuso è del tema),
   .cart-products-count, .logo-wrapper, .col-search.

   Il modulo di ricerca non fa parte del tema, quindi il suo markup
   interno non è verificabile: qui si stila per contenitore
   (.col-search / .search-widget) agendo su input e pulsante, che
   qualunque modulo di ricerca ha.
   ========================================================= */

:root {
  --impb-sk-ink: #0F231B;
  --impb-sk-ink-soft: #4A5B52;
  --impb-sk-brand: #12513A;
  --impb-sk-brand-deep: #0B3527;
  --impb-sk-accent: #FF6A2B;
  --impb-sk-surface: #EFF3EE;
  --impb-sk-card: #FFFFFF;
  --impb-sk-line: #DFE5DE;
  --impb-sk-radius: 14px;
  --impb-sk-btn-radius: 999px;
}

/* ---------------------------------------------------------
   STRUTTURA
   --------------------------------------------------------- */
#desktop-header .header-nav {
  background: var(--impb-sk-card);
  border-bottom: 1px solid var(--impb-sk-line);
  padding: 10px 0;
}

#desktop-header .header-banner {
  background: var(--impb-sk-brand-deep);
  color: #fff;
  font-size: 12.5px;
}
#desktop-header .header-banner a { color: inherit; }

/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */
.logo-wrapper img,
.col-mobile-logo img { max-height: 46px; width: auto; }

/* ---------------------------------------------------------
   RICERCA (iqitsearch)

   Struttura reale, verificata sul DOM il 30/07/2026:
     form > div.input-group > input[name=s] + button.search-btn > i.fa-search

   E' un input-group Bootstrap: input e pulsante stanno AFFIANCATI, con mezzo
   raggio ciascuno. Renderlo assoluto dentro l'input lasciava il lato destro
   quadrato e un bordo di troppo. Qui si asseconda la struttura: la pillola la
   disegna il contenitore, i due figli restano a spigolo vivo dentro di esso.
   La lente sta dentro il pulsante, quindi l'input non ha bisogno di spazio a
   sinistra.
   --------------------------------------------------------- */
.col-search .input-group,
.search-widget .input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1.5px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-btn-radius);
  background: var(--impb-sk-surface);
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.col-search .input-group:focus-within,
.search-widget .input-group:focus-within {
  border-color: var(--impb-sk-brand);
  background: var(--impb-sk-card);
}

.col-search .input-group input[type="text"],
.col-search .input-group input[type="search"],
.search-widget .input-group input[type="text"],
.search-widget .input-group input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 8px 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--impb-sk-ink);
  font-size: 15px;
  box-shadow: none;
}
.col-search .input-group input:focus,
.search-widget .input-group input:focus { outline: none; box-shadow: none; }

.col-search input::placeholder,
.search-widget input::placeholder { color: var(--impb-sk-ink-soft); opacity: .85; }

/* Il pulsante è la metà destra della pillola. Gli offset si azzerano
   esplicitamente: se resta in giro una regola che lo posiziona in assoluto,
   `position: static` da solo lascerebbe comunque right/top applicati. */
.col-search .input-group .search-btn,
.search-widget .input-group .search-btn,
.col-search .input-group .btn,
.search-widget .input-group .btn,
.search-btn {
  position: static;
  right: auto;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  flex: none;
  display: grid;
  place-items: center;
  width: auto;
  min-width: 62px;
  height: auto;
  padding: 0 22px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--impb-sk-brand);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s ease;
}
.search-btn:hover,
.col-search .input-group .btn:hover { background: var(--impb-sk-brand-deep); }

/* ---------------------------------------------------------
   PULSANTI ACCOUNT / PREFERITI / CARRELLO
   --------------------------------------------------------- */
.header-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  border-radius: var(--impb-sk-radius);
  color: var(--impb-sk-ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease;
}
.header-btn:hover { background: var(--impb-sk-surface); color: var(--impb-sk-brand); }
.header-btn i,
.header-btn svg { font-size: 19px; }

/* COLORE DEL PULSANTE CARRELLO

   Il theme editor di Warehouse scrive in custom_s_1.css:
     .header-top a.header-cart-btn:not(:hover) { color: #fff }
   perché nel tema originale la fascia superiore era scura. Il nostro skin la
   rende chiara (--impb-sk-surface), quindi l'icona spariva: bianco su #f6f8fa.

   Va corretto SOLO in quello stato. Quando il menu si aggancia allo scroll, il
   tema sposta #ps-shoppingcart dentro #sticky-cart-wrapper, che vive sulla barra
   verde del megamenu: lì il bianco è quello giusto e non si tocca. La distinzione
   è gratuita perché .header-top non è un antenato nello stato agganciato.

   Specificità: .header-top + .header-cart-btn + .cart-toogle + :not(:hover) = (0,4,1),
   sopra la regola del tema (0,3,1). Non dipende dall'ordine di caricamento dei
   fogli, che il theme editor può cambiare. */
.header-top a.header-cart-btn.cart-toogle:not(:hover),
.header-top a.header-cart-btn.cart-toogle:not(:hover) .icon,
.header-top a.header-cart-btn.cart-toogle:not(:hover) .info-wrapper { color: var(--impb-sk-ink); }

.header-top a.header-cart-btn.cart-toogle:hover,
.header-top a.header-cart-btn.cart-toogle:hover .icon,
.header-top a.header-cart-btn.cart-toogle:hover .info-wrapper { color: var(--impb-sk-brand); }

/* PALLINO DEL CARRELLO  (la classe del tema ha il refuso "toogle")

   Il badge è `position:absolute; top:-4px; right:-4px` e sta DENTRO l'icona:
     <a class="cart-toogle"> <i class="icon"><span class="cart-products-count-btn">
     </i> <span class="info-wrapper">Carrello / 99,00 €</span> </a>

   Mettendo `position: relative` sul pulsante, il riferimento diventava l'intero
   pulsante — 141px su desktop, prezzo compreso — e il pallino finiva sopra
   l'importo. Il riferimento corretto è l'icona, come già accade sul pulsante
   mobile, che infatti si vedeva bene.

   Il nome della classe cambia fra desktop e mobile: `-btn` sul desktop. */
.cart-toogle .icon,
.header-cart-btn .icon,
.m-nav-btn .fa-shopping-bag { position: relative; display: inline-block; }

.cart-products-count,
.cart-products-count-btn {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--impb-sk-accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
/* il tema mostra il badge solo a carrello pieno: qui non si tocca il display,
   altrimenti comparirebbe anche con zero prodotti */

/* anteprima carrello */
.blockcart-content,
#_desktop_blockcart-content {
  border: 1px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-radius);
  box-shadow: 0 12px 34px rgba(15, 35, 27, .12);
}

/* ---------------------------------------------------------
   MENU PRINCIPALE (iqitmegamenu)
   Voci a pillola sul verde, come la barra delle specie.
   Classi verificate sul DOM: .cbp-hrmenu-tab, .cbp-tab-title,
   .cbp-hrsub, .cbp-hrsub-inner, .cbp-category-title, .cbp-links.
   --------------------------------------------------------- */
#iqitmegamenu-wrapper {
  background: var(--impb-sk-brand);
  border: 0;
  box-shadow: none;
}

#iqitmegamenu-wrapper .cbp-hrmenu > ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

/* la voce diventa una pillola */
#iqitmegamenu-wrapper .cbp-hrmenu-tab > a.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--impb-sk-btn-radius);
  background: transparent;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border: 0;
  transition: background .15s ease, color .15s ease;
}
#iqitmegamenu-wrapper .cbp-hrmenu-tab > a.nav-link:hover,
#iqitmegamenu-wrapper .cbp-hrmenu-tab.cbp-hropen > a.nav-link {
  background: var(--impb-sk-brand-deep);
  color: #fff;
}

/* voce della sezione in cui ci si trova */
#iqitmegamenu-wrapper .cbp-hrmenu-tab.cbp-current > a.nav-link,
#iqitmegamenu-wrapper .cbp-hrmenu-tab.active > a.nav-link {
  background: var(--impb-sk-highlight, #C4E538);
  color: var(--impb-sk-brand-deep);
}

#iqitmegamenu-wrapper .cbp-submenu-aindicator { opacity: .7; font-size: 12px; }
#iqitmegamenu-wrapper .cbp-tab-title { line-height: 1.2; }

/* tendina: angoli tondi, ombra morbida, staccata dalla barra */
#iqitmegamenu-wrapper .cbp-hrsub {
  border: 0;
  background: transparent;
  box-shadow: none;
}
#iqitmegamenu-wrapper .cbp-hrsub-inner {
  margin-top: 6px;
  padding: 22px 26px;
  border: 1px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-radius);
  background: var(--impb-sk-card);
  box-shadow: 0 16px 40px rgba(15, 35, 27, .13);
}

#iqitmegamenu-wrapper .cbp-category-title,
#iqitmegamenu-wrapper .cbp-column-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--impb-sk-ink-soft);
  padding: 0 0 9px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--impb-sk-line);
}
#iqitmegamenu-wrapper .cbp-category-title:hover { color: var(--impb-sk-brand); }

#iqitmegamenu-wrapper .cbp-links,
#iqitmegamenu-wrapper .cbp-hrsub-level2 { list-style: none; margin: 0; padding: 0; }
#iqitmegamenu-wrapper .cbp-hrsub-level2 { padding-left: 13px; }

/* Come nella colonna categorie, il tema disegna la freccetta in a::before
   assoluto a left:0 e conta sul padding sinistro del link. Azzerandolo finiva
   sopra la prima lettera. Lo spazio a destra serve invece all'indicatore di
   sottolivello, che il tema mette in coda. */
#iqitmegamenu-wrapper .cbp-links a {
  display: block;
  padding: 6px 20px 6px 15px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--impb-sk-ink);
  text-decoration: none;
}
#iqitmegamenu-wrapper .cbp-links a:hover { color: var(--impb-sk-brand); }
#iqitmegamenu-wrapper .cbp-hrsub-level2 a { font-size: 13.5px; color: var(--impb-sk-ink-soft); }

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width: 991px) {
  #mobile-header { border-bottom: 1px solid var(--impb-sk-line); }
  .header-btn { padding: 6px 8px; font-size: 0; }
  .header-btn i, .header-btn svg { font-size: 20px; }
}

/* =========================================================
   MENU MOBILE (iqitmegamenu — pannello laterale)

   Classi prese dal DOM reale del pannello. Struttura:
     #iqitmegamenu-mobile.mobile-menu
       ├── .mobile-menu__header-wrapper   (indietro + chiudi)
       ├── .mobile-menu__content > ul.mobile-menu__scroller
       │     └── li.mobile-menu__tab > a.mobile-menu__link + .mobile-menu__arrow
       │           └── .mobile-menu__submenu--panel
       │                 └── .mobile-menu__column-title + ul.mobile-menu__links-list
       └── .mobile-menu__footer           (lingua, valuta, account)

   Stesso linguaggio della colonna filtri: titoletti maiuscoli spaziati,
   righe separate da una linea sottile, frecce discrete.
   ========================================================= */
/* Il pannello fa da fondo tenue e le voci stanno dentro riquadri, come i
   blocchi dei filtri in colonna: stesso bordo, stesso raggio, stesso bianco.
   Prima era una lastra bianca unica con delle righe, che è la ragione per cui
   sembrava un elenco grezzo e non una navigazione.

   --impb-sk-card-radius è dichiarato in skin-category.css, che sulle pagine di
   solo header non viene caricato: serve il valore di ripiego. */
#iqitmegamenu-mobile,
#_mobile_iqitmegamenu-mobile {
  background: var(--impb-sk-surface);
  color: var(--impb-sk-ink);
  border: 0;
  box-shadow: 0 0 40px rgba(15, 35, 27, .16);
}

/* ---- testata ---- */
#iqitmegamenu-mobile .mobile-menu__header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* !important perché il tema mette px-2 py-2, utility Bootstrap che lo hanno.
     Senza, restavano 8px e il logo partiva disallineato rispetto al riquadro
     delle voci, che comincia a 12px. */
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--impb-sk-line);
  background: var(--impb-sk-card);
}
#iqitmegamenu-mobile .mobile-menu__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--impb-sk-ink);
  font-size: 14.5px;
  font-weight: 650;
}
#iqitmegamenu-mobile .mobile-menu__back-btn .fa-angle-left { margin-right: 0 !important; color: var(--impb-sk-ink-soft); }
#iqitmegamenu-mobile .mobile-menu__title { font-size: 14.5px; font-weight: 650; }

/* LOGO NELLA TESTATA

   Al primo livello il titolo è un <span> vuoto e la freccia "indietro" non ha
   dove tornare: quello spazio resta bianco. Ci si mette il logo del negozio,
   che arriva come --impb-sk-logo dallo <style> generato dal modulo (letto da
   Configuration, non scritto a mano: il nome del file cambia a ogni upload).

   Il logo NON può stare dentro .mobile-menu__title: al primo livello il tema
   mette `visibility: hidden` su .mobile-menu__header e su tutto il pulsante
   indietro — verificato sul DOM. Qualsiasi cosa lì dentro resta invisibile.
   Va quindi sul wrapper, che è sempre visibile perché contiene la ✕.

   Si mostra solo finché il titolo è vuoto: entrando in un sottomenu il JS lo
   riempie, :has() smette di corrispondere e il logo sparisce da sé. */
#iqitmegamenu-mobile .mobile-menu__header-wrapper:has(.mobile-menu__title:empty)::before {
  content: "";
  flex: none;
  /* La larghezza è solo un tetto: con background-size:contain comanda
     l'altezza, perché i logo di PrestaShop sono più larghi che alti (qui
     240×137, quindi 40px di altezza danno 70px di larghezza). Metterne 150
     riservava spazio mai dipinto. */
  width: 110px;
  height: 40px;
  margin-right: auto;
  background-image: var(--impb-sk-logo, none);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* la freccia indietro non ha dove tornare al primo livello */
#iqitmegamenu-mobile .mobile-menu__back-btn:has(.mobile-menu__title:empty) .fa-angle-left {
  display: none;
}

#iqitmegamenu-mobile .mobile-menu__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--impb-sk-line);
  border-radius: 50%;
  background: var(--impb-sk-card);
  color: var(--impb-sk-ink-soft);
  font-size: 15px;
}
#iqitmegamenu-mobile .mobile-menu__close:hover {
  border-color: var(--impb-sk-brand);
  color: var(--impb-sk-brand);
}

/* ---- corpo ---- */
/* Il riquadro va su .mobile-menu__content, non sulla lista: lo scroller è
   `position-absolute h-100 w-100 m-0`, e m-0 è una utility Bootstrap con
   !important, quindi qualsiasi margine su di lui viene annullato. Il contenitore
   invece è un figlio flex normale e i margini li accetta.

   overflow:hidden serve perché sia lo scroller sia i pannelli dei sottomenu
   sono assoluti dentro questo contenitore: senza, uscirebbero dagli angoli
   arrotondati. */
#iqitmegamenu-mobile .mobile-menu__content {
  margin: 12px !important;
  border: 1px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-card-radius, 16px);
  background: var(--impb-sk-card);
  overflow: hidden;
}

#iqitmegamenu-mobile .mobile-menu__scroller {
  padding: 2px 14px !important;
  margin: 0;
  list-style: none;
  /* stessa barra sottile della colonna filtri: quella di sistema, larga,
     appoggiava sul bordo arrotondato del riquadro */
  scrollbar-width: thin;
  scrollbar-color: var(--impb-sk-line) transparent;
}
#iqitmegamenu-mobile .mobile-menu__scroller::-webkit-scrollbar { width: 6px; }
#iqitmegamenu-mobile .mobile-menu__scroller::-webkit-scrollbar-track { background: transparent; }
#iqitmegamenu-mobile .mobile-menu__scroller::-webkit-scrollbar-thumb {
  background: var(--impb-sk-line);
  border-radius: 999px;
}

/* prima voce = riga; la separazione è una linea, non un bordo per voce */
#iqitmegamenu-mobile .mobile-menu__tab {
  border-bottom: 1px solid var(--impb-sk-line);
}
#iqitmegamenu-mobile .mobile-menu__tab:last-of-type { border-bottom: 0; }

#iqitmegamenu-mobile .mobile-menu__link {
  display: flex;
  align-items: center;
  padding: 14px 2px;
  color: var(--impb-sk-ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}
#iqitmegamenu-mobile .mobile-menu__link:hover,
#iqitmegamenu-mobile .mobile-menu__link:focus { color: var(--impb-sk-brand); }

#iqitmegamenu-mobile .mobile-menu__link--only-icon { padding: 12px 2px; }
#iqitmegamenu-mobile .mobile-menu__tab-icon { font-size: 18px; color: var(--impb-sk-brand); }

/* Freccia della voce: pastiglia tonda sempre visibile, non solo al passaggio.
   Su touch l'hover non esiste, quindi una freccia che si "accende" al passaggio
   sul telefono non si accende mai: il bersaglio deve leggersi sempre. */
#iqitmegamenu-mobile .mobile-menu__arrow {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  flex: none;
  /* Il tema qui mette `padding: 18.57px 0 18.57px 20px`: è quello che
     schiacciava il cerchio in un ovale alto 39px e spingeva il chevron di 20px
     a destra, fuori dalla pastiglia. Va azzerato, e serve !important perché la
     regola del tema ce l'ha. */
  padding: 0 !important;
  border: 1px solid var(--impb-sk-line);
  border-radius: 50%;
  background: var(--impb-sk-surface);
  color: var(--impb-sk-ink-soft);
  font-size: 13px;
}
#iqitmegamenu-mobile .mobile-menu__tab:hover .mobile-menu__arrow,
#iqitmegamenu-mobile .mobile-menu__tab:active .mobile-menu__arrow {
  border-color: var(--impb-sk-brand);
  background: var(--impb-sk-brand);
  color: #fff;
}

/* ---- sottomenu ---- */
/* Il pannello del sottomenu è assoluto dentro .mobile-menu__content, cioè
   dentro il riquadro: eredita già bordo e angoli, gli serve solo il fondo
   pieno per coprire la lista che sta sotto e lo stesso rientro laterale. */
#iqitmegamenu-mobile .mobile-menu__submenu--panel {
  padding: 2px 14px !important;
  background: var(--impb-sk-card);
}
#iqitmegamenu-mobile .mobile-menu__column-categories { margin-bottom: 10px; }

/* titolo di colonna: stesso trattamento dei titoli dei filtri */
#iqitmegamenu-mobile .mobile-menu__column-title {
  display: block;
  padding: 14px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--impb-sk-line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--impb-sk-ink-soft);
  text-decoration: none;
}
#iqitmegamenu-mobile .mobile-menu__column-title:hover { color: var(--impb-sk-brand); }

#iqitmegamenu-mobile .mobile-menu__links-list { list-style: none; margin: 0; padding: 0; }
#iqitmegamenu-mobile .mobile-menu__links-list-li {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--impb-sk-line);
  flex-wrap: wrap;
}
#iqitmegamenu-mobile .mobile-menu__links-list-li:last-child { border-bottom: 0; }

#iqitmegamenu-mobile .mobile-menu__links-list-li > a {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--impb-sk-ink);
  text-decoration: none;
}
#iqitmegamenu-mobile .mobile-menu__links-list-li > a:hover { color: var(--impb-sk-brand); }

/* i livelli annidati rientrano e si alleggeriscono */
#iqitmegamenu-mobile .mobile-menu__links-list--lvl-2,
#iqitmegamenu-mobile .mobile-menu__links-list-lvl--3 {
  flex-basis: 100%;
  padding-left: 14px;
  border-left: 1px solid var(--impb-sk-line);
  margin: 0 0 6px;
}
#iqitmegamenu-mobile .mobile-menu__links-list--lvl-2 > li > a { font-size: 13.5px; color: var(--impb-sk-ink-soft); }
#iqitmegamenu-mobile .mobile-menu__links-list-lvl--3 > li > a { font-size: 13px; color: var(--impb-sk-ink-soft); }

/* il "+" che apre i sottolivelli */
#iqitmegamenu-mobile .mobile-menu__subcat-expander {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--impb-sk-line);
  border-radius: 50%;
  background: var(--impb-sk-surface);
  color: var(--impb-sk-ink-soft);
  font-size: 13px;
}
#iqitmegamenu-mobile .mobile-menu__subcat-expander:hover {
  background: var(--impb-sk-surface);
  color: var(--impb-sk-brand);
}

/* ---- piede ---- */
#iqitmegamenu-mobile .mobile-menu__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  margin: 0 12px 12px;
  border: 1px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-card-radius, 16px);
  background: var(--impb-sk-card);
  font-size: 13.5px;
}
#iqitmegamenu-mobile .mobile-menu__footer a { color: var(--impb-sk-ink); text-decoration: none; }
#iqitmegamenu-mobile .mobile-menu__user a { font-weight: 650; }
#iqitmegamenu-mobile .mobile-menu__user a:hover { color: var(--impb-sk-brand); }
#iqitmegamenu-mobile .mobile-menu__language-selector,
#iqitmegamenu-mobile .mobile-menu__currency-selector { color: var(--impb-sk-ink-soft); }

/* ---------------------------------------------------------
   RICERCA SU MOBILE
   Non è la stessa dell'header: è un pannello a tendina a parte
   (#search-widget-mobile.dropdown-mobile), che a riposo misura 0×0.
   Lo stile a pillola con pulsante assoluto pensato per il desktop lì si
   deformava, quindi qui si ridichiara in forma semplice.
   --------------------------------------------------------- */
#search-widget-mobile { padding: 12px; }

#search-widget-mobile form { position: relative; display: block; width: 100%; }

#search-widget-mobile input[type="text"],
#search-widget-mobile input[type="search"] {
  width: 100%;
  height: 46px;
  padding: 0 52px 0 16px;
  border: 1.5px solid var(--impb-sk-line);
  border-radius: var(--impb-sk-btn-radius);
  background: var(--impb-sk-surface);
  color: var(--impb-sk-ink);
  font-size: 15px;
}
#search-widget-mobile input[type="text"]:focus {
  outline: none;
  background: var(--impb-sk-card);
  border-color: var(--impb-sk-brand);
}

/* qui la lente sta dentro il pulsante, non a sinistra */
#search-widget-mobile .fa-search { position: static; transform: none; color: inherit; }

#search-widget-mobile button[type="submit"] {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--impb-sk-brand);
  color: #fff;
  font-size: 15px;
}
#search-widget-mobile button[type="submit"]:hover { background: var(--impb-sk-brand-deep); }