/* ============================================================
   Guscio condiviso delle pagine di negozio: account, carrello, cassa.
   Stava dentro account.css, dove una sezione si intitolava già
   «SISTEMA DI FORM (riusabile dal checkout)»: era previsto.
   Duplicarlo avrebbe fatto divergere le due copie.
   ============================================================ */

/* ---------- Guscio di pagina ----------
   La pagina account contiene uno shortcode dentro un blocco, quindi per page.php
   è una "pagina a blocchi" e non riceve il .container. Lo spazio sotto l'header
   fisso va messo qui, sul <main>, e non sulla fascia: i notice di WooCommerce
   vengono stampati PRIMA di qualsiasi nostro markup e finirebbero sotto l'header. */
.woocommerce-account .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main { padding-top: var(--header-h); background: var(--cream); }

/* Stessa larghezza e stesso padding di .container (main.css): niente numeri duplicati,
   il notice deve allinearsi al bordo del contenuto sotto, non a una misura propria. */
.woocommerce-account .woocommerce-notices-wrapper:not(:empty),
.woocommerce-cart .woocommerce-notices-wrapper:not(:empty),
.woocommerce-checkout .woocommerce-notices-wrapper:not(:empty) {
  width: 100%;
  max-width: var(--container);
  margin: 2rem auto 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Fascia ---------- */
.page-hero,
.account-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.page-hero__title,
.account-hero__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "SOFT" 100;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 0.75rem;
}
.page-hero__title em,
.account-hero__title em { font-style: italic; color: var(--bordeaux); }

/* ---------- SISTEMA DI FORM (riusabile dal checkout) ----------
   DOVE VIVONO LE DUE CLASSI, perché non è dove sembra:
     · `woocommerce-page` sta sul <body>, quindi raggiunge TUTTA la pagina,
       footer compreso;
     · `woocommerce` NON sta sul <body>. Sta su un <div> che avvolge il solo
       contenuto di negozio, dentro <main class="site-main">.
   Il modulo newsletter in fondo prendeva fondo bianco, bordo e testo scuro, e
   il suo placeholder — panna al 40%, pensato per il fondo scuro del footer —
   spariva sul bianco. Solo su carrello, cassa e account: il footer cambiava
   aspetto a seconda della pagina.
   La colpa era delle sole varianti `.woocommerce-page`, che partono dal body.
   Sono ancorate a `.site-main`, il contenitore che header.php apre e
   footer.php chiude: le tiene dentro il contenuto e fuori dalla cornice del
   sito. Le varianti `.woocommerce` restano nude — quel <div> è già il
   contenuto, e aggiungere `.site-main` alla loro destra le renderebbe inerti,
   perché chiederebbe un annidamento rovesciato.
   Specificità: le varianti col body valgono ora (0,3,2). Le regole che devono
   batterle (contatore quantità, codice sconto in shop.css) sono alzate di
   conseguenza. */
.woocommerce form .form-row,
.woocommerce-page .site-main form .form-row,
.woocommerce form .woocommerce-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}

/* Lo stesso clearfix del core che sfascia la testata degli indirizzi
   (vedi account.css) sta anche su OGNI riga di modulo:
     .woocommerce form .form-row::before, …::after { content:" "; display:table }
   Qui sopra le righe le abbiamo rese flex, quindi quei due pseudo elementi
   diventano celle vere: ogni campo si portava dietro due righe fantasma, alte
   quanto una riga di testo più i 0,45rem di distanza. Moltiplicato per i
   dodici campi della cassa, è tutta la spaziatura verticale dei moduli.
   Una sola coppia di selettori basta per entrambe le varianti del core, che
   valgono (0,2,2): partendo dal body e passando per .site-main si arriva a
   (0,3,2), sopra a tutte e due. */
.woocommerce-page .site-main form .form-row::before,
.woocommerce-page .site-main form .form-row::after { content: none; }
.woocommerce form label,
.woocommerce-page .site-main form label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
  font-weight: 500;
}
.woocommerce form label .required,
.woocommerce-page .site-main form label .required { color: var(--bordeaux); text-decoration: none; border: 0; }

