/* ==========================================================================
   Scheda prodotto corso – Sezione d'acquisto (Soluzione A)
   --------------------------------------------------------------------------
   Mobile-first.
   - Mobile:  viewport < 748px
   - Desktop: viewport >= 748px, gabbia fluida 748–1120px (max-width 1120px)
   Nessun livello tablet.

   Il TITOLO e il SOTTOTITOLO arrivano dal backend con il loro stile:
   qui non si toccano colore, dimensione o peso (solo i margini esterni).
   ========================================================================== */

.sp {
  /* Font del mockup (Figtree) */
  --sp-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Testo */
  --sp-ink: #0F1A3A;
  --sp-muted: #4B5672;
  --sp-subtle: #6B7591;

  /* Blu (azioni) */
  --sp-blue: #2E6BD2;
  --sp-blue-hover: #2357B0;
  --sp-blue-tint: #EEF4FF;
  --sp-blue-soft: #A9C1EC;
  --sp-focus: #8DB0FF;

  /* Arancio (offerta e prezzo) */
  --sp-orange: #D9430C;
  --sp-orange-text: #B23506;
  --sp-orange-tint: #FFF1EA;
  --sp-orange-border: #F2D2C3;
  --sp-orange-rule: #F1E4DD;

  /* Verde (stato e risparmio) */
  --sp-green: #17663A;
  --sp-green-dot: #1E9E4A;
  --sp-green-tint: #E6F4EA;

  /* Superfici e bordi */
  --sp-surface: #FFFFFF;
  --sp-panel: #F1F5FC;
  --sp-panel-border: #E1E8F4;
  --sp-field-border: #C9D3E3;
  --sp-rule: #DCE3EE;
  --sp-end-rule: #CFD8E6;

  font-family: var(--sp-font);
  color: var(--sp-ink);
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}
.sp *, .sp *::before, .sp *::after { box-sizing: inherit; }
:where(.sp) p { margin: 0; }
.sp svg { display: block; flex: none; }

.sp-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Card ---------------------------------------------------------- */
.sp__card {
  background: var(--sp-surface);
  padding: 20px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- Testata: info + prezzo --------------------------------------- */
.sp__top { display: grid; gap: 18px; }
.sp__info { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Badge stato */
.sp-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sp-green-tint);
  color: var(--sp-green);
  font-size: 14px; font-weight: 600; line-height: 1.3;
}
.sp-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sp-green-dot);
  box-shadow: 0 0 0 3px rgba(30, 158, 74, .18);
}

/* Blocco titolo (FISSO da backend: solo spaziature) */
.sp__heading { display: flex; flex-direction: column; gap: 8px; }
.sp__heading > * { margin: 0; }

/* ---------- Sconti -------------------------------------------------------- */
.sp-discounts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;                                   /* il gap fa da divisore */
  background: var(--sp-orange-border);
  border: 1px solid var(--sp-orange-border);
  border-radius: 16px;
  overflow: hidden;
}
.sp-discount {
  background: var(--sp-surface);
  padding: 14px;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 8px; row-gap: 8px;
}
.sp-discount__icon {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--sp-orange-tint); color: var(--sp-orange);
  display: flex; align-items: center; justify-content: center;
}
.sp-discount__icon svg { width: 16px; height: 16px; }
.sp-discount__title {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px;
  font-size: 14px; font-weight: 700; line-height: 1.2;
}
.sp-discount__pct {
  font-size: 24px; font-weight: 900; letter-spacing: -.02em; line-height: 1;
  color: var(--sp-orange);
}
.sp-discount__label { white-space: nowrap; }
.sp-discount__text {
  grid-column: 1 / -1;
  font-size: 13px; line-height: 1.35; color: var(--sp-muted);
}

