/* =========================================================
   LORENZ MARINE — WooCommerce: My Account
   Scope: body.woocommerce-account (zero leak fuori scope).
   Token source of truth: child theme style.css (LOCKED).
   Anti-slop n.11: solo --brand come accent non-neutral.
   ========================================================= */

/* ---------- Page shell ---------- */

body.woocommerce-account {
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
}

body.woocommerce-account .woocommerce {
  max-width: var(--container-max, 1320px);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(20px, 4vw, 40px));
  padding-block: clamp(32px, 5vw, 72px);
}

/* Disattiva il messaggio "Hello, ..." default WC quando vuoto */
body.woocommerce-account .woocommerce-MyAccount-content > p:empty {
  display: none;
}

/* ============================================================
   1. HEADER COMPATTO  (banda bassa, non un hero cinematografico)
   Struttura: [eyebrow + greeting-as-title]  ——  [pill B2B]
   ============================================================ */

body.woocommerce-account .lm-account-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-block: clamp(12px, 1.6vw, 20px) clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--border-default);
}

body.woocommerce-account .lm-account-hero__inner {
  display: contents; /* lascia che text + pill siano figli diretti del flex header */
}

body.woocommerce-account .lm-account-hero__text {
  min-width: 0;
}

body.woocommerce-account .lm-account-hero__eyebrow {
  margin: 0 0 var(--space-1, 4px);
  font-family: var(--font-display);
  font-size: var(--fs-body-xs, 0.8125rem);
  font-weight: var(--fw-body-medium, 500);
  letter-spacing: var(--tracking-eyebrow, 0.16em);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Greeting reso come titolo compatto — scala heading, non display.
   Niente Fraunces gigante: è una dashboard funzionale. */
body.woocommerce-account .lm-account-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--fw-display-bold, 700);
  font-size: var(--fs-heading-lg, clamp(1.375rem, 2vw, 1.875rem));
  line-height: var(--lh-heading, 1.15);
  letter-spacing: var(--tracking-heading, -0.02em);
  color: var(--fg-strong);
}

/* Pill "Prezzi B2B attivi" — compatta, allineata a destra dell'header */
body.woocommerce-account .lm-account-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: var(--bg-surface-cream);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-display);
  font-size: var(--fs-body-xs, 0.8125rem);
  font-weight: var(--fw-body-medium, 500);
  color: var(--fg-strong);
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 560px) {
  body.woocommerce-account .lm-account-hero {
    align-items: flex-start;
  }
  body.woocommerce-account .lm-account-hero__pill {
    order: 2;
  }
}

body.woocommerce-account .lm-account-hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(166, 29, 29, 0.35);
  animation: lm-account-dot 2.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
}

@keyframes lm-account-dot {
  0%   { box-shadow: 0 0 0 0 rgba(166, 29, 29, 0.35); }
  70%  { box-shadow: 0 0 0 6px rgba(166, 29, 29, 0); }
  100% { box-shadow: 0 0 0 0 rgba(166, 29, 29, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-account .lm-account-hero__dot { animation: none; }
}

/* ============================================================
   1-bis. RICERCA PRODOTTI — banda sotto l'hero, su tutti gli endpoint

   Le classi `.lm-cat__search*` della pagina catalogo NON sono riusabili qui:
   catalogo.css è enqueued solo su page-html.php (functions.php). Il pattern è
   lo stesso, il markup è indipendente.
   ============================================================ */

body.woocommerce-account .lm-account-search {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin: 0 0 clamp(24px, 3vw, 40px);
}

/* Wrapper dell'input: regge l'icona in posizione assoluta senza che il
   `position: relative` finisca sul form (che è un grid item a piena riga). */
body.woocommerce-account .lm-account-search__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

body.woocommerce-account .lm-account-search__icon {
  position: absolute;
  left: var(--space-4, 16px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-muted);
  pointer-events: none;
  z-index: var(--z-base, 1);
}

body.woocommerce-account .lm-account-search__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4, 16px) 0 calc(var(--space-4, 16px) + 18px + var(--space-2, 8px));
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 4px);
  font-family: var(--font-body);
  font-size: var(--fs-body-md, 1rem);
  line-height: normal;
  color: var(--fg-default);
  transition: border-color var(--duration-fast, 160ms) var(--ease-snap),
              box-shadow var(--duration-fast, 160ms) var(--ease-snap);
}

/* La X nativa di type=search (WebKit) rompe padding e allineamento —
   stesso fix già applicato in assets/css/pages/catalogo.css. */
