/* =============================================================================
   LE PAGINE ISTITUZIONALI — 30/08/2026

   Un foglio solo per le dodici pagine rimaste col codice del 12/08: brands,
   merchants, chi-siamo, come-funziona, contatti, faq, per-i-negozi, privacy,
   termini, cookie, blog e scheda articolo.

   PERCHE' UNO SOLO. Ognuna di quelle pagine aveva il suo <style> in mezzo
   all'HTML, e dentro un :root con i propri colori: #6366f1 su brands, #4361ee
   su merchants, #600CD1 su contatti, #5E0AD3 sui cookie, #650ECE (l'unico
   giusto) sulle altre quattro. Cinque viola diversi sullo stesso sito, piu' un
   blu. Piu' font: -apple-system su brands, Poppins/Inter altrove, mentre il
   sito nuovo scrive in Manrope. Non era un problema di gusto: chi arriva da
   una categoria e clicca su "Chi siamo" cambia sito senza accorgersene.

   COME E' SCRITTO. Tutto sta sotto .pdp-pagina, che ogni pagina si mette
   addosso al corpo. Fuori da quel contenitore questo foglio non esiste, e le
   regole non possono arrivare ne' alla testata ne' al piede — che sono gia'
   quelli nuovi e non si toccano. Il prefisso e' pdp- come pdc- di
   categorie.php: header.php carica menu.css, product.css e searchresults.css
   su OGNI pagina, e un nome generico si scontra (e' gia' successo con .pd-box).
   Ma i nomi che stanno DENTRO le pagine (.mission-card, .faq-item, .container)
   restano quelli che sono: sono innocui perche' vivono sotto .pdp-pagina, e
   riscriverli avrebbe voluto dire rifare dodici file di markup invece che il
   loro aspetto.

   Il foglio si carica con $header['css'] = array('html/pd-pagina.css'), quindi
   arriva solo dove serve: le pagine di catalogo non lo scaricano.
   ============================================================================= */

.pdp-pagina{
  /* gli stessi valori di menu.css e categorie.php, nomi compresi */
  --pdp-viola:#650ECE;
  --pdp-viola-d:#4C0BA0;
  --pdp-tinta:#F3EDFE;
  --pdp-lime:#B8FF3C;
  --pdp-inchiostro:#16141C;
  --pdp-inchiostro2:#464154;
  --pdp-fumo:#7B7589;
  --pdp-filo:#E7E4EE;
  --pdp-fondo:#FBFAFC;
  --pdp-raggio:14px;
  --pdp-raggio-s:10px;

  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--pdp-inchiostro);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Il box-sizing si dichiara qui e non con un `*` globale: su brands.php c'era
   un `* { margin:0; padding:0 }` in fondo al blocco di stile, cioe' un reset
   iniettato a meta' pagina che colpiva anche testata e piede. */
.pdp-pagina, .pdp-pagina *, .pdp-pagina *::before, .pdp-pagina *::after{ box-sizing:border-box }

.pdp-pagina img{max-width:100%;height:auto}
.pdp-pagina a{color:var(--pdp-viola-d);text-decoration:none}
.pdp-pagina a:hover{text-decoration:underline}

.pdp-pagina h1,.pdp-pagina h2,.pdp-pagina h3,.pdp-pagina h4{
  font-family:inherit;color:var(--pdp-inchiostro);
  letter-spacing:-.02em;line-height:1.15;margin:0 0 12px;text-wrap:balance;
}
.pdp-pagina h1{font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:800}
.pdp-pagina h2{font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:800}
.pdp-pagina h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.pdp-pagina h4{font-size:1rem;font-weight:700}
.pdp-pagina p{margin:0 0 14px;color:var(--pdp-inchiostro2)}
.pdp-pagina p:last-child{margin-bottom:0}
.pdp-pagina b,.pdp-pagina strong{font-weight:700;color:var(--pdp-inchiostro)}

/* -----------------------------------------------------------------------------
   IL CONTENITORE
   1240 come categorie.php e come la testata. Le pagine vecchie stavano a 1000
   e a 1100: dentro una testata larga 1200 sembravano un foglio dentro un altro.
   -------------------------------------------------------------------------- */
.pdp-pagina .container{
  max-width:1240px;margin:0 auto;padding:0 16px;width:100%;
}
.pdp-stretto .container,.pdp-pagina .container.pdp-stretto{max-width:840px}

/* -----------------------------------------------------------------------------
   LA TESTATA DI PAGINA
   H1 a sinistra col filo sotto, come /category/lavatrici/. Le pagine vecchie
   avevano un blocco viola pieno con l'h1 centrato in mezzo: un secondo cappello
   sotto quello vero, e su telefono mangiava mezza schermata prima del testo.
   -------------------------------------------------------------------------- */
