/* =========================================================
   EDU-MENS — MAIN STYLESHEET (v2, redesign)
   Direzione: eleganza istituzionale calda. Navy profondo + oro
   del logo. Elemento firma: l'anello puntinato del logo, ripreso
   come motivo decorativo (hero, divider) — un accento per sezione.
   Regole UX rispettate: contrasto >= 4.5:1, touch target >= 44px,
   transizioni 150-300ms, focus visibile, reduced-motion.
   ========================================================= */

/* ---------- RESET MINIMO ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-white);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--color-gold-light); color: var(--color-navy-deep); }

/* ---------- TIPOGRAFIA ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

em, .accent-word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

.lede {
  font-size: 1.1875rem;
  color: var(--color-muted);
  max-width: 52ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold);
}
.eyebrow--on-dark { color: var(--color-gold-light); }

/* ---------- LAYOUT ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section { padding-block: var(--space-7); }
.section--cream { background: var(--color-gold-cream); }
.section--navy {
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: rgba(255,255,255,0.92);
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--color-white); }
.section__intro { max-width: 62ch; }
.section__intro--center { margin-inline: auto; text-align: center; }

/* Divider firma: anello di puntini dorati, eco del logo */
.brand-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-block: var(--space-5);
}
.brand-divider::before,
.brand-divider::after {
  content: "";
  height: 1px;
  width: 72px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.brand-divider::after { background: linear-gradient(90deg, var(--color-gold), transparent); }
.brand-divider i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}
.brand-divider i:nth-child(2) { width: 8px; height: 8px; }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(14,29,54,0.02), 0 8px 24px rgba(14,29,54,0.04);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 0.875rem;
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  transition: opacity var(--dur) var(--ease);
}
.site-header__logo:hover { opacity: 0.82; }
.site-header__logo img { height: 72px; width: auto; }

.main-nav ul { display: flex; align-items: center; gap: var(--space-2); }
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;            /* touch target */
  padding-inline: var(--space-3);
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--color-navy);
  position: relative;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3);
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.main-nav a:hover,
.main-nav a:focus-visible { background: var(--color-gold-cream); }
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav .current-menu-item a::after { transform: scaleX(1); }
.main-nav .current-menu-item a { color: var(--color-gold-text); font-weight: 600; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;            /* touch target */
  background: none;
  border: none;
  color: var(--color-navy);
  border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: var(--color-gold-cream); }
.nav-toggle__bar-top,
.nav-toggle__bar-mid,
.nav-toggle__bar-bottom {
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar-top { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar-mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar-bottom { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 880px) {
  .main-nav { display: none; }
  .main-nav.is-open {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    padding: var(--space-3) var(--space-4) var(--space-4);
    animation: nav-drop 220ms var(--ease) both;
  }
  @keyframes nav-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }
  .main-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav.is-open li + li { border-top: 1px solid var(--color-border); }
  .main-nav.is-open a { width: 100%; min-height: 48px; border-radius: 0; padding-inline: var(--space-2); }
  .main-nav.is-open a::after { display: none; }
  .main-nav.is-open .current-menu-item a { background: var(--color-gold-cream); }
  .nav-toggle { display: inline-flex; }
}

/* ---------- HERO (navy profondo, anello firma) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy-deep);
  background-size: cover;
  background-position: center;
  color: rgba(255,255,255,0.92);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
/* Overlay scuro sopra la foto di sfondo: garantisce leggibilità del
   testo qualunque sia la luminosità dell'immagine. Se .hero non ha una
   foto impostata (background-image inline), resta comunque coerente
   con la doppia sfumatura navy/oro usata prima come sfondo pieno. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 85% 10%, rgba(183,145,46,0.16), transparent 55%),
    linear-gradient(165deg, rgba(11,26,51,0.6) 0%, rgba(9,20,40,0.68) 78%);
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-6);
  align-items: center;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--color-white);
  margin: 0 0 var(--space-4);
  max-width: 16ch;
}
.hero__title em {
  color: var(--color-gold-light);
  font-weight: 500;
}
.hero__lede {
  font-size: 1.1875rem;
  color: rgba(255,255,255,0.78);
  max-width: 50ch;
  margin-bottom: var(--space-5);
}
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Emblema con anello puntinato attorno al logo */
.hero__emblem {
  position: relative;
  display: grid;
  place-items: center;
}
.hero__emblem img {
  /*width: min(340px, 78%);*/
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.35));
}
@keyframes ring-rotate { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero__emblem { order: -1; }
  .hero__emblem img { width: min(200px, 55%); }
}

/* ---------- BOTTONI (touch target >= 44px) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.75em 1.75em;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-gold);
  color: var(--color-navy-deep);
  box-shadow: 0 8px 24px rgba(183,145,46,0.35);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--color-gold-light);
  box-shadow: 0 10px 28px rgba(183,145,46,0.45);
}

.btn--outline {
  background: transparent;
  color: var(--color-navy);
  border-color: currentColor;
}
.btn--outline:hover, .btn--outline:focus-visible {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}
.btn--outline-light {
  background: transparent;
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.4);
}
.btn--outline-light:hover, .btn--outline-light:focus-visible {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.85);
}

.btn--navy {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn--navy:hover, .btn--navy:focus-visible { background: var(--color-navy-light); }

/* ---------- SEZIONE VALORI (3 pilastri) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.pillar {
  padding: var(--space-5) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}
.pillar::before {
  content: "";
  position: absolute;
  top: 0; left: var(--space-4); right: var(--space-4);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}
.pillar__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-gold-cream);
  color: var(--color-gold-text);
  margin-bottom: var(--space-3);
}
.pillar__icon svg { width: 24px; height: 24px; }
.pillar h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.pillar p { color: var(--color-muted); font-size: var(--fs-small); }

/* ---------- CARD CORSO ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.card-corso {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.card-corso:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.card-corso__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-navy), var(--color-navy-deep));
}
.card-corso__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.card-corso:hover .card-corso__media img { transform: scale(1.04); }
.card-corso__media .badge {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
}
/* Quando ci sono due badge (stato + sconto), il secondo scende sotto
   al primo invece di sovrapporlo esattamente. */
.card-corso__media .badge ~ .badge {
  top: calc(var(--space-3) + 2rem);
}
.card-corso__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.card-corso__title { font-size: 1.3125rem; margin: 0; }
.card-corso__title a:hover { color: var(--color-gold-text); }
.card-corso__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  color: var(--color-muted);
}
.card-corso__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-corso__meta svg { width: 15px; height: 15px; color: var(--color-gold-text); flex: none; }
.card-corso__excerpt {
  color: var(--color-muted);
  font-size: var(--fs-small);
}
.card-corso__footer {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.card-corso__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-navy);
}

/* Prezzo a due quote (iscrizione in primo piano + partecipazione
   sotto, in secondo piano): usato sia nella card sia nella scheda
   corso, eredita la dimensione del prezzo dal contesto in cui è
   inserito (1.25rem nella card, 2rem nella purchase bar). */
.corso-prezzo-doppia {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.corso-prezzo-doppia__iscrizione-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted);
}
.corso-prezzo-doppia__partecipazione {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-muted);
  margin-top: 0.25em;
}
.corso-prezzo-doppia__nota {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-muted);
  margin-top: 0.125em;
}
.card-corso__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-gold-text);
}
.card-corso__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.card-corso__link:hover svg { transform: translateX(3px); }

