/**
 * Area "Il mio account" Sci Club Monviso (shell hero-soft + override
 * woocommerce/myaccount/ e order/order-details.php).
 *
 * Mobile-first: hero → nav a chip con scroll orizzontale → contenuto.
 * Da 900px la nav diventa sidebar sinistra e il contenuto colonna.
 * Dipende SOLO da chrome.css (token + .scm-btn + .scm-ico): il css
 * nativo di Woo (float della nav/contenuto, tabla ordini, form a colonne
 * float) viene neutralizzato qui, in modo autocontenuto.
 *
 * Scala tipografica (feedback cliente "testo troppo piccolo"): corpo e
 * form 15–16px, nav 15px, meta ≥14px, titoli e micro-label maiuscole
 * (eyebrow 12.5 / badge 11.5, pattern site-wide) invariati per non
 * appiattire la gerarchia.
 */

/* Token locali dell'area (i colori base stanno in chrome.css): sfondo
   voce nav attiva / chip illustrazione stat-card, dal design "Area
   Riservata". */
:root {
	--scm-blue-soft: #ecf3fb;
}

/* --------------------------------------------------------------------------
   1. Breadcrumb (stili propri, come tessera.css: catalog.css non è caricato)
   -------------------------------------------------------------------------- */
.scm-breadcrumbs ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
	list-style: none; margin: 0 0 18px; padding: 0;
	font-size: 14px; color: var(--scm-muted);
}
.scm-breadcrumbs li { display: inline-flex; align-items: center; gap: 4px; }
.scm-breadcrumbs a { color: var(--scm-muted); text-decoration: none; }
.scm-breadcrumbs a:hover { color: var(--scm-blue); }
.scm-breadcrumbs [aria-current="page"] { color: var(--scm-ink); font-weight: 700; }
.scm-breadcrumbs__sep { display: inline-flex; color: var(--scm-muted); }
.scm-breadcrumbs__sep .scm-ico { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   2. Hero pagina (soft, identica alle head di carrello/checkout)
   -------------------------------------------------------------------------- */
.scm-acct-head {
	padding: 28px 0 30px;
	background: var(--scm-bg-soft);
	border-bottom: 1px solid var(--scm-border);
}
.scm-acct-head__title {
	margin: 0 0 10px;
	font: 600 clamp(28px, 4.4vw, 40px)/1.08 var(--scm-font-display);
	color: var(--scm-ink);
}
/* Notice di Woo in hero (dati salvati / errori): respiro proprio. */
.scm-acct-head .woocommerce-notices-wrapper { margin-top: 14px; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #fff;
	border: 1px solid var(--scm-border);
	border-left: 4px solid var(--scm-blue);
	border-radius: 10px;
	color: var(--scm-ink);
	font-size: 15.5px;
	list-style: none;
	margin: 0 0 10px;
	padding: 13px 16px;
}
.woocommerce-message { border-left-color: var(--scm-lime); }
.woocommerce-error  { border-left-color: #d92d20; }
/* Icona font-Woo del ::before nascosta: con il padding ridotto finirebbe
   sopra il testo; lo stato è già codificato dal colore del bordo laterale. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.scm-acct-body { padding: 28px 0 72px; }

/* --------------------------------------------------------------------------
   3. Layout nav + contenuto
   -------------------------------------------------------------------------- */
.scm-acct-layout { display: grid; gap: 22px; }

/* --- Nav: chip scorrevoli su mobile ------------------------------------- */
/* min-width:0 sulla cella griglia: senza, il <ul> a chip nowrap (riga
   scrollabile ~1030px) imporrebbe il suo min-content alla colonna implicita
   anche sotto i 900px (misurato: track 1032px a 390px di viewport). */
.scm-acct-layout__nav { min-width: 0; }
.scm-acct-nav { min-width: 0; }
.scm-acct-nav ul,
.woocommerce-MyAccount-navigation ul.scm-acct-nav__list {
	display: flex;
	flex-direction: row;
	gap: 8px;
	list-style: none;
	margin: 0 -16px;           /* affoga ai bordi: la fila scrolla piena-bleed */
	padding: 2px 16px 10px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.scm-acct-nav ul::-webkit-scrollbar { display: none; }
.scm-acct-nav li { flex: none; margin: 0; }
.scm-acct-nav__link {
	display: inline-flex; align-items: center; gap: 8px;
	white-space: nowrap;
	padding: 9px 14px;
	background: #fff;
	border: 1.5px solid var(--scm-border);
	border-radius: 999px;
	color: var(--scm-ink);
	font: 600 15px/1 var(--scm-font-body);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.scm-acct-nav__link:hover { border-color: #d3dbe6; }
.scm-acct-nav__icon { display: inline-flex; }
.scm-acct-nav__icon .scm-ico { width: 16px; height: 16px; color: var(--scm-muted); }
/* Chevron dello stato attivo: solo sidebar desktop (regola in §9). */
.scm-acct-nav__chev { display: none; }
/* "Esci": secondario anche da chip (icona a destra nel markup). */
.scm-acct-nav__link--logout { color: var(--scm-muted); }
.scm-acct-nav__link--logout .scm-acct-nav__icon { margin-left: auto; }
.scm-acct-nav li.is-active .scm-acct-nav__link {
	background: var(--scm-navy);
	border-color: var(--scm-navy);
	color: #fff;
}
.scm-acct-nav li.is-active .scm-acct-nav__icon .scm-ico { color: var(--scm-lime); }

/* Neutralizza i float nativi Woo. Il prefisso .woocommerce-account serve a
   vincere la specificità di woocommerce-layout.css
   `.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}`
   (misurato a 1440px: nav float:left a 84px = 30% della colonna 279px, e su
   mobile il float rendeva shrink-to-fit la lista scrollabile → overflow). */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content { float: none; width: auto; }

/* --- Contenuto endpoint --------------------------------------------------- */
.scm-acct-content { min-width: 0; }
.scm-acct-content > *:first-child { margin-top: 0; }

.scm-acct-subtitle {
	margin: 32px 0 14px;
	font: 600 20px/1.15 var(--scm-font-display);
	letter-spacing: .01em;
	color: var(--scm-ink);
}

/* --------------------------------------------------------------------------
   4. Dashboard "Area riservata" (banner: saluto + intro + 4 stat-card)
   -------------------------------------------------------------------------- */
.scm-acct-dash {
	padding: 20px 16px;
	background: #fff;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
}
.scm-acct-dash__hello {
	margin: 0 0 8px;
	color: var(--scm-muted);
	font-size: 16px;
	line-height: 1.5;
}
.scm-acct-dash__intro {
	margin: 0 0 22px;
	max-width: 72ch;
	color: var(--scm-muted);
	font-size: 16px;
	line-height: 1.5;
}
.scm-acct-dash__hello a,
.scm-acct-dash__intro a {
	color: var(--scm-blue);
	text-decoration: underline;
}

/* Stat-card: tutta cliccabile (<a>), 1 col mobile → 2 tablet → 4 desktop. */
.scm-acct-stats { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) {
	.scm-acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.scm-acct-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.scm-acct-stat {
	display: block;
	min-width: 0;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--scm-border);
	border-radius: var(--scm-radius-card); /* 16px */
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.scm-acct-stat:hover { border-color: #d3dbe6; box-shadow: var(--scm-shadow-card); }
.scm-acct-stat__chip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	margin-bottom: 10px;
	border-radius: 8px;
	background: var(--scm-blue-soft);
	color: var(--scm-ink);
}
.scm-acct-stat__chip .scm-ico { width: 20px; height: 20px; }
.scm-acct-stat__value {
	display: block;
	font: 600 32px/1 var(--scm-font-display);
	color: var(--scm-ink);
}
.scm-acct-stat__label {
	display: block;
	margin-top: 2px;
	color: var(--scm-muted);
	font-size: 12px;
	line-height: 1.3;
}

/* --- Endpoint "Moduli PDF": righe modulo (attività, persona, download) -- */
ul.scm-acct-pdf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.scm-acct-pdf {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
}
.scm-acct-pdf__chip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; flex: none;
	border-radius: 8px;
	background: var(--scm-blue-soft);
	color: var(--scm-ink);
}
.scm-acct-pdf__chip .scm-ico { width: 20px; height: 20px; }
.scm-acct-pdf__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.scm-acct-pdf__title { color: var(--scm-ink); font: 600 15.5px/1.35 var(--scm-font-body); }
.scm-acct-pdf__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--scm-muted); font-size: 14px; }
.scm-acct-pdf__action {
	display: inline-flex; align-items: center; gap: 4px;
	margin-left: auto;
	color: var(--scm-blue);
	font: 700 14px/1 var(--scm-font-body);
	text-decoration: none;
}
.scm-acct-pdf__action:hover { text-decoration: underline; }
.scm-acct-pdf__action .scm-ico { width: 14px; height: 14px; }

/* --- Endpoint "Badge omaggio" (Figma 343-5488): una card per persona --
   tessera attiva. Mobile-first: padding card interna ridotto sotto i 640px,
   codice full-width, nessun overflow a 390px.
   .scm-badge__header neutralizza il `header{position:fixed;top:0;width:100%;
   z-index:21}` del tema parent (stessa fix di .scm-forms__header §12). */
.scm-badge { max-width: 680px; }

.scm-badge__header {
	position: static;
	width: auto;
	z-index: auto;
	margin: 0 0 20px;
}
.scm-badge__title {
	margin: 0;
	font: 600 24px/1.1 var(--scm-font-display);
	color: var(--scm-ink);
}
.scm-badge__subtitle {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--scm-muted);
}

.scm-badge__card {
	margin: 0 0 12px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
}
.scm-badge__card:last-child { margin-bottom: 0; }

.scm-badge__head { display: flex; align-items: center; gap: 12px; }

.scm-badge__avatar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; flex: none;
	border-radius: 8px;
	background: var(--scm-blue-soft);
	color: var(--scm-navy-dark); /* #122339 */
	font: 700 14px/1 var(--scm-font-body);
}
.scm-badge__avatar--used { background: var(--scm-bg-soft); color: var(--scm-muted); }

.scm-badge__who { flex: 1; min-width: 0; }
.scm-badge__name {
	display: block;
	font: 700 14px/1.3 var(--scm-font-body);
	color: var(--scm-navy-dark);
	overflow-wrap: anywhere;
}
.scm-badge__membership {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--scm-muted);
}