/* ---------- Card prezzo --------------------------------------------------- */
.sp-price {
  container-type: inline-size;
  display: flex; flex-direction: column;
  background: var(--sp-surface);
  border: 1px solid var(--sp-orange-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(217, 67, 12, .10);
}
.sp-price__deadline {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  background: var(--sp-orange-tint); color: var(--sp-orange-text);
  font-size: 15px; font-weight: 700; line-height: 1.3;
}
.sp-price__deadline svg { width: 17px; height: 17px; }
.sp-price__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sp-price__main { display: flex; align-items: center; gap: 14px; }
.sp-price__was { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: none; }
.sp-price__old { font-size: 16px; color: var(--sp-subtle); }
.sp-price__pill {
  padding: 3px 8px; border-radius: 7px;
  background: var(--sp-orange-text); color: #fff;   /* #B23506: contrasto 6:1 col bianco */
  font-size: 13px; font-weight: 800; line-height: 1.3;
}
.sp-price__sep { width: 1px; align-self: stretch; background: var(--sp-orange-rule); }
.sp-price__now {
  display: flex; align-items: baseline; gap: .04em;
  color: var(--sp-orange);
  /* scala con la larghezza della card: 54px a 375, 38px a 320 */
  font-size: clamp(38px, calc(28cqi - 41px), 54px);
  font-weight: 900; letter-spacing: -.04em; line-height: 1; white-space: nowrap;
}
.sp-price__cur, .sp-price__dec { font-size: .44em; font-weight: 800; letter-spacing: 0; }
.sp-price__cur { margin-left: .14em; }   /* € dopo l'importo, come nel resto del sito */
.sp-price__save {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--sp-green-tint); color: var(--sp-green);
  font-size: 14px; font-weight: 700; line-height: 1.3;
}
.sp-price__save svg { width: 15px; height: 15px; }
.sp-price__rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--sp-orange-rule); }
.sp-price__note { font-size: 15px; line-height: 1.5; color: var(--sp-muted); }
.sp-price__note strong { color: var(--sp-ink); }

/* ---------- Box iscrizione ------------------------------------------------ */
/* Mobile: [scelte + info pagamenti] dentro il box, poi le CTA fuori.
   Desktop: [scelte | CTA] dentro il box, info pagamenti fuori, sotto.
   Lo sfondo del box è lo pseudo-elemento ::before posizionato sulla griglia. */
.sp-buy {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "opts" "info" "acts";
  row-gap: 14px;
}
.sp-buy::before {
  content: "";
  grid-column: 1; grid-row: 1 / 3;
  background: var(--sp-panel);
  border: 1px solid var(--sp-panel-border);
  border-radius: 18px;
}
.sp-buy__options {
  grid-area: opts;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 16px 14px 0;
  min-width: 0;
}
.sp-buy__actions {
  grid-area: acts;
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 4px;
}

/* Campi */
.sp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sp-field--pay { flex: 1 1 0; }
.sp-field--qty { flex: none; }
.sp-field__label { font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; }

.sp-select { position: relative; }
.sp-select select {
  width: 100%; height: 52px;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--sp-field-border); border-radius: 12px;
  background: var(--sp-surface);
  padding: 0 34px 0 12px;
  font: 600 15px/1.2 var(--sp-font); color: var(--sp-ink);
  cursor: pointer;
}
.sp-select select:hover { border-color: var(--sp-blue); }
.sp-select__chevron {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; pointer-events: none; color: var(--sp-ink);
}

