/* =========================================================================
   Savorita Catalog — foglio unico per Vetrina e Shop
   Specifica: docs/catalog-widget.md · Mockup: mockups/shop-catalog/

   Regole di scrittura: radice .sv-cat.sv-cat (batte il kit di Elementor senza
   !important); responsive a contenitore (svcat), mai media query; niente
   !important su display; "chiuso vuol dire spento" (hidden). Ogni bottone e
   ogni link ha la sua classe, con sfondo e colore dichiarati: così l'hover
   del kit non entra. I link non si vestono da una classe sul <a> messa da
   altri: quelli che escono dal widget portano data-svc, e il foglio li
   veste anche da lì (Broken Link Checker riscrive la classe).

   Due contenitori con lo stesso nome:
     .sv-cat-wrap    il widget in pagina
     .sv-cat-layer   pannelli, barra della bozza e avvisi, attaccati al body
                     (fissi, sopra l'header)
   ========================================================================= */

.sv-cat.sv-cat{
  --c-surface:#fff; --c-surface-2:#f6f8f6; --c-surface-3:#e9eeeb;
  --c-ink:#293241; --c-ink-2:#56606f; --c-ink-3:#8a93a0;
  --c-line:#dde2e6; --c-line-2:#c6cdd4;
  --c-green:#087F23; --c-green-ink:#066a1c; --c-green-soft:#e6f4e9;
  --c-yellow:#FFCC37; --c-yellow-soft:#fff6d6;
  --c-gold:#D39D00; --c-gold-ink:#8a6500; --c-gold-soft:#fbf2dc;
  --c-red:#EC1B30; --c-red-soft:#fdeaec;
  --c-blue-soft:#e8eef7; --c-blue-ink:#3b5b8c;
  --c-img:#f4f3f8;
  --c-shadow-1:0 1px 2px rgba(41,50,65,.05),0 10px 26px -16px rgba(41,50,65,.28);
  --c-shadow-2:0 30px 70px -24px rgba(41,50,65,.5),0 3px 10px rgba(41,50,65,.12);
  --c-display:Nunito, ui-rounded, system-ui, sans-serif;
  --c-ui:"Nunito Sans", Nunito, system-ui, sans-serif;
  --c-out:cubic-bezier(.2,.8,.2,1);
  font-family:var(--c-ui); font-size:14px; line-height:1.45; color:var(--c-ink); text-align:left;
  -webkit-font-smoothing:antialiased;
}
.sv-cat.sv-cat *,
.sv-cat.sv-cat *::before,
.sv-cat.sv-cat *::after{ box-sizing:border-box; }
.sv-cat.sv-cat [hidden]{ display:none; }
/* "html" in testa: un gradino sopra il kit di Elementor (.elementor-kit-N button:hover/:focus,
   che a ogni bottone dà bordo verde e angoli da 10 px) e sotto le nostre classi (.sv-cat.sv-cat .x),
   così ogni bottone tiene il bordo che dichiara e gli altri restano senza (0.16.3) */
html .sv-cat.sv-cat button{
  font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer;
  box-shadow:none; text-transform:none; letter-spacing:inherit; line-height:inherit; min-height:0;
  border-radius:0; text-align:left; -webkit-tap-highlight-color:transparent;
  /* il tema mette i bottoni su una riga sola: qui il testo va a capo, salvo dove una classe dice il contrario */
  white-space:normal; height:auto; max-width:100%;
}
.sv-cat.sv-cat button:disabled{ cursor:default; }
.sv-cat.sv-cat :is(h1,h2,h3,h4){
  margin:0; font-family:var(--c-display); font-weight:900; color:var(--c-ink);
  text-transform:none; letter-spacing:-.015em; line-height:1.12;
}
.sv-cat.sv-cat p{ margin:0; }
.sv-cat.sv-cat img{ max-width:100%; height:auto; border-radius:0; box-shadow:none; }
.sv-cat.sv-cat svg{ flex:none; }
.sv-cat.sv-cat :focus-visible{ outline:2px solid var(--c-green); outline-offset:2px; border-radius:6px; }
.sv-cat.sv-cat .svc-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.sv-cat.sv-cat-wrap{ container-type:inline-size; container-name:svcat; width:100%; background:var(--c-surface); }
/*
 * Vuoti fra i widget (stessa correzione di Elementor Widgets 0.7.2, qui per le
 * pagine dove shared.css non c'è): sul telefono Elementor manda a capo i
 * contenitori, e in un contenitore a colonna che va a capo il browser misura
 * le nostre radici (container query) più alte del contenuto. Senza a capo il
 * blocco segue il contenuto. Unica regola fuori dalla radice .sv-cat.
 */
:is(.e-con, .e-con-inner):is(.e-con, .e-con-inner):has(> [class*="elementor-widget-savorita_"]){ flex-wrap:nowrap; }

.sv-cat.sv-cat .svc-wrap{ width:100%; max-width:1280px; margin:0 auto; padding-inline:16px; }
@container svcat (min-width:1000px){ .sv-cat.sv-cat .svc-wrap{ padding-inline:28px; } }

/* in attesa dei dati */
.sv-cat.sv-cat .svc-wait{ padding:60px 16px; text-align:center; color:var(--c-ink-3); font-weight:700; }