.scm-badge__pill {
	flex: none;
	align-self: flex-start;
	padding: 4px 12px;
	border: 1px solid;
	border-radius: 50px;
	font: 700 12px/1.2 var(--scm-font-body);
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
}
.scm-badge__pill--available {
	background: rgba(132, 219, 3, .1);
	border-color: var(--scm-lime); /* #84DB03 */
	color: #005733;
}
.scm-badge__pill--used {
	background: var(--scm-bg-soft);
	border-color: var(--scm-border);
	color: var(--scm-muted);
}

/* Card interna "disponibile": il codice è il protagonista. */
.scm-badge__offer {
	display: flex; flex-direction: column; gap: 16px;
	margin-top: 12px;
	padding: 16px;
	background: rgba(132, 219, 3, .1);
	border: 1px solid var(--scm-lime);
	border-radius: 8px;
}
.scm-badge__offer-title {
	margin: 0;
	font: 700 16px/1.3 var(--scm-font-body);
	color: var(--scm-ink);
}
.scm-badge__offer-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--scm-lime-text);
}
.scm-badge__code {
	margin: 0;
	padding: 12px 16px;
	background: #fff;
	border-radius: 8px;
	font: 700 16px/1.2 var(--scm-font-body);
	letter-spacing: .04em;
	color: var(--scm-blue);
	text-align: center;
	word-break: break-all;
}
.scm-badge__offer-uniq {
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--scm-lime-text);
}

/* Card interna "riscattato": esito annullamento (data/operatore). */
.scm-badge__used {
	display: flex; flex-direction: column; gap: 8px;
	margin-top: 12px;
	padding: 16px;
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	border-radius: 8px;
}
.scm-badge__used-row {
	display: flex; align-items: center; gap: 8px;
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--scm-muted);
}
.scm-badge__used-row .scm-ico { width: 16px; height: 16px; }
/* Codice esaurito mostrato barrato; neutralizza lo stile <code> di WP. */
.scm-badge__used-row--code code {
	text-decoration: line-through;
	opacity: .5;
	letter-spacing: .04em;
	font-family: inherit;
	background: transparent;
	padding: 0;
}

/* Empty state (nessuna tessera attiva): card grigia + CTA. */
.scm-badge__empty {
	padding: 28px 20px;
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	border-radius: var(--scm-radius-card); /* 16px */
	text-align: center;
}
.scm-badge__empty-icon { display: inline-flex; color: var(--scm-muted); }
.scm-badge__empty-icon .scm-ico { width: 28px; height: 28px; }
.scm-badge__empty-text {
	margin: 10px 0 16px;
	color: var(--scm-muted);
	font-size: 15px;
	line-height: 1.5;
}
.scm-badge__empty-cta .scm-ico { width: 16px; height: 16px; }