.sp-stepper {
  display: flex; align-items: center;
  height: 52px;
  border: 1px solid var(--sp-field-border); border-radius: 12px;
  background: var(--sp-surface);
  overflow: hidden;
}
.sp-stepper__btn {
  width: 44px; height: 100%;
  border: 0; background: var(--sp-surface); color: var(--sp-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sp-stepper__btn:hover { background: #EEF2F8; }
.sp-stepper__btn svg { width: 16px; height: 16px; }
.sp-stepper__input {
  width: 40px; height: 100%;
  border: 0; background: transparent; text-align: center;
  font: 800 17px/1 var(--sp-font); color: var(--sp-ink);
  -moz-appearance: textfield; appearance: textfield;
}
.sp-stepper__input::-webkit-outer-spin-button,
.sp-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Pulsanti */
.sp-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px;
  font-family: var(--sp-font); line-height: 1.2; text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.sp-btn--primary {
  min-height: 60px; padding: 0 20px; gap: 12px;
  border: 0; background: var(--sp-blue); color: #fff;
  font-size: 19px; font-weight: 800;
  box-shadow: 0 10px 22px rgba(46, 107, 210, .30);
}
.sp-btn__arrow {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255, 255, 255, .2);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.sp-btn__arrow svg { width: 18px; height: 18px; transition: transform .2s ease; }
.sp-btn--gift {
  min-height: 48px; padding: 0 16px;
  border: 1px solid var(--sp-blue); background: var(--sp-surface); color: var(--sp-blue);
  font-size: 16px; font-weight: 600;
  transition: background-color .15s, border-color .15s, color .15s;
}
.sp-btn--gift svg { width: 18px; height: 18px; }

.sp .sp-btn:focus-visible,
.sp select:focus-visible,
.sp .sp-stepper__btn:focus-visible,
.sp .sp-stepper__input:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 2px; }

/* "oppure" */
.sp-or {
  display: flex; align-items: center; gap: 12px;
  color: var(--sp-muted); font-size: 13px; font-weight: 600; line-height: 1;
}
.sp-or::before, .sp-or::after { content: ""; flex: 1; height: 1px; background: var(--sp-rule); }

/* Info pagamenti */
.sp-payinfo {
  grid-area: info;
  margin: 0 14px 16px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border-radius: 12px;
  background: var(--sp-surface);
  font-size: 13.5px; line-height: 1.45; color: var(--sp-muted);
}
.sp-payinfo strong { color: var(--sp-ink); font-weight: 700; }
.sp-payinfo__icon {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--sp-blue-tint); color: var(--sp-blue);
  display: flex; align-items: center; justify-content: center;
}
.sp-payinfo__icon svg { width: 17px; height: 17px; }

/* ---------- Separatore fine sezione -------------------------------------- */
.sp__end {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 16px 32px;
}
.sp__end::before, .sp__end::after { content: ""; flex: 1; height: 1px; background: var(--sp-end-rule); }
.sp__end span { display: flex; gap: 5px; }
.sp__end i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--sp-blue); }
.sp__end i:nth-child(2) { background: var(--sp-orange); }


/* Schermi molto stretti (< 360px): tendina e partecipanti uno sotto l'altro */
@media (max-width: 359px) {
  .sp-buy__options { flex-wrap: wrap; }
  .sp-field--pay { flex-basis: 100%; }
}


/* ==========================================================================
   DESKTOP  (748px – 1120px, fluido)
   ========================================================================== */
