/*
 * GOYN — Area clienti
 *
 * Fonte: `AccountPage` (src/AccountPage.jsx) e `AccountDashboard`
 * (src/components/AccountDashboard.jsx), con le classi `.ac-*`, `.ct-field` e
 * `.co-check` di src/styles.css.
 *
 * ═════════════════════════════════════════════════════════════════════════
 * QUESTO FOGLIO VESTE ANCHE MARKUP CHE NON È NOSTRO
 * ═════════════════════════════════════════════════════════════════════════
 *
 * È il secondo punto del progetto in cui si toccano le classi di un altro — il
 * primo è l'ordine dei campi nel modulo newsletter di Elementor Pro — e qui non è
 * un'eccezione ma il piano: accesso, registrazione, indirizzi, dati dell'account
 * e la scheda di un ordine sono i MODULI di WooCommerce, e devono restare suoi
 * perché portano nonce, validazione e i punti di innesto degli altri plugin. Il
 * perché completo è in testa a class-account.php.
 *
 * Le classi di WooCommerce vestite qui sono quelle pubbliche e stabili da anni:
 *
 *   #customer_login, .u-column1, .u-column2       le due colonne accesso/registrazione
 *   .woocommerce-form, .woocommerce-form-row      i moduli e le loro righe
 *   .woocommerce-Input, .input-text               i campi
 *   .woocommerce-button, .button                  i bottoni
 *   .woocommerce-form__label-for-checkbox         le spunte
 *   .woocommerce-LostPassword                     "password dimenticata?"
 *   .woocommerce-privacy-policy-text              l'informativa
 *   .woocommerce-Address, .woocommerce-Addresses  gli indirizzi salvati
 *   .woocommerce-notices-wrapper, .woocommerce-*  gli avvisi
 *   .woocommerce-table, .shop_table               le tabelle della scheda ordine
 *
 * ⚠️ SE UN AGGIORNAMENTO LE RINOMINASSE, i moduli tornano impaginati come li
 *    impagina WooCommerce: **brutti, non rotti**. È la stessa garanzia dichiarata
 *    per l'ordine dei campi della newsletter, e vale la pena ripeterla — nessuna
 *    di queste regole è necessaria al funzionamento.
 *
 * ISOLAMENTO: le nostre classi hanno prefisso `goyn-ac`. Le regole su classi di
 * WooCommerce sono TUTTE discendenti da `.goyn-ac`, così non escono dal widget.
 *
 * DAL TEMA: `.goyn-wrap`, `.goyn-line`, `.goyn-display`, `.goyn-label`,
 * `.goyn-eyebrow`, `.goyn-accent`, `.goyn-btn` + `--outline`, `.goyn-link-sweep`
 * + `.goyn-arrow`, `.goyn-sr-only`.
 *
 * DA reveal.css: `data-goyn-rise`, `data-goyn-rise-line`.
 *
 * INDICE
 *   1. La fascia
 *   2. Chi non è entrato: racconto e vantaggi
 *   3. La scheda con le due schede (accedi / registrati)
 *   4. I moduli di WooCommerce
 *   5. Chi è entrato: testa e statistiche
 *   6. Menu laterale e pannello
 *   7. Le schede ordine
 *   8. Il resto dei pannelli di WooCommerce
 *   9. Avvisi
 *  10. Entrate
 *  11. Responsive
 *  12. prefers-reduced-motion
 */

/* ============================================================
   1. La fascia
   ============================================================ */

