/* ==========================================================================
   [HOME-01] Pop-up Global-e (benvenuto / cambio destinazione) — DRAFT

   Il pop-up e' iniettato dallo script di Global-e: il markup NON e' nostro e
   non va toccato. Qui c'e' SOLO vestizione — tipografia, colori, spaziature,
   allineamenti. Nessun testo, nessuna immagine, nessuna modifica al flusso.

   File dedicato e isolato apposta: se un domani GE cambia le sue classi, si
   spegne questo e il pop-up torna al suo aspetto di fabbrica senza strascichi
   altrove.

   ⚠️ Tutto e' ancorato a `#globale_popup` / `#globale_overlay`: un ID batte le
   classi singole di GE (0,1,0) a prescindere dall'ordine di caricamento,
   quindi NON servono !important. Se un giorno servisse, e' segno che GE ha
   alzato la specificita': meglio accorgersene che averla gia' coperta.

   Su staging il pop-up si vede aggiungendo ?enablegem=true all'indirizzo.

   Stato di partenza misurato (12/09): testi in Titillium Web, titolo 20.16px
   peso 700, velo grigio pieno #888 al 90%, bordo nero netto, spaziature
   strette, X spessa 14px.
   ========================================================================== */

/* ── Il velo dietro ──────────────────────────────────────────────────────── */
/* Era un grigio pieno (#888 al 90%): appiattisce la foto e vira il colore.
   Un nero traslucido lascia leggere la pagina sotto e non introduce tinte. */
#globale_overlay.globale_overlay {
  background-color: rgba(17, 17, 17, 0.45);
  opacity: 1;
}

/* ── La scatola ──────────────────────────────────────────────────────────── */
#globale_popup .glDefaultPopupContainer {
  border: var(--bb-line-width, 1px) solid var(--bb-line, rgba(17, 17, 17, .08));
  box-shadow: 0 18px 60px rgba(17, 17, 17, 0.12);
  padding-top: 56px;            /* era 45 */
}

#globale_popup .glPopupContent {
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 40px;         /* era 15: stava stretto sul fondo */
}

/* ── Tipografia: dal font di GE a quello del sito ────────────────────────── */
/* Copy di servizio, quindi Jost — come CTA ed etichette. Playfair resta ai
   paragrafi editoriali, che qui non c'entrano.

   ⚠️ Qui l'!important SERVE, ed e' l'unico punto del file che ce l'ha. GE
   dichiara `.ql-editor * { font-family:'Titillium Web',Arial !important }`:
   contro un !important la specificita' non conta, quindi la sola ancora
   all'ID non basta. Verificato con CSS.getMatchedStylesForNode: senza
   !important la nostra regola veniva letta e scartata, e il titolo restava
   Titillium. I due bottoni invece stanno FUORI da .ql-editor e prendono Jost
   senza forzature — infatti li' l'!important non c'e'. */
#globale_popup .glTitle,
#globale_popup .glSubTitle,
#globale_popup .glcontentListTitle,
#globale_popup .glContentList,
#globale_popup .glContentList li,
#globale_popup .glMainContent {
  font-family: var(--bb-font-body, 'Jost'), sans-serif !important;
}

/* Titolo: era 20.16px peso 700 con spaziatura NEGATIVA (-0.5px), cioe' stretto
   e pesante. Il peso 700 fra l'altro non e' fra quelli caricati, quindi era
   anche finto. Portato alla scala del sito. */
#globale_popup .glTitle {
  font-size: var(--bb-h4, 17px);
  font-weight: 400;
  letter-spacing: var(--bb-ls-title, 0.04em);
  line-height: 1.35;
  color: var(--bb-fg, #111);
  margin-bottom: 18px;
}

#globale_popup .glSubTitle,
#globale_popup .glcontentListTitle {
  font-size: var(--bb-body, 14px);
  line-height: 1.6;
  color: var(--bb-fg, #111);
  margin-bottom: 10px;
}

#globale_popup .glContentList {
  margin-top: 4px;
  padding-left: 18px;
}

#globale_popup .glContentList li {
  font-size: var(--bb-body, 14px);
  line-height: 1.7;
  color: var(--bb-muted, rgba(17, 17, 17, .68));
  margin-bottom: 4px;
}

/* ── I due comandi ───────────────────────────────────────────────────────── */
#globale_popup .glControls {
  padding-top: 24px;
}

/* Bottone pieno: stesso trattamento delle CTA del sito (maiuscolo spaziato,
   corpo piccolo). Il fondo nero c'era gia' ed e' giusto. */
#globale_popup input.glDefaultBtn,
#globale_popup .backToShop {
  font-family: var(--bb-font-body, 'Jost'), sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  height: 46px;
  border: var(--bb-line-width, 1px) solid var(--bb-black, #000);
  border-radius: 0;
  transition: background-color .2s ease;
}

#globale_popup input.glDefaultBtn:hover,
#globale_popup .backToShop:hover {
  background-color: #3d3d3d;
}

/* Secondo comando: era un blocco alto quanto un bottone, con bordo bianco.
   Diventa un link discreto sottolineato, come gli altri link del sito. */
#globale_popup a.changeShipping {
  font-family: var(--bb-font-body, 'Jost'), sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-fg, #111);
  background: transparent;
  border: 0;
  height: auto;
  line-height: 1.5;
  margin-top: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

#globale_popup a.changeShipping:hover {
  opacity: .65;
}

/* ── La X di chiusura ────────────────────────────────────────────────────── */
/* Erano due barre da 14px: troppo spesse rispetto al resto del sito. */
#globale_popup #geCloseBtn .cross-vertical,
#globale_popup #geCloseBtn .cross-horizontal {
  background-color: var(--bb-fg, #111);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
/* ⚠️ UNICA MODIFICA DI IMPAGINAZIONE DEL FILE — confermata da Fabio il 12/09.
   Difetto PREESISTENTE, non introdotto da noi: GE tiene la classe
   `gle_desktop` e `width: 420px` fissi anche su telefono. Misurato a 390px:
   la scatola andava da x-22 a x398, cioe' sbordava di 22px a sinistra e di 8 a
   destra, e il contenuto veniva tagliato ai lati. Non produce scorrimento
   orizzontale perche' e' in posizione assoluta, quindi passava inosservato
   finche' non lo si misurava.
   Il tetto qui sotto lo fa rientrare (290px a 390) senza toccare markup ne'
   flusso di GE. Decisione presa guardando il prima/dopo: non riaprirla. */
@media (max-width: 480px) {
  #globale_popup .glDefaultPopupContainer {
    width: auto;
    max-width: calc(100vw - 32px);
    padding-top: 44px;
  }

  #globale_popup .glPopupContent {
    padding-left: 24px;
    padding-right: 24px;
  }
}