.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form input[type="number"],
.woocommerce form textarea,
.woocommerce form select,
.woocommerce-page .site-main form input[type="text"],
.woocommerce-page .site-main form input[type="email"],
.woocommerce-page .site-main form input[type="tel"],
.woocommerce-page .site-main form input[type="password"],
.woocommerce-page .site-main form textarea,
.woocommerce-page .site-main form select {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.3s ease;
}
.woocommerce form input:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus,
.woocommerce-page .site-main form input:focus,
.woocommerce-page .site-main form textarea:focus,
.woocommerce-page .site-main form select:focus {
  border-color: var(--bordeaux);
  /* Equivalente decimale esatto di --bordeaux (#6B1F2A): bordo e alone devono
     essere la stessa tinta. Stessa convenzione di recipes.css con --ink e --cream. */
  outline: 2px solid rgba(107, 31, 42, 0.15);
  outline-offset: 1px;
}
.woocommerce form input[type="checkbox"] { width: auto; accent-color: var(--bordeaux); }

/* «Ricordami» restava in maiuscoletto spaziato come un'etichetta di campo.
   La regola c'era ma partiva da `.woocommerce`, (0,2,1), e perdeva contro la
   variante col body `.woocommerce-page .site-main form label`, (0,3,2). Qui
   si aggiunge la stessa variante, così vale in entrambi i modi. */
.woocommerce form .woocommerce-form__label-for-checkbox,
.woocommerce-page .site-main form .woocommerce-form__label-for-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  display: flex;
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- Via il riquadro dai <fieldset> ----------
   WooCommerce raggruppa il cambio password dentro un <fieldset> con <legend>:
   il browser ne disegna il bordo con la tacca attorno alla dicitura, un
   riquadro di sistema che qui non c'entra niente. Il raggruppamento resta —
   serve a chi naviga con la tastiera o con un lettore di schermo — ma perde la
   cornice, e la dicitura diventa un titolo di sezione come gli altri.
   Nessun template copiato: vale per ogni <fieldset> dell'area negozio, oggi e
   in futuro. Nel tema non ne esiste nessuno di nostro, quindi qui la regola
   copre tutti quelli che ci sono.
   `display: block` sulla <legend> serve perché di suo è un elemento con resa
   speciale, ancorato al bordo del riquadro. */
.woocommerce fieldset,
.woocommerce-page .site-main fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  min-width: 0;
}
.woocommerce fieldset > legend,
.woocommerce-page .site-main fieldset > legend {
  display: block;
  width: 100%;
  float: none;
  padding: 0;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink);
}

/* Bottoni di WooCommerce → stessa lingua dei .btn del tema.
   Le tre varianti .alt (a/button/input.button.alt) sono aggiunte all'elenco
   apposta: il core impone ai pulsanti PRIMARI un colore proprio via
     .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
     a.button.alt, … button.button.alt, … input.button.alt
     { background-color: #7f54b3; color: #fff }
   :where() non pesa nella specificità, quindi la regola reale vale (0,3,1):
   3 classi (.woocommerce, .button, .alt) + 1 elemento. Il selettore qui sopra,
   senza .alt, vale solo (0,2,1) e perde sempre — risultato: "Procedi con
   l'ordine" sul carrello e "Effettua ordine" sulla cassa (entrambi
   button/a.button.alt) restavano viola WooCommerce mentre gli altri bottoni
   erano bordeaux. Aggiungendo .alt all'elenco si arriva alla stessa (0,3,1):
   a parità decide l'ordine di caricamento, e commerce.css carica dopo i fogli
   del core. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--bordeaux);
  color: var(--cream);
  border: 1px solid var(--bordeaux);
  border-radius: 0;
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: transparent; color: var(--bordeaux); }

.woocommerce .woocommerce-LostPassword { margin-top: 0.5rem; }
.woocommerce .woocommerce-LostPassword a {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.woocommerce .woocommerce-LostPassword a:hover { color: var(--bordeaux); }

/* ---------- Messaggi (notice): i tre tipi, distinti dal colore del filetto ----------
   Il core li veste per conto suo, in woocommerce.css:
     .woocommerce-error,.woocommerce-info,.woocommerce-message
       { padding:1em 2em 1em 3.5em; background-color:#f6f5f8; color:#515151;
         border-top:3px solid #720eec; position:relative }
     .woocommerce-info { border-top-color:#1e85be }
     .woocommerce-…::before { font-family:WooCommerce; content:"\e028";
         position:absolute; top:1em; left:1.5em; color:#1e85be }
   Sono tutte a una sola classe, quindi le nostre le battono per ordine di
   caricamento (commerce.css entra dopo woocommerce.css) — ma SOLO quelle che
   dichiariamo davvero. Fin qui non dichiaravamo né il bordo superiore né lo
   pseudo elemento, e restavano scoperti:
     · il filetto in cima, azzurro sugli «info» e viola sugli altri;
     · l'icona, un glifo del font «WooCommerce» che senza quel font si vede
       come un quadratino vuoto.
   Erano la riga azzurra e il quadratino sul messaggio del carrello vuoto.
   Qui si azzerano entrambi, e il tipo lo dice solo il colore del filetto a
   sinistra. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  /* `border: 0` prima della longhand: azzera i tre lati che il core disegna e
     lascia in piedi solo il nostro. */
  border: 0;
  border-left: 3px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}
