/* =============================================================================
   PUROTATTO — Il mio account (account.html, 29/10)
   Stesso sistema delle pagine d'acquisto: avorio, hairline, titoli sussurrati in Hatton, UI in Neue Montreal,
   campi a sola linea (.campo del sistema, come la newsletter del footer), bottoni pieni scuri o a contorno;
   niente card, ombre né angoli arrotondati. L'interruttore è l'unico elemento tondo, come i colori della scheda.
   ============================================================================= */

/* Testata: briciole, il titolo al centro (sussurrato), sotto l'indice delle sezioni o la riga per chi non è entrato */
.acc-testa { gap: 20px; }
.acc-testa .titolo { --tr: var(--t-track); font-size: var(--t-hero); line-height: 1.25; outline: 0; }
.acc-testa .titolo:focus-visible { outline: 1px solid currentColor; outline-offset: 8px; }

/* Indice delle sezioni: come le briciole, la sezione aperta in inchiostro senza sottolineatura */
.acc-indice ol { justify-content: center; }
.acc-indice a[aria-current] { color: var(--inchiostro); text-decoration: none; }
.acc-ospite { font-size: 14px; line-height: 1.5; color: var(--bruno); }
.acc-ospite a { color: var(--inchiostro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.acc-ospite a:hover { color: var(--bruno); }

/* Non entrati: due colonne con la hairline in mezzo, i bottoni alla stessa altezza ------------------------ */
.acc-entra {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; margin: 0 auto;
  padding: clamp(8px, 1.4vw, 20px) var(--gutter) clamp(80px, 9vw, 144px);
}
.acc-entra.is-crea { align-items: start; }                  /* aperto il modulo, ognuna alla sua altezza */
.acc-col { display: flex; flex-direction: column; padding: 4px clamp(28px, 5vw, 84px) 0; min-width: 0; }
.acc-col--accedi { padding-left: 0; }
.acc-col--crea { padding-right: 0; border-left: 1px solid var(--linea); }
.acc-col-in { display: flex; flex-direction: column; flex: 1; }
.acc-col-tit { --tr: var(--t-track); font-size: var(--t-sezione); line-height: 1.25; }
.acc-col-testo { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--bruno); max-width: 42ch; }
.acc-form { display: flex; flex-direction: column; flex: 1; margin-top: 30px; }
.acc-form .campo { margin-bottom: 22px; }
.acc-form .campo span:first-child { margin-bottom: 2px; }
.acc-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.acc-link {
  align-self: flex-start; margin: -4px 0 30px; padding: 4px 0; font-size: 13px; color: var(--bruno);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .3s var(--ease);
}
.acc-link:hover { color: var(--inchiostro); }
.acc-invia { margin-top: auto; }                             /* i bottoni delle due colonne in fondo, alla stessa altezza */
.acc-fatto { margin-top: 30px; color: var(--inchiostro); }
[data-acc-recupero] > .acc-link { margin: 26px 0 0; }
.acc-nota { margin: 2px 0 30px; font-size: 12px; line-height: 1.6; color: var(--pietra); }
.acc-nota a { color: var(--bruno); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Cosa dà l'account: tre righe con la hairline */
.acc-vantaggi { margin: 26px 0 34px; border-top: 1px solid var(--linea); }
.acc-vantaggi li { padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: 14px; line-height: 1.5; color: var(--bruno); }
.acc-vantaggi ~ .acc-form { margin-top: 0; }

/* Bottone a contorno, stessa misura del pieno: al passaggio si riempie */
.btn-pieno.acc-contorno { background: transparent; color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--inchiostro); transition: background-color .3s var(--ease), color .3s var(--ease); }
.btn-pieno.acc-contorno:hover { background: var(--inchiostro); color: var(--avorio); }

/* Errori sotto il campo (come la cassa) */
.campo-errore { display: block; margin-top: 7px; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--bruno); }
.campo.is-errore span:first-child { color: var(--inchiostro); }
.campo.is-errore input { border-bottom-width: 2px; padding-bottom: 9px; }

