/* =============================================================================
   scatole.com — BIANCO CANDIDO · 09 STRISCIA INSTAGRAM E PIE' DI PAGINA
   -----------------------------------------------------------------------------
   Carica per ultimo, dopo 00-06. Non riscrive nessuno degli altri fogli: dove
   li scavalca c'e' scritto perche', qui sotto, riga per riga.

   IL PROBLEMA, IN UNA FRASE
   In coda a ogni pagina ci sono le uniche fotografie che dimostrano davvero
   cosa fa questa azienda — mani con i guanti, fustelle, macchine da stampa —
   e stavano trattate come un widget, sullo stesso identico grigio del pie'.
   Sotto, cinque colonne di link in cui «Paypal / Visa / Stripe» erano parole
   in fila come «FAQ» o «Sitemap»: nessuna differenza fra un collegamento e un
   circuito di pagamento.

   LE TRE MOSSE
   1. La striscia torna su fondo BIANCO e prende una testata vera (occhiello,
      nome, bio, e un invito esplicito). Il pie' resta carta. Fra i due c'e' un
      filo: si capisce dove finisce il sito e dove comincia il piede.
   2. Ogni voce dei tre elenchi di link prende la sua icona, con la stessa
      tecnica del menu di 04 (`mask-image` + `currentColor`).
   3. Pagamenti e corrieri smettono di essere testo: diventano pastiglie con
      il marchio dentro.

   NIENTE COLORI LETTERALI. L'unico `%23000` che si legge qui e' dentro le
   maschere SVG, dove non e' un colore ma una sagoma: la maschera guarda solo
   l'opacita' dei pixel, il colore vero arriva sempre da `currentColor` o da un
   gettone. Stessa regola di 04.
   ========================================================================== */


/* =============================================================================
   1 · IL MOTORE DELLE ICONE
   -----------------------------------------------------------------------------
   PERCHE' `mask-image` E NON `background-image`: identico a 04. Con background
   il colore sta dentro l'SVG e resta uguale al passaggio del mouse; con la
   maschera l'SVG e' solo una sagoma e il colore arriva da `currentColor`.

   COSA CAMBIA RISPETTO A 04, E PERCHE'
   04 ripete l'intera data-URI DUE volte per ogni icona (`-webkit-mask-image` e
   `mask-image`): sedici icone diventano trentadue stringhe lunghe. Qui la
   data-URI sta UNA volta sola, dentro il gettone `--scp-i`, e le due proprieta'
   la leggono da li'. Ventotto icone occupano quello che in stile 04 ne
   occupavano quattordici. Il file compresso ci guadagna circa il 40%.

   PERCHE' `content` NON STA IN QUESTA REGOLA
   Se lo mettessi qui, ogni elemento della lista genererebbe lo pseudo-elemento
   anche quando nessuno gli ha assegnato un `--scp-i`: `mask-image` sarebbe
   `none`, cioe' nessuna maschera, cioe' un RETTANGOLO PIENO di inchiostro
   accanto a ogni voce. Lo pseudo-elemento lo accende solo la regola che porta
   anche l'icona. Difetto trovato scrivendo, non ipotizzato.
   ========================================================================== */

#footer .elementor-nav-menu .elementor-item::before,
#footer .sc-dato::before,
#footer .sc-mk::before,
#footer .sc-social::before,
body.home #main .sc-pi__cta::before,
body.home #main #sb_instagram .sbi_photo_wrap::before {
  /* niente `content` qui: lo accende la regola dell'icona */

  /* Il tema Porto forza `position: absolute` sui ::before delle voci di menu
     (verificato in 04, stessa famiglia di selettori). Rimesso nel flusso,
     l'elemento diventa un figlio flessibile e si allinea da solo: le ancore
     del pie' sono gia' `display: flex` per via di 01 § 12. */
  position: static;
  flex: 0 0 auto;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--scp-i);
          mask-image: var(--scp-i);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* =============================================================================
   2 · LA STRISCIA "scatole.custom"
   -----------------------------------------------------------------------------
   Esiste SOLO nella home: verificato una per una su categoria, scheda
   prodotto, carrello, cassa, about-us, FAQ e get-in-touch — zero occorrenze di
   `sb_instagram`. Il piede invece c'e' ovunque. Sono due fasce diverse con due
   destini diversi, e la nota per il proprietario e' in fondo a questo file.
   ========================================================================== */

/* --- il piano ------------------------------------------------------------
   01 § 9 le aveva dato `--sc-carta`, che e' anche il fondo del pie'. Il
   risultato misurato: 448 px di striscia e 350 di pie', tutti dello stesso
   #FAFAF8, uno attaccato all'altro. Da lontano e' un unico blocco grigio in
   coda alla pagina, ed e' esattamente il motivo per cui quelle fotografie non
   si notano. Torna bianca — cioe' torna a essere CONTENUTO — e il filo in
   basso fa da soglia verso il piede. */
body.home #main .elementor-element-df728b3 {
  background-color: var(--sc-fondo);
  border-top: 1px solid var(--sc-linea);
  border-bottom: 1px solid var(--sc-linea);
  padding-block: var(--sc-s8);
}

/* --- l'occhiello (lo mette il JS) ---------------------------------------- */
body.home #main .sc-pi__occhiello {
  display: flex;
  align-items: center;
  gap: var(--sc-s3);
  margin: 0 0 var(--sc-s4);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sc-mar-testo);          /* 5,88:1 su bianco */
}
/* Il filo che allunga l'occhiello fino al bordo: e' quello che trasforma una
   riga di testo in una intestazione di sezione. Costa una regola. */
