/* ============================================================================
   Pagine attivita' e pagina rivenditori
   Stessa impaginazione, contenuti diversi. L'unica cosa che cambia e'
   --rt-accento, impostato sulla sezione: compare sul filetto, sul numero
   e sul fondo tenue. Mai sui bottoni, che restano blu in tutto il sito.
   ========================================================================= */

/* ── Apertura ─────────────────────────────────────────────────────────── */

.rt-att-hero {
  padding-block: var(--rt-s16) var(--rt-s12);
  background:
    radial-gradient(90rem 32rem at 12% -14%,
      color-mix(in srgb, var(--rt-accento, var(--rt-blu)) 11%, transparent),
      transparent 62%),
    var(--rt-superficie);
  border-bottom: 1px solid var(--rt-linea);
}

.rt-att-hero__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--rt-s16);
  align-items: center;
}
@media (max-width: 900px) {
  .rt-att-hero { padding-block: var(--rt-s10) var(--rt-s8); }
  .rt-att-hero__griglia { grid-template-columns: 1fr; gap: var(--rt-s8); }
  .rt-att-hero__media { order: -1; }
}

.rt-att-hero h1 {
  margin: var(--rt-s3) 0 0;
  font-size: clamp(var(--rt-t-2xl), 5.2vw, var(--rt-t-3xl));
  font-weight: var(--rt-peso-titolo);
  letter-spacing: var(--rt-tracking-titolo);
  line-height: var(--rt-interlinea-stretta);
  max-width: 18ch;
}
.rt-att-hero__lede {
  margin-top: var(--rt-s5);
  max-width: 48ch;
  font-size: var(--rt-t-lg);
  color: var(--rt-ink-2);
  line-height: 1.5;
}
.rt-att-hero .rt-btn { margin-top: var(--rt-s8); }

/* ── Le misure, subito a portata di dito ─────────────────────────────── */

.rt-att-misure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rt-s2);
  margin-top: var(--rt-s8);
}
.rt-att-misure__et {
  width: 100%;
  margin-bottom: var(--rt-s1);
  font-size: var(--rt-t-xs);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
}
.rt-chip {
  display: inline-block;
  padding: var(--rt-s2) var(--rt-s4);
  border: 1.5px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink);
  text-decoration: none;
  transition: border-color var(--rt-transizione), background var(--rt-transizione), transform var(--rt-transizione);
}
.rt-chip:hover {
  border-color: var(--rt-accento, var(--rt-blu));
  background: color-mix(in srgb, var(--rt-accento, var(--rt-blu)) 7%, var(--rt-superficie));
  transform: translateY(-1px);
}

/* ── I problemi veri ─────────────────────────────────────────────────── */

.rt-att-dolori {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--rt-s10) var(--rt-s12);
}

.rt-att-dolore { position: relative; padding-top: var(--rt-s6); }
.rt-att-dolore::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 2.5rem;
  height: 3px;
  border-radius: var(--rt-r-pill);
  background: var(--rt-accento, var(--rt-blu));
}
.rt-att-dolore__num {
  display: block;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xs);
  color: var(--rt-accento, var(--rt-blu));
  margin-bottom: var(--rt-s2);
}
.rt-att-dolore h2 {
  margin: 0 0 var(--rt-s3);
  font-size: var(--rt-t-xl);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-testa);
  line-height: 1.22;
}
.rt-att-dolore p {
  margin: 0;
  color: var(--rt-ink-2);
  line-height: var(--rt-interlinea);
  max-width: 46ch;
}

/* ── Prodotti consigliati ────────────────────────────────────────────── */

.rt-att-prodotti { background: var(--rt-superficie); }
.rt-att-prodotti__sub { margin: var(--rt-s2) 0 var(--rt-s8); color: var(--rt-ink-3); }

/* ── Domande ─────────────────────────────────────────────────────────── */