.pdp-pagina .about-header,
.pdp-pagina .how-it-works-header,
.pdp-pagina .faq-header,
.pdp-pagina .stores-header,
.pdp-pagina .page-header,
.pdp-pagina .header-content,
.pdp-pagina .blog-header-section,
.pdp-pagina .pdp-testata{
  background:none;color:inherit;text-align:left;
  padding:40px 0 26px;margin:0 0 30px;
  border-bottom:1px solid var(--pdp-filo);
}
.pdp-pagina .about-header h1,
.pdp-pagina .how-it-works-header h1,
.pdp-pagina .faq-header h1,
.pdp-pagina .stores-header h1,
.pdp-pagina .page-header h1,
.pdp-pagina .header-content h1,
.pdp-pagina .blog-header-section h1,
.pdp-pagina .pdp-testata h1{margin:0 0 10px;color:var(--pdp-inchiostro)}

.pdp-pagina .about-header p,
.pdp-pagina .how-it-works-header p,
.pdp-pagina .faq-header p,
.pdp-pagina .stores-header p,
.pdp-pagina .page-header p,
.pdp-pagina .header-content p,
.pdp-pagina .blog-header-section p,
.pdp-pagina .pdp-testata p{
  margin:0;color:var(--pdp-fumo);font-size:1.02rem;max-width:68ch;
}

/* il numero accanto al titolo, come "1.315 modelli a confronto" sulle categorie */
.pdp-conta{
  display:inline-block;margin-left:10px;vertical-align:middle;
  color:var(--pdp-viola);background:var(--pdp-tinta);
  padding:4px 12px;border-radius:999px;
  font-size:.9rem;font-weight:700;letter-spacing:0;
  font-variant-numeric:tabular-nums;
}

/* -----------------------------------------------------------------------------
   LE SEZIONI
   Fondo bianco per default. Le pagine vecchie alternavano bianco/grigio/viola a
   fasce piene per tutta la larghezza: qui la separazione la fa il filo, che
   costa meno e non spezza la pagina in blocchi che sembrano siti diversi.
   -------------------------------------------------------------------------- */
.pdp-pagina .mission-section,
.pdp-pagina .values-section,
.pdp-pagina .features-section,
.pdp-pagina .benefits-section,
.pdp-pagina .steps-section,
.pdp-pagina .process-section,
.pdp-pagina .features-list-section,
.pdp-pagina .faq-section,
.pdp-pagina .stats-section,
.pdp-pagina .screenshot-section,
.pdp-pagina .contact-info-section,
.pdp-pagina .contact-form-section,
.pdp-pagina .pdp-sezione{
  background:none;padding:34px 0;
}
.pdp-pagina .pdp-sezione + .pdp-sezione,
.pdp-pagina .values-section,
.pdp-pagina .benefits-section,
.pdp-pagina .faq-section,
.pdp-pagina .process-section{border-top:1px solid var(--pdp-filo)}

/* La testata di pagina chiude gia' con un filo. La prima sezione che la segue
   non deve aprirne un altro: due righe a venti pixel di distanza si leggono
   come un errore di impaginazione, e si vedono su /faq/ e /per-i-negozi/. */
.pdp-pagina .about-header + section,
.pdp-pagina .how-it-works-header + section,
.pdp-pagina .faq-header + section,
.pdp-pagina .stores-header + section,
.pdp-pagina .page-header + section,
.pdp-pagina .pdp-testata + section{border-top:0;padding-top:6px}

/* Nel testo lungo le sezioni sono <section>: senza spazio fra una e l'altra il
   titolo del capitolo successivo si appiccica all'ultimo paragrafo. */
.pdp-testo section + section{margin-top:24px}

.pdp-pagina .section-title{margin:0 0 24px;text-align:left;max-width:68ch}
.pdp-pagina .section-title h2{margin:0 0 8px}
.pdp-pagina .section-title p{margin:0;color:var(--pdp-fumo)}
.pdp-pagina .section-icon{color:var(--pdp-viola);margin-right:8px}

/* -----------------------------------------------------------------------------
   LE SCHEDE
   Un solo disegno per tutte: bianco, raggio 14, filo sottile, e l'ombra solo
   quando ci passi sopra. Prima ognuna aveva la sua — ombra 20px sempre accesa
   su merchants, gradiente in trasparenza su brands, translateY(-10px) su
   chi-siamo — e nella stessa pagina le card si muovevano in modi diversi.
   -------------------------------------------------------------------------- */
