/* ===========================================================================
   VAL PELLICE OUTDOOR — COMPONENTI CONDIVISI
   v4.0 | 20 ottobre 2026

   COME USARLO
   1. Caricare UNA VOLTA questo CSS nel sito (tema child / enqueue o CSS aggiuntivo).
   2. Racchiudere il contenuto della singola pagina in:
        <div class="vpo-content vpo-page--percorso"> ... </div>
      Oppure vpo-page--tour / vpo-page--info / vpo-page--prenotazione.
   3. Nei box usare classi, NON style="..." (gli stili inline hanno precedenza).
   4. Per cambiare colori, misure e spaziature partire dalle variabili seguenti.
   5. Non incollare questo foglio CSS nei singoli blocchi HTML WordPress.
   6. Le 26 classi del catalogo sono definite qui; le pagine Tour e
      Prenotazione richiedono markup con queste classi, NON i vecchi style inline.

   COMMENTI GIO 20/10/2026:
   - VPO-09 DATI TOUR: stesso CSS di VPO-03, usare .vpo-stats/.vpo-stat.
   - VPO-13 VARIANTE TOUR: stesso CSS di VPO-04, usare .vpo-note--outlined.

   EXTRA TEMPLATE PERCORSI v3:
   - foto introduttiva / intermedia / prima degli appoggi: .vpo-photo
   - avvertenza o meta breve: .vpo-note--cream
   - foto Envira: gestita dal plugin (nessun override Envira incluso)
   - GPX / AllTrails: .vpo-map-box, classi per i colori effettivi delle tracce
   - sezioni, sottotitoli, box di ristoro, link dopo varianti, CTA, FAQ.


   COLLEGAMENTO CATALOGO (identificativi stabili)
   VPO-01 intro                   VPO-02 navigazione
   VPO-03 dati tecnici (stile anche VPO-09)           VPO-04 avviso/variante (stile anche VPO-13)
   VPO-05 mappa/GPX              VPO-06 escursioni collegate
   VPO-07 ristori                VPO-08 recensioni/segnalazioni
   VPO-26 curiosità accordion    VPO-09 dati tour
   VPO-10 nota tour              VPO-11 prezzi
   VPO-12 programma giornaliero  VPO-13 varianti
   VPO-14 formule di viaggio     VPO-15 servizi
   VPO-16 foto + testo          VPO-17 FAQ
   VPO-18/19 CTA chiare         VPO-20 CTA prenotazione
   VPO-21 riepilogo richiesta    VPO-22 importo
   VPO-23 PayPal                 VPO-24 bonifico
   VPO-25 garanzia rimborso
   =========================================================================== */

.vpo-content {
  /* COLORI — modificare qui per una variazione coordinata */
  --vpo-green: #304137;
  --vpo-green-border: #42584a;
  --vpo-green-muted: #68754a;
  --vpo-orange: #ce5310;
  --vpo-orange-hover: #aa410b;
  --vpo-ink: #333333;
  --vpo-muted: #666666;
  --vpo-line: #d8ddd7;
  --vpo-line-soft: #e5e8e4;
  --vpo-bg-green: #eef1ec;
  --vpo-bg-light: #f6f6f2;
  --vpo-bg-gpx: #f6f9f5;
  --vpo-bg-day: #f5f7f4;
  --vpo-bg-services: #f5f5f1;
  --vpo-bg-card-head: #f5f7f4;
  --vpo-green-track: #62b84b;
  --vpo-violet-track: #aa7de4;
  --vpo-ochre-track: #d9a018;
  --vpo-bg-pale: #f8f8f5;
  --vpo-white: #ffffff;
  --vpo-cyan-track: #64dce0;
  --vpo-indigo-track: #7c75fe;

  /* MISURE — una modifica agisce su più componenti */
  --vpo-radius: 7px;
  --vpo-radius-small: 5px;
  --vpo-gap: 14px;
  --vpo-box-pad: 20px;
  --vpo-button-py: 10px;
  --vpo-button-px: 16px;
  --vpo-caption-size: 12px;
  --vpo-section-anchor-offset: 170px;
  --vpo-heading-font: Montserrat, Arial, sans-serif;
  --vpo-body-font: Roboto, Arial, sans-serif;

  color: var(--vpo-ink);
  font-family: var(--vpo-body-font);
  line-height: 1.5;
}
.vpo-content *, .vpo-content *::before, .vpo-content *::after { box-sizing: border-box; }
.vpo-content :is(p, li) { overflow-wrap: break-word; }
.vpo-content :is(h2, h3, h4) { color: var(--vpo-green); font-family: var(--vpo-heading-font); }
/* I normali link testuali, interni ed esterni, sono arancioni. */
.vpo-content a:not(.vpo-btn):not(.vpo-nav__link):not(.vpo-tour-button) { color: var(--vpo-orange) !important; }
.vpo-content a:not(.vpo-btn):not(.vpo-nav__link):not(.vpo-tour-button):hover { color: var(--vpo-orange-hover) !important; }
.vpo-content a:focus-visible, .vpo-content summary:focus-visible { outline: 2px solid var(--vpo-orange); outline-offset: 3px; }