body.home #main .sc-pi__occhiello::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--sc-linea-2);
}

/* --- la testata: profilo a sinistra, invito a destra ---------------------- */
body.home #main #sb_instagram .sb_instagram_header {
  display: flex;
  align-items: center;
  gap: var(--sc-s4);
  flex-wrap: wrap;
  margin-bottom: var(--sc-s5);
  padding: 0;
}
/* L'ancora del plugin avvolge TUTTA la testata. L'invito che aggiungo non puo'
   starci dentro (un link dentro un link non e' HTML valido e la tastiera ci si
   perde): sta accanto, e questa riga gli lascia lo spazio. */
body.home #main #sb_instagram .sbi_header_link {
  flex: 1 1 300px;
  text-decoration: none;
}
body.home #main #sb_instagram .sbi_header_text {
  display: flex;
  align-items: center;
  gap: var(--sc-s3);
}
/* L'avatar diventa un gettone con l'anello, non una figurina appoggiata. */
body.home #main #sb_instagram .sbi_header_img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--sc-linea-2),
              0 0 0 4px var(--sc-fondo),
              0 0 0 5px var(--sc-mar-velo);
}
body.home #main #sb_instagram .sbi_header_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
body.home #main #sb_instagram .sbi_feedtheme_header_text h3 {
  margin: 0;
  font-family: var(--sc-disp);
  font-size: var(--sc-t-h3);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--sc-ink);                /* 19:1 su bianco */
}
/* La bio erano tre righe con due emoji e un indirizzo ripetuto: rubava
   l'attenzione alle fotografie, che sono la cosa che deve parlare. Una riga
   sola, tagliata, in secondo piano. Il testo resta intero nel DOM. */
body.home #main #sb_instagram .sbi_feedtheme_header_text .sbi_bio {
  margin: 3px 0 0;
  font-family: var(--sc-testo);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sc-ink-3);              /* 6,0:1 su bianco */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.home #main #sb_instagram .sbi_feedtheme_header_text .sbi_bio br { display: none; }

/* --- l'invito (lo mette il JS) -------------------------------------------
   E' un <a>, non un <button>: il tema ridipinge i <button> di blu notte con
   `!important` e qui non serve combattere. L'`!important` sul fondo e sul
   colore c'e' lo stesso, mirato a questa sola classe, perche' Porto colora
   anche le ancore che sembrano bottoni e sarebbe una sorpresa al primo tema
   aggiornato. */
body.home #main .sc-pi__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-s2);
  min-height: 44px;                    /* bersaglio pieno anche col dito */
  padding: 0 var(--sc-s4);
  border: 0;
  border-radius: 999px;
  background-color: var(--sc-mar-scuro) !important;
  color: var(--sc-mar-ombra) !important;   /* bianco su #1A555E: 8,4:1 */
  font-family: var(--sc-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva);
}
body.home #main .sc-pi__cta:hover,
body.home #main .sc-pi__cta:focus-visible {
  background-color: var(--sc-mar-vivo) !important;   /* #226E78: 5,9:1 col bianco */
  box-shadow: var(--sc-ombra-mar);
}
body.home #main .sc-pi__cta::before {
  content: "";
  width: 16px;
  height: 16px;
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.3 6.7h.01'/%3E%3C/svg%3E");
}

/* --- i sei riquadri -------------------------------------------------------
   GUASTO TROVATO MISURANDO, non riportato da nessuno: l'immagine e' larga
   258,3 px dentro una cornice di 229,8 con `overflow: hidden`, e comincia dal
   bordo sinistro. Il 12% destro di OGNI fotografia era tagliato via, e non al
   centro: tagliato a destra e basta. Su una foto di una fustella in funzione
   e' esattamente il pezzo che conta.
   05 § (aspect-ratio) aveva gia' fissato il rapporto 1:1 per non far ballare
   la pagina; qui resta 1:1 — quello che aggiungo e' la larghezza. */
body.home #main #sb_instagram #sbi_images {
  /* il plugin stampa `style="gap: 10px"` sull'elemento: senza !important non
     si scavalca uno stile in linea */
  gap: var(--sc-s3) !important;
}
body.home #main #sb_instagram .sbi_photo {
  display: block;
  width: 100%;
}
body.home #main #sb_instagram .sbi_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 06 § 9 aveva gia' dato filo e ombra bassa. Alzo il gradino: al passaggio del
   mouse la stampa si stacca dal foglio di due pixel, e l'ombra cresce. Solo
   `transform` e `box-shadow`: nessun riflusso. */
body.home #main #sb_instagram .sbi_photo_wrap {
  position: relative;
  border-radius: var(--sc-r);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--sc-linea), var(--sc-ombra-1);
  transition: box-shadow var(--sc-medio) var(--sc-curva),
              transform var(--sc-medio) var(--sc-curva);
}
body.home #main #sb_instagram .sbi_photo_wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--sc-linea-2), var(--sc-ombra-2);
}
/* Il glifo Instagram nell'angolo: compare solo al passaggio del mouse, quindi
   non sporca le fotografie, e dice cosa succede se clicchi (si apre Instagram,
   fuori dal sito) prima che tu ci clicchi. Bianco con l'ombra portata perche'
   la foto sotto puo' essere di qualunque colore. */
