/*
 * Pagine pubbliche di AnalogPrice: grafica "I2" (brutalista), scelta da Francesco il 25/9/2026.
 * Testata nera, fascia rossa "Un progetto di" + logo TALKS, griglia nera da 2px,
 * Archivo Black per titoli e prezzi, IBM Plex Mono per il testo, rosso solo come accento.
 * Le pagine di amministrazione restano su style.css.
 */
:root {
  --nero: #000000;
  --bianco: #FFFFFF;
  --rosso: #D61C43;
  --grigio: #4A4A4A;
  /* Bordi: spessore e colore in un posto solo */
  --linea-spessore: 2px;
  --linea-colore: #666666;       /* nero schiarito del 40%, scelto da Francesco il 25/9 */
  --linea: var(--linea-spessore) solid var(--linea-colore);
  /* Fondo della pagina, fondo delle schede, colore del testo: il "bianco" e il "nero"
     del sito di Stampa Analogica, scelti da Francesco il 25/9 (versione D) */
  --fondo: #F3F1EC;
  --carta: var(--bianco);
  --inchiostro: #2E2E2E;
  --linea-fine: 1px solid var(--linea-colore);
  --titolo: 'Archivo Black', 'Arial Black', sans-serif;
  --testo: 'IBM Plex Mono', 'Courier New', monospace;
  --margine: 16px;
}
@media (min-width: 900px) { :root { --margine: 40px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--inchiostro); font-family: var(--testo); font-size: 15px; line-height: 1.45; }
a { color: var(--inchiostro); }
a:hover { color: var(--rosso); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--rosso); outline-offset: 2px; }

/* ── Testata ─────────────────────────────────────────────────────────────── */
.ap-testata { background: var(--nero); color: var(--bianco); padding: 16px var(--margine) 14px; display: flex; flex-direction: column; gap: 10px; }
.ap-titolo { font-family: var(--titolo); font-size: 58px; line-height: .88; letter-spacing: -.04em; text-transform: uppercase; color: var(--bianco); text-decoration: none; }
.ap-titolo:hover { color: var(--bianco); }
.ap-titolo span { color: var(--rosso); }
.ap-sottotitolo { margin: 0; font-size: 14px; }
@media (min-width: 900px) {
  .ap-testata { padding-top: 22px; padding-bottom: 20px; }
  .ap-titolo { font-size: 132px; }
}

/* Fascia "Un progetto di": a sinistra sul telefono, a destra dal computer in su.
   La scritta è allineata alla parte alta del logo. */
