/* ============================================================
   SOLARCONNECT — UI KIT
   Unico punto in cui vive l'aspetto grafico dei componenti.
   Nessun componente va più scritto inline: usa le classi c-*
   oppure gli helper in ui-kit.js (UI.card, UI.btn, UI.icon...).
   ============================================================ */

:root {
  /* Superfici e testo */
  --c-ground:      #EFF1F3;
  --c-surface:     #FFFFFF;
  --c-surface-alt: #F7F8F9;
  --c-line:        #E2E6EA;
  --c-line-soft:   #EFF1F3;

  --c-ink:         #151B20;
  --c-ink-2:       #39424A;
  --c-ink-3:       #6B7680;
  --c-ink-4:       #98A3AD;

  /* Brand — petrolio profondo: azioni primarie, prezzi, stati attivi */
  --c-brand:       #15605A;
  --c-brand-hover: #0F4A45;
  --c-brand-dark:  #0B3A36;
  --c-brand-tint:  #EAF2F1;
  --c-brand-tint2: #D7E7E5;
  --c-brand-line:  #BFD8D5;

  /* Accenti di servizio */
  --c-warm:        #A8452F;   /* offerte, urgenza */
  --c-warm-tint:   #F8EEEB;
  --c-ok:          #2F6B52;
  --c-ok-tint:     #EAF2EE;
  /* Era gia' il valore di fatto: tre punti del codice lo usavano come
     fallback locale (`var(--c-danger, #b3261e)`) perche' la variabile non
     era mai stata dichiarata qui. Un fallback ripetuto in tre posti e'
     un colore che vive fuori dal sistema di token — se cambia, cambia
     solo dove qualcuno se ne ricorda. */
  --c-danger:      #b3261e;

  /* Geometria e profondità */
  --c-r-sm: 4px;
  --c-r:    6px;
  --c-r-lg: 8px;
  --c-shadow-1: 0 1px 2px rgba(21,27,32,.05);
  --c-shadow-2: 0 1px 2px rgba(21,27,32,.05), 0 4px 12px -4px rgba(21,27,32,.10);
  --c-shadow-3: 0 12px 40px -12px rgba(21,27,32,.28);

  --c-font: 'Barlow', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --c-font-head: 'Barlow Condensed', 'Barlow', ui-sans-serif, sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--c-font);
  background: var(--c-ground);
  color: var(--c-ink-2);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--c-font-head);
  letter-spacing: .005em;
  color: var(--c-ink);
}
h1, h2 { letter-spacing: .01em; }
a { color: var(--c-brand); text-decoration: none; }
a:hover { color: var(--c-brand-hover); }
::selection { background: var(--c-brand-tint2); color: var(--c-brand-dark); }

/* Focus tematizzato, mai l'anello blu di default */
:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--c-r-sm);
}
button, a, input, select, textarea { outline-color: var(--c-brand); }

/* Il markup usa .hidden di Tailwind (rimosso da lg:block sui breakpoint):
   qui serve solo coprire l'attributo hidden nativo, senza toccare .hidden */
[hidden] { display: none !important; }

/* Cifre allineate: prezzi e totali non "ballano" */
.c-num, .c-price, input[type="number"] { font-variant-numeric: tabular-nums; }

/* Scrollbar discreta */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #D2D8DE; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #B9C2CA; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Superficie: card ---------- */
.c-card.c-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg);
  box-shadow: var(--c-shadow-1);
}
.c-card--pad.c-card--pad { padding: 1rem; }
.c-card--clip { overflow: hidden; }
.c-card--hover { transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.c-card--hover:hover { box-shadow: var(--c-shadow-2); border-color: #D3DAE0; }
.c-card--active.c-card--active { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand); }

/* Intestazione di sezione: la barra ricorrente sopra ogni pagina */
.c-head.c-head {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg);
  box-shadow: var(--c-shadow-1);
  padding: .875rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.c-head__title { font-size: 1.15rem; font-weight: 600; line-height: 1.15; text-transform: none; }
.c-head__sub { font-size: .75rem; color: var(--c-ink-3); margin-top: .125rem; }

/* Micro-titolo di gruppo */
.c-eyebrow {
  font-family: var(--c-font-head);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-4);
}

