/* almare-mobile.css — telefono e tablet per il sito Spritz ALMARE (ricostruito da WordPress/Elementor).
   PERCHE' ESISTE: il CSS di Elementor della home (post-723) non ha una sola media query, quindi a 375 px
   la testata (collage 2560x1200 in `cover`) mostrava solo il centro dei pannelli 2-3, le quattro sezioni
   prodotto riducevano la bottiglia sdraiata a 117 px sotto l'etichetta, il menu si apriva su un pannello
   vuoto con un secondo hamburger dentro, bersagli del dito a 30 px e pie' di pagina a 10 px (misurato con
   Playwright il 01/10/2026, tmp del banco: misura-prima.json).
   COME: caricato per ULTIMO da partials/_head.ejs, quindi a parita' di specificita' vince sulle regole di
   Elementor. Sopra i 1024 px non cambia niente: il desktop resta identico.
   Asset mobile (testata 2x2, bottiglie in piedi, striscia in tre pezzi) da
   scripts/almarespritz/prepara-asset-testata-set-mobile.js. */

/* ── Guscio: menu e intestazione (tutte le pagine), fino al tablet ─────────────────────────── */
@media (max-width: 1024px) {
  /* l'icona del menu era 30x30: bersaglio del dito ad almeno 44 px, senza spostarla */
  .elementor-widget-icon .elementor-icon {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 7px; margin: -7px;
  }
  /* Nella finestra del menu (la <ul> sta dentro <nav class="eael-nav-menu-wrapper">: selettori discendenti, non figli diretti) il widget EAEL mostrava, sotto i 1025 px, un SECONDO hamburger (quadrato nero)
     e nascondeva le voci: qui le voci stanno subito in lista e il secondo hamburger non esiste. */
  #elementor-popup-modal-217 .eael-hamburger--tablet .eael-simple-menu-container .eael-simple-menu-toggle { display: none !important; }
  #elementor-popup-modal-217 .eael-hamburger--tablet .eael-simple-menu-container ul.eael-simple-menu { display: block !important; }
  #elementor-popup-modal-217 .eael-simple-menu-container ul.eael-simple-menu > li { float: none; display: block; width: 100%; }
  #elementor-popup-modal-217 .eael-simple-menu-container ul.eael-simple-menu > li > a {
    display: block; width: 100%; box-sizing: border-box; padding: 14px 16px; min-height: 48px;
    font-size: 20px; line-height: 1.2; text-align: center; border-bottom: 1px solid #f2f2f2;
  }
  #elementor-popup-modal-217 .dialog-message { padding: 56px 16px 24px; }
}

