/* JouleSpecs — Layout pagina catalogo prodotti */

.catalogo-page {
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
}

/* ===== Intestazione ===== */

.catalogo-header {
  margin-bottom: var(--space-8);
}

.catalogo-header__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-4);
}

.catalogo-header__meta {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ===== Layout: sidebar + griglia ===== */

.catalogo-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .catalogo-layout {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Sidebar filtri */
.catalogo-sidebar {
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .catalogo-sidebar { width: 224px; }
}

.filtri-gruppo {
  margin-bottom: var(--space-6);
  padding-top: var(--space-3);
  border-top: var(--rule-ink);
}

.filtri-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-3);
}

.filtro-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 2px 0;
}

.filtro-item__radio {
  accent-color: var(--color-ink);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

.filtro-item__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filtro-item__label--active {
  font-weight: 600;
  color: var(--color-text-primary);
}

.filtro-item--disabled {
  pointer-events: none;
  opacity: 0.35;
}

.filtro-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  display: inline-block;
}

/* Secondo livello: le voci dove i prodotti stanno davvero (doppia caldaia,
   scambiatore, ...), rientrate sotto la macro-categoria. La gerarchia la fa il
   rientro, non il corpo del testo: tutte le opzioni selezionabili della sidebar
   (categorie, fascia d'uso, attributi) restano a --text-sm, altrimenti voci che
   fanno la stessa cosa sembrerebbero cose diverse. */
.filtri-lista--nested {
  margin-top: 2px;
  margin-left: calc(14px + 8px);
  gap: 2px;
}

.filtro-item__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Filtro a intervallo: due estremi invece di caselle, per le grandezze dove la
   fascia mente (capacita`, potenza). I campi sono numerici e larghi uguale, cosi`
   la riga non balla quando si passa da 2,4 a 12,8. */
.filtro-intervallo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
}