/* ---------- bottoni ---------- */
.sv-cat.sv-cat :is(.svc-btn,[data-svc~="btn"]){
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent;
  border-radius:11px; padding:10px 14px; font-size:14px; font-weight:800; line-height:1.2; white-space:nowrap;
  text-decoration:none; cursor:pointer;
}
.sv-cat.sv-cat :is(.svc-btn,[data-svc~="btn"]) svg{ width:16px; height:16px; }
.sv-cat.sv-cat :is(.svc-btn-green,[data-svc~="b-green"]){ background:var(--c-green); color:#fff; }
.sv-cat.sv-cat .svc-btn-ink{ background:var(--c-ink); color:#fff; }
.sv-cat.sv-cat :is(.svc-btn-line,[data-svc~="b-line"]){ background:var(--c-surface); color:var(--c-ink); border-color:var(--c-line-2); }
.sv-cat.sv-cat :is(.svc-btn-yellow,[data-svc~="b-yellow"]){ background:var(--c-yellow); color:var(--c-ink); }
.sv-cat.sv-cat .svc-btn-ghost{ background:none; color:var(--c-ink-2); padding:8px 6px; text-decoration:underline; text-underline-offset:3px; }
.sv-cat.sv-cat :is(.svc-link,[data-svc~="link"]){
  display:inline-flex; align-items:center; gap:6px; background:none; padding:6px 4px; font-size:13px; font-weight:800;
  color:var(--c-ink-2); text-decoration:none;
}
.sv-cat.sv-cat :is(.svc-link,[data-svc~="link"]):hover{ color:var(--c-ink); }
.sv-cat.sv-cat :is(.svc-link,[data-svc~="link"]) svg{ width:15px; height:15px; }
.sv-cat.sv-cat :is(.svc-link-green,[data-svc~="l-green"]){ color:var(--c-green-ink); text-decoration:underline; text-underline-offset:3px; }

/* ---------- interruttori a segmenti (schede, Viewing as, Your place) ---------- */
.sv-cat.sv-cat .svc-tabs{ display:flex; gap:3px; background:var(--c-surface-3); border-radius:12px; padding:3px; }
.sv-cat.sv-cat .svc-tab{ background:none; padding:8px 13px; border-radius:9px; font-size:13.5px; font-weight:800; color:var(--c-ink-2); white-space:nowrap; text-align:center; }
.sv-cat.sv-cat .svc-tab[aria-selected="true"]{ background:var(--c-surface); color:var(--c-ink); box-shadow:var(--c-shadow-1); }
.sv-cat.sv-cat .svc-view{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-view .svc-tab{ padding:7px 11px; font-size:13px; }
.sv-cat.sv-cat .svc-lockpill{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:7px 12px;
  background:var(--c-green-soft); color:var(--c-green-ink); font-size:13px; font-weight:800; white-space:nowrap;
}
.sv-cat.sv-cat .svc-lockpill svg{ width:14px; height:14px; }
.sv-cat.sv-cat .svc-subrow{ display:flex; align-items:center; gap:8px; padding-top:12px; min-width:0; }
.sv-cat.sv-cat .svc-subrow > span{ flex:none; font-size:12px; font-weight:800; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-subsel{ display:flex; gap:2px; background:var(--c-surface-3); border-radius:10px; padding:2px; overflow-x:auto; scrollbar-width:none; min-width:0; }
.sv-cat.sv-cat .svc-subsel::-webkit-scrollbar{ display:none; }
.sv-cat.sv-cat .svc-sub{ flex:none; background:none; padding:5px 9px; border-radius:8px; font-size:12px; font-weight:800; color:var(--c-ink-2); white-space:nowrap; }
.sv-cat.sv-cat .svc-sub[aria-selected="true"]{ background:var(--c-surface); color:var(--c-ink); box-shadow:var(--c-shadow-1); }

/* ---------- Shop: barra in alto ----------
   Lo spazio per l'header non è del catalogo: l'header glass se lo riserva da
   solo nella pagina (.sv-hdr-space). Qui la barra parte subito sotto. */
.sv-cat.sv-cat .svc-top{ position:sticky; top:0; z-index:12; background:var(--c-surface); border-bottom:1px solid var(--c-line); }
/* agganciata in cima passa sotto la tacca del telefono: come l'header, ne lascia lo spazio */
.sv-cat.sv-cat .svc-shop.is-stuck:not(.is-brand) .svc-top{ padding-top:env(safe-area-inset-top,0px); }
/* nella pagina marchio la barra si ferma sotto l'header del sito (sticky_top) */
.sv-cat.sv-cat .svc-shop.is-brand .svc-top{ top:var(--svc-bar-top,0px); }
.sv-cat.sv-cat .svc-top .svc-wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding-block:12px;
  transition:padding .35s cubic-bezier(.32,.72,0,1);
}
/* scesa la pagina, la barra prende il posto dell'header: resta lo spazio per la capsula a destra */
.sv-cat.sv-cat .svc-shop.is-stuck .svc-top .svc-wrap{ padding-right:150px; min-height:var(--sv-bar-h,76px); }
.sv-cat.sv-cat .svc-search{
  flex:1 1 220px; display:flex; align-items:center; gap:8px; height:44px; border-radius:12px;
  background:var(--c-surface-3); padding:0 12px; color:var(--c-ink-3); min-width:0; margin:0;
  transition:margin .35s cubic-bezier(.32,.72,0,1);
}
.sv-cat.sv-cat .svc-search svg{ width:18px; height:18px; }
.sv-cat.sv-cat .svc-search .svc-q{
  flex:1; min-width:0; height:auto; border:0; background:transparent; outline:none; box-shadow:none; padding:0; margin:0;
  font:600 15px var(--c-ui); color:var(--c-ink); border-radius:0;
}
.sv-cat.sv-cat .svc-search .svc-q::placeholder{ color:var(--c-ink-3); }
@container svcat (max-width:699px){
  .sv-cat.sv-cat .svc-top .svc-wrap{ column-gap:6px; row-gap:8px; padding-block:10px; }
  .sv-cat.sv-cat .svc-shop.is-stuck .svc-top .svc-wrap{ padding-right:16px; min-height:0; }
  .sv-cat.sv-cat .svc-shop.is-stuck .svc-search{ margin-right:100px; }
  .sv-cat.sv-cat .svc-top .svc-search{ flex:1 1 100%; }
  .sv-cat.sv-cat .svc-top .svc-wrap > .svc-tabs{ flex:1 1 0; min-width:0; padding:2px; }
  .sv-cat.sv-cat .svc-top .svc-view{ flex:1.25 1 0; min-width:0; }
  .sv-cat.sv-cat .svc-top .svc-view > span:first-child{ display:none; }
  .sv-cat.sv-cat .svc-top .svc-view .svc-tabs{ width:100%; padding:2px; }
  .sv-cat.sv-cat .svc-top .svc-tab{ flex:1 1 auto; padding:5px 3px; font-size:12px; border-radius:8px; }
  .sv-cat.sv-cat .svc-top .svc-lockpill{ width:100%; justify-content:center; padding:6px 10px; font-size:12px; }
}
.sv-cat.sv-cat .svc-shop .svc-subrow{ justify-content:flex-end; }
@container svcat (max-width:699px){ .sv-cat.sv-cat .svc-shop .svc-subrow{ justify-content:flex-start; } }

/* ---------- la base scritta dal server: ciò che c'è nella pagina prima dello script (e per chi legge l'HTML) ---------- */
/* in cima il posto della barra di ricerca (.svc-top) che lo script metterà lì, non dell'header:
   69 px su desktop, 104 su telefono (ricerca + una riga), così il titolo non salta */
.sv-cat.sv-cat .svc-base{ padding-block:69px 60px; }
@container svcat (max-width:699px){ .sv-cat.sv-cat .svc-base{ padding-top:104px; } }
.sv-cat.sv-cat-wrap[data-sv-catalog="vetrina"] .svc-base{ padding-top:34px; }
.sv-cat.sv-cat .svc-base-h{ margin:22px 0 8px; font:800 11px var(--c-ui); letter-spacing:.11em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat :is(.svc-base-links,.svc-base-list){ list-style:none; margin:0; padding:0; }
.sv-cat.sv-cat .svc-base-links{ display:flex; flex-wrap:wrap; gap:6px; }
.sv-cat.sv-cat .svc-base-links [data-svc~="base"]{ display:block; border-radius:999px; padding:6px 12px; background:var(--c-surface-3); color:var(--c-ink); font-size:13px; font-weight:800; text-decoration:none; }
.sv-cat.sv-cat .svc-base-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; margin-top:22px; }
@container svcat (min-width:620px){ .sv-cat.sv-cat .svc-base-list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 16px; } }
@container svcat (min-width:1000px){ .sv-cat.sv-cat .svc-base-list{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.sv-cat.sv-cat .svc-base-list li{ margin:0; min-width:0; }
.sv-cat.sv-cat .svc-base-list [data-svc~="base"]{ display:block; color:var(--c-ink); text-decoration:none; font-family:var(--c-display); font-weight:800; font-size:15px; line-height:1.22; }
.sv-cat.sv-cat .svc-base-list img{ display:block; width:100%; aspect-ratio:1; height:auto; object-fit:contain; padding:10%; border-radius:16px; background:var(--c-img); margin-bottom:8px; }
.sv-cat.sv-cat .svc-base-list small{ display:block; margin-top:3px; font-size:12px; font-weight:700; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-base-list .svc-base-x{ font-weight:600; color:var(--c-blue-ink); }
.sv-cat.sv-cat .svc-base-sels{ margin:0; padding-left:18px; font-size:14px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-base-sels [data-svc~="base"]{ color:var(--c-green-ink); font-weight:800; }

/* archivio di un termine: immagine d'intestazione */
.sv-cat.sv-cat .svc-arch-img{ margin-top:18px; border-radius:20px; overflow:hidden; background:var(--c-img); aspect-ratio:4/1; min-height:120px; }
.sv-cat.sv-cat .svc-arch-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.sv-cat.sv-cat .svc-head :is(.svc-all,[data-svc~="all"]){ margin-left:auto; }

/* ---------- intestazione ---------- */
.sv-cat.sv-cat .svc-head{ padding-block:22px 6px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 20px; }
.sv-cat.sv-cat .svc-eb{ font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-h1{ margin:4px 0 0; font-size:clamp(26px,3.2cqw,38px); letter-spacing:-.025em; line-height:1.05; text-wrap:balance; }
.sv-cat.sv-cat .svc-sub-t{ margin:6px 0 0; font-size:14.5px; color:var(--c-ink-2); max-width:62ch; line-height:1.5; }
.sv-cat.sv-cat .svc-who{ margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-who b{ color:var(--c-ink); }
.sv-cat.sv-cat .svc-av{ width:24px; height:24px; border-radius:50%; background:var(--c-green); color:#fff; display:grid; place-items:center; font:900 10px var(--c-display); }
@container svcat (max-width:699px){ .sv-cat.sv-cat .svc-who{ display:none; } }

.sv-cat.sv-cat .svc-ask{ margin-block:12px 4px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; border-radius:16px; background:var(--c-yellow-soft); padding:14px 16px; }
.sv-cat.sv-cat .svc-ask p{ flex:1 1 260px; font-size:14.5px; font-weight:700; line-height:1.4; color:var(--c-ink); }
.sv-cat.sv-cat .svc-ask p small{ display:block; font-weight:600; color:var(--c-ink-2); font-size:13px; }
.sv-cat.sv-cat .svc-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- fila delle selezioni ---------- */
.sv-cat.sv-cat .svc-selhead{ display:flex; align-items:baseline; gap:10px; padding-block:18px 10px; }
.sv-cat.sv-cat .svc-selhead h2{ font-size:20px; }
.sv-cat.sv-cat .svc-selhead span{ font-size:13px; color:var(--c-ink-3); font-weight:700; }
/* caroselli: si vede sempre un pezzo dell'elemento dopo (--n non è mai intero in pratica: toglie 28px) */
.sv-cat.sv-cat .svc-rail{
  --n:1.2; --g:12px;
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 28px - (var(--n) - 1) * var(--g)) / var(--n)); gap:var(--g);
  overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:8px; scrollbar-width:thin;
}
@container svcat (min-width:620px){ .sv-cat.sv-cat .svc-rail{ --n:2; } }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-rail{ --n:3; } }
@container svcat (min-width:1180px){ .sv-cat.sv-cat .svc-rail{ --n:4; } }
.sv-cat.sv-cat .svc-sel{
  position:relative; scroll-snap-align:start; display:flex; flex-direction:column; border:1.5px solid transparent;
  border-radius:18px; overflow:hidden; background:var(--tint,var(--c-green-soft)); color:var(--c-ink); min-height:208px;
  transition:transform .25s ease, border-color .2s;
}
.sv-cat.sv-cat .svc-sel:hover{ transform:translateY(-2px); }
.sv-cat.sv-cat .svc-sel[aria-pressed="true"]{ border-color:var(--c-ink); }
.sv-cat.sv-cat .svc-sel[data-tint="yellow"]{ --tint:var(--c-yellow-soft); }
.sv-cat.sv-cat .svc-sel[data-tint="red"]{ --tint:var(--c-red-soft); }
.sv-cat.sv-cat .svc-sel[data-tint="blue"]{ --tint:var(--c-blue-soft); }
.sv-cat.sv-cat .svc-sel-pics{ height:104px; display:flex; align-items:flex-end; justify-content:center; padding-top:12px; }
.sv-cat.sv-cat .svc-sel-pics img{ width:82px; height:82px; object-fit:contain; border-radius:14px; background:var(--c-img); box-shadow:var(--c-shadow-1); margin:0 -10px; }
.sv-cat.sv-cat .svc-sel-pics img:nth-child(1){ transform:rotate(-7deg) translateY(4px); }
.sv-cat.sv-cat .svc-sel-pics img:nth-child(2){ position:relative; z-index:1; width:90px; height:90px; }
.sv-cat.sv-cat .svc-sel-pics img:nth-child(3){ transform:rotate(7deg) translateY(4px); }
.sv-cat.sv-cat .svc-sel-body{ display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px; flex:1; }
.sv-cat.sv-cat .svc-sel-name{ font-family:var(--c-display); font-weight:900; font-size:17px; letter-spacing:-.01em; line-height:1.15; }
.sv-cat.sv-cat .svc-sel-why{ font-size:12.5px; line-height:1.4; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-sel-count{ margin-top:auto; padding-top:6px; font-size:12px; font-weight:800; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-sel-for{ position:absolute; top:10px; left:10px; z-index:2; border-radius:999px; padding:4px 9px; background:var(--c-ink); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.04em; }
.sv-cat.sv-cat .svc-sel-for.is-yellow{ background:var(--c-yellow); color:var(--c-ink); }

/* ---------- filtri attivi ---------- */
.sv-cat.sv-cat .svc-active{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-block:14px 4px; }
.sv-cat.sv-cat .svc-from{ display:inline-flex; align-items:center; border-radius:999px; padding:6px 12px; background:var(--c-ink); color:#fff; font-size:12.5px; font-weight:800; }
.sv-cat.sv-cat .svc-chip{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 8px 6px 12px; background:var(--c-surface-3); font-size:12.5px; font-weight:800; color:var(--c-ink); }
.sv-cat.sv-cat .svc-chip small{ font-weight:700; color:var(--c-ink-3); font-size:inherit; }
.sv-cat.sv-cat .svc-chip-x{ background:none; color:inherit; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; }
.sv-cat.sv-cat .svc-chip-x:hover{ background:rgba(127,127,127,.2); }
.sv-cat.sv-cat .svc-chip-x svg{ width:12px; height:12px; }
.sv-cat.sv-cat .svc-spacer{ flex:1; }

/* ---------- corpo: colonna filtri + risultati ---------- */
.sv-cat.sv-cat .svc-body{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding-block:10px 96px; }
.sv-cat.sv-cat .svc-side{ display:none; }
.sv-cat.sv-cat .svc-main{ min-width:0; }
.sv-cat.sv-cat .svc-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.sv-cat.sv-cat .svc-count{ font-size:14px; font-weight:800; }
.sv-cat.sv-cat .svc-count small{ font-weight:600; color:var(--c-ink-3); font-size:inherit; }
.sv-cat.sv-cat .svc-push{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.sv-cat.sv-cat .svc-sort{
  width:auto; height:auto; border:1px solid var(--c-line-2); background-color:var(--c-surface); border-radius:10px;
  padding:8px 10px; font:700 13px var(--c-ui); color:var(--c-ink); box-shadow:none; margin:0;
}
@container svcat (min-width:1000px){
  .sv-cat.sv-cat .svc-body{ grid-template-columns:250px minmax(0,1fr); }
  .sv-cat.sv-cat .svc-side{ display:block; position:sticky; top:calc(var(--sv-bar-h,76px) + 16px); align-self:start; max-height:calc(100vh - var(--sv-bar-h,76px) - 32px); overflow:auto; padding-right:4px; }
  .sv-cat.sv-cat .svc-filtbtn{ display:none; }
}

.sv-cat.sv-cat .svc-fc{ border-top:1px solid var(--c-line); padding-block:12px; }
.sv-cat.sv-cat .svc-fc:first-child{ border-top:0; padding-top:0; }
.sv-cat.sv-cat .svc-fc h3{ margin:0 0 2px; font:800 11px var(--c-ui); letter-spacing:.11em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-fc h4{ margin:10px 0 2px; font:800 12.5px var(--c-ui); letter-spacing:0; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-fc-note{ margin:0 0 6px; font-size:12px; color:var(--c-ink-2); line-height:1.35; }
.sv-cat.sv-cat .svc-fc-note b{ color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-opt{ display:flex; align-items:center; gap:9px; width:100%; background:none; padding:6px 4px; border-radius:8px; font-size:14px; font-weight:600; color:var(--c-ink); }
.sv-cat.sv-cat .svc-opt:hover{ background:var(--c-surface-2); }
.sv-cat.sv-cat .svc-opt:disabled{ opacity:.38; background:none; }
.sv-cat.sv-cat .svc-bx{ flex:none; width:18px; height:18px; border-radius:5px; border:1.5px solid var(--c-line-2); display:grid; place-items:center; background:var(--c-surface); color:#fff; }
.sv-cat.sv-cat .svc-bx svg{ width:12px; height:12px; opacity:0; }
.sv-cat.sv-cat .svc-opt[aria-pressed="true"] .svc-bx{ background:var(--c-green); border-color:var(--c-green); }
.sv-cat.sv-cat .svc-opt[aria-pressed="true"] .svc-bx svg{ opacity:1; }
.sv-cat.sv-cat .svc-lab{ flex:1; min-width:0; }
.sv-cat.sv-cat .svc-lab small{ display:block; font-size:11.5px; color:var(--c-ink-3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-cat.sv-cat .svc-n{ font-size:12px; font-weight:700; color:var(--c-ink-3); font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-fc-more{ background:none; padding:4px; font-size:12.5px; font-weight:800; color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-switch{ display:flex; align-items:center; gap:10px; width:100%; background:none; padding:4px; font-size:14px; font-weight:700; color:var(--c-ink); }
.sv-cat.sv-cat .svc-switch small{ color:var(--c-ink-3); font-weight:700; font-size:inherit; }
.sv-cat.sv-cat .svc-tr{ flex:none; width:36px; height:22px; border-radius:11px; background:var(--c-line-2); position:relative; transition:background .2s; }
.sv-cat.sv-cat .svc-tr::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; }
.sv-cat.sv-cat .svc-switch[aria-checked="true"] .svc-tr{ background:var(--c-green); }
.sv-cat.sv-cat .svc-switch[aria-checked="true"] .svc-tr::after{ transform:translateX(14px); }

/* ---------- griglia e card ---------- */
.sv-cat.sv-cat .svc-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
@container svcat (min-width:620px){ .sv-cat.sv-cat .svc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 16px; } }
@container svcat (min-width:1180px){ .sv-cat.sv-cat .svc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sv-cat.sv-cat .svc-card{ display:flex; flex-direction:column; min-width:0; }
.sv-cat.sv-cat .svc-c-top{ position:relative; }
.sv-cat.sv-cat .svc-c-img{ position:relative; display:block; text-decoration:none; width:100%; aspect-ratio:1; border-radius:16px; background:var(--c-img); overflow:hidden; }
.sv-cat.sv-cat .svc-c-img img{ width:100%; height:100%; object-fit:contain; padding:10%; transition:transform .5s var(--c-out); }
.sv-cat.sv-cat .svc-c-img:hover img{ transform:scale(1.05); }
.sv-cat.sv-cat .svc-badges{ position:absolute; left:8px; top:8px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; pointer-events:none; }
.sv-cat.sv-cat .svc-bdg{ border-radius:7px; padding:3px 7px; font-size:10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.sv-cat.sv-cat .svc-bdg.is-pick{ background:var(--c-yellow); color:var(--c-ink); }
.sv-cat.sv-cat .svc-bdg.is-dop{ background:var(--c-ink); color:#fff; }
/* Il cuore Savorita: due livelli (interno e contorno), niente disco sotto, un'ombra leggera per
   staccarlo sia dalle foto sia dal fondo chiaro. Mockup: mockups/heart/. */
.sv-cat.sv-cat :is(.svc-heart,.svc-fly){
  --svc-h1:#77777794; --svc-h2:#fff; --svc-cur:1; --svc-size:24px;
}
.sv-cat.sv-cat .svc-heart{
  position:absolute; top:4px; right:4px; width:40px; height:40px; background:none; color:inherit;
  display:grid; place-items:center; overflow:visible;
}
.sv-cat.sv-cat :is(.svc-heart,.svc-fly)[aria-pressed="true"]{ --svc-h1:#F0081F; --svc-cur:1.2; }
.sv-cat.sv-cat .svc-hic{ display:block; line-height:0; transform:scale(var(--svc-cur)); transition:transform .18s cubic-bezier(.2,.7,.3,1); }
.sv-cat.sv-cat .svc-hx{ display:block; width:var(--svc-size); height:var(--svc-size); filter:drop-shadow(0 1px 2px rgba(41,50,65,.35)); }
/* solo dove c'è un puntatore vero: sul telefono l'hover resterebbe attaccato */
@media (hover:hover){ .sv-cat.sv-cat .svc-heart:hover .svc-hic{ transform:scale(calc(var(--svc-cur) * 1.3)); } }
.sv-cat.sv-cat .svc-heart:active .svc-hic{ transform:scale(calc(var(--svc-cur) * .9)); }
.sv-cat.sv-cat .svc-heart.is-pop .svc-hic{ animation:svc-pop .5s ease; }
@keyframes svc-pop{ 0%{transform:scale(var(--svc-cur))} 35%{transform:scale(calc(var(--svc-cur) * 1.35))} 60%{transform:scale(calc(var(--svc-cur) * .9))} 100%{transform:scale(var(--svc-cur))} }
.sv-cat.sv-cat .svc-heart.is-flat{ position:static; flex:none; }
.sv-cat.sv-cat .svc-burst{ position:absolute; top:50%; left:50%; width:0; height:0; pointer-events:none; }
.sv-cat.sv-cat .svc-burst i{
  position:absolute; top:0; left:0; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:#F0081F; opacity:0;
  --a:calc(var(--i) * 30deg); --d:30px;
}
.sv-cat.sv-cat .svc-burst i:nth-child(odd){ --d:42px; }
.sv-cat.sv-cat .svc-heart.is-burst .svc-burst i{ animation:svc-burst .62s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes svc-burst{ 0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(.5)} 60%{opacity:1} 100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1.1)} }
/* il cuoricino che vola verso l'icona utente dell'header */
.sv-cat.sv-cat .svc-fly{ position:fixed; z-index:3; pointer-events:none; transform:translate(-50%,-50%); transition:transform .65s cubic-bezier(.5,0,.3,1), opacity .65s ease-in; }
.sv-cat.sv-cat .svc-c-brand{ display:flex; align-items:center; gap:8px; margin-top:10px; background:none; min-width:0; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-c-logo{ flex:none; width:38px; height:26px; display:grid; place-items:center; border-radius:6px; background:#fff; border:1px solid var(--c-line); }
.sv-cat.sv-cat .svc-c-logo img{ max-width:32px; max-height:20px; object-fit:contain; }
.sv-cat.sv-cat .svc-c-brand span:last-child{ font-size:11.5px; font-weight:800; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-cat.sv-cat .svc-c-brand:hover span:last-child{ color:var(--c-green-ink); text-decoration:underline; }
.sv-cat.sv-cat .svc-c-name{
  margin:6px 0 0; font-weight:800; font-size:15.5px; line-height:1.22; letter-spacing:-.005em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.44em;
}
.sv-cat.sv-cat .svc-c-name > :is(a,button){ color:inherit; text-decoration:none; background:none; font:inherit; text-align:left; }
.sv-cat.sv-cat .svc-c-name > :is(a,button):hover{ color:var(--c-green-ink); }
.sv-cat.sv-cat span.svc-c-img{ cursor:pointer; }
.sv-cat.sv-cat .svc-c-meta{ margin-top:4px; font-size:12px; color:var(--c-ink-3); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* pastiglie del segmento: una riga, al massimo due, la seconda si taglia */
.sv-cat.sv-cat .svc-c-why{ margin-top:8px; display:flex; gap:4px; overflow:hidden; min-height:23px; }
.sv-cat.sv-cat .svc-c-why span{ flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:6px; padding:3px 7px; font-size:11px; font-weight:800; background:var(--c-blue-soft); color:var(--c-blue-ink); }
.sv-cat.sv-cat .svc-c-why span:first-child{ flex-shrink:0; max-width:62%; }
.sv-cat.sv-cat .svc-c-why span.is-style{ background:var(--c-green-soft); color:var(--c-green-ink); }

.sv-cat.sv-cat .svc-price{ margin-top:10px; border-top:1px solid var(--c-line); padding-top:9px; display:flex; flex-direction:column; gap:3px; }
.sv-cat.sv-cat .svc-p-main{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 6px; }
.sv-cat.sv-cat .svc-p-main b{ font-family:var(--c-display); font-weight:900; font-size:19px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-p-main small{ font-size:12px; color:var(--c-ink-3); font-weight:700; }
.sv-cat.sv-cat .svc-p-line{ font-size:12px; color:var(--c-ink-2); font-variant-numeric:tabular-nums; line-height:1.35; }
.sv-cat.sv-cat .svc-p-lock{
  display:flex; align-items:center; gap:7px; background:var(--c-surface-2); border-radius:10px; padding:7px 9px; width:100%;
  white-space:nowrap; color:var(--c-green-ink); font-size:12px; font-weight:800; line-height:1.25; text-decoration:none;
}
.sv-cat.sv-cat .svc-p-lock svg{ width:15px; height:15px; }
/* il prezzo vero non c'è: sono solo segni sfocati */
.sv-cat.sv-cat .svc-blur{ font-family:var(--c-display); font-weight:900; font-size:15px; filter:blur(5px); user-select:none; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-p-lock span:last-child{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sv-cat.sv-cat .svc-p-lock.is-wait{ background:var(--c-gold-soft); color:var(--c-gold-ink); }
.sv-cat.sv-cat .svc-lt-s{ display:none; }
@container svcat (max-width:699px){ .sv-cat.sv-cat .svc-lt-l{ display:none; } .sv-cat.sv-cat .svc-lt-s{ display:inline; } }
.sv-cat.sv-cat .svc-p-msrp{ font-size:12px; color:var(--c-ink-2); font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-p-msrp b{ color:var(--c-ink); }
.sv-cat.sv-cat .svc-margin{ align-self:flex-start; margin-top:2px; border-radius:6px; padding:3px 7px; background:var(--c-green-soft); color:var(--c-green-ink); font-size:11.5px; font-weight:900; font-variant-numeric:tabular-nums; }

.sv-cat.sv-cat .svc-c-acts{ margin-top:10px; display:flex; align-items:center; gap:6px; }
.sv-cat.sv-cat .svc-ib{ width:34px; height:34px; border-radius:10px; border:1px solid var(--c-line); background:var(--c-surface); display:grid; place-items:center; color:var(--c-ink-2); flex:none; }
.sv-cat.sv-cat .svc-ib:hover{ border-color:var(--c-line-2); color:var(--c-ink); }
.sv-cat.sv-cat .svc-ib svg{ width:16px; height:16px; }
.sv-cat.sv-cat .svc-req{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; border-radius:10px;
  border:1.5px solid var(--c-green); background:var(--c-surface); color:var(--c-green-ink); font-size:13px; font-weight:800;
  min-width:0; white-space:nowrap;
}
.sv-cat.sv-cat .svc-req[aria-pressed="true"]{ background:var(--c-green); color:#fff; }
.sv-cat.sv-cat .svc-req svg{ width:15px; height:15px; }
.sv-cat.sv-cat .svc-req.is-wide{ height:auto; padding:10px 14px; font-size:14px; border-radius:11px; }
.sv-cat.sv-cat .svc-det{ flex:1; height:34px; border-radius:10px; border:1px solid var(--c-line); background:var(--c-surface); font-size:13px; font-weight:800; color:var(--c-ink-2); text-align:center; }

.sv-cat.sv-cat .svc-more{ display:flex; justify-content:center; margin-top:26px; }
.sv-cat.sv-cat .svc-empty{ border:1.5px dashed var(--c-line-2); border-radius:18px; padding:26px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.sv-cat.sv-cat .svc-empty h3{ font-size:20px; }
.sv-cat.sv-cat .svc-empty p{ color:var(--c-ink-2); font-size:14px; max-width:48ch; }
.sv-cat.sv-cat .svc-empty .svc-row{ justify-content:center; }

/* ---------- scheda Producers ---------- */
.sv-cat.sv-cat .svc-pr-regs{ display:flex; flex-wrap:wrap; gap:6px; padding-block:16px 14px; }
.sv-cat.sv-cat .svc-rchip{ border:1.5px solid var(--c-line); background:var(--c-surface); border-radius:999px; padding:7px 12px; font-size:13px; font-weight:800; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-rchip[aria-pressed="true"]{ border-color:var(--c-ink); background:var(--c-ink); color:#fff; }
.sv-cat.sv-cat .svc-rchip small{ font-weight:700; opacity:.7; font-size:inherit; }
.sv-cat.sv-cat .svc-pr-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding-bottom:96px; }
@container svcat (min-width:620px){ .sv-cat.sv-cat .svc-pr-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container svcat (min-width:1000px){ .sv-cat.sv-cat .svc-pr-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sv-cat.sv-cat .svc-pr{ position:relative; border:1px solid var(--c-line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--c-surface); }
.sv-cat.sv-cat .svc-pr-top{ display:flex; gap:12px; align-items:center; }
.sv-cat.sv-cat .svc-pr-logo{ flex:none; width:84px; height:62px; border-radius:12px; background:#fff; border:1px solid var(--c-line); display:grid; place-items:center; }
.sv-cat.sv-cat .svc-pr-logo img{ max-width:70px; max-height:48px; object-fit:contain; }
.sv-cat.sv-cat .svc-pr h3{ font-size:18px; padding-right:40px; }
.sv-cat.sv-cat .svc-pr p{ font-size:13.5px; line-height:1.45; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-pr .svc-heart{ top:8px; right:8px; }
.sv-cat.sv-cat .svc-pr-row{ display:flex; flex-wrap:wrap; gap:5px; }
.sv-cat.sv-cat .svc-pr-row > span:first-child{ width:100%; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-pr-reg{ border-radius:7px; padding:4px 8px; background:var(--c-green-soft); color:var(--c-green-ink); font-size:12px; font-weight:800; }
.sv-cat.sv-cat .svc-pr-reg:hover{ background:var(--c-green); color:#fff; }
.sv-cat.sv-cat .svc-pr-cat{ border-radius:7px; padding:4px 8px; background:var(--c-surface-3); font-size:12px; font-weight:700; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-pr-thumbs{ display:flex; gap:6px; }
.sv-cat.sv-cat .svc-pr-thumbs img{ width:48px; height:48px; border-radius:10px; background:var(--c-img); object-fit:contain; padding:4px; }
.sv-cat.sv-cat .svc-pr > .svc-btn{ margin-top:auto; }

/* ---------- riquadro per i produttori italiani ---------- */
.sv-cat.sv-cat .svc-itbox{ position:relative; border-radius:20px; padding:20px; background:var(--c-surface); border:1.5px dashed var(--c-line-2); display:flex; flex-direction:column; gap:10px; margin-bottom:96px; }
.sv-cat.sv-cat .svc-itbox::before{ content:""; position:absolute; left:20px; top:0; width:54px; height:5px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,#009246 0 33.3%,#fff 33.3% 66.6%,#ce2b37 66.6%); }
.sv-cat.sv-cat .svc-itbox h3{ margin-top:6px; font-size:20px; }
.sv-cat.sv-cat .svc-itbox p{ font-size:14px; line-height:1.5; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-itbox .svc-row{ gap:8px 14px; margin-top:4px; }

/* =========================================================================
   Vetrina (home)
   ========================================================================= */
.sv-cat.sv-cat .svc-hm-intro{ padding-block:34px 0; }
.sv-cat.sv-cat .svc-hm-intro h2{ margin-top:6px; font-size:clamp(30px,4cqw,48px); letter-spacing:-.03em; line-height:1.02; }
.sv-cat.sv-cat .svc-hm-intro p{ margin-top:8px; font-size:16px; color:var(--c-ink-2); font-weight:600; }
.sv-cat.sv-cat .svc-hm-intro p + p{ font-size:14.5px; }
.sv-cat.sv-cat .svc-hm-bar{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:14px; }
.sv-cat.sv-cat .svc-hm-intro .svc-subrow{ padding-top:8px; }
.sv-cat.sv-cat :is(.svc-all,[data-svc~="all"]){
  display:inline-flex; align-items:center; gap:6px; background:none; padding:6px 0; font-size:14px; font-weight:800;
  color:var(--c-green-ink); white-space:nowrap; text-decoration:none;
}
.sv-cat.sv-cat :is(.svc-all,[data-svc~="all"]) svg{ width:15px; height:15px; }
.sv-cat.sv-cat .svc-hm-sec{ padding-block:36px 8px; }
.sv-cat.sv-cat .svc-hm-sec + .svc-hm-sec{ border-top:1px solid var(--c-line); }
.sv-cat.sv-cat .svc-hm-sec:last-child{ padding-bottom:60px; }
.sv-cat.sv-cat .svc-hm-hd{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 20px; margin-bottom:16px; }
.sv-cat.sv-cat .svc-hm-hd > div{ flex:1 1 360px; }
.sv-cat.sv-cat .svc-hm-hd h2{ margin-top:4px; font-size:clamp(24px,2.8cqw,34px); letter-spacing:-.025em; line-height:1.08; text-wrap:balance; }
.sv-cat.sv-cat .svc-hm-hd p{ margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--c-ink-2); max-width:62ch; }
.sv-cat.sv-cat .svc-hm-hd p .svc-mark{
  /* il tipo di locale scelto: grassetto e un tratto giallo che si disegna da sinistra */
  font-weight:900; color:var(--c-ink); padding:0 2px;
  background:linear-gradient(var(--c-yellow),var(--c-yellow)) no-repeat 0 92% / 100% .42em;
  animation:svc-mark .6s cubic-bezier(.2,.8,.2,1) .15s backwards;
}
@keyframes svc-mark{ from{ background-size:0 .42em; } }
.sv-cat.sv-cat .svc-hm-go{ display:flex; margin-top:8px; }

/* file di card, tessere, articoli, loghi: stessa regola del pezzo che sporge */
.sv-cat.sv-cat .svc-rail.is-prods{ --n:1.6; --g:16px; padding-bottom:10px; }
.sv-cat.sv-cat .svc-rail.is-prods > *{ scroll-snap-align:start; }
.sv-cat.sv-cat .svc-rail.is-tiles{ --n:2.2; }
.sv-cat.sv-cat .svc-rail.is-posts{ --n:1.3; --g:14px; }
.sv-cat.sv-cat .svc-rail.is-logos{ --n:3; --g:8px; padding-block:14px 6px; }
@container svcat (min-width:620px){
  .sv-cat.sv-cat .svc-rail.is-prods{ --n:3; } .sv-cat.sv-cat .svc-rail.is-tiles{ --n:4; }
  .sv-cat.sv-cat .svc-rail.is-posts{ --n:2; } .sv-cat.sv-cat .svc-rail.is-logos{ --n:5; }
}
@container svcat (min-width:900px){
  .sv-cat.sv-cat .svc-rail.is-prods{ --n:4; } .sv-cat.sv-cat .svc-rail.is-posts{ --n:3; } .sv-cat.sv-cat .svc-rail.is-logos{ --n:7; }
  /* le tessere da qui stanno in griglia */
  .sv-cat.sv-cat .svc-rail.is-tiles{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(var(--cols,6),minmax(0,1fr)); overflow:visible; }
}
@container svcat (min-width:1180px){ .sv-cat.sv-cat .svc-rail.is-prods{ --n:5; } }

.sv-cat.sv-cat .svc-tile{ position:relative; scroll-snap-align:start; display:flex; flex-direction:column; gap:6px; min-width:0; color:var(--c-ink); }
.sv-cat.sv-cat .svc-tile-im{ position:relative; display:block; width:100%; aspect-ratio:1; border-radius:18px; overflow:hidden; background:var(--c-img); }
.sv-cat.sv-cat .svc-tile-im img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--c-out); }
.sv-cat.sv-cat .svc-tile-im:hover img{ transform:scale(1.05); }
.sv-cat.sv-cat .svc-tile-t{ display:flex; flex-direction:column; gap:4px; width:100%; min-width:0; background:none; color:var(--c-ink); }
.sv-cat.sv-cat .svc-tile-t b{ overflow-wrap:break-word; hyphens:auto; font-family:var(--c-display); font-weight:900; font-size:16px; line-height:1.15; letter-spacing:-.01em; margin-top:2px; }
.sv-cat.sv-cat .svc-tile-t span{ font-size:12.5px; line-height:1.4; color:var(--c-ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sv-cat.sv-cat .svc-tile-t small{ font-size:12px; font-weight:800; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-tile-logos{ display:flex; gap:4px; flex-wrap:wrap; }
.sv-cat.sv-cat .svc-tile-logos i{ width:30px; height:22px; border-radius:5px; background:#fff; border:1px solid var(--c-line); display:grid; place-items:center; }
.sv-cat.sv-cat .svc-tile-logos img{ max-width:24px; max-height:16px; object-fit:contain; }

/* produttore in primo piano, e la stessa scheda nel pop-up */
.sv-cat.sv-cat .svc-spot{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; border-radius:24px; background:var(--c-surface-2); border:1px solid var(--c-line); padding:16px; overflow:hidden; }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-spot{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); padding:22px; gap:28px; } }
.sv-cat.sv-cat .svc-spot-img{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:1; max-height:440px; background:var(--c-img); }
.sv-cat.sv-cat .svc-spot-img > img{ width:100%; height:100%; object-fit:cover; }
.sv-cat.sv-cat .svc-lg{ position:absolute; left:12px; bottom:12px; width:96px; height:66px; border-radius:12px; background:#fff; display:grid; place-items:center; box-shadow:var(--c-shadow-1); }
.sv-cat.sv-cat .svc-lg img{ max-width:80px; max-height:50px; object-fit:contain; }
.sv-cat.sv-cat .svc-spot-b{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.sv-cat.sv-cat .svc-spot-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sv-cat.sv-cat .svc-spot-h h3{ margin-top:4px; font-size:clamp(24px,2.6cqw,32px); letter-spacing:-.02em; line-height:1.05; }
.sv-cat.sv-cat .svc-spot-b > p{ font-size:15px; line-height:1.5; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-spot-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:13px; color:var(--c-ink-2); font-weight:700; }
.sv-cat.sv-cat .svc-follow{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-follow i{ display:inline-flex; }
.sv-cat.sv-cat .svc-follow i span{ width:20px; height:20px; border-radius:50%; border:2px solid var(--c-surface-2); margin-left:-6px; background:var(--c); }
.sv-cat.sv-cat .svc-follow i span:first-child{ margin-left:0; }
.sv-cat.sv-cat .svc-spot-prods{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
/* l'altezza la dà l'immagine: Safari su iPhone ignora aspect-ratio su un bottone in griglia */
.sv-cat.sv-cat .svc-spot-prods button{ display:block; min-width:0; background:var(--c-img); border-radius:12px; overflow:hidden; }
.sv-cat.sv-cat .svc-spot-prods img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; padding:9%; }
.sv-cat.sv-cat :is(.svc-story,[data-svc~="story"]){ display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; align-items:center; border-radius:14px; background:var(--c-surface); border:1px solid var(--c-line); padding:10px; text-decoration:none; color:var(--c-ink); }
.sv-cat.sv-cat [data-svc~="story"] img{ width:84px; height:84px; border-radius:10px; object-fit:cover; }
.sv-cat.sv-cat [data-svc~="story"] small{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-green-ink); }
.sv-cat.sv-cat [data-svc~="story"] b{ display:block; font-family:var(--c-display); font-weight:900; font-size:15px; line-height:1.2; margin-top:2px; }
.sv-cat.sv-cat [data-svc~="story"] span span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; color:var(--c-ink-2); margin-top:3px; }
.sv-cat.sv-cat .svc-spot-acts{ display:flex; flex-wrap:wrap; gap:8px; }
.sv-cat.sv-cat .svc-more-stories{ display:flex; flex-direction:column; gap:6px; }
.sv-cat.sv-cat .svc-pf-lb{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat [data-svc~="mstory"]{ font-size:13.5px; font-weight:800; color:var(--c-ink); text-decoration:underline; text-underline-offset:3px; }

.sv-cat.sv-cat .svc-pr3{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:14px; }
@container svcat (min-width:700px){ .sv-cat.sv-cat .svc-pr3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sv-cat.sv-cat .svc-prc{ display:flex; flex-direction:column; gap:8px; border:1px solid var(--c-line); border-radius:18px; padding:12px; background:var(--c-surface); color:var(--c-ink); }
.sv-cat.sv-cat .svc-prc-im{ position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--c-img); }
.sv-cat.sv-cat .svc-prc-im > img{ width:100%; height:100%; object-fit:cover; }
.sv-cat.sv-cat .svc-prc .svc-lg{ left:8px; bottom:8px; width:64px; height:42px; border-radius:9px; }
.sv-cat.sv-cat .svc-prc .svc-lg img{ max-width:54px; max-height:32px; }
.sv-cat.sv-cat .svc-prc b{ font-family:var(--c-display); font-weight:900; font-size:17px; }
.sv-cat.sv-cat .svc-prc-m{ font-size:12.5px; color:var(--c-ink-2); font-weight:700; }
.sv-cat.sv-cat .svc-prc-pt{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.sv-cat.sv-cat .svc-prc-pt > *{ width:100%; aspect-ratio:1; border-radius:9px; background:var(--c-img); object-fit:contain; padding:8%; }
.sv-cat.sv-cat .svc-prc-ps{
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:9px; align-items:center; margin-top:auto;
  border-top:1px solid var(--c-line); padding-top:8px; font-family:var(--c-display); font-weight:800; font-size:13px; line-height:1.25;
}
.sv-cat.sv-cat .svc-prc-ps > :first-child{ width:40px; height:40px; border-radius:8px; object-fit:cover; background:var(--c-img); }
.sv-cat.sv-cat .svc-prc-ps > span{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sv-cat.sv-cat .svc-prc-ps small{ display:block; font:800 9.5px var(--c-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-plogo{ border:1.5px solid var(--c-line); background:#fff; border-radius:14px; height:70px; display:grid; place-items:center; padding:8px; scroll-snap-align:start; }
.sv-cat.sv-cat .svc-plogo img{ max-width:88px; max-height:48px; object-fit:contain; }
.sv-cat.sv-cat .svc-plogo[aria-pressed="true"]{ border-color:var(--c-ink); box-shadow:0 0 0 2px var(--c-ink) inset; }
.sv-cat.sv-cat .svc-hm-wide{ margin-top:18px; }
.sv-cat.sv-cat .svc-hm-wide .svc-itbox{ margin-bottom:0; }

.sv-cat.sv-cat [data-svc~="post"]{ display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--c-ink); scroll-snap-align:start; }
.sv-cat.sv-cat [data-svc~="post"] > span:first-child{ display:block; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--c-img); }
.sv-cat.sv-cat [data-svc~="post"] img{ width:100%; height:100%; object-fit:cover; }
.sv-cat.sv-cat [data-svc~="post"] small{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-green-ink); }
.sv-cat.sv-cat [data-svc~="post"] b{ font-family:var(--c-display); font-weight:900; font-size:16px; line-height:1.2; }
.sv-cat.sv-cat [data-svc~="post"] > span:last-child{ font-size:13px; line-height:1.45; color:var(--c-ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@container svcat (min-width:1100px){ .sv-cat.sv-cat .svc-rail.is-posts{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); overflow:visible; } }

/* anteprima (pannello largo) */
.sv-cat.sv-cat .svc-pv-top{ display:flex; gap:14px; align-items:center; }
.sv-cat.sv-cat .svc-pv-im{ flex:none; width:76px; height:76px; border-radius:16px; overflow:hidden; background:var(--c-img); display:grid; place-items:center; }
.sv-cat.sv-cat .svc-pv-im img{ width:100%; height:100%; object-fit:cover; }
.sv-cat.sv-cat .svc-pv-im.is-logo{ background:#fff; border:1px solid var(--c-line); }
.sv-cat.sv-cat .svc-pv-im.is-logo img{ width:auto; height:auto; max-width:60px; max-height:44px; object-fit:contain; }
.sv-cat.sv-cat .svc-pv-top > div{ flex:1; min-width:0; }
.sv-cat.sv-cat .svc-pv-top h2{ margin-top:2px; font-size:24px; letter-spacing:-.02em; line-height:1.08; }
.sv-cat.sv-cat .svc-pv-top p{ margin-top:4px; font-size:14px; line-height:1.45; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-pv-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.sv-cat.sv-cat .svc-pv-chips span{ border-radius:999px; padding:5px 10px; background:var(--c-surface-3); font-size:12px; font-weight:800; }
.sv-cat.sv-cat .svc-pv-chips small{ font-weight:700; color:var(--c-ink-3); margin-right:4px; font-size:inherit; }
.sv-cat.sv-cat .svc-pv-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-pv-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* pop-up del produttore: centrato, grande quanto il primo piano, loghi in fondo */
.sv-cat.sv-cat .svc-ov.is-pop{ justify-content:center; align-items:center; padding:24px; }
.sv-cat.sv-cat .svc-panel.is-pop{ width:min(1180px,100%); height:auto; max-height:100%; border-radius:24px; animation-name:svc-popin; animation-duration:.3s; }
@keyframes svc-popin{ from{transform:scale(.97);opacity:.4} }
.sv-cat.sv-cat .svc-panel.is-pop .svc-panel-h{ border-radius:24px 24px 0 0; }
.sv-cat.sv-cat .svc-panel.is-pop .svc-panel-b{ padding:18px 22px; }
.sv-cat.sv-cat .svc-panel.is-pop .svc-spot{ border:0; background:none; padding:0; }
.sv-cat.sv-cat .svc-panel-f.is-logos{ flex-direction:column; align-items:stretch; padding:12px 22px 16px; }
.sv-cat.sv-cat .svc-pf-logos{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(96px,1fr); gap:6px; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px; }
.sv-cat.sv-cat .svc-pf-logos .svc-plogo{ height:62px; border-radius:11px; padding:6px; }
.sv-cat.sv-cat .svc-pf-logos .svc-plogo img{ max-width:80px; max-height:44px; }
@container svcat (max-width:699px){
  .sv-cat.sv-cat .svc-ov.is-pop{ align-items:flex-end; padding:0; }
  .sv-cat.sv-cat .svc-panel.is-pop{ width:100%; height:96%; max-height:96%; border-radius:22px 22px 0 0; animation-name:svc-up; }
  .sv-cat.sv-cat .svc-panel.is-pop .svc-panel-b{ padding:14px 16px; }
  .sv-cat.sv-cat .svc-panel-f.is-logos{ padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px)); }
  .sv-cat.sv-cat .svc-pf-logos{ grid-auto-columns:104px; }
  .sv-cat.sv-cat .svc-pf-logos .svc-plogo{ height:64px; }
}

/* =========================================================================
   Scheda prodotto — mockup: mockups/product/ ("Scheda d'ordine", "Sintesi")
   La pagina arriva scritta dal server; lo script la anima.
   ========================================================================= */
.sv-cat.sv-cat .svc-pp{ display:flex; flex-direction:column; gap:30px; padding-block:16px 130px; }
.sv-cat.sv-cat .svc-pp-crumbs{ font-size:12.5px; font-weight:700; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-pp-crumbs a{ color:var(--c-ink-2); text-decoration:none; }
.sv-cat.sv-cat .svc-pp :is(h2){ font-size:24px; letter-spacing:-.02em; }
.sv-cat.sv-cat .svc-pp-fine{ font-size:12.5px; color:var(--c-ink-3); }
/* apertura */
.sv-cat.sv-cat .svc-pp-hero{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-pp-hero{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:36px; align-items:start; } }
.sv-cat.sv-cat .svc-pp-gal{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.sv-cat.sv-cat .svc-pp-main{ position:relative; aspect-ratio:1; border-radius:22px; background:var(--c-img); overflow:hidden; }
.sv-cat.sv-cat .svc-pp-main > img{ width:100%; height:100%; object-fit:contain; padding:9%; transition:transform .5s var(--c-out); }
.sv-cat.sv-cat .svc-pp-main > img.is-cover{ object-fit:cover; padding:0; }
.sv-cat.sv-cat .svc-pp-main .svc-badges{ left:12px; top:12px; }
.sv-cat.sv-cat .svc-bdg.is-soft{ background:rgba(255,255,255,.92); color:var(--c-ink); }
.sv-cat.sv-cat .svc-pp-main .svc-heart{ --svc-size:30px; width:52px; height:52px; top:8px; right:8px; }
/* miniature in una riga sola */
.sv-cat.sv-cat .svc-pp-thumbs{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.sv-cat.sv-cat .svc-pp-thumbs::-webkit-scrollbar{ display:none; }
.sv-cat.sv-cat .svc-pp-th{ flex:none; width:60px; height:60px; border-radius:12px; border:2px solid transparent; background:var(--c-img); overflow:hidden; }
.sv-cat.sv-cat .svc-pp-th[aria-pressed="true"]{ border-color:var(--c-ink); }
.sv-cat.sv-cat .svc-pp-th img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.sv-cat.sv-cat .svc-pp-th img.is-cover{ object-fit:cover; padding:0; }
.sv-cat.sv-cat .svc-pp-id{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.sv-cat.sv-cat .svc-pp-h1{ display:flex; flex-direction:column; gap:8px; }
.sv-cat.sv-cat .svc-pp-it{ font-family:var(--c-display); font-weight:900; font-size:clamp(28px,3.6cqw,44px); letter-spacing:-.03em; line-height:1.04; text-wrap:balance; }
.sv-cat.sv-cat .svc-pp-en{ font-family:var(--c-ui); font-weight:700; font-size:16px; letter-spacing:0; color:var(--c-green-ink); line-height:1.35; }
.sv-cat.sv-cat .svc-pp-by{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.sv-cat.sv-cat .svc-hand{ font-family:"Gloria Hallelujah",var(--c-display); font-size:17px; color:var(--c-green); transform:rotate(-3deg); }
.sv-cat.sv-cat [data-svc~="brand"]{ display:inline-flex; align-items:center; gap:8px; color:var(--c-ink); text-decoration:none; font-weight:800; font-size:13.5px; }
.sv-cat.sv-cat [data-svc~="brand"] i{ width:40px; height:28px; border-radius:7px; background:#fff; border:1px solid var(--c-line); display:grid; place-items:center; }
.sv-cat.sv-cat [data-svc~="brand"] img{ max-width:34px; max-height:20px; object-fit:contain; }
/* etichette cliccabili: categoria, regione, tag */
.sv-cat.sv-cat .svc-pp-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.sv-cat.sv-cat [data-svc~="chip"]{ display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:4px 11px 4px 4px; background:var(--c-surface-2); border:1px solid var(--c-line); color:var(--c-ink); text-decoration:none; font-size:13px; font-weight:800; }
.sv-cat.sv-cat [data-svc~="chip"]:hover{ border-color:var(--c-line-2); }
.sv-cat.sv-cat [data-svc~="chip"] img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.sv-cat.sv-cat .svc-pp-cta{ display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--c-line); padding-top:16px; }
.sv-cat.sv-cat .svc-pp-price .svc-p-main b{ font-size:28px; }
.sv-cat.sv-cat .svc-pp-price .svc-p-lock{ padding:10px 12px; font-size:14px; }
.sv-cat.sv-cat .svc-pp-acts{ display:flex; gap:8px; }
.sv-cat.sv-cat .svc-pp-go{ flex:1; min-width:0; white-space:normal; text-align:center; padding:13px 14px; font-size:15.5px; border-radius:14px; }
.sv-cat.sv-cat .svc-pp-acts .svc-ib{ flex:none; width:50px; height:auto; min-height:48px; border-radius:14px; border-color:var(--c-line-2); position:relative; overflow:visible; }
.sv-cat.sv-cat .svc-pp-hb{ --svc-size:26px; }
.sv-cat.sv-cat .svc-pp-hb[aria-pressed="true"]{ --svc-h1:#F0081F; border-color:#f5b4bc; background:#fff5f6; }
/* la lente */
.sv-cat.sv-cat .svc-pp-lens{ border-radius:26px; border:1px solid var(--c-line); overflow:hidden; }
.sv-cat.sv-cat .svc-pp-lensh{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 16px; background:var(--c-surface-2); border-bottom:1px solid var(--c-line); }
.sv-cat.sv-cat .svc-pp-lensh h2{ margin-right:auto; font-size:22px; }
.sv-cat.sv-cat .svc-pp-lensb{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; padding:18px 16px; }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-pp-lensb{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; padding:22px; } }
.sv-cat.sv-cat .svc-pp-lensb[hidden]{ display:none; }
.sv-cat.sv-cat .svc-pp-txt{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.sv-cat.sv-cat .svc-pp-txt > p{ font-size:15.5px; line-height:1.6; color:var(--c-ink); }
.sv-cat.sv-cat .svc-pp-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.sv-cat.sv-cat .svc-pp-pills span{ border-radius:8px; padding:5px 10px; font-size:12.5px; font-weight:800; background:var(--c-blue-soft); color:var(--c-blue-ink); }
.sv-cat.sv-cat .svc-pp-specs{ display:flex; flex-direction:column; gap:8px; }
.sv-cat.sv-cat .svc-pp-specs dl{ margin:0; display:flex; flex-wrap:wrap; gap:1px; background:var(--c-line); border:1px solid var(--c-line); border-radius:14px; overflow:hidden; }
.sv-cat.sv-cat .svc-pp-specs dl div{ flex:1 1 104px; background:var(--c-surface-2); padding:10px 12px; }
.sv-cat.sv-cat .svc-pp-specs dt{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-pp-specs dd{ margin:3px 0 0; font-size:14px; font-weight:800; }
.sv-cat.sv-cat .svc-pp-specs p{ font-size:13.5px; line-height:1.5; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-pp-specs p b{ color:var(--c-ink); }
.sv-cat.sv-cat .svc-pp-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:start; }
.sv-cat.sv-cat .svc-pp-fact{ border-radius:16px; background:var(--c-surface-2); padding:12px 14px; }
.sv-cat.sv-cat .svc-pp-fact small{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-pp-fact b{ display:block; margin-top:4px; font-family:var(--c-display); font-weight:900; font-size:22px; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-pp-fact span{ font-size:12.5px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-pp-fact.is-hl{ background:var(--c-green-soft); }
.sv-cat.sv-cat .svc-pp-fact.is-hl b{ color:var(--c-green-ink); }
/* il valore non c'è: sono segni sfocati */
.sv-cat.sv-cat .is-locked b{ filter:blur(6px); user-select:none; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-pp-tag{ position:relative; grid-column:1/-1; border-radius:6px 18px 18px 6px; background:#fffdf5; border:1.5px solid #e9dfb9; padding:16px 18px 16px 30px; box-shadow:var(--c-shadow-1); }
.sv-cat.sv-cat .svc-pp-tag::before{ content:""; position:absolute; left:10px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--c-surface); border:1.5px solid #e9dfb9; }
.sv-cat.sv-cat .svc-pp-tag small{ display:block; padding-right:60px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#a08a3c; }
.sv-cat.sv-cat .svc-pp-tag h4{ margin:4px 0 2px; padding-right:60px; font-size:18px; }
.sv-cat.sv-cat .svc-pp-tag p{ font-size:13.5px; line-height:1.5; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-pp-pz{ margin-top:8px; font-family:var(--c-display); font-weight:900; font-size:20px; }
.sv-cat.sv-cat .svc-pp-copy{ position:absolute; top:10px; right:10px; border:1px solid #e9dfb9; background:var(--c-surface); color:var(--c-ink); border-radius:9px; padding:5px 9px; font-size:12px; font-weight:800; }
/* l'ordine */
.sv-cat.sv-cat .svc-pp-order{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; scroll-margin-top:calc(var(--sv-bar-h,76px) + 12px); }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-pp-order{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; gap:28px; } }
.sv-cat.sv-cat .svc-pp-order h2{ margin-bottom:10px; }
.sv-cat.sv-cat .svc-pp-fmts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sv-cat.sv-cat .svc-pp-fmt{ position:relative; display:flex; flex-direction:column; gap:6px; border:2px solid var(--c-line); border-radius:18px; background:var(--c-surface); padding:12px; color:var(--c-ink); }
.sv-cat.sv-cat .svc-pp-fmt[aria-pressed="true"]{ border-color:var(--c-ink); }
.sv-cat.sv-cat .svc-pp-fmt img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--c-img); border-radius:12px; padding:8%; }
.sv-cat.sv-cat .svc-pp-fmt b{ font-family:var(--c-display); font-weight:900; font-size:20px; }
.sv-cat.sv-cat .svc-pp-fmt > span:last-child{ font-size:12.5px; color:var(--c-ink-2); font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-pp-fmt em{ font-style:normal; }
.sv-cat.sv-cat .svc-pp-best{ position:absolute; top:8px; left:8px; border-radius:999px; padding:4px 9px; background:var(--c-yellow); color:var(--c-ink); font-size:10.5px; font-weight:900; letter-spacing:.04em; }
.sv-cat.sv-cat .svc-pp-calc{ margin-top:16px; border-radius:20px; background:var(--c-surface-2); border:1px solid var(--c-line); padding:16px; display:flex; flex-direction:column; gap:14px; }
.sv-cat.sv-cat .svc-pp-calcr{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sv-cat.sv-cat .svc-pp-calcr b{ font-size:14px; }
.sv-cat.sv-cat .svc-pp-calc .svc-step-b{ width:44px; height:44px; font-size:20px; }
.sv-cat.sv-cat .svc-pp-calc .svc-step output{ min-width:52px; font-family:var(--c-display); font-weight:900; font-size:20px; }
.sv-cat.sv-cat .svc-pp-outs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@container svcat (min-width:620px){ .sv-cat.sv-cat .svc-pp-outs{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sv-cat.sv-cat .svc-pp-outs > div{ border-radius:14px; background:var(--c-surface); padding:10px 12px; }
.sv-cat.sv-cat .svc-pp-outs small{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-pp-outs b{ display:block; margin-top:2px; font-family:var(--c-display); font-weight:900; font-size:19px; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-pp-add{ width:100%; padding:13px 16px; font-size:15px; border-radius:14px; }
/* la richiesta a questo produttore */
.sv-cat.sv-cat .svc-pp-rq{ border-radius:22px; border:1.5px solid var(--c-ink); padding:16px; display:flex; flex-direction:column; gap:12px; }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-pp-rq{ position:sticky; top:calc(var(--sv-bar-h,76px) + 16px); } }
.sv-cat.sv-cat .svc-pp-rqh{ display:flex; align-items:center; gap:10px; }
.sv-cat.sv-cat .svc-pp-rqh i{ width:52px; height:36px; border-radius:9px; border:1px solid var(--c-line); background:#fff; display:grid; place-items:center; }
.sv-cat.sv-cat .svc-pp-rqh img{ max-width:44px; max-height:26px; object-fit:contain; }
.sv-cat.sv-cat .svc-pp-rqh small{ display:block; font-size:12px; font-weight:700; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-pp-rqh b{ font-family:var(--c-display); font-weight:900; font-size:17px; }
.sv-cat.sv-cat .svc-pp-rqr{ display:grid; grid-template-columns:36px minmax(0,1fr) auto 28px; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--c-line); font-size:13px; }
.sv-cat.sv-cat .svc-pp-rqr .svc-ml-x{ grid-area:auto; }
.sv-cat.sv-cat .svc-pp-rqr:first-child{ border-top:0; }
.sv-cat.sv-cat .svc-pp-rqr img{ width:36px; height:36px; border-radius:8px; background:var(--c-img); object-fit:contain; padding:3px; }
.sv-cat.sv-cat .svc-pp-rqr span{ font-weight:700; line-height:1.25; min-width:0; }
.sv-cat.sv-cat .svc-pp-rqr em{ font-style:normal; font-weight:800; color:var(--c-ink-2); white-space:nowrap; }
.sv-cat.sv-cat .svc-pp-rqs{ display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--c-line); padding-top:10px; font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-pp-mf{ display:flex; flex-direction:column; gap:8px; }
.sv-cat.sv-cat .svc-pp-mf h4{ font:800 11px var(--c-ui); letter-spacing:.11em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-pp-mf > div{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; }
.sv-cat.sv-cat .svc-pp-mf img{ width:44px; height:44px; border-radius:10px; background:var(--c-img); object-fit:contain; padding:4px; }
.sv-cat.sv-cat .svc-pp-mf span{ font-size:13px; font-weight:700; line-height:1.25; }
.sv-cat.sv-cat .svc-pp-mfb{ border:1.5px solid var(--c-green); background:var(--c-surface); color:var(--c-green-ink); border-radius:10px; padding:6px 10px; font-weight:800; font-size:12.5px; white-space:nowrap; }
/* descrizione */
.sv-cat.sv-cat .svc-pp-desc{ display:flex; flex-direction:column; gap:12px; max-width:76ch; }
.sv-cat.sv-cat .svc-pp-desc-b{ position:relative; display:flex; flex-direction:column; gap:12px; font-size:15px; line-height:1.65; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-pp-desc-b.is-cut{ max-height:160px; overflow:hidden; }
.sv-cat.sv-cat .svc-pp-desc-b.is-cut::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(transparent,var(--c-surface)); }
/* produttore */
.sv-cat.sv-cat .svc-pp-producer{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; border-radius:24px; background:var(--c-surface-2); border:1px solid var(--c-line); padding:16px; }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-pp-producer{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); padding:22px; gap:28px; } }
.sv-cat.sv-cat .svc-pp-ph{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:var(--c-img); }
.sv-cat.sv-cat .svc-pp-ph > img{ width:100%; height:100%; object-fit:cover; }
.sv-cat.sv-cat .svc-pp-pb{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.sv-cat.sv-cat .svc-pp-pb > p{ font-size:15px; line-height:1.55; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-pp-regs{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.sv-cat.sv-cat .svc-pp-regs > span:not(.svc-follow){ border-radius:8px; padding:4px 9px; background:var(--c-green-soft); color:var(--c-green-ink); font-size:12.5px; font-weight:800; }
.sv-cat.sv-cat :is(.svc-pp-file,[data-svc~="file"]){ display:flex; align-items:center; gap:10px; border:1.5px dashed var(--c-line-2); border-radius:14px; padding:11px 13px; text-decoration:none; color:var(--c-ink); font-weight:800; font-size:14px; }
.sv-cat.sv-cat [data-svc~="file"] svg{ width:22px; height:22px; color:var(--c-green-ink); flex:none; }
.sv-cat.sv-cat [data-svc~="file"] small{ display:block; font-size:12px; font-weight:600; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-pp-pb > .svc-btn{ align-self:flex-start; }
/* rimandi */
.sv-cat.sv-cat .svc-pp-rel{ display:flex; flex-direction:column; gap:12px; }
.sv-cat.sv-cat .svc-pp-relh{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.sv-cat.sv-cat .svc-pp-relh p{ font-size:13.5px; color:var(--c-ink-2); }
/* condivisione */
.sv-cat.sv-cat :is(.svc-pp-sh,[data-svc~="share"]){ display:flex; align-items:center; gap:12px; width:100%; border:1px solid var(--c-line); background:var(--c-surface); color:var(--c-ink); border-radius:12px; padding:12px; font-weight:800; font-size:14.5px; text-decoration:none; }
.sv-cat.sv-cat .svc-pp-sh svg{ width:17px; height:17px; }
/* barra fissa su telefono: lo script la sposta nel livello sopra la pagina */
.sv-cat.sv-cat .svc-pp-bar{ position:fixed; left:0; right:0; bottom:0; pointer-events:auto; display:none; align-items:center; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--c-surface); border-top:1px solid var(--c-line); box-shadow:0 -10px 30px -18px rgba(41,50,65,.4); transform:translateY(110%); transition:transform .3s var(--c-out); }
.sv-cat.sv-cat .svc-pp-bar.is-on{ transform:none; }
.sv-cat.sv-cat .svc-pp-bar > .svc-btn{ flex:1; padding:12px; border-radius:13px; }
@container svcat (max-width:899px){ .sv-cat.sv-cat .svc-pp-bar{ display:flex; } }

/* =========================================================================
   Livello sopra la pagina: pannelli, barra della bozza, avvisi
   ========================================================================= */
html.svc-lock{ overflow:hidden; }
.sv-cat.sv-cat-layer{ position:fixed; inset:0; z-index:var(--sv-z-fs,2147483000); pointer-events:none; container-type:inline-size; container-name:svcat; }
.sv-cat.sv-cat .svc-ov{ position:absolute; inset:0; background:rgba(20,25,32,.42); display:flex; justify-content:flex-end; pointer-events:auto; animation:svc-fade .2s ease; }
@keyframes svc-fade{ from{opacity:0} }
.sv-cat.sv-cat .svc-panel{ background:var(--c-surface); width:min(480px,100%); height:100%; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; animation:svc-slide .35s var(--c-out); outline:0; }
.sv-cat.sv-cat .svc-ov.is-still,
.sv-cat.sv-cat .svc-ov.is-still .svc-panel{ animation:none; }
.sv-cat.sv-cat .svc-panel.is-wide{ width:min(660px,100%); }
@keyframes svc-slide{ from{transform:translateX(40px);opacity:.4} }
@keyframes svc-up{ from{transform:translateY(40px);opacity:.4} }
.sv-cat.sv-cat .svc-panel-h{ position:sticky; top:0; z-index:2; background:var(--c-surface); display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--c-line); }
.sv-cat.sv-cat .svc-panel-h b{ font-family:var(--c-display); font-weight:900; font-size:17px; flex:1; }
.sv-cat.sv-cat .svc-x{ width:34px; height:34px; border-radius:50%; background:var(--c-surface-3); color:var(--c-ink); display:grid; place-items:center; }
.sv-cat.sv-cat .svc-x svg{ width:16px; height:16px; }
.sv-cat.sv-cat .svc-backbtn{ background:var(--c-surface-3); color:var(--c-ink); border-radius:999px; padding:7px 12px; font-size:13px; font-weight:800; display:inline-flex; gap:6px; align-items:center; }
.sv-cat.sv-cat .svc-backbtn svg{ width:14px; height:14px; transform:scaleX(-1); }
.sv-cat.sv-cat .svc-panel-b{ padding:16px; display:flex; flex-direction:column; gap:14px; }
.sv-cat.sv-cat .svc-panel-f{ position:sticky; bottom:0; margin-top:auto; background:var(--c-surface); border-top:1px solid var(--c-line); padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); display:flex; gap:8px; }
.sv-cat.sv-cat .svc-panel-f > :first-child{ flex:1; }
@container svcat (max-width:699px){
  .sv-cat.sv-cat .svc-ov{ align-items:flex-end; }
  .sv-cat.sv-cat .svc-panel{ height:auto; max-height:90%; width:100%; border-radius:22px 22px 0 0; animation-name:svc-up; }
}
.sv-cat.sv-cat .svc-qv-img{ position:relative; aspect-ratio:4/3; border-radius:18px; background:var(--c-img); display:grid; place-items:center; }
.sv-cat.sv-cat .svc-qv-img img{ max-width:70%; max-height:88%; object-fit:contain; }
.sv-cat.sv-cat .svc-qv-name{ font-size:23px; }
.sv-cat.sv-cat .svc-qv-desc{ font-size:14.5px; line-height:1.55; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-qv-price{ border:1px solid var(--c-line); border-radius:14px; padding:12px 14px; }
.sv-cat.sv-cat .svc-qv-price .svc-price{ margin:0; border:0; padding:0; }
.sv-cat.sv-cat .svc-qv-seg{ border-radius:14px; background:var(--c-green-soft); padding:12px 14px; }
.sv-cat.sv-cat .svc-qv-seg h4{ margin:0 0 4px; font:800 11px var(--c-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-qv-seg p{ font-size:14.5px; line-height:1.55; color:var(--c-ink); }
.sv-cat.sv-cat .svc-qv-block{ border-radius:14px; background:var(--c-blue-soft); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.sv-cat.sv-cat .svc-qv-block h4{ font:800 11px var(--c-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-blue-ink); }
.sv-cat.sv-cat .svc-kv{ display:flex; flex-wrap:wrap; gap:4px 10px; font-size:13.5px; }
.sv-cat.sv-cat .svc-kv span{ color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-kv b{ font-weight:800; }
.sv-cat.sv-cat .svc-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--c-line); border:1px solid var(--c-line); border-radius:14px; overflow:hidden; margin:0; }
.sv-cat.sv-cat .svc-facts div{ background:var(--c-surface-2); padding:10px 12px; }
.sv-cat.sv-cat .svc-facts dt{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-facts dd{ margin:3px 0 0; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-qv-en{ display:block; margin-top:6px; font-family:var(--c-ui); font-weight:700; font-size:14.5px; letter-spacing:0; line-height:1.35; color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-qv-specs{ display:flex; flex-direction:column; gap:6px; }
.sv-cat.sv-cat .svc-qv-specs p{ font-size:13.5px; line-height:1.5; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-qv-specs b{ color:var(--c-ink); }
.sv-cat.sv-cat .svc-qv-sizes h4{ margin:0 0 8px; font:800 11px var(--c-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-qv-sizes > div{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; }
.sv-cat.sv-cat .svc-qv-size{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; border:1.5px solid var(--c-line); border-radius:14px; background:var(--c-surface); color:var(--c-ink); padding:8px; text-align:left; }
.sv-cat.sv-cat .svc-qv-size:hover{ border-color:var(--c-line-2); }
.sv-cat.sv-cat .svc-qv-size[aria-current="true"]{ border-color:var(--c-ink); opacity:1; cursor:default; }
.sv-cat.sv-cat .svc-qv-size img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--c-img); border-radius:9px; padding:6%; }
.sv-cat.sv-cat .svc-qv-size b{ font-family:var(--c-display); font-weight:900; font-size:16px; }
.sv-cat.sv-cat .svc-qv-size small{ font-size:12px; color:var(--c-ink-2); font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-qv-full{ display:flex; flex-direction:column; gap:10px; }
.sv-cat.sv-cat .svc-qv-full p{ font-size:14px; line-height:1.6; color:var(--c-ink-2); }

.sv-cat.sv-cat .svc-tray{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; align-items:center; gap:12px;
  width:min(560px,calc(100% - 24px)); background:var(--c-ink); color:#fff; border-radius:16px; padding:10px 10px 10px 16px;
  box-shadow:var(--c-shadow-2); pointer-events:auto; margin-bottom:env(safe-area-inset-bottom,0px);
}
.sv-cat.sv-cat .svc-tray div{ flex:1; min-width:0; font-size:13px; line-height:1.35; }
.sv-cat.sv-cat .svc-tray b{ display:block; font-size:14.5px; }
.sv-cat.sv-cat .svc-toast-act{ margin-left:12px; background:none; color:var(--c-yellow); font-weight:800; }

/* =========================================================================
   Selettore (il catalogo montato nell'onboarding) — mockup: mockups/selettore/
   ========================================================================= */
.sv-cat.sv-cat .svc-pk{ display:flex; flex-direction:column; gap:14px; }
/* le linguette restano in vista mentre si scorre, soprattutto sul telefono */
.sv-cat.sv-cat .svc-pk-tabs{
  position:sticky; top:var(--svc-pk-top,0px); z-index:3; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  margin-inline:-6px; padding:8px 6px; background:var(--c-surface);
}
.sv-cat.sv-cat .svc-pk-tabs::-webkit-scrollbar{ display:none; }
.sv-cat.sv-cat .svc-pk-tab{ flex:none; border:1.5px solid var(--c-line); background:var(--c-surface); border-radius:999px; padding:8px 14px; font-size:13.5px; font-weight:800; color:var(--c-ink-2); white-space:nowrap; }
.sv-cat.sv-cat .svc-pk-tab[aria-selected="true"]{ border-color:var(--c-ink); background:var(--c-ink); color:#fff; }
.sv-cat.sv-cat .svc-pk-note{ display:flex; gap:10px; align-items:flex-start; border-radius:14px; background:var(--c-yellow-soft, #fff7d6); color:var(--c-ink); border:1px solid #f0dc8c; padding:12px 14px; font-size:14px; line-height:1.45; font-weight:600; }
.sv-cat.sv-cat .svc-pk-note svg{ flex:none; width:18px; height:18px; margin-top:1px; color:#a07a00; }
.sv-cat.sv-cat .svc-pk-why{ font-size:13.5px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-pk-why .svc-mark{ font-weight:900; color:var(--c-ink); padding:0 2px; background:linear-gradient(var(--c-yellow),var(--c-yellow)) no-repeat 0 92% / 100% .42em; }
.sv-cat.sv-cat .svc-pk-grid{ padding:6px; margin:-6px; }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-pk-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@container svcat (min-width:1180px){ .sv-cat.sv-cat .svc-pk-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
/* qui il cuore è il gesto: un po' più grande */
.sv-cat.sv-cat .svc-pk .svc-heart{ --svc-size:28px; width:44px; height:44px; }
.sv-cat.sv-cat .svc-pk .svc-ml-it{ transition:background .2s; }
.sv-cat.sv-cat .svc-wish{ position:relative; overflow:hidden; }
/* la scheda sta per chiudersi: una riga che si consuma sul bottone lo fa capire */
.sv-cat.sv-cat .svc-wish.is-closing::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(255,255,255,.75);
  transform-origin:left; animation:svc-closing var(--svc-close-ms,2000ms) linear forwards;
}
@keyframes svc-closing{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }

/* =========================================================================
   My Wishlist (My Savorita buyer) — mockup: mockups/my-wishlist/
   ========================================================================= */
/* in My Savorita la barra della bozza non c'è (noTray): niente spazio in fondo per lei */
.sv-cat.sv-cat .svc-ml{ display:flex; flex-direction:column; gap:16px; padding-block:8px 24px; }
.sv-cat.sv-cat .svc-ml-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.sv-cat.sv-cat .svc-ml-head h2{ font-size:24px; letter-spacing:-.02em; }
.sv-cat.sv-cat .svc-ml-head .svc-tabs{ margin-left:auto; }
.sv-cat.sv-cat .svc-tab small{ font-weight:700; color:var(--c-ink-3); font-size:inherit; }
.sv-cat.sv-cat .svc-ml-grp{ border:1px solid var(--c-line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.sv-cat.sv-cat .svc-ml-gh{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.sv-cat.sv-cat .svc-ml-logo{ flex:none; width:60px; height:42px; border-radius:10px; border:1px solid var(--c-line); background:#fff; display:grid; place-items:center; }
.sv-cat.sv-cat .svc-ml-logo img{ max-width:50px; max-height:32px; object-fit:contain; }
.sv-cat.sv-cat .svc-ml-gh h3{ font-size:19px; }
.sv-cat.sv-cat .svc-ml-gh small{ font-size:12.5px; font-weight:700; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-ml-state{ margin-left:auto; border-radius:100px; padding:5px 11px; font-size:11px; font-weight:800; background:var(--c-surface-3); color:var(--c-ink-2); }
/* la card in bozza ha il fondo verde */
.sv-cat.sv-cat .svc-ml-it{ scroll-snap-align:start; min-width:0; border-radius:18px; padding:6px; margin:-6px; }
.sv-cat.sv-cat .svc-ml-it.is-in{ background:var(--c-green-soft); }
.sv-cat.sv-cat :is(.svc-ml-more,[data-svc~="more"]){
  scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center; gap:6px; min-height:150px;
  border:1.5px dashed var(--c-line-2); border-radius:14px; padding:14px; background:none; color:var(--c-ink-2);
  font-size:13px; font-weight:800; text-decoration:none;
}
.sv-cat.sv-cat [data-svc~="more"] b{ color:var(--c-green-ink); }
/* salvati non più disponibili: card ridotta, contorno tratteggiato, niente immagine */
.sv-cat.sv-cat .svc-card.is-unav{ border:1.5px dashed var(--c-line-2); border-radius:16px; padding:12px; min-height:150px; gap:10px; background:none; }
.sv-cat.sv-cat .svc-card.is-unav .svc-c-top{ min-height:32px; }
.sv-cat.sv-cat .svc-card.is-unav .svc-heart{ top:-8px; right:-8px; }
.sv-cat.sv-cat .svc-card.is-unav .svc-c-name{ color:var(--c-ink-2); padding-right:4px; }
.sv-cat.sv-cat .svc-bdg.is-unav{ display:inline-block; background:var(--c-surface-3); color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-ml-draft{ border-top:1px solid var(--c-line); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.sv-cat.sv-cat .svc-ml-draft h4{ font:800 11px var(--c-ui); letter-spacing:.11em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-ml-hint{ font-size:13.5px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-ml-row{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; grid-template-areas:"th nm x" "th qty tot";
  gap:4px 12px; align-items:center; padding:10px 0; border-top:1px solid var(--c-line);
}
.sv-cat.sv-cat .svc-ml-row:first-child{ border-top:0; }
.sv-cat.sv-cat .svc-ml-row > img{ grid-area:th; width:44px; height:44px; border-radius:10px; background:var(--c-img); object-fit:contain; padding:4px; align-self:start; }
.sv-cat.sv-cat .svc-ml-nm{ grid-area:nm; font-weight:800; font-size:14px; line-height:1.25; min-width:0; }
.sv-cat.sv-cat .svc-ml-nm small{ display:block; font-weight:600; font-size:12px; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-ml-x{ grid-area:x; width:28px; height:28px; border-radius:50%; background:var(--c-surface-3); color:var(--c-ink-2); display:grid; place-items:center; }
.sv-cat.sv-cat .svc-ml-x svg{ width:13px; height:13px; }
.sv-cat.sv-cat .svc-ml-qty{ grid-area:qty; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-step{ display:inline-flex; align-items:center; border:1px solid var(--c-line-2); border-radius:10px; overflow:hidden; }
.sv-cat.sv-cat .svc-step-b{ width:32px; height:32px; background:var(--c-surface); color:var(--c-ink); font-weight:800; font-size:16px; text-align:center; }
.sv-cat.sv-cat .svc-step-b:disabled{ color:var(--c-line-2); }
.sv-cat.sv-cat .svc-step output{ min-width:34px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-ml-tot{ grid-area:tot; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.sv-cat.sv-cat .svc-ml-tot small{ display:block; font-weight:600; font-size:11.5px; color:var(--c-ink-3); }
@container svcat (min-width:700px){
  .sv-cat.sv-cat .svc-ml-row{ grid-template-columns:44px minmax(0,1fr) auto 130px 28px; grid-template-areas:"th nm qty tot x"; }
}
.sv-cat.sv-cat .svc-ml-row > .svc-ml-thb{ grid-area:th; align-self:start; background:none; }
.sv-cat.sv-cat .svc-ml-thb img{ width:44px; height:44px; border-radius:10px; background:var(--c-img); object-fit:contain; padding:4px; display:block; }
.sv-cat.sv-cat button.svc-ml-nm{ text-align:left; background:none; color:var(--c-ink); }
.sv-cat.sv-cat button.svc-ml-nm:hover{ color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-step-b.is-glow{ background:var(--c-green); color:#fff; box-shadow:0 0 0 3px rgba(8,127,35,.25); }
@media (prefers-reduced-motion:no-preference){ .sv-cat.sv-cat .svc-step-b.is-glow{ animation:svc-glow 1.6s ease-in-out infinite; } }
@keyframes svc-glow{ 50%{ box-shadow:0 0 0 7px rgba(8,127,35,.08); } }
.sv-cat.sv-cat .svc-ml-tip{ grid-column:1/-1; font-size:12px; font-weight:800; color:var(--c-green-ink); }
@container svcat (min-width:700px){ .sv-cat.sv-cat .svc-ml-tip{ grid-column:2/-1; } }
/* minimo d'ordine del produttore: raggiunto, diventa verde e sparisce */
.sv-cat.sv-cat .svc-ml-min{ border:1px solid var(--c-line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; transition:opacity .4s, transform .4s; }
.sv-cat.sv-cat .svc-ml-min.is-ok{ background:var(--c-green-soft); border-color:transparent; }
.sv-cat.sv-cat .svc-ml-min.is-bye{ opacity:0; transform:translateY(-6px); }
.sv-cat.sv-cat .svc-ml-minh{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:13.5px; font-weight:700; }
.sv-cat.sv-cat .svc-ml-minh b{ font-family:var(--c-display); font-weight:900; }
.sv-cat.sv-cat .svc-ml-minh svg{ width:12px; height:12px; vertical-align:-1px; }
.sv-cat.sv-cat .svc-ml-meter{ height:8px; border-radius:99px; background:var(--c-surface-3); overflow:hidden; }
.sv-cat.sv-cat .svc-ml-meter i{ display:block; height:100%; border-radius:99px; background:var(--c-yellow); transition:width .4s; }
.sv-cat.sv-cat .svc-ml-min.is-ok .svc-ml-meter i{ background:var(--c-green); }
.sv-cat.sv-cat .svc-ml-quick{ display:flex; flex-direction:column; gap:6px; }
.sv-cat.sv-cat .svc-ml-quick h5{ margin:4px 0 0; font:800 11px var(--c-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-ml-qa{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; align-items:center; }
.sv-cat.sv-cat .svc-ml-qa img{ width:36px; height:36px; border-radius:8px; background:var(--c-img); object-fit:contain; padding:3px; }
.sv-cat.sv-cat .svc-ml-qa > span{ font-size:13px; font-weight:700; line-height:1.25; min-width:0; }
.sv-cat.sv-cat .svc-ml-qa small{ display:block; font-weight:600; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-ml-qab{ border:1.5px solid var(--c-green); background:var(--c-surface); color:var(--c-green-ink); border-radius:10px; padding:6px 10px; font-weight:800; font-size:12.5px; white-space:nowrap; }
/* riepilogo: stime a sinistra, consegna e bottone a destra */
.sv-cat.sv-cat .svc-ml-sum{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; border-radius:16px; background:var(--c-surface-2); padding:14px; }
@container svcat (min-width:700px){ .sv-cat.sv-cat .svc-ml-sum{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; } }
.sv-cat.sv-cat .svc-ml-sum dl{ margin:0; display:flex; flex-direction:column; gap:5px; }
.sv-cat.sv-cat .svc-ml-sum dl div{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--c-ink-2); font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-ml-sum dt{ font-weight:600; }
.sv-cat.sv-cat .svc-ml-sum dd{ margin:0; font-weight:800; color:var(--c-ink); }
.sv-cat.sv-cat .svc-ml-sum .is-big{ border-top:1px solid var(--c-line); padding-top:7px; margin-top:2px; font-size:15px; color:var(--c-ink); }
.sv-cat.sv-cat .svc-ml-sum .is-big dd{ font-family:var(--c-display); font-weight:900; font-size:19px; }
.sv-cat.sv-cat .svc-ml-fine{ font-size:12px; color:var(--c-ink-3); margin:0; }
.sv-cat.sv-cat .svc-ml-send{ display:flex; flex-direction:column; gap:10px; }
.sv-cat.sv-cat .svc-ml-ship{ display:flex; gap:10px; align-items:flex-start; border-radius:12px; background:var(--c-surface); border:1px solid var(--c-line); padding:10px 12px; font-size:13px; line-height:1.4; }
.sv-cat.sv-cat .svc-ml-ship > svg{ flex:none; width:18px; height:18px; color:var(--c-green-ink); margin-top:1px; }
.sv-cat.sv-cat .svc-ml-ship > div{ min-width:0; }
.sv-cat.sv-cat .svc-ml-ship b{ display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:2px; }
.sv-cat.sv-cat .svc-ml-link{ background:none; color:var(--c-green-ink); font-weight:800; font-size:13px; text-decoration:underline; text-underline-offset:3px; align-self:flex-start; }
.sv-cat.sv-cat .svc-ml-ship .svc-ml-link{ margin-left:auto; font-size:12.5px; }
.sv-cat.sv-cat .svc-ml-go{ width:100%; padding:13px 18px; font-size:15px; border-radius:13px; justify-content:center; }
.sv-cat.sv-cat .svc-ml-go.is-off{ background:var(--c-surface-3); color:var(--c-ink-3); border-color:transparent; cursor:default; }
.sv-cat.sv-cat .svc-ml-novat{ font-size:13px; line-height:1.45; color:var(--c-ink-2); margin:0; }
.sv-cat.sv-cat .svc-ml-novat a{ color:var(--c-green-ink); font-weight:800; }
.sv-cat.sv-cat .svc-ml-warn{ font-size:12.5px; font-weight:700; color:#946e00; margin:0; }
/* pannelli di lato: indirizzo e revisione */
.sv-cat.sv-cat .svc-ml-panel .svc-panel-f{ flex-direction:column; align-items:stretch; }
.sv-cat.sv-cat .svc-ml-panel .svc-panel-f .svc-btn{ width:100%; justify-content:center; }
.sv-cat.sv-cat .svc-ml-addr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sv-cat.sv-cat .svc-ml-f{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:800; color:var(--c-ink-2); min-width:0; }
.sv-cat.sv-cat .svc-ml-f.is-w{ grid-column:1/-1; }
.sv-cat.sv-cat .svc-ml-panel :is(input,select,textarea){ width:100%; box-sizing:border-box; border:1.5px solid var(--c-line-2); border-radius:10px; padding:9px 11px; font:600 14px var(--c-ui); background:var(--c-surface); color:var(--c-ink); }
.sv-cat.sv-cat .svc-ml-panel textarea{ resize:vertical; min-height:80px; }
.sv-cat.sv-cat .svc-ml-panel :is(input,select,textarea):focus{ outline:none; border-color:var(--c-green); box-shadow:0 0 0 3px var(--c-green-soft); }
.sv-cat.sv-cat .svc-ml-lines{ display:flex; flex-direction:column; border:1px solid var(--c-line); border-radius:14px; padding:2px 12px; }
.sv-cat.sv-cat .svc-ml-lines > div{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--c-line); font-size:13.5px; }
.sv-cat.sv-cat .svc-ml-lines > div:first-child{ border-top:0; }
.sv-cat.sv-cat .svc-ml-lines span{ color:var(--c-ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-ml-totline{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; color:var(--c-ink-2); font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-ml-totline b{ color:var(--c-ink); }
.sv-cat.sv-cat .svc-ml-fld{ display:flex; flex-direction:column; gap:7px; }
.sv-cat.sv-cat .svc-ml-fld > b{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-ml-fld > small{ font-size:12px; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-ml-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.sv-cat.sv-cat .svc-ml-chip{ border:1.5px solid var(--c-line-2); background:var(--c-surface); color:var(--c-ink); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:700; }
.sv-cat.sv-cat .svc-ml-chip[aria-pressed="true"]{ border-color:var(--c-green); background:var(--c-green-soft); color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-ml-err{ border-radius:12px; background:#fdecee; color:#b3121f; padding:10px 12px; font-size:13.5px; font-weight:700; margin:0; }
/* richieste e ordini */
.sv-cat.sv-cat .svc-ml-sec{ display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.sv-cat.sv-cat .svc-ml-sec h3{ font-size:18px; }
.sv-cat.sv-cat .svc-ml-sec small{ font-size:12.5px; color:var(--c-ink-3); font-weight:700; }
.sv-cat.sv-cat .svc-ml-rqs{ display:flex; flex-direction:column; gap:12px; }
.sv-cat.sv-cat .svc-ml-rq{ border:1px solid var(--c-line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.sv-cat.sv-cat .svc-ml-rq.is-hot{ border-color:#b8cdee; box-shadow:0 0 0 3px #e8effa; }
.sv-cat.sv-cat .svc-ml-rqh{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.sv-cat.sv-cat .svc-ml-rqh .svc-ml-logo{ width:52px; height:36px; }
.sv-cat.sv-cat .svc-ml-rqh h3{ font-size:17px; }
.sv-cat.sv-cat .svc-ml-rqh small{ display:block; font-size:12px; color:var(--c-ink-3); font-weight:700; }
.sv-cat.sv-cat .svc-ml-pill{ margin-left:auto; border-radius:100px; padding:5px 11px; font-size:11.5px; font-weight:800; white-space:nowrap; background:var(--c-surface-3); color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-ml-pill.is-wait{ background:#fbf2dc; color:#946e00; } .sv-cat.sv-cat .svc-ml-pill.is-quote{ background:#e8effa; color:#1d4f91; }
.sv-cat.sv-cat .svc-ml-pill.is-ok{ background:var(--c-green-soft); color:var(--c-green-ink); } .sv-cat.sv-cat .svc-ml-pill.is-no{ background:#fdecee; color:#b3121f; }
.sv-cat.sv-cat .svc-ml-pill.is-done{ background:var(--c-ink); color:#fff; }
.sv-cat.sv-cat .svc-ml-track{ --n:5; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); position:relative; padding-top:2px; }
.sv-cat.sv-cat .svc-ml-track::before{ content:""; position:absolute; left:calc(50% / var(--n)); right:calc(50% / var(--n)); top:15px; height:3px; background:var(--c-surface-3); border-radius:3px; }
.sv-cat.sv-cat .svc-ml-fill{ position:absolute; left:calc(50% / var(--n)); top:15px; height:3px; background:var(--c-green); border-radius:3px; width:calc((100% - 100% / var(--n)) * var(--p)); }
.sv-cat.sv-cat .svc-ml-node{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; min-width:0; }
.sv-cat.sv-cat .svc-ml-dot{ width:32px; height:32px; border-radius:50%; background:var(--c-surface); border:2px solid var(--c-line-2); display:grid; place-items:center; color:var(--c-ink-3); z-index:1; }
.sv-cat.sv-cat .svc-ml-dot svg{ width:15px; height:15px; }
.sv-cat.sv-cat .svc-ml-node.is-done .svc-ml-dot{ background:var(--c-green); border-color:var(--c-green); color:#fff; }
.sv-cat.sv-cat .svc-ml-node.is-now .svc-ml-dot{ border-color:var(--c-green); color:var(--c-green-ink); box-shadow:0 0 0 5px var(--c-green-soft); }
.sv-cat.sv-cat .svc-ml-node.is-now.is-amber .svc-ml-dot{ border-color:#d39d00; color:#946e00; box-shadow:0 0 0 5px #fbf2dc; }
.sv-cat.sv-cat .svc-ml-node.is-now.is-blue .svc-ml-dot{ border-color:#1d4f91; color:#1d4f91; box-shadow:0 0 0 5px #e8effa; }
.sv-cat.sv-cat .svc-ml-node b{ font-size:12px; font-weight:800; color:var(--c-ink-2); line-height:1.15; }
.sv-cat.sv-cat .svc-ml-node.is-now b{ color:var(--c-ink); }
.sv-cat.sv-cat .svc-ml-node small{ font-size:11px; color:var(--c-ink-3); font-weight:600; }
.sv-cat.sv-cat .svc-ml-say{ border-radius:14px; padding:11px 13px; font-size:13.5px; line-height:1.45; background:var(--c-surface-2); color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-ml-say.is-blue{ background:#e8effa; color:#24456f; } .sv-cat.sv-cat .svc-ml-say.is-amber{ background:#fbf2dc; color:#946e00; } .sv-cat.sv-cat .svc-ml-say.is-green{ background:var(--c-green-soft); color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-ml-acts{ display:flex; flex-wrap:wrap; gap:8px; }
.sv-cat.sv-cat .svc-ml-acts .svc-btn{ padding:10px 16px; font-size:14px; border-radius:12px; }
.sv-cat.sv-cat .svc-ml-revbox{ display:flex; flex-direction:column; gap:8px; border-radius:14px; border:1px solid var(--c-line); padding:12px; }
.sv-cat.sv-cat .svc-ml-revbox textarea{ width:100%; box-sizing:border-box; border:1.5px solid var(--c-line-2); border-radius:10px; padding:8px 10px; font:600 14px var(--c-ui); min-height:64px; resize:vertical; }
.sv-cat.sv-cat .svc-ml-det{ border-top:1px solid var(--c-line); padding-top:12px; display:flex; flex-direction:column; gap:10px; }
.sv-cat.sv-cat .svc-ml-tw{ overflow-x:auto; }
.sv-cat.sv-cat .svc-ml-qt{ width:100%; min-width:420px; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-ml-qt :is(th,td){ text-align:left; padding:7px 6px; border-bottom:1px solid var(--c-line); }
.sv-cat.sv-cat .svc-ml-qt :is(th,td):not(:first-child){ text-align:right; white-space:nowrap; }
.sv-cat.sv-cat .svc-ml-qt th{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-ml-qt tfoot td{ border-bottom:0; font-weight:800; }
.sv-cat.sv-cat .svc-ml-qt tfoot tr.is-big td{ font-family:var(--c-display); font-size:17px; font-weight:900; border-top:1px solid var(--c-line-2); }
.sv-cat.sv-cat .svc-ml-kv{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px 14px; font-size:13px; margin:0; }
.sv-cat.sv-cat .svc-ml-kv dt{ color:var(--c-ink-3); font-weight:700; } .sv-cat.sv-cat .svc-ml-kv dd{ margin:0; }
.sv-cat.sv-cat .svc-ml-done{ display:flex; flex-direction:column; border:1px solid var(--c-line); border-radius:18px; overflow:hidden; }
.sv-cat.sv-cat .svc-ml-drow{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:12px 14px; border-top:1px solid var(--c-line); }
.sv-cat.sv-cat .svc-ml-drow:first-child{ border-top:0; }
.sv-cat.sv-cat .svc-ml-drow .svc-ml-logo{ width:52px; height:36px; grid-row:span 2; }
.sv-cat.sv-cat .svc-ml-drow b{ font-family:var(--c-display); font-weight:900; font-size:15px; }
.sv-cat.sv-cat .svc-ml-drow small{ font-size:12px; color:var(--c-ink-3); font-weight:700; grid-column:2; }
.sv-cat.sv-cat .svc-ml-dr{ grid-row:1/span 2; grid-column:3; display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-weight:800; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-ml-closed{ font-size:13px; color:var(--c-ink-3); margin:0; }
.sv-cat.sv-cat .svc-ml-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }
@container svcat (min-width:620px){ .sv-cat.sv-cat .svc-ml-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-ml-tiles{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.sv-cat.sv-cat .svc-ml-kind{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-3); }

.sv-cat.sv-cat .svc-toast{
  position:absolute; left:50%; bottom:84px; transform:translateX(-50%); max-width:calc(100% - 32px); background:var(--c-ink);
  color:#fff; border-radius:999px; padding:9px 16px; font-size:13px; font-weight:700; text-align:center; box-shadow:var(--c-shadow-1);
  animation:svc-fade .2s;
}
@media (prefers-reduced-motion:reduce){
  .sv-cat.sv-cat *{ animation:none !important; transition:none !important; }
}

/* ---------- ordini pronti: card "Ready to order" (mockups/ordini-pronti/) ----------
   Chiusa: titolo, frase, 4 miniature, "See the order". Aperta: prodotti, conto, bottone. */
.sv-cat.sv-cat .svc-ro-sec{ display:flex; flex-direction:column; gap:12px; padding-block:16px 6px; }
.sv-cat.sv-cat .svc-ro-sec.is-page{ padding-block:0; }
.sv-cat.sv-cat .svc-ro-sec.is-panel{ padding-block:4px; }
.sv-cat.sv-cat .svc-ro-head{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 14px; }
.sv-cat.sv-cat .svc-ro-head > div{ flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.sv-cat.sv-cat .svc-ro-head h2{ margin:0; font-family:var(--c-display); font-weight:900; font-size:19px; letter-spacing:-.015em; }
.sv-cat.sv-cat .svc-ro-head p{ margin:0; font-size:13px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-ro-all{ flex:none; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; border:1.5px solid var(--c-green); background:var(--c-surface); color:var(--c-green-ink); border-radius:12px; font-size:13.5px; font-weight:800; padding:9px 14px; }
.sv-cat.sv-cat .svc-ro-all.is-done{ border-color:var(--c-green-soft); background:var(--c-green-soft); }
.sv-cat.sv-cat .svc-ro-all svg{ width:14px; height:14px; flex:none; }
/* la fila: card strette, alte quanto serve (aprirne una non allunga le altre) */
.sv-cat.sv-cat .svc-rail.is-orders{ --n:1.35; align-items:start; }
@container svcat (min-width:620px){ .sv-cat.sv-cat .svc-rail.is-orders{ --n:2.4; } }
@container svcat (min-width:900px){ .sv-cat.sv-cat .svc-rail.is-orders{ --n:3.5; } }
@container svcat (min-width:1180px){ .sv-cat.sv-cat .svc-rail.is-orders{ --n:4.5; } }
.sv-cat.sv-cat .svc-ro-sec.is-panel .svc-rail.is-orders{ --n:1.35; }
.sv-cat.sv-cat .svc-ro{ scroll-snap-align:start; display:flex; flex-direction:column; gap:8px; min-width:0; background:var(--c-surface); border:1px solid var(--c-line); border-radius:16px; padding:12px; transition:border-color .2s, box-shadow .2s; }
.sv-cat.sv-cat .svc-ro.is-on{ border-color:var(--c-green); box-shadow:0 0 0 2px var(--c-green-soft); }
.sv-cat.sv-cat .svc-ro-tap{ display:flex; flex-direction:column; gap:4px; border:0; background:none; color:var(--c-ink); padding:0; text-align:left; min-width:0; cursor:pointer; }
.sv-cat.sv-cat .svc-ro-br{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--c-ink-3); min-width:0; }
.sv-cat.sv-cat .svc-ro-br img{ flex:none; width:18px; height:18px; object-fit:contain; }
.sv-cat.sv-cat .svc-ro-br span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-cat.sv-cat .svc-ro-name{ font-family:var(--c-display); font-weight:900; font-size:15.5px; line-height:1.2; letter-spacing:-.01em; }
.sv-cat.sv-cat .svc-ro-why{ font-size:12.5px; line-height:1.4; color:var(--c-ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sv-cat.sv-cat .svc-ro-pics{ display:flex; align-items:center; gap:4px; margin-top:4px; }
.sv-cat.sv-cat .svc-ro-pics span{ flex:none; width:34px; height:34px; border-radius:8px; background:var(--c-img); overflow:hidden; }
.sv-cat.sv-cat .svc-ro-pics img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.sv-cat.sv-cat .svc-ro-pics em{ font-style:normal; font-size:11.5px; font-weight:800; color:var(--c-ink-3); padding-left:2px; }
.sv-cat.sv-cat .svc-ro-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sv-cat.sv-cat .svc-ro-more{ display:inline-flex; align-items:center; gap:4px; border:0; background:var(--c-surface-3); color:var(--c-ink); border-radius:999px; font-size:12px; font-weight:800; padding:5px 10px 5px 12px; cursor:pointer; }
.sv-cat.sv-cat .svc-ro-more svg{ width:13px; height:13px; transition:transform .2s; }
.sv-cat.sv-cat .svc-ro-more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.sv-cat.sv-cat .svc-ro-in{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-ro-in svg{ width:12px; height:12px; }
.sv-cat.sv-cat .svc-ro-body{ display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--c-line); padding-top:10px; }
.sv-cat.sv-cat .svc-ro-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.sv-cat.sv-cat .svc-ro-list li{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; margin:0; }
.sv-cat.sv-cat .svc-ro-list li button{ min-width:0; border:0; background:none; padding:0; color:var(--c-ink-2); font:inherit; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.sv-cat.sv-cat .svc-ro-list li b{ flex:none; color:var(--c-ink); font-weight:800; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-ro-facts{ font-size:12px; font-weight:800; color:var(--c-ink-3); font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-ro-money{ display:flex; flex-direction:column; gap:3px; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svc-ro-money div{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svc-ro-money b{ color:var(--c-ink); font-weight:800; }
.sv-cat.sv-cat .svc-ro-money .is-tot{ font-size:13.5px; color:var(--c-ink); }
.sv-cat.sv-cat .svc-ro-money .is-tot b{ font-weight:900; }
.sv-cat.sv-cat .svc-ro-wait{ font-size:12px; font-weight:700; color:var(--c-ink-3); }
.sv-cat.sv-cat .svc-ro-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; border:0; border-radius:11px; background:var(--c-green); color:#fff; font-size:13.5px; font-weight:800; padding:11px 12px; cursor:pointer; }
.sv-cat.sv-cat .svc-ro-btn.is-done{ background:var(--c-green-soft); color:var(--c-green-ink); }
.sv-cat.sv-cat .svc-ro-btn svg{ width:14px; height:14px; flex:none; }
.sv-cat.sv-cat .svc-ro-again{ align-self:center; border:0; background:none; padding:0; font-size:12px; font-weight:800; color:var(--c-ink-2); text-decoration:underline; text-underline-offset:3px; margin-top:-4px; cursor:pointer; }
/* pastiglia del filtro sull'ordine, tessera dell'ordine fra le selezioni */
.sv-cat.sv-cat .svc-chip.is-order{ background:var(--c-green); color:#fff; }
.sv-cat.sv-cat .svc-chip.is-order small{ color:inherit; opacity:.75; }
.sv-cat.sv-cat .svc-chip.is-order .svc-chip-x{ color:#fff; }
.sv-cat.sv-cat .svc-sel-count b{ color:var(--c-green-ink); font-weight:900; }

/* =========================================================================
   Richieste ricevute (produttori, My Savorita) — widget "Savorita Richieste
   ricevute". Mockup: mockups/richieste-ricevute/. Classi svr-; i link portano
   le classi anche in data-svc (vedi in cima).
   ========================================================================= */
.sv-cat.sv-cat.svr{ background:transparent; }
.sv-cat.sv-cat .svr-w{ display:flex; flex-direction:column; gap:18px; }
.sv-cat.sv-cat .svr-ph{ border:1.5px dashed var(--c-line-2); border-radius:16px; padding:16px; font-weight:700; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-as{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; background:var(--c-ink); color:#fff; border-radius:12px; padding:8px 14px; font-size:12.5px; font-weight:700; }
.sv-cat.sv-cat .svr-as b{ font-weight:900; }
.sv-cat.sv-cat .svr-as span{ margin-left:auto; opacity:.75; }
.sv-cat.sv-cat :is(.svr-crumb,[data-svc~="svr-crumb"]){ align-self:flex-start; background:none; color:var(--c-green-ink); font-size:13px; font-weight:800; text-decoration:none; }
.sv-cat.sv-cat .svr-h1{ font-size:28px; letter-spacing:-.025em; line-height:1.1; text-wrap:balance; }
.sv-cat.sv-cat .svr-sub{ margin-top:4px; color:var(--c-ink-2); max-width:68ch; }
.sv-cat.sv-cat .svr-quiet{ font-size:13px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svr-cap{ font-size:12px; color:var(--c-ink-3); }

/* pastiglie */
.sv-cat.sv-cat .svr-pill{ display:inline-flex; align-items:center; gap:6px; border-radius:100px; padding:4px 10px; font-size:11px; font-weight:800; white-space:nowrap; }
.sv-cat.sv-cat .svr-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.sv-cat.sv-cat .svr-st-new{ background:var(--c-gold-soft); color:var(--c-gold-ink); }
.sv-cat.sv-cat .svr-st-answered{ background:var(--c-blue-soft); color:var(--c-blue-ink); }
.sv-cat.sv-cat .svr-st-quoted{ background:var(--c-green-soft); color:var(--c-green-ink); }
.sv-cat.sv-cat :is(.svr-st-ordered,.svr-st-delivered){ background:var(--c-green); color:#fff; }
.sv-cat.sv-cat .svr-st-closed{ background:var(--c-surface-3); color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-from{ display:inline-flex; align-items:center; gap:5px; border-radius:7px; padding:2px 8px; font-size:11.5px; font-weight:800; background:var(--c-surface-3); color:var(--c-ink-2); white-space:nowrap; }
.sv-cat.sv-cat .svr-from svg{ width:12px; height:12px; }

/* bottoni e link */
.sv-cat.sv-cat :is(.svr-btn,[data-svc~="svr-btn"]){ display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:12px; padding:10px 16px; font-weight:800; font-size:14px; border:1.5px solid transparent; white-space:nowrap; text-decoration:none; line-height:1.2; }
.sv-cat.sv-cat :is(.svr-btn-pri,[data-svc~="svr-btn-pri"]){ background:var(--c-green); color:#fff; }
.sv-cat.sv-cat :is(.svr-btn-pri,[data-svc~="svr-btn-pri"]):hover{ background:var(--c-green-ink); color:#fff; }
.sv-cat.sv-cat .svr-btn-pri:disabled{ background:var(--c-line-2); color:#fff; }
.sv-cat.sv-cat :is(.svr-btn-sec,[data-svc~="svr-btn-sec"]){ background:var(--c-surface); color:var(--c-ink); border-color:var(--c-line-2); }
.sv-cat.sv-cat :is(.svr-btn-sec,[data-svc~="svr-btn-sec"]):hover{ border-color:var(--c-ink-3); color:var(--c-ink); }
.sv-cat.sv-cat :is(.svr-lnk,[data-svc~="svr-lnk"]){ background:none; color:inherit; font-weight:800; text-decoration:underline; }

/* avvisi */
.sv-cat.sv-cat .svr-alert{ display:flex; gap:9px; align-items:flex-start; border-radius:12px; padding:10px 12px; font-size:13px; font-weight:700; line-height:1.4; }
.sv-cat.sv-cat .svr-alert svg{ margin-top:1px; }
.sv-cat.sv-cat .svr-warn{ background:var(--c-gold-soft); color:var(--c-gold-ink); }
.sv-cat.sv-cat .svr-info{ background:var(--c-blue-soft); color:var(--c-blue-ink); }
.sv-cat.sv-cat .svr-off{ background:var(--c-surface-3); color:var(--c-ink-2); }

/* riquadro: tutta la card porta alla pagina */
.sv-cat.sv-cat .svr-tile{ position:relative; background:var(--c-surface); border:1px solid var(--c-line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--c-shadow-1); transition:border-color .15s; }
.sv-cat.sv-cat .svr-tile:hover{ border-color:var(--c-line-2); }
.sv-cat.sv-cat .svr-tile-h h3{ font-size:18px; }
.sv-cat.sv-cat .svr-tile-h small{ display:block; font-size:12.5px; font-weight:700; color:var(--c-ink-3); margin-top:1px; }
.sv-cat.sv-cat :is(.svr-stretch,[data-svc~="svr-stretch"]){ background:none; color:inherit; text-decoration:none; }
.sv-cat.sv-cat :is(.svr-stretch,[data-svc~="svr-stretch"])::after{ content:""; position:absolute; inset:0; border-radius:18px; }
.sv-cat.sv-cat .svr-over{ position:relative; z-index:1; }
.sv-cat.sv-cat .svr-big2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sv-cat.sv-cat .svr-big2 > div{ background:var(--c-surface-2); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; }
.sv-cat.sv-cat .svr-big2 b{ font-family:var(--c-display); font-size:28px; font-weight:900; line-height:1.05; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svr-big2 small{ font-size:12.5px; font-weight:700; color:var(--c-ink-2); }
.sv-cat.sv-cat .svr-big2 .svr-hot b{ color:var(--c-gold-ink); }
.sv-cat.sv-cat .svr-tile-act{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.sv-cat.sv-cat .svr-tile-act > a{ flex:1 1 auto; }

/* elenco */
.sv-cat.sv-cat .svr-tabs{ display:flex; gap:4px; border-bottom:1.5px solid var(--c-line); overflow-x:auto; scrollbar-width:none; }
.sv-cat.sv-cat :is(.svr-tab,[data-svc~="svr-tab"]){ flex:none; background:none; padding:10px 14px; font-family:var(--c-display); font-size:15.5px; font-weight:800; color:var(--c-ink-3); border-bottom:3px solid transparent; margin-bottom:-1.5px; white-space:nowrap; text-decoration:none; }
.sv-cat.sv-cat :is(.svr-tab,[data-svc~="svr-tab"])[aria-current="page"]{ color:var(--c-ink); border-color:var(--c-green); }
.sv-cat.sv-cat :is(.svr-tab,[data-svc~="svr-tab"]) small{ font-family:var(--c-ui); font-size:12px; color:var(--c-ink-3); margin-left:4px; }
.sv-cat.sv-cat :is(.svr-hot,[data-svc~="svr-hot"]) small{ color:var(--c-gold-ink); font-weight:800; }
.sv-cat.sv-cat .svr-list{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:16px; overflow:hidden; }
.sv-cat.sv-cat :is(.svr-row,[data-svc~="svr-row"]){ display:grid; grid-template-columns:96px minmax(0,1.25fr) minmax(0,1fr) 110px 150px; gap:14px; align-items:center; padding:12px 16px; border-top:1px solid var(--c-line); background:var(--c-surface); color:var(--c-ink); text-decoration:none; }
.sv-cat.sv-cat :is(.svr-row,[data-svc~="svr-row"]):first-child{ border-top:0; }
.sv-cat.sv-cat :is(.svr-row,[data-svc~="svr-row"]):hover{ background:var(--c-surface-2); color:var(--c-ink); }
.sv-cat.sv-cat .svr-no{ font-family:var(--c-display); font-weight:900; font-size:14.5px; }
.sv-cat.sv-cat .svr-no small,.sv-cat.sv-cat .svr-who small{ display:block; font-family:var(--c-ui); font-weight:700; font-size:12px; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-who b{ display:block; font-size:14.5px; }
.sv-cat.sv-cat .svr-what{ font-size:13px; color:var(--c-ink-2); display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.sv-cat.sv-cat .svr-strip{ display:flex; gap:4px; }
.sv-cat.sv-cat .svr-tot{ text-align:right; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svr-tot b{ display:block; font-family:var(--c-display); font-size:15.5px; }
.sv-cat.sv-cat .svr-tot small{ font-size:11.5px; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-stc{ display:flex; justify-content:flex-end; }
@container svcat (max-width:860px){
  .sv-cat.sv-cat :is(.svr-row,[data-svc~="svr-row"]){ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"no st" "who tot" "what what"; gap:6px 12px; }
  .sv-cat.sv-cat .svr-no{ grid-area:no; } .sv-cat.sv-cat .svr-who{ grid-area:who; } .sv-cat.sv-cat .svr-tot{ grid-area:tot; } .sv-cat.sv-cat .svr-stc{ grid-area:st; }
  .sv-cat.sv-cat .svr-what{ grid-area:what; flex-direction:row; flex-wrap:wrap; align-items:center; }
}
.sv-cat.sv-cat .svr-empty{ padding:32px 20px; text-align:center; color:var(--c-ink-2); background:var(--c-surface); border:1px dashed var(--c-line-2); border-radius:16px; display:flex; flex-direction:column; gap:6px; align-items:center; }
.sv-cat.sv-cat .svr-empty b{ font-family:var(--c-display); font-size:17px; color:var(--c-ink); }
.sv-cat.sv-cat .svr-empty p{ max-width:52ch; font-size:13.5px; }
.sv-cat.sv-cat .svr-img{ flex:none; display:block; border-radius:8px; background:var(--c-img); overflow:hidden; }
.sv-cat.sv-cat .svr-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* dettaglio */
.sv-cat.sv-cat .svr-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.sv-cat.sv-cat .svr-meta small{ font-size:12.5px; color:var(--c-ink-3); font-weight:700; }
.sv-cat.sv-cat .svr-dt{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start; }
@container svcat (max-width:860px){ .sv-cat.sv-cat .svr-dt{ grid-template-columns:minmax(0,1fr); } }
.sv-cat.sv-cat .svr-col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.sv-cat.sv-cat .svr-sec{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:14px; }
.sv-cat.sv-cat .svr-sec > header{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sv-cat.sv-cat .svr-sec > header h2{ font-size:18px; }
.sv-cat.sv-cat .svr-sec > header p{ font-size:12.5px; color:var(--c-ink-3); flex:1 1 220px; }
.sv-cat.sv-cat .svr-items{ display:flex; flex-direction:column; border:1px solid var(--c-line); border-radius:14px; overflow:hidden; }
.sv-cat.sv-cat .svr-it{ display:grid; grid-template-columns:44px minmax(0,1fr) 130px 92px; gap:12px; align-items:center; padding:9px 12px; border-top:1px solid var(--c-line); }
.sv-cat.sv-cat .svr-it:first-child{ border-top:0; }
.sv-cat.sv-cat .svr-nm b{ display:block; font-size:14px; }
.sv-cat.sv-cat .svr-nm small{ font-size:12px; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-q{ font-size:13px; color:var(--c-ink-2); font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svr-q b{ font-family:var(--c-display); font-size:16px; color:var(--c-ink); }
.sv-cat.sv-cat .svr-t{ text-align:right; font-variant-numeric:tabular-nums; font-weight:800; }
.sv-cat.sv-cat .svr-t small{ display:block; font-weight:700; font-size:11.5px; color:var(--c-ink-3); }
@container svcat (max-width:600px){
  .sv-cat.sv-cat .svr-it{ grid-template-columns:44px minmax(0,1fr) auto; grid-template-areas:"i n t" "i q t"; }
  .sv-cat.sv-cat .svr-it > .svr-img{ grid-area:i; } .sv-cat.sv-cat .svr-nm{ grid-area:n; } .sv-cat.sv-cat .svr-q{ grid-area:q; } .sv-cat.sv-cat .svr-t{ grid-area:t; }
}
.sv-cat.sv-cat .svr-sum{ display:flex; flex-direction:column; gap:7px; background:var(--c-surface-2); border-radius:14px; padding:14px; }
.sv-cat.sv-cat .svr-sum > div{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--c-ink-2); font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svr-sum b{ color:var(--c-ink); }
.sv-cat.sv-cat .svr-sum .svr-big{ border-top:1px solid var(--c-line); padding-top:8px; margin-top:2px; font-size:14px; }
.sv-cat.sv-cat .svr-sum .svr-big b{ font-family:var(--c-display); font-size:20px; }
.sv-cat.sv-cat .svr-minok{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:var(--c-green-ink); }
.sv-cat.sv-cat .svr-kv{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 14px; font-size:13.5px; margin:0; }
.sv-cat.sv-cat .svr-kv dt{ color:var(--c-ink-3); font-weight:700; }
.sv-cat.sv-cat .svr-kv dd{ margin:0; font-weight:700; min-width:0; }
.sv-cat.sv-cat .svr-hid{ display:inline-flex; align-items:center; gap:6px; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-hid i{ display:inline-block; max-width:100%; height:10px; border-radius:5px; background:repeating-linear-gradient(90deg,var(--c-line) 0 6px,var(--c-surface-3) 6px 12px); }
.sv-cat.sv-cat .svr-hid svg{ width:13px; height:13px; }
.sv-cat.sv-cat .svr-msg{ margin:0; background:var(--c-surface-2); border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.55; border-left:3px solid var(--c-line-2); font-style:normal; color:var(--c-ink); }
.sv-cat.sv-cat .svr-msg small{ display:block; font-size:11.5px; font-weight:800; color:var(--c-ink-3); margin-top:6px; }
.sv-cat.sv-cat .svr-buyer{ display:flex; gap:12px; align-items:center; }
.sv-cat.sv-cat .svr-av{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--c-surface-3); color:var(--c-ink-2); font:900 16px/44px var(--c-display); text-align:center; }
.sv-cat.sv-cat .svr-buyer b{ display:block; font-family:var(--c-display); font-size:18px; font-weight:900; }
.sv-cat.sv-cat .svr-buyer small{ display:block; font-size:13px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svr-vat{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--c-green-ink); background:var(--c-green-soft); border-radius:7px; padding:3px 8px; margin-top:4px; }
.sv-cat.sv-cat .svr-vat svg{ width:13px; height:13px; }

/* soldi e fatture */
.sv-cat.sv-cat .svr-br4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--c-line); border:1px solid var(--c-line); border-radius:14px; overflow:hidden; }
.sv-cat.sv-cat .svr-br4 > div{ background:var(--c-surface-2); padding:11px 13px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.sv-cat.sv-cat .svr-br4 small{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-br4 b{ font-family:var(--c-display); font-size:19px; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svr-br4 em{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-br4 .svr-neg b{ color:var(--c-red); }
.sv-cat.sv-cat .svr-br4 .svr-you{ background:var(--c-green-soft); }
.sv-cat.sv-cat .svr-br4 .svr-you :is(b,small){ color:var(--c-green-ink); }
.sv-cat.sv-cat .svr-br4 .svr-est em{ color:var(--c-gold-ink); }
@container svcat (max-width:700px){ .sv-cat.sv-cat .svr-br4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.sv-cat.sv-cat .svr-payh{ font-size:13px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svr-payh b{ color:var(--c-ink); }
.sv-cat.sv-cat .svr-flow{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset:svrfl; }
.sv-cat.sv-cat .svr-flow li{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:10px; align-items:start; font-size:13.5px; counter-increment:svrfl; margin:0; }
.sv-cat.sv-cat .svr-flow li::before{ content:counter(svrfl); width:24px; height:24px; border-radius:50%; background:var(--c-surface-3); color:var(--c-ink-2); font:900 12px/24px var(--c-display); text-align:center; }
.sv-cat.sv-cat .svr-flow li small{ display:block; font-size:12px; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-amt{ font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap; }
.sv-cat.sv-cat .svr-amt.in{ color:var(--c-green-ink); }
.sv-cat.sv-cat .svr-amt.out{ color:var(--c-red); }

/* risposta */
.sv-cat.sv-cat .svr-form{ display:flex; flex-direction:column; gap:12px; }
.sv-cat.sv-cat .svr-opts{ display:flex; flex-direction:column; gap:8px; border:0; margin:0; padding:0; min-width:0; }
.sv-cat.sv-cat .svr-opt{ display:flex; gap:11px; align-items:flex-start; border:1.5px solid var(--c-line); border-radius:13px; padding:11px 13px; background:var(--c-surface); cursor:pointer; }
.sv-cat.sv-cat .svr-opt:hover{ border-color:var(--c-line-2); }
.sv-cat.sv-cat .svr-opt input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--c-green); }
.sv-cat.sv-cat .svr-opt b{ display:block; font-size:14px; }
.sv-cat.sv-cat .svr-opt small{ font-size:12.5px; color:var(--c-ink-2); }
.sv-cat.sv-cat .svr-opt:has(input:checked){ border-color:var(--c-green); background:var(--c-green-soft); }
.sv-cat.sv-cat .svr-opt-no:has(input:checked){ border-color:var(--c-red); background:var(--c-red-soft); }
.sv-cat.sv-cat .svr-opt-no input{ accent-color:var(--c-red); }
.sv-cat.sv-cat .svr-opt:has(input:disabled){ cursor:default; opacity:.65; }
.sv-cat.sv-cat .svr-f{ display:flex; flex-direction:column; gap:5px; }
.sv-cat.sv-cat .svr-f label{ font-size:12.5px; font-weight:800; }
.sv-cat.sv-cat .svr-f label em{ font-style:normal; font-weight:700; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-inp{ display:flex; align-items:center; gap:6px; border:1.5px solid var(--c-line-2); border-radius:11px; background:var(--c-surface); padding:0 11px; }
.sv-cat.sv-cat .svr-inp:focus-within{ border-color:var(--c-green); box-shadow:0 0 0 3px var(--c-green-soft); }
.sv-cat.sv-cat .svr-inp.svr-bad{ border-color:var(--c-red); background:var(--c-red-soft); }
.sv-cat.sv-cat .svr-inp-eur{ max-width:220px; }
.sv-cat.sv-cat .svr-inp-eur > span{ font-size:13px; font-weight:700; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-inp :is(input,textarea){ border:0; outline:0; box-shadow:none; background:none; width:100%; min-width:0; padding:9px 0; margin:0; font:inherit; color:var(--c-ink); border-radius:0; min-height:0; }
.sv-cat.sv-cat .svr-inp input{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.sv-cat.sv-cat .svr-inp textarea{ font-size:14px; resize:vertical; min-height:84px; line-height:1.5; }
.sv-cat.sv-cat .svr-hint{ font-size:12px; color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-err{ font-size:13px; font-weight:800; color:var(--c-red); }
.sv-cat.sv-cat .svr-form .svr-btn{ align-self:flex-start; }
.sv-cat.sv-cat .svr-sent{ display:flex; flex-direction:column; gap:6px; border-radius:13px; padding:12px 14px; background:var(--c-blue-soft); color:var(--c-blue-ink); font-size:13.5px; }
.sv-cat.sv-cat .svr-sent > b{ font-size:14.5px; }
.sv-cat.sv-cat .svr-sent p{ color:var(--c-ink); }
.sv-cat.sv-cat .svr-sent .svr-lnk{ align-self:flex-start; color:var(--c-blue-ink); }

/* percorso */
.sv-cat.sv-cat .svr-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.sv-cat.sv-cat .svr-steps li{ position:relative; padding:0 0 14px 26px; font-size:13.5px; margin:0; }
.sv-cat.sv-cat .svr-steps li:last-child{ padding-bottom:0; }
.sv-cat.sv-cat .svr-steps li::before{ content:""; position:absolute; left:5px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--c-surface); border:2px solid var(--c-line-2); }
.sv-cat.sv-cat .svr-steps li::after{ content:""; position:absolute; left:10px; top:19px; bottom:0; width:2px; background:var(--c-line); }
.sv-cat.sv-cat .svr-steps li:last-child::after{ content:none; }
.sv-cat.sv-cat .svr-steps .svr-done::before{ background:var(--c-green); border-color:var(--c-green); }
.sv-cat.sv-cat .svr-steps .svr-now::before{ background:var(--c-gold); border-color:var(--c-gold); }
.sv-cat.sv-cat .svr-steps .svr-stop::before{ background:var(--c-ink-3); border-color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-steps .svr-todo{ color:var(--c-ink-3); }
.sv-cat.sv-cat .svr-steps b{ display:block; font-weight:800; }
.sv-cat.sv-cat .svr-steps small{ color:var(--c-ink-3); font-size:12.5px; }