body.home #main #sb_instagram .sbi_photo_wrap::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 17px;
  height: 17px;
  background-color: var(--sc-fondo);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgb(15 17 21 / .55));
  transition: opacity var(--sc-veloce) var(--sc-curva);
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.3 6.7h.01'/%3E%3C/svg%3E");
}
body.home #main #sb_instagram .sbi_photo_wrap:hover::before { opacity: .96; }

/* --- il triangolo di riproduzione ----------------------------------------
   Era un triangolo bianco nudo, 20x23, appoggiato sul fotogramma: su un video
   girato in officina, con le luci accese, sparisce. Diventa un disco.
   L'SVG del plugin ha `style="color: rgba(255,255,255,1)"` in linea e il
   triangolo e' `fill: currentColor`: il triangolo resta bianco, io metto solo
   il disco sotto. Il fondo e' inchiostro al 60%: sopra una fotografia bianca
   (il caso peggiore) il bianco del triangolo fa 4,9:1, sopra una scura molto
   di piu'. Soglia per un comando: 3:1. Passa con margine.
   Il riempimento e' asimmetrico apposta: un triangolo dentro un cerchio va
   spostato a destra o sembra sbilanciato. */
body.home #main #sb_instagram .sbi_playbtn {
  box-sizing: border-box;
  width: 48px !important;
  height: 48px !important;
  margin: -24px 0 0 -24px !important;
  padding: 13px 14px 13px 17px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--sc-ink) 60%, transparent);
  transition: background-color var(--sc-veloce) var(--sc-curva);
}
body.home #main #sb_instagram .sbi_photo_wrap:hover .sbi_playbtn {
  background-color: color-mix(in srgb, var(--sc-mar-scuro) 82%, transparent);
}


/* =============================================================================
   3 · IL PIE' — IMPIANTO
   -----------------------------------------------------------------------------
   Il fondo (--sc-carta), il filo in alto e i colori dei link li ha gia' messi
   01 § 12 e non li tocco: sono giusti e sono stati misurati. Qui cambia il
   respiro e la gerarchia dei titoli di colonna.
   ========================================================================== */

#footer .elementor-element-6e7c25a { align-items: stretch; }

/* Il distacco fra le cinque colonne era di 20 px: con le icone davanti alle
   voci le colonne diventano piu' "piene" e 20 px non bastano piu' a separarle.
   Non allargo la colonna: allargo il vuoto. */
#footer .elementor-element-e5d50d1 {
  gap: var(--sc-s5);
  flex-wrap: wrap;
}
#footer .elementor-element-e5d50d1 > .e-con {
  flex: 1 1 150px;
  min-width: 0;   /* senza questo una voce lunga allarga la colonna e le altre
                     quattro si stringono: e' il difetto classico del flex */
}

/* --- i titoli di colonna --------------------------------------------------
   Restano mono, minuscoli, spaziati e in --sc-ink-3 (5,25:1 sulla carta):
   e' la scelta di 01 ed e' quella giusta, un titolo di colonna non deve
   competere con le voci. Aggiungo solo il trattino petrolio sotto: due pixel
   che dicono «qui comincia un elenco» e legano le cinque colonne fra loro.
   `--sc-mar` pieno su carta fa 3,94:1 — sopra la soglia 3:1 per un elemento
   grafico. Come TESTO non lo userei mai, ed e' il motivo per cui e' un
   trattino e non una parola. */
#footer .elementor-element-290ec40 .elementor-heading-title,
#footer .elementor-element-1afcc18 .elementor-heading-title,
#footer .elementor-element-2771c0e .elementor-heading-title,
#footer .elementor-element-d2fa55c .elementor-heading-title,
#footer .elementor-element-78d2621 .elementor-heading-title {
  position: relative;
  display: block;
  padding-bottom: 11px;
  margin-bottom: var(--sc-s2);
}
#footer .elementor-element-290ec40 .elementor-heading-title::after,
#footer .elementor-element-1afcc18 .elementor-heading-title::after,
#footer .elementor-element-2771c0e .elementor-heading-title::after,
#footer .elementor-element-d2fa55c .elementor-heading-title::after,
#footer .elementor-element-78d2621 .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--sc-mar);
}


/* =============================================================================
   4 · IL BLOCCO DEI DATI AZIENDALI
   -----------------------------------------------------------------------------
   Era un solo <h2> con cinque righe separate da <br>: ragione sociale,
   indirizzo, comune, partita IVA, indirizzo di posta. Nessuna icona era
   possibile, perche' non c'era niente a cui attaccarla — e l'indirizzo di
   posta era testo morto, non un collegamento.
   Il JS avvolge ogni riga in uno <span> DENTRO lo stesso <h2>: il titolo resta
   un titolo, il testo non cambia di una virgola (conta per il posizionamento
   locale: nome, indirizzo, contatto devono restare leggibili al robot), e ogni
   riga ha finalmente un gancio per la sua icona.
   Se il JS non parte, resta il blocco di prima. Nessuna riga sparisce.
   ========================================================================== */

/* 01 § 12 scrive TUTTO il blocco in mono, maiuscolo, 11,5 px e interlinea 2:
   e' la scelta giusta per un TITOLO di colonna, non per un indirizzo, che alla
   fine e' una cosa che qualcuno deve poter copiare e leggere. Tre trattamenti,
   uno per genere di dato:
     · la ragione sociale resta l'etichetta -> mono, maiuscolo, spaziato
     · via e comune sono testo               -> carattere di testo, tondo
     · la partita IVA e' un codice           -> mono, perche' si legge cifra a
       cifra e le cifre in mono restano incolonnate
   Le regole colpiscono gli <span>, non l'<h2>: non c'e' gara di specificita'
   con 01, perche' non parliamo dello stesso elemento. */
