@layer base {

/* ============================================================
   WRAPPER CONTAINER — account loggato e login form
   ============================================================ */

/* Account loggato: sidebar + content */
.woocommerce-account .s4w-myaccount-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

/* Login form */
.woocommerce-account .s4w-myaccount-login-wrap {
	padding-top: 52px;
	padding-bottom: 94px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* Rimuove il padding extra di entry-content che WordPress aggiunge */
.woocommerce-account .entry-content {
	padding: 0;
	margin: 0;
}

/* Il container del myaccount non deve avere padding orizzontale —
   la sidebar si estende fino al bordo sinistro come nella pagina contatti */
.woocommerce-account .s4w-myaccount-wrap.s4w-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
}

/* ============================================================
   LAYOUT PRINCIPALE — due colonne sidebar + content
   Stesso pattern di .contatti-page
   ============================================================ */

.woocommerce-account .s4w-myaccount-wrap {
	display: flex;
	align-items: stretch;
	min-height: calc(100vh - 70px);
}

/* .woocommerce è il secondo figlio del wrap (dopo la nav),
   deve prendere tutto lo spazio rimanente */
.woocommerce-account .s4w-myaccount-wrap > .woocommerce {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ============================================================
   SIDEBAR NAVIGAZIONE
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: calc((100vw - 1920px) / 2 + 488px);
	min-width: 488px;
	flex-shrink: 0;
	background-color: var(--bg-weak-100);
	align-self: stretch;
	position: relative;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 52px 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	background-color: var(--bg-weak-100);
	position: sticky;
	top: 100px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	border-bottom: 1px solid var(--stroke-sub-300);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 26px 32px 26px max(80px, calc((100vw - 1920px) / 2 + 80px));
	font-family: var(--font-primary);
	font-size: 24px;
	font-weight: var(--weight-regular);
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--text-sub-500);
	text-decoration: none;
	transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--text-main-900);
	background-color: transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
	color: var(--text-main-900);
	font-weight: var(--weight-regular);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a .s4w-account-nav__label,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a .s4w-account-nav__label,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a[aria-current="page"] .s4w-account-nav__label {
	text-decoration: underline !important;
	text-decoration-color: currentColor !important;
	text-underline-offset: 4px !important;
}

/* Freccia — sempre nel DOM, nascosta di default come nella contatti */
.woocommerce-account .s4w-account-nav__arrow {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--text-main-900);
	width: 0;
	height: 24px;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, width 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active .s4w-account-nav__arrow,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active .s4w-account-nav__arrow {
	width: 24px;
	opacity: 1;
}

/* ============================================================
   AREA CONTENUTO
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1;
	min-width: 0;
	padding: 52px max(40px, calc((100vw - 1920px) / 2 + 40px)) 94px 40px;
	width: 100%;
	box-sizing: border-box;
}

/* ============================================================
   TITOLI SEZIONE
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-family: var(--font-primary);
	font-size: var(--title-medium);
	font-weight: var(--weight-regular);
	line-height: var(--title-medium-lh);
	letter-spacing: var(--title-medium-ls);
	text-transform: uppercase;
	color: var(--text-main-900);
	margin: 0 0 32px 0;
}

.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--font-primary);
	font-size: var(--title-xsmall);
	font-weight: var(--title-xsmall-weight);
	line-height: var(--title-xsmall-lh);
	letter-spacing: var(--title-xsmall-ls);
	text-transform: uppercase;
	color: var(--text-main-900);
	margin: 0 0 16px 0;
}

/* ============================================================
   TESTI CORPO
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-content p {
	font-family: var(--font-secondary);
	font-size: var(--paragraph-medium);
	line-height: var(--paragraph-medium-lh);
	color: var(--text-main-900);
	margin-bottom: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content p a {
	color: var(--text-main-900);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-MyAccount-content p a:hover {
	color: var(--text-sub-500);
}

/* ============================================================
   SHOW PASSWORD BUTTON
   WooCommerce inietta questo bottone ma il suo stile è nel
   foglio disabilitato — lo reimplementiamo qui.
   ============================================================ */

.woocommerce-account .show-password-input {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--text-soft-400);
	transition: color var(--transition-fast);
	z-index: 1;
}

.woocommerce-account .show-password-input:hover {
	color: var(--text-main-900);
}

