/*
 * Icone del sito come SVG in linea (maschera CSS): sostituiscono Font Awesome, Ionicons,
 * IcoFont ed Elegant Icons, di cui si usavano solo queste 11 icone (~310 KB di CSS + font).
 * Le classi sono le stesse di prima, quindi il markup non cambia; l'icona prende il colore
 * del testo (currentColor) e la dimensione del carattere (1em).
 * Per aggiungere un'icona: una regola con --icona: url("data:image/svg+xml,...") e la classe.
 */

.fa-angle-down, .fa-facebook, .fa-search-plus, .fa-shopping-cart, .fa-trash,
.ion-android-arrow-up, .ion-android-close, .ion-close-round, .ion-navicon,
.icofont-search, .icon-close {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -0.125em;
  font-style: normal;
}

.fa-angle-down::before, .fa-facebook::before, .fa-search-plus::before, .fa-shopping-cart::before, .fa-trash::before,
.ion-android-arrow-up::before, .ion-android-close::before, .ion-close-round::before, .ion-navicon::before,
.icofont-search::before, .icon-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: var(--icona) no-repeat center / contain;
  mask: var(--icona) no-repeat center / contain;
}

/* chiusura (menu, carrello, ricerca, rimozione prodotto) */
.ion-android-close, .ion-close-round, .icon-close {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* menu mobile */
.ion-navicon {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E");
}

/* torna su */
.ion-android-arrow-up {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4M5 11l7-7 7 7'/%3E%3C/svg%3E");
}

/* sottomenu del menu mobile */
.fa-angle-down {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ricerca */
.icofont-search {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E");
}

/* ingrandisci immagine (scheda prodotto) */
.fa-search-plus {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
}

/* carrello */
.fa-shopping-cart {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.6 11.2a1 1 0 0 0 1 .8h9.2a1 1 0 0 0 1-.8L21 7H6.2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='17.5' cy='19.5' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* svuota carrello */
.fa-trash {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 3h4M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

/* Facebook (logo "f") */
.fa-facebook {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
}

/* ex classi di impaginazione di Font Awesome usate nell'intestazione */
.fa-lg {
  font-size: 1.3333em;
  vertical-align: -0.0667em;
}
.fa-stack {
  display: inline-block;
  position: relative;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.5em;
  margin: 0 auto;
}