.filtro-intervallo__campo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.filtro-intervallo__parola {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.filtro-intervallo__input {
  width: 5.5ch;
  padding: 3px 4px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-inset);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.filtro-intervallo__unita {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.filtro-intervallo__applica {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.filtro-intervallo__applica:hover {
  background: var(--color-ink);
  color: var(--color-text-inverse);
}

.filtro-intervallo__scala {
  margin-top: 6px;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

/* Griglia prodotti */
.catalogo-grid-area {
  flex: 1;
  min-width: 0;
}

.catalogo-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .catalogo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .catalogo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Stato vuoto */
.stato-vuoto {
  text-align: center;
  padding: var(--space-20) 0;
}

.stato-vuoto__heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.stato-vuoto__text {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-6);
}

/* ===== Sort bar ===== */

.catalogo-sort-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.sort-bar__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.sort-bar__select {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: var(--rule-strong);
  padding: 6px 8px;
  cursor: pointer;
  outline: none;
}

.sort-bar__select:focus {
  border-color: var(--color-ink);
}

/* Azzeramento dei filtri per attributo */
.filtri-azzera {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-text-tertiary);
  text-decoration: underline;
}

.filtri-azzera:hover {
  color: var(--color-text-primary);
}

/* ── La nuvola (grafico a dispersione) ──────────────────────────────────
   Quadrata, in unita` di viewBox 0–100: cosi` un punto resta un cerchio a
   qualunque larghezza, e su un telefono il grafico si stringe senza deformarsi.
   Le etichette degli assi stanno **fuori** dall'SVG, in HTML: dentro non
   andrebbero a capo e in tedesco uscirebbero dal riquadro. */
.dispersioni {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.dispersioni__titolo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.dispersioni__intro {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.dispersione {
  margin: 0 0 var(--space-8);
}

.dispersione__titolo {
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}

.dispersione__per {
  color: var(--color-ember);
}

.dispersione__griglia {
  display: flex;
  gap: var(--space-2);
}

.dispersione__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
  width: 7.5em;
  flex-shrink: 0;
  padding: 2px 0;
}

.dispersione__x {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-3) calc(7.5em + var(--space-2));
}

.dispersione__nome {
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-text-secondary);
}

.dispersione__tacca {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.dispersione__tela {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1;
  background: var(--color-plate);
}

.dispersione__cornice {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 0.5;
}

/* L'angolo buono esiste solo dove tutte e due le misure hanno una direzione:
   ombreggiarlo altrove sarebbe inventare una preferenza che non abbiamo. */
.dispersione__angolo {
  fill: var(--color-bg-subtle);
}

.dispersione__punto {
  fill: var(--color-text-tertiary);
}

.dispersione__punto--frontiera {
  fill: var(--color-ember);
}

.dispersione__tela a:hover .dispersione__punto {
  fill: var(--color-accent);
}

.dispersione__legenda p {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin: 0 0 4px;
}

.dispersione__frontiera {
  color: var(--color-text-secondary);
}

.dispersione__dati {
  margin-top: var(--space-3);
}

.dispersione__dati summary {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.dispersione__tabella {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.dispersione__tabella th,
.dispersione__tabella td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
}

.dispersione__tabella td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.dispersione__tabella thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}

.dispersione__riga--frontiera th a {
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .dispersione__y {
    width: 5.5em;
  }

  .dispersione__x {
    margin-left: calc(5.5em + var(--space-2));
  }
}

/* ── Le colonne in testa all'elenco ordinato su un conto ─────────────────
   Una barra per scheda, nell'ordine dell'elenco, larghe quanto filtri e
   griglia insieme: quattro volte piu` larghe che alte, perche' sono una
   fila da leggere da sinistra a destra, non un grafico da studiare. Le barre
   sono <a> con l'altezza in una variabile: crescono con un'animazione CSS che
   parte da zero e si spegne con prefers-reduced-motion. In pieno le schede
   della pagina corrente, in grigio le altre; la media e` una riga
   tratteggiata verticale, messa dove la fila la attraversa. */
.colonne {
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.colonne__testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.colonne__titolo {
  color: var(--color-text-secondary);
}

.colonne__unita {
  color: var(--color-text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

.colonne__corpo {
  display: flex;
  gap: var(--space-2);
}

.colonne__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 5em;
  flex-shrink: 0;
  padding: 2px 0;
}

.colonne__tacca {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.colonne__tela {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 4 / 1;
  display: flex;
  align-items: flex-end;
  column-gap: clamp(1px, calc(100% / var(--n) / 4), 6px);
  background: var(--color-plate);
  border-bottom: 1px solid var(--color-border-strong);
}

/* Il link e` alto quanto la tela — il bersaglio del mouse — e la barra vera
   e` il suo ::after: una scheda bassa non deve essere piu` difficile da
   prendere di una alta. */
.colonne__barra {
  position: relative;
  flex: 1 1 0;
  min-width: 1px;
  height: 100%;
  outline: none;
}

.colonne__barra::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h);
  min-height: 2px;
  background: var(--color-text-disabled);
  border-radius: 3px 3px 0 0;
  transition: background-color 120ms ease-out;
}

.colonne__barra--in-pagina::after {
  background: var(--color-ember);
}

.colonne__barra:hover::after,
.colonne__barra:focus-visible::after {
  background: var(--color-accent);
}

.colonne__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  border-left: 2px dashed var(--color-text-primary);
  pointer-events: none;
}

.colonne__media-etichetta {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  background: var(--color-plate);
  padding: 2px 6px;
}

.colonne__media-etichetta strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.colonne__media--a-sinistra .colonne__media-etichetta {
  left: auto;
  right: var(--space-2);
}

.colonne__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  transform: translateX(-50%);
  z-index: 2;
  padding: 6px 10px;
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.colonne__tooltip strong {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.colonne__didascalia {
  margin: var(--space-2) 0 0 calc(5em + var(--space-2));
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

/* La riga sul limite che vince: e` la cosa che l'ordinamento per cicli deve
   dire, e sta un tono sopra la didascalia. */
.colonne__didascalia--limite {
  color: var(--color-text-secondary);
}

.colonne__dati {
  margin: var(--space-3) 0 0 calc(5em + var(--space-2));
}

.colonne__dati summary {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.colonne__tabella {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.colonne__tabella th,
.colonne__tabella td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
}

.colonne__tabella td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.colonne__tabella thead th {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.colonne__riga--in-pagina th a {
  color: var(--color-ember);
}

.colonne__riga--media th,
.colonne__riga--media td {
  border-top: 1px dashed var(--color-text-primary);
  color: var(--color-text-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .colonne__barra::after {
    animation: colonne-crescita 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i) * 6ms);
  }

  .colonne__media {
    transform-origin: bottom;
    animation: colonne-media 480ms ease-out both;
    animation-delay: calc(var(--n) * 6ms + 320ms);
  }

  .colonne__media-etichetta {
    animation: colonne-etichetta 320ms ease-out both;
    animation-delay: calc(var(--n) * 6ms + 720ms);
  }
}

@keyframes colonne-crescita {
  from { height: 0; }
}

@keyframes colonne-media {
  from { transform: scaleY(0); }
}

@keyframes colonne-etichetta {
  from { opacity: 0; }
}

@media (max-width: 640px) {
  .colonne__tela {
    aspect-ratio: 2 / 1;
  }

  .colonne__y {
    width: 3.5em;
  }

  .colonne__didascalia,
  .colonne__dati {
    margin-left: 0;
  }
}