/* ---------- CARD ARTICOLO (blog) ---------- */
.card-articolo {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.card-articolo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.card-articolo__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-navy), var(--color-navy-deep));
}
.card-articolo__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.card-articolo:hover .card-articolo__media img { transform: scale(1.04); }
.card-articolo__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.card-articolo__date {
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.card-articolo__title { font-size: 1.3125rem; margin: 0; }
.card-articolo__title a:hover { color: var(--color-gold-text); }
.card-articolo__excerpt {
  color: var(--color-muted);
  font-size: var(--fs-small);
}
.card-articolo__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-gold-text);
}
.card-articolo__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.card-articolo__link:hover svg { transform: translateX(3px); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  backdrop-filter: blur(4px);
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge--open { background: rgba(255,255,255,0.92); color: var(--color-success); }
.badge--closed { background: rgba(255,255,255,0.92); color: var(--color-error); }
.badge--upcoming { background: rgba(255,255,255,0.92); color: var(--color-gold-text); }

/* Etichetta sconto early-bird: versione testuale (oro), sempre
   affiancata al badge di stato iscrizioni — visibile su ogni
   dispositivo, a differenza della sagoma "scoppio" qui sotto. */
.badge--discount {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-navy-deep);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(183,145,46,0.5);
}
.badge--discount::before { background: var(--color-navy-deep); }

/* Etichetta sconto "a cartellino": aggangiata subito dopo il prezzo
   (non più fluttuante nello spazio libero della barra), con una sola
   punta a sinistra che richiama proprio la sagoma di un cartellino
   prezzo — sobria (nessuna sfumatura di "punte" multiple) ma con un
   bordo di superficie in vetro e ombra "material" per farla risaltare. */
.discount-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.discount-tag__shape {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 50%, 18px 0, 100% 0, 100% 100%, 18px 100%);
  background: linear-gradient(150deg, var(--color-navy-light) 0%, var(--color-navy-deep) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 4px 5px -2px rgba(14,29,54,0.25),
    0 6px 10px 0 rgba(14,29,54,0.16);
}
/* Forellino del cartellino: un piccolo punto vicino alla punta. */
.discount-tag__shape::after {
  content: "";
  position: absolute;
  top: 50%; left: 9px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: translateY(-50%);
}
.discount-tag__text {
  position: relative;
  padding: 0.55rem 0.9rem 0.55rem 1.75rem;
  color: var(--color-white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .discount-tag__text { font-size: 0.6875rem; white-space: normal; }
}

/* ---------- ETIMOLOGIA / SIGNIFICATO NOME ---------- */
.etymology {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.etymology__card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.etymology__word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  color: var(--color-gold-text);
  margin-bottom: var(--space-2);
}
.etymology__card p { color: var(--color-muted); font-size: var(--fs-small); }

/* ---------- CTA FINALE ---------- */
.cta-panel {
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
}
.cta-panel p { color: rgba(255,255,255,0.75); }
.cta-panel .btn { margin-top: var(--space-4); }

/* ---------- FORM ---------- */
.form-field { margin-bottom: var(--space-4); }
.form-field label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-small);
  margin-bottom: var(--space-1);
  color: var(--color-navy);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75em 1em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(183,145,46,0.18);
}
.form-check {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}
.form-check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--color-gold); }
.form-check a { color: var(--color-gold-text); text-decoration: underline; }
.edumens-form-nota {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-align: center;
}

.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.notice--success { background: rgba(46,125,79,0.1); color: var(--color-success); border: 1px solid rgba(46,125,79,0.25); }
.notice--error { background: rgba(179,38,30,0.08); color: var(--color-error); border: 1px solid rgba(179,38,30,0.25); }
.notice--error a { color: inherit; text-decoration: underline; }

/* ---------- COPYRIGHT NOTICE (archivio corsi) ---------- */
.copyright-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.copyright-notice__icon {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--color-gold-cream);
  color: var(--color-gold-text);
}
.copyright-notice__text h2 {
  font-size: var(--fs-h3);
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}
.copyright-notice__text p {
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin: 0;
}
.copyright-notice__text a {
  color: var(--color-gold-text);
  text-decoration: underline;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .copyright-notice { flex-direction: column; align-items: flex-start; }
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--color-navy-deep);
  color: rgba(255,255,255,0.8);
  padding-block: var(--space-6) var(--space-4);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.site-footer a:hover { color: var(--color-gold-light); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
}
.footer-grid h4 {
  color: var(--color-white);
  font-size: 1rem;
  margin-bottom: var(--space-3);
}
.footer-grid p { font-size: var(--fs-small); color: rgba(255,255,255,0.65); }
.footer-grid ul li { margin-bottom: var(--space-2); }

/* Colonna marchio: logo + nome + tagline */
.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  margin-bottom: var(--space-3);
}
.footer-brand__logo img { height: 60px; width: auto; }

/* Icone social: cerchio sottile, oro all'hover */
.social-icons {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.social-icons__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  min-height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.8);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social-icons__link svg { width: 18px; height: 18px; }
.social-icons__link:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy-deep);
}

.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site-footer__legal p { margin: 0; }
.site-footer__legal p + p { margin-top: var(--space-1); }
.site-footer__policy-links { white-space: nowrap; }