/* Icona occhio — WooCommerce usa ::before con contenuto Unicode */
.woocommerce-account .show-password-input::before {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z' stroke='%23868C98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='%23868C98' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.woocommerce-account .show-password-input.display-password::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24' stroke='%23868C98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='1' y1='1' x2='23' y2='23' stroke='%23868C98' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Il campo password ha bisogno di position relative per l'icona assoluta */
.woocommerce-account .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.woocommerce-account .password-input input.input-text {
	padding-right: 44px;
}

/* ============================================================
   FORM ROWS (edit-account, edit-address, login)
   Stile coerente con cf7-form.css
   ============================================================ */

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Spazio extra sopra il bottone submit */
.woocommerce-account .form-row:has(button[type="submit"]),
.woocommerce-account .form-row:has(input[type="submit"]),
.woocommerce-account p:has(button[type="submit"]),
.woocommerce-account p:has(input[type="submit"]) {
	margin-top: 32px;
}

/* Nel form login checkbox e bottone sono nello stesso .form-row —
   aggiungiamo spazio sopra il bottone direttamente */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
	margin-top: 16px;
	display: block;
	width: 100%;
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
	font-family: var(--font-primary);
	font-size: var(--label-large);
	font-weight: var(--weight-regular);
	line-height: 1;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: var(--text-main-900);
	display: block;
}

.woocommerce-account .required {
	color: var(--text-main-900);
}

.woocommerce-account .woocommerce-Input,
.woocommerce-account input.input-text,
.woocommerce-account select {
	width: 100%;
	height: 54px;
	padding: 15px 10px;
	background-color: var(--bg-white-0);
	border: 1px solid var(--stroke-sub-300);
	border-radius: 0;
	outline: none;
	font-family: var(--font-secondary);
	font-size: var(--paragraph-small);
	font-weight: var(--weight-regular);
	line-height: var(--paragraph-small-lh);
	color: var(--text-main-900);
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	transition: border-color var(--transition-fast);
}


.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input.input-text:focus,
.woocommerce-account select:focus {
	border-color: var(--text-main-900);
	outline: none;
}

.woocommerce-account .woocommerce-Input::placeholder,
.woocommerce-account input.input-text::placeholder {
	color: var(--text-soft-400);
}

/* Griglia 2 colonne per first/last name */
.woocommerce-account .woocommerce-form-row--first,
.woocommerce-account .form-row-first {
	float: left;
	width: calc(50% - 8px);
	margin-right: 16px;
}

.woocommerce-account .woocommerce-form-row--last,
.woocommerce-account .form-row-last {
	float: right;
	width: calc(50% - 8px);
	margin-right: 0;
}

.woocommerce-account .woocommerce-form-row--wide,
.woocommerce-account .form-row-wide {
	clear: both;
	width: 100%;
	float: none;
}

.woocommerce-account .clear {
	clear: both;
}

/* Descrizione sotto display_name */
.woocommerce-account #account_display_name_description {
	font-family: var(--font-secondary);
	font-size: var(--paragraph-xsmall);
	color: var(--text-soft-400);
	margin-top: 6px;
	display: block;
}

/* ============================================================
   FIELDSET PASSWORD
   ============================================================ */

.woocommerce-account fieldset {
	border: 1px solid var(--stroke-soft-200);
	padding: 32px;
	margin: 32px 0;
}

.woocommerce-account fieldset legend {
	font-family: var(--font-primary);
	font-size: var(--label-medium);
	font-weight: var(--weight-book);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-main-900);
	padding: 0 8px;
}

/* ============================================================
   CHECKBOX (rememberme, login form)
   ============================================================ */

.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-family: var(--font-secondary);
	font-size: var(--paragraph-small);
	color: var(--text-sub-500);
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-account .woocommerce-form__input-checkbox {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	min-height: 20px;
	background-color: var(--bg-weak-100);
	border: 1px solid var(--stroke-sub-300) !important;
	border-radius: 0 !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color var(--transition-fast);
}

.woocommerce-account .woocommerce-form__input-checkbox:checked {
	background-color: var(--text-main-900);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1 5l4 4 7-8' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* ============================================================
   BOTTONI SUBMIT — stile .btn--base
   ============================================================ */

.woocommerce-account .woocommerce-Button,
.woocommerce-account .button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: var(--label-medium);
	font-weight: var(--weight-book);
	line-height: 1.43;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	background-color: var(--bg-strong-900);
	color: var(--text-white-0);
	padding: 12px 24px;
	border: 1px solid var(--stroke-strong-900);
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	transition: color var(--transition-normal);
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.woocommerce-account .woocommerce-Button::before,
.woocommerce-account .button::before,
.woocommerce-account button[type="submit"]::before,
.woocommerce-account input[type="submit"]::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #e9e7e2;
	transform: translateY(101%);
	transition: transform var(--transition-normal);
	z-index: -1;
}

