/*
===============================================
📐 LAYOUT.CSS — Vetrineshop (Sistema Layout Unificato)
Regole per il layout generale:
- UNICO standard larghezza: .contenitore (e alias reali)
- Wrapper vertical rhythm: .contenuto-con-header-globale (SOLO verticale)
- Breadcrumb/H1/Top blocks con ritmo coerente
Aggiornato: oggi
===============================================
*/

/* ======================================================
   🎛️ VARIABILI GLOBALI (UNICA ROOT)
   ====================================================== */

:root{
  /* Container */
  --container-max: 1280px;
  --container-pad-desktop: 40px;
  --container-pad-mobile: 16px;

  /* Page rhythm */
  --page-top-gap-desktop: 24px;
  --page-top-gap-mobile: 18px;

  --page-block-gap-desktop: 18px;
  --page-block-gap-mobile: 14px;

  --page-h1-gap-desktop: 12px;
  --page-h1-gap-mobile: 10px;

  /* Optional: stile header pagina (se usi vs-page) */
  --vs-page-pad-top: 18px;
  --vs-page-pad-bottom: 34px;
  --vs-page-head-gap: 12px;

  --vs-h1-size: clamp(2.6rem, 4.6vw, 3.6rem);
  --vs-h1-weight: 900;

  --vs-breadcrumb-size: .95rem;
  --vs-muted: #64748b;
  --vs-ink: #0f172a;
}

/* ======================================================
   ✅ CONTAINER DEFINITIVO (UNICO STANDARD)
   - usa SEMPRE .contenitore nel markup
   - alias SOLO per compatibilità (NO wrapper verticali)
   ====================================================== */

.contenitore,
.container,
.page-wrap,
.contenitore-archivio,
.contenitore-mappa.container{
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: var(--container-pad-desktop);
  padding-right: var(--container-pad-desktop);
}

/* Mobile */
@media (max-width: 980px){
  .contenitore,
  .container,
  .page-wrap,
  .contenitore-archivio,
  .contenitore-mappa.container{
    padding-left: var(--container-pad-mobile);
    padding-right: var(--container-pad-mobile);
  }
}

/* ✅ Blocchi interni: mai padding laterale extra
   (devono “riempire” il container, non crearne un secondo) */