/* ---------- UTILITY ---------- */
.text-center { text-align: center; }
.mt-5 { margin-top: var(--space-5); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* Contenuto pagine generiche (prose) */
.prose { max-width: 720px; }
.prose h2 { margin-top: var(--space-6); }
.prose a { color: var(--color-gold-text); text-decoration: underline; }

/* =========================================================
   ARCHIVIO CORSI
   ========================================================= */
.archive-hero {
  background:
    radial-gradient(ellipse 60% 100% at 90% 0%, rgba(183,145,46,0.14), transparent 55%),
    linear-gradient(165deg, var(--color-navy) 0%, var(--color-navy-deep) 80%);
  color: rgba(255,255,255,0.9);
  padding-block: var(--space-6);
}
.archive-hero h1 { color: var(--color-white); margin-bottom: var(--space-2); }
.archive-hero__lede {
  color: rgba(255,255,255,0.72);
  max-width: 56ch;
  font-size: 1.0625rem;
  margin: 0;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* touch target */
  padding: 0.4em 1.2em;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-navy);
  background: var(--color-white);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filter-pill:hover { border-color: var(--color-gold); color: var(--color-gold-text); }
.filter-pill.is-active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.archive-pagination { margin-top: var(--space-6); }
.archive-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-weight: 500;
  color: var(--color-navy);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.archive-pagination .page-numbers:hover { border-color: var(--color-gold); }
.archive-pagination .page-numbers.current {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

/* =========================================================
   SCHEDA CORSO (v2 — cover fotografica, purchase bar, dettagli)
   ========================================================= */

/* Cover: immagine in evidenza come sfondo + overlay navy per
   garantire il contrasto del testo bianco (WCAG) su qualsiasi foto */
.corso-cover {
  position: relative;
  background-color: var(--color-navy-deep);
  background-size: cover;
  background-position: center;
  padding-block: clamp(4rem, 10vw, 7rem);
}
.corso-cover__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(14,29,54,0.92) 0%,
    rgba(14,29,54,0.78) 45%,
    rgba(14,29,54,0.45) 100%);
}
.corso-cover__content { position: relative; }
.corso-cover .badge { margin-bottom: var(--space-3); }
.corso-cover__title {
  color: var(--color-white);
  font-size: var(--fs-display);
  max-width: 18ch;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.corso-cover__subtitle {
  color: var(--color-gold-light);
  font-size: 1.125rem;
  font-weight: 600;
  max-width: 48ch;
  margin: calc(var(--space-3) * -0.5) 0 var(--space-3);
}
.corso-cover__lede {
  color: rgba(255,255,255,0.82);
  font-size: 1.125rem;
  max-width: 58ch;
  margin: 0;
}

/* Breadcrumb */
.corso-breadcrumb {
  background: var(--color-navy);
  padding-block: 0.75rem;
  font-size: 0.875rem;
}
.corso-breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.55);
}
.corso-breadcrumb a {
  color: rgba(255,255,255,0.85);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.corso-breadcrumb a:hover { color: var(--color-gold-light); }
.corso-breadcrumb__current {
  color: rgba(255,255,255,0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

/* Purchase bar: prezzo + CTA sempre visibili subito sotto l'hero */
.corso-purchase-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(14,29,54,0.05);
}
.corso-purchase-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  flex-wrap: wrap;
}
/* Colonna prezzo: riga principale (prezzo + eventuale etichetta
   sconto) sopra, periodo iscrizioni sotto in corpo minore — due righe
   compatte invece di un'unica riga lunghissima che a certe larghezze
   lasciava troppo poco spazio al blocco stato/CTA a destra. */
.corso-purchase-bar__price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}
.corso-purchase-bar__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.corso-purchase-bar__price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-navy);
}
.corso-purchase-bar__price del { font-size: 1.125rem; color: var(--color-muted); margin-right: 0.4em; }
.corso-purchase-bar__price ins { text-decoration: none; }
.corso-purchase-bar__price-row .discount-tag { align-self: center; }
.corso-purchase-bar__window { font-size: var(--fs-small); color: var(--color-muted); }
.corso-purchase-bar__closed {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.corso-purchase-bar__closed span { font-weight: 600; color: var(--color-error); }
@media (max-width: 640px) {
  .corso-purchase-bar__inner { flex-direction: column; align-items: stretch; }
  .corso-purchase-bar__cart .btn, .corso-purchase-bar__closed { width: 100%; }
  .corso-purchase-bar__closed { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Corpo a due colonne */
.corso-body { padding-top: var(--space-5); }
.corso-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 960px) {
  .corso-layout { grid-template-columns: 1fr; }
}

.corso-content .prose { margin-bottom: var(--space-5); }
.corso-content .prose h2 {
  font-size: 1.5rem;
  margin-top: 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-gold-cream);
  position: relative;
}
.corso-content .prose h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 56px; height: 2px;
  background: var(--color-gold);
}

.corso-calendario li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) 1.75rem;
  border-bottom: 1px solid var(--color-border);
}
.corso-calendario li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1.1em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}
.corso-calendario li:last-child { border-bottom: none; }

/* Pannello dettagli (sticky, stile "box" come il riferimento) */
.corso-aside { position: sticky; top: 96px; }
@media (max-width: 960px) { .corso-aside { position: static; order: -1; } }

.corso-details {
  background: var(--color-gold-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}
.corso-details::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}
.corso-details__title {
  font-size: 1.125rem;
  margin-bottom: var(--space-3);
}
.corso-details__list {
  margin: 0;
  display: grid;
}
.corso-details__list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: 0.65rem;
  border-bottom: 1px solid rgba(183,145,46,0.18);
}
.corso-details__list > div:last-child { border-bottom: none; }
.corso-details__list dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  flex: none;
}
.corso-details__list dd {
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-navy);
  text-align: right;
}
/* Righe con un valore potenzialmente lungo (es. "Riconoscimento"):
   etichetta sopra, testo sotto allineato a sinistra invece che in
   riga con la label — un valore lungo giustificato a destra andava a
   capo su più righe "a scaletta", difficile da leggere. */
.corso-details__list > div.corso-details__row--wide {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.corso-details__row--wide dd { text-align: left; }
.verified-badge {
  display: inline-block; /* il reset globale mette svg { display:block }: qui deve restare in riga col testo */
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-verified);
  vertical-align: -0.1em;
  margin-left: 0.25em;
  flex-shrink: 0;
}
.corso-details__cta { margin-top: var(--space-4); }

/* Pulsante download PDF: stesso peso visivo del CTA di iscrizione,
   in rosso Adobe per essere subito riconoscibile come "scarica file". */
.corso-panel__pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-3);
  padding: 0.75em 1.5em;
  border-radius: 999px;
  background: var(--color-pdf-red);
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--fs-small);
  box-shadow: 0 8px 20px rgba(235,16,0,0.28);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.corso-panel__pdf svg { width: 20px; height: 20px; flex-shrink: 0; }
.corso-panel__pdf:hover {
  background: var(--color-pdf-red-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(235,16,0,0.36);
}

/* =========================================================
   LOCANDINA DEL CORSO (galleria prodotto) + LIGHTBOX
   Card "vetrina": anteprima verticale della locandina con invito
   a ingrandire, più eventuali miniature per altre immagini della
   galleria. Il click apre un lightbox a schermo intero pensato
   per leggere i dettagli minuti di un documento tipo flyer.
   ========================================================= */
.corso-poster {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.corso-poster::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}
@media (max-width: 560px) {
  .corso-poster { flex-direction: column; }
}

.corso-poster__frame {
  flex: none;
  width: 152px;
  aspect-ratio: 3 / 4.24; /* proporzione A4 verticale */
  position: relative;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--color-gold-cream);
  box-shadow: 0 6px 16px rgba(14,29,54,0.16);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (max-width: 560px) {
  .corso-poster__frame { width: 128px; align-self: center; }
}
.corso-poster__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.corso-poster__frame:hover,
.corso-poster__frame:focus-visible {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 0 12px 28px rgba(14,29,54,0.24);
}
.corso-poster__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: rgba(14,28,51,0.72);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.corso-poster__zoom svg { width: 22px; height: 22px; }
.corso-poster__frame:hover .corso-poster__zoom,
.corso-poster__frame:focus-visible .corso-poster__zoom {
  opacity: 1;
}

.corso-poster__info { flex: 1; min-width: 0; padding-top: var(--space-1); }
.corso-poster__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-bottom: 0.35rem;
}
.corso-poster__info p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.corso-poster__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.corso-poster__thumb {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.corso-poster__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.corso-poster__thumb:hover,
.corso-poster__thumb:focus-visible {
  border-color: var(--color-gold);
  transform: translateY(-1px);
}

/* Lightbox: overlay a schermo intero, sfondo navy per far risaltare
   il documento e permettere di leggerne i dettagli più piccoli. */
.corso-lightbox[hidden] { display: none; }
.corso-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.corso-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9,17,32,0.92);
  backdrop-filter: blur(2px);
}
.corso-lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(92vw, 900px);
  max-height: 90vh;
  padding: var(--space-2);
}
.corso-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.corso-lightbox__img {
  display: block;
  max-width: min(80vw, 640px);
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  background: var(--color-white);
}
.corso-lightbox__counter {
  font-size: var(--fs-small);
  color: var(--color-gold-light);
  letter-spacing: 0.04em;
}
.corso-lightbox__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-white);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  transition: background var(--dur) var(--ease);
}
.corso-lightbox__close:hover,
.corso-lightbox__close:focus-visible { background: rgba(255,255,255,0.24); }
.corso-lightbox__close svg { width: 20px; height: 20px; }
.corso-lightbox__nav {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-white);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.corso-lightbox__nav:hover,
.corso-lightbox__nav:focus-visible { background: rgba(255,255,255,0.24); }
.corso-lightbox__nav:active { transform: scale(0.94); }
.corso-lightbox__nav svg { width: 22px; height: 22px; }
.corso-lightbox__nav[hidden] { display: none; }
@media (max-width: 640px) {
  .corso-lightbox__panel { flex-direction: column; max-width: 94vw; }
  .corso-lightbox__nav--prev, .corso-lightbox__nav--next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .corso-lightbox__nav--prev { left: 4px; }
  .corso-lightbox__nav--next { right: 4px; }
  .corso-lightbox__close { top: -44px; }
}
html.has-corso-lightbox { overflow: hidden; }

