/**
 * Area professionisti — front-end.
 *
 * L'area veste come il resto del sito: titoli, testi, campi e pulsanti sono
 * quelli del tema (Woodmart), gli stessi del popup di iscrizione e del modulo
 * di preventivo. I valori arrivano dalle variabili del tema (`--wd-*`,
 * `--btn-*`, `--brdcolor-*`), con i valori del sito come riserva: se cambiano
 * nelle opzioni di Woodmart, l'area li segue. Con un altro tema restano i
 * valori di riserva.
 */

.vgb-ra {
	/* Testi e titoli. */
	--vgb-ra-ink: var(--wd-title-color, #242424);
	--vgb-ra-text: var(--wd-text-color, #767676);
	--vgb-ra-secondary: var(--wd-text-color, #767676);
	--vgb-ra-deep: var(--wd-title-color, #242424);

	/* Accento: il rosso dei pulsanti del tema. */
	--vgb-ra-primary: var(--btn-accented-bgcolor-hover, rgb(191, 63, 59));

	/* Linee e fondi grigi del tema. */
	--vgb-ra-line: var(--brdcolor-gray-300, rgba(0, 0, 0, 0.105));
	--vgb-ra-line-soft: var(--brdcolor-gray-200, rgba(0, 0, 0, 0.075));
	--vgb-ra-surface: var(--bgcolor-gray-100, #f7f7f7);
	--vgb-ra-surface-alt: var(--bgcolor-gray-200, #f1f1f1);
	--vgb-ra-beige: #f2ebdb;

	/* Caratteri del tema. */
	--vgb-ra-title-font: var(--wd-title-font, "Epilogue", Arial, Helvetica, sans-serif);
	--vgb-ra-title-weight: var(--wd-title-font-weight, 500);
	--vgb-ra-text-font: var(--wd-text-font, "Epilogue", Arial, Helvetica, sans-serif);

	/* Campi come quelli del tema: bordo chiaro da 2px, alti 42px. */
	--vgb-ra-field-border: var(--wd-form-brd-color, rgba(129, 129, 129, 0.2));
	--vgb-ra-field-border-focus: var(--wd-form-brd-color-focus, rgba(129, 129, 129, 0.3));
	--vgb-ra-field-width: var(--wd-form-brd-width, 2px);
	--vgb-ra-field-height: var(--wd-form-height, 42px);

	--vgb-ra-radius: var(--wd-form-brd-radius, 0px);

	font-family: var(--vgb-ra-text-font);
	color: var(--vgb-ra-text);
}

.vgb-ra * {
	box-sizing: border-box;
}

/* `hidden` deve vincere su `display` delle nostre classi (es. i campi
   dell'importo, che compaiono solo con "preventivo inviato"). */
.vgb-ra [hidden] {
	display: none !important;
}

/* Titoli come quelli del tema. */
.vgb-ra__title {
	margin: 0 0 10px;
	font-family: var(--vgb-ra-title-font);
	font-size: 22px;
	font-weight: var(--vgb-ra-title-weight);
	line-height: 1.4;
	color: var(--vgb-ra-ink);
}

/* Etichette e intestazioni di colonna: maiuscolo, come le intestazioni
   delle tabelle di "Il mio account" nel tema. */
.vgb-ra__eyebrow,
.vgb-ra-docs__group-title,
.vgb-ra-table th,
.vgb-ra-summary__label,
.vgb-ra-badge {
	font-family: var(--vgb-ra-text-font);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* Collegamenti come quelli del tema; i pulsanti hanno i loro colori. */
.vgb-ra a:not(.vgb-ra-btn) {
	color: var(--wd-link-color, #333);
}

.vgb-ra a:not(.vgb-ra-btn):hover,
.vgb-ra a:not(.vgb-ra-btn):focus {
	color: var(--wd-link-color-hover, #242424);
}

.vgb-ra__lead {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.7;
}

.vgb-ra__section {
	margin: 0 0 40px;
}

/* --- Avvisi ------------------------------------------------------------ */

.vgb-ra-notice {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-left: 3px solid var(--vgb-ra-primary);
	background: var(--vgb-ra-surface);
	font-size: 14px;
	line-height: 1.6;
}

.vgb-ra-notice--error {
	border-left-color: var(--vgb-ra-primary);
}

.vgb-ra-notice ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

/* --- Badge di stato ---------------------------------------------------- */

.vgb-ra-badge {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--vgb-ra-line);
	border-radius: var(--vgb-ra-radius);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.6;
}

.vgb-ra-badge--ok {
	border-color: #5f6f4a;
	color: #5f6f4a;
}

.vgb-ra-badge--ko {
	border-color: var(--vgb-ra-primary);
	color: var(--vgb-ra-primary);
}

.vgb-ra-badge--warn {
	border-color: #9a7233;
	color: #9a7233;
}

.vgb-ra-badge--info {
	border-color: var(--vgb-ra-deep);
	color: var(--vgb-ra-deep);
}

.vgb-ra-badge--pending,
.vgb-ra-badge--muted {
	border-color: var(--vgb-ra-line);
	color: var(--vgb-ra-secondary);
}

/* --- Documenti tecnici ------------------------------------------------- */

.vgb-ra-docs {
	border-top: 1px solid var(--vgb-ra-line);
	padding-top: 32px;
	margin-top: 32px;
}

.vgb-ra-docs__group {
	margin: 0 0 28px;
}

.vgb-ra-docs__group-title {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--vgb-ra-secondary);
}

.vgb-ra-docs__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--vgb-ra-line);
}

.vgb-ra-doc {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--vgb-ra-line);
}

.vgb-ra-doc__ext {
	flex: 0 0 auto;
	min-width: 56px;
	padding: 6px 8px;
	border: 1px solid var(--vgb-ra-line);
	border-radius: var(--vgb-ra-radius);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--vgb-ra-primary);
}

.vgb-ra-doc__body {
	flex: 1 1 auto;
	min-width: 0;
}

.vgb-ra-doc__name {
	display: block;
	font-family: var(--vgb-ra-title-font);
	font-size: 16px;
	font-weight: var(--vgb-ra-title-weight);
	color: var(--vgb-ra-ink);
}

.vgb-ra-doc__meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--vgb-ra-text);
}

.vgb-ra-doc__action {
	flex: 0 0 auto;
}

/* --- Pulsanti ---------------------------------------------------------- */

/* Il tema veste anche `button` e `[type=submit]`: con un solo selettore di
   classe perderemmo, per questo le regole partono da `.vgb-ra`. */
.vgb-ra .vgb-ra-btn,
.vgb-ra-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 5px 30px;
	border: 0;
	border-radius: var(--btn-accented-brd-radius, 0);
	background-color: var(--btn-accented-bgcolor, rgba(191, 63, 59, 0.84));
	box-shadow: var(--btn-accented-box-shadow, inset 0 -2px 0 rgba(0, 0, 0, 0.15));
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--btn-accented-color, #fff);
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* I temi sottolineano i link con selettori più specifici del nostro: su un
   pulsante la sottolineatura è un errore, ed è l'unico punto in cui vale la
   pena imporsi sul tema. */
.vgb-ra .vgb-ra-btn,
.vgb-ra .vgb-ra-btn:hover,
.vgb-ra .vgb-ra-btn:focus {
	text-decoration: none !important;
}

.vgb-ra .vgb-ra-btn:hover,
.vgb-ra .vgb-ra-btn:focus,
.vgb-ra-btn:hover,
.vgb-ra-btn:focus {
	background-color: var(--btn-accented-bgcolor-hover, rgb(191, 63, 59));
	box-shadow: var(--btn-accented-box-shadow-hover, inset 0 -2px 0 rgba(0, 0, 0, 0.15));
	color: var(--btn-accented-color-hover, #fff);
}

/* Secondario: il pulsante "di base" del tema, grigio chiaro. */
.vgb-ra .vgb-ra-btn--ghost,
.vgb-ra-btn--ghost {
	border-radius: var(--btn-default-brd-radius, 0);
	background-color: var(--btn-default-bgcolor, #f7f7f7);
	box-shadow: var(--btn-default-box-shadow, none);
	color: var(--btn-default-color, #333);
}

.vgb-ra .vgb-ra-btn--ghost:hover,
.vgb-ra .vgb-ra-btn--ghost:focus,
.vgb-ra-btn--ghost:hover,
.vgb-ra-btn--ghost:focus {
	background-color: var(--btn-default-bgcolor-hover, #efefef);
	box-shadow: var(--btn-default-box-shadow-hover, none);
	color: var(--btn-default-color-hover, #333);
}

.vgb-ra .vgb-ra-btn--small,
.vgb-ra-btn--small {
	min-height: 34px;
	padding: 5px 18px;
	font-size: 12px;
}

/* --- Moduli ------------------------------------------------------------ */

.vgb-ra-form {
	border-top: 1px solid var(--vgb-ra-line);
	padding-top: 32px;
	margin-top: 32px;
}

.vgb-ra-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin: 0 0 20px;
}

.vgb-ra-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.vgb-ra-field--wide {
	grid-column: 1 / -1;
}

/* Etichette sopra il campo, come quelle del tema. */
.vgb-ra-field label {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vgb-ra-ink);
}

/* Campi del tema: bordo chiaro da 2px, alti 42px, angoli vivi. */
.vgb-ra-field input[type="text"],
.vgb-ra-field input[type="number"],
.vgb-ra-field input[type="date"],
.vgb-ra-field input[type="file"],
.vgb-ra-field select,
.vgb-ra-field textarea {
	box-sizing: border-box;
	width: 100%;
	height: var(--vgb-ra-field-height);
	min-height: var(--vgb-ra-field-height);
	margin: 0;
	padding: 0 15px;
	border: var(--vgb-ra-field-width) solid var(--vgb-ra-field-border);
	border-radius: var(--vgb-ra-radius);
	background-color: var(--wd-form-bg, transparent);
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wd-form-color, inherit);
	transition: border-color 0.5s ease;
}

.vgb-ra-field textarea {
	height: auto;
	min-height: 120px;
	padding: 10px 15px;
}

.vgb-ra-field select {
	padding-right: 30px;
	background-image: var(--wd-form-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"));
	background-repeat: no-repeat;
	background-position: right 10px top 50%;
	background-size: auto 18px;
	-webkit-appearance: none;
	appearance: none;
}

/* Il file: il pulsante del browser diventa un pulsante "di base" del tema,
   a tutta altezza dentro il campo, con il nome del file accanto. */
.vgb-ra-field input[type="file"] {
	padding: 0 15px 0 0;
	line-height: calc(var(--vgb-ra-field-height) - 2 * var(--vgb-ra-field-width));
	color: var(--vgb-ra-text);
	cursor: pointer;
}

.vgb-ra-field input[type="file"]::file-selector-button {
	height: 100%;
	margin: 0 15px 0 0;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background-color: var(--btn-default-bgcolor, #f7f7f7);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--btn-default-color, #333);
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.vgb-ra-field input[type="file"]:hover::file-selector-button {
	background-color: var(--btn-default-bgcolor-hover, #efefef);
}

.vgb-ra-field input:focus,
.vgb-ra-field select:focus,
.vgb-ra-field textarea:focus {
	border-color: var(--vgb-ra-field-border-focus);
	outline: 0;
	box-shadow: none;
}

/* Aiuti sotto il campo: discreti. */
.vgb-ra-field__hint {
	font-size: 12px;
	line-height: 1.5;
	color: var(--vgb-ra-text);
}

.vgb-ra-field__required {
	color: var(--vgb-ra-primary);
}

.vgb-ra-dimensions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

/* Risposta nella scheda di una richiesta: 20px tra un campo e l'altro,
   come negli altri moduli. */
.vgb-ra-reply > .vgb-ra-field {
	margin: 0 0 20px;
}

.vgb-ra-reply > p:last-child {
	margin: 10px 0 0;
}

/* --- Elenco richieste -------------------------------------------------- */

.vgb-ra-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.vgb-ra-table th {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--vgb-ra-line);
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	color: var(--vgb-ra-ink);
}

.vgb-ra-table td {
	padding: 14px 12px 14px 0;
	border-bottom: 1px solid var(--vgb-ra-line);
	vertical-align: top;
}

.vgb-ra-table tr:last-child td {
	border-bottom: none;
}

.vgb-ra-table a {
	font-weight: 600;
	color: var(--vgb-ra-ink);
	text-decoration: none;
}

/* La voce che apre la riga — il codice del preventivo, il nome del
   prodotto — è il primo appiglio dell'occhio: più grande del resto, e al
   passaggio del mouse si ingrandisce e prende il rosso dei pulsanti, così si
   capisce che è lì che si clicca. Lo scale non sposta il resto della riga. */
.vgb-ra .vgb-ra-table .vgb-ra-table__link {
	display: inline-block;
	font-family: var(--vgb-ra-title-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vgb-ra-ink);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transform-origin: left center;
	transition: color 0.25s ease, transform 0.25s ease;
}

.vgb-ra .vgb-ra-table .vgb-ra-table__link:hover,
.vgb-ra .vgb-ra-table .vgb-ra-table__link:focus-visible {
	color: var(--vgb-ra-primary);
	transform: scale(1.06);
}

.vgb-ra .vgb-ra-table .vgb-ra-table__link:focus-visible {
	outline: 2px solid var(--vgb-ra-primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vgb-ra .vgb-ra-table .vgb-ra-table__link {
		transition: color 0.25s ease;
	}

	.vgb-ra .vgb-ra-table .vgb-ra-table__link:hover,
	.vgb-ra .vgb-ra-table .vgb-ra-table__link:focus-visible {
		transform: none;
	}
}

/* --- Avanzamento ------------------------------------------------------- */

/* Classe sua: `.vgb-ra-steps` è il modulo di iscrizione a step. */
.vgb-ra-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.vgb-ra-progress__item {
	flex: 1 1 120px;
	margin: 0;
	padding: 12px 14px 0 0;
	border-top: 3px solid var(--vgb-ra-line);
	font-size: 12px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--vgb-ra-text);
}

.vgb-ra-progress__item--done {
	border-top-color: var(--vgb-ra-ink);
	color: var(--vgb-ra-ink);
}

.vgb-ra-progress__item--current {
	border-top-color: var(--vgb-ra-primary);
	color: var(--vgb-ra-ink);
	font-weight: 600;
}

/* --- Cronologia -------------------------------------------------------- */

.vgb-ra-timeline {
	margin: 0;
	padding: 0 0 0 22px;
	list-style: none;
	border-left: 1px solid var(--vgb-ra-line);
}

.vgb-ra-timeline__item {
	position: relative;
	padding: 0 0 24px;
}

.vgb-ra-timeline__item::before {
	content: "";
	position: absolute;
	left: -27px;
	top: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vgb-ra-primary);
}

.vgb-ra-timeline__item--private::before {
	background: var(--vgb-ra-line);
}

.vgb-ra-timeline__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 12px;
	color: var(--vgb-ra-text);
}

.vgb-ra-timeline__author {
	font-weight: 600;
	color: var(--vgb-ra-ink);
}

.vgb-ra-timeline__message {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

/* --- Riepiloghi -------------------------------------------------------- */

.vgb-ra-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0 0 32px;
}

.vgb-ra-summary__cell {
	padding: 18px 20px;
	border: 0;
	background: var(--vgb-ra-surface);
}

.vgb-ra-summary__value {
	display: block;
	font-family: var(--vgb-ra-title-font);
	font-size: 30px;
	font-weight: var(--vgb-ra-title-weight);
	line-height: 1.2;
	color: var(--vgb-ra-deep);
}

.vgb-ra-summary__label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--vgb-ra-secondary);
}

.vgb-ra-code-box__code {
	display: inline-block;
	margin: 0 0 12px;
	padding: 10px 18px;
	border: 1px solid var(--vgb-ra-primary);
	font-family: var(--vgb-ra-text-font);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--vgb-ra-ink);
}

.vgb-ra-details {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 28px;
	font-size: 14px;
}

/* Etichetta a sinistra in maiuscolo, valore a destra. */
.vgb-ra-details th {
	width: 38%;
	padding: 12px 16px 12px 0;
	border-bottom: 1px solid var(--vgb-ra-line-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	text-align: left;
	vertical-align: top;
	color: var(--vgb-ra-ink);
}

.vgb-ra-details td {
	padding: 12px 0;
	border-bottom: 1px solid var(--vgb-ra-line-soft);
	vertical-align: top;
	color: var(--vgb-ra-ink);
}

.vgb-ra-empty {
	padding: 32px;
	border: 1px dashed var(--vgb-ra-line);
	text-align: center;
	font-size: 14px;
	color: var(--vgb-ra-text);
}

/* --- Ingresso dentro "Il mio account" ---------------------------------- */

/* Sta in mezzo a contenuti che non sono nostri — i moduli di WooCommerce o il
   cruscotto del tema — quindi si stacca da sopra con un filo di linea invece
   di presumere il margine del vicino.

   Centrato e stretto: sotto il modulo di accesso la pagina è larga quanto il
   contenitore del tema, e un paragrafo lungo tutta quella larghezza non si
   legge. Qui è un invito, non una tabella: sta meglio raccolto in mezzo. */
.vgb-ra-entry {
	max-width: 640px;
	margin: 48px auto 0;
	padding: 32px 0 0;
	border-top: 1px solid var(--vgb-ra-line-soft);
	text-align: center;
}

.vgb-ra-entry .vgb-ra__lead {
	margin-bottom: 16px;
}

.vgb-ra-entry .vgb-ra__lead:last-of-type {
	margin-bottom: 24px;
}

.vgb-ra-entry__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

/* --- Modulo di iscrizione (User Registration) --------------------------- */

/* UR disegna il modulo con una palette sua: il pulsante esce viola (#475bb2),
   e così i bordi del campo attivo e i link. Non combattiamo i suoi selettori:
   UR li scrive tutti come var(--ur-…, #475bb2), quindi basta ridefinire le
   variabili qui e tutto il modulo passa ai colori Vagabond. */
.vgb-ra-registration {
	--ur-primary-color: var(--vgb-ra-primary);
	--ur-primary-light: var(--vgb-ra-surface);
	--ur-button-background-normal-color: var(--vgb-ra-primary);
	--ur-button-background-hover-color: var(--vgb-ra-deep);
	--ur-button-text-normal-color: #fff;
	--ur-button-text-hover-color: #fff;
}

/* Quel che resta scritto a mano nel CSS di UR: lo stato di passaggio del
   pulsante e gli angoli arrotondati, che nell'impianto Vagabond sono vivi. */
.vgb-ra-registration .ur-submit-button,
.vgb-ra-registration .user-registration-Button {
	border-radius: var(--vgb-ra-radius);
	font-family: var(--vgb-ra-text-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vgb-ra-registration .ur-submit-button:hover,
.vgb-ra-registration .ur-submit-button:focus,
.vgb-ra-registration .user-registration-Button:hover,
.vgb-ra-registration .user-registration-Button:focus {
	background: var(--vgb-ra-deep);
	border-color: var(--vgb-ra-deep);
	color: #fff;
}

/* I bordi dei campi restano il grigio neutro di UR (#e1e1e1): il suo stile
   "flat" li fissa con una catena di sette classi e un !important sul raggio,
   e per vincerla servirebbe un selettore ancora più lungo, legato a classi
   interne che il prossimo aggiornamento può cambiare senza preavviso. Un
   grigio chiaro su fondo bianco non stona, gli angoli sono già vivi come
   vuole l'impianto Vagabond, e il marchio sulla pagina lo portano il
   pulsante e i caratteri. */

/* Il modulo sta in una pagina tutta sua: raccolto, non largo quanto lo
   schermo, come le altre schermate dell'area. */
.vgb-ra-registration .ur-frontend-form {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--vgb-ra-radius);
}

/* --- Modulo di preventivo ----------------------------------------------- */

/* `[vagabond_quote_form]` sta nel popup aperto da "Request a quote", come il
   modulo di iscrizione: titolo e introduzione al centro, come la domanda
   "Sei un professionista?"; campi e pulsanti sono quelli di tutta l'area. */

.vgb-ra-quote-form {
	margin: 0;
	padding: 0;
	border: 0;
}

.vgb-ra-quote-form .vgb-ra__title {
	text-align: center;
}

.vgb-ra-quote-form .vgb-ra__lead {
	margin: 0 0 25px;
	font-size: 14px;
	text-align: center;
}

.vgb-ra-quote-form .vgb-ra__lead strong {
	color: var(--vgb-ra-ink);
}

/* I campi a tutta larghezza stanno fuori dalle griglie: lo stesso spazio
   che le griglie hanno sotto. */
.vgb-ra-quote-form form > .vgb-ra-field--wide {
	margin: 0 0 20px;
}

/* Invio staccato dall'ultimo campo, come nel modulo di iscrizione. */
.vgb-ra-quote-form .vgb-ra-quote-form__actions {
	margin: 30px 0 0;
}

/* --- Modulo di iscrizione a step (popup) -------------------------------- */

/* `[vagabond_area_registration steps="yes"]` va dentro un popup del tema,
   accanto a "Contact our Team" della pagina For Professionals: ha la veste
   dei moduli Woodmart (Contact Form 7), non la palette dell'area. I valori
   vengono dalle variabili del tema (`--wd-form-*`, `--btn-*`), con i valori
   del sito come riserva: se un domani cambiano nelle opzioni di Woodmart, il
   modulo li segue. Il padding lo dà il popup (impostazione del widget).

   Il modulo è di User Registration, che lo veste con regole lunghe (e una
   larghezza scritta nell'HTML): per questo i selettori qui sono più lunghi
   del solito e qualche valore è !important. */

.vgb-ra-steps {
	--vgb-ra-steps-title: var(--wd-title-color, #242424);
	--vgb-ra-steps-field-border: var(--wd-form-brd-color, rgba(129, 129, 129, 0.2));
	--vgb-ra-steps-field-border-focus: var(--wd-form-brd-color-focus, rgba(129, 129, 129, 0.3));
	--vgb-ra-steps-field-width: var(--wd-form-brd-width, 2px);
	--vgb-ra-steps-field-radius: var(--wd-form-brd-radius, 0);
	--vgb-ra-steps-field-height: var(--wd-form-height, 42px);

	/* La stessa classe fa da barra di avanzamento dei preventivi (flex in
	   riga): qui torna un blocco. */
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: var(--wd-text-color, #767676);
}

.vgb-ra-steps [hidden] {
	display: none !important;
}

.vgb-ra-steps .user-registration.ur-frontend-form {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Schermata iniziale: la domanda, come il titolo di "Contact our Team", e
   "Registrati Qui"; il modulo resta nascosto finché non si preme il
   pulsante. */
.vgb-ra-steps.is-intro > :not(.vgb-ra-steps__intro) {
	display: none !important;
}

.vgb-ra-steps__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	padding: 10px 0;
	text-align: center;
}

.vgb-ra-steps__intro-text {
	margin: 0;
	font-family: var(--wd-title-font, inherit);
	font-size: 22px;
	font-weight: var(--wd-title-font-weight, 500);
	line-height: 1.4;
	color: var(--vgb-ra-steps-title);
}

/* Sul sito il popup non ha titolo né introduzione di UR: si parte dai campi. */
.vgb-ra-steps .ur-frontend-form .user-registration-registration-title,
.vgb-ra-steps .ur-frontend-form .user-registration-registration-description,
.vgb-ra-steps .ur-frontend-form > br {
	display: none !important;
}

.vgb-ra-steps .ur-frontend-form form.register {
	margin: 0;
}

/* Un campo per riga, a tutta larghezza, 20px tra uno e l'altro. */
.vgb-ra-steps .ur-frontend-form .ur-form-row {
	display: block;
	margin: 0;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid {
	float: none;
	width: 100% !important;
	margin: 0;
	padding: 0;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item {
	margin: 0 0 20px !important;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item .form-row {
	margin: 0;
	padding: 0;
}

/* Etichette sopra il campo, come quelle del tema. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item label.ur-label {
	display: block;
	margin: 0 0 5px !important;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vgb-ra-steps-title);
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item label.ur-label .required {
	margin-left: 4px;
	color: #e01020;
	text-decoration: none;
	border: 0;
}

/* Campi del tema: bordo chiaro da 2px, alti 42px, angoli vivi. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item input.input-text,
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item select,
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--vgb-ra-steps-field-height);
	margin: 0;
	padding: 0 15px;
	border: var(--vgb-ra-steps-field-width) solid var(--vgb-ra-steps-field-border) !important;
	border-radius: var(--vgb-ra-steps-field-radius) !important;
	background-color: var(--wd-form-bg, transparent);
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wd-form-color, inherit);
	transition: border-color 0.5s ease;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item input.input-text {
	height: var(--vgb-ra-steps-field-height);
}

/* La freccia: UR ne disegna una sua con un `background` scritto con regole
   più lunghe delle nostre (moduli "flat"), quindi qui serve !important. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item select {
	max-height: none;
	padding-right: 30px;
	background-image: var(--wd-form-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")) !important;
	background-repeat: no-repeat !important;
	background-position: right 10px top 50% !important;
	background-size: auto 18px !important;
	-webkit-appearance: none;
	appearance: none;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item textarea {
	min-height: 120px;
	padding: 10px 15px;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item input.input-text:focus,
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item select:focus,
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item textarea:focus {
	border-color: var(--vgb-ra-steps-field-border-focus) !important;
	outline: 0;
	box-shadow: none;
}

/* Caselle: in colonna, testo come le etichette. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox ul li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox ul li label {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	color: var(--vgb-ra-steps-title);
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item.field-checkbox ul li input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0 !important;
	position: static !important;
}

/* Aiuti e contatori sotto il campo: discreti. */
.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item .description {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wd-text-color, #767676);
}

.vgb-ra-steps .ur-frontend-form .ur-form-row .ur-form-grid .ur-field-item .user-registration-error {
	font-size: 12px;
}

/* --- Pulsanti: come "Send" del tema. "Next", invio e "Registrati Qui"
   nel colore accentato, "Previous" in quello di base. ------------------ */

.vgb-ra-steps .vgb-ra-steps__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 5px 0 0;
}

.vgb-ra-steps .vgb-ra-steps__buttons .ur-button-container {
	display: flex;
	margin: 0 !important;
	padding: 0 !important;
}

.vgb-ra-steps .vgb-ra-steps__intro .vgb-ra-steps__button,
.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button,
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	min-height: 42px;
	margin: 0;
	padding: 5px 30px;
	border: 0;
	border-radius: var(--btn-accented-brd-radius, 0);
	background-color: var(--btn-accented-bgcolor, rgba(191, 63, 59, 0.84));
	box-shadow: var(--btn-accented-box-shadow, inset 0 -2px 0 rgba(0, 0, 0, 0.15));
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--btn-accented-color, #fff);
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.vgb-ra-steps .vgb-ra-steps__intro .vgb-ra-steps__button:hover,
.vgb-ra-steps .vgb-ra-steps__intro .vgb-ra-steps__button:focus,
.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button:hover,
.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button:focus,
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button:hover,
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button:focus {
	background-color: var(--btn-accented-bgcolor-hover, rgb(191, 63, 59));
	box-shadow: var(--btn-accented-box-shadow-hover, inset 0 -2px 0 rgba(0, 0, 0, 0.15));
	color: var(--btn-accented-color-hover, #fff);
}

.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button.e-form__buttons__wrapper__button-previous {
	border-radius: var(--btn-default-brd-radius, 0);
	background-color: var(--btn-default-bgcolor, #f7f7f7);
	box-shadow: var(--btn-default-box-shadow, none);
	color: var(--btn-default-color, #333);
}

.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button.e-form__buttons__wrapper__button-previous:hover,
.vgb-ra-steps .vgb-ra-steps__buttons .vgb-ra-steps__button.e-form__buttons__wrapper__button-previous:focus {
	background-color: var(--btn-default-bgcolor-hover, #efefef);
	box-shadow: var(--btn-default-box-shadow-hover, none);
	color: var(--btn-default-color-hover, #333);
}

/* Il pulsante di invio è quello di UR, che lo veste con regole legate a un
   ID e con !important: qui i valori che contano vanno imposti. */
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button {
	width: auto !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 5px 30px !important;
	border: 0 !important;
	border-radius: var(--btn-accented-brd-radius, 0) !important;
	background: var(--btn-accented-bgcolor, rgba(191, 63, 59, 0.84)) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--btn-accented-color, #fff) !important;
}

.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button:hover,
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button:focus {
	background: var(--btn-accented-bgcolor-hover, rgb(191, 63, 59)) !important;
}

/* L'icona di caricamento che UR mette nel pulsante resta a lato del testo. */
.vgb-ra-steps .ur-frontend-form .vgb-ra-steps__buttons .ur-submit-button > span:empty {
	display: none;
}

/* --- Accesso da shortcode ---------------------------------------------- */

.vgb-ra-login {
	max-width: 520px;
}

.vgb-ra-login__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 8px;
}

/* Il modulo di accesso è quello di WooCommerce, che ogni tema veste a modo
   suo: dentro il nostro blocco lo riportiamo alla palette Vagabond, così
   l'area si riconosce comunque. */
.vgb-ra-login__form .woocommerce-form-login {
	margin: 0;
	padding: 0;
	border: none;
}

.vgb-ra-login__form label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--vgb-ra-ink);
}

.vgb-ra-login__form input[type="text"],
.vgb-ra-login__form input[type="email"],
.vgb-ra-login__form input[type="password"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--vgb-ra-line);
	border-radius: var(--vgb-ra-radius);
	background: #fff;
	font-family: var(--vgb-ra-text-font);
	font-size: 14px;
	color: var(--vgb-ra-ink);
	box-shadow: none;
}

.vgb-ra-login__form input:focus {
	border-color: var(--vgb-ra-primary);
	outline: none;
}

.vgb-ra-login__form button[type="submit"],
.vgb-ra-login__form input[type="submit"] {
	padding: 12px 24px;
	border: 1px solid var(--vgb-ra-primary);
	border-radius: var(--vgb-ra-radius);
	background: var(--vgb-ra-primary);
	color: #fff;
	font-family: var(--vgb-ra-text-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.vgb-ra-login__form button[type="submit"]:hover,
.vgb-ra-login__form input[type="submit"]:hover {
	background: var(--vgb-ra-deep);
	border-color: var(--vgb-ra-deep);
}

.vgb-ra-login__form .woocommerce-form-login__rememberme {
	display: block;
	margin: 12px 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--vgb-ra-text);
}

.vgb-ra-login__form .lost_password {
	margin: 12px 0 0;
	font-size: 13px;
}

.vgb-ra-login__register {
	margin: 16px 0 0;
	font-size: 14px;
}

.vgb-ra-login__register a {
	color: var(--vgb-ra-primary);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.vgb-ra-dimensions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vgb-ra-doc {
		flex-wrap: wrap;
	}

	.vgb-ra-table thead {
		display: none;
	}

	.vgb-ra-table tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--vgb-ra-line);
	}

	.vgb-ra-table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 6px 0;
		border: none;
		text-align: right;
	}

	.vgb-ra-table td::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: left;
		color: var(--vgb-ra-ink);
	}
}

/* --- "Il mio account" attorno alla nostra area -------------------------- */

/*
 * L'area professionisti vive dentro "Il mio account" di WooCommerce, e lì il
 * menu e i collegamenti non sono nostri: li veste il tema. Quando però il
 * tema non ha un'opinione, WooCommerce ripiega sul proprio viola (#7f54b3),
 * che accanto alla palette Vagabond stona.
 *
 * Qui chiediamo prima il colore del tema — su Woodmart la variabile c'è e
 * vince, quindi non cambiamo nulla di quello che il tema ha deciso — e solo
 * in sua assenza mettiamo il rosso del marchio.
 */

.woocommerce-account .woocommerce-MyAccount-navigation a,
.woocommerce-account .woocommerce-MyAccount-content a:not(.vgb-ra-btn):not(.button):not(.vgb-ra-table__link):not(.vgb-ra-artisans__category):not(.vgb-ra-artisan__link):not(.vgb-ra-artisan__file) {
	color: var(--wd-link-color, #ae5048);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus,
.woocommerce-account .woocommerce-MyAccount-content a:not(.vgb-ra-btn):not(.button):not(.vgb-ra-table__link):not(.vgb-ra-artisans__category):not(.vgb-ra-artisan__link):not(.vgb-ra-artisan__file):hover,
.woocommerce-account .woocommerce-MyAccount-content a:not(.vgb-ra-btn):not(.button):not(.vgb-ra-table__link):not(.vgb-ra-artisans__category):not(.vgb-ra-artisan__link):not(.vgb-ra-artisan__file):focus {
	color: var(--wd-link-color-hover, #75675b);
}

/* La voce attiva del menu: il marchio la segna, se il tema non lo fa. */
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--wd-link-color, #191714);
	font-weight: 600;
}

/*
 * Gli avvisi di WooCommerce arrivano con i propri colori — informativo
 * #3d9cd2, positivo #0f834d, errore #e2401c — riquadri pieni con testo
 * bianco. Dentro l'area li riportiamo alla forma dei nostri: fondo grigio
 * chiaro del tema, filetto a sinistra nel colore che dice di che avviso si
 * tratta, testo nel colore dei titoli.
 */

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-noreviews {
	background-color: var(--bgcolor-gray-100, #f7f7f7);
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: 3px solid var(--wd-text-color, #767676);
	border-radius: 0;
	color: var(--wd-title-color, #242424);
}

.woocommerce-account .woocommerce-message {
	border-left-color: #5f6f4a;
}

.woocommerce-account .woocommerce-error {
	border-left-color: var(--btn-accented-bgcolor-hover, rgb(191, 63, 59));
}

/* Testo e collegamenti dentro l'avviso: WooCommerce li vuole bianchi, qui
   il fondo è chiaro. */
.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-error a,
.woocommerce-account .woocommerce-noreviews a {
	color: var(--wd-link-color, #333);
}

.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-noreviews::before {
	color: var(--wd-text-color, #767676);
}

.woocommerce-account .woocommerce-message::before {
	color: #5f6f4a;
}

.woocommerce-account .woocommerce-error::before {
	color: var(--btn-accented-bgcolor-hover, rgb(191, 63, 59));
}

/* I pulsanti di WooCommerce dentro l'area: il pulsante accentato del tema,
   come i nostri. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
	border: 0;
	border-radius: var(--btn-accented-brd-radius, 0);
	background-color: var(--btn-accented-bgcolor, rgba(191, 63, 59, 0.84));
	box-shadow: var(--btn-accented-box-shadow, inset 0 -2px 0 rgba(0, 0, 0, 0.15));
	color: var(--btn-accented-color, #fff);
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
	background-color: var(--btn-accented-bgcolor-hover, rgb(191, 63, 59));
	color: var(--btn-accented-color-hover, #fff);
}

/* Il tema zebra le tabelle con selettori più specifici del nostro: le
   nostre hanno già i loro filetti, e lo sfondo a righe le sporca. */
.vgb-ra table.vgb-ra-table th,
.vgb-ra table.vgb-ra-table td,
.vgb-ra table.vgb-ra-table tbody tr,
.vgb-ra table.vgb-ra-table tbody tr td,
.vgb-ra table.vgb-ra-table tbody tr:nth-child(2n) td,
.vgb-ra table.vgb-ra-details th,
.vgb-ra table.vgb-ra-details td,
.vgb-ra table.vgb-ra-details tbody tr,
.vgb-ra table.vgb-ra-details tbody tr td,
.vgb-ra table.vgb-ra-details tbody tr:nth-child(2n) td,
.vgb-ra .vgb-ra-docs__list li {
	background: transparent;
}

/* Testo dell'area account nei colori del tema. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce-MyAccount-content td,
.woocommerce-account .woocommerce-MyAccount-content th {
	color: var(--wd-text-color, #767676);
}

.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content strong {
	color: var(--wd-title-color, #242424);
}

/* I campi del modulo account: quelli del tema, come i nostri, così il
   passaggio fra "Dettagli account" e l'area professionisti non si sente.
   WooCommerce colora i campi con `.woocommerce form .form-row
   input.input-text`: la seconda serie di selettori ne pareggia la
   specificità invece di ricorrere a !important. */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content input[type="date"],
.woocommerce-account .woocommerce-MyAccount-content input[type="file"],
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content textarea.input-text,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Input {
	background-color: var(--wd-form-bg, transparent);
	border: var(--wd-form-brd-width, 2px) solid var(--wd-form-brd-color, rgba(129, 129, 129, 0.2));
	border-radius: var(--wd-form-brd-radius, 0);
	color: var(--wd-form-color, inherit);
	box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	border-color: var(--wd-form-brd-color-focus, rgba(129, 129, 129, 0.3));
	outline: none;
}

/* L'asterisco dei campi obbligatori e i riquadri dei gruppi. */
.woocommerce-account .woocommerce-MyAccount-content .required,
.woocommerce-account .woocommerce-MyAccount-content abbr.required {
	border: none;
	color: #e01020;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset,
.woocommerce-account .woocommerce-MyAccount-content legend {
	background-color: transparent;
	border-color: var(--brdcolor-gray-200, rgba(0, 0, 0, 0.075));
	color: var(--wd-title-color, #242424);
}

/* --- Artigiani & Lavorazioni -------------------------------------------- */

/*
 * Due schermate: la griglia delle categorie e l'elenco dei laboratori di una
 * categoria. Il disegno del cliente ha angoli arrotondati e filetti scuri,
 * diversi dai campi squadrati del tema: valgono solo qui, quindi stanno in
 * variabili locali. La ricerca invece è un campo del tema, come negli altri
 * moduli dell'area. Al passaggio del mouse categorie e schede si
 * ingrandiscono appena: si capisce che si cliccano.
 */
.vgb-ra-artisans {
	--vgb-ra-artisans-radius: 8px;
	--vgb-ra-artisans-border: rgba(36, 36, 36, 0.35);
	--vgb-ra-artisans-border-soft: rgba(36, 36, 36, 0.15);
}

.vgb-ra-artisans .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* Titolo e sottotitolo a sinistra, ricerca a destra. */
.vgb-ra-artisans__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 32px;
	margin: 0 0 24px;
}

.vgb-ra-artisans__intro {
	flex: 1 1 320px;
	min-width: 0;
}

.vgb-ra .vgb-ra-artisans__title {
	margin: 0 0 6px;
	font-family: var(--vgb-ra-title-font);
	font-size: 32px;
	font-weight: var(--vgb-ra-title-weight);
	line-height: 1.2;
	color: var(--vgb-ra-ink);
}

.vgb-ra .vgb-ra-artisans__lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--vgb-ra-text);
}

/* Ricerca: campo arrotondato con la lente dentro, a sinistra. */
.vgb-ra-artisans__search {
	position: relative;
	flex: 0 1 360px;
	min-width: 0;
	margin: 0;
}

.vgb-ra .vgb-ra-artisans__search-input {
	box-sizing: border-box;
	width: 100%;
	height: var(--vgb-ra-field-height);
	min-height: var(--vgb-ra-field-height);
	margin: 0;
	padding: 0 15px 0 42px;
	border: var(--vgb-ra-field-width) solid var(--vgb-ra-field-border);
	border-radius: var(--vgb-ra-radius);
	background-color: var(--wd-form-bg, transparent);
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	color: var(--wd-form-color, var(--vgb-ra-ink));
	transition: border-color 0.5s ease;
}

.vgb-ra .vgb-ra-artisans__search-input:focus {
	border-color: var(--vgb-ra-field-border-focus);
	outline: 0;
}

.vgb-ra .vgb-ra-artisans__search-submit {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: var(--vgb-ra-field-height);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--vgb-ra-ink);
	cursor: pointer;
}

/* Le categorie: bottoni grandi su tre colonne. */
.vgb-ra-artisans__categories {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vgb-ra-artisans__categories li {
	margin: 0;
	padding: 0;
}

.vgb-ra a.vgb-ra-artisans__category {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	height: 100%;
	padding: 10px 16px;
	border: 1px solid var(--vgb-ra-artisans-border);
	border-radius: var(--vgb-ra-artisans-radius);
	font-family: var(--vgb-ra-text-font);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: var(--vgb-ra-ink);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.vgb-ra a.vgb-ra-artisans__category:hover,
.vgb-ra a.vgb-ra-artisans__category:focus {
	transform: scale(1.04);
	color: var(--vgb-ra-ink);
}

/* Percorso sopra il titolo della categoria. */
.vgb-ra-artisans__breadcrumb {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--vgb-ra-text);
}

.vgb-ra-artisans__breadcrumb [aria-current] {
	font-weight: 600;
	color: var(--vgb-ra-ink);
}

.vgb-ra-artisans__breadcrumb-sep {
	margin: 0 6px;
}

.vgb-ra-artisans__results {
	margin: 0 0 16px;
	font-size: 14px;
}

/* I laboratori: una scheda per riga, con la freccia a destra. */
.vgb-ra-artisans__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vgb-ra-artisan {
	margin: 0;
	padding: 0;
	border: 1px solid var(--vgb-ra-artisans-border-soft);
	border-radius: var(--vgb-ra-artisans-radius);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.vgb-ra-artisan:hover,
.vgb-ra-artisan:focus-within {
	transform: scale(1.015);
}

.vgb-ra a.vgb-ra-artisan__link,
.vgb-ra .vgb-ra-artisan__link {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 32px;
	text-decoration: none;
	color: var(--vgb-ra-ink);
	cursor: pointer;
}

.vgb-ra a.vgb-ra-artisan__link:hover,
.vgb-ra a.vgb-ra-artisan__link:focus {
	color: var(--vgb-ra-ink);
}

/* Il triangolino di <details>: la freccia della scheda fa già da segnale. */
.vgb-ra-artisan__details > summary {
	list-style: none;
}

.vgb-ra-artisan__details > summary::-webkit-details-marker {
	display: none;
}

.vgb-ra-artisan__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.vgb-ra-artisan__name {
	font-family: var(--vgb-ra-title-font);
	font-size: 26px;
	font-weight: var(--vgb-ra-title-weight);
	line-height: 1.2;
	color: var(--vgb-ra-ink);
}

.vgb-ra-artisan__description {
	font-size: 15px;
	line-height: 1.6;
	color: var(--vgb-ra-ink);
}

.vgb-ra-artisan__hint {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--vgb-ra-text);
}

.vgb-ra-artisan__arrow {
	display: flex;
	flex: 0 0 auto;
	color: var(--vgb-ra-ink);
	transition: transform 0.2s ease;
}

.vgb-ra-artisan__link:hover .vgb-ra-artisan__arrow,
.vgb-ra-artisan__link:focus .vgb-ra-artisan__arrow {
	transform: translateX(4px);
}

/* Aperta, la scheda gira la freccia verso l'elenco dei PDF o l'avviso. */
.vgb-ra-artisan__details[open] .vgb-ra-artisan__arrow {
	transform: rotate(90deg);
}

/* Elenco dei PDF: una riga per file, il professionista sceglie quale. */
.vgb-ra .vgb-ra-artisan__files {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 32px 28px;
	padding: 0;
	list-style: none;
}

.vgb-ra .vgb-ra-artisan__files li {
	margin: 0;
	padding: 0;
}

.vgb-ra a.vgb-ra-artisan__file {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid var(--vgb-ra-artisans-border-soft);
	border-radius: var(--vgb-ra-artisans-radius);
	background: #fff;
	color: var(--vgb-ra-ink);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vgb-ra a.vgb-ra-artisan__file:hover,
.vgb-ra a.vgb-ra-artisan__file:focus {
	border-color: var(--vgb-ra-artisans-border);
	box-shadow: 0 2px 10px rgba(36, 36, 36, 0.06);
	color: var(--vgb-ra-ink);
}

.vgb-ra a.vgb-ra-artisan__file:focus-visible {
	outline: 2px solid var(--vgb-ra-primary);
	outline-offset: 2px;
}

.vgb-ra-artisan__file-icon,
.vgb-ra-artisan__file-download {
	display: flex;
	flex: 0 0 auto;
	color: var(--vgb-ra-text);
}

.vgb-ra-artisan__file-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.vgb-ra-artisan__file-meta {
	flex: 0 0 auto;
	font-size: 12px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--vgb-ra-text);
	white-space: nowrap;
}

.vgb-ra-artisan__file-download {
	transition: transform 0.2s ease, color 0.2s ease;
}

.vgb-ra a.vgb-ra-artisan__file:hover .vgb-ra-artisan__file-download,
.vgb-ra a.vgb-ra-artisan__file:focus .vgb-ra-artisan__file-download {
	color: var(--vgb-ra-primary);
	transform: translateY(2px);
}

/* Nessun PDF (o nessuno nella lingua di chi legge): avviso sobrio, con la
   stessa geometria dell'elenco, senza l'aria di un errore. */
.vgb-ra .vgb-ra-artisan__empty {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 32px 28px;
	padding: 16px 18px;
	border: 1px dashed var(--vgb-ra-artisans-border);
	border-radius: var(--vgb-ra-artisans-radius);
	background: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	line-height: 1.6;
	color: var(--vgb-ra-text);
}

.vgb-ra-artisan__empty-icon {
	display: flex;
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--vgb-ra-text);
}

.vgb-ra-artisan__empty-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vgb-ra .vgb-ra-artisan__empty-title {
	font-weight: 600;
	color: var(--vgb-ra-ink);
}

@media (prefers-reduced-motion: reduce) {
	.vgb-ra a.vgb-ra-artisans__category,
	.vgb-ra-artisan,
	.vgb-ra a.vgb-ra-artisan__file,
	.vgb-ra-artisan__file-download {
		transition: none;
	}

	.vgb-ra a.vgb-ra-artisans__category:hover,
	.vgb-ra a.vgb-ra-artisans__category:focus,
	.vgb-ra-artisan:hover,
	.vgb-ra-artisan:focus-within {
		transform: none;
	}
}

@media (max-width: 1024px) {
	.vgb-ra-artisans__categories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.vgb-ra-artisans__search {
		flex-basis: 100%;
	}

	.vgb-ra-artisans__categories {
		grid-template-columns: minmax(0, 1fr);
	}

	.vgb-ra .vgb-ra-artisans__title {
		font-size: 26px;
	}

	.vgb-ra a.vgb-ra-artisan__link,
	.vgb-ra .vgb-ra-artisan__link {
		gap: 16px;
		padding: 20px;
	}

	.vgb-ra-artisan__name {
		font-size: 22px;
	}

	.vgb-ra .vgb-ra-artisan__files,
	.vgb-ra .vgb-ra-artisan__empty {
		margin: 0 20px 20px;
	}

	.vgb-ra a.vgb-ra-artisan__file {
		flex-wrap: wrap;
		gap: 4px 12px;
		padding: 12px 14px;
	}

	.vgb-ra-artisan__file-label {
		flex-basis: calc(100% - 80px);
	}

	.vgb-ra-artisan__file-meta {
		order: 3;
		margin-left: 34px;
	}
}

/* Ritorno alle categorie, in cima: il percorso da solo non basta. */
.vgb-ra-artisans__back {
	margin: 0 0 32px 0;
}

.vgb-ra .vgb-ra-artisans__back .vgb-ra-btn {
	gap: 8px;
}

/* --- Progetti ---------------------------------------------------------- */

/* Le pagine dei progetti si reggono su spazi e fondi tenui, non su filetti:
   niente linee tra le righe, i blocchi si staccano con lo sfondo grigio del
   tema. */

/* Etichetta di stato: il nome su un fondo tenue dello stesso colore.
   Larghe uguali, così in colonna si allineano: la misura sta larga sulla
   più lunga ("Preventivo inviato", "Devis envoyé"). */
.vgb-ra-status,
.vgb-ra-project .vgb-ra-badge,
.vgb-ra-table .vgb-ra-badge {
	min-width: 140px;
	text-align: center;
}

.vgb-ra-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--vgb-ra-surface-alt);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--vgb-ra-ink);
}

.vgb-ra-status--open {
	background: rgba(46, 108, 140, 0.1);
	color: #2e6c8c;
}

.vgb-ra-status--completed {
	background: rgba(74, 122, 58, 0.12);
	color: #3f6a31;
}

/* Gli stati dei preventivi parlano la stessa lingua delle etichette di
   progetto, in tutta l'area: progetti, preventivi, cruscotto. */
.vgb-ra .vgb-ra-badge {
	padding: 4px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--vgb-ra-surface-alt);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	color: var(--vgb-ra-ink);
}

.vgb-ra .vgb-ra-badge--ok {
	background: rgba(74, 122, 58, 0.12);
	color: #3f6a31;
}

.vgb-ra .vgb-ra-badge--ko {
	background: rgba(191, 63, 59, 0.1);
	color: var(--vgb-ra-primary);
}

.vgb-ra .vgb-ra-badge--warn {
	background: rgba(176, 116, 22, 0.12);
	color: #9a650f;
}

.vgb-ra .vgb-ra-badge--info {
	background: rgba(46, 108, 140, 0.1);
	color: #2e6c8c;
}

/* Un colore per stato, così la fase si legge a colpo d'occhio:
   Ricevuta viola, In lavorazione ambra, Preventivo inviato blu,
   Accettata verde, Chiusa grigia e spenta (è finita). I fondi sono
   trasparenti: si vedono anche sulle righe grigie degli elenchi su mobile. */
.vgb-ra .vgb-ra-badge--pending {
	background: rgba(112, 72, 140, 0.1);
	color: #6a4683;
}

.vgb-ra .vgb-ra-badge--muted {
	background: rgba(0, 0, 0, 0.06);
	color: var(--vgb-ra-text);
}

.vgb-ra-project__tags {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Tabelle senza filetti: intestazione su una fascia grigia, righe ariose.
   Vale per tutti gli elenchi dell'area (progetti, preventivi, cruscotto,
   richieste al laboratorio). */
.vgb-ra table.vgb-ra-table th {
	padding: 10px 14px;
	border: 0;
	background: var(--vgb-ra-surface);
}

.vgb-ra table.vgb-ra-table td {
	padding: 16px 14px;
	border: 0;
	vertical-align: middle;
}

/* Blocchi della pagina (nuovo progetto, modifica): un riquadro grigio al
   posto della linea sopra il modulo. */
.vgb-ra .vgb-ra-project-card {
	margin-top: 40px;
	padding: 28px;
	border: 0;
	background: var(--vgb-ra-surface);
}

/* "Nuovo progetto", sotto l'elenco: senza riquadro, staccato solo dallo
   spazio. */
.vgb-ra.vgb-ra-projects .vgb-ra-project-card {
	margin-top: 48px;
	padding: 0;
	background: transparent;
}

.vgb-ra-project-card .vgb-ra-form__grid {
	margin-top: 0;
}

.vgb-ra-project-card .vgb-ra-field--wide {
	margin-top: 0;
}

/* Scheda: nome e stato, poi le note. */
.vgb-ra-project__back,
.vgb-ra-back {
	margin: 0 0 20px;
}

.vgb-ra-project__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 12px;
}

.vgb-ra .vgb-ra-project__name {
	margin: 0;
	font-size: 28px;
	line-height: 1.25;
}

.vgb-ra .vgb-ra-project__info {
	margin: 0 0 12px;
}

.vgb-ra .vgb-ra-project__notes {
	margin: 0 0 40px;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--vgb-ra-beige);
	font-size: 14px;
	line-height: 1.7;
}

.vgb-ra-project .vgb-ra__section {
	margin-top: 40px;
}

/* Prodotti: ogni riga è un riquadro grigio, staccato dal successivo. */
.vgb-ra-project-items {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vgb-ra-project-item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 18px 14px 14px;
	background: var(--vgb-ra-surface);
}

.vgb-ra-project-item__image {
	flex: 0 0 64px;
	width: 64px;
}

.vgb-ra-project-item__image img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.vgb-ra-project-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

.vgb-ra .vgb-ra-project-item__name {
	display: block;
	font-family: var(--vgb-ra-title-font);
	font-size: 16px;
	font-weight: var(--vgb-ra-title-weight);
	color: var(--vgb-ra-ink);
	text-decoration: none;
}

.vgb-ra-project-item__meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--vgb-ra-text);
}

.vgb-ra-project-item--missing .vgb-ra-project-item__name {
	color: var(--vgb-ra-text);
}

.vgb-ra-project-item__action {
	flex: 0 0 auto;
	margin: 0;
}

/* Quantità a destra di ogni prodotto, etichetta e campo sulla stessa riga;
   il campo appartiene al modulo sotto l'elenco (attributo `form`). */
.vgb-ra-project-item__qty {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.vgb-ra .vgb-ra-project-item__qty input {
	width: 72px;
	height: 38px;
	margin: 0;
	padding: 0 8px;
	border: var(--vgb-ra-field-width) solid var(--vgb-ra-field-border);
	border-radius: var(--vgb-ra-radius);
	background: #fff;
	text-align: center;
}

.vgb-ra .vgb-ra-project-item__action .vgb-ra-btn--ghost {
	background: #fff;
}

.vgb-ra .vgb-ra-project-item__action .vgb-ra-btn--ghost:hover,
.vgb-ra .vgb-ra-project-item__action .vgb-ra-btn--ghost:focus {
	background: var(--vgb-ra-surface-alt);
}

.vgb-ra-project-qty {
	margin: 14px 0 0;
	text-align: right;
}

/* "Vai al carrello del progetto": testo a sinistra, pulsante a destra. */
.vgb-ra-project-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin: 40px 0 0;
	padding: 24px 28px;
	background: var(--vgb-ra-beige);
}

.vgb-ra .vgb-ra-project-order__text {
	flex: 1 1 320px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--vgb-ra-ink);
}

.vgb-ra-project-order .vgb-ra-btn {
	flex: 0 0 auto;
}

/* Eliminare è l'ultima cosa della pagina, in un riquadro rosso: si capisce
   prima del clic che non si torna indietro. */
.vgb-ra-project-delete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin: 48px 0 0;
	padding: 24px 28px;
	border: 1px solid rgba(220, 38, 38, 0.35);
	background: rgba(220, 38, 38, 0.04);
}