.rt-att-faq__elenco {
  margin-top: var(--rt-s6);
  border-top: 1px solid var(--rt-linea);
  max-width: 54rem;
}

.rt-domanda { border-bottom: 1px solid var(--rt-linea); }
.rt-domanda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4);
  padding: var(--rt-s5) 0;
  cursor: pointer;
  font-size: var(--rt-t-lg);
  font-weight: var(--rt-peso-medio);
  letter-spacing: var(--rt-tracking-testa);
  list-style: none;
}
.rt-domanda summary::-webkit-details-marker { display: none; }
.rt-domanda summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--rt-ink-3);
  border-bottom: 2px solid var(--rt-ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--rt-transizione);
}
.rt-domanda[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.rt-domanda summary:hover { color: var(--rt-blu); }
.rt-domanda__risposta {
  padding-bottom: var(--rt-s5);
  max-width: 62ch;
}
.rt-domanda__risposta p { margin: 0; color: var(--rt-ink-2); line-height: var(--rt-interlinea); }

.rt-att-faq__altro { margin-top: var(--rt-s6); color: var(--rt-ink-3); }
.rt-link-assistente {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--rt-blu);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Chiusura ────────────────────────────────────────────────────────── */

.rt-att-chiusura__blocco {
  padding: var(--rt-s12);
  border-radius: var(--rt-r-xl);
  background:
    radial-gradient(60rem 24rem at 80% 120%,
      color-mix(in srgb, var(--rt-accento, var(--rt-blu)) 14%, transparent),
      transparent 60%),
    var(--rt-superficie-2);
  text-align: center;
}
@media (max-width: 760px) { .rt-att-chiusura__blocco { padding: var(--rt-s8) var(--rt-s5); } }

.rt-att-chiusura h2 {
  margin: 0;
  font-size: var(--rt-t-2xl);
  letter-spacing: var(--rt-tracking-titolo);
}
.rt-att-chiusura p {
  margin: var(--rt-s4) auto 0;
  max-width: 48ch;
  color: var(--rt-ink-2);
  line-height: var(--rt-interlinea);
}
.rt-att-chiusura__azioni {
  display: flex;
  justify-content: center;
  gap: var(--rt-s3);
  flex-wrap: wrap;
  margin-top: var(--rt-s8);
}

/* ── Modulo rivenditori ──────────────────────────────────────────────── */

.rt-contenitore--stretto { max-width: 46rem; }
.rt-modulo-sez { background: var(--rt-superficie); }

.rt-modulo { margin-top: var(--rt-s8); }
.rt-modulo__coppia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rt-s4);
}
@media (max-width: 560px) { .rt-modulo__coppia { grid-template-columns: 1fr; } }

.rt-campo { margin-bottom: var(--rt-s5); }
.rt-campo label {
  display: block;
  margin-bottom: var(--rt-s2);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  color: var(--rt-ink);
}
.rt-campo label span {
  margin-inline-start: var(--rt-s2);
  font-weight: var(--rt-peso-normale);
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
}
.rt-campo input,
.rt-campo select,
.rt-campo textarea {
  width: 100%;
  padding: var(--rt-s3) var(--rt-s4);
  border: 1.5px solid var(--rt-linea);
  border-radius: var(--rt-r-sm);
  background: var(--rt-superficie);
  font: inherit;
  font-size: var(--rt-t-base);
  color: var(--rt-ink);
  transition: border-color var(--rt-transizione), box-shadow var(--rt-transizione);
}
.rt-campo textarea { resize: vertical; line-height: var(--rt-interlinea); }
.rt-campo input:focus,
.rt-campo select:focus,
.rt-campo textarea:focus {
  outline: none;
  border-color: var(--rt-blu);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rt-blu) 14%, transparent);
}
.rt-campo--ko input,
.rt-campo--ko select { border-color: var(--rt-errore); }
.rt-campo__ko { margin: var(--rt-s2) 0 0; font-size: var(--rt-t-sm); color: var(--rt-errore); }

