/* ==========================================================================
   CATEGORY / SUBCATEGORY PAGE - Layout con sidebar laterale
   Sidebar sinistra: ricerca + categorie/sottocategorie + filtri
   Contenuto destra: lista prodotti caricata via AJAX
   Palette coerente con single-product.css
   ========================================================================== */

:root {
  --cl-navy:        #113167;
  --cl-navy-deep:   #052453;
  --cl-navy-soft:   #2a4c86;
  --cl-red:         #9d0a10;
  --cl-bg:          #f5f7fb;
  --cl-card:        #ffffff;
  --cl-border:      #e6ebf2;
  --cl-muted:       #8a98ab;
  --cl-text:        #233047;
  --cl-shadow:      0 6px 24px rgba(5, 36, 83, 0.08);
  --cl-shadow-hover:0 14px 34px rgba(5, 36, 83, 0.16);
  --cl-transition:  300ms cubic-bezier(0.22, 1, 0.36, 1);
  --cl-hover-blue:  #0056b3;
  --cl-sidebar-w:   300px;
}

body {
  overflow-y: scroll;
}

/* ==========================================================================
   1) STRUTTURA A DUE COLONNE
   ========================================================================== */
.catalog-page {
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  color: var(--cl-text);
  background: var(--cl-bg);
}

.catalog-layout {
  display: flex;
  align-items: stretch;
  gap: 28px;
  max-width: 1700px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

/* ---- Sidebar sinistra ---- */
.catalog-sidebar {
  flex: 0 0 var(--cl-sidebar-w);
  width: var(--cl-sidebar-w);
  min-width: 0;
}

/* wrapper sticky: resta visibile durante lo scroll dei prodotti,
   contiene le due card separate (categorie e filtri) */
.sidebar-sticky {
  position: sticky;
  top: 100px; /* sotto il menu fixed */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px; /* spazio tra card categorie e card filtri */
}
.sidebar-sticky::-webkit-scrollbar {
  width: 6px;
}
.sidebar-sticky::-webkit-scrollbar-thumb {
  background: var(--cl-border);
  border-radius: 3px;
}
.sidebar-sticky::-webkit-scrollbar-thumb:hover {
  background: var(--cl-muted);
}

/* singola card della sidebar
   (niente box-shadow: scuriva lo spazio tra le due card) */
.sidebar-panel {
  background: var(--cl-card);
  border: 1px solid var(--cl-border);
  padding: 24px 20px;
  flex-shrink: 0;
}

/* card filtri: senza padding (i filtri hanno già la loro spaziatura),
   appare solo per i cataloghi che la prevedono
   (mostrata via <style> inline in product-menu.php) */
.sidebar-panel--filters {
  display: none;
  background: var(--cl-card);
  border: 1px solid var(--cl-border);
  flex-shrink: 0;
}

/* ---- Contenuto destra ---- */
.catalog-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   2) SIDEBAR: titolo catalogo
   ========================================================================== */
.sidebar-panel.menu-prodotti {
  background-color: var(--cl-card); /* override del vecchio sfondo blu */
  color: var(--cl-text);
  background-image: none !important;
}

.sidebar-catalog-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--cl-navy) !important;
  cursor: pointer;
  margin: 0 0 14px;
  padding-bottom: 12px;
  position: relative;
  transition: color var(--cl-transition);
}
.sidebar-catalog-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cl-navy), var(--cl-navy-soft));
}
.sidebar-catalog-title:hover {
  color: var(--cl-hover-blue) !important;
}

/* ==========================================================================
   3) SIDEBAR: campo ricerca categorie
   ========================================================================== */
.sidebar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--cl-border);
  background: #fff;
  padding: 10px 12px;
  margin-bottom: 18px;
  transition: border-color var(--cl-transition), box-shadow var(--cl-transition);
}
.sidebar-search:focus-within {
  border-color: var(--cl-hover-blue);
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.08);
}
.sidebar-search__icon {
  color: var(--cl-muted);
  flex-shrink: 0;
}
.sidebar-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--cl-text);
  font-family: 'Montserrat', sans-serif;
}
.sidebar-search input::placeholder {
  color: var(--cl-muted);
}

/* ==========================================================================
   4) SIDEBAR: lista famiglie / sottofamiglie
   ========================================================================== */
.sidebar-categories {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-family {
  padding: 0 0 6px;
  border-bottom: 1px solid var(--cl-border);
}
.sidebar-family:last-child {
  border-bottom: none;
}

/* header cliccabile della famiglia: titolo + freccia */
.sidebar-family-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}

.sidebar-family-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cl-navy-deep) !important;
  cursor: pointer;
  margin: 8px 0 6px;
  transition: color var(--cl-transition);
}
.sidebar-family-title:hover {
  color: var(--cl-hover-blue) !important;
}

/* freccia indicatore apri/chiudi */
.sidebar-family-caret {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--cl-muted);
  border-bottom: 2px solid var(--cl-muted);
  transform: rotate(45deg); /* punta in giù = chiuso */
  transition: transform var(--cl-transition), border-color var(--cl-transition);
  margin-right: 4px;
  margin-top: -2px;
}
.sidebar-family-header:hover .sidebar-family-caret {
  border-color: var(--cl-hover-blue);
}
.sidebar-family.is-open .sidebar-family-caret {
  transform: rotate(-135deg); /* punta in su = aperto */
  margin-top: 4px;
}

