/* ═════════════════════════════════════════════
   MOBILE.CSS (pulito, no duplicati)
   Supporta:
   - body.mobile-view (view forzata)
   - responsive automatico (<=768px)
   Menu: dropdown assoluto sotto la barra (stabile Safari)
═════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   A) FIX GLOBALI
──────────────────────────────────────────────*/
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
img, video, iframe, svg{
  max-width:100%;
  height:auto;
}
p, li, a{
  overflow-wrap:anywhere;
  word-break:break-word;
}
h1,h2,h3,h4{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* Hamburger nascosto di default */
.nav-toggle-btn,
#nav-toggle{
  display:none;
}

/* ─────────────────────────────────────────────
   B) MOBILE VIEW FORZATA (body.mobile-view)
   (questa è la modalità che usi nei log)
──────────────────────────────────────────────*/
body.mobile-view{
  font-size:14px;
}

body.mobile-view header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:2000;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}

body.mobile-view main{
  padding-top:72px; /* coerente con header */
}

/* HERO: evita che DORONINA esca dai bordi su Safari iPhone */
body.mobile-view .hero-logo{
  max-width:100%;
  font-size:clamp(44px, 10vw, 58px);
  letter-spacing:0.32em;
  padding:0 12px;
  box-sizing:border-box;
  white-space:nowrap;
}

/* mostra hamburger */
body.mobile-view .nav-toggle-btn,
body.mobile-view #nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  width:36px;
  height:36px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  font-size:20px;
  padding:0;
  cursor:pointer;
}

/* ✅ MENU MOBILE (come style.V1.css) */
body.mobile-view nav ul{
  position:absolute;     /* <- stabile */
  top:100%;              /* <- sotto la barra */
  left:0;
  right:0;

  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.10);

  display:none;          /* chiuso */
  flex-direction:column;
  align-items:stretch;

  padding:8px 0;
  margin:0;
  list-style:none;

  z-index:2500;          /* sopra header content */
}

body.mobile-view.nav-open nav ul{
  display:flex;
}

body.mobile-view nav ul a{
  display:block;
  width:100%;
  padding:14px 18px;
  font-size:15px;
  color:var(--text);
  border-bottom:none !important;
}
body.mobile-view nav ul li{
  border-bottom:1px solid rgba(0,0,0,.06);
}
body.mobile-view nav ul li:last-child{
  border-bottom:none;
}

/* layout mobile: sezioni a 1 colonna (target corretto: container + class) */
body.mobile-view .container.about{
  grid-template-columns:1fr !important;
  gap:24px !important;
}

/* workshops/giftcards: in mobile passa a FLEX per evitare collassi/sparizioni */
body.mobile-view .container.workshops,
body.mobile-view .container.giftcards{
  display:flex !important;
  flex-direction:column !important;
  gap:24px !important;
}

/* ordine: immagine sopra testo */
body.mobile-view .workshops-img,
body.mobile-view .giftcards-img{ order:1 !important; }

body.mobile-view .workshops-text,
body.mobile-view .giftcards-text{ order:2 !important; }

/* reset padding-top della colonna destra dell'about */
body.mobile-view .about-col-right{
  padding-top:0 !important;
}

body.mobile-view .catalogue-header{
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
body.mobile-view .catalogue-header .lead{
  text-align:left;
  max-width:100%;
  font-size:13px;
}
body.mobile-view .catalogue-grid{
  grid-template-columns:1fr !important;
  gap:18px;
}

/* ─────────────────────────────────────────────
   C) RESPONSIVE AUTOMATICO (senza mobile-view)
   (utile su iPhone/Android senza forzare view)
──────────────────────────────────────────────*/
@media (max-width: 768px){

  /* attiva hamburger anche senza mobile-view */
  .nav-toggle-btn,
  #nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:8px;
    width:36px;
    height:36px;
    border-radius:8px;
    border:1px solid var(--border);
    background:#fff;
    font-size:20px;
    padding:0;
    cursor:pointer;
  }

  /* header fixed anche qui */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:2000;
    background:rgba(255,255,255,.95);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--border);
  }

  main{ padding-top:72px; }

  /* menu dropdown */
  nav ul{
    position:absolute;
    top:100%;
    left:0;
    right:0;

    background:#fff;
    border-bottom:1px solid var(--border);
    box-shadow:0 10px 30px rgba(0,0,0,.10);

    display:none;
    flex-direction:column;
    align-items:stretch;

    padding:8px 0;
    margin:0;
    list-style:none;

    z-index:2500;
  }

  body.nav-open nav ul{ display:flex; }
  /* ABOUT: 1 colonna anche senza mobile-view */
  .container.about{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .about-col-right{
    padding-top:0 !important;
  }

  /* WORKSHOPS/GIFTCARDS: flex colonna anche senza mobile-view */
  .container.workshops,
  .container.giftcards{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }

  .section h3{
    font-size:28px !important;
    line-height:1.15 !important;
    }
    .lead{
      font-size:15px !important;
      line-height:1.5 !important;
    }

  .workshops-img, .giftcards-img{ order:1 !important; }
  .workshops-text, .giftcards-text{ order:2 !important; }

  .hero-logo{
    font-size:clamp(44px, 10vw, 58px);
    letter-spacing:0.32em;
    padding:0 12px;
    max-width:100%;
    box-sizing:border-box;
    white-space:nowrap;
  }

}