.goyn-ac {
	--goyn-ac-bg: var(--goyn-cream, #e9e5d9);
	--goyn-ac-card: var(--goyn-cream-2, #efebe0);
	--goyn-ac-title: var(--goyn-petrol-deep, #163e46);
	--goyn-ac-accent: var(--goyn-rust, #c0603c);
	--goyn-ac-muted: var(--goyn-muted, #5e6e6e);
	--goyn-ac-line: var(--goyn-petrol, #1f535d);
	--goyn-ac-rule: rgba(31, 83, 93, 0.16);
	--goyn-ac-rule-soft: rgba(31, 83, 93, 0.18);

	--goyn-ac-col-copy: 1fr;
	--goyn-ac-col-card: 0.9fr;
	--goyn-ac-side: 200px;
	--goyn-ac-stat-count: 3;

	padding: clamp(112px, 12vh, 150px) var(--goyn-pad) clamp(60px, 6vw, 100px);
	background-color: var(--goyn-ac-bg);
	color: var(--goyn-ac-title);
}

/* ============================================================
   2. Chi non è entrato: racconto e vantaggi
   ============================================================ */

.goyn-ac__grid {
	display: grid;
	grid-template-columns:
		minmax(0, var(--goyn-ac-col-copy))
		minmax(0, var(--goyn-ac-col-card));
	gap: clamp(28px, 3.6vw, 64px);
	align-items: center;
}

/* ⚠️ `margin: 0`: un `<p>` si porta dietro 14,4px di margine e nell'originale il
   sovratitolo è uno `<span>`. Vale per tutti i sovratitoli del progetto. */
.goyn-ac__eyebrow {
	display: block;
	margin: 0;
	line-height: normal;
	color: var(--goyn-ac-accent);
}

.goyn-ac__title {
	margin: 14px 0 0;
	font-size: clamp(32px, 4.2vw, 64px);
	line-height: 0.92;
	color: var(--goyn-ac-title);
}

.goyn-ac__text {
	max-width: 400px;
	margin: 22px 0 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--goyn-ac-muted);
}

/* ⚠️ `list-style: none` più `margin`/`padding` a zero: il default del browser dà
   40px di `padding-inline-start` a ogni lista, e con `box-sizing: border-box`
   quei 40px si mangiano la larghezza. Errore già pagato sui valori di Chi siamo. */
.goyn-ac__perks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: clamp(26px, 3vw, 40px) 0 0;
	padding: 0;
	list-style: none;
}

.goyn-ac__perk {
	position: relative;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--goyn-ac-muted);
}

/*
 * La spunta è un `::before` con un carattere e non un'icona SVG: è la scelta
 * dell'originale, e un carattere non ha bisogno di essere caricato. `aria-hidden`
 * non serve — il contenuto generato dal CSS non entra nell'albero di
 * accessibilità in nessun browser che ci interessi.
 */
.goyn-ac__perk::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--goyn-ac-accent);
}

/* ============================================================
   3. La scheda con le due schede (accedi / registrati)
   ------------------------------------------------------------
   ⚠️⚠️ NIENTE JAVASCRIPT, E NON PER SPORT. Questa pagina è l'unica via
        d'accesso all'account: se le schede dipendessero da uno script, un errore
        a monte chiuderebbe fuori il cliente. Due `<input type="radio">` fuori
        schermo, due `<label>` che li accendono e il selettore fratello generale
        (`~`) fanno la stessa cosa senza una riga di codice — stessa tecnica della
        galleria nella scheda prodotto.

        E se il CSS non arrivasse, i due moduli si vedono ENTRAMBI, uno sotto
        l'altro: nessuno resta chiuso fuori.
   ============================================================ */

.goyn-ac__card {
	padding: clamp(24px, 2.6vw, 40px);
	background-color: var(--goyn-ac-card);
	border: 1.5px solid var(--goyn-ac-line);
}

/*
 * I radio non si nascondono con `display: none`: così resterebbero fuori dal giro
 * di tabulazione e le schede non si potrebbero cambiare da tastiera. Fuori schermo
 * ma focalizzabili, come `.goyn-sr-only`.
 */
.goyn-ac__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
}

.goyn-ac__tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--goyn-ac-rule-soft);
}

.goyn-ac__tab {
	padding: 10px 14px;
	border-bottom: 2px solid transparent;
	font-weight: 600;
	font-size: 11.5px;
	line-height: normal;
	letter-spacing: 2px;
	color: var(--goyn-ac-muted);
	cursor: pointer;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease),
		border-color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-ac__tab:hover {
	color: var(--goyn-ac-title);
}

/*
 * La scheda accesa e il modulo che le corrisponde. `:has()` non serve: i radio
 * precedono entrambi i bersagli, quindi basta il fratello generale.
 *
 * ⚠️ L'ordine conta: prima si accendono le due schede, poi si spengono le colonne.
 *    Scritto al contrario, la seconda regola vincerebbe sempre.
 */
.goyn-ac__radio--login:checked ~ .goyn-ac__tabs .goyn-ac__tab:first-of-type,
.goyn-ac__radio--register:checked ~ .goyn-ac__tabs .goyn-ac__tab:last-of-type {
	color: var(--goyn-ac-title);
	border-bottom-color: var(--goyn-ac-accent);
}

/* Il contorno di fuoco va sulla LINGUETTA, non sul radio invisibile: chi arriva
   da tastiera deve vedere dove si trova. */
.goyn-ac__radio:focus-visible ~ .goyn-ac__tabs .goyn-ac__tab {
	outline: 2px solid var(--goyn-ac-accent);
	outline-offset: 3px;
}

.goyn-ac__radio--login:focus-visible ~ .goyn-ac__tabs .goyn-ac__tab:last-of-type,
.goyn-ac__radio--register:focus-visible ~ .goyn-ac__tabs .goyn-ac__tab:first-of-type {
	outline: none;
}

/*
 * Le due colonne di WooCommerce diventate schede. La griglia `col2-set` si annulla
 * perché qui le colonne stanno una sopra l'altra e se ne vede una sola.
 */
.goyn-ac .goyn-ac__forms #customer_login {
	display: block;
	margin: 0;
}

.goyn-ac .goyn-ac__forms .u-column1,
.goyn-ac .goyn-ac__forms .u-column2 {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.goyn-ac__radio--login:checked ~ .goyn-ac__forms .u-column2,
.goyn-ac__radio--register:checked ~ .goyn-ac__forms .u-column1 {
	display: none;
}

/*
 * I titoli `<h2>Accedi</h2>` e `<h2>Registrati</h2>` che WooCommerce mette dentro
 * le colonne: li dicono già le linguette, e ripeterli sarebbe la stessa parola due
 * volte a due centimetri di distanza.
 *
 * ⚠️ `.goyn-sr-only` a mano invece di `display: none`: sono i titoli che danno la
 *    struttura al modulo per chi naviga a salti fra le intestazioni. Nasconderli
 *    del tutto toglierebbe quel riferimento.
 */
.goyn-ac .goyn-ac__forms #customer_login h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Senza le linguette — registrazione spenta — il titolo torna visibile: là è
   l'unica cosa che dice cosa sia quel modulo. */
.goyn-ac__card:not(:has(.goyn-ac__tabs)) .goyn-ac__forms #customer_login h2 {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 18px;
	padding: 0;
	overflow: visible;
	clip-path: none;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--goyn-ac-title);
}