@media (min-width: 640px) {
	.scm-badge__offer,
	.scm-badge__used { padding: 24px; }
}

/* --------------------------------------------------------------------------
   5. Badge di stato ordini
   -------------------------------------------------------------------------- */
.scm-acct-badge {
	display: inline-flex; align-items: center;
	align-self: flex-start;
	padding: 5px 10px;
	border-radius: 999px;
	font: 700 11.5px/1 var(--scm-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	/* default: stati neutri (pending, custom) = grigio */
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	color: var(--scm-muted);
}
.scm-acct-badge--processing { background: rgba(0, 99, 193, .08);  border-color: rgba(0, 99, 193, .25);  color: var(--scm-blue); }
.scm-acct-badge--on-hold    { background: var(--scm-amber-bg);    border-color: rgba(255, 155, 0, .35); color: var(--scm-amber-text); }
.scm-acct-badge--completed  { background: var(--scm-lime-soft);   border-color: rgba(132, 219, 3, .4);  color: var(--scm-lime-text); }
.scm-acct-badge--cancelled,
.scm-acct-badge--failed     { background: rgba(217, 45, 32, .06); border-color: rgba(217, 45, 32, .25); color: #b42318; }
.scm-acct-badge--refunded   { background: #f2f4f7; border-color: #e4e7ec; color: #667085; }

/* --------------------------------------------------------------------------
   6. Lista ordini — card a due blocchi (frame Figma 343-4468): striscia
       header grigia ("ORDINE #N" link a view-order + data, pill di stato,
       totale Barlow Condensed e azioni testuali) e corpo bianco con righe
       articolo (chip categoria = tint/icone del riepilogo checkout, nome,
       intestatari, subtotale). Classi nuove .scm-ord*: le .scm-acct-badge*
       e .scm-acct-order__action* qui sotto restano perché condivise con
       view-order / order-details. Paginazione ed empty state invariati.
       Mobile-first: header a colonna (< 640px), totale e azioni in riga.
   -------------------------------------------------------------------------- */

/* Header contenuto (pattern di .scm-fam__heading in anagrafiche).
   position/width/z-index: neutralizzano il `header{position:fixed;top:0;
   width:100%;z-index:21}` del tema parent (css/navigation.css), come già
   per .scm-fam__header — senza, il titolo resta fissato sopra la barra. */
.scm-ord__header {
	position: static;
	width: auto;
	z-index: auto;
	margin: 0 0 20px;
}
.scm-ord__title {
	margin: 0;
	font-family: var(--scm-font-display);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.15;
	color: var(--scm-ink);
}
.scm-ord__subtitle {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--scm-muted);
}

ul.scm-ord-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 24px;
	max-width: 680px;
}

/* --- Striscia header ---------------------------------------------------- */
.scm-ord__head {
	display: flex; flex-direction: column; gap: 12px;
	padding: 16px;
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}
.scm-ord__head-main {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
	min-width: 0;
}
.scm-ord__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scm-ord__number {
	font: 700 12px/1.2 var(--scm-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--scm-ink);
	text-decoration: none;
}
.scm-ord__number:hover { color: var(--scm-blue); }
.scm-ord__date { font-size: 11px; line-height: 1.3; color: var(--scm-muted); }

/* Pill di stato (neutra di default: cancelled, failed, refunded, ecc.). */
.scm-ord-pill {
	display: inline-flex; align-items: center;
	height: 34px; padding: 0 12px;
	border-radius: 50px;
	font: 700 12px/1 var(--scm-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	background: #fff;
	border: 1px solid var(--scm-border);
	color: var(--scm-muted);
}
.scm-ord-pill--completed               { background: rgba(132, 219, 3, .1); border-color: var(--scm-lime); color: #005733; }
.scm-ord-pill--pending,
.scm-ord-pill--on-hold                 { background: #fff5e5; border-color: var(--scm-amber); color: var(--scm-amber-text); }

.scm-ord__head-side {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 8px 16px;
}
.scm-ord__total { font: 600 24px/1.1 var(--scm-font-display); color: var(--scm-ink); }
.scm-ord__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.scm-ord__action {
	font: 600 12.5px/1.2 var(--scm-font-body);
	color: var(--scm-muted);
	text-decoration: none;
}
.scm-ord__action:hover { color: var(--scm-ink); text-decoration: underline; }
.scm-ord__action--pay { color: var(--scm-blue); font-weight: 700; }

/* --- Corpo card: righe articolo ------------------------------------------ */
.scm-ord__body {
	display: flex; flex-direction: column; gap: 16px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--scm-border);
	border-radius: 0 0 16px 16px;
}
.scm-ord-item {
	display: flex; align-items: center; gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--scm-border);
}
.scm-ord-item:last-child { padding-bottom: 0; border-bottom: 0; }
.scm-ord-item__chip {
	flex: none;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 8px;
	/* fallback "altro": stesso grigio-azzurro del chip checkout */
	background: #e8edf3;
	color: var(--scm-ink);
}
.scm-ord-item__chip .scm-ico { width: 18px; height: 18px; }
.scm-ord-item__chip--gite    { background: var(--scm-gite-bg); }
.scm-ord-item__chip--corsi   { background: var(--scm-corsi-bg); }
.scm-ord-item__chip--eventi  { background: var(--scm-eventi-bg); }
.scm-ord-item__chip--tessera { background: var(--scm-lime-chip); }
.scm-ord-item__info {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 3px;
}
.scm-ord-item__name {
	font: 600 18px/1.15 var(--scm-font-display);
	color: var(--scm-ink);
	overflow-wrap: anywhere;
}
.scm-ord-item__for { font-size: 12px; line-height: 1.4; color: var(--scm-muted); }
.scm-ord-item__price {
	flex: none;
	margin-left: auto;
	font-size: 14px;
	line-height: 1.2;
	color: var(--scm-muted);
	white-space: nowrap;
}

@media (min-width: 640px) {
	.scm-ord__head {
		flex-direction: row; align-items: center; justify-content: space-between;
		gap: 16px;
		padding: 16px 24px;
	}
	.scm-ord__head-side {
		flex-direction: column; align-items: flex-end;
		gap: 6px;
	}
	.scm-ord-item { gap: 24px; }
}

/* Azioni native (pay/view) del dettaglio ordine: in uso in
   woocommerce/order/order-details.php, NON della lista. */
.scm-acct-order__action {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 8px 12px;
	border: 1.5px solid var(--scm-border);
	border-radius: 8px;
	background: #fff;
	color: var(--scm-ink);
	font: 600 14px/1 var(--scm-font-body);
	text-decoration: none;
	transition: border-color .15s ease;
}
.scm-acct-order__action:hover { border-color: #d3dbe6; }
.scm-acct-order__action .scm-ico { width: 14px; height: 14px; color: var(--scm-muted); }

.scm-acct-pagination {
	display: flex; justify-content: space-between; gap: 12px;
	margin-top: 20px;
}
.scm-acct-pagination .woocommerce-button {
	display: inline-flex; align-items: center;
	padding: 9px 14px;
	background: #fff;
	border: 1.5px solid var(--scm-border);
	border-radius: 8px;
	color: var(--scm-ink);
	font: 600 14px/1 var(--scm-font-body);
	text-decoration: none;
}
.scm-acct-pagination .woocommerce-button:hover { border-color: #d3dbe6; }

/* Stato vuoto ordini. */
.scm-acct-empty {
	padding: 36px 22px;
	text-align: center;
	background: #fff;
	border: 1.5px dashed var(--scm-border);
	border-radius: var(--scm-radius-card);
}
.scm-acct-empty__icon { display: inline-flex; color: var(--scm-muted); margin-bottom: 10px; }
.scm-acct-empty__icon .scm-ico { width: 28px; height: 28px; }
.scm-acct-empty__title { margin: 0 0 4px; font: 600 20px/1.2 var(--scm-font-display); color: var(--scm-ink); }
.scm-acct-empty__sub { margin: 0 0 16px; color: var(--scm-muted); font-size: 15px; }

/* --------------------------------------------------------------------------
   7. Dettaglio ordine (view-order + order-details)
   -------------------------------------------------------------------------- */
.scm-acct-vo-head {
	padding: 18px 20px;
	background: #fff;
	border: 1.5px solid var(--scm-border);
	border-radius: var(--scm-radius-card);
}
.scm-acct-vo-head__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
	color: var(--scm-muted);
	font: 700 12.5px/1 var(--scm-font-body);
	letter-spacing: .09em;
	text-transform: uppercase;
}
.scm-acct-vo-head__date { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }
.scm-acct-vo-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 6px; }
.scm-acct-vo-head__number { font: 600 26px/1 var(--scm-font-display); color: var(--scm-ink); }
.scm-acct-vo-head__note { margin: 0; color: var(--scm-muted); font-size: 15.5px; line-height: 1.5; }
.scm-acct-vo-head__note mark { background: none; color: var(--scm-ink); font-weight: 600; }

.scm-acct-notes {
	list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px;
}
.scm-acct-notes .woocommerce-OrderUpdate {
	padding: 14px 16px;
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	border-radius: 10px;
}
.scm-acct-notes .woocommerce-OrderUpdate-meta { margin: 0 0 4px; color: var(--scm-muted); font-size: 14px; }
.scm-acct-notes .woocommerce-OrderUpdate-description { color: var(--scm-ink); font-size: 15px; }
.scm-acct-notes .woocommerce-OrderUpdate-description p { margin: 0 0 6px; }
.scm-acct-notes .woocommerce-OrderUpdate-description p:last-child { margin-bottom: 0; }

/* Riepilogo ordine: righe stile carrello (come .scm-ty-item del thank-you). */
.scm-acct-od { margin-top: 18px; }
.scm-acct-od .woocommerce-order-details__title { margin-top: 0; }
ul.scm-acct-od__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.scm-acct-od__item { display: flex; align-items: flex-start; gap: 12px; }
.scm-acct-od__chip {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; flex: none;
	border-radius: 10px;
	background: var(--scm-bg-soft);
	color: var(--scm-ink);
}
.scm-acct-od__chip .scm-ico { width: 20px; height: 20px; }
.scm-acct-od__chip--gite    { background: var(--scm-gite-bg); }
.scm-acct-od__chip--corsi   { background: var(--scm-corsi-bg); }
.scm-acct-od__chip--eventi  { background: var(--scm-eventi-bg); }
.scm-acct-od__chip--tessera { background: var(--scm-lime-soft); }
.scm-acct-od__badge {
	position: absolute; top: -7px; right: -7px;
	min-width: 19px; height: 19px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--scm-navy); color: #fff;
	font: 700 11px/1 var(--scm-font-body);
}
.scm-acct-od__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.scm-acct-od__title { font: 600 16px/1.35 var(--scm-font-body); color: var(--scm-ink); }
.scm-acct-od__for { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scm-acct-od__for-label { color: var(--scm-muted); font-size: 14px; }
.scm-acct-od__forpill {
	display: inline-flex; align-items: center;
	padding: 3px 9px;
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	color: var(--scm-ink);
	font: 600 14px/1.4 var(--scm-font-body);
}
.scm-acct-od__info a:not([class]) { color: var(--scm-blue); font-size: 14px; font-weight: 600; }
.scm-acct-od__price { flex: none; font: 700 16px/1.35 var(--scm-font-body); color: var(--scm-ink); }

.scm-acct-od__divider { height: 1px; background: var(--scm-border); margin: 18px 0; }

dl.scm-acct-od__totals { margin: 0; display: grid; gap: 8px; }
dl.scm-acct-od__totals div { display: flex; justify-content: space-between; gap: 16px; margin: 0; }
.scm-acct-od__total-label { margin: 0; color: var(--scm-muted); font-size: 15px; text-align: left; width: auto; }
.scm-acct-od__total-value { margin: 0; color: var(--scm-ink); font-size: 15px; font-weight: 600; text-align: right; }
.scm-acct-od__total-row--total .scm-acct-od__total-label { color: var(--scm-ink); font-weight: 700; font-size: 16px; }
.scm-acct-od__total-row--total .scm-acct-od__total-value { font-size: 18px; }
.scm-acct-od__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Dati cliente (order-details-customer.php del core): essencialità sobria. */
.scm-acct-content .woocommerce-customer-details {
	margin-top: 26px;
	padding: 16px 18px;
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	border-radius: var(--scm-radius-card);
}
.scm-acct-content .woocommerce-customer-details h2 {
	margin: 0 0 8px;
	font: 600 17px/1.2 var(--scm-font-display);
	color: var(--scm-ink);
}
.scm-acct-content .woocommerce-customer-details address {
	font-style: normal;
	color: var(--scm-ink);
	font-size: 15px;
	line-height: 1.6;
}

/* Eventuali tabelle Woo residue nell'area (download, tabla nativa): 15px. */
.scm-acct-content .shop_table,
.scm-acct-content .woocommerce-table { font-size: 15px; }

/* --------------------------------------------------------------------------
   8. Form (login/registrazione, edit-account, edit-address, lost-password)
   -------------------------------------------------------------------------- */
/* Box login/registrazione a piena larghezza container (1180px); le due
   card si dividono lo spazio in colonne uguali e, essendo figli di uno
   stesso grid con align-items:stretch (default), hanno automaticamente
   la stessa altezza. Il ramo single (solo "Accedi") occupa tutto il
   container con max-width contenuto per leggibilità. */
.scm-acct-auth { display: grid; gap: 16px; width: 100%; max-width: none; align-items: stretch; }
.scm-acct-auth--single { max-width: 480px; margin-inline: auto; }
.scm-acct-auth--single .scm-acct-formcard { max-width: 480px; }

/* WooCommerce core flotta le u-column al 48% (.woocommerce .col2-set .col-1,
   specificità 0-3-0): serve una regola più specifica per annullare float e
   riportare le colonne alla larghezza della cella grid. Le colonne e la
   card interna si stirano al 100% dell'altezza della riga grid, così le
   due card login/registrazione risultano sempre della stessa altezza. */
.woocommerce .scm-acct-auth .u-column1,
.woocommerce .scm-acct-auth .u-column2 { width: 100%; float: none; max-width: none; display: grid; align-items: stretch; }
.woocommerce .scm-acct-auth .u-column1 > .scm-acct-formcard,
.woocommerce .scm-acct-auth .u-column2 > .scm-acct-formcard { height: 100%; box-sizing: border-box; }

/* Woo core (.woocommerce form.login) disegna un riquadro con bordo e
   padding attorno al form DENTRO la card: è il "secondo riquadro annidato"
   del report QA. La card è già il contenitore: si azzera qui. */
.woocommerce .scm-acct-formcard > form.login,
.woocommerce .scm-acct-formcard > form.register {
	border: 0;
	padding: 0;
	margin: 0;
	text-align: inherit;
	border-radius: 0;
}

.scm-acct-formcard {
	width: 100%;
	padding: 24px 22px;
	background: #fff;
	border: 1.5px solid var(--scm-border);
	border-radius: var(--scm-radius-card);
	box-shadow: var(--scm-shadow-card);
}
.scm-acct-formcard--wide { width: 100%; max-width: 720px; }
.scm-acct-formcard__title {
	margin: 0 0 6px;
	font: 600 24px/1.1 var(--scm-font-display);
	color: var(--scm-ink);
}
.scm-acct-formcard__sub {
	margin: 0 0 18px;
	color: var(--scm-muted);
	font-size: 14px;
	line-height: 1.5;
}
.scm-acct-formcard__hint { display: block; color: var(--scm-muted); font-size: 14px; font-style: normal; line-height: 1.5; }
.scm-acct-formcard__back { margin: 14px 0 0; text-align: center; font-size: 14px; }
.scm-acct-formcard__back a { color: var(--scm-blue); font-weight: 600; text-decoration: underline; }

/* Campi: griglia propria al posto dei float Woo (form-row-first/last). */
.scm-acct-formcard .form-row {
	display: grid; gap: 6px;
	margin: 0 0 14px;
	float: none; width: auto;
}
/* Mobile-first: le coppie first/last (Nome|Cognome, Email|Telefono, Nuova|
   Conferma password) vanno a tutta larghezza e impilate — i float di Woo
   core (48%, shrink-to-fit) le comprimevano a metà larghezza con label
   multiriga sfalsate (es. "Nuova password" 3 righe vs "Conferma" 2).
   La doppia colonna arriva dalla griglia del form SOLO da 900px (§9). */
.scm-acct-formcard .form-row.form-row-first,
.scm-acct-formcard .form-row.form-row-last {
	float: none;
	width: 100%;
	clear: both;
}
.scm-acct-formcard label:not([class*="checkbox"]) {
	color: var(--scm-ink);
	font: 600 15px/1.3 var(--scm-font-body);
}
.scm-acct-formcard label .required { color: #b42318; }
.scm-acct-formcard input[type="text"],
.scm-acct-formcard input[type="email"],
.scm-acct-formcard input[type="password"],
.scm-acct-formcard input[type="tel"],
.scm-acct-formcard select,
.scm-acct-formcard textarea {
	width: 100%;
	padding: 11px 13px;
	background: #fff;
	border: 1.5px solid var(--scm-border);
	border-radius: 10px;
	color: var(--scm-ink);
	/* 16px: evita lo zoom automatico di iOS Safari al focus. */
	font: 400 16px/1.4 var(--scm-font-body);
}
.scm-acct-formcard input:focus,
.scm-acct-formcard select:focus,
.scm-acct-formcard textarea:focus {
	outline: none;
	border-color: var(--scm-blue);
	box-shadow: 0 0 0 3px rgba(0, 99, 193, .12);
}
.scm-acct-formcard .woocommerce-form__label-for-checkbox {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--scm-muted);
	font-size: 14px;
}
/* Riga azioni: ha anche la classe form-row, ma NON deve ereditarne la
   griglia (la regola .scm-acct-formcard .form-row qui sopra vince per
   specificità): flex con rememberme a sinistra e bottone a destra. */
.scm-acct-formcard .form-row.scm-acct-formcard__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; }
/* Bottoni: Woo (woocommerce.css) stile i .button con :where() — specificità
   effettiva 0-2-0 — che batte i token .scm-btn--* (0-1-0) e rende il
   pulsante grigio di default. Il doppio prefisso qui sotto vince senza
   !important e mantiene il colore primario del sito. */
.woocommerce .scm-acct-formcard__actions .scm-btn { border: 0; cursor: pointer; float: none; }
.woocommerce .scm-acct-formcard__actions .scm-btn--lime { background: var(--scm-lime); color: var(--scm-navy); }
.woocommerce .scm-acct-formcard__actions .scm-btn--blue { background: var(--scm-blue); color: #fff; }
.scm-acct-formcard .lost_password { margin: 12px 0 0; font-size: 14px; }
.scm-acct-formcard .lost_password a { color: var(--scm-blue); font-weight: 600; }
.scm-acct-formcard__fieldset {
	border: 1px solid var(--scm-border);
	border-radius: 10px;
	padding: 14px 16px 4px;
	margin: 20px 0 0;
}
.scm-acct-formcard__fieldset legend {
	padding: 0 6px;
	color: var(--scm-ink);
	font: 700 12.5px/1 var(--scm-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Desktop ≥900px: nav a sidebar, auth a due colonne
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	.scm-acct-head { padding: 40px 0 36px; }
	.scm-acct-body { padding: 40px 0 96px; }

	.scm-acct-layout {
		grid-template-columns: 279px minmax(0, 1fr);
		gap: 36px;
		align-items: start;
	}

	/* Sidebar: card unica con voci piene separate da divisori (frame
	   Figma "Area riservata": niente chip, niente icone — eccezione
	   "Esci", la cui icona sta a destra nel markup). */
	.scm-acct-nav ul.scm-acct-nav__list {
		display: grid;                     /* vince sulla fila scroll mobile */
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;                  /* raccorda il radius coi divisori */
		background: #fff;
		border: 1px solid var(--scm-border);
		border-radius: 8px;
		position: sticky;
		top: calc(var(--scm-header-h) + 16px);
	}
	.scm-acct-nav li { width: 100%; }
	.scm-acct-nav li + li { border-top: 1px solid var(--scm-border); }
	.scm-acct-nav__link {
		display: flex; width: 100%; align-items: center;
		min-height: 42px;
		padding: 0 16px;
		background: transparent;
		border: 0;                         /* neutralizza il bordo-chip mobile */
		border-radius: 0;
		color: var(--scm-ink);
		font: 500 14px/1.3 var(--scm-font-body);
		white-space: normal;
	}
	.scm-acct-nav__link:hover { border: 0; color: var(--scm-blue); }
	.scm-acct-nav__link:not(.scm-acct-nav__link--logout) .scm-acct-nav__icon { display: none; }
	.scm-acct-nav__chev { display: none; margin-left: auto; color: var(--scm-blue); }
	.scm-acct-nav__chev .scm-ico { width: 16px; height: 16px; }
	.scm-acct-nav li.is-active .scm-acct-nav__link {
		background: var(--scm-blue-soft);
		color: var(--scm-blue);
		font-weight: 700;
		box-shadow: inset 2px 0 0 var(--scm-blue); /* barra verticale sinistra */
	}
	.scm-acct-nav li.is-active .scm-acct-nav__chev { display: inline-flex; }
	/* "Esci": separato in fondo, stile secondario, icona a destra. */
	.scm-acct-nav li.scm-acct-nav__item--logout { margin-top: 10px; }
	.scm-acct-nav__link--logout { color: var(--scm-muted); font-weight: 700; }
	.scm-acct-nav__link--logout .scm-acct-nav__icon .scm-ico { color: var(--scm-muted); }

	.scm-acct-dash { padding: 32px 24px; }

	/* Due colonne SOLO quando esistono entrambe (login+registrazione, il
	   col2-set di Woo): il ramo single (--single, sola card Accedi)
	   ereditava le 2 colonne e schiacciava la card a metà larghezza.
	   Il clearfix di Woo (.col2-set::before/::after con display:table)
	   diventerebbe un grid item e spingerebbe la 2ª card sotto la 1ª:
	   si disattivano gli pseudo-elementi dentro il grid. */
	.scm-acct-auth:not(.scm-acct-auth--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	/* Clearfix Woo (.woocommerce .col2-set::before/::after, specificità
	   0-2-1) battebbe .scm-acct-auth::before (0-1-1): serve il prefisso
	   .woocommerce per vincerlo e impedire ai pseudo-elementi display:table
	   di diventare grid items che spingono la 2ª card sotto la 1ª. */
	.woocommerce .scm-acct-auth::before,
	.woocommerce .scm-acct-auth::after,
	.woocommerce .scm-acct-auth .u-column1::before,
	.woocommerce .scm-acct-auth .u-column1::after,
	.woocommerce .scm-acct-auth .u-column2::before,
	.woocommerce .scm-acct-auth .u-column2::after { content: none; display: none; }

	.scm-acct-formcard,
	.scm-acct-formcard--wide { padding: 28px 26px; }

	/* Doppia colonna nativa dei form Woo (Nome/Cognome) senza float: la
	   griglia sta su un wrapper proprio (.scm-acct-formgrid) per non
	   comprimere i blocchi figli non-field dei form override.
	   Le card interne (.scm-acct-edit__card del dettaglio account) sono a
	   loro volta griglie 2 colonne: le coppie first/last (Nome|Cognome,
	   Email|Telefono, Nuova|Conferma password) si affiancano lì dentro. */
	.scm-acct-formgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
	.scm-acct-formgrid .form-row.form-row-wide,
	.scm-acct-formgrid .form-row:not(.form-row-first):not(.form-row-last),
	.scm-acct-formgrid .scm-acct-formcard__actions,
	.scm-acct-formgrid .scm-acct-formcard__fieldset,
	.scm-acct-formgrid .clear,
	.scm-acct-formgrid .lost_password { grid-column: 1 / -1; }
	.scm-acct-formgrid .scm-acct-edit__card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
	.scm-acct-formgrid .scm-acct-edit__card .form-row.form-row-first { grid-column: 1; }
	.scm-acct-formgrid .scm-acct-edit__card .form-row.form-row-last { grid-column: 2; }
	.scm-acct-formgrid .scm-acct-edit__card > .form-row.form-row-wide,
	.scm-acct-formgrid .scm-acct-edit__card > h3,
	.scm-acct-formgrid .scm-acct-edit__card > .scm-acct-edit__cf { grid-column: 1 / -1; }

	/* Campi indirizzo (renderizzati da woocommerce_form_field dentro il
	   wrapper del core): stessa doppia colonna. */
	.scm-acct-addr .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
	}
	.scm-acct-addr .form-row.form-row-wide { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   10. Anagrafica famiglia (endpoint anagrafiche — override tema del template
       persons/anagrafiche.php, frame Figma 343-3354).

       Classi nuove .scm-fam*: nessuna collisione con persons.css del plugin
       (che resta enqueued solo per il form .scm-persons*, override incluso
       con zona elimina in fondo: .scm-fam__delete*).
       Mobile-first: header impilato, card a capo, "Vedi dettagli" a tutta
       larghezza; da 640px tutto in riga. Nessun overflow a 390px.
   -------------------------------------------------------------------------- */

.scm-fam {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Header: titolo + sottotitolo, CTA (o box "serve Family") sotto su mobile.
   position/width/z-index neutralizzano il `header{position:fixed;top:0;
   width:100%;z-index:21}` del tema parent (css/navigation.css), che il child
   disattiva solo per header.scm-header (chrome.css §2): senza queste tre
   righe il header della lista resta fissato sopra la barra del sito. */
.scm-fam__header {
	position: static;
	width: auto;
	z-index: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 16px;
}

.scm-fam__heading { min-width: 0; }

.scm-fam__title {
	margin: 0;
	font-family: var(--scm-font-display);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.15;
	color: var(--scm-ink);
}

.scm-fam__subtitle {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--scm-muted);
}

.scm-fam__cta { flex: 1 1 100%; min-width: 0; }

/* CTA primaria "Aggiungi persona". */
.scm-fam__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--scm-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.scm-fam__add:hover { background: var(--scm-blue); filter: brightness(1.08); color: #fff; }
.scm-fam__add .scm-ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* Gate negativo: box informativo al posto della CTA. */
.scm-fam__gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--scm-blue-soft);
}

.scm-fam__gate-text { font-size: 12px; line-height: 1.4; color: var(--scm-ink); }

.scm-fam__gate-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--scm-blue);
	text-decoration: none;
	white-space: nowrap;
}
.scm-fam__gate-link:hover { text-decoration: underline; }
.scm-fam__gate-link .scm-ico { width: 14px; height: 14px; }

/* Lista + card persona. */
.scm-fam__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.scm-fam__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 12px 16px;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
	background: #fff;
}

/* Chip iniziali: blue-soft con tessera attiva, ambra soft se non tesserata. */
.scm-fam__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--scm-blue-soft);
	color: var(--scm-navy-dark);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
}
.scm-fam__avatar--inactive { background: #fff5e5; }

.scm-fam__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 160px;
	min-width: 0;
}