@media (min-width: 748px) {

  .sp__card {
    border-radius: 28px;
    box-shadow: 0 1px 2px rgba(15, 26, 58, .06), 0 24px 60px rgba(15, 26, 58, .08);
    padding: clamp(24px, 3.2vw, 36px) clamp(24px, 3.6vw, 40px) clamp(24px, 2.9vw, 32px);
    gap: clamp(24px, 2.9vw, 32px);
  }

  .sp__top {
    grid-template-columns: minmax(0, 1fr) clamp(272px, 34%, 400px);
    gap: clamp(24px, 3.6vw, 40px);
    align-items: stretch;
  }
  .sp__info { gap: 22px; padding-top: 4px; }
  .sp__heading { gap: 14px; }

  .sp-badge { padding: 7px 14px; font-size: 15px; gap: 8px; }
  .sp-badge::before { width: 9px; height: 9px; box-shadow: 0 0 0 4px rgba(30, 158, 74, .18); }

  /* Sconti: affiancati se c'è spazio, altrimenti uno sotto l'altro */
  .sp-discounts {
    margin-top: auto;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    border-radius: 18px;
  }
  .sp-discount {
    padding: 20px 22px;
    grid-template-columns: 50px minmax(0, 1fr);
    column-gap: 16px; row-gap: 3px;
  }
  .sp-discount__icon { width: 50px; height: 50px; border-radius: 14px; grid-row: 1 / span 2; }
  .sp-discount__icon svg { width: 24px; height: 24px; }
  .sp-discount__title { font-size: 18px; column-gap: 6px; align-self: end; }
  .sp-discount__pct { font-size: 30px; }
  .sp-discount__text { grid-column: 2; font-size: 15px; align-self: start; }

  /* Prezzo: colonna centrata */
  .sp-price { border-radius: 22px; box-shadow: 0 14px 34px rgba(217, 67, 12, .10); }
  .sp-price__deadline { justify-content: center; padding: 14px 20px; font-size: 16px; gap: 8px; }
  .sp-price__deadline svg { width: 20px; height: 20px; }
  .sp-price__body {
    flex: 1;
    align-items: center; justify-content: center; text-align: center;
    padding: 24px clamp(20px, 7cqi, 28px) 26px;
    gap: 10px;
  }
  .sp-price__main { flex-direction: column; gap: 10px; }
  .sp-price__was { flex-direction: row; align-items: center; gap: 10px; }
  .sp-price__old { font-size: 20px; }
  .sp-price__pill { padding: 4px 9px; border-radius: 8px; font-size: 14px; }
  .sp-price__sep { display: none; }
  .sp-price__now { font-size: clamp(48px, 20cqi, 84px); line-height: .95; }
  .sp-price__save { align-self: center; padding: 6px 12px; font-size: 15px; }
  .sp-price__save svg { width: 16px; height: 16px; }
  .sp-price__rule { margin: 10px 0 4px; }
  .sp-price__note { font-size: 17px; max-width: 320px; }

  /* Box iscrizione: scelte | CTA; info pagamenti fuori dal box */
  .sp-buy {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
    grid-template-areas: "opts acts" "info info";
    row-gap: 20px;
  }
  .sp-buy::before { grid-column: 1 / -1; grid-row: 1; border-radius: 22px; }
  .sp-buy__options {
    flex-wrap: wrap; align-items: center; align-content: center;
    gap: 16px clamp(12px, 1.6vw, 18px);
    padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.5vw, 28px);
  }
  .sp-buy__actions {
    margin: 0;
    justify-content: center;
    padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.5vw, 28px);
    border-left: 1px solid var(--sp-panel-border);
  }

  .sp-field { gap: 8px; }
  .sp-field--pay { flex: 1 1 200px; max-width: 280px; }
  .sp-field__label { font-size: 16px; }
  .sp-select select { height: 60px; border-radius: 14px; padding: 0 44px 0 16px; font-size: 17px; }
  .sp-select__chevron { right: 16px; width: 20px; height: 20px; }
  .sp-stepper { height: 60px; border-radius: 14px; }
  .sp-stepper__btn { width: 54px; }
  .sp-stepper__btn svg { width: 18px; height: 18px; }
  .sp-stepper__input { width: 52px; font-size: 19px; }

  .sp-btn--primary { font-size: 20px; gap: 14px; box-shadow: 0 10px 24px rgba(46, 107, 210, .32); }
  .sp-btn__arrow { width: 34px; height: 34px; border-radius: 10px; }
  .sp-btn__arrow svg { width: 20px; height: 20px; }
  .sp-or::before, .sp-or::after { background: #D5DDEA; }

  .sp-payinfo {
    margin: 0;
    align-items: center; gap: 14px;
    padding: 0 6px; background: none;
    font-size: 16px;
  }
  .sp-payinfo__icon { width: 40px; height: 40px; border-radius: 11px; }
  .sp-payinfo__icon svg { width: 20px; height: 20px; }

  .sp__end { gap: 18px; margin: 48px 0 40px; }
  .sp__end span { gap: 6px; }
  .sp__end i { width: 6px; height: 6px; }
}


/* ==========================================================================
   Integrazione WooCommerce / Elementor / unid-installments
   (tutto quanto sotto non fa parte del mockup)
   ========================================================================== */
.sp { font-variant-numeric: lining-nums; }
.sp [hidden] { display: none !important; }
.sp .sp-price__now, .sp .sp-price__old, .sp .sp-price__save, .sp .sp-discount__pct { font-variant-numeric: lining-nums tabular-nums; }