.rt-modulo__nota {
  margin-top: var(--rt-s5);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
  line-height: var(--rt-interlinea);
}

/* La trappola per i robot: fuori dallo schermo, non display:none, perche'
   i robot piu' accorti saltano i campi nascosti in quel modo. */
.rt-trappola {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rt-esito {
  padding: var(--rt-s8);
  border-radius: var(--rt-r-xl);
  border: 1px solid var(--rt-linea);
}
.rt-esito h2 { margin: 0 0 var(--rt-s3); font-size: var(--rt-t-2xl); letter-spacing: var(--rt-tracking-titolo); }
.rt-esito p { margin: 0; color: var(--rt-ink-2); line-height: var(--rt-interlinea); }
.rt-esito--ok {
  border-color: color-mix(in srgb, var(--rt-ok) 35%, var(--rt-linea));
  background: color-mix(in srgb, var(--rt-ok) 7%, var(--rt-superficie));
}
.rt-esito--ko {
  margin-bottom: var(--rt-s6);
  padding: var(--rt-s5);
  border-color: color-mix(in srgb, var(--rt-errore) 35%, var(--rt-linea));
  background: color-mix(in srgb, var(--rt-errore) 6%, var(--rt-superficie));
}

/* ── Avviso solo per chi amministra ──────────────────────────────────── */

.rt-avviso-admin {
  margin-bottom: var(--rt-s6);
  padding: var(--rt-s4) var(--rt-s5);
  border-inline-start: 4px solid var(--rt-attenzione);
  border-radius: var(--rt-r-sm);
  background: color-mix(in srgb, var(--rt-attenzione) 9%, var(--rt-superficie));
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-2);
}

/* ============================================================================
   Articoli
   Una colonna sola, misura di riga corta, indice a lato dove c'e' spazio.
   Qui si legge: tutto il resto della pagina deve togliersi di mezzo.
   ========================================================================= */

.rt-contenitore--lettura { max-width: 44rem; }

.rt-articolo__testa { padding-block: var(--rt-s12) var(--rt-s8); }
.rt-articolo__testa h1 {
  margin: var(--rt-s3) 0 0;
  font-size: clamp(var(--rt-t-2xl), 5vw, var(--rt-t-3xl));
  font-weight: var(--rt-peso-titolo);
  letter-spacing: var(--rt-tracking-titolo);
  line-height: var(--rt-interlinea-stretta);
}
.rt-articolo__lede {
  margin: var(--rt-s5) 0 0;
  font-size: var(--rt-t-lg);
  color: var(--rt-ink-2);
  line-height: 1.5;
}
.rt-articolo__dati {
  margin: var(--rt-s6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s2);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
}

.rt-articolo__copertina img {
  width: 100%;
  height: auto;
  max-height: 28rem;
  object-fit: cover;
  border-radius: var(--rt-r-xl);
  display: block;
}

/* L'indice sta a sinistra solo quando c'e' davvero posto: sotto i 1100px
   scivola sopra il testo, dove serve comunque. */
.rt-articolo__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rt-s10);
  padding-block: var(--rt-s10);
}
@media (min-width: 1100px) {
  .rt-articolo__griglia {
    grid-template-columns: 15rem minmax(0, 44rem);
    gap: var(--rt-s16);
    justify-content: center;
    align-items: start;
  }
  .rt-indice { position: sticky; top: var(--rt-s8); }
}

.rt-indice__et {
  margin: 0 0 var(--rt-s3);
  font-size: var(--rt-t-xs);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
}
.rt-indice ol {
  margin: 0;
  padding: 0 0 0 var(--rt-s4);
  display: flex;
  flex-direction: column;
  gap: var(--rt-s2);
  border-inline-start: 2px solid var(--rt-linea);
}
.rt-indice li { list-style: none; }
.rt-indice a {
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-2);
  text-decoration: none;
  line-height: 1.35;
  display: block;
}
.rt-indice a:hover { color: var(--rt-blu); }