.scm-fam__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--scm-navy-dark);
}

.scm-fam__cf,
.scm-fam__membership {
	font-size: 12px;
	line-height: 1.4;
	color: var(--scm-muted);
	overflow-wrap: anywhere;
}

/* Pill stato tessera. */
.scm-fam__pill {
	flex: 0 0 auto;
	padding: 4px 12px;
	border: 1px solid;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}
.scm-fam__pill--active {
	background: rgba(132, 219, 3, .1);
	border-color: var(--scm-lime);
	color: #005733; /* verde scuro testo su lime soft (Figma) */
}
.scm-fam__pill--inactive {
	background: var(--scm-amber-bg);
	border-color: var(--scm-amber);
	color: var(--scm-amber-text);
}

/* "Vedi dettagli": secondario con chevron, a tutta larghezza su mobile. */
.scm-fam__details {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
	background: #fff;
	color: var(--scm-navy-dark);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.scm-fam__details:hover { border-color: var(--scm-blue); color: var(--scm-blue); }
.scm-fam__details .scm-ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* Stato vuoto della lista. */
.scm-fam__empty {
	margin: 0;
	padding: 24px 16px;
	border: 1px dashed var(--scm-border);
	border-radius: 8px;
	text-align: center;
	font-size: 14px;
	color: var(--scm-muted);
}

/* Banner informativo in fondo. */
.scm-fam__notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--scm-blue-soft);
	font-size: 12px;
	line-height: 1.5;
	color: var(--scm-ink);
}
.scm-fam__notice .scm-ico { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--scm-blue); }