.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover {
	color: var(--text-main-900);
}

.woocommerce-account .woocommerce-Button:hover::before,
.woocommerce-account .button:hover::before,
.woocommerce-account button[type="submit"]:hover::before,
.woocommerce-account input[type="submit"]:hover::before {
	transform: translateY(0);
}

/* Bottoni secondari outline (es. paginazione prev/next) */
.woocommerce-account .woocommerce-Button--previous,
.woocommerce-account .woocommerce-Button--next {
	background-color: transparent;
	color: var(--text-main-900);
	border: 1px solid var(--stroke-strong-900);
}

.woocommerce-account .woocommerce-Button--previous::before,
.woocommerce-account .woocommerce-Button--next::before {
	background-color: var(--bg-strong-900);
}

.woocommerce-account .woocommerce-Button--previous:hover,
.woocommerce-account .woocommerce-Button--next:hover {
	color: var(--text-white-0);
}

/* Link "Lost password" */
.woocommerce-account .woocommerce-LostPassword a {
	font-family: var(--font-primary);
	font-size: var(--label-medium);
	font-weight: var(--weight-book);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-sub-500);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-LostPassword a:hover {
	color: var(--text-main-900);
}

/* ============================================================
   NOTICES (errori, successi, info)
   ============================================================ */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	list-style: none;
	margin: 0 0 32px 0;
	padding: 16px 20px;
	font-family: var(--font-secondary);
	font-size: var(--paragraph-small);
	line-height: var(--paragraph-small-lh);
	border-left: 4px solid;
	background: transparent !important;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.woocommerce-account .woocommerce-message {
	border-color: var(--color-green);
	color: var(--text-main-900);
}

.woocommerce-account .woocommerce-info {
	border-color: var(--color-blu);
	color: var(--text-main-900);
}

.woocommerce-account .woocommerce-error {
	border-color: var(--color-orange);
	color: var(--text-main-900);
}

/* Link testuale nelle notice */
.woocommerce-account .woocommerce-message a:not(.button):not(.woocommerce-Button),
.woocommerce-account .woocommerce-info a:not(.button):not(.woocommerce-Button),
.woocommerce-account .woocommerce-error a:not(.button):not(.woocommerce-Button) {
	color: var(--text-main-900);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Bottone dentro le notice — stile outline per contrasto con sfondo bianco */
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-error .button,
.woocommerce-account .woocommerce-message .woocommerce-Button,
.woocommerce-account .woocommerce-info .woocommerce-Button,
.woocommerce-account .woocommerce-error .woocommerce-Button {
	background-color: transparent !important;
	color: var(--text-main-900) !important;
	border: 1px solid var(--stroke-strong-900) !important;
	flex-shrink: 0;
}

.woocommerce-account .woocommerce-message .button::before,
.woocommerce-account .woocommerce-info .button::before,
.woocommerce-account .woocommerce-error .button::before,
.woocommerce-account .woocommerce-message .woocommerce-Button::before,
.woocommerce-account .woocommerce-info .woocommerce-Button::before,
.woocommerce-account .woocommerce-error .woocommerce-Button::before {
	background-color: var(--bg-strong-900);
}

.woocommerce-account .woocommerce-message .button:hover,
.woocommerce-account .woocommerce-info .button:hover,
.woocommerce-account .woocommerce-error .button:hover,
.woocommerce-account .woocommerce-message .woocommerce-Button:hover,
.woocommerce-account .woocommerce-info .woocommerce-Button:hover,
.woocommerce-account .woocommerce-error .woocommerce-Button:hover {
	color: var(--text-white-0) !important;
}

/* ============================================================
   TABELLA ORDINI
   ============================================================ */

.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 32px;
}

.woocommerce-account .woocommerce-orders-table thead {
	border-bottom: 2px solid var(--stroke-strong-900);
}

.woocommerce-account .woocommerce-orders-table thead th {
	font-family: var(--font-primary);
	font-size: var(--label-medium);
	font-weight: var(--weight-book);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-main-900);
	padding: 12px 16px 12px 0;
	text-align: left;
}