.pdp-pagina .mission-card,
.pdp-pagina .value-card,
.pdp-pagina .feature-card,
.pdp-pagina .benefit-card,
.pdp-pagina .info-card,
.pdp-pagina .merchant-card,
.pdp-pagina .modern-blog-card,
.pdp-pagina .feature-item,
.pdp-pagina .sidebar-widget,
.pdp-pagina .blog-author-card,
.pdp-pagina .pdp-scheda{
  background:#fff;border:1px solid var(--pdp-filo);border-radius:var(--pdp-raggio);
  padding:20px;box-shadow:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.pdp-pagina .mission-card:hover,
.pdp-pagina .value-card:hover,
.pdp-pagina .feature-card:hover,
.pdp-pagina .benefit-card:hover,
.pdp-pagina .merchant-card:hover,
.pdp-pagina .modern-blog-card:hover,
.pdp-pagina .pdp-scheda:hover{
  border-color:#D6CDE9;box-shadow:0 3px 14px rgba(22,20,28,.06);transform:none;
}
.pdp-pagina .mission-card h3,
.pdp-pagina .value-card h3,
.pdp-pagina .feature-card h3,
.pdp-pagina .benefit-card h3,
.pdp-pagina .info-card h3{margin:0 0 8px}
.pdp-pagina .mission-card p,
.pdp-pagina .value-card p,
.pdp-pagina .feature-card p,
.pdp-pagina .benefit-card p{margin:0;color:var(--pdp-inchiostro2);font-size:.96rem}

/* Il simbolo della scheda: quadrato con la tinta viola, non un cerchio pieno
   con dentro un'icona bianca da 60 px. */
.pdp-pagina .mission-icon,
.pdp-pagina .value-icon,
.pdp-pagina .feature-icon,
.pdp-pagina .benefit-icon,
.pdp-pagina .card-icon,
.pdp-pagina .feature-icon-circle,
.pdp-pagina .step-icon,
.pdp-pagina .pdp-simbolo{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;margin:0 0 14px;
  background:var(--pdp-tinta);color:var(--pdp-viola);
  border-radius:var(--pdp-raggio-s);font-size:1.05rem;
}

/* le griglie: una sola regola, la colonna minima cambia col contenuto */
.pdp-pagina .mission-grid,
.pdp-pagina .values-grid,
.pdp-pagina .features-grid,
.pdp-pagina .benefits-grid,
.pdp-pagina .features-list,
.pdp-pagina .pdp-griglia{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;
}
.pdp-pagina .merchant-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
}

/* la scheda a due colonne (simbolo a sinistra, testo a destra) */
.pdp-pagina .value-card,
.pdp-pagina .feature-item{display:flex;gap:14px;align-items:flex-start}
.pdp-pagina .value-card .value-icon,
.pdp-pagina .feature-item .feature-icon-circle{margin:0}
.pdp-pagina .value-content h3{margin:0 0 6px}
.pdp-pagina .value-content p{margin:0}

/* -----------------------------------------------------------------------------
   I NUMERI
   Non hanno piu' un fondo viola pieno: sono quattro celle in fila con la cifra
   grande. La cifra la scrive il PHP dal database, vedi html/pd-numeri.php.
   -------------------------------------------------------------------------- */
.pdp-pagina .stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
}
.pdp-pagina .stat-item{
  background:var(--pdp-fondo);border:1px solid var(--pdp-filo);
  border-radius:var(--pdp-raggio);padding:18px 16px;text-align:left;
}
.pdp-pagina .stat-item h3{
  font-size:1.85rem;font-weight:800;color:var(--pdp-viola);
  margin:0 0 4px;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.pdp-pagina .stat-item p{margin:0;color:var(--pdp-fumo);font-size:.9rem;font-weight:600}

/* -----------------------------------------------------------------------------
   I PASSI
   -------------------------------------------------------------------------- */
.pdp-pagina .steps-container,
.pdp-pagina .process-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
}
.pdp-pagina .step,
.pdp-pagina .process-step{
  background:#fff;border:1px solid var(--pdp-filo);border-radius:var(--pdp-raggio);
  padding:20px;position:relative;
}
.pdp-pagina .step-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin:0 0 12px;
  background:var(--pdp-viola);color:#fff;border-radius:8px;
  font-weight:800;font-size:.95rem;position:static;
}
.pdp-pagina .step-content h3{margin:0 0 6px}
.pdp-pagina .step-content p{margin:0}

/* -----------------------------------------------------------------------------
   LE DOMANDE
   <details>/<summary> dove si puo'; dove il markup e' rimasto a div + JS, le
   classi sotto lo vestono uguale.
   -------------------------------------------------------------------------- */
.pdp-pagina .faq-container{max-width:840px}
.pdp-pagina .faq-item{
  border:1px solid var(--pdp-filo);border-radius:var(--pdp-raggio);
  background:#fff;margin:0 0 10px;overflow:hidden;box-shadow:none;
}
.pdp-pagina .faq-item[open]{border-color:#D6CDE9}
.pdp-pagina .faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;margin:0;cursor:pointer;list-style:none;
  font-weight:700;font-size:1rem;color:var(--pdp-inchiostro);background:#fff;
}
.pdp-pagina .faq-question::-webkit-details-marker{display:none}
.pdp-pagina .faq-question:hover{background:var(--pdp-fondo)}
.pdp-pagina .faq-toggle{
  flex:0 0 auto;color:var(--pdp-viola);font-size:.9rem;transition:transform .15s ease;
}
.pdp-pagina .faq-item[open] .faq-toggle,
.pdp-pagina .faq-item.active .faq-toggle{transform:rotate(180deg)}
.pdp-pagina .faq-answer{
  padding:0 18px 16px;color:var(--pdp-inchiostro2);font-size:.97rem;
}
.pdp-pagina .faq-answer p{margin:0 0 10px}
.pdp-pagina .faq-answer p:last-child{margin:0}