body.woocommerce-account .lm-account-search__input::-webkit-search-decoration,
body.woocommerce-account .lm-account-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

body.woocommerce-account .lm-account-search__input::placeholder {
  color: var(--fg-subtle);
  opacity: 1;
}

body.woocommerce-account .lm-account-search__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(166, 29, 29, 0.12);
}

body.woocommerce-account .lm-account-search__field:focus-within .lm-account-search__icon {
  color: var(--brand);
}

/* Il resto (colori, tipografia, hover) arriva da .button — sezione 8. */
body.woocommerce-account .lm-account-search__submit {
  flex: 0 0 auto;
  height: 48px;
}

@media (max-width: 560px) {
  body.woocommerce-account .lm-account-search {
    flex-wrap: wrap;
  }
  body.woocommerce-account .lm-account-search__field,
  body.woocommerce-account .lm-account-search__submit {
    flex: 1 1 100%;
  }
}

/* ============================================================
   2. LAYOUT GRID: sidebar 280px + content

   WooCommerce non emette nessun contenitore attorno a nav + content: il
   template core `myaccount/my-account.php` stampa la nav e poi
   `.woocommerce-MyAccount-content` direttamente dentro `.woocommerce`.
   La vecchia griglia era appesa a `.woocommerce-MyAccount`, un elemento che
   non esiste: selettore morto, e il layout che si vedeva era in realtà
   quello a float di woocommerce-layout.css (nav 30% / content 68%).
   ============================================================ */

/* `:has()` limita la griglia alle pagine che hanno davvero la sidebar.
   Il login non ha nav: lì `.woocommerce` resta a flusso normale. */
body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* Hero, ricerca e notices stanno sopra le due colonne, a piena larghezza. */
body.woocommerce-account .lm-account-hero,
body.woocommerce-account .lm-account-search,
body.woocommerce-account .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

/* Clearfix core (`.woocommerce-account .woocommerce::after` in woocommerce.css):
   dentro una griglia diventerebbe un grid item fantasma. Con i float
   neutralizzati qui sotto non serve più a nulla. */
body.woocommerce-account .woocommerce::after {
  content: none;
}

/* I float core vanno tolti a OGNI larghezza: woocommerce-smallscreen.css li
   smonta solo sotto i 768px, mentre la nav orizzontale del tema parte a 960px.
   Nella finestra 768-960px la sidebar restava una striscia larga il 30%. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

@media (max-width: 960px) {
  body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6, 32px);
  }
}

/* ============================================================
   3. SIDEBAR NAVIGATION
   ============================================================ */

body.woocommerce-account .woocommerce-MyAccount-navigation {
  position: sticky;
  top: calc(var(--header-h, 76px) + var(--space-5, 24px));
  background: var(--bg-surface-cream);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-3, 12px);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 960px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation {
    position: relative;
    top: auto;
    padding: var(--space-2, 8px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md, 4px);
  }
  /* Scrollbar fine */
  body.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar { height: 4px; }
  body.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
  }
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 960px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2, 8px);
  }
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
}

@media (max-width: 960px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto;
  }
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--radius-md, 4px);
  color: var(--fg-default);
  font-family: var(--font-display);
  font-size: var(--fs-body-sm, 0.9375rem);
  font-weight: var(--fw-body-medium, 500);
  letter-spacing: -0.005em;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color var(--duration-fast, 160ms) var(--ease-snap),
              color var(--duration-fast, 160ms) var(--ease-snap),
              border-color var(--duration-fast, 160ms) var(--ease-snap);
}

@media (max-width: 960px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation a {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-pill, 999px);
    background: transparent;
    white-space: nowrap;
  }
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
  background: var(--color-white-50);
  color: var(--fg-strong);
  outline: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
  box-shadow: 0 0 0 2px var(--brand);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a {
  background: var(--color-white-50);
  border-left-color: var(--brand);
  color: var(--fg-strong);
  font-weight: var(--fw-body-bold, 600);
}

@media (max-width: 960px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a {
    border-left: none;
    border-bottom-color: var(--brand);
    background: var(--color-white-50);
    border-radius: var(--radius-pill, 999px);
  }
}

/* Il menu è diviso in tre gruppi: [Panoramica, Catalogo] — [ordini, download,
   indirizzi, dati] — [Assistenza, Esci]. Il divisore va sulla PRIMA voce di
   ogni gruppo, così resta corretto anche se WC nasconde "Download" o se la
   voce Catalogo non c'è (utente non B2B). */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--lm-assistenza {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-default);
}

