/**
 * Responsive — breakpoint progetto: 375px | 768px | 1440px
 * Nav hamburger base: common.css
 */

/* ===== Base anti-overflow ===== */
html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:hidden;
  max-width:100%;
}
img,video,canvas,svg{max-width:100%;height:auto}
.container{padding-left:clamp(1.25rem,4vw,3rem);padding-right:clamp(1.25rem,4vw,3rem)}

/* Sottotitoli centrati (sostituisce margin inline nelle sezioni) */
.vantaggio-header,
.collezioni-header,
.su-misura-header,
.quattro-c-header,
.pagamenti-header,
#chi-siamo .chi-siamo-text{text-align:center}
#vantaggio .section-subtitle,
.collezioni-header .section-subtitle,
.su-misura-header .section-subtitle,
.quattro-c-header .section-subtitle,
.pagamenti-header .section-subtitle{margin-left:auto;margin-right:auto}

/* ===== Tablet (≤ 1024px) ===== */
@media (max-width:1024px){
  .section-title{font-size:clamp(2rem,4.5vw,3.25rem)}
  .section-subtitle{font-size:clamp(.9rem,1.8vw,1rem);max-width:36rem}
  #vantaggio,#collezioni,#su-misura,#quattro-c,#chi-siamo,#pagamenti,#contatti{
    padding-top:120px;
    padding-bottom:120px;
  }
  .vantaggio-header,.collezioni-header,.su-misura-header,.quattro-c-header,.pagamenti-header{margin-bottom:48px}
  .su-misura-header{margin-bottom:64px}
  .collezioni-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chi-siamo-stats{gap:32px;flex-wrap:wrap;justify-content:center}
}

/* ===== Tablet / mobile landscape (≤ 768px) ===== */
@media (max-width:768px){
  #hero{
    padding:0!important;
    min-height:100dvh;
    min-height:100svh;
  }
  section:not(#hero){
    padding:88px 1.5rem!important;
    min-height:auto;
  }
  .section-title{
    font-size:clamp(1.9rem,6.5vw,2.75rem);
    line-height:1.2;
    margin-bottom:1rem;
  }
  .section-label{letter-spacing:3px;font-size:.62rem}
  .section-subtitle{
    font-size:.9375rem;
    line-height:1.65;
    letter-spacing:0;
    max-width:100%;
  }
  .hero-content{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:5rem 1.5rem 4rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .hero-headline{
    font-size:clamp(2rem,6.5vw,2.85rem);
    margin-bottom:1.25rem;
    text-wrap:balance;
  }
  .hero-subline{
    font-size:.9375rem;
    letter-spacing:.2px;
    margin-bottom:2rem;
    max-width:100%;
  }
  .hero-cta{
    padding:.875rem 1.75rem;
    letter-spacing:2px;
    max-width:min(100%,17.5rem);
    justify-content:center;
  }
  .scroll-indicator{bottom:1.5rem}
  .vantaggio-grid{margin-top:40px;gap:20px}
  .vantaggio-card{padding:36px 28px}
  .vantaggio-card .stat{font-size:2.75rem}
  .vantaggio-card h3{font-size:1.35rem}
  .collezioni-header,.quattro-c-header{margin-bottom:48px}
  .collezioni-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .collezione-details{min-height:190px;padding:22px 16px 16px}
  .collezione-details h4{font-size:1.25rem}
  .c-letter{font-size:3rem}
  .c-card{padding:36px 20px}
  .chi-siamo-wrap{gap:40px}
  .chi-siamo-stats{gap:24px}
  .stat-item .num{font-size:2.2rem}
  .contatti-wrap{gap:48px}
  .form-submit{width:100%;text-align:center;justify-content:center}
  .map-modal{padding:32px 24px 28px;width:min(100%,24rem)}
  .cart-modal{padding:32px 24px 28px}
  footer,.site-footer-wrap footer{padding:48px 1.5rem 28px!important}
  footer .footer-logo,footer .footer-logo{font-size:1.35rem;letter-spacing:2px}
  footer p{font-size:.72rem;line-height:1.6;word-break:break-word}
  .cart-fab,.chatbot-fab{bottom:5.5rem}
  body.has-cart-chatbot-widgets .chatbot-fab{bottom:8.75rem}
  body.has-cart-chatbot-widgets .cart-fab{bottom:1.5rem;right:1rem}
  .save-feedback{right:1rem;left:1rem;text-align:center}
}