/* -----------------------------------------------------------------------------
   I PULSANTI
   Uno pieno viola, uno vuoto col filo. Non ci sono gradienti e non c'e' l'ombra
   colorata: sotto i 400 px l'ombra arancione del pulsante vecchio sbordava.
   -------------------------------------------------------------------------- */
.pdp-pagina .cta-button,
.pdp-pagina .btn-primary,
.pdp-pagina .home-button,
.pdp-pagina .pdp-bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--pdp-raggio-s);
  background:var(--pdp-viola);color:#fff;border:1px solid var(--pdp-viola);
  font-weight:700;font-size:.97rem;text-decoration:none;cursor:pointer;
  transition:background .15s ease;box-shadow:none;
}
.pdp-pagina .cta-button:hover,
.pdp-pagina .btn-primary:hover,
.pdp-pagina .home-button:hover,
.pdp-pagina .pdp-bottone:hover{
  background:var(--pdp-viola-d);border-color:var(--pdp-viola-d);
  color:#fff;text-decoration:none;transform:none;
}
.pdp-pagina .btn-secondary,
.pdp-pagina .pdp-bottone-vuoto,
.pdp-pagina .back-to-blog{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--pdp-raggio-s);
  background:#fff;color:var(--pdp-viola-d);border:1px solid var(--pdp-filo);
  font-weight:700;font-size:.97rem;text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.pdp-pagina .btn-secondary:hover,
.pdp-pagina .pdp-bottone-vuoto:hover,
.pdp-pagina .back-to-blog:hover{
  background:var(--pdp-tinta);border-color:#D6CDE9;text-decoration:none;
}
.pdp-pagina .cta-buttons{display:flex;flex-wrap:wrap;gap:12px}

/* la fascia in fondo: un riquadro, non una banda a tutta larghezza */
.pdp-pagina .cta-section,
.pdp-pagina .final-cta,
.pdp-pagina .contact-cta,
.pdp-pagina .pdp-invito{
  background:var(--pdp-tinta);color:var(--pdp-inchiostro);
  border:1px solid #E0D5F5;border-radius:var(--pdp-raggio);
  padding:28px 24px;margin:34px 0 44px;text-align:left;
}
.pdp-pagina .cta-section h2,
.pdp-pagina .final-cta h2,
.pdp-pagina .contact-cta h2{color:var(--pdp-inchiostro);margin:0 0 8px}
.pdp-pagina .cta-section p,
.pdp-pagina .final-cta p,
.pdp-pagina .contact-cta p{color:var(--pdp-inchiostro2);margin:0 0 16px;max-width:70ch}
/* Il .container dentro la fascia non deve rimettere il proprio bordo interno. */
.pdp-pagina .cta-section .container,
.pdp-pagina .final-cta .container,
.pdp-pagina .contact-cta .container{padding:0;max-width:none}

/* -----------------------------------------------------------------------------
   IL TESTO LUNGO: privacy, termini, cookie
   Una colonna sola, 72 caratteri di riga. Prima erano a tutta larghezza dentro
   un contenitore da 1000 px: 130 caratteri per riga, che nessuno legge.
   -------------------------------------------------------------------------- */
.pdp-testo{max-width:74ch}
.pdp-testo h2{margin:34px 0 12px;padding-top:0}
.pdp-testo h2:first-child{margin-top:0}
.pdp-testo h3{margin:22px 0 8px}
.pdp-testo p,.pdp-testo li{color:var(--pdp-inchiostro2);font-size:1rem}
.pdp-testo ul,.pdp-testo ol{margin:0 0 16px;padding-left:22px}
.pdp-testo li{margin:0 0 7px}
.pdp-testo table{
  width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.94rem;
  display:block;overflow-x:auto;
}
.pdp-testo th,.pdp-testo td{
  border:1px solid var(--pdp-filo);padding:9px 11px;text-align:left;vertical-align:top;
}
.pdp-testo th{background:var(--pdp-fondo);font-weight:700;color:var(--pdp-inchiostro)}

