/* Le regole del carrello del mockup sono state tolte da _build/wordpress.js:
   su WordPress il pannello e' quello di FunnelKit. */
/* ---- Bottone "aggiungi" già aggiunto ------------------------------------- */
.btn.is-in-cart { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.is-in-cart:hover { background: #266349; }

/* ---- Blocco d'acquisto riutilizzabile ------------------------------------ */
.buybox {
  background: #fff; border: 2px solid var(--action); border-radius: var(--radius);
  padding: var(--s-5); display: grid; gap: var(--s-3);
}
.buybox__price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.buybox__price .price { font-size: var(--step-4); }
.buybox__actions { display: grid; gap: var(--s-3); }
@media (min-width: 480px) { .buybox__actions { grid-template-columns: 1fr auto; } }
.buybox__trust { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: var(--step--1); color: var(--ink-soft); }
.buybox__trust span { display: inline-flex; align-items: center; gap: .3rem; }

/* Riga d'acquisto compatta dentro le schede prodotto.
   Sotto i 400px il pulsante "i" da solo su una riga sembra un errore: lì
   diventa un normale collegamento testuale sotto il bottone d'acquisto. */
.card__buy { display: grid; gap: var(--s-2); margin-top: auto; }
.card__buy .btn { width: 100%; }
.card__buy .btn--icon { padding: .6em 1em; font-family: var(--font-body); font-style: normal; }
.card__buy .btn--icon::after { content: " Vedi i dettagli"; }
@media (min-width: 400px) {
  .card__buy { grid-template-columns: 1fr auto; align-items: center; }
  .card__buy .btn--icon { width: 48px; padding: 0; flex-shrink: 0; }
  .card__buy .btn--icon::after { content: none; }
}

/* ---- Le tre strade -------------------------------------------------------
   Su telefono diventa una pila di schede: la terza — la nostra — resta per
   ultima, perché è la conclusione del ragionamento, non l'apertura. */
.ways { display: grid; gap: var(--s-4); align-items: stretch; }
@media (min-width: 900px) { .ways { grid-template-columns: 1fr 1fr 1.12fr; gap: var(--s-4); } }
.way {
  background: #fff; border: 1px solid var(--sand); border-radius: var(--radius);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
}
.way--ours {
  background: var(--night); color: #F4EFE6; border-color: var(--night);
  box-shadow: var(--shadow-l);
}
@media (min-width: 900px) { .way--ours { transform: translateY(-12px); } }
.way__tag {
  align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: .3em .8em; border-radius: 999px;
  background: var(--paper-warm); color: var(--ink-soft);
}
.way__tag--best { background: var(--action); color: var(--action-text); }
.way h3 { margin: 0; font-size: var(--step-2); }
.way--ours h3 { color: #fff; }
.way__claim { margin: 0; color: var(--ink-soft); font-style: italic; }
.way--ours .way__claim { color: var(--blush); }
.way__specs { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--s-3) 0 0; }
.way__specs dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: var(--s-3);
}
.way--ours .way__specs dt { color: rgba(255,255,255,.6); }
.way__specs dd { margin: .12rem 0 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--sand); font-size: .96rem; }
.way--ours .way__specs dd { border-color: rgba(255,255,255,.16); }
.way__specs dd.is-bad::before,
.way__specs dd.is-good::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: .45rem; vertical-align: -.18rem; background-size: contain; background-repeat: no-repeat; }
.way__specs dd.is-bad::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A03349' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }
.way__specs dd.is-good::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8D8BE' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.way__verdict { margin: auto 0 0; padding-top: var(--s-4); font-size: .95rem; color: var(--ink-soft); }
.way--ours .way__verdict { color: rgba(255,255,255,.86); }
.way__cta { margin-top: auto; padding-top: var(--s-4); display: grid; gap: .5rem; justify-items: center; }
.way--ours .btn--quiet { color: var(--blush); }

