/* ============================================================================
   ECM — Cookie banner
   [2026-10-05, regola di Ale per tutti i siti] IL BANNER SI VESTE COME IL SITO.
   Caratteri: ereditati dalla pagina (font-family: inherit), non scelti qui.
   Colori e forme: variabili --ecmprivacy-*, che ogni sito imposta su :root nel
   foglio di stile del suo tema. Senza variabili il banner esce neutro (bianco,
   nero, caratteri del sito): corretto ovunque, di nessuno in particolare.
   Fino alla 2.3.2 i colori di riserva erano quelli di tenutecatena (carta,
   inchiostro, oliva, titolo con le grazie) e uscivano uguali su ogni sito.

     --ecmprivacy-bg            sfondo del banner              #fff
     --ecmprivacy-text          testo                          quello della pagina
     --ecmprivacy-ink           titolo e testi forti           #111
     --ecmprivacy-accent        filo in alto, spunte, fuoco    #111
     --ecmprivacy-rule          bordi e righe                  nero al 14%
     --ecmprivacy-link          collegamento all'informativa   come --ecmprivacy-ink
     --ecmprivacy-size          corpo del testo                .9375rem
     --ecmprivacy-radius        angoli del banner              0
     --ecmprivacy-font-title    carattere del titolo           quello della pagina
     --ecmprivacy-title-weight  peso del titolo                600
     --ecmprivacy-btn-bg        Rifiuta e Accetta: sfondo      #111
     --ecmprivacy-btn-ink       Rifiuta e Accetta: testo       #fff
     --ecmprivacy-btn-bg-hover  al passaggio                   #333
     --ecmprivacy-btn2-bg       Personalizza: sfondo           trasparente
     --ecmprivacy-btn2-ink      Personalizza: testo            come --ecmprivacy-ink
     --ecmprivacy-btn2-rule     Personalizza: bordo            nero al 30%
     --ecmprivacy-btn-radius / -weight / -spacing / -size / -case   forma dei pulsanti

   ⚠️ Rifiuta e Accetta usano le STESSE variabili di proposito: non esiste un modo
   di colorarli diversi senza toccare questo file, ed è voluto (Garante, par. 7.1).
   ========================================================================== */

.ecmprivacy-cookie {
  position: fixed;
  z-index: 10000;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 46rem;
  margin-inline: auto;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--ecmprivacy-bg, #fff);
  color: var(--ecmprivacy-text, inherit);
  font-family: inherit;
  border: 1px solid var(--ecmprivacy-rule, rgba(0, 0, 0, .14));
  border-top: 3px solid var(--ecmprivacy-accent, #111);
  border-radius: var(--ecmprivacy-radius, 0);
  box-shadow: 0 -2px 40px rgba(0, 0, 0, .16);
  font-size: var(--ecmprivacy-size, .9375rem);
  line-height: 1.6;
  text-align: left;
}

.ecmprivacy-cookie[hidden] { display: none; }

.ecmprivacy-cookie.is-visible {
  animation: ecmprivacy-cookie-in .28s cubic-bezier(.2, .7, .3, 1) both;
}

/* [ECM 2026-09-18] Il banner stampato dal server c'e' gia' al primo disegno: non "entra"
   da nessuna parte, e farlo entrare lo stesso costa caro.
   ⚠️ Misurato su thegoodgarden.fr da telefono con rete lenta: **con** la dissolvenza
   l'LCP e' 9,9 s, **senza** e' 3,5 s — cioe' il primo disegno. Non e' che il banner si
   veda dopo: si vede a 3,5 s in tutti e due i casi. E' che l'animazione di opacita' gira
   sul compositore, il filo principale non ridisegna finche' non ha finito con il pacco
   JavaScript da 314 KB in fondo alla pagina, e Chrome segna l'LCP al primo ridisegno
   utile — sei secondi dopo. Il numero peggiora, la realta' no: ma quel numero e' quello
   che Google misura.
   L'animazione resta per chi riapre il banner dal pulsante «Preferenze cookie»: li'
   entra davvero, e il JS toglie questa classe. */
.ecmprivacy-cookie.is-visible.ecmprivacy-cookie--dal-server { animation: none; }

@keyframes ecmprivacy-cookie-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ecmprivacy-cookie.is-visible { animation: none; }
}