.pdp-pagina .notice,
.pdp-pagina .highlight,
.pdp-pagina .contact-info,
.pdp-pagina .cookie-settings,
.pdp-pagina .last-update{
  background:var(--pdp-fondo);border:1px solid var(--pdp-filo);
  border-left:3px solid var(--pdp-viola);
  border-radius:var(--pdp-raggio-s);
  padding:14px 16px;margin:0 0 20px;font-size:.96rem;color:var(--pdp-inchiostro2);
}
.pdp-pagina .last-update{border-left-color:var(--pdp-filo);color:var(--pdp-fumo);font-size:.9rem}
.pdp-pagina .notice p:last-child,
.pdp-pagina .contact-info p:last-child{margin:0}
.pdp-pagina .opt-out-link{color:var(--pdp-viola-d);font-weight:600}

/* -----------------------------------------------------------------------------
   IL MODULO (contatti)
   -------------------------------------------------------------------------- */
.pdp-pagina .contact-wrapper{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start;
}
.pdp-pagina .form-group{margin:0 0 16px}
.pdp-pagina .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pdp-pagina label{
  display:block;margin:0 0 6px;font-weight:700;font-size:.9rem;color:var(--pdp-inchiostro);
}
.pdp-pagina input[type=text],
.pdp-pagina input[type=email],
.pdp-pagina input[type=tel],
.pdp-pagina select,
.pdp-pagina textarea{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--pdp-filo);border-radius:var(--pdp-raggio-s);
  font:inherit;font-size:.96rem;color:var(--pdp-inchiostro);background:#fff;
  box-shadow:none;height:auto;margin:0;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.pdp-pagina textarea{min-height:150px;resize:vertical}
/* Foundation azzera l'aspetto nativo del <select>, freccia compresa: senza
   questa il menu a tendina si legge come un campo di testo e nessuno ci clicca.
   La freccia e' un SVG inline in data URI — niente richiesta in piu' e niente
   dipendenza da Font Awesome per un elemento di modulo. */
