/* =====================================================================
   BYITALY STORE - footer.css (v2 - riscritto sul markup REALE)
   ---------------------------------------------------------------------
   Tema:   byitaly (child di Classic) - PrestaShop 8.2.6
   Autore: Francesco Fiore - www.fiorefrancesco.com - Licenza MIT
   ---------------------------------------------------------------------
   Struttura REALE confermata da pagina live (nessun override di
   footer.tpl: stiliamo il nativo, stesso principio di header.css v2):

   <footer id="footer">
     <div class="container"><div class="row">
       {displayFooterBefore}: .block_newsletter + .block-social
     </div></div>
     <div class="footer-container">
       <div class="container">
         <div class="row">
           <div class="col-md-6 links">          <!-- ps_linklist -->
             <div class="row">
               <div class="col-md-6 wrapper">     <!-- un blocco -->
                 <p class="h3 hidden-sm-down">Titolo</p>
                 <div class="title clearfix hidden-md-up">
                   <span class="h3">Titolo</span> ...
                 </div>
                 <ul class="collapse">...</ul>
               </div>
               <div class="col-md-6 wrapper">...</div>
             </div>
           </div>
           <div class="ff-footer-brand">...</div>  <!-- ff_theme, NO col-* -->
         </div>
         <div class="row"><div class="ff-subfooter">...</div></div>
         <div class="row"><div class="col-md-12">
           <p class="text-sm-center"><a>© PrestaShop</a></p>  <!-- nativo -->
         </div></div>
       </div>
     </div>
   </footer>
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. CONTENITORE FOOTER  [A]
--------------------------------------------------------------------- */
.footer-container {
  background: var(--ff-navy);
  color: #fff;
  margin-top: 0;
  padding: 64px 0 0;
  box-shadow: none;
}

/* Riga brand + link: .links ha gia' col-md-6 nativo (Bootstrap).
   .ff-footer-brand NON ha classe colonna: le diamo flex:1 per
   occupare lo spazio restante invece di sforzare percentuali fisse
   su una struttura a colonne che non conosciamo del tutto.
   TUTTO scoperto a partire da 992px: sotto quella soglia, Bootstrap
   nativo impila ogni blocco a piena larghezza (comportamento gia'
   corretto che ps_linklist mostra da solo) - le nostre regole flex,
   se non scoperte, restavano attive anche su mobile e impedivano
   quell'impilamento naturale (causa del "gli altri 2 moduli restano
   in orizzontale"). */
@media (min-width: 992px) {
  .footer-container > .container > .row:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-bottom: 48px;
  }
  /* Ogni contenitore ".links" (potrebbero essere PIU' di uno, se hai
     creato "Il tuo account" come elenco separato invece che come colonna
     dentro un blocco esistente: ps_linklist in quel caso genera un
     secondo .col-md-6.links indipendente, non nidificato nel primo) si
     divide lo spazio rimasto DOPO il brand, invece di avere ciascuno
     una percentuale fissa che sommata supererebbe il 100% e andrebbe
     a capo. !important necessario: theme.css del Classic carica dopo
     i nostri file e a parita' di specificita' vincerebbe lui. */
  .footer-container .links {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  .ff-footer-brand {
    flex: 0 0 220px;
    padding-left: 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ---------------------------------------------------------------------
   3bis. BLOCCO "IL TUO ACCOUNT" (ps_customeraccountlinks)  [A]
   ---------------------------------------------------------------------
   Struttura REALE (diversa da ps_linklist): il contenitore ha classi
   "col-md-3 links wrapper" TUTTE SULLO STESSO ELEMENTO (non annidate),
   quindi il selettore discendente ".links .wrapper" usato per
   ps_linklist non lo raggiunge mai - ne' per il flex ne' per i colori.
   Regola dedicata sull'ID reale del modulo. Il flex (riga 1) e' scoperto
   al solo desktop, stesso motivo della sezione sopra; i colori invece
   valgono sempre (anche in mobile, dove lo sfondo resta navy).
--------------------------------------------------------------------- */
@media (min-width: 992px) {
  #block_myaccount_infos {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 25% !important;
  }
}
#block_myaccount_infos .h3,
#block_myaccount_infos .h3 a,
#block_myaccount_infos .title .h3 {
  font-size: var(--ff-fs-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #fff !important;
  margin-bottom: 18px;
}
#block_myaccount_infos .account-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#block_myaccount_infos .account-list li { margin-bottom: 12px; }
#block_myaccount_infos .account-list li a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ff-footer-link);
  transition: color var(--ff-transition), padding-left var(--ff-transition);
}
#block_myaccount_infos .account-list li a:hover {
  color: #fff;
  padding-left: 4px;
}
#block_myaccount_infos .title .navbar-toggler i { color: #fff; }