.woocommerce-account .woocommerce-orders-table tbody tr {
	border-bottom: 1px solid var(--stroke-soft-200);
	transition: background-color var(--transition-fast);
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover {
	background-color: var(--bg-weak-100);
}

.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce-orders-table tbody th {
	font-family: var(--font-secondary);
	font-size: var(--paragraph-small);
	line-height: var(--paragraph-small-lh);
	color: var(--text-main-900);
	padding: 16px 16px 16px 0;
	vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table tbody td::before {
	font-family: var(--font-primary);
	font-size: var(--label-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-sub-500);
}

/* Order number — forza colore nero sul link */
.woocommerce-account .woocommerce-orders-table__cell-order-number,
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	color: var(--text-main-900) !important;
	text-decoration: none;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Actions column */
.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	padding: 8px 14px;
	font-size: var(--paragraph-xsmall);
}

/* Paginazione ordini */
.woocommerce-account .woocommerce-pagination {
	display: flex;
	gap: 16px;
	margin-top: 32px;
}

/* ============================================================
   INDIRIZZI (my-address)
   WooCommerce genera: .u-columns.col2-set.addresses > .u-column1/.u-column2.woocommerce-Address
   ============================================================ */

.woocommerce-account .u-columns.addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}

.woocommerce-account .woocommerce-Address {
	border: 1px solid var(--stroke-soft-200);
	padding: 24px;
	min-width: 0;
	overflow: hidden;
}

/* Header con titolo + link edit — colonna verticale */
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 16px;
}

/* h2 specifico degli indirizzi — molto più piccolo */
.woocommerce-account .woocommerce-Address-title h2 {
	font-family: var(--font-primary);
	font-size: var(--label-large);
	font-weight: var(--weight-book);
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-main-900);
	margin: 0;
}

.woocommerce-account .woocommerce-Address-title .edit {
	font-family: var(--font-primary);
	font-size: var(--label-medium);
	font-weight: var(--weight-book);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-sub-500);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
	color: var(--text-main-900);
}

.woocommerce-account address {
	font-style: normal;
	font-family: var(--font-secondary);
	font-size: var(--paragraph-small);
	line-height: var(--paragraph-small-lh);
	color: var(--text-sub-500);
}

/* ============================================================
   FORM LOGIN — due colonne login + registrazione
   ============================================================ */

.woocommerce-account #customer_login {
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
}

.woocommerce-account #customer_login h2 {
	font-size: var(--title-medium);
	margin-bottom: 32px;
}

/* Separatore orizzontale tra login e registrazione */
.woocommerce-account #customer_login .u-column1 {
	padding-right: 0;
	border-right: none;
	border-bottom: 1px solid var(--stroke-soft-200);
	padding-bottom: 48px;
	margin-bottom: 48px;
}

/* Link recupero password */
.woocommerce-account .woocommerce-LostPassword {
	margin-top: 16px;
}

/* ============================================================
   FORM LOST PASSWORD / RESET PASSWORD
   ============================================================ */

.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .lost_reset_password {
	max-width: 100%;
}

/* ============================================================
   VIEW ORDER — dettaglio singolo ordine
   ============================================================ */

.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	margin-top: 40px;
}

.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title {
	font-family: var(--font-primary);
	font-size: var(--title-xsmall);
	font-weight: var(--title-xsmall-weight);
	line-height: var(--title-xsmall-lh);
	letter-spacing: var(--title-xsmall-ls);
	text-transform: uppercase;
	color: var(--text-main-900);
	border-bottom: 1px solid var(--stroke-soft-200);
	padding-bottom: 12px;
	margin-bottom: 20px;
}

mark.order-number,
mark.order-date,
mark.order-status {
	background: none;
	font-weight: var(--weight-bold);
	color: var(--text-main-900);
}

/* Riepilogo dati ordine (numero, data, stato, totale) */
.woocommerce-account .woocommerce-order-overview {
	list-style: none;
	padding: 20px 24px;
	margin: 0 0 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	background-color: var(--bg-weak-100);
}

.woocommerce-account .woocommerce-order-overview li {
	font-family: var(--font-primary);
	font-size: var(--label-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-sub-500);
	padding: 8px 32px 8px 0;
	margin: 0;
}