/* ── Pie' di pagina (10 px, link alti 13 px) e bottoni "Scheda Tecnica" (150x32 a 12 px): bersagli
   del dito da 44 px su telefono E tablet ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .elementor-40 .elementor-element.elementor-widget-text-editor p { font-size: 13px; line-height: 1.6; }
  .elementor-40 .elementor-element.elementor-widget-text-editor a { display: inline-block; padding: 12px 4px; }
  .elementor-40 .elementor-element.elementor-widget-text-editor { padding: 6px 0; }
  .elementor-723 .elementor-top-section .elementor-widget-button .elementor-button,
  .elementor-723 .almare-limoncello .elementor-button { font-size: 14px; padding: 13px 30px; min-height: 44px; }
}

/* ── Home: testata ──────────────────────────────────────────────────────────────────────────── */
/* Telefono: i quattro pannelli in griglia 2x2 (1273x2413), tutta la bottiglia in ogni cella. */
@media (max-width: 767px) {
  .elementor-723 .elementor-element.elementor-element-5260d19:not(.elementor-motion-effects-element-type-background),
  .elementor-723 .elementor-element.elementor-element-5260d19 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url("/assets/img/spritz-almare-testata-mobile.webp");
    background-size: cover; background-position: center top; background-color: #ffffff;
  }
  /* altezza = larghezza x 2413/1273, cosi' la griglia entra intera senza tagli */
  .elementor-723 .elementor-element.elementor-element-5260d19 > .elementor-container { min-height: 189.5vw; }
}
/* Tablet: il collage largo intero (contain), alto quanto serve e non 800 px fissi. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-723 .elementor-element.elementor-element-5260d19:not(.elementor-motion-effects-element-type-background),
  .elementor-723 .elementor-element.elementor-element-5260d19 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: contain; background-position: center center; background-color: #ffffff;
  }
  .elementor-723 .elementor-element.elementor-element-5260d19 > .elementor-container { min-height: 46.9vw; }
}

/* ── Home: "L'Aperitivo Autentico Italiano" ─────────────────────────────────────────────────── */
.almare-prep-mobile { display: none; }
@media (max-width: 767px) {
  .elementor-723 .elementor-element.elementor-element-b17ff1d { padding: 3em 0 2.5em; }
  /* la striscia "come si prepara" (tre icone in fila, 2048 px) a 355 px aveva il testo a ~5 px:
     sul telefono si mostra in tre pezzi uno sotto l'altro */
  .elementor-723 .elementor-element.elementor-element-3ae1ce8 picture { display: none; }
  /* tre pezzi ritagliati sul disegno: stessa altezza e allineati a sinistra, cosi' i cerchi stanno in colonna;
     il blocco e' largo quanto il pezzo piu' largo ed e' centrato nella sezione */
  .elementor-723 .elementor-element.elementor-element-3ae1ce8 .almare-prep-mobile {
    display: grid; gap: 18px; justify-items: start; width: max-content; max-width: 100%; margin: 4px auto 0;
  }
  .elementor-723 .elementor-element.elementor-element-3ae1ce8 .almare-prep-mobile img { height: 62px; width: auto; max-width: 100%; }
}

/* ── Home: le quattro sezioni prodotto (Hugo, Classico, Pompelmo Rosa, Limoncello) ──────────── */
@media (max-width: 767px) {
  /* niente fascia sdraiata nello sfondo e niente 600 px fissi: la sezione e' alta quanto il contenuto */
  .elementor-723 .elementor-element.elementor-element-b5ed88f:not(.elementor-motion-effects-element-type-background),
  .elementor-723 .elementor-element.elementor-element-b4f7fdc:not(.elementor-motion-effects-element-type-background),
  .elementor-723 .elementor-element.elementor-element-3178e83:not(.elementor-motion-effects-element-type-background),
  .elementor-723 .almare-limoncello:not(.elementor-motion-effects-element-type-background) { background-image: none; }
  .elementor-723 .elementor-element.elementor-element-b5ed88f > .elementor-container,
  .elementor-723 .elementor-element.elementor-element-b4f7fdc > .elementor-container,
  .elementor-723 .elementor-element.elementor-element-3178e83 > .elementor-container,
  .elementor-723 .almare-limoncello > .elementor-container { min-height: 0; }
  .elementor-723 .elementor-element.elementor-element-b5ed88f,
  .elementor-723 .elementor-element.elementor-element-b4f7fdc,
  .elementor-723 .elementor-element.elementor-element-3178e83,
  .elementor-723 .almare-limoncello { padding: 40px 0 44px; }
  /* la colonna vuota (quella della bottiglia sul desktop) non occupa spazio */
  .elementor-723 .elementor-element.elementor-element-1fa5cf7,
  .elementor-723 .elementor-element.elementor-element-41f1d8f,
  .elementor-723 .elementor-element.elementor-element-b51a255,
  .elementor-723 .elementor-element.elementor-element-limoncello-sx { display: none; }
  /* ordine nella colonna del testo: titoli, BOTTIGLIA IN PIEDI, etichetta, bottone.
     La bottiglia e' uno pseudo-elemento del contenitore flex dei widget, cosi' entra fra i titoli e
     l'etichetta senza toccare il markup; i titoli vanno davanti con order:-1. */
  .elementor-723 .elementor-element.elementor-element-405e19b > .elementor-widget-wrap > .elementor-widget-heading,
  .elementor-723 .elementor-element.elementor-element-0a0f6cc > .elementor-widget-wrap > .elementor-widget-heading,
  .elementor-723 .elementor-element.elementor-element-b49abb6 > .elementor-widget-wrap > .elementor-widget-heading,
  .elementor-723 .elementor-element.elementor-element-limoncello-dx > .elementor-widget-wrap > .elementor-widget-heading { order: -1; }
  .elementor-723 .elementor-element.elementor-element-405e19b > .elementor-widget-wrap::before,
  .elementor-723 .elementor-element.elementor-element-0a0f6cc > .elementor-widget-wrap::before,
  .elementor-723 .elementor-element.elementor-element-b49abb6 > .elementor-widget-wrap::before,
  .elementor-723 .elementor-element.elementor-element-limoncello-dx > .elementor-widget-wrap::before {
    content: ""; order: 0; display: block; width: 100%; height: 125vw; max-height: 520px; margin: 6px 0 22px;
    background-repeat: no-repeat; background-position: center center; background-size: contain;
  }
  .elementor-723 .elementor-element.elementor-element-405e19b > .elementor-widget-wrap::before { background-image: url("/assets/img/spritz-almare-bottiglia-hugo-in-piedi.webp"); }
  .elementor-723 .elementor-element.elementor-element-0a0f6cc > .elementor-widget-wrap::before { background-image: url("/assets/img/spritz-almare-bottiglia-classico-in-piedi.webp"); }
  .elementor-723 .elementor-element.elementor-element-b49abb6 > .elementor-widget-wrap::before { background-image: url("/assets/img/spritz-almare-bottiglia-pompelmo-rosa-in-piedi.webp"); }
  .elementor-723 .elementor-element.elementor-element-limoncello-dx > .elementor-widget-wrap::before { background-image: url("/assets/img/spritz-almare-bottiglia-limoncello-in-piedi.webp?v=20261001c"); }
  /* l'etichetta rotonda era 89 px (25% di 355) */
  .elementor-723 .elementor-element.elementor-element-405e19b .elementor-widget-image img,
  .elementor-723 .elementor-element.elementor-element-0a0f6cc .elementor-widget-image img,
  .elementor-723 .elementor-element.elementor-element-b49abb6 .elementor-widget-image img,
  .elementor-723 .almare-limoncello .almare-limoncello__etichetta img { width: 38%; }
}