/* Dentro: una sezione alla volta, in una colonna al centro; i preferiti larghi quanto la pagina ------------- */
.acc-sez { max-width: 920px; margin: 0 auto; padding: clamp(8px, 1.4vw, 20px) var(--gutter) clamp(80px, 9vw, 144px); }
.acc-sez--larga { max-width: none; }
.acc-sez-testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--inchiostro);
}
.acc-sez-testa .etichetta { color: var(--pietra); }
.acc-sez-testa h2.etichetta, .acc-sez-testa h3.etichetta { color: var(--inchiostro); }
.acc-sez-testa--dopo { margin-top: clamp(48px, 5vw, 72px); }

.acc-conta { font-variant-numeric: tabular-nums; }
.acc-mod {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pietra); padding: 4px 0;
  border-bottom: 1px solid currentColor; transition: color .3s var(--ease);
}
.acc-mod:hover { color: var(--inchiostro); }
.acc-sez-testa .acc-mod { margin: -6px 0 -3px; }             /* la testata resta alta come le altre */

/* Ordini: testata dell'ordine, i capi con la miniatura, i conti, il reso */
.acc-ordine-testa {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding: 22px 0 18px; border-bottom: 1px solid var(--linea);
}
.acc-ordine-n { font-size: 15px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.acc-ordine-stato { font-size: 11px; color: var(--bruno); }
.acc-voce {
  display: grid; grid-template-columns: clamp(72px, 6.4vw, 92px) minmax(0, 1fr) auto; gap: 0 clamp(18px, 2.4vw, 32px);
  align-items: center; padding: 18px 0; border-bottom: 1px solid var(--linea);
}
.acc-foto { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--carta); }
.acc-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.acc-foto.sabbia > img { inset: auto; left: 10%; top: 8%; width: 80%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.acc-foto:hover > img { transform: scale(1.03); }
.acc-voce-cat { font-size: 11px; color: var(--pietra); }
.acc-voce-nome { margin-top: 8px; font-size: 15px; line-height: 1.3; letter-spacing: .03em; }   /* come il nome nella scheda: Neue Montreal */
.acc-voce-nome a:hover { color: var(--bruno); }
.acc-voce-dett { margin-top: 8px; font-size: 11px; color: var(--bruno); }
.acc-voce-prezzo { font-size: 14px; letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-conti { margin: 6px 0 0; }
.acc-conti > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.acc-conti dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pietra); }
.acc-conti dd { margin: 0; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.acc-conti .acc-totale { border-bottom: 0; padding-top: 18px; }
.acc-conti .acc-totale dt { color: var(--inchiostro); font-size: 12px; }
.acc-conti .acc-totale dd { font-size: 17px; }
.acc-ordine-piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 26px; }
.acc-ordine-dove { font-size: 13px; line-height: 1.55; color: var(--bruno); }
.acc-reso-fatto { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--bruno); }
.btn.btn--ink:disabled { color: var(--pietra); cursor: default; background: none; border-color: var(--linea); }
.btn.btn--ink:disabled::after { display: none; }

/* Preferiti: le tessere vere, staccate di 16 px come in categoria. File di file() in account.js (da quattro, da tre, da cinque).
   Dal 3/11 la foto è sempre 2:3 e nome e prezzo stanno sotto (la tessera in system.css: la proporzione è su .tile-foto); perché le
   tessere restino della stessa misura (Andrea, call 2/11) le file da uno, due e tre sono larghe un quarto, al centro; quella da
   cinque resta piena, un poco più piccola. */
.acc-pref-griglia { --gap: 16px; display: grid; gap: var(--gap); margin-top: clamp(28px, 3vw, 44px); }
.acc-fila { display: flex; justify-content: center; align-items: flex-start; gap: var(--gap); }
.acc-fila > .tile { flex: 1 1 0; min-width: 0; transition: opacity .32s var(--ease), transform .32s var(--ease); }
.acc-fila--1 > .tile, .acc-fila--2 > .tile, .acc-fila--3 > .tile { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); }
.acc-fila > .tile.is-uscita { opacity: 0; transform: scale(.98); }
.acc-vuoto { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: clamp(48px, 6vw, 88px) 0 0; text-align: center; }
.acc-vuoto p { font-size: 15px; line-height: 1.6; color: var(--bruno); }