/* Zona elimina nel form dettaglio (override person-form.php del tema). */
.scm-fam__delete {
	margin-top: 20px;
	padding: 12px 14px;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
}

.scm-fam__delete-summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	color: #b3261e; /* rosso discreto: azione distruttiva, non primaria */
}

.scm-fam__delete-hint {
	margin: 8px 0 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--scm-muted);
}

.scm-fam__delete-form { margin: 0; }

@media (min-width: 640px) {
	.scm-fam__cta { flex: 0 0 auto; }

	.scm-fam__add { width: auto; }

	.scm-fam__gate { flex-wrap: nowrap; max-width: 360px; }

	.scm-fam__details {
		width: auto;
		justify-content: center;
		margin-left: auto;
		padding: 8px 16px;
	}
}

@media (min-width: 900px) {
	/* In colonna larga (nav a sidebar) la card resta monoriga: più respiro. */
	.scm-fam__card { flex-wrap: nowrap; }
}

/* --------------------------------------------------------------------------
   Dettaglio anagrafica READ-ONLY (template persons/person-detail.php,
   frame Figma 343-3729). Classi nuove .scm-fam-detail*.
   Mobile-first: banner a colonna, griglia campi 1 colonna; da 640px la
   griglia va a 2 colonne. max-width 780px su colonna larga.
   -------------------------------------------------------------------------- */