/* ---------- Bottoni ---------- */
.c-btn.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--c-font);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  padding: .625rem 1rem;
  border-radius: var(--c-r);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.c-btn--primary.c-btn--primary { background: var(--c-brand); color: #fff; }
.c-btn--primary:hover { background: var(--c-brand-hover); }
.c-btn--primary:active { background: var(--c-brand-dark); }

.c-btn--soft.c-btn--soft { background: var(--c-brand-tint); color: var(--c-brand); border-color: var(--c-brand-line); }
.c-btn--soft:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }

.c-btn--ghost.c-btn--ghost { background: var(--c-surface); color: var(--c-ink-2); border-color: var(--c-line); }
.c-btn--ghost:hover { background: var(--c-surface-alt); border-color: #D3DAE0; }

.c-btn--warm.c-btn--warm { background: var(--c-warm); color: #fff; }
.c-btn--warm:hover { filter: brightness(.92); }

.c-btn--sm.c-btn--sm { padding: .4375rem .6875rem; font-size: .6875rem; }
.c-btn--lg.c-btn--lg { padding: .8125rem 1.25rem; font-size: .8125rem; }
.c-btn--block.c-btn--block { display: flex; width: 100%; }
.c-btn[disabled] { opacity: .45; pointer-events: none; }

/* Bottone icona (matita, cestino, chiudi) */
.c-iconbtn.c-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--c-r);
  color: var(--c-ink-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.c-iconbtn:hover { color: var(--c-brand); background: var(--c-brand-tint); }
.c-iconbtn--danger:hover { color: var(--c-warm); background: var(--c-warm-tint); }
.c-iconbtn--float.c-iconbtn--float {
  background: rgba(255,255,255,.94);
  border-color: var(--c-line);
  box-shadow: var(--c-shadow-1);
  backdrop-filter: blur(4px);
}

/* ---------- Chip / filtri ---------- */
.c-chip.c-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .6875rem;
  font-weight: 600;
  padding: .375rem .75rem;
  border-radius: 99px;
  background: var(--c-surface);
  color: var(--c-ink-3);
  border: 1px solid var(--c-line);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.c-chip:hover { border-color: var(--c-brand-line); color: var(--c-brand); }
.c-chip.is-on.is-on { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }

/* Impaginazione a tre colonne guidata dalle LARGHEZZE, non da una griglia a 12 celle:
   così stringendo la colonna centrale le due laterali le si avvicinano,
   mantenendo sempre lo stesso spazio fra loro. */
.c-appmain {
  --side-width: clamp(11rem, 18vw, 17rem);
  display: grid;
  grid-template-columns: minmax(0, var(--feed-width, 590px));
  justify-content: center;   /* i margini automatici non bastano: in griglia vince justify-self */
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 1180px) {
  .c-appmain {
    /* La traccia centrale è FISSA alla larghezza scelta in Impostazioni:
       il deficit di spazio lo assorbono le laterali, non il contenuto.
       Le laterali sono elastiche (clamp) e possono comprimersi fino a zero. */
    grid-template-columns:
      minmax(0, var(--side-width))
      min(100%, var(--feed-width, 590px))
      minmax(0, var(--side-width));
  }
}

/* Navigazione: i tab nell'header e le colonne laterali si danno il cambio
   ESATTAMENTE alla stessa soglia — la griglia a tre tracce.
   Se le due soglie divergono resta una fascia senza alcuna navigazione. */
.c-aside { display: none; }
.c-topbar { display: block; }
.c-topnav { display: flex; }
@media (min-width: 1180px) {
  .c-aside { display: block; }
  .c-topbar { display: none; }

  /* Ogni colonna scorre per conto suo. Serve `align-self: start` perché in
     griglia l'elemento si stira all'altezza della riga e `sticky` non ha più
     spazio in cui muoversi: senza quella riga la regola non ha alcun effetto.
     L'altezza è misurata sul viewport, non sul contenuto: una colonna più alta
     dello schermo scorre al suo interno invece di essere tagliata.
     Il margine c'è solo in alto: in basso la colonna arriva a filo della vista,
     come quella centrale. Con un margine anche sotto finiva prima del bordo e
     sembrava fermarsi dentro un contenitore.
     Sostituisce il vecchio pannello fissato via JS (`setupFollowScrollPanel`):
     un elemento `fixed` senza altezza massima non può scorrere, e la parte
     eccedente lo schermo era irraggiungibile. */
  .c-aside {
    position: sticky;
    top: 1.5rem;                        /* combacia col py-6 di <main> */
    align-self: start;
    max-height: calc(100vh - 1.5rem);   /* a filo in basso, non 3rem */
    overflow-y: auto;
    /* Barra di scorrimento nascosta: la colonna è un contorno di servizio, e
       una barra visibile accanto a quella della pagina fa sembrare l'interfaccia
       due pagine invece di una. Il gesto resta (rotella, trackpad, tastiera). */
    scrollbar-width: none;
  }
  .c-aside::-webkit-scrollbar { width: 0; height: 0; }
}

/* Elemento cliccabile dentro una riga (miniatura, nome prodotto):
   segnala che porta altrove senza vestirsi da bottone. */
.c-linkish { display: block; cursor: pointer; border-radius: var(--c-r-sm); transition: opacity .15s ease, color .15s ease; max-width: 100%; }
.c-linkish:hover { opacity: .82; color: var(--c-brand); }
.c-linkish:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
h4 > .c-linkish { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Interruttore: acceso/spento senza ambiguità */
.c-switch {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--c-line);
  cursor: pointer;
  transition: background .18s ease;
}
.c-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--c-shadow-1);
  transition: transform .18s cubic-bezier(.32,.72,0,1);
}
.c-switch.is-on { background: var(--c-brand); }
.c-switch.is-on span { transform: translateX(1rem); }
.c-switch:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
/* Bloccato: si vede che non si può cambiare, ma il clic risponde comunque */
.c-switch[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Sezione della home pubblica: titolo condensato e contenuto */
.c-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .625rem; }
.c-section__title {
  font-family: var(--c-font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.c-section__link { font-size: .75rem; font-weight: 600; color: var(--c-brand); white-space: nowrap; cursor: pointer; }
.c-section__link:hover { color: var(--c-brand-dark); text-decoration: underline; }

/* Intestazione di sezione dentro un form lungo: separa i passaggi della compilazione */
.c-formsec {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.25rem 0 .25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}
.c-formsec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.c-formsec__num {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.c-formsec__title { font-size: .8125rem; font-weight: 700; color: var(--c-ink); }
.c-formsec__hint { font-size: .6875rem; color: var(--c-ink-4); margin-left: auto; }

/* Card di ricerca: un unico campo testuale, separato dai filtri a chip */
.c-search { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; }
.c-search__ico { color: var(--c-ink-4); flex-shrink: 0; display: flex; }
.c-search__input { flex: 1 1 auto; border: none; outline: none; background: transparent; font-size: .8125rem; color: var(--c-ink); font-family: inherit; }
.c-search__input::placeholder { color: var(--c-ink-4); }
.c-search__clear { color: var(--c-ink-4); flex-shrink: 0; padding: .125rem; border-radius: var(--c-r-sm); cursor: pointer; }
.c-search__clear:hover { color: var(--c-ink); background: var(--c-surface-alt); }
.c-search__input::-webkit-search-cancel-button, .c-search__input::-webkit-search-decoration { display: none; }

/* Controllo segmentato: due o tre viste alternative dello stesso elenco */
.c-seg {
  display: inline-flex;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-surface-alt);
  padding: 2px;
  gap: 2px;
}
.c-seg button {
  padding: .3125rem .75rem;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--c-ink-3);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .14s ease;
}
.c-seg button:hover { color: var(--c-brand); }
.c-seg button.is-on { background: var(--c-surface); color: var(--c-brand); box-shadow: var(--c-shadow-1); }

/* Link testuale discreto ma leggibile (es. "Esci" nell'header) */
.c-textlink {
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease;
}
.c-textlink:hover { color: var(--c-warm); }

/* ---------- Tag / stato ---------- */
.c-tag.c-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .1875rem .5rem;
  border-radius: 99px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-alt);
  color: var(--c-ink-3);
  white-space: nowrap;
}
.c-tag--accent.c-tag--accent { background: var(--c-brand-tint); color: var(--c-brand); border-color: var(--c-brand-line); }
.c-tag--ok.c-tag--ok { background: var(--c-ok-tint); color: var(--c-ok); border-color: #D6E6DE; }
.c-tag--warm.c-tag--warm { background: var(--c-warm-tint); color: var(--c-warm); border-color: #E4C6BD; }

/* ---------- Campi ---------- */
.c-label {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-ink-2);
  margin-bottom: .375rem;
}
.c-input.c-input {
  width: 100%;
  font-family: var(--c-font);
  font-size: .8125rem;
  color: var(--c-ink);
  background: var(--c-surface);
  padding: .5625rem .6875rem;
  border: 1px solid #D6DCE2;
  border-radius: var(--c-r);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.c-input::placeholder { color: var(--c-ink-4); }
.c-input:hover { border-color: #C3CBD3; }
.c-input:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(21,96,90,.12);
}
/* Le aree di testo crescono con il contenuto: niente scorrimento interno
   né maniglia di ridimensionamento, che taglierebbe il testo. */
textarea.c-input { line-height: 1.55; resize: none; overflow: hidden; min-height: 4.5rem; }
.c-input--qty.c-input--qty { width: 3.5rem; text-align: center; padding-left: .25rem; padding-right: .25rem; }

.c-file.c-file { display: block; width: 100%; font-size: .75rem; color: var(--c-ink-3); cursor: pointer; }
.c-file::file-selector-button {
  margin-right: .75rem;
  padding: .4375rem .75rem;
  border: 1px solid var(--c-brand-line);
  border-radius: var(--c-r);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  font-family: var(--c-font);
  font-size: .6875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.c-file:hover::file-selector-button { background: var(--c-brand); color: #fff; }

/* Casella "seleziona qualcosa" (cliente, prodotto, template) */
.c-slot.c-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem .75rem;
  border: 1px dashed #CDD4DA;
  border-radius: var(--c-r);
  background: var(--c-surface-alt);
  font-size: .75rem;
  color: var(--c-ink-3);
}

/* Card selezionabile (tipo post, categoria, skin email) */
.c-choice.c-choice {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: var(--c-r);
  padding: .75rem .5rem;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
  color: var(--c-ink-2);
}
.c-choice:hover { border-color: var(--c-brand-line); background: var(--c-brand-tint); }
.c-choice.is-on.is-on {
  border-color: var(--c-brand);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  box-shadow: inset 0 0 0 1px var(--c-brand);
}
.c-choice__label { font-size: .6875rem; font-weight: 700; }

/* ---------- Banner / stati ---------- */
.c-banner.c-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem .875rem;
  border-radius: var(--c-r);
  border: 1px solid var(--c-brand-line);
  background: var(--c-brand-tint);
  color: var(--c-brand-dark);
  font-size: .75rem;
  font-weight: 600;
}
.c-banner--warm.c-banner--warm { background: var(--c-warm-tint); border-color: #E4C6BD; color: var(--c-warm); }

.c-empty.c-empty {
  background: var(--c-surface);
  border: 1px dashed #D6DCE2;
  border-radius: var(--c-r-lg);
  padding: 2.25rem 1.5rem;
  text-align: center;
  color: var(--c-ink-3);
  font-size: .8125rem;
}
.c-empty .c-empty__icon { color: #C3CBD3; margin: 0 auto .625rem; display: block; }

/* ---------- Pannello laterale (drawer) ---------- */
.c-scrim { position: absolute; inset: 0; background: rgba(21,27,32,.45); backdrop-filter: blur(2px); }
.c-drawer.c-drawer {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 100%;
  max-width: 30rem;
  background: var(--c-surface);
  box-shadow: var(--c-shadow-3);
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.c-drawer__head, .c-drawer__foot {
  flex-shrink: 0;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.c-drawer__head { border-bottom: 1px solid var(--c-line-soft); justify-content: space-between; }
.c-drawer__foot { border-top: 1px solid var(--c-line-soft); justify-content: flex-end; background: var(--c-surface-alt); }
.c-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem; }

/* ---------- Elementi minori ---------- */
.c-avatar { border-radius: 99px; object-fit: cover; background: var(--c-surface-alt); }
.c-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ink);
  color: #fff;
  font-family: var(--c-font-head);
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--c-r);
}
.c-price { font-family: var(--c-font-head); font-weight: 700; color: var(--c-brand); letter-spacing: .01em; }
.c-thumb { border-radius: var(--c-r-sm); object-fit: cover; background: var(--c-surface-alt); }
.c-rule { height: 1px; background: var(--c-line-soft); border: 0; }

/* Voce di navigazione della sidebar */
.c-nav__link.c-nav__link {
  align-items: center;
  gap: .625rem;
  padding: .4375rem .5rem;
  border-radius: var(--c-r);
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-ink-2);
  border-left: 2px solid transparent;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.c-nav__link.c-nav__link:not(.hidden) { display: flex; }
.c-nav__link:hover { background: var(--c-surface-alt); color: var(--c-brand); border-left-color: var(--c-brand-line); }
.c-nav__link.is-active { background: var(--c-brand-tint); color: var(--c-brand); border-left-color: var(--c-brand); }
.c-nav__count { margin-left: auto; font-size: .625rem; font-weight: 700; color: var(--c-ink-3); background: var(--c-surface-alt); border: 1px solid var(--c-line); border-radius: 99px; padding: .0625rem .4375rem; }

/* Stepper quantità: usato nel catalogo in modalità selezione */
.c-stepper {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  border: 1px solid var(--c-brand);
  border-radius: var(--c-r);
  background: var(--c-surface);
  overflow: hidden;
  flex-shrink: 0;
}
.c-stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--c-brand);
  cursor: pointer;
  transition: background-color .14s ease;
}
.c-stepper button:hover { background: var(--c-brand-tint2); }
.c-stepper span {
  min-width: 1.5rem;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--c-brand-dark);
}