.vgb-ra-project-delete__text {
	flex: 1 1 320px;
}

.vgb-ra .vgb-ra-project-delete .vgb-ra__title {
	margin: 0 0 4px;
	font-size: 18px;
	color: #dc2626;
}

.vgb-ra .vgb-ra-project-delete p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

/* Pulsante distruttivo: rosso acceso, pieno. */
.vgb-ra .vgb-ra-btn--danger,
.vgb-ra-btn--danger {
	background-color: #dc2626;
	box-shadow: none;
	color: #fff;
}

.vgb-ra .vgb-ra-btn--danger:hover,
.vgb-ra .vgb-ra-btn--danger:focus,
.vgb-ra-btn--danger:hover,
.vgb-ra-btn--danger:focus {
	background-color: #b91c1c;
	box-shadow: none;
	color: #fff;
}

@media (max-width: 768px) {
	/* `tbody tr`: il tema (e il nostro azzeramento delle zebre) colora le
	   righe con un selettore più specifico. */
	.vgb-ra table.vgb-ra-table tbody tr {
		margin: 0 0 10px;
		padding: 10px 14px;
		border: 0;
		background: var(--vgb-ra-surface);
	}

	.vgb-ra table.vgb-ra-table td {
		padding: 6px 0;
	}
}

@media (max-width: 600px) {
	.vgb-ra-project-item {
		flex-wrap: wrap;
	}

	.vgb-ra-project-item__body {
		flex-basis: calc(100% - 82px);
	}

	.vgb-ra-project-item__qty {
		margin-left: 82px;
	}

	.vgb-ra-project-order .vgb-ra-btn,
	.vgb-ra-project-delete .vgb-ra-btn {
		width: 100%;
	}
}