/* VPO-01 — Introduzione */
.vpo-content .vpo-intro { background: var(--vpo-bg-green); border-left: 4px solid var(--vpo-green-border); border-radius: 0 var(--vpo-radius) var(--vpo-radius) 0; padding: 16px 16px 18px; margin: 0 0 20px; }
.vpo-content .vpo-intro__lead { font-size: 1.18em; line-height: 1.5; text-align: center !important; margin: 0 0 18px; }
.vpo-content .vpo-intro > :last-child { margin-bottom: 0; }

/* VPO-02 — Indice e pulsante di navigazione commerciale */
.vpo-content .vpo-nav { margin: 0 0 28px; padding: 14px 12px; border-top: 1px solid var(--vpo-line); border-bottom: 1px solid var(--vpo-line); }
.vpo-content .vpo-nav__title { text-align: center !important; margin: 0 0 10px; font-weight: 700; }
.vpo-content .vpo-nav__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 9px; }
.vpo-content .vpo-nav__link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 14px; background: var(--vpo-bg-light); border: 1px solid var(--vpo-line); border-radius: 4px; text-decoration: none; line-height: 1.15; color: var(--vpo-orange) !important; }
.vpo-content .vpo-nav__link:hover { border-color: var(--vpo-orange); }
.vpo-content .vpo-nav__link--tour { background: var(--vpo-orange); border-color: var(--vpo-orange); color: var(--vpo-white) !important; font-weight: 600; }
.vpo-content .vpo-nav__link--tour:hover { background: var(--vpo-orange-hover); color: var(--vpo-white) !important; }

/* Titoli delle sezioni, micro-sottotitoli */
.vpo-content .vpo-section-title { text-align: center !important; padding-bottom: 10px; scroll-margin-top: var(--vpo-section-anchor-offset); }
.vpo-content .vpo-section-subtitle { text-align: center !important; }
.vpo-content .vpo-subheading { text-align: center !important; margin: 0 0 5px; }

/* VPO-03, VPO-09 — Dati tecnici Percorso e Tour */
.vpo-content .vpo-stats, .vpo-content .vpo-tour-stats { display: flex; flex-wrap: wrap; gap: 1px; background: var(--vpo-line); border: 1px solid var(--vpo-line); border-radius: 8px; overflow: hidden; margin: 18px 0 14px; }
.vpo-content .vpo-stat, .vpo-content .vpo-tour-stat { flex: 1 1 145px; text-align: center; padding: 11px 8px; background: var(--vpo-white); }
.vpo-content .vpo-stat__value, .vpo-content .vpo-tour-stat > strong { display: block; font-size: 1.05em; color: var(--vpo-green); line-height: 1.2; font-weight: 700; }
.vpo-content .vpo-stat__label, .vpo-content .vpo-tour-stat > span { display: block; font-size: .83em; color: var(--vpo-muted); margin-top: 2px; line-height: 1.25; }

