/* Dasti Wine - migliorie UX/UI della home: mobile, tablet e desktop (27/10/2026)
   Caricato dal mu-plugin dastiwine-ux.php dopo gli stili di Elementor. */

/* ---------- Tutte le larghezze ---------- */

/* Ingresso: prima la verifica dell'età, poi il banner cookie.
   Il banner usa un <dialog> (sta sopra a qualsiasi z-index): resta nascosto finché la verifica età è aperta. */
html.age-gate__restricted dialog[open] {
  display: none !important;
}

/* Frecce dei caroselli: piccole, su sfondo tondo, leggibili sopra le schede */
.home .elementor-widget-loop-carousel .elementor-swiper-button,
.home .elementor-widget-image-carousel .elementor-swiper-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .elementor-widget-loop-carousel .elementor-swiper-button svg,
.home .elementor-widget-image-carousel .elementor-swiper-button svg {
  width: 14px;
  height: 14px;
}

/* Schede prodotto: pulsante sempre in fondo (allineato tra le schede) e a tutta larghezza */
.e-loop-item.elementor-774 .elementor-element-e025885 {
  margin-top: auto;
  width: 100%;
}
.e-loop-item.elementor-774 .add_to_cart_button,
.e-loop-item.elementor-774 .added_to_cart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 8px !important;
  font-size: 14px !important;
  line-height: 1.2;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Pulsante WhatsApp in basso a destra */
#elementor-popup-modal-12576 .dialog-widget-content {
  left: auto !important;
  right: 0 !important;
}

/* Titoli del blog nello stesso font dei titoli del sito */
.elementor-13501 .elementor-heading-title,
.elementor-13501 .elementor-heading-title a {
  font-family: "Open Sans", sans-serif !important;
  line-height: 1.35;
}

/* Sottotitolo Gift Box centrato come il titolo */
.home .elementor-element-f349e49 .elementor-heading-title {
  text-align: center;
}

/* Meno spazio prima dei loghi; nessuno spazio vuoto sopra il piè di pagina */
.home .elementor-element.elementor-element-41efd45 {
  margin-top: 64px !important;
}
.elementor-49 .elementor-element.elementor-element-5e2dca4 {
  margin-top: 0 !important;
}

/* ---------- Tablet e mobile (fino a 1024px) ---------- */
@media (max-width: 1024px) {

  /* Nessuno scorrimento orizzontale della pagina */
  html,
  body {
    overflow-x: clip;
  }

  /* Frecce all'altezza delle immagini, così non coprono nomi e prezzi */
  .home .elementor-widget-loop-carousel .elementor-swiper-button {
    top: 28% !important;
  }

  /* Frecce dentro lo schermo (quelle del blog uscivano dai bordi) */
  .home .elementor-widget-loop-carousel .elementor-swiper-button-prev,
  .home .elementor-widget-image-carousel .elementor-swiper-button-prev {
    left: 4px !important;
  }
  .home .elementor-widget-loop-carousel .elementor-swiper-button-next,
  .home .elementor-widget-image-carousel .elementor-swiper-button-next {
    right: 4px !important;
  }

  /* Pulsanti più facili da toccare */
  .e-loop-item.elementor-774 .add_to_cart_button,
  .e-loop-item.elementor-774 .added_to_cart {
    min-height: 44px;
  }

}

/* ---------- Mobile (fino a 767px) ---------- */
@media (max-width: 767px) {

  /* Slider in alto a tutta larghezza (aveva una larghezza massima di 369px) */
  .elementor-element.elementor-element-4c12f48 {
    --width: 100%;
    width: 100% !important;
    max-width: 100% !important;
  }

  .e-loop-item.elementor-774 .add_to_cart_button,
  .e-loop-item.elementor-774 .added_to_cart {
    padding: 10px 8px !important;
  }

  /* Pulsante WhatsApp più piccolo */
  #elementor-popup-modal-12576 .elementor-social-icon {
    --icon-size: 26px;
  }

  .elementor-13501 .elementor-heading-title,
  .elementor-13501 .elementor-heading-title a {
    font-size: 16px;
  }

  .home .elementor-element.elementor-element-41efd45 {
    margin-top: 32px !important;
  }

  /* Carosello loghi alto quanto i loghi (era 156px per loghi di circa 60px) */
  .home .elementor-element-cd20f7d .swiper-slide-image {
    max-height: 80px;
    width: auto;
    object-fit: contain;
  }

  /* Verifica età: pulsanti uno sotto l'altro, dentro il riquadro */
  .age-gate__buttons {
    flex-direction: column;
    gap: 10px;
  }
  .age-gate__submit {
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
  }
}