/* ============================================================
   4. I moduli di WooCommerce
   ------------------------------------------------------------
   `.ct-field` e `.co-check` dell'originale, applicati al markup di WooCommerce.
   ============================================================ */

.goyn-ac .woocommerce-form-row,
.goyn-ac .woocommerce-form .form-row {
	display: block;
	margin: 0 0 12px;
	padding: 0;
}

/*
 * Le etichette. Nell'app i campi hanno solo il segnaposto e nessuna etichetta;
 * qui restano, e non è pigrizia: un segnaposto sparisce appena si scrive, e su un
 * modulo di accesso «cosa stavo compilando?» è una domanda che porta a sbagliare.
 * Sono più piccole del testo e in maiuscoletto, così la scheda resta pulita.
 */
.goyn-ac .woocommerce-form label,
.goyn-ac .goyn-ac__panel form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--goyn-font-label);
	font-weight: 500;
	font-size: 10.5px;
	line-height: normal;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--goyn-ac-muted);
}

.goyn-ac .woocommerce-form .required,
.goyn-ac .goyn-ac__panel .required {
	color: var(--goyn-ac-accent);
	text-decoration: none;
}

/*
 * ⚠️ Discendente e con tutto dichiarato: `input`, `select` e `textarea` sono
 *    selettori di elemento, e i reset del tema e di Elementor li colpiscono a
 *    (0,1,1). Una classe sola perderebbe — è l'inciampo ricorrente del progetto,
 *    già pagato su `select` nel catalogo e sul campo della ricerca.
 */
.goyn-ac .woocommerce-Input,
.goyn-ac .input-text,
.goyn-ac .goyn-ac__panel input[type='text'],
.goyn-ac .goyn-ac__panel input[type='email'],
.goyn-ac .goyn-ac__panel input[type='tel'],
.goyn-ac .goyn-ac__panel input[type='password'],
.goyn-ac .goyn-ac__panel select,
.goyn-ac .goyn-ac__panel textarea {
	display: block;
	width: 100%;
	appearance: none;
	padding: 15px 16px;
	border: 1px solid rgba(31, 83, 93, 0.2);
	border-radius: 0;
	background-color: var(--goyn-ac-bg);
	outline: none;
	font-family: var(--goyn-font-body);
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--goyn-ink, #1a2c30);
	transition: border-color 0.4s var(--goyn-ease), background-color 0.4s var(--goyn-ease);
}

.goyn-ac .woocommerce-Input::placeholder,
.goyn-ac .input-text::placeholder {
	color: rgba(94, 110, 110, 0.75);
}

.goyn-ac .woocommerce-Input:focus,
.goyn-ac .input-text:focus,
.goyn-ac .goyn-ac__panel input:focus,
.goyn-ac .goyn-ac__panel select:focus,
.goyn-ac .goyn-ac__panel textarea:focus {
	border-color: var(--goyn-ac-line);
	background-color: #fff;
}

/*
 * Nome e cognome sulla stessa riga, come il `.co-two` dell'originale.
 *
 * I NOSTRI due campi (registrazione) stanno in una griglia: niente float, quindi
 * niente testo che si avvolge — il perché, con la misura dell'errore, è in testa a
 * `fields()` in class-account-register.php.
 */
.goyn-ac__reg-two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Dentro la griglia il margine fra le righe non serve: lo dà il `gap`. */
.goyn-ac .woocommerce-form .goyn-ac__reg-field {
	margin-bottom: 12px;
}

/*
 * Le coppie di campi che genera WOOCOMMERCE (il modulo degli indirizzi) restano
 * flottate come le fa lui: là ogni riga successiva porta `form-row-wide`, che
 * WooCommerce già libera con `clear: both`. Qui si corregge solo la larghezza.
 *
 * ⚠️⚠️ SECONDO CASO DELLO STESSO SCONTRO DI SPECIFICITÀ. WooCommerce ha
 *      `.woocommerce form .form-row-first { width: 47% }` — (0,2,2) — e la prima
 *      versione di questa regola era `.goyn-ac .form-row-first` (0,2,1): misurato, i
 *      campi restavano al 47% e il blocco ≤560px che li incolonna non aveva
 *      effetto. Tre classi (0,3,0) bastano a vincere.
 */
.goyn-ac .woocommerce-address-fields .form-row-first,
.goyn-ac .woocommerce-address-fields .form-row-last,
.goyn-ac .woocommerce-EditAccountForm .form-row-first,
.goyn-ac .woocommerce-EditAccountForm .form-row-last {
	width: calc(50% - 6px);
}

/* Le spunte: `.co-check` dell'originale. L'etichetta torna in linea, perché qui
   sta accanto alla casella e non sopra un campo. */
/*
 * ⚠️⚠️ QUI IL CONCORRENTE NON È IL NOSTRO FOGLIO: È WOOCOMMERCE.
 *      `woocommerce-layout.css` ha `.woocommerce form .form-row label { display: block }`,
 *      cioè (0,2,2) — due classi e DUE elementi — e viene servito dopo il nostro.
 *      La prima versione di questa regola era `.goyn-ac label.woocommerce-form__…`
 *      (0,2,1) e perdeva: misurato, la spunta restava `display: block` e "Ricordami"
 *      finiva sotto la casella invece che accanto.
 *
 *      Il selettore qui sotto conta quattro classi più un elemento (0,4,1), che
 *      batte (0,2,2) perché le classi si confrontano prima. Un `!important` avrebbe
 *      risolto lo stesso e sarebbe stato un debito.
 *
 *      Da ricordare per tutto questo foglio: le regole di WooCommerce arrivano DOPO
 *      e usano spesso due elementi. Dove una nostra regola sembra non fare effetto,
 *      il colpevole è quasi sempre quello — e si trova in un attimo confrontando la
 *      proprietà calcolata con la regola vincente negli strumenti del browser.
 */