/* ---------------------------------------------------------------------
   2. BLOCCO BRAND (ff_theme, hook displayFooter)  [A]
--------------------------------------------------------------------- */
.ff-footer-brand__logo img {
  max-height: 90px;
  height: auto;    /* evita deformazioni: l'HTML porta width/height
                      nativi (190x52), senza questo lo stiramento
                      sarebbe lo stesso bug visto sull'immagine
                      del servizio */
  width: auto;
  margin-bottom: 18px;
}
.ff-footer-brand__claim {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 22px;
  max-width: 240px;
}
.ff-footer-social {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ff-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  font-size: 0.9375rem;
  transition: background var(--ff-transition), border-color var(--ff-transition),
              transform var(--ff-transition);
}
.ff-footer-social a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
   3. COLONNE LINK (ps_linklist - markup nativo reale)  [A]
   ---------------------------------------------------------------------
   Titoli reali: <p class="h3 hidden-sm-down"> (desktop) e
   <span class="h3"> dentro .title (mobile collassabile) - NON
   ".link-block .h3" (selettore precedente, mai esistito nel markup).

   IMPORTANTE: ps_linklist assegna ad OGNI blocco una larghezza fissa
   col-md-6 (50%) indipendentemente da quanti blocchi esistono. Con 2
   blocchi va bene (50+50=100%), ma un 3° blocco (anch'esso 50%) non
   trova piu' spazio sulla riga e Bootstrap lo manda a capo. Neutra-
   lizziamo quella larghezza fissa con un flex equo: 2, 3 o 4 blocchi
   si dividono lo spazio automaticamente e restano sulla stessa riga.
--------------------------------------------------------------------- */
@media (min-width: 992px) {
  .footer-container .links .row {
    display: flex;
    flex-wrap: wrap;
  }
  .footer-container .links .wrapper {
    flex: 1 1 0;
    width: auto;       /* neutralizza il col-md-6 fisso */
    max-width: none;   /* idem per eventuale max-width Bootstrap */
    min-width: 140px;  /* sotto questa soglia va a capo (mobile) */
  }
}

.footer-container .links .wrapper p.h3,
.footer-container .links .wrapper .title .h3 {
  font-size: var(--ff-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  margin-bottom: 18px;
}
.footer-container .links .wrapper ul { margin: 0; padding: 0; list-style: none; }
.footer-container .links .wrapper ul li { margin-bottom: 12px; }
.footer-container .links .wrapper ul li a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ff-footer-link);
  transition: color var(--ff-transition), padding-left var(--ff-transition);
}
.footer-container .links .wrapper ul li a:hover {
  color: #fff;
  padding-left: 4px;
}
/* Freccia dell'accordion mobile: bianca invece del default scuro */
.footer-container .links .wrapper .title .navbar-toggler i {
  color: #fff;
}

/* ---------------------------------------------------------------------
   4. SUB-FOOTER (ff_theme, displayFooterAfter) - FULL-BLEED  [A]
   ---------------------------------------------------------------------
   E' annidato dentro il .container centrato di Bootstrap: senza il
   trucco full-bleed resterebbe stretto quanto il container, non a
   piena larghezza schermo (stessa tecnica usata per l'hero).
--------------------------------------------------------------------- */
.ff-subfooter {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--ff-navy-dark);
}
.ff-subfooter .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 66px;
  flex-wrap: wrap;
}
.ff-subfooter__copy,
.ff-subfooter__vat {
  font-size: 0.8125rem;
  color: var(--ff-footer-link);
}
.ff-subfooter__payments {
  display: flex;
  align-items: center;
  gap: 22px;
}
.ff-subfooter__payments img {
  height: 30px;
  width: auto;
  opacity: 0.95;
}
.ff-subfooter__payments img[alt="Visa"] { height: 60px; }

/* ---------------------------------------------------------------------
   5. RIGA COPYRIGHT NATIVA (PrestaShop, ultima riga del footer)
   ---------------------------------------------------------------------
   Nascosta su richiesta cliente. Nessun override di footer.tpl: resta
   nell'HTML (innocuo, non indicizzato visivamente) ma non occupa piu'
   spazio ne' viene mostrata. Per farla ricomparire in futuro, basta
   commentare/rimuovere questa regola.
--------------------------------------------------------------------- */
.footer-container > .container > .row:last-child {
  display: none;
}

/* ---------------------------------------------------------------------
   6. FASCIA USP PRE-FOOTER (ff_usp su displayFooterBefore)  [A]
   ---------------------------------------------------------------------
   RIPRISTINATA - persa per errore durante una delle riscritture di
   stasera (un str_replace ha preso come base una versione del file
   senza questa sezione). Layout base condiviso: il modulo ff_usp
   emette <ul class="ff-usp"> con modifier di colonne/variante; qui
   solo lo stile, in ff_usp solo il markup.
   Varianti dalle immagini:
   --inline : icona a sinistra del testo (Servizi, img 3)
   --stack  : icona sopra, testo centrato (Shop/Settori, img 6-7)
   --divided: separatori verticali tra gli item (Settori, Chi Siamo)
--------------------------------------------------------------------- */
.ff-usp {
  display: grid;
  gap: 24px;
  padding: 44px 0;
  list-style: none;
  margin: 0;
}
.ff-usp--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ff-usp--cols-4 { grid-template-columns: repeat(4, 1fr); }
.ff-usp--cols-5 { grid-template-columns: repeat(5, 1fr); }

.ff-usp__item { display: flex; gap: 14px; align-items: flex-start; }
.ff-usp--stack .ff-usp__item {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ff-usp--divided .ff-usp__item + .ff-usp__item {
  border-left: 1px solid var(--ff-border);
  padding-left: 24px;
}

.ff-usp__icon {
  color: var(--ff-navy);
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.ff-usp--stack .ff-usp__icon { font-size: 2rem; margin-bottom: 6px; }

.ff-usp__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ff-navy);
  margin: 0 0 4px;
}
.ff-usp__text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ff-text-light);
  margin: 0;
  line-height: 1.5;
}