/* Ordinati di un prodotto del progetto, con i link agli ordini. */
.vgb-ra-project-item__ordered {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #3f6a31;
}

/* Chiudi / riapri: come la zona di eliminazione, ma neutra. */
.vgb-ra-project-close {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin: 40px 0 0;
	padding: 24px 28px;
	background: var(--vgb-ra-surface);
}

.vgb-ra-project-close__text {
	flex: 1 1 320px;
}

.vgb-ra .vgb-ra-project-close .vgb-ra__title {
	margin: 0 0 4px;
	font-size: 18px;
}

.vgb-ra .vgb-ra-project-close p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.vgb-ra .vgb-ra-project-close .vgb-ra-btn--ghost {
	background: #fff;
}

/* Scheda prodotto: "Per" (personale o un progetto) sopra "Aggiungi al
   carrello". */
.vgb-ra-cart-for {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	width: 100%;
	margin: 0 0 14px;
}

.vgb-ra .vgb-ra-cart-for label {
	margin: 0;
	font-weight: 600;
	color: var(--vgb-ra-ink);
}

.vgb-ra .vgb-ra-cart-for select {
	flex: 1 1 220px;
	width: auto;
	max-width: 360px;
	height: var(--vgb-ra-field-height);
	margin: 0;
}

/* Righe del carrello: etichetta del progetto (o "Personale") sotto il
   nome. Display e misura sono in linea (il mini-carrello è in ogni pagina);
   qui la forma. */
