/*
 * La barra fissa in fondo (telefono). Niente media query qui dentro: la
 * soglia la decide il tema nell attributo «media» del tag, dall impostazione
 * «La barra in fondo sotto».
 */

.iw-barra-telefono {
  display: grid;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  background: var(--iw-superficie);
  border-top: 1px solid var(--iw-bordo);
  /* al massimo 8 px di margine per la barra dei gesti: su iPhone, con la barra di Chrome che compare e scompare, il margine intero (34 px)
     faceva saltare la barra a ogni scorrimento. Lo stesso tetto vale per le altre barre fisse in basso (scheda, cassa). Dal 252, 27/10/2026 */
  padding-bottom: min(env(safe-area-inset-bottom, 0px), 8px);
  box-shadow: 0 -6px 20px -16px rgb(0 0 0 / 0.35);
}
.iw-barra-telefono__voce {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--iw-testo);
  font: inherit;
  font-size: 0.6875rem;
  text-decoration: none;
  cursor: pointer;
}
.iw-barra-telefono__voce svg { width: 22px; height: 22px; }
.iw-barra-telefono__icona { position: relative; display: inline-flex; }
/* il numerino del carrello sta sull angolo dell icona */
.iw-barra-telefono__icona .iw-carrello__numero {
  position: absolute;
  top: -6px;
  right: -10px;
}
/* il «Filtri» della barra in fondo: non e il pulsante squadrato della barra
   sopra la griglia, e una voce come le altre, col numerino sull angolo */
.iw-barra-telefono .iw-barra__filtri { min-height: 56px; border: 0; border-radius: 0; background: none; font-size: 0.6875rem; font-weight: inherit; }
.iw-barra-telefono .iw-barra__conta { position: absolute; top: -6px; right: -10px; }

/* il corpo della pagina lascia lo spazio alla barra */
body.iw-barra-telefono-attiva { padding-bottom: calc(56px + min(env(safe-area-inset-bottom, 0px), 8px)); }
/* la barra d acquisto della scheda sale sopra la barra */
body.iw-barra-telefono-attiva .iw-barra-acquisto { bottom: calc(56px + min(env(safe-area-inset-bottom, 0px), 8px)); }

/* il tondo di WhatsApp (modulo whatsapp) sale sopra la barra, e «Torna su» sopra di lui.
   Prima era nascosto con la classe del body, che c e a ogni larghezza: spariva anche dove la barra no.
   Qui dentro vale solo sotto la soglia della barra (attributo media del tag) */
body.iw-barra-telefono-attiva .iw-whatsapp-fisso { bottom: calc(68px + min(env(safe-area-inset-bottom, 0px), 8px)); }
body.iw-barra-telefono-attiva:has(.iw-whatsapp-fisso) .iw-su { bottom: calc(124px + min(env(safe-area-inset-bottom, 0px), 8px)); }

/* «Torna su»: sopra la barra in fondo, a destra, piccolo */
.iw-su {
  display: grid;
  place-items: center;
  position: fixed;
  right: 12px;
  bottom: calc(68px + min(env(safe-area-inset-bottom, 0px), 8px));
  z-index: 39;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--iw-bordo);
  border-radius: 50%;
  background: var(--iw-superficie);
  color: var(--iw-testo);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.14);
  cursor: pointer;
}
.iw-su svg { width: 22px; height: 22px; }
/* con la barra del pagamento (alla cassa) la barra in fondo non c e */
.woocommerce-checkout .iw-su { bottom: calc(76px + min(env(safe-area-inset-bottom, 0px), 8px)); }