#footer .sc-dati {
  display: flex;
  flex-direction: column;
  gap: var(--sc-s2);
  margin-top: var(--sc-s3);
  font-family: var(--sc-testo);
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-ink-2);              /* 9,0:1 sulla carta */
}
#footer .sc-dati__nome {
  display: block;
  margin-bottom: var(--sc-s1);
  font-family: var(--sc-mono);
  font-size: var(--sc-t-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc-ink);                /* 18,1:1 sulla carta */
}
#footer .sc-dato--iva {
  font-family: var(--sc-mono);
  font-size: 12px;
  letter-spacing: .04em;
}
#footer .sc-dato {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-s2);
  line-height: 1.55;
}
#footer .sc-dato::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 3px;                     /* allineata alla prima riga, non al
                                          centro del blocco su due righe */
  opacity: .8;                         /* #3F4750 all'80% sulla carta: 6,5:1,
                                          ben oltre il 3:1 di un'icona */
}
#footer .sc-dato--dove::before {
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.3s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10.2' r='2.6'/%3E%3C/svg%3E");
}
#footer .sc-dato--iva::before {
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='18.8' height='14' rx='2'/%3E%3Cpath d='M6.6 9.6h4.2M6.6 13.2h7.4M16 9.6h2.4'/%3E%3C/svg%3E");
}
#footer .sc-dato--posta::before {
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
#footer .sc-dato a {
  color: var(--sc-ink-2);              /* 9,0:1 sulla carta */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--sc-quota);
  transition: color var(--sc-veloce) var(--sc-curva),
              text-decoration-color var(--sc-veloce) var(--sc-curva);
}
#footer .sc-dato a:hover,
#footer .sc-dato a:focus-visible {
  color: var(--sc-mar-testo);          /* 5,7:1 sulla carta */
  text-decoration-color: currentColor;
}

/* --- l'unico collegamento sociale del piede ------------------------------
   L'indirizzo Instagram e' gia' nella pagina (lo mette il feed) ma solo in
   home, e nel piede non c'era modo di raggiungerlo dalle altre nove pagine.
   Una icona sola, stessa famiglia delle altre, bersaglio 44x44. */
#footer .sc-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: var(--sc-s2);
  border-radius: 50%;
  border: 1px solid var(--sc-linea-2);
  color: var(--sc-ink-2);
  transition: color var(--sc-veloce) var(--sc-curva),
              border-color var(--sc-veloce) var(--sc-curva),
              background-color var(--sc-veloce) var(--sc-curva);
}
#footer .sc-social::before {
  content: "";
  width: 19px;
  height: 19px;
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.3 6.7h.01'/%3E%3C/svg%3E");
}
#footer .sc-social:hover,
#footer .sc-social:focus-visible {
  color: var(--sc-mar-testo);
  border-color: var(--sc-mar);
  background-color: var(--sc-mar-velo);
}


/* =============================================================================
   5 · LE TRE COLONNE DI COLLEGAMENTI — MENU, COMPANY, INFO
   -----------------------------------------------------------------------------
   Le icone sono agganciate all'INDIRIZZO, non a una classe: le voci sono link
   di menu senza classi utili, e l'indirizzo e' l'unica cosa stabile. Stessa
   scelta di 04, e stessa avvertenza: nel PIEDE gli indirizzi sono scritti CON
   il `www` (nel menu di testa sono senza). Verificato dal vivo. Uso `*=` sul
   pezzo di percorso, cosi' vale in entrambi i casi e sopravvive a un cambio
   di dominio.

   Nota sui doppioni: nel pie' Elementor stampa OGNI menu due volte — una
   versione «main» e una «dropdown» tenuta a `display: none`. Le regole partono
   da `.elementor-nav-menu` e prendono entrambe: e' innocuo (la seconda non si
   vede) e costa meno di un selettore in piu' su ogni riga.
   ========================================================================== */

#footer .elementor-nav-menu .elementor-item::before {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  opacity: .85;   /* #3F4750 all'85% sulla carta: 7,3:1. Un'icona ne chiede 3. */
  transition: opacity var(--sc-veloce) var(--sc-curva),
              transform var(--sc-veloce) var(--sc-curva);
}
/* «l'icona si accende al passaggio»: nessuno spostamento di riga, solo il
   pieno e un pixel di sollevamento. Il testo cambia colore da solo — quello
   lo fa gia' 01 § 12 — e l'icona lo segue perche' e' `currentColor`. */
#footer .elementor-nav-menu .elementor-item:hover::before,
#footer .elementor-nav-menu .elementor-item:focus-visible::before {
  opacity: 1;
  transform: translateY(-1px);
}
#footer .elementor-nav-menu .elementor-item:hover,
#footer .elementor-nav-menu .elementor-item:focus-visible {
  color: var(--sc-mar-testo);          /* 5,7:1 sulla carta */
}

/* --- MENU: le stesse sei icone del menu di testa -------------------------
   Sono volutamente IDENTICHE a quelle di 04. Due disegni diversi per la stessa
   categoria, uno in alto e uno in basso, e il sito sembra fatto da due
   persone. Il gemello del pie' del «food» punta a /food-box mentre in testa
   punta a /food: il `*=` copre tutti e due. */