/* Il tema azzera il padding degli span nelle tabelle del carrello: per
   questo il selettore è più specifico. */
body span.vgb-ra-line-tag {
	padding: 3px 10px;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	white-space: normal;
}

body span.vgb-ra-line-tag--project {
	background: rgba(46, 108, 140, 0.1);
	color: #2e6c8c;
}

body span.vgb-ra-line-tag--personal {
	background: var(--bgcolor-gray-200, #f1f1f1);
	color: var(--wd-title-color, #242424);
}

/* Pagina carrello: "Dai tuoi progetti", sotto il carrello. Un blocco
   richiudibile per progetto, righe compatte su una linea sola. */
.vgb-ra-cart-picker {
	clear: both;
	margin: 56px 0 0;
}

.vgb-ra-cart-picker__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 24px;
	margin: 0 0 18px;
}

.vgb-ra .vgb-ra-cart-picker__title {
	margin: 0 0 4px;
	font-family: var(--vgb-ra-title-font);
	font-size: 22px;
	font-weight: var(--vgb-ra-title-weight);
	color: var(--vgb-ra-ink);
}

.vgb-ra .vgb-ra-cart-picker__lead {
	max-width: 640px;
	margin: 0;
	font-size: 14px;
}

.vgb-ra .vgb-ra-cart-picker__more {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.vgb-ra-cart-picker__project {
	margin: 0 0 12px;
	border: 1px solid var(--vgb-ra-line-soft);
	background: #fff;
}

.vgb-ra-cart-picker__details[open] {
	background: var(--vgb-ra-surface);
}

.vgb-ra-cart-picker__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	list-style: none;
	cursor: pointer;
}

.vgb-ra-cart-picker__summary::-webkit-details-marker {
	display: none;
}

.vgb-ra-cart-picker__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	min-width: 0;
}