/* Titolo e sottotitolo (nel mockup arrivavano dal backend) */
.sp .sp-title { margin: 0; font-family: var(--sp-font); font-weight: 700; color: #111426; font-size: 27px; line-height: 1.2; letter-spacing: -.01em; }
.sp .sp-subtitle { font-weight: 400; color: #5F6580; font-size: 16px; line-height: 1.4; }

/* Briciole (solo desktop, come nel vecchio header) */
.sp-crumbs { display: none; }

/* Badge con scadenza */
.sp-badge--limit { background: var(--sp-orange-tint); color: var(--sp-orange-text); }
.sp-badge--limit::before { background: var(--sp-orange); box-shadow: 0 0 0 3px rgba(217, 67, 12, .18); }

/* Altre righe della tabella (Ente certificatore, Posti, ...) */
.sp-facts { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-facts__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; font-size: 14px; line-height: 1.45; }
.sp-facts dt { margin: 0; font-weight: 700; color: var(--sp-ink); }
.sp-facts dd { margin: 0; color: var(--sp-muted); }
.sp-facts dd strong { color: var(--sp-ink); }

/* Campo fisso (un solo metodo di pagamento) */
.sp-select--fixed { height: 52px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--sp-field-border); border-radius: 12px; background: var(--sp-surface); }
.sp-select__fixed { font: 600 15px/1.2 var(--sp-font); color: var(--sp-ink); }

/* Stepper: il valore è un <output>, il vero campo è la select nascosta */
.sp-stepper__val { width: 40px; text-align: center; font: 800 17px/1 var(--sp-font); color: var(--sp-ink); }
.sp-stepper__btn:disabled { opacity: .35; cursor: default; background: var(--sp-surface); }

/* Prodotti senza opzioni di pagamento: solo pulsanti */
.sp-buy--noopts::before, .sp-buy--oos::before { display: none; }
.sp-buy--noopts { grid-template-areas: "acts" "info"; }
.sp-buy--noopts .sp-buy__actions { border-left: 0; }

/* Dettagli pagamento dentro la card prezzo (markup di unid-installments) */
.sp-price__note .unid-payment-details { margin: 0; }
.sp-price__note .unid-payment-detail { background: none; margin: 0; }
.sp-price__note .unid-payment-detail p { margin: 0; padding: 0; position: static; }
.sp-price__note .unid-payment-detail p::before { display: none; }
.sp-price__note .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }

/* Il blocco prezzi dei plugin resta nel DOM ma non si vede */
.sp .unid-price-display { display: none; }