/* ── Titolo e testo ─────────────────────────────────────────────────────── */
.ecmprivacy-cookie__title {
  font-family: var(--ecmprivacy-font-title, inherit);
  font-size: 1.3rem;
  font-weight: var(--ecmprivacy-title-weight, 600);
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 .5rem;
  padding: 0 2rem 0 0;              /* non finire sotto la X */
  color: var(--ecmprivacy-ink, #111);
}

.ecmprivacy-cookie__text {
  margin: 0;
  max-width: 68ch;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.ecmprivacy-cookie .ecmprivacy-cookie__policy-link {
  font-family: inherit;
  font-size: inherit;
  color: var(--ecmprivacy-link, var(--ecmprivacy-ink, #111));
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ecmprivacy-cookie .ecmprivacy-cookie__policy-link:hover { color: var(--ecmprivacy-ink, #111); }

/* ── X di chiusura (= rifiuto) ──────────────────────────────────────────── */
.ecmprivacy-cookie__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  border-radius: var(--ecmprivacy-btn-radius, 3px);
  transition: color .18s ease, background-color .18s ease;
}

.ecmprivacy-cookie__close:hover {
  color: var(--ecmprivacy-ink, #111);
  background: rgba(0, 0, 0, .06);
}

/* ── Pannello categorie ─────────────────────────────────────────────────── */
.ecmprivacy-cookie__prefs {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ecmprivacy-rule, rgba(0, 0, 0, .14));
  display: grid;
  gap: .75rem;
}

.ecmprivacy-cookie__prefs[hidden] { display: none; }

.ecmprivacy-cookie__cat {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
  font-size: .93em;
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  color: inherit;
  min-height: 44px;
  padding: .2rem 0;
}

.ecmprivacy-cookie__cat input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .18rem;
  accent-color: var(--ecmprivacy-accent, #111);
  cursor: pointer;
}

.ecmprivacy-cookie__cat input[disabled] { cursor: not-allowed; opacity: .55; }

.ecmprivacy-cookie__cat strong { color: var(--ecmprivacy-ink, #111); font-weight: 700; }

/* ── Pulsanti ───────────────────────────────────────────────────────────── */
.ecmprivacy-cookie__actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-items: center;
}

.ecmprivacy-cookie .ecmprivacy-cookie__btn {
  font-family: inherit;
  font-size: var(--ecmprivacy-btn-size, .8125rem);
  font-weight: var(--ecmprivacy-btn-weight, 600);
  letter-spacing: var(--ecmprivacy-btn-spacing, .06em);
  text-transform: var(--ecmprivacy-btn-case, uppercase);
  line-height: 1.2;
  padding: .8rem 1.25rem;
  min-height: 44px;
  flex: 1 1 9.5rem;                /* tutti e tre larghi uguale: «uguali dimensioni» */
  border-radius: var(--ecmprivacy-btn-radius, 3px);
  border: 1px solid var(--ecmprivacy-btn-bg, #111);
  box-shadow: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Rifiuta e Accetta hanno lo STESSO peso visivo: stesse variabili, stessa classe.
   È un'indicazione del Garante (Linee guida 2021, par. 7.1), non una scelta estetica.
   Non differenziarli. */
.ecmprivacy-cookie .ecmprivacy-cookie__btn--equal,
.ecmprivacy-cookie .ecmprivacy-cookie__btn--save {
  background: var(--ecmprivacy-btn-bg, #111);
  color: var(--ecmprivacy-btn-ink, #fff);
  border-color: var(--ecmprivacy-btn-bg, #111);
}

.ecmprivacy-cookie .ecmprivacy-cookie__btn--equal:hover,
.ecmprivacy-cookie .ecmprivacy-cookie__btn--save:hover {
  background: var(--ecmprivacy-btn-bg-hover, #333);
  border-color: var(--ecmprivacy-btn-bg-hover, #333);
  color: var(--ecmprivacy-btn-ink, #fff);
}

/* Personalizza: chiaro, in mezzo. Resta un pulsante vero, con bordo e testo leggibile. */
.ecmprivacy-cookie .ecmprivacy-cookie__btn--ghost {
  background: var(--ecmprivacy-btn2-bg, transparent);
  color: var(--ecmprivacy-btn2-ink, var(--ecmprivacy-ink, #111));
  border-color: var(--ecmprivacy-btn2-rule, rgba(0, 0, 0, .3));
}

.ecmprivacy-cookie .ecmprivacy-cookie__btn--ghost:hover {
  border-color: var(--ecmprivacy-ink, #111);
  background: rgba(0, 0, 0, .04);
}

.ecmprivacy-cookie__btn--save[hidden] { display: none; }

.ecmprivacy-cookie__btn:focus-visible,
.ecmprivacy-cookie__close:focus-visible {
  outline: 2px solid var(--ecmprivacy-accent, #111);
  outline-offset: 2px;
}

/* ── Link "Preferenze cookie" nel footer ────────────────────────────────── */
.ecmprivacy-cookie-reopen {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 0;
  padding: .5rem 0;
  min-height: 44px;
  cursor: pointer;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: inherit;
  opacity: .85;
  transition: opacity .18s ease;
}

.ecmprivacy-cookie-reopen:hover { opacity: 1; text-decoration: underline; }

.ecmprivacy-cookie-reopen .material-icons { font-size: 1.05rem; }

.ecmprivacy-cookie-reopen:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .ecmprivacy-cookie {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 1.25rem 1.25rem;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
  }

  .ecmprivacy-cookie__title { font-size: 1.15rem; }

  .ecmprivacy-cookie__actions { flex-direction: column; align-items: stretch; }

  .ecmprivacy-cookie .ecmprivacy-cookie__btn { width: 100%; flex: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   [ECM 2026-09-03] "Preferenze cookie" da link di footer a PULSANTE FISSO,
   stesso schema di ecotempo e doctorbike: a riposo è solo l'ingranaggio,
   all'hover (o al focus da tastiera) si apre e mostra l'etichetta.
   Palette del progetto: inchiostro a riposo, oliva quando si apre.

   [ECM 2026-09-18] IN BASSO A SINISTRA, e non è una scelta di gusto.
   L'angolo in basso a DESTRA è di altri, misurato su thegoodgarden (4 negozi):
   · il riquadro recensioni di Google (modulo ecmreviews) non è il quadratino
     che si vede: è un iframe #merchantwidgetiframe largo 84px (68 da telefono)
     e ALTO QUANTO LO SCHERMO (0→880px), a z-index 2147483647, cioè il massimo
     che un browser accetta. Non ci si passa sopra alzando il z-index (non c'è
     un numero più grande) e non lo si scavalca salendo (la colonna è alta
     tutta la pagina): l'unico modo è uscire da quella colonna;
   · il pulsante WhatsApp (ets_whatsapp, right_bottom) occupa da 101 a 210px
     di larghezza — dipende da quanto è lungo il testo nella lingua del negozio.
   Col pulsante a destra i suoi 9 punti rispondevano all'iframe 9 volte su 9 da
   computer e 6 su 9 da telefono: chi aveva accettato non poteva più cambiare
   idea, ed è un obbligo di legge, non una comodità.
   A sinistra, in tutte e sei le pagine misurate e su tre siti, non c'è niente
   di fisso — tranne la barra bassa dei temi sullo schermo stretto: vedi sotto.
   Gli scostamenti sono variabili CSS: un sito che ha l'angolo destro libero
   rimette il pulsante dov'era con --ecmprivacy-reopen-left: auto e
   --ecmprivacy-reopen-right: 18px, senza toccare il modulo.
   ═══════════════════════════════════════════════════════════════════════ */
.ecmprivacy-cookie-reopen {
  position: fixed;
  left: var(--ecmprivacy-reopen-left, 18px);
  right: var(--ecmprivacy-reopen-right, auto);
  bottom: var(--ecmprivacy-reopen-bottom, 18px);
  z-index: 1090;
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 46px;                 /* a riposo: solo il cerchio con l'ingranaggio */
  overflow: hidden;
  padding: .6rem;
  border: 0;
  border-radius: 50px;
  background: var(--ecmprivacy-btn-bg, #111);
  color: var(--ecmprivacy-btn-ink, #fff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  transition: max-width .28s cubic-bezier(.2,.7,.3,1), background .18s ease, box-shadow .18s ease;
}
.ecmprivacy-cookie-reopen:hover,
.ecmprivacy-cookie-reopen:focus-visible {
  max-width: 260px;
  gap: .5rem;
  background: var(--ecmprivacy-btn-bg-hover, #333);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
  text-decoration: none;
  opacity: 1;
}
.ecmprivacy-cookie-reopen:focus-visible {
  outline: 2px solid var(--ecmprivacy-accent, #111);
  outline-offset: 3px;
}
.ecmprivacy-cookie-reopen .material-icons {
  font-size: 1.35rem;
  flex: 0 0 auto;
  animation: ecmprivacy-gear 8s linear infinite;
}
.ecmprivacy-cookie-reopen:hover .material-icons { animation-duration: 2s; }
@keyframes ecmprivacy-gear { to { transform: rotate(360deg); } }

/* Mentre il banner è aperto il pulsante non serve. Il JS marca il BANNER
   (.is-visible), non il body, quindi si risale con :has(). Se un browser non
   lo supporta non succede nulla di male: il banner è fisso a z-index 2000 e
   copre comunque il pulsante, che sta a 1090. */
body:has(.ecmprivacy-cookie.is-visible) .ecmprivacy-cookie-reopen { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ecmprivacy-cookie-reopen { transition: background .18s ease; }
  .ecmprivacy-cookie-reopen .material-icons { animation: none; }
}

/* Su schermo stretto resta il cerchio: l'etichetta si apre al tocco (focus).
   E sale sopra la BARRA BASSA che questi temi tengono fissa da telefono: 60px
   su thegoodgarden (#stiky-mobile, col pulsante del menu proprio a sinistra),
   58 su amotorbike (div.menu), 60 su florstyle. A 12px il nostro ingranaggio
   ci finirebbe sopra e coprirebbe il menu del sito: 60 + 12 di aria = 72.
   Un sito senza barra bassa scende a 12 con --ecmprivacy-reopen-bottom-sm. */
@media (max-width: 36rem) {
  .ecmprivacy-cookie-reopen {
    left: var(--ecmprivacy-reopen-left-sm, 12px);
    right: var(--ecmprivacy-reopen-right-sm, auto);
    bottom: var(--ecmprivacy-reopen-bottom-sm, 72px);
  }
}

/* L'etichetta a riposo è chiusa davvero: larghezza zero e trasparente.
   Il pulsante resta un cerchio pulito da 46px (sopra i 44px di area
   toccabile minima), e l'aria-label tiene il nome per chi usa uno screen
   reader anche mentre il testo non si vede. */
.ecmprivacy-cookie-reopen__label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .28s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}
.ecmprivacy-cookie-reopen:hover .ecmprivacy-cookie-reopen__label,
.ecmprivacy-cookie-reopen:focus-visible .ecmprivacy-cookie-reopen__label {
  max-width: 14rem;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ecmprivacy-cookie-reopen__label { transition: opacity .2s ease; }
}