/* ════════════════════════════════════════════════════════════════════════
   Webica Menu — EMBED stylesheet (auto-derived from menu.css).

   This is the CONTENT-ONLY, fully scoped variant of the standalone-page
   stylesheet `menu.css`. It is meant to be loaded on a THIRD-PARTY website
   that injects the menu fragment server-side.

   The fragment is wrapped in a single element:
       <div class="webica-menu style-CLASSICO" style="--bg:…;--text:…;…">…</div>
   where:
     • the `style-<theme>` class (classico|moderno|scuro|naturale) carries
       the per-theme layout overrides, and
     • ALL theme CSS variables (--bg, --surface, --text, --text-secondary,
       --muted, --accent, --border, --border-strong, --radius-*, --shadow-*,
       --font-head, --font-body, --item-style, …) are injected INLINE on the
       wrapper at render time.

   Therefore this file:
     • prefixes EVERY selector with `.webica-menu ` so nothing leaks onto the
       host page's own elements;
     • references `var(--…)` exactly as-is and does NOT define any variable
       (no :root block);
     • contains ONLY menu-content rules (categories, items, prices, tags,
       featured, announcements, composables, empty-state) — NO page chrome
       (hero, search, pills, tabs, feedback, footer, bottom-bar, allergen
       panel, etc.), and nothing position:fixed/sticky.

   Colore (DP §6.5, §9.2.1): --accent resta il colore grezzo del locale; ogni
   TESTO in colore d'accento usa --accent-text, ogni testo sopra un
   riempimento --accent usa --on-accent. Sempre con il fallback
   `var(--accent-text, var(--accent))`: i siti clienti hanno nel proprio HTML
   un fragment «cotto» al momento della build (senza le variabili nuove) che
   resta a schermo finché il fetch non lo sostituisce, e questo file è servito
   in diretta a entrambi. Per i tenant attivi --accent-text = --accent.

   Temi nuovi (osteria … aperitivo): il wrapper porta anche `wm-theme`,
   `wm-items-lines|cards`, `wm-dots`, `wm-dark`; le loro regole sono in fondo,
   tutte sotto `.webica-menu.wm-theme` o `.webica-menu.style-<id>`.

   Wrapper baseline — background decision:
     In the `classico` and `scuro` themes the menu items have NO surface of
     their own (they sit directly on the page background, separated only by
     hairline bottom-borders), so item legibility depends on the theme canvas.
     For that reason we DO paint the wrapper with `background: var(--bg)` so the
     embedded block always renders on its intended canvas regardless of the host
     page's own background. (In `moderno`/`naturale` the items additionally get
     their own `var(--surface)` cards on top of this canvas — see per-theme
     overrides below.)
   ════════════════════════════════════════════════════════════════════════ */

.webica-menu,
.webica-menu *,
.webica-menu *::before,
.webica-menu *::after { box-sizing: border-box; }