/* VPO-04, VPO-10, VPO-13, VPO-25 — Avvisi, note e varianti */
.vpo-content .vpo-note { padding: var(--vpo-box-pad) 16px 14px; background: var(--vpo-bg-green); border-left: 4px solid var(--vpo-green-border); border-radius: 0 var(--vpo-radius) var(--vpo-radius) 0; margin: 14px 0 20px; }
/* VPO-04 + VPO-13: identici per richiesta dell'autore. */
.vpo-content .vpo-note--outlined { background: var(--vpo-white); border: 1px solid var(--vpo-line); border-radius: 6px; padding: 20px 15px 13px; margin-top: 0; }
.vpo-content .vpo-note--outlined .vpo-note__title { text-decoration: underline; }
/* Box extra del template Percorsi v3, per meta brevi o avvertenze. */
.vpo-content .vpo-note--cream { background: var(--vpo-bg-light); border-left-color: var(--vpo-green-muted); padding: 18px 20px; margin: 20px 0 26px; }
.vpo-content .vpo-note__title { margin: 0 0 8px !important; font-size: 1.12em; line-height: 1.25; color: var(--vpo-green); }
.vpo-content .vpo-note > :last-child { margin-bottom: 0; }
.vpo-content .vpo-note--compact { padding: 16px; margin-top: 0; }
.vpo-content.vpo-page--percorso h3 { text-align: center !important; }

/* VPO-05 — Mappa e GPX */
.vpo-content .vpo-map-box { background: var(--vpo-bg-gpx); border-radius: var(--vpo-radius); padding: 20px 16px 16px; margin: 14px 0 30px; }
.vpo-content .vpo-map-box > .vpo-section-title { margin: 0 0 10px !important; }
.vpo-content .vpo-map-box__intro { text-align: center !important; margin: 0 0 16px; }
.vpo-content .vpo-map-legend { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px 18px; max-width: 620px; margin: 0 auto 18px; }
.vpo-content .vpo-map-legend__item { display: flex; align-items: center; gap: 8px; margin: 0; line-height: 1.4; }
/* Tracce effettive nel template 20/10/2026 (nessun attributo style in HTML). */
.vpo-content .vpo-map-dot { color: var(--vpo-orange); flex: 0 0 auto; }
.vpo-content .vpo-track--verde { color: var(--vpo-green-track); }
.vpo-content .vpo-track--viola { color: var(--vpo-violet-track); }
.vpo-content .vpo-track--ocra { color: var(--vpo-ochre-track); }
.vpo-content .vpo-track--azzurro { color: var(--vpo-cyan-track); }
.vpo-content .vpo-track--indaco { color: var(--vpo-indigo-track); }
.vpo-content .vpo-map-frame { overflow: hidden; border: 1px solid var(--vpo-line); border-radius: var(--vpo-radius); margin-bottom: 14px; }
.vpo-content .vpo-map-frame iframe { display: block; width: 100%; max-width: 100%; }
.vpo-content .vpo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Pulsanti — arancione per azioni, variante chiara con testo arancione */
.vpo-content .vpo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: var(--vpo-button-py) var(--vpo-button-px); background: var(--vpo-orange); color: var(--vpo-white) !important; border: 1px solid var(--vpo-orange); border-radius: var(--vpo-radius-small); text-decoration: none !important; font-family: var(--vpo-heading-font); font-size: .95em; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer; max-width: 100%; }
.vpo-content .vpo-btn:hover { background: var(--vpo-orange-hover); border-color: var(--vpo-orange-hover); color: var(--vpo-white) !important; }
.vpo-content .vpo-btn--outline { background: var(--vpo-white); border-color: var(--vpo-green-muted); color: var(--vpo-orange) !important; }
.vpo-content .vpo-btn--outline:hover { background: var(--vpo-bg-light); border-color: var(--vpo-orange); color: var(--vpo-orange-hover) !important; }
.vpo-content .vpo-btn--block { width: 100%; max-width: 420px; }