/* base & lid studio: la scatola con il coperchio, in assonometria */
#footer .elementor-nav-menu .elementor-item[href*="/base-lid-studio"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6 12 4l9 4.6-9 4.6z'/%3E%3Cpath d='M3 8.6v6.8L12 20l9-4.6V8.6'/%3E%3Cpath d='M12 13.2V20'/%3E%3C/svg%3E");
}
/* gioielleria: pietra sfaccettata */
#footer .elementor-nav-menu .elementor-item[href*="/product-category/jewelry"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10l4 6-9 12L3 9z'/%3E%3Cpath d='M3 9h18M9.5 9 12 21M14.5 9 12 21M7 3l2.5 6M17 3l-2.5 6'/%3E%3C/svg%3E");
}
/* tecnologia: dispositivo */
#footer .elementor-nav-menu .elementor-item[href*="/product-category/technology"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M10.5 5.5h3M11 18.5h2'/%3E%3C/svg%3E");
}
/* marketing: megafono */
#footer .elementor-nav-menu .elementor-item[href*="/product-category/marketing"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10v4a1 1 0 0 0 1 1h3l6 4V5l-6 4h-3a1 1 0 0 0-1 1z'/%3E%3Cpath d='M17.5 9.2a4 4 0 0 1 0 5.6M20 6.8a7.5 7.5 0 0 1 0 10.4'/%3E%3C/svg%3E");
}
/* food: bottiglia */
#footer .elementor-nav-menu .elementor-item[href*="/product-category/food"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2.5h5v3.2c0 .8.3 1.5.9 2.1l1.2 1.3c.6.6.9 1.4.9 2.2v9.2a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6.5 20.5v-9.2c0-.8.3-1.6.9-2.2l1.2-1.3c.6-.6.9-1.3.9-2.1z'/%3E%3Cpath d='M6.5 13.5h11'/%3E%3C/svg%3E");
}
/* cura della persona: goccia */
#footer .elementor-nav-menu .elementor-item[href*="/product-category/personalcare"]::before,
#footer .elementor-nav-menu .elementor-item[href*="/product-category/personal-care"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8c3.6 4.3 6.2 7.6 6.2 10.9A6.2 6.2 0 0 1 12 20.9a6.2 6.2 0 0 1-6.2-7.2c0-3.3 2.6-6.6 6.2-10.9z'/%3E%3Cpath d='M9.2 14.6a2.9 2.9 0 0 0 2.9 2.9'/%3E%3C/svg%3E");
}

/* --- COMPANY -------------------------------------------------------------- */
/* about us: il capannone. Non una faccina e non un palazzo di uffici: quello
   che c'e' dietro questo sito e' un'officina, ed e' la stessa cosa che
   raccontano le fotografie della striscia qui sopra. */
#footer .elementor-nav-menu .elementor-item[href*="/about-us"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.6h18'/%3E%3Cpath d='M4.6 20.6v-9.5l5 3v-3l5 3V7.4h4.8v13.2'/%3E%3Cpath d='M7.2 17.2h1.4M12.2 17.2h1.4M17 17.2h1.4'/%3E%3C/svg%3E");
}
/* get in touch / contact us: la busta. Le due voci portano allo STESSO
   indirizzo (una in COMPANY, una in INFO): una sola regola le serve entrambe,
   ed e' giusto che abbiano la stessa icona. */
#footer .elementor-nav-menu .elementor-item[href*="/get-in-touch"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

/* --- INFO ----------------------------------------------------------------- */
/* condizioni: foglio con l'orecchia */
#footer .elementor-nav-menu .elementor-item[href*="/terms-conditions"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 2.8h7.1L18.8 8.3v12.2a1.2 1.2 0 0 1-1.2 1.2H6.2A1.2 1.2 0 0 1 5 20.5V4a1.2 1.2 0 0 1 1.2-1.2z'/%3E%3Cpath d='M13.3 2.9v5.5h5.5'/%3E%3Cpath d='M8.4 13.2h7.2M8.4 16.8h5'/%3E%3C/svg%3E");
}
/* privacy: lo scudo con la spunta */
#footer .elementor-nav-menu .elementor-item[href*="/privacy-policy"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 4.8 5.7v5.7c0 4.3 3 8.3 7.2 9.8 4.2-1.5 7.2-5.5 7.2-9.8V5.7z'/%3E%3Cpath d='m9.1 11.9 2.2 2.2 3.9-4.2'/%3E%3C/svg%3E");
}
/* faq: la domanda nel cerchio */
#footer .elementor-nav-menu .elementor-item[href*="/faq"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.4a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.5'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
}
/* sitemap: l'albero delle pagine */
#footer .elementor-nav-menu .elementor-item[href*="/sitemap"]::before {
  content: "";
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.8' y='2.7' width='6.4' height='5' rx='1.2'/%3E%3Crect x='2.4' y='16.3' width='6.4' height='5' rx='1.2'/%3E%3Crect x='15.2' y='16.3' width='6.4' height='5' rx='1.2'/%3E%3Cpath d='M12 7.7v4.6'/%3E%3Cpath d='M5.6 16.3v-4h12.8v4'/%3E%3C/svg%3E");
}