/* Barre di tab e filtri scorrevoli: niente scrollbar visibile */
header nav::-webkit-scrollbar,
#offers-filters::-webkit-scrollbar { height: 0; }
header nav { scrollbar-width: none; }
header nav > button { flex-shrink: 0; white-space: nowrap; }

/* Barra azioni sotto al post — icone a sinistra, azione a destra.
   Le tre azioni sociali sono icone SENZA testo: sono gesti noti (interessante,
   commenta, condividi) e la parola accanto non aggiunge nulla, mentre tolgle
   spazio e mette tre etichette in concorrenza con l'unica azione che conta.
   Il nome resta nel `title` e in `aria-label`, quindi al passaggio del mouse e
   per chi usa uno screen reader non si perde niente. */
.c-postbar {
  display: flex; align-items: center; gap: .125rem;
  border-top: 1px solid var(--c-line-soft); padding: .375rem;
}
.c-postbar button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;                 /* bersaglio pieno, non solo l'icona */
  color: var(--c-ink-3);
  border-radius: var(--c-r); cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.c-postbar button:hover { background: var(--c-surface-alt); color: var(--c-brand); }
.c-postbar button:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ---------- BARRA COMANDI DELLA CARD ----------
   Una regola sola per tutta l'app: in fondo a ogni card che ha delle azioni,
   una barra separata da una hairline. A SINISTRA i secondari, come icone —
   sono gesti di servizio (guarda, duplica, elimina) e la parola non aggiunge
   nulla. A DESTRA il primario, con la sua parola: è l'azione che quella card
   chiede adesso, e cambia col contesto.
   Un solo primario per card. Se ne servono due, uno dei due non è primario.

   Diversa da `.c-postbar`, che è la barra SOCIALE del feed: stessa geometria,
   ruolo opposto — lì si reagisce a un contenuto, qui si comanda un oggetto. */