.woocommerce-message { border-left-color: var(--gold); }
.woocommerce-info    { border-left-color: var(--ink-faded); }
.woocommerce-error   { border-left-color: var(--bordeaux); }
.woocommerce-error li { margin: 0; }

/* Via l'icona e il clearfix storico: `content: none` toglie lo pseudo elemento,
   non si limita a svuotarlo. Stessa specificità del core — una classe più uno
   pseudo elemento — quindi decide l'ordine di caricamento. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after { content: none; }

/* Alcuni messaggi del core portano dentro un pulsante e lo mandano a destra in
   float. Senza il clearfix qui sopra uscirebbe dal riquadro; e comunque un
   pulsante in fondo alla riga di testo si legge meglio in flusso. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { float: none; margin-top: 0.75rem; }

/* woocommerce.css (core WC) applica, fuori da ogni scoping nostro:
     .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register
     { border:1px solid #cfc8d8; padding:20px; margin:2em 0; text-align:left; border-radius:5px }
   #cfc8d8 è un grigio-lilla freddo, fuori palette: i form di login/registrazione (classi
   "login"/"register" impostate da WooCommerce stesso sui <form>) prendono quel bordo e
   quell'angolo arrotondato mentre il resto del tema usa var(--line) e angoli vivi. Lo stesso
   markup (classi "login"/"checkout_coupon") lo emette anche la cassa, via
   woocommerce_checkout_login_form() e checkout/form-coupon.php dentro .checkout-intro:
   stessa regola, quindi si estende qui invece di duplicarla in shop.css.
   Annulliamo solo queste regole, scoperte leggendo woocommerce/assets/css/woocommerce.css. */
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login {
  border-radius: 0;
  border-color: var(--line);
}

/* Accedi / Registrati: via la cornice. WooCommerce incornicia i due moduli
   (bordo, padding, margine) perché nei temi di serie galleggiano nel nulla;
   qui stanno già dentro due colonne con titolo e testo di presentazione, e la
   cornice diventava un secondo riquadro attorno alla stessa cosa. Il resto
   della pagina separa con lo spazio, non con i filetti.
   Il core vale (0,2,1) — .woocommerce, .login, form — quindi qui bastano tre
   classi più l'elemento. */
.woocommerce-account .account-login form.login,
.woocommerce-account .account-login form.register {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* ---------- select2 (paese, provincia) ----------
   WooCommerce carica select2 col suo foglio di serie: controllo alto 28px,
   angoli arrotondati, bordo grigio, e nella tendina la voce sotto il puntatore
   evidenziata in blu amministrazione — un colore che non appartiene a questo
   sito. Qui il controllo prende lo stesso vestito degli altri campi e
   l'evidenziazione passa al bordeaux.
   Niente prefisso `.woocommerce`: la tendina viene agganciata al <body>, fuori
   dal contenitore del negozio. Le regole del core valgono (0,2,0) e (0,3,0);
   si ripetono con la stessa forma e decide l'ordine di caricamento, perché
   select2.css entra prima di commerce.css. */
.select2-container--default .select2-selection--single {
  height: auto;
  margin: 0;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  padding-right: 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 0.75rem;
  height: 100%;
}
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--bordeaux);
}

.select2-dropdown {
  background: #ffffff;
  border: 1px solid var(--bordeaux);
  border-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}
.select2-container--default .select2-results__option {
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
/* La voce già scelta prima di quella sotto il puntatore: a parità di
   specificità decide l'ordine, e una voce può essere entrambe le cose. */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--cream-deep);
  color: var(--ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--bordeaux);
  color: var(--cream);
}