/* ---- Blocco d'acquisto dentro la prima schermata ------------------------ */
.hero-buy {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius); padding: var(--s-4) var(--s-5);
  margin-top: var(--s-5); display: grid; gap: var(--s-3);
  backdrop-filter: blur(4px);
}
.hero-buy__price { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.hero-buy__price .price { font-size: var(--step-4); color: #fff; }
.hero-buy__price span:last-child { font-size: var(--step--1); color: rgba(255,255,255,.8); }
.hero-buy__actions { display: grid; gap: var(--s-3); }
@media (min-width: 520px) { .hero-buy__actions { grid-template-columns: 1fr auto; } }
.hero-buy__actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hero-buy__actions .btn--ghost:hover { background: #fff; color: var(--night); }
.hero-buy__trust { margin: 0; font-size: var(--step--1); color: rgba(255,255,255,.72); }

/* ---- Blocco soluzione in cima alle pagine problema ---------------------- */
.solution-strip {
  background: #fff; border: 1px solid var(--sand); border-radius: var(--radius);
  padding: var(--s-4); margin-bottom: var(--s-5);
}
/* Variante dentro la prima schermata scura delle pagine problema */
.solution-strip--hero {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
  margin: var(--s-5) 0 0; backdrop-filter: blur(4px);
}
.solution-strip--hero .solution-strip__items { grid-template-columns: 1fr; }
/* Le schede sono chiare dentro una sezione scura: il testo va riportato
   al colore d'inchiostro, altrimenti eredita il bianco e sparisce. */
.solution-strip--hero .solution-strip__item {
  background: #fff; border-color: transparent; color: var(--ink);
  /* La fascia eroe e scura e imposta un anello del fuoco bianco, che scende
     fino a qui dentro. Ma queste schede il fondo bianco ce l'hanno: l'anello
     ci finiva sopra e non si vedeva — 1:1 — proprio sui due «Aggiungi» della
     prima schermata delle pagine problema. Qui l'anello torna scuro. */
  --anello: var(--indigo);
}
.solution-strip--hero .solution-strip__item b { color: var(--ink); }
.solution-strip--hero .solution-strip__item span { color: var(--ink-soft); }
.solution-strip--hero .solution-strip__item .price { color: var(--night); }
.solution-strip--hero .solution-strip__item .btn--ghost { color: var(--night); border-color: var(--night); }
.solution-strip--hero .solution-strip__item .btn--ghost:hover { background: var(--night); color: #fff; }
.solution-strip--hero .solution-strip__note { color: rgba(255,255,255,.75); }
.solution-strip--hero .solution-strip__note a { color: var(--blush); }
.solution-strip__head { margin-bottom: var(--s-3); }
.solution-strip__items { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .solution-strip__items { grid-template-columns: 1fr 1fr; } }
/* Il bottone sta sempre su una riga sua: dentro una colonna stretta il
   layout a tre colonne spezzava il testo una parola per riga. */
.solution-strip__item {
  display: grid; grid-template-columns: 60px 1fr; gap: var(--s-2) var(--s-3); align-items: center;
  padding: var(--s-4); border: 1px solid var(--sand); border-radius: var(--radius-s);
  background: var(--paper);
}
.solution-strip__item--best { border-color: var(--action); border-width: 2px; background: #fff; }
.solution-strip__item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--paper-warm); }
.solution-strip__item > div { min-width: 0; }
.solution-strip__item b { display: block; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.2; }
.solution-strip__item span { display: block; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.35; }
.solution-strip__item .price { font-size: var(--step-1); margin-top: .15rem; }
.solution-strip__item .btn { grid-column: 1 / -1; width: 100%; margin-top: .2rem; }
/* Nella prima schermata lo spazio è poco: bottone accanto al testo, non sotto */
@media (min-width: 480px) {
  .solution-strip--hero .solution-strip__item { grid-template-columns: 60px 1fr auto; }
  .solution-strip--hero .solution-strip__item .btn { grid-column: auto; width: auto; margin-top: 0; }
}
.solution-strip__note { margin: var(--s-3) 0 0; font-size: var(--step--1); color: var(--ink-soft); text-align: center; }

/* ---- Elenco uscite stampa ------------------------------------------------ */
.press-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--sand); }
.press-list__item { border-bottom: 1px solid var(--sand); margin: 0; }
.press-list__item a {
  display: grid; gap: .15rem; padding: var(--s-4) 2rem var(--s-4) 0; text-decoration: none;
  color: var(--ink); position: relative;
}
.press-list__item a::after {
  content: "↗"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  color: var(--link); opacity: .5; transition: opacity .2s, transform .2s;
}
.press-list__item a:hover::after { opacity: 1; transform: translate(3px, -50%); }
.press-list__item a:hover .press-list__titolo { text-decoration: underline; }
.press-list__testata { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-ink); }
.press-list__titolo { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.press-list__meta { font-size: var(--step--1); color: var(--ink-soft); }
@media (min-width: 760px) {
  .press-list__item a { grid-template-columns: 190px 1fr auto; align-items: baseline; gap: var(--s-4); }
  .press-list__meta { text-align: right; }
}

/* ---- Negozio ------------------------------------------------------------ */
.shop-filters { display: grid; gap: var(--s-4); }
.shop-filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.shop-filters__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: .35rem; flex: 0 0 100%;
}
@media (min-width: 620px) { .shop-filters__label { flex: 0 0 auto; width: 90px; } }
.shop-filters .pill { cursor: pointer; font-family: var(--font-body); }