.ap-fascia { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 12px var(--margine); background: var(--rosso); color: var(--bianco); text-decoration: none; border-bottom: var(--linea); }
.ap-fascia:hover { color: var(--bianco); }
.ap-fascia span { display: block; margin-top: 2px; font-size: 13px; line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.ap-fascia img { display: block; height: 48px; width: auto; }
@media (min-width: 900px) {
  .ap-fascia { justify-content: flex-end; gap: 20px; }
  .ap-fascia img { height: 60px; }
}

/* Testata compressa: una riga sola, fascia più bassa */
.ap-spazio { display: none; }
.ap-compatta .ap-testata { flex-direction: row; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.ap-compatta .ap-titolo { font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.ap-compatta .ap-a-capo, .ap-compatta .ap-sottotitolo { display: none; }
.ap-compatta .ap-spazio { display: inline; }
.ap-compatta .ap-fascia { padding-top: 6px; padding-bottom: 6px; }
.ap-compatta .ap-fascia span { font-size: 11px; }
.ap-compatta .ap-fascia img { height: 30px; }
@media (min-width: 900px) {
  .ap-compatta .ap-titolo { font-size: 40px; }
  .ap-compatta .ap-fascia img { height: 36px; }
}

/* ── Impaginazione ───────────────────────────────────────────────────────── */
.ap-corpo { display: flex; flex-direction: column; }
.ap-risultati { scroll-margin-top: 8px; }
.ap-filtri, .ap-risultati { display: flex; flex-direction: column; gap: 16px; padding: 16px var(--margine); }
@media (min-width: 900px) {
  .ap-corpo { flex-direction: row; align-items: stretch; }
  .ap-filtri { width: 320px; flex-shrink: 0; padding: 24px 20px 24px var(--margine); border-right: var(--linea); }
  .ap-risultati { flex-grow: 1; min-width: 0; padding: 24px var(--margine); gap: 20px; }
}
.ap-percorso { margin: 0; font-size: 13px; text-transform: uppercase; }
.ap-avviso { padding: 10px; border: var(--linea); background: var(--carta); font-size: 14px; }

/* ── Scelte e filtri ─────────────────────────────────────────────────────── */
.ap-scelte { display: flex; flex-wrap: wrap; padding: 0 var(--linea-spessore) var(--linea-spessore) 0; }
.ap-scelta { display: inline-flex; align-items: center; min-height: 44px; margin: 0 calc(-1 * var(--linea-spessore)) calc(-1 * var(--linea-spessore)) 0; padding: 8px 12px; border: var(--linea); background: var(--carta); color: var(--inchiostro); font-family: var(--testo); font-weight: 700; font-size: 14px; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.ap-scelta:hover { color: var(--rosso); }
.ap-scelta.attiva { background: var(--nero); color: var(--bianco); }
.ap-scelta.attiva:hover { color: var(--bianco); }

.ap-campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; text-transform: uppercase; }
.ap-campo input, .ap-campo select { width: 100%; height: 50px; padding: 0 14px; border: var(--linea); border-radius: 0; background: var(--carta); color: var(--inchiostro); font-family: var(--testo); font-size: 16px; text-transform: none; -webkit-appearance: none; appearance: none; }
.ap-campo select { background-image: linear-gradient(45deg, transparent 50%, var(--nero) 50%), linear-gradient(135deg, var(--nero) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.ap-cerca { display: flex; }
.ap-cerca input { flex-grow: 1; }
.ap-cerca button { height: 50px; margin-left: calc(-1 * var(--linea-spessore)); padding: 0 14px; border: var(--linea); background: var(--nero); color: var(--bianco); font-family: var(--testo); font-weight: 700; font-size: 14px; text-transform: uppercase; cursor: pointer; }

.ap-spunta { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; text-transform: uppercase; text-decoration: none; color: var(--inchiostro); }
.ap-spunta span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: var(--linea); font-weight: 700; flex-shrink: 0; }

/* Filtri secondari: chiusi sul telefono, aperti dal computer in su (vedi base_pubblico.html) */
.ap-filtri-extra { border: var(--linea); background: var(--carta); }
.ap-filtri-extra summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 12px; font-weight: 700; font-size: 14px; text-transform: uppercase; cursor: pointer; list-style: none; }
.ap-filtri-extra summary::-webkit-details-marker { display: none; }
.ap-filtri-extra summary::after { content: '[+]'; }
.ap-filtri-extra[open] summary::after { content: '[–]'; }
.ap-filtri-extra[open] summary { border-bottom: var(--linea); }
.ap-filtri-extra > div { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
@media (min-width: 900px) { .ap-filtri-extra { border: 0; background: transparent; } .ap-filtri-extra summary { display: none; } .ap-filtri-extra > div { padding: 0; } }

/* ── Schede ──────────────────────────────────────────────────────────────── */
.ap-schede { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .ap-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .ap-schede { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-scheda { display: flex; flex-direction: column; border: var(--linea); background: var(--carta); }
.ap-scheda-testa { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: var(--linea); font-size: 12px; text-transform: uppercase; }
/* Carte, dal computer in su: la base (RC/FB) come etichetta nera, il resto in grassetto */
@media (min-width: 900px) {
  .ap-testa-carta { font-weight: 700; align-items: center; }
  .ap-base { display: inline-block; margin-right: 4px; padding: 1px 7px; background: var(--nero); color: var(--bianco); }
}
.ap-scheda-nome { margin: 0; padding: 12px 10px 8px; font-family: var(--titolo); font-weight: 400; font-size: 30px; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; }
.ap-scheda-nome a { text-decoration: none; }
.ap-dati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--linea); font-size: 13px; }
.ap-dati span { padding: 6px 10px; border-right: var(--linea); }
.ap-dati span:last-child { border-right: 0; }
.ap-scheda-prezzo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 10px; border-top: var(--linea); margin-top: auto; }
.ap-etichetta { display: block; font-size: 12px; text-transform: uppercase; }
.ap-prezzo { display: block; font-family: var(--titolo); font-size: 48px; line-height: 1; letter-spacing: -.03em; color: var(--rosso); }
.ap-negozio { display: block; font-size: 13px; }
.ap-compra { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 12px; background: var(--nero); color: var(--bianco); font-weight: 700; font-size: 14px; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.ap-compra:hover { background: var(--rosso); color: var(--bianco); }
.ap-altri { display: block; padding: 10px; border-top: var(--linea); font-size: 13px; text-transform: uppercase; }
.ap-altri-schede { display: flex; justify-content: center; min-height: 48px; align-items: center; border: var(--linea); font-weight: 700; text-transform: uppercase; text-decoration: none; }
.ap-altri-schede:hover { background: var(--nero); color: var(--bianco); }
.ap-scaduta { color: var(--grigio); }
.ap-bordo-sopra { border-top: var(--linea); }

/* ── Dettaglio: tutti i negozi di un prodotto ────────────────────────────── */
.ap-dettaglio { border: var(--linea); background: var(--carta); }
.ap-dettaglio .ap-scheda-nome { border-bottom: var(--linea); }
.ap-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px; border-top: var(--linea-fine); }
.ap-riga:first-of-type { border-top: 0; }
.ap-riga-prezzo { font-family: var(--titolo); font-size: 24px; line-height: 1; }
.ap-riga.migliore .ap-riga-prezzo { color: var(--rosso); font-size: 32px; }
.ap-riga-info { grid-column: 1 / -1; font-size: 13px; color: var(--grigio); }
.ap-grafico { padding: 12px 10px; border-top: var(--linea); }
.ap-grafico canvas { width: 100%; max-height: 240px; }

/* ── Tabelle (carte e chimiche) ──────────────────────────────────────────── */
.ap-tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.ap-tabella th { padding: 8px 10px; font-weight: 400; font-size: 12px; text-transform: uppercase; text-align: left; border-bottom: var(--linea); }
.ap-tabella td { padding: 10px; border-bottom: var(--linea-fine); vertical-align: top; }
.ap-tabella tr:last-child td { border-bottom: 0; }
.ap-tabella .num { text-align: right; white-space: nowrap; }
.ap-tabella .ap-tab-prezzo { font-family: var(--titolo); font-size: 22px; color: var(--rosso); }
/* Sul telefono ogni riga diventa un blocco: niente tabelle che escono dallo schermo */
@media (max-width: 699px) {
  .ap-tabella thead { display: none; }
  .ap-tabella tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: var(--linea); }
  .ap-tabella tr:first-child { border-top: 0; }
  .ap-tabella td { border: 0; padding: 6px 10px; }
  .ap-tabella td::before { content: attr(data-etichetta); display: block; font-size: 11px; text-transform: uppercase; color: var(--grigio); }
  .ap-tabella .num { text-align: left; }
}

/* ── Blocchi neri: risparmio e firma ─────────────────────────────────────── */
.ap-risparmio { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border: var(--linea); background: var(--nero); color: var(--bianco); }
.ap-risparmio strong { font-family: var(--titolo); font-weight: 400; font-size: 64px; line-height: .95; letter-spacing: -.03em; }
.ap-firma { display: flex; flex-direction: column; border: var(--linea); background: var(--nero); color: var(--bianco); }
.ap-firma-logo { padding: 16px 12px; border-bottom: 1px solid var(--bianco); }
.ap-firma-logo img { display: block; height: 64px; width: auto; }
.ap-firma-testo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px; }
.ap-firma-testo p { margin: 0; font-size: 14px; line-height: 1.5; }
.ap-bottone-chiaro { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 12px; background: var(--bianco); color: var(--nero); font-weight: 700; font-size: 14px; text-transform: uppercase; text-decoration: none; }
.ap-bottone-chiaro:hover { background: var(--rosso); color: var(--bianco); }
@media (min-width: 900px) { .ap-firma-logo { padding: 20px 24px; } .ap-firma-logo img { height: 80px; } .ap-firma-testo { padding: 18px 24px; } }

.ap-numeri { background: var(--carta); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--linea); }
.ap-numeri div { padding: 10px; border-right: var(--linea); }
.ap-numeri div:last-child { border-right: 0; }
.ap-numeri strong { display: block; font-family: var(--titolo); font-weight: 400; font-size: 34px; line-height: 1; }
.ap-numeri span { font-size: 12px; text-transform: uppercase; }