/* Neutralizza gli stili globali di tema/Elementor sui controlli */
.sp button, .sp select { text-transform: none; letter-spacing: normal; box-shadow: none; }
.sp .sp-btn--primary { box-shadow: 0 10px 22px rgba(46, 107, 210, .30); background: var(--sp-blue); color: #fff; border: 0; }
.sp .sp-btn--gift { background: var(--sp-surface); color: var(--sp-blue); border: 1px solid var(--sp-blue); }
.sp .sp-btn--primary:focus, .sp .sp-btn--primary:visited { color: #fff; }
.sp .sp-btn--gift:focus, .sp .sp-btn--gift:visited { color: var(--sp-blue); }

/* Stati dei pulsanti (consegna 2026-10-21): due soli stati, "normale" e "mouse sopra / click".
   :active = stesso aspetto di :hover (riscontro anche al tocco); :hover solo con mouse. */
.sp .sp-buy .sp-btn.sp-btn--primary:active { background: var(--sp-blue-hover); color: #fff; }
.sp .sp-buy .sp-btn--primary:active .sp-btn__arrow { background: #fff; color: var(--sp-blue-hover); }
.sp .sp-buy .sp-btn--primary:active .sp-btn__arrow svg { transform: translateX(2px); }
.sp .sp-buy .sp-btn.sp-btn--gift:active { background: var(--sp-blue); border-color: var(--sp-blue); color: #fff; }
@media (hover: hover) {
  .sp .sp-buy .sp-btn.sp-btn--primary:hover { background: var(--sp-blue-hover); color: #fff; transform: translateY(-1px); }
  .sp .sp-buy .sp-btn--primary:hover .sp-btn__arrow { background: #fff; color: var(--sp-blue-hover); }
  .sp .sp-buy .sp-btn--primary:hover .sp-btn__arrow svg { transform: translateX(2px); }
  .sp .sp-buy .sp-btn.sp-btn--gift:hover { background: var(--sp-blue); border-color: var(--sp-blue); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-btn, .sp-btn__arrow, .sp-btn__arrow svg { transition: none; }
  .sp .sp-buy .sp-btn--primary:hover, .sp .sp-buy .sp-btn--primary:hover .sp-btn__arrow svg,
  .sp .sp-buy .sp-btn--primary:active .sp-btn__arrow svg { transform: none; }
}
.sp .sp-stepper__btn { padding: 0; border: 0; background: var(--sp-surface); color: var(--sp-ink); border-radius: 0; }
.sp .sp-stepper__btn:hover:not(:disabled) { background: #EEF2F8; }
.sp .sp-select select { color: var(--sp-ink); background: var(--sp-surface); }

/* Il titolo ora è nella card: si nasconde la fascia titolo del tema sui prodotti */
body:has(.sp) .elementor[data-elementor-post-type="astra-advanced-hook"]:has(.elementor-widget-ae-post-title) { display: none; }

/* Elementor: la sezione hero non deve restringere il componente */
.elementor-widget-shortcode .sp { margin-left: auto; margin-right: auto; }

@media (min-width: 748px) {
  .sp .sp-title { font-size: 46px; line-height: 1.18; letter-spacing: -.015em; }
  .sp .sp-subtitle { font-size: 21px; }
  .sp-crumbs { display: block; margin: 0 0 14px; padding: 0 6px; font-size: 14px; color: var(--sp-subtle); }
  .sp-crumbs a { color: var(--sp-subtle); text-decoration: none; }
  .sp-crumbs a:hover { color: var(--sp-blue); }
  .sp-select--fixed { height: 60px; border-radius: 14px; padding: 0 16px; }
  .sp-select__fixed { font-size: 17px; }
  .sp-stepper__val { width: 52px; font-size: 19px; }
  .sp-facts__row { grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 16px; font-size: 15px; }
  .sp-buy--noopts { grid-template-columns: minmax(0, 1fr); grid-template-areas: "acts" "info"; }
  .sp-buy--noopts::before { display: block; grid-column: 1; grid-row: 1; }
  .sp-buy--noopts .sp-buy__actions { max-width: 420px; margin: 0 auto; }
}

/* ---------- Override del tema ---------------------------------------------
   Astra forza `p { font-weight: 400 !important }` e WooCommerce stila
   `.woocommerce-js div.product form.cart .button` con alta specificità. */
.sp .sp-badge { font-weight: 600 !important; }
.sp .sp-discount__title { font-weight: 700 !important; margin-bottom: 0 !important; }
.sp .sp-price__deadline { font-weight: 700 !important; }
.sp .sp-price__now { font-weight: 900 !important; }
.sp .sp-price__cur, .sp .sp-price__dec { font-weight: 800 !important; }
.sp .sp-price__save { font-weight: 700 !important; }
.sp .sp-or { font-weight: 600 !important; }
.sp .sp-price__note strong, .sp .sp-payinfo strong { font-weight: 700 !important; }

.sp .sp-buy.cart .sp-btn.sp-btn--primary.single_add_to_cart_button.button {
  display: flex; float: none; width: 100%; margin: 0;
  min-height: 60px; padding: 0 20px; gap: 12px;
  font-size: 19px; font-weight: 800; line-height: 1.2;
  border: 0; border-radius: 14px; background: var(--sp-blue); color: #fff;
}
.sp .sp-buy.cart .sp-btn.sp-btn--gift {
  display: flex; float: none; width: 100%; margin: 0;
  min-height: 48px; padding: 0 16px; font-size: 16px; font-weight: 600; border-radius: 14px;
}
@media (min-width: 748px) {
  .sp .sp-buy.cart .sp-btn.sp-btn--primary.single_add_to_cart_button.button { font-size: 20px; gap: 14px; }
}

/* Contenitore Alma vuoto: non deve generare uno spazio extra nella colonna flex */
.sp .alma-product-eligibility:empty { display: none; }


/* ==========================================================================
   Versione compatta: tutto l'hero deve stare nella prima schermata
   ========================================================================== */
/* ---- Mobile ---- */
.sp__card { padding: 12px 14px 14px; gap: 10px; }
.sp__top { gap: 10px; }
.sp__info { gap: 9px; }
.sp .sp-badge { padding: 4px 10px; font-size: 13px; }
.sp .sp-title { font-size: 24px; line-height: 1.18; }
.sp .sp-subtitle { font-size: 16px; line-height: 1.35; }
.sp__heading { gap: 5px; }

.sp-discount { padding: 8px 10px; grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.sp-discount__icon { display: none; }
.sp .sp-discount__title { font-size: 13px; }
.sp-discount__pct { font-size: 20px; }
.sp-discount__text { font-size: 12px; }

.sp-price__deadline { padding: 7px 12px; font-size: 13px; }
.sp-price__deadline svg { width: 15px; height: 15px; }
.sp-price__body { padding: 10px 14px 12px; gap: 7px; }
.sp-price__main { gap: 12px; }
.sp-price__old { font-size: 14px; }
.sp-price__pill { font-size: 12px; padding: 2px 7px; }
.sp-price__now { font-size: clamp(34px, calc(24cqi - 36px), 46px); }
.sp-price__save { font-size: 12.5px; padding: 3px 9px; }
.sp-price__rule { display: none; }
.sp-price__note { font-size: 13px; line-height: 1.4; }

.sp-buy { row-gap: 8px; }
.sp-buy__options { padding: 10px 12px 0; gap: 8px; }
.sp-field { gap: 4px; }
.sp-field__label { font-size: 12.5px; }
.sp-select select, .sp-stepper, .sp-select--fixed { height: 44px; }
.sp-select select { font-size: 14px; }
.sp-stepper__btn { width: 38px; }
.sp-payinfo { margin: 0 12px 10px; padding: 7px 9px; gap: 8px; font-size: 12px; line-height: 1.35; }
.sp-payinfo__icon { width: 26px; height: 26px; border-radius: 8px; }
.sp-payinfo__icon svg { width: 14px; height: 14px; }
.sp-buy__actions { gap: 7px; margin-top: 0; }
.sp .sp-buy.cart .sp-btn.sp-btn--primary.single_add_to_cart_button.button { min-height: 50px; font-size: 17px; }
.sp .sp-buy.cart .sp-btn.sp-btn--gift { min-height: 40px; font-size: 14.5px; }
.sp-btn__arrow { width: 28px; height: 28px; }
.sp-or { font-size: 12px; }
.sp__end { margin: 12px 14px 18px; }

/* ---- Desktop ---- */
@media (min-width: 748px) {
  .sp-crumbs { margin: 0 0 8px; font-size: 13px; }
  .sp__card { padding: clamp(16px, 2vw, 22px) clamp(24px, 3.2vw, 36px) clamp(16px, 2vw, 22px); gap: clamp(14px, 1.6vw, 18px); }
  .sp__top { gap: clamp(20px, 3vw, 32px); }
  .sp__info { gap: 12px; padding-top: 0; }
  .sp__heading { gap: 8px; }
  .sp .sp-badge { padding: 5px 12px; font-size: 14px; }
  .sp .sp-title { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; }
  .sp .sp-subtitle { font-size: 17px; }

  .sp-discount { padding: 12px 16px; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 1px; }
  .sp-discount__icon { display: flex; width: 40px; height: 40px; border-radius: 12px; }
  .sp-discount__icon svg { width: 20px; height: 20px; }
  .sp .sp-discount__title { font-size: 16px; }
  .sp-discount__pct { font-size: 26px; }
  .sp-discount__text { font-size: 14px; }

  .sp-price__deadline { padding: 10px 16px; font-size: 15px; }
  .sp-price__deadline svg { width: 18px; height: 18px; }
  .sp-price__body { padding: 14px clamp(16px, 5cqi, 24px) 16px; gap: 8px; }
  .sp-price__main { gap: 6px; }
  .sp-price__old { font-size: 17px; }
  .sp-price__pill { font-size: 13px; }
  .sp-price__now { font-size: clamp(44px, 17cqi, 68px); }
  .sp-price__save { font-size: 14px; padding: 4px 11px; }
  .sp-price__rule { display: block; margin: 4px 0 0; }
  .sp-price__note { font-size: 15px; line-height: 1.4; }

  .sp-buy { row-gap: 12px; }
  .sp-buy__options { padding: 14px clamp(16px, 2vw, 22px); gap: 10px clamp(12px, 1.4vw, 16px); }
  .sp-buy__actions { padding: 14px clamp(16px, 2vw, 22px); gap: 8px; }
  .sp-field { gap: 6px; }
  .sp-field__label { font-size: 15px; }
  .sp-select select, .sp-stepper, .sp-select--fixed { height: 48px; }
  .sp-select select { font-size: 16px; }
  .sp-stepper__btn { width: 46px; }
  .sp .sp-buy.cart .sp-btn.sp-btn--primary.single_add_to_cart_button.button { min-height: 54px; font-size: 18px; }
  .sp .sp-buy.cart .sp-btn.sp-btn--gift { min-height: 42px; font-size: 15px; }
  .sp-btn__arrow { width: 30px; height: 30px; }
  .sp-payinfo { padding: 0 6px; font-size: 14.5px; gap: 12px; margin: 0; }
  .sp-payinfo__icon { width: 34px; height: 34px; }
  .sp-facts__row { font-size: 14px; }
  .sp__end { margin: 22px 0 22px; }
}

/* ---- Mobile: CTA e regalo affiancati, info pagamenti più slim ---- */
@media (max-width: 747px) {
  .sp-buy__actions { flex-direction: row; align-items: stretch; gap: 8px; }
  .sp .sp-or { display: none; }
  .sp .sp-buy.cart .sp-btn.sp-btn--primary.single_add_to_cart_button.button { flex: 1.25 1 0; width: auto; min-width: 0; gap: 8px; padding: 0 12px; font-size: 16.5px; }
  .sp .sp-buy.cart .sp-btn.sp-btn--gift { flex: 1 1 0; width: auto; min-width: 0; min-height: 50px; padding: 0 8px; gap: 6px; font-size: 13.5px; line-height: 1.15; text-align: left; }
  .sp .sp-btn--gift svg { width: 17px; height: 17px; }
  .sp-btn__arrow { width: 26px; height: 26px; }
  .sp-payinfo { margin: 0 12px 8px; }
  .sp-payinfo__icon { display: none; }
}

/* Il widget "contenuto prodotto" sotto l'hero ha 70px di margine superiore impostato nei template Elementor */
body:has(.sp) .elementor-widget-woocommerce-product-content,
body:has(.sp) .elementor-widget-woocommerce-product-content > .elementor-widget-container { margin-top: 0 !important; }   /* UF: il margine e' sul contenitore interno (template 22277 ecc.) */

/* Ancora della card categoria ("Iscriviti ora" -> #scheda-iscrizione), sotto header fisso */
.sp-buy[id=scheda-iscrizione] { scroll-margin-top: 90px; }

/* "Ultimi posti disponibili" (consegna 2026-10-19): ultimo elemento della card prezzo */
.sp-price__hot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 11px 16px;
  background: #C0262D; color: #fff;
  font-size: 15px; line-height: 1.3; text-align: center;
}
.sp .sp-price__hot { font-weight: 800 !important; }
.sp-price__hot svg { width: 17px; height: 17px; flex: none; }