/* ===== Mobile stretto (≤ 480px) ===== */
@media (max-width:480px){
  section:not(#hero){padding:30px 1.25rem!important}
  .section-title{font-size:clamp(1.75rem,8vw,2.25rem)}
  .collezioni-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .quattro-c-grid{grid-template-columns:1fr!important;gap:16px}
  .collezione-media{aspect-ratio:4/5}
  .collezione-details{min-height:188px;padding:18px 14px 14px}
  .collezione-details h4{margin-bottom:12px;font-size:1.08rem;line-height:1.12}
  .collezione-details > span:not(.collezione-cta){min-height:2.8em;font-size:.58rem;letter-spacing:.05em}
  .collezione-price{margin-top:12px;font-size:.92rem}
  .collezione-cta{min-height:36px;padding-top:10px;gap:5px;font-size:.58rem;letter-spacing:.05em}
  .vantaggio-card{padding:28px 20px}
  .vantaggio-card h3{font-size:1.2rem}
  .vantaggio-card p,.timeline-content p,.c-card p{font-size:.8125rem}
  .timeline-step{margin-bottom:48px;padding-left:52px!important}
  .timeline-number{width:40px;height:40px;font-size:1rem;left:20px!important}
  .timeline::before{left:20px}
  .timeline-content{padding:24px 20px}
  .chi-siamo-stats{flex-direction:column;align-items:center;gap:20px}
  .pagamento-card{padding:28px 20px}
  .info-item h4{font-size:1.15rem}
  .map-btn,.map-open-btn{width:100%;justify-content:center}
  .cart-item{grid-template-columns:1fr auto;gap:8px}
  .cart-item-qty,.cart-item-price{grid-column:1}
  .cart-item-remove{grid-column:2;grid-row:1/span 2;align-self:center}
  .admin-tabs{padding:0 8px}
  .pagamenti-accordion{margin-top:24px}
  .cart-fab{right:16px;bottom:24px}
  .chatbot-fab{left:16px;bottom:24px}
  .chatbot-window{left:12px;bottom:96px;width:calc(100vw - 24px);max-height:72vh}
  body.has-cart-chatbot-widgets .cart-fab{right:16px;bottom:24px}
  body.has-cart-chatbot-widgets .chatbot-fab{left:16px;bottom:24px}
  body.has-cart-chatbot-widgets .chatbot-window{left:12px;bottom:96px;width:calc(100vw - 24px);max-height:72vh}
}

/* ===== Mobile 375px ===== */
@media (max-width:375px){
  #mainNav.site-nav{padding:14px 16px}
  #mainNav.site-nav .nav-logo{font-size:.95rem;letter-spacing:1px}
  .hero-content{padding:4.75rem 1.25rem 4rem}
  .hero-headline{font-size:clamp(1.85rem,9.5vw,2.2rem);line-height:1.15}
  .hero-subline{font-size:.875rem;padding:0 .15rem}
  .hero-cta{font-size:.625rem;padding:.75rem 1.25rem;letter-spacing:1.5px}
  .scroll-indicator{bottom:1rem}
  .section-label{letter-spacing:2px}
  footer p{font-size:.68rem}
}

@media (max-width: 1100px) {
/* ── Mobile Nav Drawer ───────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.site-nav.nav-open .nav-drawer {
  transform: translateX(0);
}

.site-nav.nav-open {
  z-index: 11010;
}

.site-nav.nav-open .nav-backdrop {
  z-index: 11008;
}

.site-nav.nav-open .nav-drawer {
  z-index: 11009;
}

.nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.45);
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 20px;
  flex-shrink: 0;
}

.nav-drawer-logo {
  font-size: 16px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 56px);
}

.nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}

.nav-close-box {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-close-line {
  position: absolute;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  left: 0;
  top: 50%;
}

.nav-close-line:first-child {
  transform: rotate(45deg);
}

.nav-close-line:last-child {
  transform: rotate(-45deg);
}

.nav-drawer .nav-links {
  padding: 8px 20px 32px;
  display: flex;
  flex-direction: column;
}

.nav-drawer .nav-links a {
  padding: 16px 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  text-decoration: none;
  color: inherit;
}

.nav-drawer .nav-links .lang-toggle {
  margin-top: 20px;
  align-self: flex-start;
}
/* ── Fine Mobile Nav Drawer ──────────────────────── */
}

@media (min-width: 1101px) {
/* Nascondi elementi drawer-only su desktop largo */
.nav-drawer-head {
  display: none;
}
.nav-drawer-logo {
  display: none;
}
}

/* ===== Desktop ampio (≥ 1440px) — respiro extra ===== */
@media (min-width:1440px){
  .hero-content{max-width:960px}
  .section-subtitle{max-width:42rem}
}
/* ═══════════════════════════════════════════════
   FIX MOBILE — Aggiunto 02/06/2026
   Loader + Immagini + Carrello + Pagamenti
   ═══════════════════════════════════════════════ */

/* Loader splash screen centrato su mobile */
@media (max-width: 767px) {
  #loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
  }
  .loader-logo {
    text-align: center;
    width: 100%;
  }
  .loader-bar {
    margin: 0 auto;
  }

  /* Immagini collezioni — altezza massima su mobile */
  #collezioni img,
  .collezione-item img,
  .collezione-img {
    max-height: 260px;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Immagine Chi Siamo — ridimensionata su mobile */
  #chi-siamo img,
  .about-image img,
  .chi-siamo-img {
    max-height: 280px;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Carrello flottante — posizione fissa corretta */
  #cartFab {
    position: fixed;
    bottom: 24px;
    right: 16px;
    z-index: 1000;
  }

  /* Accordion pagamenti — layout corretto su mobile */
  .pagamento-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .pagamento-card .payment-badges,
  .pagamento-card [class*="badge"],
  .pagamento-card [class*="card-badge"] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }
  /* Fix totale immagini collezioni — proporzionali e senza distorsioni */
  #collezioni img,
  .collezione-item img,
  .collezione-img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  /* ═══════════════════════════════════════════════
     FIX HERO SECTION MOBILE — Layout, Spazi e Bottone
     ═══════════════════════════════════════════════ */
  
  /* Compattiamo la sezione iniziale eliminando i vuoti eccessivi */
  #hero, .hero, .hero-section, section[id="hero"] {
    padding-top: 20px !important;   /* Riduce drasticamente lo spazio vuoto sotto il menu */
    padding-bottom: 20px !important;
    min-height: auto !important;    /* Impedisce alla pagina di allungarsi artificialmente */
  }

  /* Ingrandiamo e solleviamo il titolo principale */
  #hero h1, .hero h1, .hero-title, .hero h2 {
    font-size: 34px !important;     /* Titolo più grande e d'impatto (Hook visivo) */
    line-height: 1.2 !important;    /* Unisce le due righe in modo armonioso */
    margin-top: 10px !important;    /* Spinge il titolo verso l'alto vicino al menu */
    margin-bottom: 14px !important; /* Avvicina il paragrafo sottostante */
    font-weight: 400 !important;
  }

  /* Alziamo e ottimizziamo il testo descrittivo */
  #hero p, .hero p, .hero-text, .hero-description {
    font-size: 15px !important;     /* Dimensione elegante e leggibile */
    line-height: 1.5 !important;
    margin-bottom: 24px !important; /* Avvicina il bottone Scopri Ora */
    padding: 0 15px !important;     /* Evita che il testo tocchi i bordi dello schermo */
  }

  /* Trasformiamo il bottone gigante in un elemento elegante e proporzionato */
  #hero .btn, #hero a[class*="btn"], .hero-btn, #hero button {
    padding: 10px 28px !important;  /* Riduce l'altezza del rettangolo nero, rendendolo snello */
    font-size: 13px !important;     /* Testo del bottone più piccolo e raffinato */
    letter-spacing: 1.5px !important;/* Spaziatura tra le lettere stile "Alta Gioielleria" */
    display: inline-block !important;
    width: auto !important;         /* Impedisce al bottone di allargarsi a tutto schermo */
  }
  /* Forza il ridimensionamento di QUALSIASI bottone o link dentro la Hero */
  #hero a, #hero button, .hero a, .hero button, [id*="hero"] a, [id*="hero"] button {
    padding: 10px 24px !important;  /* Riduce l'altezza e la larghezza interna */
    font-size: 13px !important;     /* Testo più piccolo ed elegante */
    letter-spacing: 1.5px !important;
    display: inline-block !important;
    width: auto !important;         /* Gli impedisce di essere un mattone gigante */
    min-width: 0 !important;
    height: auto !important;        /* Sblocca eventuali altezze fisse bloccate dal PC */
  }
}

/* ── Hero mobile — altezza proporzionata ── */
@media (max-width: 767px) {
  #hero {
    min-height: 100svh;
    padding-bottom: 48px;
  }
}