/* ── Piede ───────────────────────────────────────────────────────────────── */
.ap-piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px var(--margine) 28px; border-top: var(--linea); font-size: 12px; text-transform: uppercase; }
.ap-piede details summary { cursor: pointer; }
.ap-piede form { display: flex; margin-top: 8px; }
.ap-piede input { height: 44px; padding: 0 10px; border: var(--linea); border-radius: 0; font-family: var(--testo); }
.ap-piede button { height: 44px; margin-left: calc(-1 * var(--linea-spessore)); padding: 0 12px; border: var(--linea); background: var(--nero); color: var(--bianco); font-family: var(--testo); font-weight: 700; text-transform: uppercase; cursor: pointer; }
.ap-messaggio { margin: 0; padding: 10px var(--margine); border-bottom: var(--linea); font-size: 14px; }
.ap-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Versione in testata: FREE / PRO accanto al titolo ─────────────────── */
.ap-versione { display: inline-block; margin-left: 10px; padding: 4px 8px 3px; vertical-align: top; font-family: var(--testo); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: .08em; color: var(--nero); background: var(--bianco); }
.ap-versione.pro { color: var(--bianco); background: var(--rosso); }
@media (min-width: 900px) { .ap-versione { font-size: 20px; padding: 6px 10px 5px; margin-left: 16px; } }
.ap-compatta .ap-versione { font-size: 12px; padding: 3px 6px 2px; margin-left: 8px; vertical-align: middle; }