/* Indirizzi: una riga per indirizzo con la hairline sotto, «Modifica» a destra; il modulo prende il posto della riga */
.acc-indirizzo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: start; padding: 24px 0 28px; border-bottom: 1px solid var(--linea); }
.acc-indirizzo--modulo { display: block; }
.acc-ind-et { color: var(--pietra); font-size: 11px; }
.acc-ind-testo { margin-top: 12px; font-size: 15px; line-height: 1.7; font-style: normal; }
.acc-ind-azioni { display: flex; gap: 24px; }
.acc-aggiungi { margin-top: 34px; }
.acc-modulo-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 8px; }
.acc-modulo-azioni .btn-pieno { width: auto; min-width: 240px; padding: 0 40px; min-height: 50px; }
.acc-modulo { margin-top: 22px; }
.acc-modulo .acc-campi { gap: 0 28px; }
.acc-modulo .campo { margin-bottom: 22px; }
.acc-campo-pieno { grid-column: 1 / -1; }

/* Dati e preferenze: righe etichetta / valore, poi gli interruttori sottili, poi «Esci» */
.acc-righe > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.acc-righe dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pietra); }
.acc-righe dd { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.acc-scelte { border-top: 0; }
.acc-scelta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.acc-scelta-nome { font-size: 15px; line-height: 1.4; }
.acc-scelta-sub { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--pietra); }
.acc-switch {
  position: relative; flex: none; width: 34px; height: 18px; border: 1px solid var(--inchiostro); border-radius: 9px;
  transition: background-color .3s var(--ease);
}
.acc-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--inchiostro);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.acc-switch[aria-checked="true"] { background: var(--inchiostro); }
.acc-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--avorio); }
.acc-switch:focus-visible { outline-offset: 5px; }
.acc-esci { margin-top: clamp(40px, 4.4vw, 60px); }

/* Telefono --------------------------------------------------------------------------------------------- */
@media (max-width: 759px) {
  .acc-testa { gap: 16px; }
  .acc-indice ol { gap: 4px 18px; }
  .acc-indice li + li::before { display: none; }           /* sul telefono niente barre: a capo restano pulite */

  .acc-entra { grid-template-columns: 1fr; padding-top: 18px; }
  .acc-col { padding: 0; }
  .acc-col--crea { border-left: 0; border-top: 1px solid var(--linea); margin-top: 48px; padding-top: 44px; }
  .acc-campi { grid-template-columns: 1fr; }

  .acc-voce { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 0 16px; align-items: start; }
  .acc-voce-prezzo { padding-top: 22px; }
  .acc-ordine-piede { flex-direction: column; align-items: stretch; }
  .acc-ordine-piede .btn { justify-content: center; }

  .acc-sez--larga { padding-left: 8px; padding-right: 8px; }
  .acc-sez--larga .acc-sez-testa { margin: 0 calc(var(--gutter) - 8px); }
  .acc-pref-griglia { --gap: 8px; }
  .acc-fila--2 > .tile { flex: 1 1 0; }
  .acc-fila--1 > .tile { flex: 1 1 0; }                             /* dispari: il primo a tutta larghezza, 2:3, come la grande in categoria */
  .acc-fila--3 { flex-wrap: wrap; }                                 /* da tre: due e uno al centro, larghi metà */
  .acc-fila--3 > .tile { flex: 0 0 calc((100% - var(--gap)) / 2); }
  .acc-vuoto { padding-left: var(--gutter); padding-right: var(--gutter); }

  .acc-indirizzo { grid-template-columns: 1fr; }
  .acc-modulo-azioni .btn-pieno { width: 100%; min-width: 0; }
  .acc-righe > div { grid-template-columns: 1fr; gap: 4px; }
  .acc-esci { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-fila > .tile, .acc-switch, .acc-switch::after { transition: none; }
}