/* phone: 1 colonna */
@media (max-width: 768px){
  .catalogue-grid{ grid-template-columns:1fr !important; }
}

/* tablet: 2 colonne */
@media (min-width: 769px) and (max-width: 768px){
  .catalogue-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

/* Mod */

/* ==========================================
   WORKSHOPS + GIFTCARDS: mobile safe layout
   (niente grid-template-areas, no collapse)
========================================== */

/* mobile-view forzata */
body.mobile-view .container.workshops,
body.mobile-view .container.giftcards{
  display:flex !important;
  flex-direction:column !important;
  gap:24px !important;
}

/* responsive automatico */
@media (max-width: 768px){
  .container.workshops,
  .container.giftcards{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }
}

/* ordine: immagine sopra testo */
body.mobile-view .workshops-img,
body.mobile-view .giftcards-img{
  order:1 !important;
}

body.mobile-view .workshops-text,
body.mobile-view .giftcards-text{
  order:2 !important;
}

/* anche per responsive */
@media (max-width: 768px){
  .workshops-img, .giftcards-img{ order:1 !important; }
  .workshops-text, .giftcards-text{ order:2 !important; }
}

/* assicurati che l'immagine non collassi */
.workshops-img img,
.giftcards-img img{
  display:block;
  width:100%;
  height:auto;
}

/* Modal: mobile = gallery sopra testo */
body.mobile-view .modal-body-inner{
  flex-direction:column !important;
}
body.mobile-view .modal-gallery{ order:1 !important; }
body.mobile-view .vase-detail-panel{ order:2 !important; min-width:0 !important; }

@media (max-width: 768px){
  .modal-body-inner{ flex-direction:column !important; }
  .modal-gallery{ order:1 !important; }
  .vase-detail-panel{ order:2 !important; min-width:0 !important; }
}

/* Tipografia: evita effetto "tutto minuscolo" nelle sezioni */
body.mobile-view .section h3{
  font-size:28px !important;
  line-height:1.15 !important;
}

body.mobile-view .lead{
  font-size:15px !important;
  line-height:1.5 !important;
}

/* =========================
   CONTACT: mobile = 1 colonna + tutto centrato
========================= */

/* Mobile view forzata */
body.mobile-view .contact-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
  justify-items:center !important;   /* centra ogni "card" nella colonna */
  text-align:center !important;
}

body.mobile-view .contact-item{
  width:100% !important;
  justify-content:center !important; /* centra contenuto (flex) */
  text-align:center !important;
}

/* centra anche il blocco studio + mappa */
body.mobile-view .contact-studio{
  text-align:center !important;
}

/* Responsive automatico (telefono senza toggle) */
@media (max-width: 768px){
  .contact-list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    justify-items:center !important;
    text-align:center !important;
  }

  .contact-item{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .contact-studio{
    text-align:center !important;
  }
}

/* CONTACT: desktop 2 colonne / mobile 1 colonna */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  align-items:start;
}

.contact-lines{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.contact-line{
  margin:0;
  color:var(--text);
}

.contact-line strong{
  color:var(--text);
}

.contact-mapwrap .contact-open{
  margin:12px 0 0;
  text-align:center;
}

/* icone sotto */
.contact-icons{
  margin-top:24px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.contact-icon{
  background: var(--btn-primary);
  color: #fff;
  text-align:center;
  padding:14px 12px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}

/* MOBILE: 1 colonna */
body.mobile-view .contact-grid{
  grid-template-columns: 1fr !important;
  gap:24px !important;
}
body.mobile-view .contact-icons{
  grid-template-columns: 1fr !important;
}

@media (max-width: 768px){
  .contact-icon-btn{ width:64px; height:64px; }
  .contact-icon-btn img{ width:52px; height:52px; }
}

/* FORCE icon size inside contact circles */
.contact-icon-btn img{
  width:64px !important;
  height:64px !important;
  max-width:none !important;
  max-height:none !important;
}

@media (max-width:768px){
  .contact-icon-btn{
    width:56px;
    height:56px;
  }

  .contact-icon-btn img{
    width:54px !important;
    height:54px !important;
  }
}

@media (max-width:768px){
  #cart-open-btn{
    width:44px;
    height:44px;
  }
  #cart-open-btn img{
    width:22px;
    height:22px;
  }
}