/* Carte e chimiche nella Free: si vedono, ma portano a TALKS */
.ap-scelta.bloccata { color: var(--grigio); }
.ap-scelta.bloccata small { margin-left: 6px; padding: 1px 5px; background: var(--rosso); color: var(--bianco); font-size: 11px; }

/* ── Messaggi e accessibilità ──────────────────────────────────────────── */
.ap-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ap-messaggio { margin: 0; padding: 12px var(--margine); background: var(--nero); color: var(--bianco); font-size: 14px; border-bottom: var(--linea); }
.ap-avviso-errore { border-color: var(--rosso); color: var(--rosso); font-weight: 700; }

/* ── Porta d'ingresso ──────────────────────────────────────────────────── */
.ap-porta { display: flex; flex-direction: column; gap: 20px; max-width: 1100px; padding: 20px var(--margine) 32px; }
.ap-porta-apertura p { margin: 0 0 10px; max-width: 60ch; }
.ap-porta-titolo { margin: 0 0 14px; font-family: var(--titolo); font-weight: 400; font-size: 40px; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.ap-porta-esempio { font-size: 17px; }
.ap-porta-esempio strong { color: var(--rosso); white-space: nowrap; }
.ap-porta-colonne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ap-porta-box { display: flex; flex-direction: column; border: var(--linea); background: var(--carta); }
.ap-porta-testo { margin: 0; padding: 0 10px 12px; }
.ap-porta-modulo { padding: 12px 10px 0; border-top: var(--linea); }
.ap-porta-bottone { justify-content: center; min-height: 52px; border: 0; font-family: var(--testo); cursor: pointer; white-space: normal; }
.ap-porta-nota { margin: 0; padding: 10px; font-size: 13px; color: var(--grigio); }
.ap-porta-pro { background: var(--nero); color: var(--bianco); }
.ap-porta-pro .ap-scheda-testa { border-bottom-color: var(--bianco); }
.ap-porta-azioni { margin-top: auto; padding: 12px 10px; border-top: 1px solid var(--bianco); }
.ap-perso { border: var(--linea); background: var(--carta); }
.ap-perso summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 12px; font-weight: 700; font-size: 14px; text-transform: uppercase; cursor: pointer; list-style: none; }
.ap-perso summary::-webkit-details-marker { display: none; }
.ap-perso summary::after { content: '[+]'; }
.ap-perso[open] summary::after { content: '[–]'; }
.ap-perso[open] summary { border-bottom: var(--linea); }
.ap-perso > div { padding: 12px; }
@media (min-width: 900px) {
  .ap-porta { padding-top: 32px; gap: 24px; }
  .ap-porta-titolo { font-size: 64px; }
  .ap-porta-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Filtri scelti: in nero, si vede subito cosa è attivo (25/9) */
.ap-campo select.scelto { background-color: var(--nero); color: var(--bianco); border-color: var(--nero);
  background-image: linear-gradient(45deg, transparent 50%, var(--bianco) 50%), linear-gradient(135deg, var(--bianco) 50%, transparent 50%); }
.ap-spunta[aria-checked="true"] span { background: var(--nero); color: var(--bianco); border-color: var(--nero); }

/* ══ Struttura del 25/9: sezioni, prezzi migliori a sinistra, comparazione a destra ══ */
.ap-sezioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px var(--margine) 18px; border-bottom: var(--linea); }
/* Al telefono (Q1 della tela, 26/9): Rullini e Carte & chimiche affiancati, "PRO" sotto il nome,
   Negozi in una barra sottile a tutta larghezza */