.vgb-ra .vgb-ra-cart-picker__name {
	font-family: var(--vgb-ra-title-font);
	font-size: 17px;
	font-weight: var(--vgb-ra-title-weight);
	color: var(--vgb-ra-ink);
}

.vgb-ra-cart-picker__count {
	font-size: 13px;
	color: var(--vgb-ra-text);
}

/* Freccia: giù da chiuso, su da aperto. */
.vgb-ra-cart-picker__toggle {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 2px solid var(--vgb-ra-ink);
	border-bottom: 2px solid var(--vgb-ra-ink);
	transform: rotate(45deg) translateY(-3px);
	transition: transform 0.2s ease;
}

.vgb-ra-cart-picker__details[open] .vgb-ra-cart-picker__toggle {
	transform: rotate(-135deg) translateY(-3px);
}

.vgb-ra-cart-picker__body {
	padding: 0 20px 18px;
}

.vgb-ra-cart-picker__lines {
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
}

.vgb-ra-cart-picker__line {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
}

.vgb-ra-cart-picker__line + .vgb-ra-cart-picker__line {
	box-shadow: inset 0 1px 0 var(--vgb-ra-line-soft);
}

.vgb-ra-cart-picker__image img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
}

.vgb-ra-cart-picker__image--quote {
	width: 48px;
	height: 48px;
	background: var(--vgb-ra-beige);
}