/* Avvisi WooCommerce con lo stile del tema */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-weight: 500;
}
.woocommerce-message { background: rgba(46,125,79,0.1); color: var(--color-success); border: 1px solid rgba(46,125,79,0.25); }
.woocommerce-info { background: var(--color-gold-cream); color: var(--color-gold-text); border: 1px solid var(--color-gold-light); }
.woocommerce-error { background: rgba(179,38,30,0.08); color: var(--color-error); border: 1px solid rgba(179,38,30,0.25); }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  float: right;
  font-weight: 600;
  text-decoration: underline;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}

/* =========================================================
   SCROLL-REVEAL (usato con assets/js/reveal.js)
   Con prefers-reduced-motion le transizioni sono azzerate dai
   token globali: gli elementi appaiono senza movimento.
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.reveal-d1.is-visible { transition-delay: 110ms; }
.reveal-d2.is-visible { transition-delay: 220ms; }
.reveal-d3.is-visible { transition-delay: 330ms; }

/* Se il JS non carica per qualsiasi motivo, nessun contenuto deve
   restare invisibile: dopo l'animazione CSS di fallback tutto appare. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   PAGINA CHI SONO
   ========================================================= */
.chisono-hero {
  background:
    radial-gradient(ellipse 55% 80% at 92% 8%, rgba(183,145,46,0.12), transparent 60%),
    var(--color-gold-cream);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  overflow: hidden;
}
.chisono-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}
.chisono-hero__title {
  font-size: var(--fs-display);
  margin-bottom: var(--space-2);
}
.chisono-hero__title em { color: var(--color-gold-text); }
.chisono-hero__role {
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-bottom: var(--space-4);
}
.chisono-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 1em;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-navy);
}

/* Cornice fotografica: ritratto professionale con anello firma */
.chisono-hero__media { display: grid; place-items: center; }
.photo-frame {
  position: relative;
  width: min(400px, 88%);
  aspect-ratio: 4 / 5;
}
.photo-frame__ring {
  position: absolute;
  inset: -7% -9%;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--color-gold) 0deg 1.4deg, transparent 1.4deg 8deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  opacity: 0.5;
  animation: ring-rotate 80s linear infinite;
}
.photo-frame__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  border: 4px solid var(--color-white);
}
.photo-frame__img--placeholder {
  object-fit: contain;
  padding: 12%;
  background: var(--color-white);
}
/* Angolo decorativo oro dietro la foto */
.photo-frame::after {
  content: "";
  position: absolute;
  right: -14px; bottom: -14px;
  width: 45%; height: 45%;
  border-right: 3px solid var(--color-gold);
  border-bottom: 3px solid var(--color-gold);
  border-radius: 0 0 var(--radius-md) 0;
  z-index: -1;
}

@media (max-width: 880px) {
  .chisono-hero__grid { grid-template-columns: 1fr; }
  .chisono-hero__media { order: -1; }
  .photo-frame { width: min(280px, 74%); }
}

/* Riga testo + logo partner (es. Centro OIDA, Thrust Group): testo a
   sinistra, logo in evidenza a destra, impilati su mobile. */
.logo-row {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 880px) {
  .logo-row { grid-template-columns: 1fr; }
  .logo-row > :last-child { order: -1; }
}
.logo-badge {
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-badge img { width: 100%; max-width: 220px; height: auto; display: block; }
.partner-logo { display: block; width: 100%; max-width: 220px; height: auto; }

/* Timeline verticale con linea e marker dorati */
ol.timeline {
  /* selettore ol.timeline (non solo .timeline): serve per vincere in
     specificita' sul reset "ol[class] { padding:0; margin:0 }" che
     altrimenti azzera padding/margin e disallinea linea e marker */
  margin-top: var(--space-5);
  position: relative;
  display: grid;
  gap: var(--space-5);
  max-width: 720px;
  padding-left: 2.25rem;
}
ol.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-gold), rgba(183,145,46,0.15));
}
.timeline__item { position: relative; }
.timeline__marker {
  position: absolute;
  left: -2.25rem;
  top: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-gold);
  box-shadow: 0 0 0 5px rgba(183,145,46,0.14);
}
.timeline__item h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.timeline__item p { color: var(--color-muted); }

/* Banda citazione */
.quote-band {
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  padding-block: var(--space-6);
}
.quote-band__quote {
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
}
.quote-band__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-white);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.quote-band__quote p em { color: var(--color-gold-light); }
.quote-band__quote footer {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Card team (Comitato / Staff / Coordinamento) */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.team-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.team-card__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--color-gold-cream), rgba(212,181,87,0.35));
  color: var(--color-gold-text);
  margin-bottom: var(--space-3);
}
.team-card__icon svg { width: 26px; height: 26px; }
.team-card h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.team-card p { color: var(--color-muted); font-size: var(--fs-small); }

/* =========================================================
   HOME v3 — Marquee, Steps, Audience, FAQ, Testimonianze
   ========================================================= */

/* Marquee delle parole del logo — CSS-only, loop continuo.
   Con prefers-reduced-motion l'animazione si ferma (token globali)
   e la fascia resta statica ma leggibile. */
.word-marquee {
  background: var(--color-navy-deep);
  border-block: 1px solid rgba(212,181,87,0.25);
  overflow: hidden;
  padding-block: 0.9rem;
}
.word-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
  animation: marquee 42s linear infinite;
  will-change: transform;
}
.word-marquee span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--color-gold-light);
  opacity: 0.85;
}
.word-marquee i {
  font-style: normal;
  color: rgba(212,181,87,0.4);
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Steps "come funziona" su banda navy */
.steps-band { position: relative; overflow: hidden; }
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: var(--space-3);
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-gold-light);
  margin-bottom: var(--space-3);
}
.step h3 { color: var(--color-white); font-size: 1.25rem; margin-bottom: var(--space-2); }
.step p { color: rgba(255,255,255,0.72); font-size: var(--fs-small); }
/* linea di connessione tra gli step (solo desktop) */
@media (min-width: 900px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.4rem;
    left: calc(100% - var(--space-3));
    width: calc(var(--space-5) + var(--space-3));
    height: 1px;
    background: linear-gradient(90deg, rgba(212,181,87,0.5), transparent);
  }
}