/* Voce logout: rosso brand soft, attaccata ad Assistenza (stesso gruppo). */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 960px) {
  /* In orizzontale i divisori diventano verticali. */
  body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders,
  body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--lm-assistenza {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-left: var(--space-3, 12px);
    padding-left: var(--space-3, 12px);
    border-left: 1px solid var(--border-default);
  }
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--brand);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: var(--brand-hover);
}

/* Icona SVG inline davanti al label */
body.woocommerce-account .lm-account-nav__icon {
  flex: 0 0 auto;
  color: var(--fg-muted);
  transition: color var(--duration-fast, 160ms) var(--ease-snap);
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover .lm-account-nav__icon {
  color: var(--fg-strong);
}

/* Sulla voce attiva l'icona prende il brand: insieme alla barra a sinistra
   dà un secondo segnale di posizione, utile perché il grassetto da solo si
   legge male su liste corte. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a .lm-account-nav__icon {
  color: var(--brand);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a .lm-account-nav__icon {
  color: var(--brand);
}

body.woocommerce-account .lm-account-nav__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   4. CONTENT AREA — generale
   ============================================================ */

body.woocommerce-account .woocommerce-MyAccount-content {
  min-width: 0; /* fix overflow grid */
  padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > h2,
body.woocommerce-account .woocommerce-MyAccount-content > h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold, 700);
  font-size: var(--fs-heading-lg, clamp(1.5rem, 2vw, 1.875rem));
  letter-spacing: var(--tracking-heading, -0.02em);
  line-height: var(--lh-heading, 1.15);
  color: var(--fg-strong);
  margin: 0 0 var(--space-5, 24px);
}

body.woocommerce-account .woocommerce-MyAccount-content > p {
  margin: 0 0 var(--space-5, 24px);
  color: var(--fg-default);
  font-size: var(--fs-body-md, 1rem);
  line-height: var(--lh-body, 1.6);
}

body.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--duration-fast, 160ms) var(--ease-snap),
              border-color var(--duration-fast, 160ms) var(--ease-snap);
}

body.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: var(--brand-hover);
  border-bottom-color: transparent;
}

/* ============================================================
   5. QUICK ACTIONS — Dashboard
   ============================================================ */

body.woocommerce-account .lm-account-quick {
  margin: 0 0 var(--space-7, 48px);
}

body.woocommerce-account .lm-account-quick__title {
  margin: 0 0 var(--space-4, 16px);
  font-family: var(--font-display);
  font-size: var(--fs-heading-md, clamp(1.25rem, 1.6vw, 1.5rem));
  font-weight: var(--fw-display-bold, 700);
  letter-spacing: var(--tracking-heading, -0.02em);
  color: var(--fg-strong);
}

body.woocommerce-account .lm-account-quick__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4, 16px);
}

@media (max-width: 768px) {
  body.woocommerce-account .lm-account-quick__grid {
    grid-template-columns: 1fr;
  }
}

body.woocommerce-account .lm-account-quick__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-5, 24px);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 8px);
  color: var(--fg-default);
  text-decoration: none;
  border-bottom: 1px solid var(--border-default); /* override link rule */
  transition: transform var(--duration-fast, 160ms) var(--ease-snap),
              box-shadow var(--duration-fast, 160ms) var(--ease-snap),
              border-color var(--duration-fast, 160ms) var(--ease-snap),
              background-color var(--duration-fast, 160ms) var(--ease-snap);
}

body.woocommerce-account .lm-account-quick__card:hover,
body.woocommerce-account .lm-account-quick__card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  outline: none;
}

body.woocommerce-account .lm-account-quick__card:focus-visible {
  box-shadow: 0 0 0 2px var(--brand), var(--shadow-md);
}

body.woocommerce-account .lm-account-quick__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 4px);
  background: var(--bg-surface-cream);
  color: var(--brand);
  margin-bottom: var(--space-2, 8px);
  transition: background-color var(--duration-fast, 160ms) var(--ease-snap),
              color var(--duration-fast, 160ms) var(--ease-snap);
}

body.woocommerce-account .lm-account-quick__card:hover .lm-account-quick__icon,
body.woocommerce-account .lm-account-quick__card:focus-visible .lm-account-quick__icon {
  background: var(--brand);
  color: var(--fg-inverse);
}