.c-actionbar {
  display: flex;
  align-items: center;
  gap: .125rem;
  border-top: 1px solid var(--c-line-soft);
  padding: .375rem;
}
/* I secondari sono TESTO, non icone. Molti comandi dell'app non hanno un
   simbolo — «Cambia stato», «Segna come fatturata», «Usa questo studio» — e
   un'icona che va spiegata non è un'icona: ognuno la impara sbagliata una
   volta. Il testo dice sempre la verità, e il divisore verticale li tiene
   insieme come un gruppo invece che come pulsanti sparsi.
   Massimo tre: in testo occupano molto più spazio, e quattro voci con i
   divisori si leggono come un menu. Se ne servono di più, alcuni non
   appartengono alla card ma alla pagina di dettaglio. */
.c-actionbar__link {
  display: inline-flex; align-items: center;
  height: 2.25rem; padding: 0 .625rem;      /* bersaglio pieno, non solo il testo */
  font-size: .75rem; font-weight: 500;      /* non grassetto: sono di servizio,
                                               il peso visivo sta sul primario */
  color: var(--c-ink-4);                    /* più chiari, non più piccoli: sotto
                                               i 12px un comando smette di
                                               sembrare cliccabile. Il colore
                                               allontana lasciando il bersaglio */
  border-radius: var(--c-r);
  cursor: pointer; white-space: nowrap;
  transition: color .14s ease, background-color .14s ease;
}
.c-actionbar__link:hover { color: var(--c-brand); background: var(--c-surface-alt); }
.c-actionbar__link:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
/* Il distruttivo resta riconoscibile: stesso trattamento, colore caldo. In
   testo come gli altri diventerebbe un'azione qualunque accanto a «Duplica». */