/* Audience cards (Scuola / Professionisti / Aziende) */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.audience-card {
  position: relative;
  background: linear-gradient(170deg, var(--color-white), var(--color-gold-cream));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.audience-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(183,145,46,0.35) 0deg 2deg, transparent 2deg 12deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 55%, #000 56%);
          mask: radial-gradient(farthest-side, transparent 55%, #000 56%);
  opacity: 0.6;
}
.audience-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.audience-card__head svg {
  width: 30px; height: 30px;
  color: var(--color-gold-text);
  flex: none;
}
.audience-card__head h3 { margin: 0; font-size: 1.25rem; }
.audience-card p { color: var(--color-muted); font-size: var(--fs-small); }
.audience-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-2);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-gold-text);
}
.audience-card__link:hover { color: var(--color-navy); }

/* FAQ — accordion nativo <details>, niente JS necessario */
.faq-wrap { max-width: 820px; }
.faq { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.faq__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item[open] {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-card);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;                /* touch target abbondante */
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-navy);
  list-style: none;                /* rimuove il marker di default */
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--color-gold-text); }
.faq__chevron {
  width: 20px; height: 20px;
  flex: none;
  color: var(--color-gold-text);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-small);
  animation: faq-open 260ms var(--ease);
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Testimonianze (predisposte, attive solo quando ci saranno reali) */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.testimonial {
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4) var(--space-4);
  position: relative;
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.5rem; left: var(--space-4);
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-gold-light);
  opacity: 0.6;
}
.testimonial blockquote { margin: 0 0 var(--space-3); }
.testimonial blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--color-ink);
}
.testimonial figcaption {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-gold-text);
}

/* =========================================================
   FOTO CONTESTO AZIENDALE — media card destinatari + banda corporate
   ========================================================= */
.audience-card__media {
  margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) var(--space-4);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.audience-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.audience-card:hover .audience-card__media img { transform: scale(1.04); }
/* con la foto, l'anello decorativo nell'angolo va spento (si sovrapporrebbe) */
.audience-card:has(.audience-card__media)::before { display: none; }

.corporate-band {
  position: relative;
  background-color: var(--color-navy-deep);
  background-size: cover;
  background-position: center;
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.corporate-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(14,29,54,0.93) 0%,
    rgba(14,29,54,0.75) 55%,
    rgba(14,29,54,0.4) 100%);
}
.corporate-band__content { position: relative; max-width: 640px; }
.corporate-band__content h1,
.corporate-band__content h2 { color: var(--color-white); }
.corporate-band__lede {
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-4);
}

/* Pannello "vetro": leggera base bianca semi-trasparente + sfocatura,
   usato in apertura pagina (hero fotografico) per garantire leggibilità
   del testo qualunque sia la luminosità della foto sottostante. */
.corporate-band__panel {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
@supports not ( backdrop-filter: blur(1px) ) {
  .corporate-band__panel { background: rgba(14,29,54,0.55); }
}

/* =========================================================
   ARCHIVE HERO CON FOTO + CARRELLO/CHECKOUT CLASSICI
   ========================================================= */

/* Hero archivio: funziona con o senza foto di sfondo.
   Queste regole (in coda al file) sovrascrivono le precedenti. */
.archive-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy-deep);
  background-size: cover;
  background-position: center;
}
.archive-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 90% 0%, rgba(183,145,46,0.14), transparent 55%),
    linear-gradient(100deg, rgba(14,29,54,0.94) 0%, rgba(14,29,54,0.75) 55%, rgba(14,29,54,0.5) 100%);
}
.archive-hero__content { position: relative; }

/* --- Pulsanti dentro gli avvisi WooCommerce (Visualizza carrello /
       Continua con gli acquisti): veri bottoni, non link --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-info .showcoupon,
.woocommerce-info .showlogin {
  float: none;
  order: 2;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.4em 1.2em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  background: var(--color-navy);
  color: var(--color-white);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-info .showcoupon:hover,
.woocommerce-info .showlogin:hover {
  background: var(--color-navy-light);
  transform: translateY(-1px);
}
/* Testo abbreviato del link coupon su mobile (vedi
   edumens_checkout_coupon_message in inc/woocommerce-checkout.php):
   sotto i 480px il pulsante mostra solo "Applica codice" per restare
   su una riga sola dentro alla pillola. */
.showcoupon__short { display: none; }
@media (max-width: 480px) {
  .showcoupon__full { display: none; }
  .showcoupon__short { display: inline; }
}

/* Riepilogo errori "campo obbligatorio" al checkout su mobile (vedi
   assets/js/checkout-error-summary.js): quando lo script collassa
   l'elenco lungo in un'unica frase, questa la mette in evidenza con
   icona e testo centrati invece di lasciarla come una riga di lista
   qualunque dentro al box d'errore. */
@media (max-width: 640px) {
  .woocommerce-error li.edumens-errore-riepilogo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    text-align: center;
    font-size: 0.9375rem;
  }
  .woocommerce-error li.edumens-errore-riepilogo svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--color-error);
  }
}

.woocommerce-message .button.edumens-continua {
  margin-left: 0;
  background: transparent;
  color: var(--color-success);
  border: 1.5px solid currentColor;
}
.woocommerce-message .button.edumens-continua:hover {
  background: rgba(46,125,79,0.08);
}

/* --- Carrello vuoto --- */
.cart-empty-state {
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
  padding-block: var(--space-6);
}
.cart-empty-state__ring {
  width: 96px; height: 96px;
  margin: 0 auto var(--space-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-gold-text);
  background: var(--color-gold-cream);
  position: relative;
}
.cart-empty-state__ring::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--color-gold) 0deg 1.6deg, transparent 1.6deg 10deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: 0.5;
}
.cart-empty-state__ring svg { width: 40px; height: 40px; }
.cart-empty-state h2 { margin-bottom: var(--space-2); }
.cart-empty-state p { color: var(--color-muted); margin-bottom: var(--space-4); }

/* --- Carrello classico (tabella shortcode) --- */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Solo la tabella del carrello: quella del riepilogo ordine al
   checkout vive già dentro una card con la propria ombra (vedi
   #order_review), un'altra qui sopra sarebbe un'ombra nell'ombra. */
.woocommerce-cart table.shop_table.cart { box-shadow: var(--shadow-card); }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.woocommerce table.shop_table thead th {
  background: var(--color-gold-cream);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}
.woocommerce table.shop_table .product-thumbnail img {
  width: 72px; height: 54px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.woocommerce table.shop_table .product-name a {
  font-weight: 600;
  color: var(--color-navy);
}
.woocommerce table.shop_table .product-name a:hover { color: var(--color-gold-text); }
.woocommerce table.shop_table .product-remove a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  color: var(--color-error);
  border: 1px solid rgba(179,38,30,0.3);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.woocommerce table.shop_table .product-remove a:hover { background: rgba(179,38,30,0.08); }
.woocommerce .quantity .qty {
  width: 70px;
  min-height: 44px;
  padding: 0.4em;
  text-align: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Bottoni WooCommerce generici -> stile del tema */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce label.edumens-upload__button,
.woocommerce #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75em 1.75em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
  text-decoration: none;
  background: var(--color-navy);
  color: var(--color-white);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce label.edumens-upload__button:hover,
.woocommerce #place_order:hover {
  background: var(--color-navy-light);
  transform: translateY(-1px);
}
.woocommerce button.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* CTA principali (checkout / conferma ordine) in oro */
.woocommerce .checkout-button,
.woocommerce #place_order {
  background: var(--color-gold);
  color: var(--color-navy-deep);
  box-shadow: 0 8px 24px rgba(183,145,46,0.35);
  width: 100%;
}
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
  background: var(--color-gold-light);
}