body.woocommerce-account .lm-account-quick__label {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg, clamp(1.0625rem, 1.1vw, 1.1875rem));
  font-weight: var(--fw-body-bold, 600);
  color: var(--fg-strong);
  line-height: var(--lh-tight, 1.3);
}

body.woocommerce-account .lm-account-quick__hint {
  font-size: var(--fs-body-sm, 0.9375rem);
  color: var(--fg-muted);
  line-height: 1.45;
}

/* Trust touches — solo B2B */
body.woocommerce-account .lm-account-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5, 24px);
  margin-top: var(--space-5, 24px);
  padding: var(--space-4, 16px) var(--space-5, 24px);
  background: var(--bg-surface-cream);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 8px);
}

body.woocommerce-account .lm-account-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--fs-body-sm, 0.9375rem);
  color: var(--fg-default);
}

body.woocommerce-account .lm-account-trust__item svg {
  flex: 0 0 auto;
  color: var(--brand);
}

/* ============================================================
   6. TABELLA ORDINI — .woocommerce-orders-table
   ============================================================ */

body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  background: var(--bg-surface);
  font-size: var(--fs-body-sm, 0.9375rem);
  margin: 0 0 var(--space-6, 32px);
}

body.woocommerce-account .woocommerce-orders-table thead th,
body.woocommerce-account table.shop_table thead th {
  background: var(--bg-surface-cream);
  font-family: var(--font-display);
  font-size: var(--fs-body-xs, 0.8125rem);
  font-weight: var(--fw-body-bold, 600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow, 0.16em);
  color: var(--fg-muted);
  text-align: left;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--border-default);
}

body.woocommerce-account .woocommerce-orders-table tbody tr {
  background: var(--bg-surface);
  transition: background-color var(--duration-fast, 160ms) var(--ease-snap);
}

body.woocommerce-account .woocommerce-orders-table tbody tr:nth-child(even) {
  background: var(--color-white-100);
}

body.woocommerce-account .woocommerce-orders-table tbody tr:hover {
  background: var(--bg-surface-cream);
}

body.woocommerce-account .woocommerce-orders-table tbody td,
body.woocommerce-account table.shop_table tbody td {
  padding: var(--space-4, 16px);
  border-top: 1px solid var(--border-default);
  color: var(--fg-default);
  vertical-align: middle;
}

body.woocommerce-account .woocommerce-orders-table tbody tr:first-child td {
  border-top: none;
}

/* Numero ordine — usato come link */
body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
  font-family: var(--font-display);
  font-weight: var(--fw-body-bold, 600);
  color: var(--fg-strong);
  border-bottom: none;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
  color: var(--brand);
}

/* Bottoni actions colonna ordini */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
  text-align: right;
  white-space: nowrap;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
  margin-left: var(--space-2, 8px);
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:first-child {
  margin-left: 0;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-status mark,
body.woocommerce-account .woocommerce-orders-table__cell-order-status > * {
  background: transparent;
}

/* Più affidabile: targettare la cella direttamente. WC mette il nome stato come testo plain. */
body.woocommerce-account .woocommerce-orders-table__cell-order-status {
  font-family: var(--font-display);
  font-size: var(--fs-body-xs, 0.8125rem);
  font-weight: var(--fw-body-bold, 600);
  letter-spacing: 0.04em;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-status::first-letter {
  text-transform: uppercase;
}

/* Badge colorati per status: WC mette la classe sulla riga `.order-status-{slug}` o sulla cella `.status-{slug}`. Copriamo entrambi. */
body.woocommerce-account .order-pending .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .status-pending {
  color: #8a6100;
}

body.woocommerce-account .order-processing .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .status-processing {
  color: #1d4ea6;
}

body.woocommerce-account .order-on-hold .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .status-on-hold {
  color: #6b4f00;
}

body.woocommerce-account .order-completed .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .status-completed {
  color: #0f6b2e;
}

body.woocommerce-account .order-cancelled .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .status-cancelled,
body.woocommerce-account .order-failed .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .status-failed,
body.woocommerce-account .order-refunded .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .status-refunded {
  color: var(--brand);
}

/* Mobile: table responsive con label="..." (WC li espone in data-title) */
@media (max-width: 640px) {
  body.woocommerce-account .woocommerce-orders-table thead {
    display: none;
  }
  body.woocommerce-account .woocommerce-orders-table tbody tr {
    display: block;
    padding: var(--space-3, 12px);
    border-top: 1px solid var(--border-default);
  }
  body.woocommerce-account .woocommerce-orders-table tbody tr:first-child {
    border-top: none;
  }
  body.woocommerce-account .woocommerce-orders-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px) 0;
    border-top: none;
  }
  body.woocommerce-account .woocommerce-orders-table tbody td::before {
    content: attr(data-title);
    font-family: var(--font-display);
    font-size: var(--fs-body-xs, 0.8125rem);
    font-weight: var(--fw-body-bold, 600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow, 0.16em);
    color: var(--fg-muted);
    flex: 0 0 auto;
  }
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
    text-align: left;
  }
}