.shop-grid { display: grid; gap: var(--s-4); margin-top: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
.shop-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--sand); border-radius: var(--radius); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shop-card--best { border-color: var(--action); border-width: 2px; }
.shop-card__flag { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2; }
/* IL RIQUADRO E' 5:4, e non e' un numero a caso: e' esattamente il rapporto
   delle immagini delle guide (900x720), che cosi' lo riempiono senza perdere
   un pixel. Le copertine dei due corsi sono verticali (4:5) e restano intere
   dentro lo stesso riquadro: tagliarle vorrebbe dire tagliare il titolo del
   prodotto dalla sua stessa copertina. Tutte le schede hanno percio' la
   stessa altezza, che era il punto.

   LA RIGA CHE CONTAVA E' `display: block`. Prima qui c'era `display: grid`, e
   dentro un contenitore a griglia un'altezza in percentuale non si risolve:
   l'immagine tornava alle sue misure naturali, cresceva oltre il riquadro e
   `overflow: hidden` la tagliava. E' lo stesso difetto che a ferragosto
   tagliava le copertine sulla pagina delle guide: stessa causa, componente
   diverso. */
.shop-card__media { display: block; aspect-ratio: 5/4; background: var(--paper-warm); overflow: hidden; }
.shop-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-card__media--contain { padding: var(--s-4); }
.shop-card__media--contain img { object-fit: contain; }
.shop-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
.shop-card__body h2 { margin: 0; font-size: var(--step-1); }
.shop-card__body h2 a { color: var(--ink); text-decoration: none; }
.shop-card__body h2 a:hover { text-decoration: underline; }
.shop-card__claim { margin: 0; font-style: italic; color: var(--ink-soft); font-size: .95rem; }
.shop-card__d { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.shop-card .price { margin: var(--s-2) 0 0; }
.shop-card .card__buy { margin-top: 0; }
/* La scheda del negozio e' una scatola vera, con un fondo e un bordo: qui
   la cassa puo' andare fino ai lati e prendersi la tinta calda, cosa che
   sulle schede dei pacchetti — che scatole non sono — non si puo' fare. */
.shop-card .card-cassa {
  margin: auto calc(var(--s-5) * -1) calc(var(--s-5) * -1);
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--paper-warm);
}
.bundle--best { border-color: var(--action); border-width: 2px; }

/* ---- Confronto: tabella su schermo largo, schede su telefono -------------
   Una tabella a quattro colonne dentro un telefono si può solo trascinare di
   lato, e nessuno lo fa. Sotto i 760px la stessa informazione diventa una pila
   di schede, ciascuna con il suo bottone d'acquisto. */
.compare-cards { display: none; }
@media (max-width: 899px) {
  .compare-wrap { display: none; }
  .compare-cards { display: grid; gap: var(--s-4); }
}
@media (min-width: 620px) and (max-width: 899px) {
  .compare-cards { grid-template-columns: 1fr 1fr; }
}
.compare-card {
  background: #fff; border: 1px solid var(--sand); border-radius: var(--radius);
  padding: var(--s-5); display: grid; gap: var(--s-3);
}
.compare-card--best { border-color: var(--action); border-width: 2px; }
.compare-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.compare-card__head h2 { margin: 0; font-size: var(--step-2); }
.compare-card__specs { margin: 0; display: grid; gap: 0; }
.compare-card__specs dt {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: var(--s-3);
}
.compare-card__specs dd { margin: .15rem 0 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--sand); font-size: .95rem; }

/* ---- Fascia stampa su telefono ------------------------------------------
   A schermo stretto i loghi andavano a capo in modo casuale, lasciando buchi.
   Qui diventano una griglia regolare: tre celle per riga, tutte della stessa
   altezza, con il logo centrato dentro. */