.lista-negozi,
.titolo-risultato-negozi,
.area-filtri-superiori,
.titolo-sezione-negozi,
.blocco-filtri-negozi,
.contenuto-principale,
.prodotti-filtri,
.vetrina-macro-pills,
.intro-negozio{
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* 🧰 Utility container */
.container--wide   { max-width: 1440px; }
.container--narrow { max-width: 960px; }
.container--flush  { padding-left: 0 !important; padding-right: 0 !important; }

/* ======================================================
   ✅ WRAPPER VERTICALE (PAGE RHYTHM)
   - .contenuto-con-header-globale NON deve MAI gestire larghezza
   - gestisce SOLO: padding-top/bottom e ritmo interno
   ====================================================== */

/* Distanza sotto header + fondo pagina */
.pagina-con-header-globale .contenuto-con-header-globale{
  padding-top: var(--page-top-gap-desktop);
  padding-bottom: 32px;
}

/* Mobile: meno aria */
@media (max-width: 980px){
  .pagina-con-header-globale .contenuto-con-header-globale{
    padding-top: var(--page-top-gap-mobile);
    padding-bottom: 28px;
  }
}

/* ======================================================
   ✅ BREADCRUMB — NORMALIZZAZIONE GLOBALE
   - niente padding laterale extra
   - stesso spacing su vetrina / negozi / marchi
   ====================================================== */

/* Selettori comuni (plugin + custom) */
.contenuto-con-header-globale .breadcrumb,
.contenuto-con-header-globale .breadcrumbs,
.contenuto-con-header-globale .breadcrumb-negozio,
.contenuto-con-header-globale .breadcrumb-marchio,
.contenuto-con-header-globale .rank-math-breadcrumb,
.contenuto-con-header-globale .woocommerce-breadcrumb,
.contenuto-con-header-globale nav[aria-label="Breadcrumb"]{
  margin: 0 0 var(--page-block-gap-desktop) !important;
  padding: 0 !important;
  line-height: 1.25;
}

/* Mobile spacing */
@media (max-width: 980px){
  .contenuto-con-header-globale .breadcrumb,
  .contenuto-con-header-globale .breadcrumbs,
  .contenuto-con-header-globale .breadcrumb-negozio,
  .contenuto-con-header-globale .breadcrumb-marchio,
  .contenuto-con-header-globale .rank-math-breadcrumb,
  .contenuto-con-header-globale .woocommerce-breadcrumb,
  .contenuto-con-header-globale nav[aria-label="Breadcrumb"]{
    margin-bottom: var(--page-block-gap-mobile) !important;
  }
}

/* ======================================================
   ✅ H1 — NORMALIZZAZIONE (ritmo coerente)
   ====================================================== */

.contenuto-con-header-globale h1{
  margin: 0 0 var(--page-h1-gap-desktop);
}

@media (max-width: 980px){
  .contenuto-con-header-globale h1{
    margin-bottom: var(--page-h1-gap-mobile);
  }
}

/* ======================================================
   ✅ TOP BLOCKS — ritmo tra blocchi frequenti
   ====================================================== */

.contenuto-con-header-globale .area-filtri-superiori,
.contenuto-con-header-globale .blocco-filtri-negozi,
.contenuto-con-header-globale .prodotti-filtri,
.contenuto-con-header-globale .vetrina-macro-pills,
.contenuto-con-header-globale .intro-negozio{
  margin-bottom: var(--page-block-gap-desktop);
}

@media (max-width: 980px){
  .contenuto-con-header-globale .area-filtri-superiori,
  .contenuto-con-header-globale .blocco-filtri-negozi,
  .contenuto-con-header-globale .prodotti-filtri,
  .contenuto-con-header-globale .vetrina-macro-pills,
  .contenuto-con-header-globale .intro-negozio{
    margin-bottom: var(--page-block-gap-mobile);
  }
}

/* ======================================================
   📄 VS PAGE STANDARD — (opzionale) header coerente per pagine
   - NON è un secondo container
   - si usa dentro .contenitore
   ====================================================== */

.vs-page{
  padding-top: var(--vs-page-pad-top);
  padding-bottom: var(--vs-page-pad-bottom);
}

/* header pagina */
.vs-page-head{
  display:flex;
  flex-direction:column;
  gap: var(--vs-page-head-gap);
  margin-bottom: 18px;
}

/* breadcrumb */
.vs-page-breadcrumb{
  margin: 0;
  font-size: var(--vs-breadcrumb-size);
  color: var(--vs-muted);
  padding: 0;
}
.vs-page-breadcrumb a{
  color: inherit;
  text-decoration: none;
}
.vs-page-breadcrumb a:hover{ text-decoration: underline; }

/* titolo */
.vs-page-title{
  margin: 0;
  font-size: var(--vs-h1-size);
  line-height: 1.05;
  font-weight: var(--vs-h1-weight);
  letter-spacing: -0.02em;
  color: var(--vs-ink);
}

/* intro */
.vs-page-intro{
  margin: 0;
  color: #475569;
  max-width: 85ch;
  font-size: 1.02rem;
  line-height: 1.55;
}

/* azioni sotto titolo (pills/filtri/CTA) */
.vs-page-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* divisore soft */
.vs-page-divider{
  height:1px;
  background: linear-gradient(to right, transparent, #e5e7eb, transparent);
}
/* ======================================================
   📰 MAGAZINE ARCHIVE — evita “zoom out” (doppio container)
   - .contenitore è l’unico che gestisce max-width + padding
   - .mag-archive-wrapper deve essere SOLO wrapper verticale
   ====================================================== */

.pagina-con-header-globale.mag-archive-wrapper{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Safety: se qualche CSS magazine mette padding sul main */
.pagina-con-header-globale.mag-archive-wrapper .contenuto-con-header-globale{
  padding-left: 0 !important;
  padding-right: 0 !important;
}