/* Empty-state ordini: lo styling vive nella sez. 9 (notices WC), dove la
   classe reale è `.woocommerce-info` — vedi più sotto. Qui niente, per evitare
   regole duplicate/contraddittorie. */

/* ============================================================
   7. FORM (Indirizzi / Dati account / Login fallback)
   ============================================================ */

/* 720px e non 640: la lista indirizzi è a piena larghezza di colonna, e
   passando da "Indirizzi" a "Modifica" il contenuto si restringeva di colpo
   a poco più della metà. */
body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-address-fields,
body.woocommerce-account form.checkout,
body.woocommerce-account form.lost_reset_password {
  max-width: 720px;
}

body.woocommerce-account .form-row,
body.woocommerce-account .woocommerce-form-row {
  display: block;
  margin: 0 0 var(--space-4, 16px);
}

/* Nome / Cognome affiancati.
   La coppia precedente (`inline-block` + `calc(50% - 8px)` + 8px di margine
   per lato) sommava esattamente 100% e dipendeva dai float core per non
   andare a capo: bastava un arrotondamento sub-pixel per impilare i campi.
   Stesso pattern a griglia già usato sul checkout (woo/checkout.css).
   La griglia va sul wrapper dei campi, non sul <form>, altrimenti il bottone
   di submit finirebbe in colonna. */
body.woocommerce-account .woocommerce-address-fields__field-wrapper,
body.woocommerce-account .woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4, 16px);
}

body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row,
body.woocommerce-account .woocommerce-EditAccountForm > .form-row,
body.woocommerce-account .woocommerce-EditAccountForm > fieldset,
body.woocommerce-account .woocommerce-EditAccountForm > p {
  grid-column: 1 / -1;
}

/* `width: auto` e `float: none` battono `.woocommerce form .form-row-first
   { width:47%; float:left }` di woocommerce-layout.css, che dentro la griglia
   restringerebbe i due campi. */
body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first,
body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last,
body.woocommerce-account .woocommerce-EditAccountForm > .form-row-first,
body.woocommerce-account .woocommerce-EditAccountForm > .form-row-last {
  width: auto;
  float: none;
  margin-inline: 0;
}

body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first,
body.woocommerce-account .woocommerce-EditAccountForm > .form-row-first {
  grid-column: 1 / 2;
}

body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last,
body.woocommerce-account .woocommerce-EditAccountForm > .form-row-last {
  grid-column: 2 / 3;
}

@media (max-width: 640px) {
  body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first,
  body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last,
  body.woocommerce-account .woocommerce-EditAccountForm > .form-row-first,
  body.woocommerce-account .woocommerce-EditAccountForm > .form-row-last {
    grid-column: 1 / -1;
  }
}

body.woocommerce-account .form-row label,
body.woocommerce-account .woocommerce-form-row label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-body-xs, 0.8125rem);
  font-weight: var(--fw-body-bold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--space-2, 8px);
}

body.woocommerce-account .form-row .required {
  color: var(--brand);
  border: none;
  text-decoration: none;
  font-weight: var(--fw-body-bold, 600);
}

body.woocommerce-account .form-row input[type="text"],
body.woocommerce-account .form-row input[type="email"],
body.woocommerce-account .form-row input[type="tel"],
body.woocommerce-account .form-row input[type="password"],
body.woocommerce-account .form-row input[type="number"],
body.woocommerce-account .form-row select,
body.woocommerce-account .form-row textarea,
body.woocommerce-account .woocommerce-Input {
  width: 100%;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--bg-surface);
  color: var(--fg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 4px);
  font-family: var(--font-body);
  font-size: var(--fs-body-md, 1rem);
  line-height: var(--lh-tight, 1.3);
  transition: border-color var(--duration-fast, 160ms) var(--ease-snap),
              box-shadow var(--duration-fast, 160ms) var(--ease-snap),
              background-color var(--duration-fast, 160ms) var(--ease-snap);
}

