/* =====================================================================
   BYITALY STORE - category.css
   Pagina SHOP / listing categoria: intestazione, sidebar, barra filtri
   ---------------------------------------------------------------------
   Tema:   byitaly (child di Classic) - PrestaShop 8.2.6
   Autore: Francesco Fiore - www.fiorefrancesco.com - Licenza MIT
   Riferimenti: ANALISI.md §7 (img 6)
   Moduli coinvolti: ps_categorytree (sidebar), ps_facetedsearch (filtri)
   Le card prodotto sono in product.css; la fascia trust usa .ff-usp.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. INTESTAZIONE PAGINA  [A]
   ---------------------------------------------------------------------
   H1 uppercase + descrizione. Il Classic mette titolo e descrizione
   in #js-product-list-header / .block-category.
--------------------------------------------------------------------- */
#category .block-category {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 40px 0 8px;
  min-height: 0;
}
#category .block-category .h1,
#category .block-category h1 {
  font-size: var(--ff-fs-h1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ff-navy);
  margin-bottom: 14px;
}
#category .block-category .category-description {
  max-width: 560px;
  font-size: var(--ff-fs-body);
  color: var(--ff-text);
}
/* Immagine di copertina categoria: non presente nella grafica */
#category .block-category .category-cover { display: none; }

/* ---------------------------------------------------------------------
   2. SIDEBAR "CATEGORIE" (ps_categorytree)  [A]
   ---------------------------------------------------------------------
   Label esterna uppercase + card bianca con lista verticale.
--------------------------------------------------------------------- */
#left-column .block-categories {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-sm);
  padding: 8px 22px;
}
/* Il titolo del blocco diventa la label "CATEGORIE" sopra la card */
#left-column .block-categories .h6,
#left-column .block-categories .text-uppercase {
  /* estraiamo visivamente il titolo dalla card */
  position: relative;
  display: block;
  margin: -8px -22px 6px;           /* fuori dal padding card          */
  padding: 0 2px 12px;
  background: transparent;
  font-size: var(--ff-fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ff-navy);
  border: none;
}
#left-column .block-categories .category-top-menu { margin: 0; }
#left-column .block-categories ul { margin: 0; }
#left-column .block-categories li { padding: 0; }
#left-column .block-categories a {
  display: block;
  padding: 13px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ff-navy);
  transition: color var(--ff-transition), padding-left var(--ff-transition);
}
#left-column .block-categories a:hover {
  color: var(--ff-red);
  padding-left: 4px;
}
/* Voce attiva: bold + divider sotto (come "Tutte le Categorie" img 6) */
#left-column .block-categories li.current > a,
#left-column .block-categories a.active {
  font-weight: 700;
  border-bottom: 1px solid var(--ff-border);
}
/* Frecce expand/collapse del tree: profondità 1 -> non servono */
#left-column .block-categories .collapse-icons,
#left-column .block-categories .navbar-toggler { display: none; }

/* ---------------------------------------------------------------------
   3. BARRA FILTRI  [A]
   ---------------------------------------------------------------------
   Riga sopra la griglia: [select categorie] [ordina per] [filtri].
   "Ordina per" è il sort nativo del listing; select categorie e
   bottone Filtri vengono dal wrapper faccette. Stile pill comune.
--------------------------------------------------------------------- */
#js-product-list-top {
  display: flex;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 18px 0 26px;
  margin: 0;
}
/* Pill comune: select e bottoni */
#js-product-list-top .products-sort-order .select-title,
#js-product-list-top .ff-filter-toggle,
#js-product-list-top select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ff-navy);
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--ff-transition);
}
#js-product-list-top .products-sort-order .select-title:hover,
#js-product-list-top .ff-filter-toggle:hover {
  border-color: var(--ff-navy);
}
#js-product-list-top .products-sort-order .dropdown-menu {
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  box-shadow: var(--ff-shadow-md);
}
/* "Ordina per:" prefisso dentro la pill come in grafica */
.products-sort-order .select-title::before {
  content: "Ordina per: ";
  font-weight: 500;
  color: var(--ff-text-light);
  white-space: pre;
}
/* Contatore risultati Classic: non in grafica -> discreto a destra */
#js-product-list-top .total-products {
  margin-left: auto;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--ff-text-light);
}

/* Bottone "Filtri prodotti" (toggle pannello faccette - JS FASE 6) */
.ff-filter-toggle i { font-size: 1rem; }

/* ---------------------------------------------------------------------
   4. PANNELLO FACCETTE (ps_facetedsearch)
   ---------------------------------------------------------------------
   Aperto dal bottone: pannello a comparsa sotto la barra (desktop)
   / off-canvas (mobile, in responsive.css). Chiuso di default.
--------------------------------------------------------------------- */
#search_filters_wrapper {
  display: none;
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-md);
  padding: 24px;
  margin-bottom: 26px;
}
#search_filters_wrapper.ff-open { display: block; }
#search_filters .h6, #search_filters .facet-title {
  font-size: var(--ff-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ff-navy);
}
#search_filters .facet { border-bottom: 1px solid var(--ff-border); padding: 14px 0; }
#search_filters .custom-checkbox input:checked + span.color,
#search_filters .custom-checkbox input:checked + span { color: var(--ff-navy); }
#search_filters .magnitude { color: var(--ff-text-light); }
/* Slider prezzo faccette: accent brand */
#search_filters .ui-slider .ui-slider-range { background: var(--ff-navy); }
#search_filters .ui-slider .ui-slider-handle { border-color: var(--ff-navy); }
/* Filtri attivi */
.active_filters {
  background: var(--ff-bg-soft);
  border-radius: var(--ff-radius-sm);
  padding: 12px 16px;
}
.active_filters .filter-block {
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--ff-navy);
}

/* ---------------------------------------------------------------------
   5. PAGINAZIONE - armonizzazione (layout Classic, non in grafica)
--------------------------------------------------------------------- */
.pagination .page-list { box-shadow: none; border: none; background: transparent; }
.pagination a { color: var(--ff-navy); font-weight: 600; }
.pagination .current a {
  color: #fff;
  background: var(--ff-navy);
  border-radius: var(--ff-radius-sm);
}


/* ---------------------------------------------------------------------
   SOTTOCATEGORIE SEMPRE VISIBILI (ps_categorytree, sidebar Shop)
   ---------------------------------------------------------------------
   Di default il modulo nasconde le sottocategorie dentro un pannello
   collassabile (.collapse, aperto solo cliccando l'icona +/-). Questa
   regola forza il pannello sempre aperto e nasconde l'icona di
   apertura/chiusura, ormai superflua.
--------------------------------------------------------------------- */
.block-categories .category-sub-menu .collapse {
  display: block !important;
  height: auto !important;
}
.block-categories .navbar-toggler.collapse-icons {
  display: none;
}

/* Rientro visivo delle sottocategorie rispetto alla categoria padre */
.block-categories .category-sub-menu .category-sub-menu {
  padding-left: 18px;
}
.block-categories .category-sub-link {
  font-size: 0.875rem;
  color: var(--ff-text-light);
}
.block-categories .category-sub-link:hover {
  color: var(--ff-red);
}

.block-categories .category-sub-menu .collapse {
  display: block !important;
  height: auto !important;
}
.block-categories .navbar-toggler.collapse-icons {
  display: none;
}