.vgb-ra-cart-picker__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vgb-ra .vgb-ra-cart-picker__product {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vgb-ra-ink);
	text-decoration: none;
}

.vgb-ra-cart-picker__variant,
.vgb-ra-cart-picker__stats {
	font-size: 12px;
	line-height: 1.5;
	color: var(--vgb-ra-text);
}

.vgb-ra-cart-picker__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.vgb-ra .vgb-ra-cart-picker__actions input {
	width: 60px;
	height: 34px;
	margin: 0;
	padding: 0 6px;
	border: var(--vgb-ra-field-width) solid var(--vgb-ra-field-border);
	text-align: center;
}

.vgb-ra-cart-picker__done {
	font-size: 12px;
	font-weight: 600;
	color: #3f6a31;
}

.vgb-ra-cart-picker__skipped {
	margin: 12px 0 0;
	font-size: 13px;
}

.vgb-ra-cart-picker__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 14px 0 0;
}

.vgb-ra .vgb-ra-cart-picker__open {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 600px) {
	.vgb-ra-cart-picker__summary {
		padding: 14px 16px;
	}

	.vgb-ra-cart-picker__body {
		padding: 0 12px 14px;
	}

	.vgb-ra-cart-picker__line {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 10px 12px;
		padding: 12px;
	}

	.vgb-ra-cart-picker__image img,
	.vgb-ra-cart-picker__image--quote {
		width: 44px;
		height: 44px;
	}

	.vgb-ra-cart-picker__actions {
		grid-column: 2;
		justify-content: flex-start;
	}

	.vgb-ra-cart-picker__footer .vgb-ra-btn {
		width: 100%;
	}
}