/* =============================================================================
   6 · PAGAMENTI E CORRIERI — LE PASTIGLIE
   -----------------------------------------------------------------------------
   COSA C'ERA: <li><span>Paypal</span></li>, quattro volte, e due per i
   corrieri. Graficamente indistinguibili dalle voci «FAQ» e «Sitemap» della
   colonna accanto, e senza link: sembravano collegamenti rotti.

   COSA DIVENTANO: pastiglie con il marchio dentro. Il nome scritto sparisce
   dagli occhi e resta alle tecnologie assistive — un lettore di schermo
   continua a sentire «Paypal», non «immagine».

   PERCHE' NON HO SCARICATO I LOGHI VERI
   Perche' la pagina non deve chiedere niente a un dominio terzo, e perche' un
   PNG di marchio scaricato oggi e' un marchio vecchio fra due anni. I marchi
   qui sono disegnati sul posto come SVG monocromatici: un <text> in un
   font di sistema, con `textLength` che ne fissa la larghezza esatta.

   PERCHE' `textLength` E NON UN TRACCIATO A MANO
   Un tracciato bezier scritto a mano per sei parole sarebbe stato dieci volte
   piu' pesante e — con tutta onesta' — piu' brutto. Il rischio del <text> e'
   che il font di sistema cambi da un computer all'altro e la parola esca dal
   riquadro: `textLength` lo elimina, perche' impone al motore la larghezza
   totale e gli lascia solo la spaziatura da aggiustare. Le lettere non si
   deformano (`lengthAdjust` resta il valore di serie, `spacing`).
   Peso di un marchio: circa 200 byte prima della compressione.

   COME SI ASSEGNANO
   La classe la mette il JS leggendo il TESTO della voce, non la posizione:
   se domani il proprietario aggiunge «Klarna» o sposta «Visa» in cima, non si
   rompe niente. Una voce che il JS non riconosce tiene il suo testo visibile e
   prende l'icona generica della carta: non sparisce mai nulla.

   E IL RITMO A 36 px DI 06 § 11b?
   Resta valido e non lo tocco. Quel difetto nasceva dal fatto che 01 § 12
   dava lo STESSO riempimento a `.elementor-icon-list-item` e a
   `.elementor-icon-list-text` che gli sta dentro, e le colonne costruite con
   l'elenco puntato lo prendevano due volte (61 px contro 36). Qui il
   riempimento lo ridichiaro SOLO sul padre, `.elementor-icon-list-item`, e mai
   sul figlio: il doppio conteggio non si puo' ripresentare. E la domanda
   «perche' queste due colonne non hanno lo stesso passo delle altre tre» non
   si pone piu', perche' smettono di essere colonne di testo: sono un gruppo di
   distintivi, un oggetto diverso, e l'occhio non cerca un allineamento fra
   cose diverse.
   ========================================================================== */

/* Il selettore parte dal TIPO di widget, non dal suo identificativo
   (`.elementor-element-7f4e75a`): gli identificativi di Elementor cambiano
   quando qualcuno duplica un blocco nell'editor, e nel piede gli unici elenchi
   puntati sono questi due. */
#footer .elementor-widget-icon-list .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-s2);
  margin: 0;
  padding: 0;
}

#footer .sc-mk {
  position: relative;   /* ancora per il nome nascosto, che e' in `absolute` */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  /* SOLO sul padre. Vedi la nota sopra: mai sul figlio. */
  padding: 0 11px;
  border: 1px solid var(--sc-linea-2);
  border-radius: 9px;
  background-color: var(--sc-fondo);
  /* MISURATO: il filo --sc-linea-2 sulla carta fa 1,26:1 e il bianco della
     pastiglia sulla carta fa 1,04:1 — da soli non disegnano niente. Non li
     scurisco, perche' 00-fondamenta dice esplicitamente che su bianco un bordo
     marcato incupisce, ed e' vero: cinque pastiglie contornate di grigio in un
     piede diventano cinque francobolli. Il rilievo lo fa l'ombra, che e' il
     mestiere che questa tavolozza le assegna. Nessun requisito di contrasto e'
     in gioco: la pastiglia non e' un comando e il marchio dentro si legge a
     9,42:1 anche se il contorno sparisse del tutto. */
  box-shadow: var(--sc-ombra-1);
  color: var(--sc-ink-2);              /* 9,0:1 sulla carta, 9,4:1 sul bianco
                                          della pastiglia */
  transition: border-color var(--sc-veloce) var(--sc-curva),
              color var(--sc-veloce) var(--sc-curva),
              box-shadow var(--sc-veloce) var(--sc-curva);
}
#footer .sc-mk:hover {
  border-color: var(--sc-mar);
  color: var(--sc-mar-testo);
  box-shadow: var(--sc-ombra-2);
}
/* Il nome scritto: via dagli occhi, non dall'accessibilita'. `clip-path` e non
   `display: none`, perche' `display: none` lo toglie anche al lettore di
   schermo. */
#footer .sc-mk--muto .elementor-icon-list-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
#footer .sc-mk::before {
  content: "";
  height: 18px;                        /* altezza delle maiuscole resa: ~11 px */
}
/* Le larghezze sono la larghezza del viewBox moltiplicata per 18/30: e' quello
   che serve perche' `mask-size: contain` non lasci aria intorno alla parola. */