.woocommerce-account .woocommerce-order-overview li strong {
	display: block;
	color: var(--text-main-900);
	font-weight: var(--weight-book);
	margin-top: 4px;
}

/* Tabella prodotti ordine */
.woocommerce-account .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-primary);
}

.woocommerce-account .woocommerce-table--order-details thead th {
	font-size: var(--label-medium);
	font-weight: var(--weight-book);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-main-900);
	padding: 12px 0;
	border-bottom: 1px solid var(--stroke-soft-200);
	text-align: left;
}

.woocommerce-account .woocommerce-table--order-details thead th:last-child {
	text-align: right;
}

.woocommerce-account .woocommerce-table--order-details tbody td {
	padding: 20px 0;
	border-bottom: 1px solid var(--stroke-soft-200);
	vertical-align: top;
}

.woocommerce-account .woocommerce-table--order-details .product-name {
	font-size: var(--label-large);
	font-weight: var(--weight-regular);
	color: var(--text-main-900);
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-table--order-details .product-name a {
	color: var(--text-main-900);
	text-decoration: none;
}

.woocommerce-account .woocommerce-table--order-details .product-name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-table--order-details .wc-item-meta {
	font-family: var(--font-secondary);
	font-size: var(--paragraph-xsmall);
	color: var(--text-sub-500);
	margin-top: 6px;
	list-style: none;
	padding: 0;
}

.woocommerce-account .woocommerce-table--order-details .wc-item-meta li {
	margin-bottom: 2px;
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.woocommerce-account .woocommerce-table--order-details .wc-item-meta li p {
	margin: 0;
}

.woocommerce-account .woocommerce-table--order-details .wc-item-meta .wc-item-meta-label {
	flex-shrink: 0;
}

.woocommerce-account .woocommerce-table--order-details .product-total {
	text-align: right;
	font-size: var(--label-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-main-900);
}

/* Footer tabella — totali */
.woocommerce-account .woocommerce-table--order-details tfoot th,
.woocommerce-account .woocommerce-table--order-details tfoot td {
	padding: 12px 0;
	border-bottom: 1px solid var(--stroke-soft-200);
	font-size: var(--label-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-main-900);
}

.woocommerce-account .woocommerce-table--order-details tfoot th {
	font-weight: var(--weight-book);
}

.woocommerce-account .woocommerce-table--order-details tfoot td {
	text-align: right;
}

.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td {
	border-top: 2px solid var(--stroke-strong-900);
	border-bottom: none;
	padding-top: 16px;
	font-size: var(--title-xsmall);
}

/* Layout 2 colonne indirizzi */
.woocommerce-account .woocommerce-columns--2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 40px;
}

/* Indirizzo cliente */
.woocommerce-account .woocommerce-customer-details address {
	font-family: var(--font-secondary);
	font-size: var(--paragraph-small);
	color: var(--text-main-900);
	line-height: 1.7;
	font-style: normal;
	background-color: var(--bg-weak-100);
	padding: 20px 24px;
}

/* ============================================================
   BLOCK BUTTONS — coupon + checkout (blocchi Gutenberg WooCommerce)
   ============================================================ */

.woocommerce-account .wc-block-components-button,
.woocommerce-account .wp-element-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--font-primary) !important;
	font-size: var(--label-medium) !important;
	font-weight: var(--weight-book) !important;
	line-height: 1.43 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer !important;
	background-color: var(--bg-strong-900) !important;
	color: var(--text-white-0) !important;
	padding: 12px 24px !important;
	border: 1px solid var(--stroke-strong-900) !important;
	border-radius: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: color var(--transition-normal) !important;
	position: relative !important;
	overflow: hidden !important;
	z-index: 0 !important;
	box-sizing: border-box !important;
}

.woocommerce-account .wc-block-components-button::before,
.woocommerce-account .wp-element-button::before {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-color: #e9e7e2 !important;
	transform: translateY(101%) !important;
	transition: transform var(--transition-normal) !important;
	z-index: -1 !important;
}

.woocommerce-account .wc-block-components-button:hover,
.woocommerce-account .wp-element-button:hover {
	color: var(--text-main-900) !important;
	background-color: var(--bg-strong-900) !important;
}

.woocommerce-account .wc-block-components-button:hover::before,
.woocommerce-account .wp-element-button:hover::before {
	transform: translateY(0) !important;
}

/* Testo dentro il bottone block */
.woocommerce-account .wc-block-components-button__text {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	color: inherit !important;
	position: relative !important;
	z-index: 1 !important;
}