.c-actionbar__link--danger { color: var(--c-warm); }
.c-actionbar__link--danger:hover { color: var(--c-warm); background: var(--c-warm-tint); }

/* Scelta fra poche alternative escludenti, affiancate: si vede quale è attiva
   senza aprire nulla, e si cambia con un gesto. Da preferire a una tendina
   quando le opzioni sono due o tre e la scelta va LETTA a colpo d'occhio
   (le aliquote su una riga d'offerta: quella diversa dalle altre è un errore
   da notare scorrendo). */
.c-segvat {
  display: inline-flex;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  overflow: hidden;
  background: var(--c-surface);
}
.c-segvat button {
  padding: 0 .5rem; height: 1.75rem;
  font-size: .6875rem; font-weight: 600;
  color: var(--c-ink-4);
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.c-segvat button + button { border-left: 1px solid var(--c-line); }
.c-segvat button:hover { background: var(--c-surface-alt); color: var(--c-brand); }
.c-segvat button.is-on { background: var(--c-brand); color: #fff; }
.c-segvat button.is-on:hover { background: var(--c-brand-dark); color: #fff; }

/* Divisore fra secondari: solo FRA, mai ai bordi del gruppo. */
.c-actionbar__link + .c-actionbar__link { position: relative; margin-left: .0625rem; }
.c-actionbar__link + .c-actionbar__link::before {
  content: ''; position: absolute; left: -.0625rem; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 1rem; background: var(--c-line);
}

.c-actionbar > .c-iconbtn { width: 2.25rem; height: 2.25rem; }   /* bersaglio pieno */
.c-actionbar__end { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* Azione principale: parola fuori, quadrato smussato accanto — la stessa forma
   del feed. Qui però in versione CHIARA: bianco, bordo hairline, icona di
   brand. Dentro un elenco un quadrato pieno attirerebbe l'occhio più della card
   che lo contiene, e su dieci righe sarebbero dieci macchie. */
.c-cardaction { display: inline-flex; align-items: center; gap: .5rem; }
.c-cardaction__label {
  font-size: .75rem; font-weight: 600; color: var(--c-ink-2);
  white-space: nowrap;
}
.c-cardaction__go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--c-r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-brand-line);
  color: var(--c-brand);
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}
.c-cardaction__go:hover { background: var(--c-brand-tint); border-color: var(--c-brand); }
.c-cardaction__go:active { background: var(--c-brand-tint2); }
.c-cardaction__go:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* Versione piena: solo nelle pagine di dettaglio. Lì il primario è l'azione
   della pagina, non di una riga fra dieci, e può portare il peso pieno. */
.c-cardaction__go.is-solid {
  background: var(--c-brand); border-color: var(--c-brand); color: #fff;
}
.c-cardaction__go.is-solid:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); }
.c-cardaction__label.is-solid { color: var(--c-ink); }