.scm-fam-detail {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 780px;
}

/* Back link testuale terziario "Torna alle anagrafiche". */
.scm-fam-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	color: var(--scm-blue);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.scm-fam-detail__back:hover { text-decoration: underline; color: var(--scm-blue); }
.scm-fam-detail__back .scm-ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* Banner scuro identità. position/width/z-index neutralizzano di nuovo il
   `header{position:fixed}` del tema parent (è un <header> anch'esso). */
.scm-fam-detail__banner {
	position: static;
	width: auto;
	z-index: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 16px;
	border-radius: var(--scm-radius-card);
	background: var(--scm-navy); /* #183159 (Figma) */
}

.scm-fam-detail__id {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Chip iniziali. */
.scm-fam-detail__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: rgba(236, 243, 251, .2); /* blue-soft @20% su navy (Figma) */
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
}

.scm-fam-detail__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.scm-fam-detail__name {
	font-family: var(--scm-font-display);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.15;
	color: #fff;
}

.scm-fam-detail__membership {
	font-size: 12px;
	line-height: 1.4;
	color: var(--scm-muted-2); /* #9FB1BD secondario su navy */
	overflow-wrap: anywhere;
}

/* Pill stato tessera (palette Figma del dettaglio). */
.scm-fam-detail__pill {
	flex: 0 0 auto;
	padding: 4px 12px;
	border: 1px solid;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}
.scm-fam-detail__pill--active {
	background: var(--scm-lime-soft); /* #F2FBE5 ≈ Figma #F3FBE6 */
	border-color: var(--scm-lime);
	color: #005733; /* verde scuro testo su lime soft (Figma) */
}
.scm-fam-detail__pill--inactive {
	background: var(--scm-amber-bg);
	border-color: var(--scm-amber);
	color: var(--scm-amber-text);
}

/* Card dati. */
.scm-fam-detail__card {
	padding: 24px;
	border: 1px solid var(--scm-border);
	border-radius: var(--scm-radius-card);
	background: #fff;
}

/* Titolo sezione, stesso stile di .scm-ck-card__title (checkout.css). */
.scm-fam-detail__section {
	margin: 0 0 16px;
	font: 700 12.5px/1 var(--scm-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--scm-ink);
}

.scm-fam-detail__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.scm-fam-detail__field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	min-width: 0;
}
.scm-fam-detail__field--full { grid-column: 1 / -1; }