.ap-sezione { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 72px; padding: 8px; border: 2px solid var(--nero); box-shadow: 3px 3px 0 var(--nero); background: var(--carta); color: var(--nero); font-family: var(--titolo); font-size: 17px; line-height: 1.05; text-align: center; text-transform: uppercase; text-decoration: none; }
.ap-sezione:hover { color: var(--nero); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--nero); }
.ap-sezione.attiva, .ap-sezione.attiva:hover { background: var(--nero); color: var(--bianco); transform: none; box-shadow: 3px 3px 0 var(--rosso); }
.ap-sezione.bloccata { color: var(--grigio); }
.ap-sezione small { padding: 2px 7px; background: var(--rosso); color: var(--bianco); font-family: var(--testo); font-weight: 700; font-size: 13px; }
.ap-sezione-negozi { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; min-height: 48px; padding: 10px 14px; border-color: var(--linea-colore); box-shadow: none; font-family: var(--testo); font-weight: 700; font-size: 15px; }
.ap-sezione-negozi:hover { box-shadow: none; border-color: var(--nero); }
.ap-sezione-negozi.attiva, .ap-sezione-negozi.attiva:hover { box-shadow: none; }
.ap-solo-computer { display: none; }
@media (min-width: 900px) {
  .ap-sezioni { display: flex; gap: 18px; padding: 18px var(--margine) 20px; }
  .ap-sezione { flex-direction: row; gap: 8px; min-width: 240px; min-height: 58px; padding: 0 28px; font-size: 24px; box-shadow: 4px 4px 0 var(--nero); }
  .ap-sezione small { font-size: 11px; padding: 1px 5px; }
  .ap-sezione-negozi { justify-content: center; border-color: var(--nero); font-family: var(--titolo); font-weight: 400; }
  .ap-sezione-negozi:hover { box-shadow: 5px 5px 0 var(--nero); }
  .ap-sezione-negozi.attiva, .ap-sezione-negozi.attiva:hover { box-shadow: 4px 4px 0 var(--rosso); }
  .ap-solo-telefono { display: none; }
  .ap-solo-computer { display: inline; }
  .ap-sezione:hover { box-shadow: 5px 5px 0 var(--nero); }
  .ap-sezione.attiva, .ap-sezione.attiva:hover { box-shadow: 4px 4px 0 var(--rosso); }
}

