/* ============================================================
   Area account. Il sistema di form condiviso (campi, label, bottoni,
   notice — riusato anche da carrello e cassa) sta in commerce.css.
   Qui restano solo le classi .account-* di questa sezione.
   ============================================================ */

/* ---------- Impaginazione dell'area loggata ---------- */
.account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
@media (min-width: 980px) {
  .account-layout { grid-template-columns: 220px 1fr; }
}

/* woocommerce-layout.css (core WC) impone GLOBALMENTE, fuori da ogni media query:
     .woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}
     .woocommerce-account .woocommerce-MyAccount-content{float:right;width:68%}
   I float sono inerti sui figli di un grid item, i width no: senza annullarli i due
   elementi restano stretti alle loro percentuali (misurato: nav 66px / content 617px a
   1422px, con 291px di spazio morto) invece di riempire le colonne 220px/1fr del grid.
   Sotto i 768px woocommerce-smallscreen.css li riporta comunque a width:100%; qui li
   neutralizziamo SEMPRE, perché è il grid a governare le colonne a ogni larghezza.
   Specificità (0,3,0) > (0,2,0) delle regole core: vince a prescindere dall'ordine di
   caricamento dei fogli di stile. */
.woocommerce-account .account-layout > .woocommerce-MyAccount-navigation,
.woocommerce-account .account-layout > .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

/* Navigazione: markup di WooCommerce, stile nostro. Nessun template copiato. */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}
@media (min-width: 980px) {
  .woocommerce-MyAccount-navigation ul { flex-direction: column; gap: 0; }
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  /* Il rientro laterale sta su TUTTE le voci, non solo sulla corrente: così
     accendere il filetto non sposta il testo di un pixel. Stesso motivo per
     l'ombra interna trasparente qui sotto. */
  padding: 0.9rem;
  border-bottom: 1px solid transparent;
  box-shadow: inset 3px 0 0 transparent;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 980px) {
  .woocommerce-MyAccount-navigation li a { border-bottom: 1px solid var(--line); }
  .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
}
.woocommerce-MyAccount-navigation li a:hover { color: var(--bordeaux); background: var(--paper); }

/* Dove ci si trova: il solo cambio di colore del testo, a questo corpo e con
   questa spaziatura, si notava appena. Ora la voce corrente ha anche il fondo
   chiaro e un filetto bordeaux a sinistra. */
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--bordeaux);
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--bordeaux);
}

/* ---------- Indirizzi ----------
   La pagina non aveva stile proprio: restava quello di WooCommerce, che
   impagina le due schede a float —
     .woocommerce .col2-set .col-1 { float:left; width:48% }
   — e il contenitore `.woocommerce-Addresses` porta anche `col2-set`, quindi
   la regola lo prende in pieno. Da lì l'impaginazione sfasata, con il link di
   modifica sospeso sopra il testo dell'indirizzo.
   Il core vale (0,3,0) e (0,2,1) sui pseudo elementi del clearfix: qui si sale
   di una classe, così vince a prescindere dall'ordine dei fogli. */
.woocommerce-account .account-layout .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  width: auto;
}
@media (min-width: 720px) {
  .woocommerce-account .account-layout .woocommerce-Addresses { grid-template-columns: 1fr 1fr; }
}
.woocommerce-account .account-layout .woocommerce-Addresses > .col-1,
.woocommerce-account .account-layout .woocommerce-Addresses > .col-2 {
  float: none;
  width: auto;
}
/* Il clearfix del core è fatto di pseudo elementi, che per una griglia sono
   celle a tutti gli effetti: lasciati accesi produrrebbero due righe vuote.
   Stesso inciampo già visto sul `col2-set` della cassa. */
.woocommerce-account .account-layout .woocommerce-Addresses::before,
.woocommerce-account .account-layout .woocommerce-Addresses::after { display: none; }