.pdp-pagina select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237B7589' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.pdp-pagina input:focus,.pdp-pagina select:focus,.pdp-pagina textarea:focus{
  outline:none;border-color:var(--pdp-viola);box-shadow:0 0 0 3px rgba(101,14,206,.12);
}
.pdp-pagina .message{
  border-radius:var(--pdp-raggio-s);padding:13px 15px;margin:0 0 18px;font-size:.96rem;
  border:1px solid var(--pdp-filo);background:var(--pdp-fondo);
}
.pdp-pagina .message.success{border-color:#BEE7C8;background:#F2FBF4;color:#1B6B33}
.pdp-pagina .message.error{border-color:#F3C7C7;background:#FDF4F4;color:#9B2C2C}

/* -----------------------------------------------------------------------------
   I NEGOZI (merchants.php)
   -------------------------------------------------------------------------- */
.pdp-pagina .merchant-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.pdp-pagina .merchant-card .card-header{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px 0;background:none;border:0;color:inherit;
}
.pdp-pagina .merchant-logo{
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--pdp-raggio-s);
  background:var(--pdp-tinta);color:var(--pdp-viola);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;overflow:hidden;
}
.pdp-pagina .merchant-logo img{width:100%;height:100%;object-fit:contain}
/* Il nome del negozio e' un h2 perche' e' il titolo della scheda, ma non deve
   avere il corpo di un h2 di sezione: qui vale la misura della card. */
.pdp-pagina .merchant-card .card-header h2{
  font-size:1.05rem;font-weight:800;letter-spacing:-.01em;margin:0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pdp-pagina .merchant-card .card-body{padding:12px 18px 0;flex:1 1 auto}
.pdp-pagina .merchant-conta{margin:0 0 10px}
.pdp-pagina .merchant-card .card-footer{
  padding:14px 18px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:0;
}
/* La descrizione si taglia a quattro righe. Le schede stanno su una griglia e
   una griglia allinea le righe all'elemento piu' alto: senza il taglio, una
   descrizione di dodici righe lasciava il vuoto sotto le altre tre schede
   della fila — Alternate, che non ha descrizione, era una scheda alta 600 px
   con dentro due parole. */
.pdp-pagina .merchant-desc{
  color:var(--pdp-inchiostro2);font-size:.94rem;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
}
.pdp-pagina .merchant-desc p{margin:0}
.pdp-pagina .merchant-page-desc{color:var(--pdp-inchiostro2);font-size:.94rem;margin:0 0 10px}
/* I recapiti si appoggiano in fondo al corpo, cosi' il pulsante di tutte le
   schede della fila resta sulla stessa linea. */
.pdp-pagina .merchant-card .card-body{display:flex;flex-direction:column}
.pdp-pagina .merchant-card .merchant-details{margin-top:auto;padding-top:2px}
.pdp-pagina .merchant-details{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0}
.pdp-pagina .detail-item{color:var(--pdp-fumo);font-size:.88rem;font-weight:600}
.pdp-pagina .product-count{
  color:var(--pdp-viola);background:var(--pdp-tinta);
  padding:3px 10px;border-radius:999px;font-size:.85rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pdp-pagina .star-rating{display:inline-flex;align-items:center;gap:2px;color:#F5A524}
.pdp-pagina .star{color:#F5A524}
.pdp-pagina .star.disabled,.pdp-pagina .half-star-bg{color:var(--pdp-filo)}
.pdp-pagina .half-star-container{position:relative;display:inline-flex;line-height:0}
/* La mezza stella si TAGLIA, non si stringe: con width:50% l'SVG si schiaccia
   e viene fuori una stella magra, non una meta' stella. */
.pdp-pagina .half-star{position:absolute;left:0;top:0;color:#F5A524;clip-path:inset(0 50% 0 0)}
.pdp-pagina .view-btn,.pdp-pagina .edit-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--pdp-raggio-s);
  background:var(--pdp-viola);color:#fff;border:1px solid var(--pdp-viola);
  font-weight:700;font-size:.88rem;text-decoration:none;
}
.pdp-pagina .view-btn:hover,.pdp-pagina .edit-btn:hover{
  background:var(--pdp-viola-d);border-color:var(--pdp-viola-d);color:#fff;text-decoration:none;
}

/* -----------------------------------------------------------------------------
   L'ALFABETO (brands.php e merchants.php)
   -------------------------------------------------------------------------- */
.pdp-alfabeto{margin:0 0 30px}
.pdp-alfabeto ul,.pdp-pagina .alphabet-nav ul{
  display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;list-style:none;
}
.pdp-alfabeto a,.pdp-alfabeto span,
.pdp-pagina .alphabet-nav a,.pdp-pagina .alphabet-nav span{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;
  border:1px solid var(--pdp-filo);background:#fff;
  color:var(--pdp-inchiostro2);font-weight:700;font-size:.9rem;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.pdp-alfabeto a:hover,.pdp-pagina .alphabet-nav a:hover{
  background:var(--pdp-viola);border-color:var(--pdp-viola);color:#fff;
  text-decoration:none;transform:none;
}
.pdp-alfabeto .pdp-spenta,
.pdp-pagina .alphabet-nav .disabled{
  color:#C9C4D4;background:var(--pdp-fondo);cursor:default;
}

/* la lettera e il suo gruppo */
.pdp-lettera{margin:0 0 28px;scroll-margin-top:120px}
.pdp-lettera h2{
  font-size:1.15rem;font-weight:800;margin:0 0 12px;padding:0 0 8px;
  border-bottom:1px solid var(--pdp-filo);color:var(--pdp-viola);
}
.pdp-elenco{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.pdp-elenco a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;
  background:#fff;border:1px solid var(--pdp-filo);border-radius:var(--pdp-raggio-s);
  color:var(--pdp-inchiostro);font-weight:600;font-size:.95rem;text-decoration:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.pdp-elenco a:hover{
  border-color:#D6CDE9;background:var(--pdp-tinta);color:var(--pdp-viola-d);text-decoration:none;
}
/* Il nome si accorcia, il numero no: e' la cifra che si sta cercando, e un
   conteggio troncato a meta' non serve a niente. */
.pdp-elenco-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pdp-elenco-conta{
  flex:0 0 auto;color:var(--pdp-fumo);font-size:.82rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pdp-elenco a:hover .pdp-elenco-conta{color:var(--pdp-viola)}
.pdp-vuoto{padding:48px 0;color:var(--pdp-fumo);text-align:center}
.pdp-nota{margin:6px 0 0;color:var(--pdp-fumo);font-size:.88rem;max-width:78ch}

/* -----------------------------------------------------------------------------
   IL BLOG
   Le griglie di blog.php e blog_post.php stanno su Foundation (.row/.columns):
   quelle non si toccano, qui si vestono solo le schede e il testo.
   -------------------------------------------------------------------------- */
.pdp-pagina .category-filter-container{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.pdp-pagina .blog-category-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--pdp-filo);background:#fff;color:var(--pdp-inchiostro2);
  font-weight:700;font-size:.9rem;text-decoration:none;
}
.pdp-pagina .blog-category-pill:hover{background:var(--pdp-tinta);border-color:#D6CDE9;text-decoration:none}
.pdp-pagina .blog-category-pill.active{
  background:var(--pdp-viola);border-color:var(--pdp-viola);color:#fff;
}
.pdp-pagina .pill-count{opacity:.7;font-weight:600;font-variant-numeric:tabular-nums}

/* E' una <ul>: la griglia va sulla lista, e i pallini vanno tolti. */
.pdp-pagina .blog-modern-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;
  margin:0 0 34px;padding:0;list-style:none;
}
.pdp-pagina .blog-modern-grid > li{margin:0;display:flex}
.pdp-pagina .blog-modern-grid > li > .modern-blog-card{width:100%}
.pdp-pagina .modern-blog-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pdp-pagina .card-image-wrapper{
  display:block;aspect-ratio:16/9;background:var(--pdp-fondo);overflow:hidden;
}
.pdp-pagina .card-image-wrapper img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-pagina .placeholder-image{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--pdp-filo);font-size:1.6rem;background:var(--pdp-fondo);
}
.pdp-pagina .card-content{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1 1 auto}
.pdp-pagina .card-category{
  display:inline-block;margin:0 0 9px;
  color:var(--pdp-viola);background:var(--pdp-tinta);
  padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
}
.pdp-pagina .card-title{font-size:1.06rem;font-weight:800;margin:0 0 8px;line-height:1.28}
.pdp-pagina .card-title a{color:var(--pdp-inchiostro);text-decoration:none}
.pdp-pagina .card-title a:hover{color:var(--pdp-viola-d)}
.pdp-pagina .card-excerpt{color:var(--pdp-inchiostro2);font-size:.94rem;margin:0 0 14px;flex:1 1 auto}
.pdp-pagina .card-footer,.pdp-pagina .card-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--pdp-fumo);font-size:.86rem;font-weight:600;
}
.pdp-pagina .card-date{color:var(--pdp-fumo);font-size:.86rem;font-weight:600}
.pdp-pagina .read-more-link{color:var(--pdp-viola-d);font-weight:700;text-decoration:none}
.pdp-pagina .read-more-link:hover{text-decoration:underline}
.pdp-pagina .featured-section-title{
  font-size:1.2rem;font-weight:800;margin:0 0 16px;padding:0 0 10px;
  border-bottom:1px solid var(--pdp-filo);
}

/* la scheda articolo */
.pdp-pagina .article-header{margin:0 0 24px;padding:36px 0 0}
.pdp-pagina .article-title{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;margin:12px 0 12px}
.pdp-pagina .article-meta-top,.pdp-pagina .article-categories{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--pdp-fumo);font-size:.9rem;
}
.pdp-pagina .article-category-tag{
  color:var(--pdp-viola);background:var(--pdp-tinta);
  padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:700;text-decoration:none;
}
.pdp-pagina .article-date{color:var(--pdp-fumo);font-weight:600}
.pdp-pagina .article-featured-image{
  border-radius:var(--pdp-raggio);overflow:hidden;margin:0 0 26px;background:var(--pdp-fondo);
}
.pdp-pagina .article-featured-image img{width:100%;height:auto;display:block}
.pdp-pagina .blog-content,.pdp-pagina .modern-content{max-width:74ch;font-size:1.03rem}
.pdp-pagina .blog-content h2{margin:32px 0 12px}
.pdp-pagina .blog-content h3{margin:24px 0 8px}
.pdp-pagina .blog-content p{margin:0 0 16px;color:var(--pdp-inchiostro2)}
.pdp-pagina .blog-content img{border-radius:var(--pdp-raggio);margin:6px 0 18px}
.pdp-pagina .blog-content ul,.pdp-pagina .blog-content ol{margin:0 0 16px;padding-left:22px}
.pdp-pagina .blog-content li{margin:0 0 7px;color:var(--pdp-inchiostro2)}
.pdp-pagina .blog-content blockquote{
  margin:0 0 18px;padding:2px 0 2px 16px;border-left:3px solid var(--pdp-viola);
  color:var(--pdp-inchiostro2);font-style:normal;
}

.pdp-pagina .article-footer-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--pdp-filo);
}
.pdp-pagina .share-article{display:flex;align-items:center;gap:8px}
.pdp-pagina .share-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;
  border:1px solid var(--pdp-filo);background:#fff;color:var(--pdp-inchiostro2);
  text-decoration:none;
}
.pdp-pagina .share-btn:hover{background:var(--pdp-tinta);border-color:#D6CDE9;color:var(--pdp-viola-d)}

.pdp-pagina .blog-sidebar{position:sticky;top:96px}
.pdp-pagina .sidebar-widget{margin:0 0 16px}
.pdp-pagina .widget-title{
  font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--pdp-fumo);margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid var(--pdp-filo);
}
.pdp-pagina .recent-posts-list{list-style:none;margin:0;padding:0}
.pdp-pagina .recent-post-item{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--pdp-filo)}
.pdp-pagina .recent-post-item:first-child{border-top:0;padding-top:0}
.pdp-pagina .recent-thumb{
  width:60px;height:46px;flex:0 0 60px;border-radius:8px;overflow:hidden;background:var(--pdp-fondo);
}
.pdp-pagina .recent-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-pagina .recent-title{font-size:.92rem;font-weight:700;line-height:1.32;margin:0 0 3px}
.pdp-pagina .recent-title a{color:var(--pdp-inchiostro);text-decoration:none}
.pdp-pagina .recent-title a:hover{color:var(--pdp-viola-d)}
.pdp-pagina .recent-date{color:var(--pdp-fumo);font-size:.8rem;font-weight:600}