body.woocommerce-account .form-row input:focus,
body.woocommerce-account .form-row select:focus,
body.woocommerce-account .form-row textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(166, 29, 29, 0.12);
  background: var(--color-white-50);
}

body.woocommerce-account .form-row input::placeholder,
body.woocommerce-account .form-row textarea::placeholder {
  color: var(--fg-subtle);
  opacity: 1;
}

/* Country/state selectors (select2 fallback) */
body.woocommerce-account .select2-container .select2-selection--single {
  height: auto;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 4px);
}

body.woocommerce-account .select2-container--focus .select2-selection--single,
body.woocommerce-account .select2-container--open .select2-selection--single {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(166, 29, 29, 0.12);
}

body.woocommerce-account .select2-container .select2-selection__rendered {
  padding: 0;
  line-height: var(--lh-tight, 1.3);
  color: var(--fg-default);
}

/* Email/Phone fieldset legend ("Password change", etc.) */
body.woocommerce-account fieldset {
  margin: var(--space-6, 32px) 0 0;
  padding: var(--space-5, 24px) 0 0;
  border: none;
  border-top: 1px solid var(--border-default);
}

body.woocommerce-account fieldset legend {
  font-family: var(--font-display);
  font-size: var(--fs-heading-sm, clamp(1.0625rem, 1.2vw, 1.125rem));
  font-weight: var(--fw-display-bold, 700);
  color: var(--fg-strong);
  margin: 0 0 var(--space-4, 16px);
  padding: 0;
}

/* Address grid 2-col — card allineate su stessa baseline/altezza.
   align-items: stretch + flex-column nelle card = altezze uniformi
   indipendentemente dalla lunghezza dell'indirizzo. */
body.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-4, 16px);
  margin: 0 0 var(--space-6, 32px);
}

/* BUG PRINCIPALE (card sfalsate in diagonale, con due buchi).
   Il template core stampa `<div class="woocommerce-Addresses col2-set ...">`
   e woocommerce-layout.css ci appende un clearfix:
     .woocommerce .col2-set::before/::after { content:" "; display:table }
   Dentro un grid container quegli pseudo-elementi diventano grid item veri:
   4 item invece di 2 → fatturazione in alto a destra, spedizione in basso a
   sinistra. Va annullato il `content`, non basta `display:none` sul clearfix. */
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after {
  content: none;
}

@media (max-width: 768px) {
  body.woocommerce-account .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

/* WC stampa ogni indirizzo come `<div class="u-column1 col-1 woocommerce-Address">`
   (wrapper e card sono lo stesso elemento, figlio diretto della griglia).
   Flex-column + height:100% = card stirate alla stessa altezza.

   Il selettore parte da `.woocommerce-Addresses >` per una ragione precisa:
   `.woocommerce .col2-set .col-1 { float:left; width:48% }` di
   woocommerce-layout.css ha 3 classi e batteva la vecchia regola a 2 classi,
   lasciando le card larghe metà colonna. */
body.woocommerce-account .woocommerce-Addresses > .woocommerce-Address,
body.woocommerce-account .woocommerce-Address {
  display: flex;
  flex-direction: column;
  float: none;
  width: 100%;
  height: 100%;
  padding: var(--space-5, 24px);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 8px);
}

/* address occupa lo spazio rimanente → titoli + bordi allineati in basso */
body.woocommerce-account .woocommerce-Address address {
  flex: 1 1 auto;
}

body.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  margin: 0 0 var(--space-4, 16px);
  padding-bottom: var(--space-3, 12px);
  border-bottom: 1px solid var(--border-default);
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-heading-sm, clamp(1.0625rem, 1.2vw, 1.125rem));
  font-weight: var(--fw-display-bold, 700);
  color: var(--fg-strong);
}

body.woocommerce-account .woocommerce-Address-title .edit {
  font-size: var(--fs-body-xs, 0.8125rem);
  font-weight: var(--fw-body-medium, 500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  border-bottom: none;
}

body.woocommerce-account .woocommerce-Address-title .edit:hover {
  color: var(--brand-hover);
}

body.woocommerce-account address {
  font-style: normal;
  font-size: var(--fs-body-sm, 0.9375rem);
  line-height: var(--lh-body, 1.6);
  color: var(--fg-default);
  margin: 0;
}

/* ============================================================
   8. BOTTONI — .button, .woocommerce-Button
   ============================================================ */

body.woocommerce-account .button,
body.woocommerce-account button[type="submit"],
body.woocommerce-account input[type="submit"],
body.woocommerce-account .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-5, 24px);
  background: var(--fg-strong);
  color: var(--fg-inverse);
  border: 1px solid var(--fg-strong);
  border-radius: var(--radius-md, 4px);
  font-family: var(--font-display);
  font-size: var(--fs-body-sm, 0.9375rem);
  font-weight: var(--fw-body-bold, 600);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast, 160ms) var(--ease-snap),
              border-color var(--duration-fast, 160ms) var(--ease-snap),
              color var(--duration-fast, 160ms) var(--ease-snap),
              box-shadow var(--duration-fast, 160ms) var(--ease-snap);
}