.ap-pagina { display: flex; flex-direction: column; }
.ap-confronto { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px var(--margine) 28px; scroll-margin-top: 8px; }
.ap-titolo-sezione { margin: 0; font-family: var(--titolo); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.ap-sottoscelta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ap-scelta-grande { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--nero); background: var(--carta); color: var(--nero); font-weight: 700; font-size: 16px; text-transform: uppercase; text-decoration: none; }
.ap-scelta-grande.attiva { background: var(--nero); color: var(--bianco); }
.ap-scelte-piccole { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-scelta-piccola { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: var(--linea); background: var(--carta); color: var(--inchiostro); font-size: 13px; text-transform: uppercase; text-decoration: none; }
.ap-scelta-piccola.attiva { background: var(--nero); border-color: var(--nero); color: var(--bianco); }
.ap-modulo-confronto { display: flex; flex-direction: column; gap: 14px; }
.ap-cerca-riga { display: flex; flex-direction: column; gap: 10px; }
.ap-ricerca input { height: 52px; }
.ap-bottone-rosso { min-height: 52px; padding: 0 20px; border: 0; background: var(--rosso); color: var(--bianco); font-family: var(--testo); font-weight: 700; font-size: 16px; text-transform: uppercase; cursor: pointer; }
.ap-bottone-rosso:hover { background: var(--nero); }
@media (min-width: 700px) {
  .ap-cerca-riga { flex-direction: row; align-items: flex-end; gap: 0; }
  .ap-ricerca { flex-grow: 1; }
  .ap-ricerca input { border-right: 0; }
}

.ap-risultato { display: flex; flex-direction: column; border: var(--linea); background: var(--carta); }
.ap-risultato-testa { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-bottom: var(--linea); }
.ap-risultato-testa h2 { margin: 0; font-family: var(--titolo); font-weight: 400; font-size: 27px; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; }
.ap-risultato-testa span { font-size: 12px; text-transform: uppercase; }
.ap-negozio-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 11px 14px; border-bottom: var(--linea-fine); }
.ap-negozio-riga.migliore { background: #FBE9ED; }
.ap-negozio-nome small { display: block; margin-top: 2px; font-size: 12px; color: var(--grigio); }
.ap-negozio-prezzo { font-family: var(--titolo); font-size: 18px; white-space: nowrap; }
.ap-negozio-riga.migliore .ap-negozio-prezzo { font-size: 26px; color: var(--rosso); }
.ap-negozio-riga .ap-compra { grid-column: 1 / -1; justify-content: center; }
.ap-vai { grid-column: 1 / -1; justify-self: start; font-size: 13px; }
.ap-nota { margin: 0; padding: 10px 14px; font-size: 13px; }
/* Nella Free: i rullini che si vedono solo nella Pro (26/9) */
.ap-solo-pro { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 16px; border: var(--linea); background: var(--carta); }
.ap-solo-pro h2 { margin: 0; font-family: var(--titolo); font-weight: 400; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.ap-solo-pro p { margin: 0; }
.ap-solo-pro-lista { font-size: 11px; line-height: 1.5; color: var(--grigio); }
.ap-solo-pro-lista b { color: var(--inchiostro); }
.ap-solo-pro .ap-bottone-nero { align-self: stretch; min-height: 48px; font-size: 14px; gap: 6px; }
/* Quanto risparmi in un anno (26/9) */
.ap-anno { margin-top: 6px; }
.ap-anno summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 2px solid var(--nero); background: var(--carta); font-weight: 700; font-size: 13px; text-transform: uppercase; cursor: pointer; list-style: none; }
.ap-anno summary::-webkit-details-marker { display: none; }
.ap-anno summary::after { content: "+"; margin-left: 10px; font-size: 16px; }
.ap-anno[open] summary { background: var(--nero); color: var(--bianco); }
.ap-anno[open] summary::after { content: "–"; }
.ap-anno summary:hover { border-color: var(--rosso); }
.ap-anno-corpo { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 14px; border: var(--linea); background: #FBE9ED; }
.ap-anno-quanti { display: flex; flex-direction: column; gap: 6px; font-size: 13px; text-transform: uppercase; }
.ap-anno-quanti span { display: flex; gap: 8px; }
.ap-anno-quanti input { width: 90px; height: 44px; padding: 0 10px; border: 2px solid var(--nero); font-family: var(--titolo); font-size: 20px; }
.ap-anno-quanti select { height: 44px; padding: 0 8px; border: 2px solid var(--nero); background: var(--carta); font-family: var(--testo); font-size: 15px; }
.ap-anno-esito { display: flex; flex-direction: column; gap: 6px; }
.ap-risultato-testa .ap-anno-esito p, .ap-anno-esito p { margin: 0; text-transform: none; }
.ap-anno-come { font-size: 14px; }
.ap-risultato-testa .ap-anno-riga, .ap-anno-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 6px; border-top: var(--linea-fine); font-weight: 700; font-size: 15px; }
.ap-anno-riga b { font-family: var(--titolo); font-weight: 400; font-size: 26px; color: var(--rosso); white-space: nowrap; }
.ap-anno-nota { font-size: 13px; color: var(--grigio); }
@media (min-width: 700px) {
  .ap-risultato-testa { padding: 16px; }
  .ap-risultato-testa h2 { font-size: 34px; }
  .ap-risultato-testa span { font-size: 13px; }
  .ap-negozio-riga { grid-template-columns: minmax(0, 1fr) auto 110px; padding: 11px 16px; }
  .ap-negozio-riga .ap-compra, .ap-vai { grid-column: auto; justify-self: end; }
}

.ap-elenco { display: flex; flex-direction: column; border: var(--linea); background: var(--carta); }
.ap-riga-m { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: var(--linea-fine); color: var(--inchiostro); text-decoration: none; }
.ap-riga-m:hover { background: #F8F7F3; color: var(--inchiostro); }
.ap-riga-m-nome { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-riga-m-nome strong { font-size: 15px; }
.ap-riga-m-nome span { font-size: 12px; }
.ap-riga-m-prezzo { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.ap-riga-m-prezzo b { font-family: var(--titolo); font-weight: 400; font-size: 19px; color: var(--rosso); white-space: nowrap; }
.ap-riga-m-prezzo span { font-size: 11px; color: var(--grigio); }

.ap-migliori { display: flex; flex-direction: column; border-top: var(--linea); background: var(--carta); }
.ap-migliori header { padding: 16px var(--margine) 12px; border-bottom: var(--linea); }
.ap-migliori h2 { margin: 0; font-family: var(--titolo); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.ap-migliori header p { margin: 4px 0 0; font-size: 12px; color: var(--grigio); }
.ap-migliori .ap-riga-m { padding-left: var(--margine); padding-right: var(--margine); }
.ap-migliori h3 { margin: 0; padding: 12px var(--margine) 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; border-bottom: var(--linea-fine); background: #F8F7F3; }
.ap-migliori .ap-altri-schede { border: 0; border-top: var(--linea); }
.ap-fondo { display: flex; flex-direction: column; gap: 16px; padding: 16px var(--margine) 28px; border-top: var(--linea); }
@media (min-width: 900px) {
  .ap-pagina { flex-direction: row; align-items: stretch; }
  .ap-migliori { order: -1; width: 430px; flex-shrink: 0; border-top: 0; border-right: var(--linea); }
  .ap-migliori .ap-riga-m { padding-right: 24px; }
  .ap-confronto { flex-grow: 1; max-width: 900px; padding-top: 24px; }
  .ap-fondo { flex-direction: row; align-items: stretch; }
  .ap-fondo > * { flex: 1 1 0; }
}

/* Carte e chimiche: menu in griglia, righe dei formati a tre colonne (niente "al foglio") */
.ap-menu-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-menu-griglia select { padding-left: 10px; }
.ap-formati-testa, .ap-formato-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 14px; }
.ap-formati-testa { padding-top: 8px; padding-bottom: 8px; border-bottom: var(--linea); font-size: 12px; text-transform: uppercase; }
.ap-formati-testa span:nth-child(3) { display: none; }
.ap-formato-riga { border-bottom: var(--linea-fine); color: var(--inchiostro); text-decoration: none; align-items: center; }
.ap-formato-riga:last-child { border-bottom: 0; }
.ap-formato-riga:hover { background: #F8F7F3; color: var(--inchiostro); }
.ap-formato-riga small { display: block; font-size: 12px; color: var(--grigio); }
/* Formati delle carte: decimali più piccoli, "20,3 × 25,4" (26/9) */
.ap-dec { font-size: 0.72em; }
/* Negozi "solo link": niente prezzo, riga più discreta (26/9) */
.ap-solo-link .ap-negozio-prezzo { color: var(--grigio); font-weight: 400; }
.ap-formato-prezzo { font-family: var(--titolo); font-size: 21px; color: var(--rosso); text-align: right; white-space: nowrap; }
.ap-formato-prezzo small { font-family: var(--testo); font-size: 11px; font-weight: 700; color: var(--inchiostro); }
.ap-formato-dove { grid-column: 1 / -1; font-size: 13px; }
.ap-formato-dove small { display: inline; margin-left: 6px; }
@media (min-width: 700px) {
  .ap-menu-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ap-formati-testa, .ap-formato-riga { grid-template-columns: 170px minmax(0, 1fr) 230px; padding-left: 16px; padding-right: 16px; }
  .ap-formati-testa span:nth-child(2) { text-align: right; padding-right: 24px; }
  .ap-formati-testa span:nth-child(3) { display: block; }
  .ap-formato-prezzo { padding-right: 24px; }
  .ap-formato-dove { grid-column: auto; }
  .ap-formato-dove small { display: block; margin-left: 0; }
}
.ap-confronto .ap-risultato + .ap-risultato { margin-top: 4px; }

/* Carte: base RC / FB come due bottoni grandi */
.ap-basi { display: flex; gap: 8px; }
.ap-base-bottone { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 36px; padding: 0 12px; border: 2px solid var(--nero); background: var(--carta); color: var(--nero); font-family: var(--titolo); font-size: 15px; text-decoration: none; }
.ap-base-bottone:hover { color: var(--rosso); }
.ap-base-bottone.attiva, .ap-base-bottone.attiva:hover { background: var(--nero); color: var(--bianco); }

/* ══ Negozi (26/9): riquadro "Controlla anche su" e pagina Negozi ══ */
.ap-anche-su { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px var(--margine); border-top: var(--linea); background: var(--carta); }
.ap-anche-su-titolo { font-weight: 700; text-transform: uppercase; font-size: 13px; }
.ap-anche-su-nomi a { color: var(--nero); }
.ap-anche-su-tutti { margin-left: auto; color: var(--rosso); font-weight: 700; text-decoration: none; }
.ap-negozi { display: flex; flex-direction: column; gap: 22px; padding: 20px var(--margine) 28px; }
.ap-negozi-intro { margin: 0; max-width: 60ch; }
.ap-negozi h2 { margin: 6px 0 0; font-family: var(--titolo); font-weight: 400; font-size: 18px; text-transform: uppercase; }
.ap-negozi-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .ap-negozi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ap-negozi-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-negozio { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: var(--linea); background: var(--carta); }
.ap-negozio h3 { margin: 0; font-family: var(--titolo); font-weight: 400; font-size: 17px; }
.ap-negozio h3 a { color: var(--nero); text-decoration: none; }
.ap-negozio h3 a:hover { color: var(--rosso); }
.ap-negozio-dove { font-size: 13px; color: var(--grigio); }
.ap-negozio p { margin: 0; }
.ap-negozio-sped { font-size: 13px; }
.ap-negozio-tag { align-self: flex-start; padding: 1px 6px; background: var(--nero); color: var(--bianco); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.ap-negozio small { color: var(--grigio); }

/* ══ Moduli dei negozi (26/9) ══ */
.ap-negozi-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; }
.ap-negozi-link { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; font-size: 12px; text-transform: uppercase; }
.ap-negozi-link a { color: var(--inchiostro); }
.ap-negozi-link a.ap-rosso { color: var(--rosso); font-weight: 700; }
.ap-porta-negozi { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--linea); }
@media (min-width: 900px) { .ap-porta-negozi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-porta-bianca, .ap-porta-nera { display: flex; flex-direction: column; gap: 12px; padding: 20px var(--margine); }
.ap-porta-bianca { background: var(--carta); }
.ap-porta-nera { background: var(--nero); color: var(--bianco); }
.ap-porta-negozi h2 { margin: 0; font-family: var(--titolo); font-weight: 400; font-size: 20px; text-transform: uppercase; }
.ap-porta-negozi p { margin: 0; max-width: 60ch; }
.ap-bottone-link, .ap-bottone-bianco, .ap-bottone-nero { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 52px; padding: 0 20px; font-weight: 700; font-size: 16px; text-transform: uppercase; text-decoration: none; }
.ap-bottone-link { color: var(--bianco); }
.ap-bottone-link:hover { color: var(--bianco); }
.ap-bottone-bianco { background: var(--bianco); color: var(--nero); }
.ap-bottone-bianco:hover { background: var(--rosso); color: var(--bianco); }
.ap-bottone-nero { background: var(--nero); color: var(--bianco); }
.ap-bottone-nero:hover { background: var(--rosso); color: var(--bianco); }
.ap-modulo { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.ap-modulo textarea { width: 100%; padding: 12px 14px; border: var(--linea); border-radius: 0; background: var(--carta); font-family: var(--testo); font-size: 16px; text-transform: none; box-sizing: border-box; }
.ap-obbligatorio { color: var(--rosso); }
.ap-facoltativo { text-transform: none; color: var(--grigio); }
.ap-spunte-vende { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.ap-spunte-vende legend { padding: 0 0 6px; }
.ap-spunte-vende label { display: flex; gap: 8px; align-items: center; min-height: 36px; font-size: 14px; text-transform: none; }
.ap-spunte-vende input, .ap-autorizzo input { width: 20px; height: 20px; accent-color: var(--nero); }
.ap-autorizzo { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 2px solid var(--rosso); background: var(--carta); font-size: 13px; }
.ap-autorizzo input { flex: none; margin-top: 2px; }
.ap-nota-campo { margin: -8px 0 0; font-size: 12px; color: var(--grigio); }
.ap-ricevete { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--nero); color: var(--bianco); font-size: 14px; max-width: 560px; }
.ap-ricevete strong { font-size: 12px; text-transform: uppercase; }
.ap-grazie { margin: 0; font-family: var(--titolo); font-weight: 400; font-size: 40px; text-transform: uppercase; }