@media (max-width: 719px) {
  .press__row--primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; padding-block: var(--s-3) var(--s-4); }
  .press__row--primary .press__item { padding: .5rem .25rem; min-height: 58px; justify-content: center; }
  .press__row--primary .press__item img { height: calc(var(--h, 26px) * .82); max-width: 100%; }
  .press__kind { font-size: .55rem; }
  .press__track { animation-duration: 34s; }
}

/* ---- Aree toccabili -----------------------------------------------------
   Su schermi tattili le linee guida chiedono bersagli comodi: qui il minimo
   è 44px, la misura che Apple raccomanda da sempre. */
@media (pointer: coarse) {
  .pill { min-height: 44px; display: inline-flex; align-items: center; }
  .logo { min-height: 44px; }
  .announce a { display: inline-block; padding: .35rem 0; }
  .press__item { min-height: 56px; justify-content: center; }
  /* Senza mouse l'etichetta al passaggio non compare mai: qui è sempre visibile */
  .press__kind { opacity: 1; }
  .nav a { padding-block: .7rem; }
}

/* ---- Rifiniture iOS ------------------------------------------------------
   1. I campi sotto i 16px fanno ingrandire la pagina a ogni tocco su iPhone.
   2. Il riquadro grigio al tocco su Safari fa sembrare l'interfaccia lenta.
   3. Su iPhone `100vh` include le barre che compaiono e scompaiono: dvh no. */
input, select, textarea, button { font-size: max(16px, 1em); }
* { -webkit-tap-highlight-color: rgba(90,102,184,.18); }
.btn, .icon-btn, .quiz__opt, .problem, .qty__btn, summary { touch-action: manipulation; }
@supports (height: 100dvh) { .hero__inner { min-height: auto; } }

/* ---- Offerta abbinata dentro il riquadro di acquisto ---------------------
   Sta sotto ai bottoni, non sopra: la decisione principale resta la prima
   cosa che vedi. Deve leggersi come un consiglio, non come un banner. */
.pair-offer {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: var(--paper-warm);
}
.pair-offer img { width: 64px; height: 64px; object-fit: contain; border-radius: .5rem; }
.pair-offer__body b { display: block; font-size: var(--step-0); }
.pair-offer__body p { margin: .25rem 0 .4rem; font-size: var(--step--1); color: var(--ink-soft); }
.pair-offer__price { font-size: var(--step--1); font-weight: 700; color: var(--action-ink); }
.pair-offer__price s { font-weight: 400; color: var(--ink-soft); margin-right: .3rem; }
.pair-offer .btn { white-space: nowrap; }

@media (max-width: 619px) {
  /* Su telefono il testo diventa alto e l'immagine, se centrata, resta
     sospesa a mezz'aria con due vuoti sopra e sotto: va tenuta in alto,
     accanto al titolo, dove serve a riconoscere il prodotto. */
  .pair-offer { grid-template-columns: 56px 1fr; align-items: start; gap: var(--s-3); }
  .pair-offer img { width: 56px; height: 56px; }
  .pair-offer .btn { grid-column: 1 / -1; width: 100%; justify-content: center; margin-top: .2rem; }
}

/* ---- Tabelle dei dati nel documento di proposta -------------------------- */
.tab { border-collapse: collapse; width: 100%; font-size: var(--step--1); margin-block: var(--s-5); }
.tab th, .tab td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--sand); }
.tab thead th { background: var(--paper-warm); font-weight: 700; white-space: nowrap; }
.tab td:not(:first-child), .tab th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tab tbody tr:last-child td { border-bottom: 0; }

/* ---- Griglia dei pacchetti ----------------------------------------------
   Sono quattro: devono stare 2+2. Con `auto-fit` finivano 3 su una riga e
   uno sotto da solo, che è la disposizione che fa sembrare l'ultimo un
   ripensamento. */
.bundle-grid { display: grid; gap: clamp(1.75rem, 1rem + 2.2vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .bundle-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Dentro WordPress ----------------------------------------------------
   Dopo un'aggiunta, WooCommerce infila un "Visualizza carrello" sotto il
   bottone. Qui non serve e scompone il riquadro: il carrello si è appena
   aperto da solo, con dentro il prodotto. */
.added_to_cart { display: none !important; }
/* il bottone che ha appena aggiunto non deve sembrare rotto mentre carica */
.add_to_cart_button.loading { opacity: .6; pointer-events: none; }