body.woocommerce-account .button:hover,
body.woocommerce-account button[type="submit"]:hover,
body.woocommerce-account input[type="submit"]:hover,
body.woocommerce-account .woocommerce-Button:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--fg-inverse);
}

body.woocommerce-account .button:focus-visible,
body.woocommerce-account button[type="submit"]:focus-visible,
body.woocommerce-account input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(166, 29, 29, 0.25);
}

/* Bottone secondario "view" (azione su ordini) */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
  background: transparent;
  color: var(--fg-strong);
  border-color: var(--border-strong);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  font-size: var(--fs-body-xs, 0.8125rem);
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover {
  background: var(--fg-strong);
  color: var(--fg-inverse);
  border-color: var(--fg-strong);
}

/* CTA primary submit form (es. "Salva indirizzo" → name=save_address,
   "Salva modifiche" → name=save_account_details). Rosso brand pieno,
   targettati anche per `name` così vincono comunque sulla regola base. */
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
body.woocommerce-account .woocommerce-address-fields button[type="submit"],
body.woocommerce-account button[name="save_account_details"],
body.woocommerce-account button[name="save_address"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--fg-inverse);
}

body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
body.woocommerce-account .woocommerce-address-fields button[type="submit"]:hover,
body.woocommerce-account button[name="save_account_details"]:hover,
body.woocommerce-account button[name="save_address"]:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--fg-inverse);
}

/* ============================================================
   9. MESSAGGI WC — notices (info / success / error)
   ============================================================ */

body.woocommerce-account .woocommerce-notices-wrapper {
  margin-bottom: var(--space-5, 24px);
}

/* Base notice — avorio caldo, bordo sinistro, niente azzurro/verde WC default.
   Anti-slop n.11: l'unico accent non-neutro è --brand. */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  list-style: none;
  margin: 0 0 var(--space-5, 24px);
  padding: var(--space-4, 16px) var(--space-5, 24px);
  background: var(--bg-surface-cream);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md, 4px);
  color: var(--fg-default);
  font-size: var(--fs-body-md, 1rem);
  line-height: var(--lh-body, 1.6);
}

/* Empty-state ordini ("Nessun ordine effettuato") = .woocommerce-info.
   Bordo sinistro neutro scuro (era blu #1d4ea6 → rimosso). */
body.woocommerce-account .woocommerce-info {
  border-left-color: var(--fg-strong);
}

/* Messaggi di successo (es. "Indirizzo aggiornato") — accent brand soft. */
body.woocommerce-account .woocommerce-message {
  border-left-color: var(--brand);
}

/* Errori — accent brand pieno. */
body.woocommerce-account .woocommerce-error {
  border-left-color: var(--brand);
}

/* Il bottone "Sfoglia prodotti" dentro l'empty-state non deve fare a-capo brutto */
body.woocommerce-account .woocommerce-info .woocommerce-Button,
body.woocommerce-account .woocommerce-info .button {
  margin-left: auto;
}

@media (max-width: 560px) {
  body.woocommerce-account .woocommerce-info .woocommerce-Button,
  body.woocommerce-account .woocommerce-info .button {
    margin-left: 0;
  }
}

/* ============================================================
   10. ORDINE SINGOLO — view-order endpoint
   ============================================================ */

body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details {
  margin-bottom: var(--space-6, 32px);
}

body.woocommerce-account .woocommerce-order-details h2,
body.woocommerce-account .woocommerce-customer-details h2 {
  font-family: var(--font-display);
  font-size: var(--fs-heading-md, clamp(1.25rem, 1.6vw, 1.5rem));
  font-weight: var(--fw-display-bold, 700);
  color: var(--fg-strong);
  margin: 0 0 var(--space-4, 16px);
}

body.woocommerce-account .woocommerce-table--order-details,
body.woocommerce-account .woocommerce-table--customer-details {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  background: var(--bg-surface);
}