.goyn-ac .woocommerce-form .form-row label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--goyn-font-body);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--goyn-ac-muted);
	cursor: pointer;
}

.goyn-ac .woocommerce-form__input-checkbox {
	flex: none;
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--goyn-ac-line);
}

/*
 * I bottoni di WooCommerce vestiti come `.goyn-btn` del tema. Non si aggiunge la
 * classe al markup — quel markup non è nostro e un aggiornamento la porterebbe
 * via — quindi le proprietà si ripetono qui.
 *
 * ⚠️ `line-height: 1.5` e non l'`1` di `.goyn-btn`: è la divergenza già
 *    registrata fra il bottone del tema e quello dell'app (48px contro 55). Qui si
 *    parte dal valore giusto invece di ereditare quello sbagliato.
 */
.goyn-ac .woocommerce-button,
.goyn-ac .goyn-ac__panel button[type='submit'],
.goyn-ac .goyn-ac__panel .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 18px;
	padding: 15px 26px;
	border: 1px solid var(--goyn-ac-line);
	border-radius: 0;
	background-color: var(--goyn-ac-line);
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--goyn-cream, #e9e5d9);
	cursor: pointer;
	transition: background-color var(--goyn-dur, 0.5s) var(--goyn-ease),
		color var(--goyn-dur, 0.5s) var(--goyn-ease);
}

.goyn-ac .woocommerce-button:hover,
.goyn-ac .goyn-ac__panel button[type='submit']:hover,
.goyn-ac .goyn-ac__panel .button:hover {
	background-color: var(--goyn-petrol-deep, #163e46);
	border-color: var(--goyn-petrol-deep, #163e46);
	color: var(--goyn-peach, #e8c39f);
}

/* Nel pannello i bottoni non sono l'azione principale di una scheda: larghezza
   naturale, non tutta la riga. */
.goyn-ac .goyn-ac__panel button[type='submit'],
.goyn-ac .goyn-ac__panel .button {
	width: auto;
}

.goyn-ac .woocommerce-LostPassword {
	margin: 14px 0 0;
	text-align: right;
}

.goyn-ac .woocommerce-LostPassword a {
	font-size: 12.5px;
	color: var(--goyn-ac-accent);
	border-bottom: 1px solid rgba(192, 96, 60, 0.4);
}

/*
 * L'informativa privacy. È testo legale: piccolo ma leggibile, e il collegamento
 * si vede — un'informativa con il link mimetizzato è un'informativa che non c'è.
 */
.goyn-ac .woocommerce-privacy-policy-text {
	margin: 16px 0 0;
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--goyn-ac-muted);
}

.goyn-ac .woocommerce-privacy-policy-text p {
	margin: 0;
}

.goyn-ac .woocommerce-privacy-policy-link {
	color: var(--goyn-ac-accent);
	border-bottom: 1px solid rgba(192, 96, 60, 0.4);
}

.goyn-ac .woocommerce-password-strength {
	margin-top: 8px;
	font-family: var(--goyn-font-label);
	font-size: 10.5px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.goyn-ac .woocommerce-password-hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--goyn-ac-muted);
}

.goyn-ac__note {
	margin: 20px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--goyn-ac-muted);
}

.goyn-ac .goyn-ac__note a {
	color: var(--goyn-ac-accent);
}

/* ============================================================
   5. Chi è entrato: testa e statistiche
   ============================================================ */

.goyn-ac__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.goyn-ac--in .goyn-ac__title {
	font-size: clamp(30px, 3.8vw, 58px);
	line-height: 0.94;
}

.goyn-ac__email {
	margin: 12px 0 0;
	font-size: 14.5px;
	color: var(--goyn-ac-muted);
}

/* ⚠️ Un elemento con `data-goyn-rise` non può ricevere altre trasformazioni:
   l'animazione ha `fill: both` e lascia scritta la propria `transform`. Il
   bottone non ne ha, quindi va bene così — ma se un giorno gli si aggiungesse un
   sollevamento in hover, andrebbe su un figlio. Vedi reveal.css. */
.goyn-ac__logout {
	flex: none;
}

/*
 * Il reticolo a filo singolo: `gap: 1px` scopre il fondo del contenitore. Le
 * colonne le ricava il foglio dal conteggio scritto nel markup — mai il contrario,
 * o nessun media query potrebbe più cambiarle.
 */
.goyn-ac__stats {
	display: grid;
	grid-template-columns: repeat(var(--goyn-ac-stat-count), minmax(0, 1fr));
	gap: 1px;
	margin: clamp(30px, 3.4vw, 48px) 0 clamp(26px, 3vw, 40px);
	background-color: var(--goyn-ac-rule);
	border: 1px solid var(--goyn-ac-rule);
}

.goyn-ac__stat {
	padding: clamp(18px, 2vw, 26px);
	background-color: var(--goyn-ac-card);
}