/* Le card con la barra non hanno padding in fondo: la barra è il fondo. */
.c-card--pad > .c-actionbar { margin: .75rem -1rem -1rem; }

/* ---------- CARD DEL POST — una sola card, due forme ----------
   Un post ha un contenuto, non una forma: la forma la decide lo schermo di
   chi legge. Verticale sotto i 640px (dove la colonna funziona), orizzontale
   da lì in su (dove la larghezza è la risorsa e una colonna verticale lascia
   due terzi di schermo vuoti).
   Il markup è UNO — l'ordine di lettura resta testo → immagine — e da desktop
   è la griglia a mettere l'immagine in prima colonna, senza toccare il DOM:
   così l'ordine per chi legge con la tastiera o con uno screen reader non
   cambia mai.
   L'altezza dell'immagine segue --ratio (4/5 nel feed, 1/1 sui prodotti):
   le card restano di altezze diverse anche da desktop, che è ciò che togle
   l'effetto monotonia di una griglia tutta uguale. */
.c-post__id,
.c-post__meta,
.c-post__body { min-width: 0; }              /* consente il troncamento del testo */

.c-post__avatar {
  flex-shrink: 0;
  border: 1px solid var(--c-line);
  background: var(--c-surface-alt);
}

.c-post__tools { flex-shrink: 0; }