#footer .sc-mk--paypal::before {
  width: 51px;
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85 30'%3E%3Ctext x='0' y='23' textLength='85' font-family='Arial,Helvetica,sans-serif' font-size='26' font-weight='700'%3EPayPal%3C/text%3E%3C/svg%3E");
}
#footer .sc-mk--visa::before {
  width: 37px;
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 30'%3E%3Ctext x='0' y='23' textLength='61' font-family='Arial,Helvetica,sans-serif' font-size='26' font-weight='700'%3EVISA%3C/text%3E%3C/svg%3E");
}
#footer .sc-mk--stripe::before {
  width: 43px;
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71 30'%3E%3Ctext x='0' y='23' textLength='71' font-family='Arial,Helvetica,sans-serif' font-size='26' font-weight='700'%3Estripe%3C/text%3E%3C/svg%3E");
}
#footer .sc-mk--fedex::before {
  width: 47px;
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 30'%3E%3Ctext x='0' y='23' textLength='78' font-family='Arial,Helvetica,sans-serif' font-size='26' font-weight='700'%3EFedEx%3C/text%3E%3C/svg%3E");
}
#footer .sc-mk--gls::before {
  width: 34px;
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 30'%3E%3Ctext x='0' y='23' textLength='56' font-family='Arial,Helvetica,sans-serif' font-size='26' font-weight='700'%3EGLS%3C/text%3E%3C/svg%3E");
}

/* «Direct Bank Transfer» non e' un circuito e non ha un marchio: ridurlo a un
   disegnino sarebbe un indovinello. Tiene il testo, prende l'icona della banca
   e la pastiglia si allarga quanto serve. */
#footer .sc-mk--parlante {
  /* Una riga tutta sua. Misurato: nella colonna da 166 px del telaio 1440 la
     scritta «Direct Bank Transfer» non ci sta accanto a un'altra pastiglia, e
     lasciandola in coda alle altre finiva spezzata in due con il testo
     centrato — sembrava un errore. Su una riga sua, allineata a sinistra e con
     l'icona all'altezza della prima riga, va a capo in modo leggibile. */
  flex: 1 1 100%;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 7px;
  padding: 7px 10px;
  font-family: var(--sc-testo);
  font-size: 12px;
  line-height: 1.3;
}
#footer .sc-mk--banca::before {
  content: "";
  width: 17px;
  height: 17px;
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.6 12 4.4l9 5.2'/%3E%3Cpath d='M5.4 9.6v8.6M9.8 9.6v8.6M14.2 9.6v8.6M18.6 9.6v8.6'/%3E%3Cpath d='M3 20.8h18'/%3E%3C/svg%3E");
}
/* Rete di sicurezza: una voce che il JS non riconosce (un metodo aggiunto
   domani) prende la carta di credito e tiene il suo nome. Non resta mai una
   pastiglia vuota. */
#footer .sc-mk--generico::before {
  content: "";
  width: 17px;
  height: 17px;
  --scp-i: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.4'/%3E%3Cpath d='M2.5 9.6h19'/%3E%3Cpath d='M6 14.6h3.4'/%3E%3C/svg%3E");
}


/* =============================================================================
   7 · LA COMPARSA
   -----------------------------------------------------------------------------
   Una sola animazione, e discreta: quando la fascia entra nella vista, le sei
   fotografie e le cinque colonne arrivano una dopo l'altra, con 60 ms di
   scarto. Non e' decorazione fine a se stessa — e' l'unico modo per far notare
   una fascia che sta in fondo alla pagina, dove si arriva gia' stanchi.

   LE REGOLE CHE MI SONO DATO
   · Solo `opacity` e `transform`: nessun riflusso, nessuno spostamento di
     layout, tutto sul compositore.
   · Niente moto perpetuo: parte una volta, finisce, e non torna piu'.
   · Se il JS non gira, NIENTE e' nascosto. Lo stato di partenza (invisibile)
     esiste solo sotto `html.sc-piede-anim`, e quella classe la mette il JS
     dopo aver controllato che l'utente non abbia chiesto meno movimento.
     E' il contrario del difetto classico «contenuto invisibile perche' lo
     script non e' arrivato».
   ========================================================================== */

html.sc-piede-anim .sc-rivela {
  opacity: 0;
  transform: translateY(10px);
}
/* 460 ms e 45 ms di scarto: con 520 e 60 la fascia intera ci metteva 820 ms a
   comparire, e scorrendo veloce fino in fondo si vedeva il piede vuoto. Ora
   sono 685 ms e la comparsa parte 15% prima del bordo dello schermo (vedi la
   nota nel JS): a schermo, la fascia e' gia' pronta quando ci arrivi. */
html.sc-piede-anim .sc-rivela.sc-visto {
  opacity: 1;
  transform: none;
  transition: opacity 460ms var(--sc-curva) var(--scp-ritardo, 0ms),
              transform 460ms var(--sc-curva) var(--scp-ritardo, 0ms);
}

/* 00-fondamenta azzera gia' le durate quando l'utente chiede meno movimento,
   ma quella regola non basta qui: azzerando la sola transizione, lo STATO di
   partenza resterebbe (opacita' zero) e il contenuto sparirebbe. Va spento lo
   stato, non la transizione. Stesso ragionamento di 06 § 13. */