.webica-menu {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── HOST-CSS DEFENSE ─────────────────────────
   The fragment lives inside the host page's DOM, so the host's bare-element
   rules (img/h2/p/ul…) can bleed in. These scoped resets beat any non-important
   host element rule by specificity; `!important` is used only on the few props
   a hostile/CMS theme commonly force-breaks (image sizing/borders). The menu's
   own class rules (higher specificity) still win over these. */
.webica-menu img { max-width: 100% !important; border: 0 !important; }
.webica-menu h1, .webica-menu h2, .webica-menu h3,
.webica-menu h4, .webica-menu h5, .webica-menu h6 {
  text-transform: none; letter-spacing: normal;
}
.webica-menu ul, .webica-menu ol, .webica-menu li { list-style: none; }
.webica-menu a { text-decoration: none; background: none; }
/* Margini del browser su titoli e paragrafi (DP §9.3, VIS-16): senza un reset
   globale nel sito ospite le voci erano alte il 52 % in più della pagina.
   :where() = specificità 0 dentro .webica-menu, quindi le regole di classe
   qui sotto (margin-top espliciti) vincono sempre. Il titolo di gruppo
   (.menu-group-title, menù «uno dopo l'altro») è escluso: la sua spaziatura
   oggi viene proprio da quei margini e resta identica. */
.webica-menu :where(h2:not(.menu-group-title)),
.webica-menu :where(h3),
.webica-menu :where(p) { margin: 0; }

/* ── ANNOUNCEMENTS ───────────────────────── */

.webica-menu .announcements {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px 16px 0;
}

.webica-menu .announcement {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  align-items: flex-start;
}

.webica-menu .ann-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webica-menu .ann-title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.webica-menu .ann-content {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Annuncio con locandina o pulsante (migrazione 0012): la foto in alto a tutta
   larghezza, intera (una locandina verticale non si ritaglia), testo e pulsante
   sotto. Senza foto né pulsante l'annuncio resta quello di prima. */
.webica-menu .announcement.ann--media {
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}
.webica-menu .ann--media .ann-media { background: var(--bg-secondary, #f4f4f2); }
.webica-menu .ann-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 760px);
  object-fit: contain;
}
.webica-menu .ann--media .ann-body { padding: 12px 14px 14px; }
.webica-menu .ann--media .ann-title { font-size: 1rem; }
.webica-menu .ann--media .ann-content { font-size: 0.9rem; }
.webica-menu .ann-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.webica-menu .ann-link:hover { filter: brightness(0.95); }

.webica-menu .ann--info { background: #EFF6FF; }
.webica-menu .ann--info .ann-icon { background: #DBEAFE; color: #2563EB; }
.webica-menu .ann--info .ann-title { color: #1E40AF; }
.webica-menu .ann--info .ann-content { color: #1E3A5F; }

.webica-menu .ann--warning { background: #FFFBEB; }
.webica-menu .ann--warning .ann-icon { background: #FEF3C7; color: #D97706; }
.webica-menu .ann--warning .ann-title { color: #92400E; }
.webica-menu .ann--warning .ann-content { color: #78350F; }

.webica-menu .ann--promo { background: #F0FDF4; }
.webica-menu .ann--promo .ann-icon { background: #DCFCE7; color: #16A34A; }
.webica-menu .ann--promo .ann-title { color: #15803D; }
.webica-menu .ann--promo .ann-content { color: #14532D; }

.webica-menu .ann--wifi { background: #F5F3FF; }
.webica-menu .ann--wifi .ann-icon { background: #EDE9FE; color: #7C3AED; }
.webica-menu .ann--wifi .ann-title { color: #5B21B6; }
.webica-menu .ann--wifi .ann-content { color: #4C1D95; }

.webica-menu .ann--cover { background: var(--bg-secondary); }
.webica-menu .ann--cover .ann-icon { background: var(--border); color: var(--text-secondary); }
.webica-menu .ann--cover .ann-title { color: var(--text); }
.webica-menu .ann--cover .ann-content { color: var(--text-secondary); }

/* Iscrizione in cima (28/10/2026), come nella pagina: riga a tutta colonna
   dopo gli annunci, tinta dell'accento, regalo in un tondo d'accento, 52 px
   di tocco. Solo classi nuove: compare solo con signup_url. */
.webica-menu .wm-signup {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  max-width: 568px;
  min-height: 52px;
  margin: 12px 16px 0;
  padding: 7px 12px 7px 8px;
  border: 1.5px solid var(--accent-text, var(--accent));
  border-radius: var(--radius-md, 8px);
  background: var(--accent-soft, var(--bg-secondary));
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.webica-menu .wm-signup-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent, #fff);
}
.webica-menu .wm-signup-label { flex: 1 1 auto; min-width: 0; }
.webica-menu .wm-signup-go { flex: none; display: flex; color: var(--accent-text, var(--accent)); }
.webica-menu .wm-signup:hover,
.webica-menu .wm-signup:active { filter: brightness(0.97); }
.webica-menu .announcements + .wm-signup { margin-top: 4px; }

/* ── FEATURED SECTION ────────────────────── */

.webica-menu .featured-section {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 16px 8px;
}

.webica-menu .section-heading {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.webica-menu .section-heading-icon {
  color: var(--accent-text, var(--accent));
  font-size: 0.9rem;
}

.webica-menu .featured-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}

.webica-menu .featured-scroll::-webkit-scrollbar { display: none; }

.webica-menu .featured-card {
  flex-shrink: 0;
  width: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  scroll-snap-align: start;
  transition: transform 0.2s;
}

.webica-menu .featured-card:active { transform: scale(0.98); }

.webica-menu .featured-img-wrap {
  width: 100%;
  height: 130px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.webica-menu .featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.webica-menu .featured-img-placeholder {
  display: none; /* nessun riquadro vuoto (DP §9.3, §12) */
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--border) 100%);
}

/* Card senza foto (classe nuova, DP §12): bassa, con il filetto a sinistra;
   nel carosello misto non si allunga all'altezza delle card con la foto. */
.webica-menu .featured-card--noimg {
  width: 200px;
  min-height: 72px;
  align-self: flex-start;
  border-left: 3px solid var(--accent);
}

.webica-menu .featured-body {
  padding: 12px 14px 14px;
}

.webica-menu .featured-chip {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

.webica-menu .featured-name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.webica-menu .featured-price {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-text, var(--accent));
  margin-top: 4px;
  display: block;
}

/* ── MENU CATEGORIES ─────────────────────── */

.webica-menu .menu-category {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}

.webica-menu .cat-header {
  padding: 32px 0 16px;
  text-align: center;
}

.webica-menu .cat-title {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--cat-title-color, var(--text));
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.webica-menu .cat-icon {
  font-size: 1.2rem;
}

.webica-menu .cat-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 300;
  font-style: italic;
}

.webica-menu .cat-note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 4px;
}

.webica-menu .items-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Sottosezione dentro una sezione (aggiunta del 13/10/2026): titolo libero del
   ristoratore sopra un gruppo di voci. Compare solo nelle sezioni che ne hanno;
   il sito ospite può ristilizzarlo (.webica-menu .cat-subtitle). */
.webica-menu .cat-subtitle {
  margin: 22px 0 2px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.webica-menu .cat-header + .cat-subtitle,
.webica-menu .wine-cols + .cat-subtitle { margin-top: 8px; }
.webica-menu.style-moderno .cat-subtitle,
.webica-menu.style-naturale .cat-subtitle,
.webica-menu.wm-items-cards .cat-subtitle { margin-bottom: 10px; }

/* ── MENU ITEMS ──────────────────────────── */

.webica-menu .menu-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.2s;
}

.webica-menu .menu-item:last-child {
  border-bottom: none;
}

.webica-menu .menu-item--unavailable {
  opacity: 0.45;
}
/* «Esaurito» resta leggibile (DP §6.7, §11.1: 6,01:1): si sbiadisce tutto il
   resto della voce, non l'etichetta, che dentro l'opacità 0,45 scendeva a
   circa 2,2:1. Si sbiadiscono solo i figli che non sono e non contengono
   l'etichetta, così l'opacità non si somma («Esaurito» nella riga del nome o
   sotto il nome dei vini; nella card la fascia sopra la foto). Senza :has()
   resta la regola di sopra (tutta la voce sbiadita, come prima). */
@supports selector(:has(a)) {
  .webica-menu .menu-item--unavailable:has(.sold-out-badge),
  .webica-menu .menu-item--unavailable:has(.sold-out-overlay) { opacity: 1; }
  .webica-menu .menu-item--unavailable:has(.sold-out-badge) > :not(.sold-out-badge):not(:has(.sold-out-badge)),
  .webica-menu .menu-item--unavailable :has(.sold-out-badge) > :not(.sold-out-badge):not(:has(.sold-out-badge)),
  .webica-menu .menu-item--unavailable:has(.sold-out-overlay) > :not(:has(.sold-out-overlay)),
  .webica-menu .menu-item--unavailable :has(.sold-out-overlay) > :not(.sold-out-overlay):not(:has(.sold-out-overlay)) {
    opacity: 0.45;
  }
}

/* Compact item with thumbnail */

.webica-menu .menu-item--compact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.webica-menu .item-thumb-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
}

.webica-menu .item-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

.webica-menu .item-compact-body {
  flex: 1;
  min-width: 0;
}

/* Card placeholder when no image */

.webica-menu .item-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--bg-secondary, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.webica-menu .item-img-placeholder::after {
  content: '🍽️';
  font-size: 2.5rem;
  opacity: 0.4;
}

/* Compact item (no image) */

/* Riga nome-prezzo (DP §2.2, §9.3): stesso markup di oggi, il prezzo sta
   sempre nella colonna di destra. Lo spacer c'è in tutti i temi e spinge il
   prezzo a destra; «Esaurito» e l'etichetta «in evidenza» restano accanto al
   nome (order). La scala dei testi del fragment non cambia. */
.webica-menu .item-top-line {
  display: flex;
  align-items: baseline;
  gap: 0;
}
.webica-menu .item-top-line > .item-name { order: 0; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.webica-menu .item-top-line > .item-mark { order: 1; }
.webica-menu .item-top-line > .featured-label { order: 2; }
.webica-menu .item-top-line > .sold-out-badge { order: 2; margin-left: 8px; }
.webica-menu .item-top-line > .item-dots-spacer { order: 3; }
.webica-menu .item-top-line > .item-price { order: 4; flex: none; margin-left: auto; text-align: right; }

.webica-menu .item-name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.webica-menu .item-dots-spacer {
  flex: 1 1 16px;
  min-width: 16px;
  border-bottom: 1px dotted var(--border-strong);
  margin: 0 6px;
  align-self: baseline;
  position: relative;
  top: -3px;
}

.webica-menu .item-price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-text, var(--accent));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Prezzo base di una voce con varianti: nel markup sta sotto la riga del
   nome, prima delle varianti; a destra, nella colonna dei loro prezzi. */
.webica-menu .item-compact-body > .item-price { display: block; margin-top: 4px; text-align: right; }
/* Etichetta di una variante uguale al prezzo base, dopo il prezzo (§2.3). */
.webica-menu .price-variant { margin-left: 0.3em; }
.webica-menu .price-prefix,
.webica-menu .price-suffix {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.8;
}

.webica-menu .price-struck {
  text-decoration: line-through;
  opacity: 0.6;
}

.webica-menu .sold-out-badge {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* DP §6.7: #B42318 su #FEF2F2 = 6,01:1 (era #DC2626, 4,41:1). */
  color: var(--sold-out-text, #B42318);
  background: var(--sold-out-bg, #FEF2F2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-left: 4px;
}

.webica-menu .item-desc {
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 4px;
  font-weight: 300;
}

/* Varianti in griglia (DP §2.3, §9.3): etichetta a sinistra, prezzo nella
   colonna di destra, allineato con il prezzo della riga del nome. .variant
   non fa più da riquadro (display: contents): font e colore passano comunque
   a etichetta e prezzo. Una variante senza prezzo resta nella colonna 1. */
.webica-menu .item-variants {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 2px;
  margin-top: 6px;
}

.webica-menu .variant {
  display: contents;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.webica-menu .variant-label {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
}

.webica-menu .variant-price {
  grid-column: 2;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text, var(--accent));
}

.webica-menu .featured-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent));
  flex-shrink: 0;
  margin-left: 6px;
}

.webica-menu .item-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.webica-menu .item-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.webica-menu .tag-pill {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--tag-color, var(--accent-text, var(--accent)));
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 10%, transparent);
  white-space: nowrap;
}

.webica-menu .item-chef,
.webica-menu .item-recommended {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Item with image */

.webica-menu .menu-item--image {
  padding: 16px 0;
}

.webica-menu .item-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 12px;
}

.webica-menu .item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.webica-menu .sold-out-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.webica-menu .sold-out-overlay span {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(220,38,38,0.9);
  padding: 6px 16px;
  border-radius: var(--radius-sm);
}

.webica-menu .featured-badge-img {
  position: absolute;
  top: 10px;
  left: 10px;
}

.webica-menu .featured-badge-img .featured-label {
  background: var(--accent);
  color: var(--on-accent, #fff);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  margin-left: 0;
}

.webica-menu .item-body .item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.webica-menu .item-body .item-top > .item-name { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.webica-menu .item-body .item-top > .item-price { flex: none; margin-left: auto; text-align: right; }

/* Composable */

.webica-menu .composable-section {
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.webica-menu .composable-title {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.webica-menu .comp-group {
  margin-bottom: 8px;
}

.webica-menu .comp-group-name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.webica-menu .comp-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.webica-menu .comp-option {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 4px 10px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.webica-menu .comp-unavailable {
  opacity: 0.4;
  text-decoration: line-through;
}

/* ── ALLERGEN TEXT (a11y, not colour-only) ──── */

/* 13 px (era 11,84): informazione di legge, unica eccezione alla scala del
   fragment che resta quella di oggi (DP §9.3). */
.webica-menu .item-allergens-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* ── EMPTY STATE (published but no items) ───── */

.webica-menu .menu-empty {
  max-width: 600px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  text-align: center;
}

.webica-menu .menu-empty-icon {
  font-size: 3rem;
  opacity: 0.5;
  margin-bottom: 16px;
}

.webica-menu .menu-empty-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.webica-menu .menu-empty-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 360px;
  margin: 0 auto;
}

/* ── THEME-SPECIFIC OVERRIDES ────────────── */
/* In the standalone page these were scoped under `body.style-<name>`.
   Here the wrapper itself carries the `style-<name>` class, so they become
   `.webica-menu.style-<name>` (no descendant space before the theme class).
   Only the overrides that touch CONTENT selectors are kept. */

/* Classico */
.webica-menu.style-classico .cat-title { font-size: 1.5rem; letter-spacing: 0.02em; }
.webica-menu.style-classico .cat-header::after { content: ''; display: block; width: 40px; height: 1px; background: var(--accent); margin: 8px auto 0; opacity: 0.5; }
.webica-menu.style-classico .item-dots-spacer { border-bottom: 1px dotted var(--border-strong); }

/* Moderno */
.webica-menu.style-moderno .cat-title { font-size: 1.8rem; font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.webica-menu.style-moderno .item-name { font-style: italic; font-weight: 400; }
/* Niente puntini, ma lo spacer resta: il prezzo va a destra (VIS-06). */
.webica-menu.style-moderno .item-dots-spacer { display: block; flex: 1 1 16px; border-bottom-color: transparent; }
.webica-menu.style-moderno .menu-item--compact { background: var(--surface); padding: 16px; border-radius: var(--radius-md); border-bottom: none; margin-bottom: 8px; }
.webica-menu.style-moderno .menu-item--compact:last-child { margin-bottom: 0; }
.webica-menu.style-moderno .menu-item--image { background: var(--surface); padding: 16px; border-radius: var(--radius-lg); border-bottom: none; margin-bottom: 8px; }
.webica-menu.style-moderno .menu-item--image:last-child { margin-bottom: 0; }
.webica-menu.style-moderno .menu-item--image .item-img-wrap { border-radius: var(--radius-md); margin-bottom: 12px; }
.webica-menu.style-moderno .items-list { gap: 0; }

/* Scuro */
.webica-menu.style-scuro .cat-title { font-size: 1.6rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cat-title-color, var(--accent)); }
.webica-menu.style-scuro .cat-header::after { content: ''; display: block; width: 24px; height: 1px; background: var(--accent); margin: 10px auto 0; }
.webica-menu.style-scuro .item-name { font-weight: 500; letter-spacing: 0.02em; }
.webica-menu.style-scuro .item-dots-spacer { border-bottom: 1px solid var(--border); opacity: 0.3; }
.webica-menu.style-scuro .tag-pill { background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-text, var(--accent)); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; }
.webica-menu.style-scuro .ann--info { background: rgba(37,99,235,0.1); }
.webica-menu.style-scuro .ann--info .ann-icon { background: rgba(37,99,235,0.2); }
.webica-menu.style-scuro .ann--warning { background: rgba(217,119,6,0.1); }
.webica-menu.style-scuro .ann--warning .ann-icon { background: rgba(217,119,6,0.2); }
.webica-menu.style-scuro .ann--promo { background: rgba(22,163,74,0.1); }
.webica-menu.style-scuro .ann--promo .ann-icon { background: rgba(22,163,74,0.2); }
.webica-menu.style-scuro .ann--wifi { background: rgba(124,58,237,0.1); }
.webica-menu.style-scuro .ann--wifi .ann-icon { background: rgba(124,58,237,0.2); }
.webica-menu.style-scuro .ann--cover { background: var(--surface); }
.webica-menu.style-scuro .ann--info .ann-title, .webica-menu.style-scuro .ann--info .ann-content,
.webica-menu.style-scuro .ann--warning .ann-title, .webica-menu.style-scuro .ann--warning .ann-content,
.webica-menu.style-scuro .ann--promo .ann-title, .webica-menu.style-scuro .ann--promo .ann-content,
.webica-menu.style-scuro .ann--wifi .ann-title, .webica-menu.style-scuro .ann--wifi .ann-content { color: var(--text); }
.webica-menu.style-scuro .sold-out-badge { background: rgba(220,38,38,0.2); color: #F87171; }

/* Naturale */
.webica-menu.style-naturale .cat-title { font-size: 1.3rem; }
.webica-menu.style-naturale .item-dots-spacer { display: block; flex: 1 1 16px; border-bottom-color: transparent; }
.webica-menu.style-naturale .menu-item--compact { background: var(--surface); padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.webica-menu.style-naturale .menu-item--compact:last-child { margin-bottom: 0; }
.webica-menu.style-naturale .menu-item--image { background: var(--surface); padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.webica-menu.style-naturale .menu-item--image:last-child { margin-bottom: 0; }
.webica-menu.style-naturale .items-list { gap: 0; }
.webica-menu.style-naturale .tag-pill { background: #EAF0E6; color: var(--accent-text, var(--accent)); }
.webica-menu.style-naturale .featured-chip { background: #EAF0E6; color: var(--accent-text, var(--accent)); }

/* ── A11Y CONTRAST (muted) ─────────────────── */
/* Qui c'erano gli override di --muted per classico, moderno e naturale: non
   hanno mai avuto effetto, perché lo `style` inline del wrapper definisce già
   --muted e vince su una regola di classe. I muted corretti (DP §6.2) ora
   arrivano direttamente nello style inline del fragment (themes.js). */

/* ── TEMI NUOVI (DP §6.2, §6.6, §6.7, §9.2.9) ─────────────────────
   Solo per i locali che scelgono un tema nuovo: nessun sito cliente di
   oggi (tutti «classico») riceve queste regole. Colori dalle variabili
   inline del wrapper; la scala tipografica del fragment resta quella di
   oggi (DP §9.3), cambiano titoli, filetti, schede, tag e annunci. */
.webica-menu.wm-dark { color-scheme: dark; }

.webica-menu.wm-theme .cat-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  text-align: left;
}
.webica-menu.wm-theme .cat-header::before {
  content: '';
  grid-column: 1 / -1;
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 8px;
  background: var(--accent-2);
}
.webica-menu.wm-theme .cat-title {
  grid-column: 1;
  justify-content: flex-start;
  text-align: left;
  font-weight: var(--head-weight, 600);
  color: var(--cat-title-color);
  overflow-wrap: anywhere;
}
.webica-menu.wm-theme .cat-count {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.webica-menu.wm-theme .cat-desc,
.webica-menu.wm-theme .cat-note { grid-column: 1 / -1; }
.webica-menu.wm-theme .cat-note { color: var(--text-secondary); }
.webica-menu.style-bistrot .cat-title { font-style: italic; }

.webica-menu.wm-theme .item-price { margin-left: auto; font-variant-numeric: tabular-nums; }
.webica-menu.wm-theme .variant-price { font-variant-numeric: tabular-nums; }
.webica-menu.wm-theme .item-dots-spacer { border-bottom-color: transparent; }
.webica-menu.wm-theme.wm-dots .item-dots-spacer { border-bottom: 1px dotted var(--border-strong); }
.webica-menu.wm-dark.wm-dots .item-dots-spacer { border-bottom-color: color-mix(in srgb, var(--text) 30%, transparent); }

.webica-menu.wm-items-cards .items-list { gap: 0; }
.webica-menu.wm-items-cards .menu-item--compact,
.webica-menu.wm-items-cards .menu-item--image {
  background: var(--surface);
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.webica-menu.wm-items-cards .menu-item--image { border-radius: var(--radius-lg); padding: 14px; }
.webica-menu.wm-items-cards .menu-item--compact:last-child,
.webica-menu.wm-items-cards .menu-item--image:last-child { margin-bottom: 0; }

.webica-menu.wm-theme .item-top-line .featured-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 0.05em;
  background: var(--accent-2);
}
.webica-menu.wm-theme .featured-card { border-left: 3px solid var(--accent-2); }
.webica-menu.wm-theme .featured-chip { color: var(--accent-text); background: var(--accent-soft); }
.webica-menu.wm-theme .tag-pill {
  color: var(--tag-text, var(--tag-color, var(--accent-2-text)));
  background: color-mix(in srgb, var(--tag-color, var(--accent-2)) 12%, transparent);
}
/* Senza colore proprio: pillola piena di --accent-2-soft (4,5:1 garantito). */
.webica-menu.wm-theme .tag-pill:not([style*="--tag-color"]) { background: var(--accent-2-soft); }
.webica-menu.wm-theme .sold-out-badge { color: var(--sold-out-text); background: var(--sold-out-bg); }

.webica-menu.wm-theme .ann--info,
.webica-menu.wm-theme .ann--wifi { background: var(--accent-soft); }
.webica-menu.wm-theme .ann--info .ann-icon,
.webica-menu.wm-theme .ann--wifi .ann-icon { background: var(--surface); color: var(--accent-text); }
.webica-menu.wm-theme .ann--info .ann-title,
.webica-menu.wm-theme .ann--wifi .ann-title { color: var(--accent-text); }
.webica-menu.wm-theme .ann--info .ann-content,
.webica-menu.wm-theme .ann--wifi .ann-content { color: var(--text); }
.webica-menu.wm-theme .ann--promo { background: var(--accent-2-soft); }
.webica-menu.wm-theme .ann--promo .ann-icon { background: var(--surface); color: var(--accent-2-text); }
.webica-menu.wm-theme .ann--promo .ann-title { color: var(--accent-2-text); }
.webica-menu.wm-theme .ann--promo .ann-content { color: var(--text); }
.webica-menu.wm-theme .ann--warning { background: #FFF4E0; }
.webica-menu.wm-theme .ann--warning .ann-icon { background: #FFE7BF; color: #7A4B00; }
.webica-menu.wm-theme .ann--warning .ann-title,
.webica-menu.wm-theme .ann--warning .ann-content { color: #7A4B00; }
.webica-menu.wm-dark .ann--warning { background: #2B2416; }
.webica-menu.wm-dark .ann--warning .ann-icon { background: #3A3020; color: #F2C46D; }
.webica-menu.wm-dark .ann--warning .ann-title,
.webica-menu.wm-dark .ann--warning .ann-content { color: #F2C46D; }
.webica-menu.wm-dark .ann--cover { background: var(--surface); }
.webica-menu.wm-dark .composable-section { background: var(--bg-secondary); }

/* ── ALLERGENI E OBBLIGHI DI LEGGE (DP §8.3, §9.2.5-6) ─────────────
   Solo classi nuove, additive: `.item-mark` compare solo sulle voci con il
   flag di surgelato o abbattuto; `.menu-legal` solo col parametro legal=1
   (default nascosto sui siti clienti, piano T13). Misure del fragment di oggi. */

.webica-menu .item-mark {
  flex: none;
  margin-left: 2px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text, var(--accent));
}

/* Layout card («space-between»): i segni restano accanto al nome, il prezzo a destra. */
.webica-menu .item-body .item-top .item-mark ~ .item-price { margin-left: auto; }

.webica-menu .menu-legal {
  max-width: 568px;
  margin: 24px 16px 0;
  padding: 16px;
  border-radius: var(--radius-md, 8px);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.webica-menu .menu-legal p { margin: 0; }

/* Titolo a 16 px e coperto a 15 px (28/10/2026), come nella pagina. */
.webica-menu .menu-legal-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.webica-menu .menu-legal-text + .menu-legal-text,
.webica-menu .menu-legal-cover,
.webica-menu .menu-legal-legends { margin-top: 8px; }
.webica-menu .menu-legal-cover { color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.45; }
.webica-menu .menu-legal-legend + .menu-legal-legend { margin-top: 2px; }
.webica-menu .menu-legal-text--custom { white-space: pre-line; }

/* ── RESPONSIVE ──────────────────────────── */

@media (min-width: 480px) {
  .webica-menu .item-img-wrap { height: 220px; }
}

@media (min-width: 600px) {
  .webica-menu .menu-legal,
  .webica-menu .wm-signup { margin-left: auto; margin-right: auto; }
}

@media (min-width: 768px) {
  .webica-menu .announcements { padding: 12px 24px 0; }
  .webica-menu .wm-signup { max-width: 552px; }
  .webica-menu .featured-section { padding: 20px 24px 8px; }
  .webica-menu .menu-category { padding: 0 24px; }
}

/* ── CARTA DEI VINI (DP §4.2, §9.2.4; WP21) ──────────────────────────
   Solo classi nuove e solo sulle voci vino (sezioni categories.kind='wine' o
   voci con i campi vino): nessun tenant attivo ne ha, per i 5 siti clienti
   non cambia nulla. Stessa resa della pagina, senza filtri. */

/* Colonne dei prezzi: 64 px, 88 px da 768 px. Nessuna variabile definita qui
   (le variabili del fragment le porta lo style inline). */

.webica-menu .menu-item--wine .item-thumb-wrap,
.webica-menu .menu-item--wine .item-thumb { width: 56px; height: 56px; }

.webica-menu .menu-item--wine .item-top-line { align-items: baseline; gap: 0; }
.webica-menu .menu-item--wine .item-top-line > .wine-namebox { order: 0; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Nome, segni e annata scorrono insieme: l'annata segue l'ultima parola
   (con l'annata in una colonna sua i nomi lunghi vanno a capo più spesso).
   Nei vini il «nome» della riga di DP §2.2 è .wine-namebox. */
.webica-menu .menu-item--wine .wine-namebox > .item-name { display: inline; }
.webica-menu .menu-item--wine .wine-namebox > .item-mark { display: inline; }
.webica-menu .menu-item--wine .item-top-line > .featured-label { order: 2; }
.webica-menu .menu-item--wine .wine-soldout { margin-top: 4px; }
.webica-menu .menu-item--wine .wine-soldout .sold-out-badge { display: inline-block; margin-left: 0; }
.webica-menu .menu-item--wine .item-top-line > .item-dots-spacer { order: 3; flex: 1 1 16px; min-width: 16px; margin: 0 6px; }
.webica-menu .menu-item--wine .item-top-line > .wine-prices { order: 4; flex: none; margin-left: auto; }
.webica-menu .menu-item--wine .item-top-line--noprice > .item-dots-spacer { border-bottom-color: transparent; }

.webica-menu .wine-vintage {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.webica-menu .wine-meta {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}
.webica-menu .wine-details {
  margin: 1px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
}

.webica-menu .wine-prices { font-family: var(--font-body); text-align: right; white-space: nowrap; }
.webica-menu .wine-prices--cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--wine-col, 64px), max-content);
  column-gap: 8px;
}
.webica-menu .wine-price { display: block; }
.webica-menu .wine-price-amount {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent-text, var(--accent));
  font-variant-numeric: tabular-nums;
}
.webica-menu .wine-price--missing .wine-price-amount { color: var(--muted); font-weight: 400; }
/* Una dicitura («Su richiesta», «da €90») va a capo dentro la colonna invece
   di allargarla. Le larghezze sono scritte per esteso: il CSS dei siti
   clienti non definisce variabili (le porta lo style inline). */
.webica-menu .wine-prices--cols .wine-price--text { max-width: var(--wine-col, 64px); white-space: normal; overflow-wrap: break-word; }
.webica-menu .wine-prices--cols .wine-price--text .wine-price-amount { line-height: 1.25; }
.webica-menu .wine-price--text [data-i18n="on_request"] { font-size: 13px; font-weight: 500; }
.webica-menu .wine-prices--cols .wine-price-label,
.webica-menu .wine-price--nolabel .wine-price-label,
.webica-menu .wine-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.webica-menu .wine-prices--inline { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; }
.webica-menu .wine-prices--inline .wine-price { display: inline; }
.webica-menu .wine-prices--inline .wine-price + .wine-price::before { content: '·'; margin: 0 6px; color: var(--muted); }
.webica-menu .wine-prices--inline .wine-price-label { margin-right: 4px; font-size: 13px; font-weight: 500; color: var(--text-secondary); }

.webica-menu .wine-cols { display: flex; justify-content: flex-end; margin: 0 0 2px; }
.webica-menu .wine-cols-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--wine-col, 64px), max-content);
  column-gap: 8px;
  text-align: right;
}
.webica-menu .wine-col {
  /* Mai più larga della colonna delle celle: un'etichetta lunga sporge a
     sinistra e resta allineata a destra con gli importi. */
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  max-width: 64px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.webica-menu.style-moderno .wine-cols,
.webica-menu.style-naturale .wine-cols,
.webica-menu.wm-items-cards .wine-cols { padding-right: 16px; }
.webica-menu.style-enoteca .cat--wine .cat-title,
.webica-menu.style-cantina .cat--wine .cat-title { color: var(--accent-text); }

/* Importi lunghi («€125,50», «CHF 125»): colonne più larghe per tutta la
   sezione, intestazione compresa (il renderer mette cat--wine-wide). */
.webica-menu .cat--wine-wide .wine-prices--cols,
.webica-menu .cat--wine-wide .wine-cols-grid { grid-auto-columns: minmax(80px, max-content); }
.webica-menu .cat--wine-wide .wine-prices--cols .wine-price--text,
.webica-menu .cat--wine-wide .wine-col { max-width: 80px; }

@media (min-width: 768px) {
  .webica-menu .wine-prices--cols,
  .webica-menu .wine-cols-grid { grid-auto-columns: minmax(88px, max-content); }
  .webica-menu .wine-prices--cols .wine-price--text,
  .webica-menu .wine-col { max-width: 88px; }
  .webica-menu .cat--wine-wide .wine-prices--cols,
  .webica-menu .cat--wine-wide .wine-cols-grid { grid-auto-columns: minmax(104px, max-content); }
  .webica-menu .cat--wine-wide .wine-prices--cols .wine-price--text,
  .webica-menu .cat--wine-wide .wine-col { max-width: 104px; }
}

/* ── RIGA SENZA PREZZO (DP §2.2, §9.2.7) ─────
   Voce con varianti o prezzo nascosto: il renderer mette la classe additiva
   item-top-line--noprice e lo spacer resta senza puntini (niente puntini
   che finiscono nel vuoto, VIS-17), in tutti i temi. */
.webica-menu .menu-item .item-top-line.item-top-line--noprice > .item-dots-spacer { border-bottom-color: transparent; }

/* ── MOTION ──────────────────────────────── */
/* Category fade-in carried over so the embedded block animates in too. */

@keyframes webica-menu-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.webica-menu .menu-category { animation: webica-menu-fadeIn 0.3s ease both; }
.webica-menu .menu-category:nth-child(2) { animation-delay: 0.05s; }
.webica-menu .menu-category:nth-child(3) { animation-delay: 0.1s; }
.webica-menu .menu-category:nth-child(4) { animation-delay: 0.15s; }
.webica-menu .menu-category:nth-child(5) { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .webica-menu .menu-category { animation: none; }
}