.woocommerce-account .woocommerce-Address {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Titolo sopra, comando di modifica sotto, entrambi a sinistra. Incolonnati e
   non affiancati di proposito: «Aggiungi Indirizzo di fatturazione» in
   maiuscoletto spaziato è più largo del titolo, quindi su una riga sola andrebbe
   a capo a seconda della larghezza della scheda, e il risultato cambierebbe da
   uno schermo all'altro. Così è sempre lo stesso. */
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

/* IL punto della faccenda. Il core aggiunge alla testata il vecchio clearfix
   per i galleggiamenti:
     .woocommerce-account .addresses .title::before,
     .woocommerce-account .addresses .title::after { content:" "; display:table }
   In un contenitore flex quei due pseudo elementi NON sono invisibili: entrano
   nell'albero dei box come figli veri e diventano celle. La testata aveva
   quattro celle invece di due — ::before, titolo, link, ::after — e con
   `space-between` la prima riga spingeva ::before a sinistra e il titolo a
   destra. Da lì l'allineamento a destra.
   Il core vale (0,3,1); qui si sale a (0,4,1) e vince a prescindere
   dall'ordine dei fogli. Terza volta che questo clearfix inciampa in un
   layout moderno: già visto sul `col2-set` della cassa e sul contenitore
   degli indirizzi qui sopra. */
.woocommerce-account .account-layout .woocommerce-Address .woocommerce-Address-title::before,
.woocommerce-account .account-layout .woocommerce-Address .woocommerce-Address-title::after {
  content: none;
  display: none;
}

/* I galleggiamenti del core sui due figli — `h3 { float:left }` (0,3,1) e
   `.edit { float:right }` (0,4,0) — su celle flex sono già inerti, ma le
   regole nostre stavano sotto per specificità: annullarli davvero costa una
   dichiarazione e toglie una trappola a chi un domani cambiasse il display. */
.woocommerce-account .account-layout .woocommerce-Address .woocommerce-Address-title h2,
.woocommerce-account .account-layout .woocommerce-Address .woocommerce-Address-title h3 {
  float: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.woocommerce-account .account-layout .woocommerce-Address .woocommerce-Address-title a.edit {
  float: none;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordeaux);
  border-bottom: 1px solid transparent;
}
.woocommerce-account .account-layout .woocommerce-Address .woocommerce-Address-title a.edit:hover {
  border-bottom-color: var(--bordeaux);
}

/* Il browser rende <address> in corsivo: qui è un indirizzo postale, non una
   citazione. */
.woocommerce-account .woocommerce-Address address {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Il testo di servizio in cima alle pagine dell'area (indirizzi, ordini) stava
   appiccicato al contenuto che introduce. */
.woocommerce-account .woocommerce-MyAccount-content > p {
  font-family: var(--font-body);
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

/* ---------- Accedi / Registrati ---------- */
.account-login {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
@media (min-width: 980px) {
  .account-login { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 5rem); }
  /* Se un domani la registrazione venisse disattivata, WooCommerce rende la sola
     colonna Accedi: senza questa regola resterebbe larga metà pagina, con l'altra
     metà vuota. Il max-width evita l'estremo opposto, un form largo 1200px. */
  .account-login__col:only-child { grid-column: 1 / -1; max-width: 32rem; }
}
.account-login__col { min-width: 0; }
.account-login__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "SOFT" 100;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bordeaux);
  margin-bottom: 0.5rem;
}
.account-login__lead {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}
/* Nessun filetto fra le due colonne: separa lo spazio della griglia, che a
   questa larghezza vale già 3–5rem. Il filetto verticale, sommato alla
   cornice che WooCommerce mette attorno ai due moduli (tolta in commerce.css),
   faceva tre linee per dire una cosa sola. */

/* ---------- Card ordine ---------- */
.account-orders { display: flex; flex-direction: column; gap: 1rem; }
.account-order {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bordeaux);
  padding: 1.25rem 1.5rem;
}
@media (min-width: 720px) {
  .account-order { grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; }
}
.account-order__num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
.account-order__meta {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-top: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.account-order__meta .dot { opacity: 0.5; }
.account-order__status { color: var(--bordeaux); }
.account-order__total {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--bordeaux);
}
.account-order__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Riepilogo ---------- */
.account-summary__label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
  display: block;
  margin-bottom: 1rem;
}
.account-summary__empty {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.account-summary__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.account-summary__links a {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.account-summary__links a:hover { color: var(--bordeaux); }

/* ---------- Tabelle residue (dettaglio ordine, indirizzi) ---------- */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.woocommerce table.shop_table th {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faded);
  font-weight: 500;
}
.woocommerce .woocommerce-Address { margin-bottom: 2rem; }
.woocommerce .woocommerce-Address-title h2,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "SOFT" 100;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--bordeaux);
  margin-bottom: 1rem;
}
.woocommerce address {
  font-style: normal;
  font-family: var(--font-body);
  line-height: 1.7;
  color: var(--ink-soft);
}