/* ==========================================================================
   🎯 PRODOTTI-INTESTAZIONI.CSS — Titoli, intestazioni e conteggi
   Coerente con variables.css / base.css
   Usato in: vetrina, categorie, sottocategorie
   Ultimo update: oggi
========================================================================== */

.pagina-vetrina{
  --vs-section-head-pad-x: 0px;
  --vs-section-head-pad-x-mobile: 0px;
}

/* 📦 Intestazione sezione (titolo + azioni) */
.intestazione-sezione {
  max-width: var(--max-width);
  margin: 0 auto 2rem;
  padding: 0 var(--vs-section-head-pad-x, var(--spacing, 40px));
  box-sizing: border-box;
}

/* 🏷️ Titolo della categoria madre
   (non forziamo h-level ma usiamo la stessa resa dei titoli globali) */
.titolo-categoria {
  font-family: var(--font-heading);
  font-size: var(--h2-size);            /* prima era 1.8rem */
  line-height: var(--h2-lh);
  font-weight: var(--heading-weight-semibold);
  color: var(--heading-color);
  margin: 0 0 var(--heading-mb);
}

/* #️⃣ Conteggio prodotti */
.conteggio-prodotti {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: #555;
}

/* 🔗 Sottocategorie visualizzate accanto/sotto al titolo */
.elenco-sottocategorie {
  font-size: 0.95rem;
  font-weight: 400;
  color: #444;
  margin-top: 0.25rem;
}

.elenco-sottocategorie a {
  font: inherit;                 /* eredita font-size e peso */
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.elenco-sottocategorie a:hover {
  color: var(--color-accent);
  border-color: currentColor;
}

/* 📱 Responsive fine-tuning */
@media (max-width: 768px) {
  .intestazione-sezione {
    padding-left: var(--vs-section-head-pad-x-mobile, 25px);
    padding-right: var(--vs-section-head-pad-x-mobile, 25px);
    margin-bottom: 1.5rem;
  }

  .conteggio-prodotti,
  .elenco-sottocategorie {
    font-size: 0.9rem;
  }
}

/* ==========================================================
   CTA "Visualizza tutti" – coerente con la Vetrina
   ========================================================== */

.link-visualizza-tutti {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 0 22px;

  border-radius: 999px;
  border: 1px solid #dbe7f2;
  background: #edf5fb;

  color: #6b9bc0;
  font-size: 0.98rem;
  font-weight: 500;

  text-decoration: none;
  white-space: nowrap;

  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.link-visualizza-tutti:hover {
  background: #e5f0f8;
  border-color: #cfe0ee;
  color: #4d83ac;
}
/* uniforma layout intestazione anche nelle categorie */
.pagina-tax-categoria .intestazione-sezione {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.link-visualizza-tutti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid #dbe7f2;
  background: #edf5fb;
  color: #6b9bc0;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.link-visualizza-tutti:hover {
  background: #e5f0f8;
  border-color: #cfe0ee;
  color: #4d83ac;
}

.link-visualizza-tutti.is-static {
  pointer-events: none;
}
/* =========================================================
   CATEGORIE PRODOTTI — match tipografico con Vetrina
   ========================================================= */

.pagina-tax-categoria .titolo-categoria{
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: 400;
  color: var(--heading-color);
}

.pagina-tax-categoria .intestazione-sezione{
  margin-bottom: 2rem;
}
/* =========================================
   Ritmo sezioni categorie prodotti
   Titolo → Sezione → Spazio
   ========================================= */

.pagina-tax-categoria .intestazione-sezione{
  margin-top: 0;
  margin-bottom: 1rem;   /* piccolo respiro tra titolo e prodotti */
}

.pagina-tax-categoria .sezione-vetrina{
  margin-bottom: 3rem;   /* spazio tra una sezione e la successiva */
}
.pagina-tax-categoria .prodotti-vetrina-wrapper{
  margin-bottom: 0 !important;
}
/* =========================================
   Categoria figlia — niente titolo doppio
   ========================================= */

.intestazione-sezione--figlia{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1.5rem;
}