/* Bottone coupon: larghezza auto, copre anche stato disabled e classe contained */
.woocommerce-account .wc-block-components-totals-coupon__button,
.woocommerce-account .wc-block-components-totals-coupon__button.contained,
.woocommerce-account .wc-block-components-totals-coupon__button[disabled] {
	white-space: nowrap !important;
	background-color: var(--bg-strong-900) !important;
	color: var(--text-white-0) !important;
	border: 1px solid var(--stroke-strong-900) !important;
	opacity: 1 !important;
}

/* Bottone checkout: larghezza piena */
.woocommerce-account .wc-block-cart__submit-button {
	width: 100% !important;
}

/* ============================================================
   RESPONSIVE — TABLET 1024px
   ============================================================ */

@media (max-width: 1024px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 280px;
		min-width: 280px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 32px 32px 48px;
	}

}

/* ============================================================
   RESPONSIVE — MOBILE 768px
   ============================================================ */

@media (max-width: 768px) {
	.woocommerce-account .s4w-myaccount-wrap {
		flex-direction: column;
		padding-top: 0 !important;
	}

	.woocommerce-account .s4w-myaccount-wrap > .woocommerce {
		flex-direction: column;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 100%;
		min-width: 0;
		border-right: none;
		border-bottom: 1px solid var(--stroke-soft-200);
		position: static;
		top: auto;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		padding: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		padding: 14px 24px;
		font-size: var(--paragraph-medium);
	}

	.woocommerce-account .s4w-myaccount-wrap,
	.woocommerce-account .s4w-myaccount-login-wrap {
		padding-top: 32px;
		padding-bottom: 60px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 24px 12px 40px;
	}

	.woocommerce-account .woocommerce-MyAccount-content h2 {
		font-size: var(--title-medium);
		margin-bottom: 24px;
	}

	/* Form 2 colonne → 1 colonna */
	.woocommerce-account .woocommerce-form-row--first,
	.woocommerce-account .form-row-first,
	.woocommerce-account .woocommerce-form-row--last,
	.woocommerce-account .form-row-last {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	/* Indirizzi → 1 colonna */
	.woocommerce-account .u-columns.addresses {
		grid-template-columns: 1fr;
	}

	/* View-order: overview e indirizzi → 1 colonna */
	.woocommerce-account .woocommerce-order-overview {
		flex-direction: column;
		padding: 16px;
	}

	.woocommerce-account .woocommerce-order-overview li {
		padding: 8px 0;
		border-bottom: 1px solid var(--stroke-soft-200);
	}

	.woocommerce-account .woocommerce-order-overview li:last-child {
		border-bottom: none;
	}

	.woocommerce-account .woocommerce-columns--2 {
		grid-template-columns: 1fr;
	}

}

} /* end @layer base */

/* ============================================================
   SELECT2 — fuori dal layer per battere gli stili del plugin
   ============================================================ */

.woocommerce-account .select2-container {
	width: 100% !important;
}

.woocommerce-account .select2-container .select2-selection--single {
	height: 54px !important;
	border: 1px solid var(--stroke-sub-300) !important;
	border-radius: 0 !important;
	background-color: var(--bg-white-0) !important;
	outline: none !important;
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered {
	font-family: var(--font-secondary) !important;
	font-size: var(--paragraph-small) !important;
	font-weight: var(--weight-regular) !important;
	color: var(--text-main-900) !important;
	line-height: 54px !important;
	padding-left: 10px !important;
	padding-right: 32px !important;
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--text-soft-400) !important;
}

.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow {
	height: 52px !important;
	right: 10px !important;
}

.woocommerce-account .select2-container--open .select2-selection--single,
.woocommerce-account .select2-container--focus .select2-selection--single {
	border-color: var(--text-main-900) !important;
}

.woocommerce-account .select2-dropdown {
	border: 1px solid var(--stroke-sub-300) !important;
	border-radius: 0 !important;
	font-family: var(--font-secondary) !important;
	font-size: var(--paragraph-small) !important;
}

.woocommerce-account .select2-results__option--highlighted {
	background-color: var(--bg-weak-100) !important;
	color: var(--text-main-900) !important;
}

.woocommerce-account .select2-results__option--selected {
	background-color: var(--bg-soft-200) !important;
	color: var(--text-main-900) !important;
}