/* Sul carrello i metodi di pagamento espresso (PayPal, Google Pay,
   Apple Pay) non sono ancora utilizzabili: mancano i dati obbligatori
   del checkout. Restano solo al passaggio successivo (pagina di
   pagamento) — qui l'unica azione è "Procedi con l'ordine". Le classi
   sono quelle di WooCommerce PayPal Payments; !important perché lo
   script del plugin può impostare stili inline dopo il rendering. */
body.woocommerce-cart .ppcp-messages,
body.woocommerce-cart .ppc-button-wrapper {
  display: none !important;
}
.cart-payment-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.cart-payment-note__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-gold-text);
}

/* Totali carrello: stessa "firma" visiva del pannello Dettagli del
   corso (barra dorata in alto + ombra), per coerenza tra le pagine. */
.cart_totals {
  background: var(--color-gold-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.cart_totals::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}
.cart_totals h2 { font-size: 1.25rem; }
.cart_totals table.shop_table { border: none; }
.cart_totals table.shop_table th { background: transparent; }

/* Coupon nel carrello: l'input si restringe, il bottone non va mai a capo */
.woocommerce .coupon {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.woocommerce .coupon .input-text {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 48px;
  padding: 0.6em 1em;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
}
.woocommerce .coupon .button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Checkout classico ("Modulo di iscrizione") --- */

/* Titolo di sezione con badge numerato: effetto "percorso guidato" */
.woocommerce-checkout .checkout-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.25rem;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-gold-cream);
  position: relative;
}
.woocommerce-checkout .checkout-section-title::before {
  content: "1";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
}
.woocommerce-checkout .checkout-section-title::after {
  content: "";
  position: absolute;
  left: 42px; bottom: -2px;
  width: 56px; height: 2px;
  background: var(--color-gold);
}

/* Griglia: card "i tuoi dati" a sinistra, riepilogo ordine sticky a destra.
   Stesso trattamento visivo (bordo + ombra) per dare peso paritario
   alle due colonne, invece di una sola card "importante" a destra. */
form.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  grid-template-rows: auto 1fr;
  gap: var(--space-3) var(--space-6);
  align-items: start;
}
@media (max-width: 960px) {
  form.woocommerce-checkout { grid-template-columns: 1fr; grid-template-rows: none; }
}
form.woocommerce-checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
@media (max-width: 960px) {
  form.woocommerce-checkout #customer_details { grid-row: auto; padding: var(--space-4); }
}
form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; }
@media (max-width: 960px) {
  form.woocommerce-checkout #order_review_heading,
  form.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; }
}
form.woocommerce-checkout #order_review_heading {
  font-size: 1.25rem;
  margin: 0 0 var(--space-3);
}
form.woocommerce-checkout #order_review {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  position: sticky;
  top: 96px;
}
@media (max-width: 960px) {
  form.woocommerce-checkout #order_review { position: static; }
}

/* Riepilogo ordine: righe pulite, totale ben in vista */
form.woocommerce-checkout #order_review table.shop_table { border: none; }
form.woocommerce-checkout #order_review table.shop_table thead th,
form.woocommerce-checkout #order_review table.shop_table td,
form.woocommerce-checkout #order_review table.shop_table th {
  padding-inline: 0;
  background: transparent;
}
form.woocommerce-checkout #order_review .order-total th,
form.woocommerce-checkout #order_review .order-total td {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  border-bottom: none;
}
form.woocommerce-checkout #order_review .order-total .amount { font-family: var(--font-display); }

/* Rassicurazione sotto al pulsante di conferma ordine */
.edumens-checkout-trust {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-align: center;
}

/* Campi del form */
.woocommerce form .form-row { margin-bottom: var(--space-3); }
.woocommerce form .form-row label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}
.woocommerce form .form-row .required { color: var(--color-error); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65em 1em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(183,145,46,0.18);
}
/* select2 di WooCommerce (paese/provincia) allineato ai campi */
.select2-container--default .select2-selection--single {
  min-height: 48px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding-inline: 1em 2em;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }

/* Separatore "2. Dati professionali": CSS-only, ancorato al campo
   billing_titolo_studio stesso (non un elemento fratello a parte).
   Necessario perché WooCommerce riordina via JS i campi indirizzo in
   base al paese selezionato spostando ogni <p class="form-row"> come
   unità atomica: un <h3> iniettato accanto ai campi finirebbe
   "orfanizzato" e spostato in cima al form (bug osservato in
   produzione con la versione precedente, iniettata via hook PHP). */
.woocommerce form .form-row.edumens-sezione-professionale {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.woocommerce form .form-row.edumens-sezione-professionale::before {
  content: "2. Dati professionali";
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}

/* Sezione "3. Dati di fatturazione ulteriori": stesso trattamento
   CSS-only della sezione 2 (titolo via ::before sul .form-row stesso,
   non un <h3> fratello — vedi commento PHP in
   edumens_sezione_fatturazione_ulteriore). Le tre checkbox (azienda,
   Carta del Docente, pagante differente) rivelano i rispettivi campi
   via JS (assets/js/checkout-fatturazione-ulteriore.js), non CSS: qui
   ci limitiamo al layout dei campi quando visibili. */
.woocommerce form .form-row.edumens-fatturazione-ulteriore {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.woocommerce form .form-row.edumens-fatturazione-ulteriore::before {
  content: "3. Dati di fatturazione ulteriori";
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-navy);
}
.edumens-fatturazione-ulteriore .edumens-campi-condizionali {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-gold-cream);
}
.edumens-fatturazione-ulteriore .edumens-riga-doppia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-3);
}
@media (max-width: 640px) {
  .edumens-fatturazione-ulteriore .edumens-riga-doppia { grid-template-columns: 1fr; }
}
.edumens-fatturazione-ulteriore__checkbox-successiva { margin-top: var(--space-2); }

/* Sezione "4. Allegati": stesso trattamento CSS-only della sezione 2
   (titolo via ::before sul .form-row stesso, non un <h3> fratello —
   vedi commento PHP in edumens_campi_allegati_checkout). */
.woocommerce form .form-row.edumens-allegati {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.woocommerce form .form-row.edumens-allegati::before {
  content: "4. Allegati";
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-navy);
}
.edumens-upload-field__label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-navy);
  margin: 0 0 var(--space-2);
}
.edumens-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
/* Nasconde l'input nativo mantenendolo accessibile da tastiera/screen
   reader: il bottone stilizzato lo attiva via <label for="...">, non
   serve JS per aprire il selettore file. */