.goyn-ac__stat-label {
	font-size: 10px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 1.8px;
	color: var(--goyn-ac-muted);
}

.goyn-ac__stat-value {
	margin-top: 8px;
	font-size: clamp(16px, 1.6vw, 21px);
	line-height: 1.2;
	color: var(--goyn-ac-title);
}

/* ============================================================
   6. Menu laterale e pannello
   ============================================================ */

.goyn-ac__dash {
	display: grid;
	grid-template-columns: var(--goyn-ac-side) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 44px);
	align-items: start;
}

.goyn-ac__side-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--goyn-ac-rule-soft);
}

/*
 * Le voci sono COLLEGAMENTI e non bottoni: ogni pannello è una pagina vera con il
 * proprio indirizzo. Il filetto attivo si ottiene con un bordo sinistro e un
 * `margin-left: -1px` che lo mette sopra quello della colonna, come nell'originale.
 */
.goyn-ac .goyn-ac__side-link {
	display: block;
	margin-left: -1px;
	padding: 13px 16px;
	border-left: 2px solid transparent;
	font-weight: 600;
	font-size: 11.5px;
	line-height: normal;
	letter-spacing: 2px;
	color: var(--goyn-ac-muted);
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease),
		border-color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-ac .goyn-ac__side-link:hover {
	color: var(--goyn-ac-title);
}

.goyn-ac .goyn-ac__side-link.is-on {
	color: var(--goyn-ac-title);
	border-left-color: var(--goyn-ac-accent);
}

.goyn-ac__panel {
	min-height: 320px;
}

.goyn-ac__panel-title {
	margin: 0 0 20px;
	font-weight: 600;
	font-size: 12.5px;
	line-height: normal;
	letter-spacing: 2.4px;
	color: var(--goyn-ac-title);
}

/*
 * I paragrafi che WooCommerce stampa nei pannelli (indirizzi, download vuoti,
 * istruzioni). Senza questa regola prenderebbero il corpo del tema, che su un
 * pannello stretto è troppo grande.
 */
.goyn-ac .goyn-ac__panel > p,
.goyn-ac .woocommerce-Address p,
.goyn-ac .woocommerce-info,
.goyn-ac .woocommerce-Message {
	font-size: 14px;
	line-height: 1.7;
	color: var(--goyn-ac-muted);
}

.goyn-ac .goyn-ac__panel a {
	color: var(--goyn-ac-accent);
}

.goyn-ac .goyn-ac__panel .goyn-ac__side-link,
.goyn-ac .goyn-ac__panel .goyn-ac__order-num,
.goyn-ac .goyn-ac__panel .goyn-ac__order-name {
	color: inherit;
}

/* ============================================================
   7. Le schede ordine
   ============================================================ */

.goyn-ac__order {
	margin-bottom: 14px;
	padding: clamp(18px, 2vw, 26px);
	background-color: var(--goyn-ac-card);
	border: 1px solid var(--goyn-ac-rule);
}

.goyn-ac__order-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.goyn-ac .goyn-ac__order-num {
	font-weight: 600;
	font-size: 12.5px;
	line-height: normal;
	letter-spacing: 2px;
	color: var(--goyn-ac-title);
}

.goyn-ac__order-date {
	margin-left: 12px;
	font-size: 12.5px;
	color: var(--goyn-ac-muted);
}

/*
 * La pastiglia dello stato: rettangolo pieno ruggine, petrol quando l'ordine è
 * completato. Sono i valori dell'originale.
 *
 * ⚠️ Prima l'avevo disegnata come una pillola contornata (raggio 100px, fondo
 *    trasparente): più elegante e SBAGLIATA — misurato, l'app ha `6px 10px`, 10px,
 *    raggio 0 e fondo pieno. È il genere di scostamento che passa inosservato
 *    finché non si mettono le due pagine una accanto all'altra.
 *
 * I due stati si distinguono per la TINTA e non per il riempimento, quindi il
 * testo dello stato è scritto per esteso: chi non distingue ruggine da petrol legge
 * "Completato" o "In lavorazione", che è l'informazione.
 */