/* sottofamiglie collassate di default, visibili solo se la famiglia è aperta */
.sidebar-subfamilies {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.sidebar-family.is-open .sidebar-subfamilies {
  max-height: 900px;
}

.sidebar-panel .nome-sottofamiglia {
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  color: var(--cl-text);
  padding: 7px 10px;
  border-left: 3px solid transparent;
  transition: background var(--cl-transition), border-color var(--cl-transition), color var(--cl-transition);
}
.sidebar-panel .nome-sottofamiglia:hover {
  background: #f4f7fc;
  border-left-color: var(--cl-hover-blue);
  color: var(--cl-navy);
}

.sidebar-panel .evidence {
  transition: color var(--cl-transition);
}

/* voce correntemente selezionata: gialla e in grassetto */
.sidebar-panel .evidence.cat-selezionata {
  color: #fdd416 !important;
  font-weight: 700 !important;
}
.sidebar-panel .nome-sottofamiglia.cat-selezionata {
  border-left-color: #fdd416;
}

/* ==========================================================================
   5) SIDEBAR: filtri (card separata)
   ========================================================================== */
.sidebar-panel--filters .sezione-filtri,
.sidebar-panel .sezione-filtri {
  background: transparent;
}

/* di default i filtri restano nascosti (mostrati solo per "Sorgenti") */
#filtro-prodotti {
  display: none;
}

/* layout verticale dei filtri dentro la sidebar (override di filtri.php) */
.sidebar-panel--filters .toggle-filtri {
  padding-top: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  align-items: stretch;
}
/* niente alone/ombra in hover (arriva da single-product.css caricato via AJAX) */
.sidebar-panel--filters .toggle-filtri:hover {
  box-shadow: none;
}
.sidebar-panel--filters .collapsible {
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-navy-deep);
  background: #eef2f8;
  border: none;
  padding: 12px 14px;
  cursor: pointer;
}
.sidebar-panel--filters .content {
  padding-top: 0;
}
.sidebar-panel--filters .form-filtri {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  /* la card non ha più padding proprio: il respiro laterale e sotto
     l'ultimo filtro lo dà direttamente il form */
  padding: 16px 14px 20px;
}
.sidebar-panel--filters .singolo-filtro {
  width: 100% !important;
  float: none !important;
  padding-right: 0 !important;
  font-size: 13px;
  color: var(--cl-navy);
  font-weight: 600;
}
.sidebar-panel--filters .singolo-filtro select {
  width: 100%;
  margin-top: 6px;
  color: var(--cl-navy);
  padding: 10px 12px; /* più respiro: il testo non viene più tagliato */
  min-height: 42px;
  line-height: 1.4;
  border: 1px solid var(--cl-border);
  border-radius: 0;
  background: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  transition: border-color var(--cl-transition);
}
.sidebar-panel--filters .singolo-filtro select:hover,
.sidebar-panel--filters .singolo-filtro select:focus {
  border-color: var(--cl-hover-blue);
  outline: none;
}

/* ==========================================================================
   6) CONTENUTO: sezione prodotti
   ========================================================================== */
.catalog-content .product-section {
  min-height: 30px;
  padding-top: 8px;
}
.catalog-content .loading-icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cl-muted);
}
.catalog-content .contenitore-prodotti {
  min-height: 600px;
  padding-bottom: 40px;
}

/* la lista prodotti (caricata via AJAX) deve usare tutta la larghezza */
.catalog-content .product-list {
  width: 100% !important;
  max-width: none;
  padding-top: 8px;
}
.catalog-content .prodotti-correnti {
  text-align: center;
  padding-bottom: 24px;
  font-weight: 800;
  color: var(--cl-navy);
}

/* ==========================================================================
   7) FIX DIVI / FOOTER (ereditati dal vecchio template)
   ========================================================================== */
.footer-prodotti {
  width: 100%;
}
.footer-prodotti .et_pb_row.et_pb_row_0 {
  max-width: 2560px;
  width: 90%;
}
.footer-prodotti .et_pb_text_align_left .et_pb_text_inner p {
  line-height: 1.5em;
  font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: 12px;
}
.footer-prodotti .et_pb_text_align_right.et_pb_bg_layout_light {
  margin-bottom: 23px !important;
}
.footer-prodotti .et_pb_section.et_pb_section_1.et_section_regular,
.footer-prodotti .et_pb_section.et_pb_section_2.et_section_regular {
  background-image: linear-gradient(180deg, #002264 0%, #0073ba 100%) !important;
  padding-top: 20px;
  padding-bottom: 2px;
}
.footer-prodotti .et_pb_section.et_pb_section_1.et_section_regular .et_pb_row,
.footer-prodotti .et_pb_section.et_pb_section_2.et_section_regular .et_pb_row {
  padding: 31px 0;
}
.footer-prodotti .et_pb_image_wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-prodotti .et_pb_text_inner {
  color: white;
}

/* ==========================================================================
   8) RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  :root {
    --cl-sidebar-w: 260px;
  }
}

@media (max-width: 991px) {
  /* su tablet/mobile la sidebar torna sopra al contenuto */
  .catalog-layout {
    flex-direction: column;
    padding: 20px 14px 60px;
  }
  .catalog-sidebar {
    flex: 1 1 auto;
    width: 100%;
  }
  .sidebar-sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .sidebar-categories {
    max-height: 340px;
    overflow-y: auto;
  }
}