.edumens-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.edumens-upload__input:focus-visible + .edumens-upload__button {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.edumens-upload__button {
  min-height: 44px;
  padding: 0.6em 1.5em;
  flex-shrink: 0;
}
/* Specificità maggiore di ".woocommerce form .form-row label" (che
   imposta il navy per le etichette dei campi): senza, quella regola
   vincerebbe e il testo del bottone risulterebbe navy su sfondo navy. */
.woocommerce form .form-row label.edumens-upload__button {
  color: var(--color-white);
  font-weight: 600;
}
.edumens-upload__filename {
  font-size: var(--fs-small);
  color: var(--color-muted);
  word-break: break-word;
}
.edumens-upload__hint {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* Metodi di pagamento: card selezionabili invece di una lista piatta */
#payment {
  margin-top: var(--space-4);
}
#payment ul.payment_methods {
  padding: 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
#payment ul.payment_methods li {
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
#payment ul.payment_methods li:has(input:checked) {
  border-color: var(--color-gold);
  background: var(--color-gold-cream);
}
#payment ul.payment_methods label {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  cursor: pointer;
}
#payment ul.payment_methods input[type="radio"] { margin-right: var(--space-2); }
#payment div.payment_box {
  background: transparent;
  border-top: 1px dashed var(--color-border);
  border-radius: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin-top: 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
}
#payment .place-order { padding: var(--space-4) 0 0; }

/* Riga privacy/termini */
.woocommerce-terms-and-conditions-wrapper {
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin-block: var(--space-3);
}
.woocommerce-terms-and-conditions-wrapper a {
  color: var(--color-gold-text);
  text-decoration: underline;
}

/* Riepilogo condizioni chiave al checkout: box informativo (non un
   consenso da spuntare, a differenza di .edumens-consenso-avvio qui
   sotto), tono neutro grigio/navy così resta distinto sia dalla riga
   "termini e condizioni" nativa sia dall'eventuale box dorato del
   consenso avvio imminente che può comparire subito dopo. */
.edumens-checkout-note {
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.edumens-checkout-note__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-weight: 600;
  color: var(--color-navy);
}
.edumens-checkout-note__title svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--color-gold-text);
}
.edumens-checkout-note ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.1em;
}
.edumens-checkout-note li { margin-bottom: 0.35em; }
.edumens-checkout-note li:last-child { margin-bottom: 0; }
.edumens-checkout-note a {
  color: var(--color-gold-text);
  font-weight: 600;
  text-decoration: underline;
}

/* Consenso avvio imminente (art. 4.3 Termini e Condizioni): compare
   solo per gli ordini che lo richiedono, in un riquadro dedicato così
   non si confonde con la semplice spunta "termini e condizioni". */
.edumens-consenso-avvio {
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-gold-cream);
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-md);
}
.edumens-consenso-avvio .form-row { margin-bottom: 0; }
.edumens-consenso-avvio .woocommerce-form__label {
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--color-gold-text);
}

/* =========================================================
   CARRELLO E CHECKOUT — layout v2 (a piena larghezza)
   ========================================================= */

.cart_totals .order-total .amount {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-navy);
}
/* L'importo IVA dentro alla nota "(inclusi X€ VAT)" non deve ereditare
   il trattamento "cifra grande" pensato per il totale principale:
   più classi di .order-total .amount, così vince e torna a ereditare
   la dimensione/colore discreti di .includes_tax (vedi più sotto). */
.cart_totals .order-total .includes_tax .amount {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Nasconde il titolo nativo "Dettagli di fatturazione": il nostro
   "Dati anagrafici e di fatturazione" lo sostituisce */
.woocommerce-billing-fields > h3 { display: none; }

/* Campi affiancabili: nome/cognome e cap/città su due colonne */
form.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-3);
}
form.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
  grid-column: 1 / -1;
}
form.woocommerce-checkout #billing_first_name_field,
form.woocommerce-checkout #billing_postcode_field { grid-column: 1; }
form.woocommerce-checkout #billing_last_name_field,
form.woocommerce-checkout #billing_city_field { grid-column: 2; }
@media (max-width: 640px) {
  form.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row { grid-column: 1 / -1 !important; }
}

/* Focus "vivo" sui campi: piccola elevazione oltre al glow già presente */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  transform: translateY(-1px);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* =========================================================
   LAYOUT PAGINE WOOCOMMERCE (v2) — carrello e checkout larghi,
   griglie a due colonne, animazioni d'ingresso
   ========================================================= */

/* Hero pagine generiche + variante compatta per pagine WC */
.page-hero {
  background: var(--color-gold-cream);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-6);
}
.page-hero--compact { padding-block: var(--space-4); }
.page-hero h1 { margin: 0; }
.page-hero__intro {
  max-width: 60ch;
  margin: var(--space-3) auto 0;
  color: var(--color-muted);
}
.single-article__meta {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.single-article__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.section--wc { padding-top: var(--space-5); }

/* Animazione d'ingresso CSS-only (una volta, al caricamento):
   nessuna dipendenza JS, rispetta reduced-motion via token globali */
@keyframes wc-enter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.woocommerce-cart .wc-wrap .woocommerce,
form.woocommerce-checkout #customer_details,
form.woocommerce-checkout #order_review,
form.woocommerce-checkout #order_review_heading {
  animation: wc-enter 480ms var(--ease) backwards;
}
form.woocommerce-checkout #order_review_heading { animation-delay: 120ms; }
form.woocommerce-checkout #order_review { animation-delay: 200ms; }

/* --- CARRELLO: griglia tabella + riepilogo affiancati --- */
.woocommerce-cart .wc-wrap .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-6);
  align-items: start;
}
.woocommerce-cart .wc-wrap .woocommerce-notices-wrapper,
.woocommerce-cart .wc-wrap .cart-empty-state { grid-column: 1 / -1; }
.woocommerce-cart .wc-wrap form.woocommerce-cart-form {
  grid-column: 1;
  min-width: 0;
  overflow-x: auto;
}
.woocommerce-cart .wc-wrap .cart-collaterals {
  grid-column: 2;
  max-width: none;
  margin: 0;
  position: sticky;
  top: 96px;
}
.woocommerce-cart .wc-wrap .cart-suggestions {
  grid-column: 1 / -1;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 960px) {
  .woocommerce-cart .wc-wrap .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-cart .wc-wrap .cart-collaterals { grid-column: 1; position: static; }
  .woocommerce-cart .wc-wrap .cart-suggestions { grid-column: 1; }
}

/* Tabella carrello a layout fisso: resta sempre dentro la sua colonna,
   anche con titoli prodotto lunghi (evita l'overflow sotto il riepilogo).
   Solo da desktop in su: le larghezze fisse delle colonne non ci stanno
   nello spazio ridotto del layout impilato mobile (sotto i 960px). */
@media (min-width: 961px) {
  .woocommerce-cart table.shop_table.cart { table-layout: fixed; }
  .woocommerce-cart table.shop_table.cart .product-remove { width: 44px; }
  .woocommerce-cart table.shop_table.cart .product-thumbnail { width: 80px; }
  .woocommerce-cart table.shop_table.cart .product-price { width: 100px; }
  .woocommerce-cart table.shop_table.cart .product-quantity { width: 116px; }
  .woocommerce-cart table.shop_table.cart .product-subtotal { width: 110px; }
}
.woocommerce-cart table.shop_table.cart .product-name {
  overflow-wrap: break-word;
}

/* Mobile: la tabella diventa una lista di "card" (etichetta: valore),
   sfruttando i data-title già presenti nel markup di WooCommerce,
   invece di restare una tabella stretta e scomoda da leggere. */