.c-post__split { display: grid; }            /* mobile: una colonna, DOM order */

/* Il respiro sopra il testo sta sul CORPO, non sulla griglia: l'immagine parte
   in corrispondenza del divisore della testata, come il pulsante d'azione sta
   a filo della barra sotto. Un margine sopra il media spezzerebbe quella linea. */
.c-post__body { padding-top: .625rem; }

.c-post__media {
  position: relative;
  overflow: hidden;
  background: var(--c-surface-alt);
  aspect-ratio: var(--ratio, 4/5);
}
.c-post__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 640px) {
  /* `:has` è deliberato: senza immagine la card resta a colonna unica,
     invece di lasciare una prima colonna vuota. */
  .c-post__split:has(.c-post__media) {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
  }
  .c-post__split:has(.c-post__media) > .c-post__media {
    grid-column: 1; grid-row: 1;
    border-top: 0; border-bottom: 0;
    border-right: 1px solid var(--c-line-soft);
  }
  .c-post__split:has(.c-post__media) > .c-post__body { grid-column: 2; grid-row: 1; }
}

/* Azione principale della card: un solo punto d'azione, sempre in fondo a
   destra. Quadrato smussato — non un cerchio: gli angoli vivi sono la regola
   di questo tema, e il pieno di brand lo distingue dalle icone sociali, che
   sono grigie e in linea a sinistra.
   La PAROLA sta fuori dal pulsante, alla sua sinistra: l'azione cambia di
   contesto in contesto (carrello, offerta, richiesta, landing) e un'icona sola
   obbligherebbe a indovinare — ma il bersaglio resta il quadrato, uguale
   dappertutto. È l'etichetta a spostarsi all'estremo (`margin-left: auto`),
   quindi la coppia resta a destra qualunque sia il numero di icone accanto.
   La regola è più specifica di `.c-postbar button` di proposito: senza i due
   selettori il grigio della barra vincerebbe sul bianco dell'icona. */