/* Tablet (768-1024, due colonne): la fascia sdraiata in `contain` era alta 240 px su 600; la colonna
   vuota mostra la bottiglia in piedi accanto al testo. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-723 .elementor-element.elementor-element-b5ed88f:not(.elementor-motion-effects-element-type-background),
  .elementor-723 .elementor-element.elementor-element-b4f7fdc:not(.elementor-motion-effects-element-type-background),
  .elementor-723 .elementor-element.elementor-element-3178e83:not(.elementor-motion-effects-element-type-background),
  .elementor-723 .almare-limoncello:not(.elementor-motion-effects-element-type-background) { background-image: none; }
  .elementor-723 .elementor-element.elementor-element-1fa5cf7,
  .elementor-723 .elementor-element.elementor-element-41f1d8f,
  .elementor-723 .elementor-element.elementor-element-b51a255,
  .elementor-723 .elementor-element.elementor-element-limoncello-sx { background-repeat: no-repeat; background-position: center center; background-size: auto 82%; }
  .elementor-723 .elementor-element.elementor-element-1fa5cf7 { background-image: url("/assets/img/spritz-almare-bottiglia-hugo-in-piedi.webp"); }
  .elementor-723 .elementor-element.elementor-element-41f1d8f { background-image: url("/assets/img/spritz-almare-bottiglia-classico-in-piedi.webp"); }
  .elementor-723 .elementor-element.elementor-element-b51a255 { background-image: url("/assets/img/spritz-almare-bottiglia-pompelmo-rosa-in-piedi.webp"); }
  .elementor-723 .elementor-element.elementor-element-limoncello-sx { background-image: url("/assets/img/spritz-almare-bottiglia-limoncello-in-piedi.webp?v=20261001c"); }
}

/* ── Home: il set delle quattro bottiglie in chiusura ───────────────────────────────────────── */
@media (max-width: 767px) {
  .elementor-723 .elementor-element.elementor-element-0484137 > .elementor-container { min-height: 0; }
  .elementor-723 .elementor-element.elementor-element-0484137 { padding: 24px 0 12px; }
}