/* Il titolo cliccato dall'indice non deve finire sotto il bordo alto. */
.rt-articolo__corpo h2 { scroll-margin-top: var(--rt-s8); }

.rt-articolo__piede { padding-block: var(--rt-s4) var(--rt-s16); }

.rt-articolo__aiuto {
  padding: var(--rt-s8);
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie-2);
}
.rt-articolo__aiuto h2 { margin: 0 0 var(--rt-s3); font-size: var(--rt-t-xl); letter-spacing: var(--rt-tracking-testa); }
.rt-articolo__aiuto p { margin: 0 0 var(--rt-s6); color: var(--rt-ink-2); line-height: var(--rt-interlinea); }

.rt-articolo__prodotti,
.rt-articolo__altri { margin-top: var(--rt-s16); }
.rt-articolo__prodotti h2,
.rt-articolo__altri h2 {
  margin: 0 0 var(--rt-s6);
  font-size: var(--rt-t-xl);
  letter-spacing: var(--rt-tracking-testa);
}
.rt-articolo__altri ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rt-linea); }
.rt-articolo__altri a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rt-s4);
  padding: var(--rt-s4) 0;
  border-bottom: 1px solid var(--rt-linea);
  text-decoration: none;
  color: var(--rt-ink);
}
.rt-articolo__altri a:hover strong { color: var(--rt-blu); }
.rt-articolo__altri strong { font-weight: var(--rt-peso-medio); }
.rt-articolo__altri span { flex: none; font-size: var(--rt-t-xs); color: var(--rt-ink-3); }

/* ── Elenco degli articoli ───────────────────────────────────────────── */

.rt-articoli {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--rt-s8) var(--rt-s6);
}

.rt-art-card { display: flex; flex-direction: column; min-width: 0; }
.rt-art-card__img {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--rt-r-lg);
  overflow: hidden;
  background: var(--rt-superficie-2);
}
.rt-art-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-art-card:hover .rt-art-card__img img { transform: scale(1.03); }
.rt-art-card__vuota {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--rt-blu-tenue), var(--rt-superficie-2));
}

.rt-art-card__corpo { padding-top: var(--rt-s4); }
.rt-art-card__cat {
  font-size: var(--rt-t-xs);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-blu);
}
.rt-art-card h2 {
  margin: var(--rt-s2) 0 0;
  font-size: var(--rt-t-lg);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-testa);
  line-height: 1.26;
}
.rt-art-card h2 a { color: var(--rt-ink); text-decoration: none; }
.rt-art-card h2 a:hover { color: var(--rt-blu); }
.rt-art-card__estratto {
  margin: var(--rt-s3) 0 0;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-2);
  line-height: var(--rt-interlinea);
}
.rt-art-card__dati {
  margin: var(--rt-s3) 0 0;
  display: flex;
  gap: var(--rt-s2);
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .rt-art-card:hover .rt-art-card__img img { transform: none; }
}

/* ── Paginazione ─────────────────────────────────────────────────────── */

.rt-paginazione { margin-top: var(--rt-s12); }
.rt-paginazione .nav-links { display: flex; flex-wrap: wrap; gap: var(--rt-s2); justify-content: center; }
.rt-paginazione .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: var(--rt-s2) var(--rt-s4);
  border: 1.5px solid var(--rt-linea);
  border-radius: var(--rt-r-sm);
  background: var(--rt-superficie);
  color: var(--rt-ink-2);
  text-decoration: none;
  font-size: var(--rt-t-sm);
}
.rt-paginazione .page-numbers:hover { border-color: var(--rt-blu); color: var(--rt-blu); }
.rt-paginazione .page-numbers.current {
  background: var(--rt-blu);
  border-color: var(--rt-blu);
  color: #fff;
  font-weight: var(--rt-peso-medio);
}