.goyn-ac__badge {
	padding: 6px 10px;
	font-weight: 600;
	font-size: 10px;
	line-height: normal;
	letter-spacing: 1.6px;
	color: var(--goyn-cream, #e9e5d9);
	background-color: var(--goyn-ac-accent);
}

.goyn-ac__badge.is-done {
	background-color: var(--goyn-ac-line);
}

.goyn-ac__order-items {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 18px 0;
}

.goyn-ac .goyn-ac__order-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.goyn-ac__order-photo {
	position: relative;
	flex: none;
	width: 58px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--goyn-petrol-deep, #163e46);
}

/* ⚠️ Discendente: `.elementor img` e `.goyn-widget img` del tema sono (0,1,1). */
.goyn-ac .goyn-ac__order-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La quantità sull'angolo della foto: si legge sempre, anche su una foto chiara,
   perché ha un fondo proprio. */
.goyn-ac__order-qty {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 20px;
	padding: 2px 5px;
	background-color: var(--goyn-petrol-deep, #163e46);
	font-weight: 600;
	font-size: 9.5px;
	line-height: 1.4;
	letter-spacing: 0.5px;
	text-align: center;
	color: var(--goyn-cream, #e9e5d9);
}

.goyn-ac .goyn-ac__order-name {
	font-weight: 600;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 1.4px;
	color: var(--goyn-ac-title);
	transition: color 0.3s var(--goyn-ease);
}

.goyn-ac .goyn-ac__order-item:hover .goyn-ac__order-name {
	color: var(--goyn-ac-accent);
}

.goyn-ac__order-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 16px;
	border-top: 1px solid var(--goyn-ac-rule);
}

.goyn-ac__order-track {
	flex: 1 1 auto;
	font-size: 12.5px;
	color: var(--goyn-ac-muted);
}

.goyn-ac__order-track strong {
	color: var(--goyn-ac-title);
}

/*
 * Il totale prende lo spazio avanzato quando il tracciamento non c'è — allineato a
 * SINISTRA, così occupa il posto che nell'app è del tracciamento e i due
 * collegamenti restano a destra. Con `text-align: right`, provato prima, il totale
 * galleggiava a metà riga con un buco a sinistra.
 */
.goyn-ac__order-total {
	flex: 1 1 auto;
	font-size: 22px;
	line-height: 1;
	color: var(--goyn-ac-title);
}

/* Col tracciamento davanti, lo spazio lo prende quello e il totale torna alla
   propria misura, come nell'originale. */
.goyn-ac__order-track ~ .goyn-ac__order-total {
	flex: none;
}

.goyn-ac .goyn-ac__order-view,
.goyn-ac .goyn-ac__order-again {
	flex: none;
	padding: 8px 14px;
	border: 1px solid var(--goyn-ac-rule-soft);
	font-weight: 600;
	font-size: 10px;
	line-height: normal;
	letter-spacing: 1.6px;
	color: var(--goyn-ac-muted);
	transition: border-color var(--goyn-dur-fast, 0.35s) var(--goyn-ease),
		color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-ac .goyn-ac__order-view:hover,
.goyn-ac .goyn-ac__order-again:hover {
	border-color: var(--goyn-ac-line);
	color: var(--goyn-ac-title);
}

.goyn-ac .goyn-ac__order-again {
	border-color: var(--goyn-ac-accent);
	color: var(--goyn-ac-accent);
}

.goyn-ac__pages {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 22px;
}

.goyn-ac .goyn-ac__page,
.goyn-ac__page-count {
	font-size: 10.5px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 1.6px;
	color: var(--goyn-ac-muted);
}

.goyn-ac .goyn-ac__page:hover {
	color: var(--goyn-ac-title);
}

.goyn-ac__page-count {
	margin-left: auto;
}

.goyn-ac__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.goyn-ac__empty-text {
	margin: 0;
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.4;
	color: var(--goyn-ac-accent);
}

.goyn-ac .goyn-ac__all {
	display: inline-block;
	margin-top: 18px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 2px;
	color: var(--goyn-ac-title);
}

/* ============================================================
   8. Il resto dei pannelli di WooCommerce
   ------------------------------------------------------------
   Indirizzi, dati dell'account, scheda di un ordine, download: markup di
   WooCommerce, vestito perché somigli alle nostre schede.
   ============================================================ */

/*
 * ⚠️⚠️ I DUE PSEUDO-ELEMENTI DI CLEARFIX DI WOOCOMMERCE DIVENTANO CELLE DELLA
 *      GRIGLIA, e questo è il bug che ha rotto la pagina degli indirizzi.
 *
 *      WooCommerce scrive `.woocommerce .col2-set::before, ::after { content: " ";
 *      display: table }` — la clearfix di quando le colonne erano float. Su un
 *      contenitore `display: grid` un `::before` non è più invisibile: è un FIGLIO,
 *      e quindi occupa una cella.
 *
 *      Misurato: la griglia aveva quattro elementi invece di due, e la collocazione
 *      automatica li metteva così — `::before` in riga 1 colonna 1, la scheda di
 *      fatturazione in riga 1 colonna 2, quella di spedizione in riga 2 colonna 1,
 *      `::after` in riga 2 colonna 2. Le due schede in diagonale, con mezza pagina
 *      vuota: esattamente lo schermo segnalato. `grid-template-rows` diceva
 *      `172,75px 103,94px`, cioè una riga per scheda, e nessuna regola collocava
 *      niente — il che rendeva la cosa incomprensibile finché non si contano i figli.
 *
 *      Vale per QUALUNQUE contenitore di WooCommerce che si trasformi in griglia, e
 *      anche per `display: contents`: quel valore toglie l'elemento dal layout ma i
 *      suoi pseudo-elementi restano e salgono di un livello.
 */
.goyn-ac .woocommerce-Addresses::before,
.goyn-ac .woocommerce-Addresses::after,
/*
 * La testatina della scheda è un contenitore flex e ha la stessa clearfix: là lo
 * pseudo-elemento diventa un ELEMENTO FLEX e si prende la propria fetta di riga,
 * spingendo il titolo verso destra. Misurato: il titolo rientrava di ~36px dal bordo
 * interno della scheda.
 */
.goyn-ac .woocommerce-Address-title::before,
.goyn-ac .woocommerce-Address-title::after {
	display: none;
}

/*
 * ⚠️⚠️ DUE COLONNE DICHIARATE, non `auto-fill` e nemmeno `auto-fit`.
 *      Gli indirizzi di WooCommerce sono due — fatturazione e spedizione — ma
 *      `repeat(auto-fill, minmax(240px, 1fr))` in un pannello da 1058px crea QUATTRO
 *      tracce e ne lascia due vuote: misurato, ogni scheda veniva 254px invece di
 *      522, con il titolo che andava a capo. Provato `auto-fit`, che in teoria
 *      richiude le tracce senza contenuto: misurato di nuovo, restavano quattro da
 *      254 — il richiudersi non ha avuto effetto qui.
 *
 *      Due colonne scritte a mano non hanno niente da indovinare, e sono anche il
 *      modello di WooCommerce. Se un plugin aggiungesse un terzo tipo di indirizzo,
 *      andrebbe a capo su una seconda riga: giusto anche così.
 */
.goyn-ac .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
}

/*
 * ⚠️⚠️ QUATTRO CLASSI, E LA MISURA DELL'ERRORE SPIEGA PERCHÉ.
 *      `.woocommerce-page .col2-set .col-1 { float: left; width: 48% }` è (0,3,0) —
 *      e `.woocommerce-Addresses` È un `.col2-set`, mentre le due schede sono
 *      `.col-1` e `.col-2`. La mia `.goyn-ac .woocommerce-Address` (0,2,0) perdeva:
 *      misurato, ogni scheda veniva larga 121,98px, cioè il 48% di una traccia da
 *      254 — con il titolo che andava a capo a ogni parola, il collegamento
 *      "Modifica indirizzo di fatturazione" su tre righe e l'indirizzo incolonnato
 *      una riga per parola. È lo schermo che l'utente ha segnalato.
 *
 *      `float: none` esplicito: in una griglia il float sui figli è ignorato, ma
 *      qui la scheda è essa stessa il figlio — e senza azzerarlo il testo intorno
 *      continuerebbe ad avvolgersi.
 */
.goyn-ac .goyn-ac__panel .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	padding: clamp(16px, 1.8vw, 24px);
	background-color: var(--goyn-ac-card);
	border: 1px solid var(--goyn-ac-rule);
}

/*
 * La testatina della scheda: titolo a sinistra, "modifica" a destra. `flex-wrap` e
 * `align-items: baseline` perché il collegamento è lungo ("Modifica indirizzo di
 * fatturazione") e su una scheda stretta deve poter andare a capo sotto al titolo
 * invece di stringerlo.
 */
.goyn-ac .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 12px;
	margin-bottom: 14px;
}

