/* ==========================================================================
   Thank-you REGISTRAZIONE ("Registrazione completata") — stile derivato
   dai pattern di order-received.css (head soft, card, bottoni chrome):
   nessun frame Figma dedicato, si riusa il linguaggio delle conferme.
   NOTA DI AGGIORNAMENTO (fix cliente 30/09/2026): pagina introdotta per
   sostituire l'auto-login post-registrazione con la comunicazione
   "riceverai una email con il link per impostare la password".
   Mobile-first: hero → box info → CTA. Solo token di chrome.css.
   ========================================================================== */

/* Breadcrumb (stili propri come order-received.css: catalog.css non è
   caricato qui; senza queste regole l'ol esce numerato). */
.scm-regty .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-regty .scm-breadcrumbs li { display: inline-flex; align-items: center; gap: 4px; }
.scm-regty .scm-breadcrumbs a { color: var(--scm-muted); text-decoration: none; }
.scm-regty .scm-breadcrumbs a:hover { color: var(--scm-blue); }
.scm-regty .scm-breadcrumbs [aria-current="page"] { color: var(--scm-ink); font-weight: 700; }
.scm-regty .scm-breadcrumbs__sep { display: inline-flex; color: var(--scm-muted); }
.scm-regty .scm-breadcrumbs__sep .scm-ico { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   1. Hero conferma (come .scm-ty-head dell'ordine: fondo soft + check lime)
   -------------------------------------------------------------------------- */
.scm-regty__head {
	background: var(--scm-bg-soft);
	border-bottom: 1px solid var(--scm-border);
	padding: 30px 0;
}
.scm-regty__icon {
	display: grid; place-items: center;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--scm-lime);
	color: var(--scm-navy);
}
.scm-regty__icon .scm-ico { width: 30px; height: 30px; stroke-width: 2.6; }
.scm-regty__kicker {
	margin: 16px 0 0;
	font: 700 12px/1 var(--scm-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--scm-lime-text);
}
.scm-regty__title {
	margin: 10px 0 0;
	font: 600 clamp(30px, 4.6vw, 42px)/1.08 var(--scm-font-display);
	color: var(--scm-ink);
	max-width: 24ch;
}

/* --------------------------------------------------------------------------
   2. Corpo: box informativo email + CTA
   -------------------------------------------------------------------------- */
.scm-regty__body { padding: 32px 0 60px; }
.scm-regty__box {
	display: flex; gap: 16px; align-items: flex-start;
	background: #fff;
	border: 1px solid var(--scm-border);
	border-radius: 16px; /* token: card 16px */
	box-shadow: var(--scm-shadow-card);
	padding: 22px;
}
.scm-regty__box-icon {
	display: grid; place-items: center; flex: none;
	width: 44px; height: 44px;
	border-radius: 10px; /* token: chip 8-10px */
	background: var(--scm-bg-soft);
	color: var(--scm-blue);
}
.scm-regty__box-icon .scm-ico { width: 22px; height: 22px; }
.scm-regty__box-text { min-width: 0; }
.scm-regty__box-title {
	margin: 2px 0 0;
	font: 600 20px/1.25 var(--scm-font-display);
	color: var(--scm-ink);
	overflow-wrap: anywhere;
}
.scm-regty__box-title strong { color: var(--scm-blue); }
.scm-regty__box-body {
	margin: 10px 0 0;
	color: var(--scm-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

/* CTA di ritorno */
.scm-regty__actions {
	display: flex; flex-wrap: wrap; gap: 12px;
	margin-top: 22px;
}
.scm-regty__actions .scm-btn { display: inline-flex; align-items: center; gap: 8px; }
/* Variante secondaria outline (la "ghost"): bordo, fondo trasparente. */
.scm-btn--outline {
	background: transparent;
	color: var(--scm-blue);
	border: 1.5px solid var(--scm-blue);
}
.scm-btn--outline:hover { background: var(--scm-bg-soft); }

/* --------------------------------------------------------------------------
   3. Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.scm-regty__head { padding: 36px 0 34px; }
	.scm-regty__icon { width: 72px; height: 72px; }
	.scm-regty__icon .scm-ico { width: 34px; height: 34px; }
	.scm-regty__body { padding: 40px 0 80px; }
	.scm-regty__box { padding: 26px; }
	.scm-regty__actions { margin-top: 26px; }
}