.c-postbar__label {
  margin-left: auto;
  font-size: .75rem; font-weight: 600; color: var(--c-ink-3);
  white-space: nowrap;
}
.c-postbar .c-post__add {
  flex: 0 0 auto;
  margin-left: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--c-r-sm);
  background: var(--c-brand); color: #fff;
  cursor: pointer;
  transition: background-color .14s ease;
}
.c-postbar .c-post__add:hover { background: var(--c-brand-hover); color: #fff; }
.c-post__add:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ---------- CARD PRODOTTO — stessa regola, quindi la regola del sito ----------
   La griglia a due colonne è stata tolta perché mostrava più COLONNE, non più
   prodotti: con l'immagine quadrata la card superava i 450px e su un 16:9 si
   vedevano due file e mezza, contro cinque o sei righe orizzontali. */
.c-prodcard--row { display: grid; }
.c-prodcard__body { display: flex; flex-direction: column; min-width: 0; }
.c-prodcard__body > .c-postbar { margin-top: auto; }   /* la barra resta in fondo */

@media (min-width: 640px) {
  .c-prodcard--row {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    align-items: stretch;
  }
  .c-prodcard--row > :first-child { border-right: 1px solid var(--c-line-soft); }
  /* L'immagine riempie la colonna invece di lasciare una banda vuota quando il
     testo è più alto: l'altezza vince sull'aspect-ratio dichiarato nel markup. */
  .c-prodcard--row > :first-child > img { height: 100%; }
}

/* ---------- Notifiche (toast) ---------- */
.c-toasts {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}
.c-toast {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem .875rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-ink-3);
  border-radius: var(--c-r);
  box-shadow: var(--c-shadow-3);
  font-size: .8125rem;
  color: var(--c-ink-2);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s cubic-bezier(.32,.72,0,1);
}
.c-toast.is-in { opacity: 1; transform: none; }
.c-toast.is-out { opacity: 0; transform: translateY(4px); }
.c-toast__ico { flex-shrink: 0; margin-top: .0625rem; }
.c-toast__msg { flex: 1 1 auto; line-height: 1.45; }
.c-toast__x {
  flex-shrink: 0;
  color: var(--c-ink-4);
  cursor: pointer;
  padding: .125rem;
  border-radius: var(--c-r-sm);
}
.c-toast__x:hover { color: var(--c-ink); background: var(--c-surface-alt); }
.c-toast--ok    { border-left-color: var(--c-ok); }
.c-toast--ok .c-toast__ico { color: var(--c-ok); }
.c-toast--warn  { border-left-color: var(--c-warm); }
.c-toast--warn .c-toast__ico { color: var(--c-warm); }
.c-toast--error { border-left-color: var(--c-warm); background: var(--c-warm-tint); }
.c-toast--error .c-toast__ico { color: var(--c-warm); }
.c-toast--info  { border-left-color: var(--c-brand); }
.c-toast--info .c-toast__ico { color: var(--c-brand); }

/* ---------- Dialogo di conferma ---------- */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity .18s ease;
}
.c-modal.is-in { opacity: 1; }
.c-modal .c-scrim { position: absolute; }
.c-dialog {
  position: relative;
  width: min(26rem, 100%);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg);
  box-shadow: var(--c-shadow-3);
  padding: 1.25rem;
  transform: scale(.98);
  transition: transform .18s cubic-bezier(.32,.72,0,1);
}
.c-modal.is-in .c-dialog { transform: none; }
.c-dialog__title { font-size: 1.0625rem; font-weight: 600; margin-bottom: .375rem; }
.c-dialog__msg { font-size: .8125rem; color: var(--c-ink-3); line-height: 1.5; }
.c-dialog__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* Icone: tratto sottile e coerente ovunque */
.c-ico { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; stroke-width: 1.6; }

/* ============================================================
   GUARDIA DI VISIBILITÀ — deve restare l'ultima regola del file.
   Il kit è caricato dopo Tailwind, quindi le classi c-* che
   dichiarano un display batterebbero .hidden a parità di
   specificità: i selettori del kit sono raddoppiati (.c-banner.c-banner)
   per battere le utility Tailwind, quindi anche questa deve esserlo.
   Restituisce la precedenza a .hidden per tutti i componenti.
   ============================================================ */
.hidden.hidden { display: none; }

/* Le utility responsive di Tailwind devono però restare più forti della guardia,
   altrimenti "hidden lg:block" (le due sidebar) resterebbe nascosto anche su desktop. */
@media (min-width: 640px) {
  .sm\:block.sm\:block { display: block; }
  .sm\:flex.sm\:flex { display: flex; }
  .sm\:grid.sm\:grid { display: grid; }
  .sm\:inline-flex.sm\:inline-flex { display: inline-flex; }
}
@media (min-width: 768px) {
  .md\:block.md\:block { display: block; }
  .md\:flex.md\:flex { display: flex; }
  .md\:grid.md\:grid { display: grid; }
}
@media (min-width: 1024px) {
  .lg\:block.lg\:block { display: block; }
  .lg\:flex.lg\:flex { display: flex; }
  .lg\:grid.lg\:grid { display: grid; }
  .lg\:inline-flex.lg\:inline-flex { display: inline-flex; }
  .lg\:hidden.lg\:hidden { display: none; }
}