.scm-fam-detail__label {
	font-size: 11px;
	line-height: 1.3;
	color: var(--scm-muted);
}

.scm-fam-detail__value {
	font-size: 14px;
	line-height: 1.45;
	color: var(--scm-ink);
	overflow-wrap: anywhere;
}

/* "Modifica dati": secondario full-width, matita sx + chevron dx. */
.scm-fam-detail__edit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
	background: #fff;
	color: var(--scm-navy-dark); /* #122339 */
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.scm-fam-detail__edit:hover { border-color: var(--scm-blue); color: var(--scm-blue); }
.scm-fam-detail__edit .scm-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.scm-fam-detail__edit-text { flex: 1 1 auto; }

@media (min-width: 640px) {
	.scm-fam-detail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   11. Moduli PDF (endpoint `moduli-pdf`, frame Figma 343-5108): card a due
   blocchi come la lista ordini — striscia header grigia con le etichette
   di colonna (ISCRIZIONE / INTESTATARIO / SCARICA) e corpo bianco con una
   riga per modulo (chip file + titolo Barlow Condensed + meta, intestatario
   e bottone secondario "Scarica"). Empty state riusato da §6 (.scm-acct-
   empty). Mobile-first: sotto i 640px la striscia header sparisce (le info
   sono già nelle righe) e intestatario/azione vanno sotto il documento.
   -------------------------------------------------------------------------- */

/* Header contenuto: come .scm-ord__header, neutralizza il
   `header{position:fixed;top:0;width:100%;z-index:21}` del tema parent. */
.scm-forms { max-width: 680px; }

.scm-forms__header {
	position: static;
	width: auto;
	z-index: auto;
	margin: 0 0 20px;
}

.scm-forms__title {
	margin: 0;
	font-family: var(--scm-font-display);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.15;
	color: var(--scm-ink);
}

.scm-forms__subtitle {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--scm-muted);
}