.goyn-ac .woocommerce-Address-title h2,
.goyn-ac .woocommerce-Address-title h3 {
	margin: 0;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--goyn-ac-title);
}

.goyn-ac .woocommerce-Address address {
	font-style: normal;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--goyn-ac-muted);
}

/*
 * ⚠️ WooCommerce dà a questo collegamento `float: right` e la sua regola resta la
 *    più specifica — provato a scavalcarla, e non vale la pena: la testatina è un
 *    contenitore FLEX, e su un elemento flex il float non ha effetto. `space-between`
 *    fa già il lavoro che il float voleva fare.
 */
.goyn-ac .woocommerce-Address .edit {
	flex: none;
	font-size: 10.5px;
	font-family: var(--goyn-font-label);
	line-height: normal;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--goyn-ac-accent);
}

/* L'indirizzo: `font-style: normal` perché `<address>` è corsivo di serie. */
.goyn-ac .goyn-ac__panel .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--goyn-ac-muted);
}

/* Il modulo dei dati e quello di un indirizzo: incolonnati e con una larghezza
   massima, perché un campo largo 900px è difficile da leggere. */
.goyn-ac .woocommerce-EditAccountForm,
.goyn-ac .woocommerce-address-fields {
	max-width: 520px;
}

.goyn-ac .woocommerce-EditAccountForm fieldset {
	margin: 28px 0 0;
	padding: 22px 0 0;
	border: 0;
	border-top: 1px solid var(--goyn-ac-rule);
}

.goyn-ac .woocommerce-EditAccountForm legend {
	padding: 0;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--goyn-ac-title);
}

/*
 * Le tabelle della scheda di un ordine e dei download.
 *
 * ⚠️ Le regole vanno su selettori DISCENDENTI: la zebratura di WordPress colpisce
 *    `table`/`th`/`td`, che sono selettori di elemento (0,1,1) — l'inciampo già
 *    registrato sui valori nutrizionali della scheda prodotto.
 */
.goyn-ac .goyn-ac__panel table {
	width: 100%;
	margin: 0 0 22px;
	border-collapse: collapse;
	background-color: transparent;
}

/*
 * ⚠️ `border: 0` prima del filetto: `reset.css` di Hello Elementor dà a ogni cella
 *    `border: 1px solid` su tutti i lati, e sovrascrivendo solo quello inferiore
 *    restano il bordo sopra e i due verticali — la tabella diventa una griglia di
 *    scatole. Stessa correzione della tabella dei valori nutrizionali, dove il
 *    difetto era vistoso.
 */
.goyn-ac .goyn-ac__panel table th,
.goyn-ac .goyn-ac__panel table td {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid var(--goyn-ac-rule);
	vertical-align: baseline;
	background-color: transparent;
	font-size: 13.5px;
	line-height: 1.5;
	text-align: left;
	color: var(--goyn-ac-muted);
}

.goyn-ac .goyn-ac__panel table th {
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--goyn-ac-title);
}

.goyn-ac .goyn-ac__panel table tfoot th,
.goyn-ac .goyn-ac__panel table tfoot td {
	font-size: 13.5px;
	color: var(--goyn-ac-title);
}