/* VPO-06, VPO-07, VPO-08 — Card Percorsi, punti d'appoggio e feedback */
.vpo-content .vpo-cards { display: flex; flex-wrap: wrap; gap: var(--vpo-gap); margin: 22px 0 28px; }
.vpo-content .vpo-card { flex: 1 1 280px; min-width: min(100%, 280px); display: flex; flex-direction: column; border: 1px solid var(--vpo-line); border-radius: var(--vpo-radius); padding: 16px; background: var(--vpo-white); }
.vpo-content .vpo-card--soft { background: var(--vpo-bg-pale); padding: 20px; }
.vpo-content .vpo-card__title { color: var(--vpo-green); margin: 0 0 8px !important; padding: 0; }
/* VPO-07: titolo centrato e NESSUNA riga separata per tipologia / servizi. */
.vpo-content .vpo-card--ristoro .vpo-card__title { text-align: center !important; }
.vpo-content .vpo-cards--ristori .vpo-card { flex: 1 1 calc(50% - 7px); }
.vpo-content .vpo-card__meta { margin: 0 0 12px; padding: 7px 0; border-top: 1px solid var(--vpo-line-soft); border-bottom: 1px solid var(--vpo-line-soft); font-size: .9em; color: #555; }
.vpo-content .vpo-card__body { margin: 0 0 10px; }
.vpo-content .vpo-card__footer { margin: auto 0 0; padding-top: 10px; }
.vpo-content .vpo-card--ristoro .vpo-card__footer { padding-top: 0; }
.vpo-content .vpo-cards--related .vpo-card { flex: 1 1 280px; }
.vpo-content .vpo-cards--feedback .vpo-card { flex-basis: calc(50% - var(--vpo-gap)); }

/* VPO-26 e VPO-17 — Accordion curiosità e FAQ, accessibili senza JS */
.vpo-content .vpo-accordion { margin: 18px 0 32px; }
.vpo-content .vpo-accordion details { background: var(--vpo-white); border: 1px solid var(--vpo-line); border-radius: var(--vpo-radius); margin-bottom: 10px; overflow: hidden; }
.vpo-content .vpo-accordion summary { cursor: pointer; padding: 14px 16px; background: var(--vpo-bg-light); color: var(--vpo-green); font-family: var(--vpo-heading-font); font-size: 1em; line-height: 1.32; font-weight: 600; }
.vpo-content .vpo-accordion details[open] summary { border-bottom: 1px solid var(--vpo-line); }
.vpo-content .vpo-accordion__content { padding: 14px 16px 16px; }
.vpo-content .vpo-accordion__content > :last-child { margin-bottom: 0; }
.vpo-content .vpo-accordion--faq { margin-top: 0; }
.vpo-content .vpo-accordion--faq details { border: 0; border-radius: 0; border-top: 1px solid var(--vpo-line); margin: 0; }
.vpo-content .vpo-accordion--faq details:last-child { border-bottom: 1px solid var(--vpo-line); }
.vpo-content .vpo-accordion--faq summary { background: none; padding: 10px 0; }
.vpo-content .vpo-accordion--faq .vpo-accordion__content { padding: 0 0 10px; }

/* Foto del percorso / foto e testo */
.vpo-content .vpo-photo { margin: 18px 0 26px; }
.vpo-content .vpo-photo img { display: block; width: 100%; height: auto; border-radius: var(--vpo-radius); margin: 0 auto; }
.vpo-content .vpo-photo figcaption { display: block; margin: 8px auto 0; padding: 0; text-align: center !important; background: transparent; border: 0; }
.vpo-content .vpo-photo figcaption p { margin: 0; padding: 0; font-size: var(--vpo-caption-size) !important; line-height: 1.45 !important; font-weight: 400; font-style: normal; color: #5c655e; text-align: center !important; }
.vpo-content .vpo-photo--after { margin: 20px 0 32px; }
.vpo-content .vpo-image-text { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.vpo-content .vpo-image-text > * { flex: 1 1 320px; min-width: min(100%,320px); }
.vpo-content .vpo-image-text img { width: 100%; height: auto; display: block; border-radius: var(--vpo-radius); }

/* VPO-18, VPO-19 — CTA chiare; VPO-20 — CTA prenotazione arancione */
.vpo-content .vpo-cta { margin: 18px 0 35px; padding: 22px 24px; background: var(--vpo-bg-light); border-left: 4px solid var(--vpo-green-muted); scroll-margin-top: var(--vpo-section-anchor-offset); }
.vpo-content .vpo-cta__title { font-size: 1.12em; font-weight: 700; line-height: 1.25; color: var(--vpo-green); margin: 0 0 12px !important; }
.vpo-content .vpo-cta > p { margin: 0 0 12px; }
.vpo-content .vpo-cta > :last-child { margin-bottom: 0; }
.vpo-content .vpo-cta--contextual { background: var(--vpo-bg-pale); margin-bottom: 46px; padding: 18px 20px; }
.vpo-content .vpo-cta--solid { background: var(--vpo-orange); color: var(--vpo-white); border: 0; border-radius: 8px; padding: 18px 20px; text-align: center; margin: 18px 0 22px; }
.vpo-content .vpo-cta--solid .vpo-cta__title, .vpo-content .vpo-cta--solid :is(p, div) { color: var(--vpo-white); }
.vpo-content .vpo-cta--solid .vpo-cta__title { font-size: 1.08em; margin-bottom: 6px !important; }
.vpo-content .vpo-cta--solid .vpo-btn { background: var(--vpo-white); color: var(--vpo-orange) !important; border-color: var(--vpo-white); }
.vpo-content .vpo-cta--solid .vpo-btn:hover { background: #fff4e9; }
/* Bottone secondario della CTA arancione: pill bianca con link arancione. */
.vpo-content .vpo-cta--solid .vpo-cta__secondary-link { display: inline-block; background: var(--vpo-white); padding: 3px 9px; border-radius: 4px; color: var(--vpo-orange) !important; font-weight: 700; text-decoration: underline; }
.vpo-content .vpo-cta--solid .vpo-cta__secondary-link:hover { color: var(--vpo-orange-hover) !important; }
/* Eccezione: link testuale su sfondo arancione deve restare leggibile. */
.vpo-content .vpo-cta--solid a:not(.vpo-btn):not(.vpo-nav__link):not(.vpo-tour-button):not(.vpo-cta__secondary-link) { color: var(--vpo-white) !important; text-decoration: underline; }
.vpo-content .vpo-cta--solid .vpo-cta__footnote { font-size: .88em; line-height: 1.4; opacity: .95; margin-top: 10px; }

/* VPO-11 — Prezzi e formule */
.vpo-content .vpo-price-grid { display: flex; flex-wrap: wrap; gap: var(--vpo-gap); align-items: stretch; margin: 14px 0 24px; }
.vpo-content .vpo-price-card { flex: 1 1 270px; border: 1px solid var(--vpo-line); background: var(--vpo-white); border-radius: 8px; padding: 20px 16px 14px; }
.vpo-content .vpo-price-card--wide { flex: 2 1 420px; }
.vpo-content .vpo-price-card h3 { margin: 0 0 6px !important; color: var(--vpo-green); font-size: 1.15em; }
.vpo-content .vpo-price-card__amount { font-size: 1.62em; line-height: 1.1; font-weight: 700; color: var(--vpo-green); margin: 2px 0; }
.vpo-content .vpo-price-card__note { font-size: .89em; color: var(--vpo-muted); line-height: 1.35; }
.vpo-content .vpo-price-table { border: 1px solid var(--vpo-line-soft); border-radius: 6px; overflow: hidden; }
.vpo-content .vpo-price-table__row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 12px; border-bottom: 1px solid var(--vpo-line-soft); }
.vpo-content .vpo-price-table__row:last-child { border-bottom: 0; }
.vpo-content .vpo-price-table__head { background: var(--vpo-bg-light); font-weight: 600; font-family: var(--vpo-heading-font); font-size: .92em; }

/* VPO-12 — Giornate Tour */
.vpo-content .vpo-day { margin-bottom: 18px; }
.vpo-content .vpo-day__heading { background: var(--vpo-bg-day); border: 1px solid var(--vpo-line); border-left: 5px solid var(--vpo-green-border); border-radius: 8px; padding: 9px 14px; margin-bottom: 9px; }
.vpo-content .vpo-day__number { display: inline-block; color: var(--vpo-white); background: var(--vpo-green); padding: 4px 9px; border-radius: 18px; font-size: .8em; font-weight: 700; font-family: var(--vpo-heading-font); line-height: 1; letter-spacing: .02em; margin-bottom: 5px; }
.vpo-content .vpo-day__heading h3 { font-size: 1.25em; line-height: 1.24; margin: 0 !important; color: var(--vpo-green); }
.vpo-content .vpo-day__data { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 10px 12px; margin: 0 0 10px; background: var(--vpo-bg-services); border-radius: 6px; font-weight: 600; font-size: .95em; line-height: 1.35; }

/* VPO-14, VPO-15 — formule e servizi */
.vpo-content .vpo-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 14px; }
.vpo-content .vpo-grid > .vpo-card { flex: 1 1 280px; }
.vpo-content .vpo-grid--services > .vpo-card { background: var(--vpo-bg-services); border: 0; }
.vpo-content .vpo-grid .vpo-card h3 { font-size: 1.15em; color: var(--vpo-green); margin: 0 0 8px !important; }
.vpo-content .vpo-grid .vpo-card ul { padding-left: 19px; margin: 0; }
.vpo-content .vpo-grid .vpo-card li { margin-bottom: 7px; }

/* VPO-21–VPO-24 — pagamento e conferma (solo estetica, non logica pagamento) */
.vpo-content .vpo-summary { border: 1px solid var(--vpo-line); border-radius: 8px; background: var(--vpo-white); overflow: hidden; margin-bottom: 14px; }
.vpo-content .vpo-summary__head { color: var(--vpo-white); background: var(--vpo-green); padding: 12px 15px; font-family: var(--vpo-heading-font); font-size: 1.05em; font-weight: 700; }
.vpo-content .vpo-summary__body { padding: 14px 15px 15px; }
.vpo-content .vpo-summary__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 18px; padding: 7px 0; border-bottom: 1px solid var(--vpo-line-soft); }
.vpo-content .vpo-summary__row:last-child { border: 0; }
.vpo-content .vpo-summary__label { flex: 1 1 120px; color: var(--vpo-muted); }
.vpo-content .vpo-summary__value { flex: 1 1 180px; text-align: right; }
.vpo-content .vpo-payment-total { background: var(--vpo-bg-day); border: 1px solid var(--vpo-line); border-radius: 8px; padding: 18px 16px; text-align: center; margin-bottom: 28px; }
.vpo-content .vpo-payment-total__label { font-family: var(--vpo-heading-font); font-size: .82em; color: var(--vpo-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.vpo-content .vpo-payment-total__amount { color: var(--vpo-green); font-size: 2em; font-weight: 700; line-height: 1.1; margin: 0 0 8px; }
.vpo-content .vpo-payment-card { padding: 20px 18px 18px; border: 1px solid var(--vpo-line); border-radius: 8px; background: var(--vpo-white); margin-bottom: 14px; }
.vpo-content .vpo-payment-card h3 { font-size: 1.15em; color: var(--vpo-green); margin: 0 0 8px !important; }
.vpo-content .vpo-payment-card__details { background: var(--vpo-bg-services); border-radius: 6px; padding: 12px 14px; margin: 0 0 12px; line-height: 1.55; overflow-wrap: anywhere; }
.vpo-content .vpo-payment-card__help { font-size: .88em; color: var(--vpo-muted); line-height: 1.4; }

/* Piccoli elementi di testo */
.vpo-content .vpo-small-note { font-size: .9em; color: var(--vpo-muted); }
.vpo-content .vpo-updated { font-size: .85em; color: var(--vpo-muted); margin-top: 18px; }
/* Elementi aggiuntivi di Percorsi HTML v3, migrati dal CSS inline */
.vpo-content .vpo-link-line { margin: 10px 0 24px; }
.vpo-content .vpo-gallery__intro { margin: 0 0 18px; }
/* Possibile marcatura di sezione senza modifica del titolo standard. */
.vpo-content .vpo-section-subtitle { line-height: 1.5; }
.vpo-content .vpo-note__title { padding: 0 !important; }
.vpo-content .vpo-cards--ristori .vpo-card__footer { margin-top: auto; }
/* Markup anche per tipologie Info e Tour senza stili fuori dal contenuto VPO. */
.vpo-content .vpo-cta--solid p { color: var(--vpo-white); }
.vpo-content .vpo-payment-card .vpo-btn { background: var(--vpo-orange); }


/* Il CSS è limitato alle pagine incapsulate in .vpo-content. Non alterare
   stili del tema fuori da questo ambito. Nelle pagine preesistenti gli style
   inline vincono sul CSS esterno: migrare l'HTML prima di attendere risultati. */
/* RESPONSIVE — nessuna regola specifica nel singolo template */
@media (min-width: 621px) {
  .vpo-content .vpo-map-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1100px) {
  .vpo-content .vpo-cards--related { flex-wrap: nowrap; }
  .vpo-content .vpo-cards--related .vpo-card { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 620px) {
  .vpo-content .vpo-cta { padding: 18px 16px; }
  .vpo-content .vpo-btn { white-space: normal; }
  .vpo-content .vpo-cards--feedback .vpo-card { flex-basis: 100%; }
  .vpo-content .vpo-summary__value { text-align: left; }
}