body.woocommerce-account .woocommerce-table--order-details th,
body.woocommerce-account .woocommerce-table--order-details td {
  padding: var(--space-4, 16px);
  border-top: 1px solid var(--border-default);
  text-align: left;
}

body.woocommerce-account .woocommerce-table--order-details tfoot th,
body.woocommerce-account .woocommerce-table--order-details tfoot td {
  background: var(--bg-surface-cream);
}

/* ============================================================
   11. PAGINAZIONE ORDINI
   ============================================================ */

body.woocommerce-account .woocommerce-pagination {
  margin-top: var(--space-5, 24px);
}

body.woocommerce-account .woocommerce-pagination ul {
  display: inline-flex;
  gap: var(--space-2, 8px);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-account .woocommerce-pagination a,
body.woocommerce-account .woocommerce-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3, 12px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 4px);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-family: var(--font-display);
  font-size: var(--fs-body-sm, 0.9375rem);
  font-weight: var(--fw-body-medium, 500);
  text-decoration: none;
}

body.woocommerce-account .woocommerce-pagination a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

body.woocommerce-account .woocommerce-pagination .current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--fg-inverse);
}

/* ============================================================
   12. RIDUZIONI MOBILE finali
   ============================================================ */

@media (max-width: 480px) {
  body.woocommerce-account .woocommerce {
    padding-block: var(--space-6, 32px);
  }

  body.woocommerce-account .lm-account-quick__card {
    padding: var(--space-4, 16px);
  }
}

/* ============================================================
   13. LOGIN / RECUPERO PASSWORD

   È la porta d'ingresso dell'area riservata e finora non aveva una sola
   regola: un <h2> nudo e il form default WooCommerce. Non c'è hero né nav
   (l'hero è dietro `is_user_logged_in()`), quindi il wrapper si riconosce
   dalla presenza del form.
   ============================================================ */

body.woocommerce-account .woocommerce:has(> .woocommerce-form-login),
body.woocommerce-account .woocommerce:has(> .woocommerce-ResetPassword) {
  max-width: var(--container-narrow, 920px);
}

body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-ResetPassword {
  max-width: 460px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 40px);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-sm);
}

/* L'<h2> "Accedi" è figlio diretto di .woocommerce, non della colonna
   content: le regole della sezione 4 non lo raggiungono. */
body.woocommerce-account .woocommerce:has(> .woocommerce-form-login) > h2,
body.woocommerce-account .woocommerce:has(> .woocommerce-ResetPassword) > h2 {
  max-width: 460px;
  margin: 0 auto var(--space-5, 24px);
  font-family: var(--font-display);
  font-size: var(--fs-heading-lg, clamp(1.5rem, 2vw, 1.875rem));
  font-weight: var(--fw-display-bold, 700);
  letter-spacing: var(--tracking-heading, -0.02em);
  line-height: var(--lh-heading, 1.15);
  color: var(--fg-strong);
  text-align: center;
}

/* Riga "Ricordami + Accedi": la label del checkbox non deve ereditare il
   maiuscoletto delle label di campo (sezione 7). */
body.woocommerce-account .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0 0 var(--space-4, 16px);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm, 0.9375rem);
  font-weight: var(--fw-body, 400);
  letter-spacing: var(--tracking-body);
  text-transform: none;
  color: var(--fg-default);
  cursor: pointer;
}

body.woocommerce-account .woocommerce-form__input-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
  flex: 0 0 auto;
}

body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"] {
  display: flex;
  width: 100%;
  background: var(--brand);
  border-color: var(--brand);
  color: var(--fg-inverse);
  padding-block: var(--space-4, 16px);
}

body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

/* Il form di recupero password ha un solo campo marcato `form-row-first`:
   dentro la card da 460px il 47% di woocommerce-layout.css lo ridurrebbe a
   un moncone. Qui non serve nessuna colonna. */
body.woocommerce-account form.woocommerce-ResetPassword .form-row-first,
body.woocommerce-account form.woocommerce-ResetPassword .form-row-last {
  width: 100%;
  float: none;
}

body.woocommerce-account .woocommerce-LostPassword {
  margin: var(--space-4, 16px) 0 0;
  text-align: center;
  font-size: var(--fs-body-sm, 0.9375rem);
}

body.woocommerce-account .woocommerce-LostPassword a {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: color var(--duration-fast, 160ms) var(--ease-snap),
              border-color var(--duration-fast, 160ms) var(--ease-snap);
}

body.woocommerce-account .woocommerce-LostPassword a:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}