/** Shopify CDN: Minification failed

Line 7:32 Comments in CSS use "/* ... */" instead of "//"
Line 243:2 Unexpected "<"

**/
<!-- Popup Incorniciamoci /cdn/shop/files/popup-dog.jpg?v=175258407 -->
    <style>
      #popup-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background-color: rgba(128, 128, 128, 0.5);
        z-index: 9998;
      }

      #newsletter-popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 700px;
        background: white;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        border-radius: 16px;
        z-index: 9999;
        overflow: hidden;
        font-family: sans-serif;
      }

      #newsletter-popup .popup-content {
        display: flex;
        flex-direction: row;
      }

      #newsletter-popup .popup-left {
        flex: 1;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
      }

      #newsletter-popup .popup-left h2 {
        margin: 0 0 10px;
        font-size: 22px;
      }

      #newsletter-popup .popup-left p {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.5;
      }

      #newsletter-popup a.button {
        display: inline-block !important;
        width: 100% !important;
        background-color: #FDD638 !important;
        color: #121212 !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: center !important;
        outline: none !important;
        cursor: pointer !important;
        line-height:2.1;
        padding:2.2rem 2.4rem;
        margin:0 auto 1.2rem;
        border-radius:9999px;
        border: none !important; 
        box-shadow: none !important;
      }

      #newsletter-popup a.button:hover {
        background-color: #121212 !important;
        color: #FDD638 !important;
        border: none !important; 
        box-shadow: none !important;
      }

      #newsletter-popup a.button:active {
        transform: scale(0.98) !important;
      }

      #newsletter-popup .privacy-note {
        font-size: 11px;
        margin-top: 10px;
        color: #777;
        line-height: 1.4;
      }

      #newsletter-popup .privacy-note a {
        color: #777;
        text-decoration: underline;
      }

      #newsletter-popup .popup-right {
        flex: 1;
        background-size: cover;
        background-position: center;
        position: relative;
      }

      #popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #FDD638;
        color: #121212;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        font-size: 20px;
        line-height: 1;
        text-align: center;
        cursor: pointer;
        z-index: 10000;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      }

      #newsletter-popup a.button,
      #newsletter-popup a.button:hover,
      #newsletter-popup a.button:active,
      #newsletter-popup a.button:focus,
      #newsletter-popup a.button:focus-visible {
        --buttons-border-width: 0 !important; /* <- elimina il finto bordo di Dawn */
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        text-decoration: none !important;
      }

      @media (max-width: 768px) {
        #newsletter-popup .popup-content {
          flex-direction: column;
        }

        #newsletter-popup .popup-right {
          display: none;
        }

        #newsletter-popup .popup-left {
          padding: 25px;
        }

        #newsletter-popup .popup-left h2 {
          font-size: 20px;
        }
      }


      /* ======== SOLO PER VARIANTE 2 (solo immagine) ======== */
      
  /* Rende il box del popup "trasparente" e con dimensioni fluide */
  #newsletter-popup.inc-popup--image {
    background: transparent;          /* nessun rettangolo bianco sotto */
    box-shadow: none;
    width: auto;                       /* non forziamo 90%/700px del CSS originale */
    max-width: 94vw;                   /* limite orizzontale */
    max-height: 90vh;                  /* limite verticale per schermi bassi */
    overflow: visible;                 /* lascia respirare il pulsante chiudi */
    padding: 0;                        /* togli padding impliciti */
  }

  /* Contenitore dell’immagine senza padding */
  #newsletter-popup.inc-popup--image .inc-popup__content--image {
    padding: 0;
    display: block;
  }

  /* L’immagine scala sempre entro viewport, niente overflow su mobile */
  #newsletter-popup.inc-popup--image .inc-popup__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: min(900px, 94vw);
    max-height: 88vh;
    object-fit: contain;               /* mantiene proporzioni */
    border-radius: 16px;               /* stesso feeling del popup classico */
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  }

  /* Pulsante chiudi sopra l’immagine, ben visibile anche su sfondi scuri/chiari */
  #newsletter-popup.inc-popup--image #popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    font-size: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: 0;
    z-index: 2;
  }
  #newsletter-popup.inc-popup--image #popup-close:hover {
    background: rgba(0,0,0,0.8);
  }
  

  /* ====== VARIANTE 2: SOLO IMMAGINE — MOBILE = 80% VIEWPORT ====== */
  @media (max-width: 768px) {
    /* Contenitore popup: 80% della larghezza dello schermo */
    #newsletter-popup.inc-popup--image {
      width: 80vw !important;   /* override del 90% originale */
      max-width: 80vw !important;
      max-height: 80vh !important; /* limite verticale all’80% dello schermo */
    }

    /* L’immagine si adatta sempre dentro 80vw x 80vh mantenendo le proporzioni */
    #newsletter-popup.inc-popup--image .inc-popup__content--image { padding: 0; }
    #newsletter-popup.inc-popup--image .inc-popup__img {
      display: block;
      width: 100%;
      height: auto;
      max-width: 80vw;
      max-height: 80vh;
      object-fit: contain; /* nessuna distorsione */
      border-radius: 16px;
    }

    /* Pulsante chiudi ben dentro i margini */
    #newsletter-popup.inc-popup--image #popup-close {
      top: 8px;
      right: 8px;
      width: 34px;
      height: 34px;
      font-size: 20px;
      background: rgba(0,0,0,0.65);
      color: #fff;
    }
  }

  /* Schermi molto bassi (es. landscape smartphone) */
  @media (max-height: 480px) {
    #newsletter-popup.inc-popup--image .inc-popup__img { max-height: 70vh; }
  }
  </style>