/* --- Striscia header (solo da 640px, colonne allineate alle righe) ------- */
.scm-forms__head {
	display: none;
	padding: 16px 24px;
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	font: 700 12px/1.2 var(--scm-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--scm-muted);
}

.scm-forms__head-dl { text-align: right; }

/* --- Corpo card: una riga per modulo ------------------------------------- */
.scm-forms__body {
	list-style: none; margin: 0;
	display: flex; flex-direction: column; gap: 16px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
}

.scm-forms__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--scm-border);
}
.scm-forms__row:last-child { padding-bottom: 0; border-bottom: 0; }

.scm-forms__doc {
	grid-column: 1 / -1;
	display: flex; align-items: center; gap: 12px;
	min-width: 0;
}

/* Chip documento: fondo rosso chiarissimo, come le icone "file" dell'area. */
.scm-forms__chip {
	flex: none;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 8px;
	background: #ffebec;
	color: var(--scm-ink);
}
.scm-forms__chip .scm-ico { width: 18px; height: 18px; }

.scm-forms__info {
	display: flex; flex-direction: column; gap: 3px;
	min-width: 0;
}
.scm-forms__name {
	font: 600 18px/1.15 var(--scm-font-display);
	color: var(--scm-ink);
	overflow-wrap: anywhere;
}
.scm-forms__meta { font-size: 12px; line-height: 1.4; color: var(--scm-muted); }

.scm-forms__person {
	font-size: 12px; line-height: 1.4;
	color: var(--scm-muted);
	overflow-wrap: anywhere;
}

/* Bottone secondario "Scarica" (secondario di area: bianco + bordo). */
.scm-forms__dl {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 16px;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
	background: #fff;
	color: var(--scm-blue);
	font: 700 14px/1 var(--scm-font-body);
	text-decoration: none;
	transition: border-color .15s ease;
}
.scm-forms__dl:hover { border-color: #d3dbe6; color: var(--scm-blue); }
.scm-forms__dl .scm-ico { width: 16px; height: 16px; }

@media (min-width: 640px) {
	.scm-forms__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 150px 132px;
		align-items: center;
		gap: 16px;
	}
	.scm-forms__body {
		border-radius: 0 0 16px 16px;
		padding: 16px 24px;
	}
	.scm-forms__row {
		grid-template-columns: minmax(0, 1fr) 150px 132px;
		gap: 16px;
	}
	.scm-forms__doc { grid-column: 1; }
	.scm-forms__dl { grid-column: 3; justify-self: end; }
}

/* --------------------------------------------------------------------------
   11. Dettaglio account (frame Figma 343:4112): titolo pagina + due card
       DATI PERSONALI / PASSWORD; CF readonly evidenziato (#ECF3FB, bordo
       #5C82BB); le card spannano tutta la griglia del form.
   -------------------------------------------------------------------------- */
.scm-acct-edit__title,
.scm-acct-edit__sub { margin: 0 0 6px; }
.scm-acct-edit__sub { color: var(--scm-muted); font-size: 12px; margin-bottom: 16px; }
.scm-acct-edit__card {
	grid-column: 1 / -1;
	border: 1px solid var(--scm-border);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 18px;
}
.scm-acct-edit__card-title {
	margin: 0 0 14px;
	font: 700 12px/1 var(--scm-font-body);
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--scm-ink);
}
.scm-acct-edit__cf {
	margin-top: 14px;
}
.scm-acct-edit__cf input {
	background: #ecf3fb !important;
	border-color: #5c82bb !important;
	cursor: default;
}
@media (min-width: 720px) {
	.scm-acct-edit__card { padding: 24px; }
}

/* Consenso privacy (form "Crea un account", form-login.php): riga
   full-width sopra il submit, come la checkbox termini del checkout. */
.scm-acct-privacy label.checkbox {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 4px 0 14px;
	font: 400 14px/1.5 var(--scm-font-body);
	color: var(--scm-ink);
	cursor: pointer;
}
.scm-acct-privacy input[type="checkbox"] { margin-top: 3px; }
.scm-acct-privacy a { color: var(--scm-blue); }