@media (prefers-reduced-motion: reduce) {
  html.sc-piede-anim .sc-rivela,
  html.sc-piede-anim .sc-rivela.sc-visto {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.home #main #sb_instagram .sbi_photo_wrap:hover { transform: none; }
  body.home #main .sc-pi__cta:hover { box-shadow: none; }
}


/* =============================================================================
   8 · LE LARGHEZZE — 1440, 1024, 390
   -----------------------------------------------------------------------------
   Misurato in tutti e tre i telai, non stimato.
   ========================================================================== */

/* --- fino a 1200 px: sei riquadri diventano tre ---------------------------
   A 1024 px i sei riquadri scendevano a 158 px l'uno: una fustella in funzione
   a 158 px non e' una prova di niente, e' una macchiolina. Tre riquadri per
   riga, due righe, e ogni fotografia torna a 320 px. */
@media (max-width: 1200px) {
  body.home #main #sb_instagram #sbi_images {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.home #main .elementor-element-df728b3 { padding-block: var(--sc-s7); }
  #footer .elementor-element-e5d50d1 > .e-con { flex: 1 1 168px; }
}

/* --- fino a 991 px: le cinque colonne vanno a capo ------------------------
   Cinque colonne in 700 px di larghezza utile fanno 130 px l'una, e «Terms &
   Conditions» ci va a capo tre volte. Con `flex-wrap` (dichiarato al § 3) e un
   minimo di 200 px si sistemano da sole in due righe. */
@media (max-width: 991px) {
  #footer .elementor-element-e5d50d1 > .e-con { flex: 1 1 200px; }
}

/* --- telefono, 390 px -----------------------------------------------------
   Il plugin, sotto i 480 px, mette UNA colonna: sei fotografie da 358 px
   impilate, quasi 2.200 px di pagina da scorrere per arrivare al piede. Due
   colonne: la fotografia resta di 175 px — piccola, ma sul telefono si guarda
   da vicino — e la fascia sta in 550 px invece di 2.200.
   La testata si impila e l'invito diventa largo quanto la colonna: un
   bersaglio da 44 px di altezza su tutta la riga. */
@media (max-width: 767px) {
  body.home #main #sb_instagram #sbi_images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.home #main .elementor-element-df728b3 { padding-block: var(--sc-s6); }
  body.home #main #sb_instagram .sb_instagram_header {
    gap: var(--sc-s3);
    margin-bottom: var(--sc-s4);
  }
  body.home #main .sc-pi__cta {
    width: 100%;
    justify-content: center;
  }
  body.home #main #sb_instagram .sbi_header_img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }
  /* Il sollevamento col dito non esiste: sul telefono `:hover` resta appiccicato
     dopo il tocco e la fotografia rimane alzata. Stessa scelta di 01 § 13. */
  body.home #main #sb_instagram .sbi_photo_wrap:hover { transform: none; }
  body.home #main #sb_instagram .sbi_photo_wrap:hover::before { opacity: 0; }
  /* Il disco del video si stringe: su 175 px, 48 px di disco coprivano un
     quarto del fotogramma. */
  body.home #main #sb_instagram .sbi_playbtn {
    width: 40px !important;
    height: 40px !important;
    margin: -20px 0 0 -20px !important;
    padding: 11px 11px 11px 14px;
  }

  /* Le cinque colonne diventano due, e restano due: una sola colonna renderebbe
     il piede lungo il doppio senza guadagnare leggibilita'. */
  #footer .elementor-element-e5d50d1 {
    gap: var(--sc-s4) var(--sc-s5);
  }
  #footer .elementor-element-e5d50d1 > .e-con { flex: 1 1 132px; }
  /* 01 § 13 porta le voci a 44 px sotto i 767: le icone lo seguono e restano
     centrate sulla riga. Non ridichiaro il min-height — e' gia' giusto. */
}

/* --- schermi molto stretti (sotto i 360) ----------------------------------
   Una colonna sola per i link, ma le pastiglie restano affiancate: sono
   larghe 54-85 px e ci stanno in due anche su 320. */
@media (max-width: 359px) {
  #footer .elementor-element-e5d50d1 > .e-con { flex: 1 1 100%; }
}


/* =============================================================================
   9 · COSA NON HO TOCCATO, E PERCHE'
   -----------------------------------------------------------------------------
   · LA STRISCIA DEI LOGHI ISTITUZIONALI (`.elementor-element-b149e2e` e
     l'immagine `.elementor-element-2b17445`: Regione Marche, Repubblica
     Italiana, FESR, Unione Europea). Sono vincoli di un bando: dimensioni,
     colori e proporzioni sono prescritti, e un filtro o un ritocco li rende
     non conformi. Nessuna regola di questo foglio li nomina. Se un giorno
     qualcuno li vede storti, non e' colpa di qui.
   · IL LOGO DEL PIEDE (`.elementor-element-6329834`). 01 § 12 lo tiene in
     piedi con un cerotto — il file `logo_footer2.svg` e' tutto bianco, quindi
     invisibile sulla carta, e 01 lo nasconde e ne ridisegna la sagoma come
     maschera. Funziona. La cosa giusta resta far fare una versione scura del
     file: e' una richiesta per il proprietario, non un lavoro da CSS, e
     aggiungere un secondo cerotto sopra il primo peggiorerebbe le cose.
   · I COLORI DEI LINK DEL PIEDE. 01 li ha portati a `--sc-ink-2` dopo averli
     misurati (9,02:1 sulla carta). Sono giusti. Cambio solo lo stato di
     passaggio del mouse, che prima non c'era per gli elenchi.

   -----------------------------------------------------------------------------
   NOTA PER IL PROPRIETARIO — LA STRISCIA STA SOLO IN HOME
   -----------------------------------------------------------------------------
   Controllato pagina per pagina: `sb_instagram` compare nella home e in
   nessun'altra pagina. Chi arriva da una ricerca su «scatola per profumo»
   atterra sulla scheda prodotto e quelle fotografie non le vede mai.
   Portarla anche sulle categorie e sulle schede prodotto e' una decisione da
   prendere insieme (costa un widget in piu' nel modello Elementor, non una
   riga di codice) e la mia opinione sta nel resoconto.
   ========================================================================== */