.goyn-ac .woocommerce-order-details__title,
.goyn-ac .woocommerce-column__title,
.goyn-ac .woocommerce-customer-details h2 {
	margin: 28px 0 16px;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--goyn-ac-title);
}

.goyn-ac .woocommerce-order-details__title:first-child {
	margin-top: 0;
}

/* ============================================================
   9. Avvisi
   ------------------------------------------------------------
   Gli avvisi di WooCommerce sono l'unica via con cui la pagina dice «email o
   password non corretti». Devono farsi vedere: filetto spesso a sinistra, fondo
   proprio, e il colore che distingue errore da conferma.
   ============================================================ */

.goyn-ac .woocommerce-notices-wrapper:empty {
	display: none;
}

/*
 * ⚠️ Gli avvisi di WooCommerce hanno un'icona in un `::before` che arriva dal suo
 *    font di icone. Quel font qui non è caricato — il tema carica solo i propri —
 *    e al suo posto si vedeva un glifo casuale davanti al messaggio, che sembra un
 *    errore di codifica. Misurato: `content` è un carattere dell'area privata e
 *    `font-family` è "WooCommerce". Il filetto colorato a sinistra dice già di che
 *    avviso si tratta, quindi l'icona si toglie.
 */
.goyn-ac .woocommerce-error::before,
.goyn-ac .woocommerce-message::before,
.goyn-ac .woocommerce-info::before {
	display: none;
}

.goyn-ac .woocommerce-error,
.goyn-ac .woocommerce-message,
.goyn-ac .woocommerce-info {
	margin: 0 0 20px;
	padding: 14px 16px;
	background-color: var(--goyn-ac-card);
	border: 0;
	border-left: 3px solid var(--goyn-ac-line);
	list-style: none;
	font-size: 13px;
	line-height: 1.6;
	color: var(--goyn-ac-title);
}

.goyn-ac .woocommerce-error {
	border-left-color: var(--goyn-ac-accent);
}

.goyn-ac .woocommerce-message .button,
.goyn-ac .woocommerce-info .button {
	float: none;
	margin-left: 14px;
	padding: 9px 16px;
	width: auto;
	font-size: 10px;
	letter-spacing: 1.6px;
}

.goyn-ac .woocommerce-error li,
.goyn-ac .woocommerce-message li {
	margin: 0;
	list-style: none;
}

.goyn-ac .woocommerce-error li + li,
.goyn-ac .woocommerce-message li + li {
	margin-top: 6px;
}

/* ============================================================
   10. Entrate
   ============================================================ */

.goyn-ac__title .goyn-line {
	--goyn-delay: calc(var(--goyn-ac-line-i, 0) * 90ms);
}

.goyn-ac__stat {
	--goyn-rise-shift: 18px;
	--goyn-rise-dur: 0.7s;
	--goyn-delay: calc(var(--goyn-ac-index, 0) * 80ms);
}

/* ============================================================
   11. Responsive
   ------------------------------------------------------------
   ⚠️ Dal più largo al più stretto: fra due media query di pari specificità
      decide l'ordine nel file.
   ============================================================ */

@media (max-width: 1080px) {
	/*
	 * Il menu laterale diventa una fila orizzontale: a 200px fissi su un tablet il
	 * pannello resterebbe troppo stretto per una tabella d'ordine.
	 */
	.goyn-ac__dash {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.goyn-ac__side-list {
		flex-direction: row;
		flex-wrap: wrap;
		border-left: 0;
		border-bottom: 1px solid var(--goyn-ac-rule-soft);
	}

	.goyn-ac .goyn-ac__side-link {
		margin: 0 0 -1px;
		padding: 12px 14px;
		border-left: 0;
		border-bottom: 2px solid transparent;
	}

	.goyn-ac .goyn-ac__side-link.is-on {
		border-left-color: transparent;
		border-bottom-color: var(--goyn-ac-accent);
	}
}

@media (max-width: 860px) {
	.goyn-ac__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Due schede indirizzo affiancate su un telefono sono due colonne da 150px. */
	.goyn-ac .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Le statistiche passano a due colonne. Con tre voci la terza occupa la riga
	 * intera: è meglio di tre colonne da 100px, dove «Agosto 2026» andrebbe a capo.
	 */
	.goyn-ac__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.goyn-ac__stats {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * I campi affiancati tornano incolonnati: 50% di 300px non basta a un cognome.
	 * Tre classi anche qui, o vince il 47% di WooCommerce — e `float: none`, o il
	 * secondo campo resterebbe a destra a metà larghezza.
	 */
	.goyn-ac__reg-two {
		grid-template-columns: minmax(0, 1fr);
	}

	.goyn-ac .woocommerce-address-fields .form-row-first,
	.goyn-ac .woocommerce-address-fields .form-row-last,
	.goyn-ac .woocommerce-EditAccountForm .form-row-first,
	.goyn-ac .woocommerce-EditAccountForm .form-row-last {
		float: none;
		width: 100%;
	}
}

/* ============================================================
   12. prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-ac .goyn-ac__side-link,
	.goyn-ac__tab,
	.goyn-ac .woocommerce-Input,
	.goyn-ac .woocommerce-button,
	.goyn-ac .goyn-ac__order-name,
	.goyn-ac .goyn-ac__order-view,
	.goyn-ac .goyn-ac__order-again {
		transition: none;
	}
}