@media (max-width: 960px) {
  .woocommerce-cart table.shop_table.cart thead { display: none; }
  .woocommerce-cart table.shop_table.cart,
  .woocommerce-cart table.shop_table.cart tbody,
  .woocommerce-cart table.shop_table.cart tr {
    display: block;
    width: auto;
  }
  .woocommerce-cart table.shop_table.cart td:not(.actions) {
    display: block;
    width: auto;
    border-bottom: none;
    padding: 0;
  }
  .woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }
  .woocommerce-cart table.shop_table.cart td.product-remove {
    position: absolute;
    top: var(--space-4);
    right: var(--space-3);
  }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail {
    flex: 0 0 64px;
    margin-right: var(--space-3);
  }
  .woocommerce-cart table.shop_table.cart td.product-thumbnail img {
    width: 64px;
    height: 48px;
  }
  .woocommerce-cart table.shop_table.cart td.product-name {
    flex: 1 1 0;
    align-self: center;
    padding-right: var(--space-5);
    font-weight: 600;
  }
  .woocommerce-cart table.shop_table.cart td.product-price,
  .woocommerce-cart table.shop_table.cart td.product-quantity,
  .woocommerce-cart table.shop_table.cart td.product-subtotal {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-2);
  }
  .woocommerce-cart table.shop_table.cart td[data-title]::before {
    content: attr(data-title);
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--color-muted);
  }
}

/* Riga azioni della tabella: il codice sconto vive ora nel riepilogo
   totali (vedi .coupon-toggle più sotto) — il form originale di
   WooCommerce resta nel markup per non toccare la logica di invio,
   ma è nascosto qui. Resta solo "Aggiorna carrello", defilata perché
   è un'azione di servizio, non la CTA della riga. */
.woocommerce-cart table.shop_table td.actions .coupon { display: none; }
.woocommerce-cart table.shop_table td.actions {
  /* niente flex: dentro un td di una tabella table-layout:fixed può
     traboccare fuori dalla cella invece di restare contenuto */
  text-align: right;
  padding-top: var(--space-4);
  border-bottom: none;
}
.woocommerce-cart table.shop_table td.actions > .button {
  display: inline-flex;
  min-height: auto;
  padding: 0.5em 0.25em;
  background: transparent;
  color: var(--color-muted);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-cart table.shop_table td.actions > .button:hover:not(:disabled) {
  background: transparent;
  color: var(--color-navy);
  transform: none;
}

/* Riepilogo carrello: titolo e righe più curati */
.cart_totals { margin-top: 0; }
.cart_totals > h2 {
  font-size: 1.25rem;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid rgba(183,145,46,0.25);
  position: relative;
}
.cart_totals > h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 48px; height: 2px;
  background: var(--color-gold);
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td { padding-inline: 0; }
/* Importo allineato a destra: con padding-inline:0 su entrambe le
   celle, senza questo l'etichetta ("Subtotale") e la cifra finiscono
   attaccati senza alcuno spazio (il bordo destro di th combacia col
   bordo sinistro di td). Stesso pattern label-sinistra/valore-destra
   già usato in "Dettagli del corso" (.corso-details__list dd). */
.cart_totals table.shop_table td { text-align: right; }
.cart_totals .order-total th,
.cart_totals .order-total td {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
  border-bottom: none;
}
.cart_totals .wc-proceed-to-checkout { padding-top: var(--space-3); }
/* Nota "(inclusi X€ VAT)": la classe reale generata da WooCommerce è
   .includes_tax, non .tax-note — senza questa correzione il selettore
   non veniva mai applicato e il testo ereditava il font grande e
   grassetto del totale invece di restare una nota discreta. */
.cart_totals .includes_tax {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

/* Codice sconto nel riepilogo: stessa interazione delle FAQ in home
   (details/summary), chiusa finché non serve — niente più un campo
   sempre visibile a occupare spazio senza motivo. */
.cart_totals .cart-coupon-row td { border-bottom: none; padding-block: 0; }
.cart_totals .coupon-toggle {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed rgba(183,145,46,0.3);
}
.cart_totals .coupon-toggle summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gold-text);
  list-style: none;
}
.cart_totals .coupon-toggle summary::-webkit-details-marker { display: none; }
.cart_totals .coupon-toggle summary:hover { color: var(--color-navy); }
.cart_totals .coupon-toggle__chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.cart_totals .coupon-toggle[open] .coupon-toggle__chevron { transform: rotate(180deg); }
.cart_totals .coupon-toggle__form {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--space-3);
  animation: faq-open 260ms var(--ease);
}
.cart_totals .coupon-toggle__form .input-text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0.5em 0.9em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 0.875rem;
}
.cart_totals .coupon-toggle__form .button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.5em 1.1em;
  font-size: 0.8125rem;
}

/* Barra di avanzamento dell'ordine (Carrello → Pagamento → Conferma),
   sotto il titolo di pagina: stesso motivo puntinato dell'anello del
   logo (vedi .cart-empty-state__ring) attorno al passo attuale. */
.wc-steps { margin-top: var(--space-4); }
/* Specificità .wc-steps + .wc-steps__list (non solo .wc-steps__list):
   serve per battere il reset globale "ol[class] { margin: 0 }", che
   altrimenti vince su margin-inline:auto e disallinea la barra. */
.wc-steps .wc-steps__list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 380px;
  margin-inline: auto;
}
.wc-steps__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  width: 92px;
}
.wc-steps__connector {
  flex: 1 1 auto;
  height: 1px;
  min-width: 16px;
  margin-top: 7px;
  background: var(--color-border);
}
.wc-steps__connector.is-done { background: var(--color-gold); }
.wc-steps__dot {
  position: relative;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-border);
}
.wc-steps__step.is-done .wc-steps__dot,
.wc-steps__step.is-current .wc-steps__dot {
  background: var(--color-gold);
  border-color: var(--color-gold);
}
.wc-steps__dot-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--color-gold) 0deg 1.6deg, transparent 1.6deg 10deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: 0.55;
}
.wc-steps__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}
.wc-steps__step.is-done .wc-steps__label,
.wc-steps__step.is-current .wc-steps__label { color: var(--color-navy); }

/* Colonne interne di WooCommerce (col2-set) in colonna singola pulita */
form.woocommerce-checkout .col2-set .col-1,
form.woocommerce-checkout .col2-set .col-2 {
  float: none;
  width: 100%;
}

/* Toggle coupon/login sopra al checkout: card coerente */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
  background: var(--color-gold-cream);
  border: 1px solid var(--color-gold-light);
  color: var(--color-gold-text);
  border-radius: var(--radius-md);
}
form.checkout_coupon,
form.woocommerce-form-login {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
form.checkout_coupon .form-row { margin: 0; flex: 1; min-width: 220px; }

/* --- Correzioni robustezza checkout --- */
/* Campi larghi anche se il form non è avvolto da .woocommerce */
form.woocommerce-checkout .form-row input.input-text,
form.woocommerce-checkout .form-row select,
form.woocommerce-checkout .form-row textarea,
.woocommerce-cart-form .input-text {
  width: 100%;
  min-height: 48px;
  padding: 0.65em 1em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.woocommerce-cart-form .coupon .input-text { width: auto; }

/* clearfix del contenitore campi */
.woocommerce-billing-fields__field-wrapper::after,
form.woocommerce-checkout .col-1::after {
  content: "";
  display: table;
  clear: both;
}