/* Collegamento del preventivo a un progetto, nella sua scheda: menu e
   "Salva" sulla stessa riga, alti uguali. Il tema dà ai select il 100% di
   larghezza: qui il menu prende lo spazio che resta accanto al pulsante. */
.vgb-ra-quote-project {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
	max-width: 480px;
}

.vgb-ra .vgb-ra-quote-project select {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: var(--vgb-ra-field-height);
	margin: 0;
}

.vgb-ra .vgb-ra-quote-project .vgb-ra-btn {
	flex: 0 0 auto;
	min-height: var(--vgb-ra-field-height);
	margin: 0;
}

/* Pulsante nella scheda prodotto, accanto ad "Aggiungi al carrello". */
.vgb-ra-project-add {
	display: inline-flex;
	vertical-align: middle;
	margin-inline-start: 10px;
}

/* `[vagabond_project_form]` sta nel popup Woodmart aperto da "Aggiungi a
   un progetto", come il modulo di preventivo. In alto il titolo con il
   prodotto e, a destra, "Vai ai miei progetti"; sotto il menu dei progetti,
   il campo per uno nuovo e i pulsanti. Il popup (larghezza, X, sfondo) è
   quello del tema. */
.vgb-ra-picker {
	margin: 0;
	padding: 0;
	border: 0;
}