.pdp-pagina .blog-author-card{display:flex;gap:14px;align-items:flex-start;margin:26px 0 0}
.pdp-pagina .author-logo-wrapper{
  width:52px;height:52px;flex:0 0 52px;border-radius:var(--pdp-raggio-s);
  overflow:hidden;background:var(--pdp-tinta);
}
.pdp-pagina .author-logo-wrapper img{width:100%;height:100%;object-fit:contain}
.pdp-pagina .author-name{font-size:1rem;font-weight:800;margin:0 0 4px}
.pdp-pagina .author-description{color:var(--pdp-inchiostro2);font-size:.93rem;margin:0 0 8px}
.pdp-pagina .author-socials-links{display:flex;gap:8px}
.pdp-pagina .author-social-icon{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;border:1px solid var(--pdp-filo);color:var(--pdp-inchiostro2);
}
.pdp-pagina .promo-widget{
  background:var(--pdp-tinta);border:1px solid #E0D5F5;border-radius:var(--pdp-raggio);padding:18px;
}

/* -----------------------------------------------------------------------------
   TELEFONO
   Il sito si guarda a 390 px: le due colonne diventano una, la fascia dei
   numeri va a due celle, e i pulsanti prendono tutta la riga.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .pdp-pagina .contact-wrapper{grid-template-columns:1fr}
  .pdp-pagina .blog-sidebar{position:static;margin-top:26px}
}
@media (max-width:640px){
  .pdp-pagina .container{padding:0 14px}
  .pdp-pagina .about-header,
  .pdp-pagina .how-it-works-header,
  .pdp-pagina .faq-header,
  .pdp-pagina .stores-header,
  .pdp-pagina .page-header,
  .pdp-pagina .header-content,
  .pdp-pagina .blog-header-section,
  .pdp-pagina .pdp-testata{padding:26px 0 20px;margin-bottom:22px}
  .pdp-pagina .mission-section,
  .pdp-pagina .values-section,
  .pdp-pagina .features-section,
  .pdp-pagina .benefits-section,
  .pdp-pagina .steps-section,
  .pdp-pagina .process-section,
  .pdp-pagina .features-list-section,
  .pdp-pagina .faq-section,
  .pdp-pagina .stats-section,
  .pdp-pagina .screenshot-section,
  .pdp-pagina .contact-info-section,
  .pdp-pagina .contact-form-section,
  .pdp-pagina .pdp-sezione{padding:24px 0}
  .pdp-pagina .stats-grid{grid-template-columns:1fr 1fr}
  .pdp-pagina .stat-item h3{font-size:1.5rem}
  .pdp-pagina .form-row{grid-template-columns:1fr}
  .pdp-pagina .cta-buttons{flex-direction:column;align-items:stretch}
  .pdp-pagina .cta-button,
  .pdp-pagina .btn-primary,
  .pdp-pagina .btn-secondary,
  .pdp-pagina .pdp-bottone{width:100%}
  .pdp-pagina .cta-section,
  .pdp-pagina .final-cta,
  .pdp-pagina .contact-cta{padding:22px 18px;margin:26px 0 34px}
  .pdp-elenco{grid-template-columns:1fr 1fr}
  .pdp-alfabeto ul,.pdp-pagina .alphabet-nav ul{gap:5px}
  .pdp-alfabeto a,.pdp-alfabeto span,
  .pdp-pagina .alphabet-nav a,.pdp-pagina .alphabet-nav span{width:33px;height:33px;font-size:.85rem}
  .pdp-pagina .article-footer-actions{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .pdp-elenco{grid-template-columns:1fr}
}

/* --- i due numeri nuovi della card negozio. 30/08/2026 ---
   Prezzo medio e spedizione media stanno accanto al conteggio prodotti, sulla stessa
   riga di pillole. Sono i due dati per cui un negozio si sceglie davvero e che il
   paragrafo di descrizione non dice: fra Mediaworld a 4,77 e Soloperaffare a 33,08
   di spedizione media c'e' una differenza che sposta un acquisto.
   Chi la spedizione non la dichiara lo dice in grigio invece di sparire: il vuoto
   sarebbe letto come «gratis». */
.pdp-pagina .merchant-conta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.pdp-pagina .merchant-dato{
  color:var(--pdp-fumo);font-size:.82rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pdp-pagina .merchant-dato b{color:var(--pdp-inchiostro2);font-weight:700}
.pdp-pagina .merchant-dato--muto{font-style:italic;font-weight:500;opacity:.75}

/* Il link al sito mostra l'URL pulita e porta a quello tracciato: si legge dove si
   va, e il click vale. Monospazio perche' e' un indirizzo, non una frase. */
.pdp-pagina .merchant-sito{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;color:var(--pdp-viola);text-decoration:none;
  border-bottom:1px solid transparent;
}
.pdp-pagina .merchant-sito:hover{border-bottom-color:currentColor}