.vgb-ra-picker__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 24px;
}

.vgb-ra-picker__heading {
	flex: 1 1 200px;
	min-width: 0;
}

.vgb-ra .vgb-ra-picker .vgb-ra__title {
	margin: 0;
	text-align: left;
}

.vgb-ra .vgb-ra-picker__product {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--vgb-ra-text);
}

.vgb-ra .vgb-ra-picker__all {
	flex: 0 0 auto;
	white-space: nowrap;
}

.vgb-ra-picker__list {
	margin: 0 0 20px;
}

.vgb-ra .vgb-ra-picker__list select {
	width: 100%;
	height: var(--vgb-ra-field-height);
	margin: 0;
}

.vgb-ra .vgb-ra-picker__list select:disabled {
	opacity: 0.5;
}

.vgb-ra-picker__empty {
	margin: 0;
	font-size: 14px;
}

.vgb-ra-picker .vgb-ra-field {
	margin: 0 0 20px;
}

.vgb-ra-picker__message {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 3px solid var(--vgb-ra-primary);
	background: var(--vgb-ra-surface);
	font-size: 14px;
	color: var(--vgb-ra-ink);
}

.vgb-ra-picker__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* --- Preventivi e cruscotto ------------------------------------------- */

/* Stessa lingua delle pagine dei progetti: fondi grigi al posto dei
   filetti, campi e pulsanti bianchi sopra il grigio. La struttura delle
   pagine resta la loro. */

/* Scheda del preventivo: codice e stato sulla stessa riga. */
.vgb-ra-quote__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 12px;
}

.vgb-ra .vgb-ra-quote__name {
	margin: 0;
	font-size: 28px;
	line-height: 1.25;
}

.vgb-ra-quote .vgb-ra-progress {
	margin-bottom: 40px;
}

.vgb-ra-quote > h3.vgb-ra__title {
	margin-top: 40px;
}

.vgb-ra-quote .vgb-ra-progress + h3.vgb-ra__title {
	margin-top: 0;
}

/* Dettagli della lavorazione: un riquadro grigio, righe senza filetti. */
.vgb-ra table.vgb-ra-details {
	border-collapse: separate;
	border-spacing: 0;
	padding: 12px 28px;
	background: var(--vgb-ra-surface);
}

.vgb-ra table.vgb-ra-details th,
.vgb-ra table.vgb-ra-details td {
	padding: 12px 16px 12px 0;
	border: 0;
	vertical-align: middle;
}

.vgb-ra table.vgb-ra-details th {
	font-size: 11px;
	color: var(--vgb-ra-text);
}

.vgb-ra .vgb-ra-details .vgb-ra-quote-project select {
	background-color: #fff;
}

.vgb-ra .vgb-ra-details .vgb-ra-btn--ghost {
	background: #fff;
}

.vgb-ra .vgb-ra-details .vgb-ra-btn--ghost:hover,
.vgb-ra .vgb-ra-details .vgb-ra-btn--ghost:focus {
	background: var(--vgb-ra-surface-alt);
}

/* Allegati: un riquadro grigio per file, come i prodotti di un progetto. */
.vgb-ra-quote .vgb-ra-docs__list {
	display: grid;
	gap: 10px;
	border: 0;
}

.vgb-ra-quote .vgb-ra-doc {
	padding: 14px 18px;
	border: 0;
	background: var(--vgb-ra-surface);
}

.vgb-ra-quote .vgb-ra-doc__ext {
	border: 0;
	background: #fff;
}

.vgb-ra-quote .vgb-ra-docs__list li {
	background: var(--vgb-ra-surface);
}

/* Risposta: senza riquadro, staccata dalla cronologia solo dallo spazio. */
.vgb-ra-quote .vgb-ra-reply {
	margin-top: 40px;
}

/* Cruscotto: "Vedi tutte le richieste" staccato dall'elenco. */
.vgb-ra-area .vgb-ra-table + p {
	margin: 20px 0 0;
}

@media (max-width: 600px) {
	.vgb-ra table.vgb-ra-details {
		padding: 8px 16px;
	}

	.vgb-ra table.vgb-ra-details th {
		width: 40%;
	}
}