/* =====================================================================
   MENIUL DE PE MASĂ
   =====================================================================

   Se citește pe telefon, ținut în mână, într-o sală cu lumină caldă și
   scăzută. De aici vin toate deciziile de mai jos:

   • fără antet și subsol de site — omul e deja în restaurant
   • ținte de atins de minimum 44px — se apasă cu degetul, nu cu mausul
   • contrast peste minimul WCAG — lumina din sală e slabă
   • pătrate, nu dreptunghiuri — fotografiile de meniu sunt pătrate
   • totul merge și fără JavaScript — afișarea alergenilor e obligație
     legală, iar legea nu întreabă ce telefon are omul la masa 7

   Culorile și literele vin din app.css, care e deja în memoria
   telefonului dacă a mai fost pe site. Aici sunt doar ecranele astea.

   EBRAICA. Nu e „la sfârșit, dacă mai rămâne timp": e una din cele cinci
   limbi. Așezarea folosește peste tot proprietăți logice
   (`padding-inline`, `margin-inline-start`, `inset-inline`), nu
   `left`/`right`. Așa, `dir="rtl"` pe <html> întoarce pagina întreagă —
   coloane, margini, colțuri rotunjite, poziția barei — fără o singură
   regulă scrisă special. Excepțiile sunt trei și sunt marcate.
   ===================================================================== */

.carta-body {
  background: var(--bg, #F5EDD9);
  color: var(--ink, #151518);
  /* Telefoanele cu crestătură: conținutul nu intră sub ea. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.carta { max-width: 720px; margin-inline: auto; padding-bottom: 6rem; }

/* ---------------------------------------------------------------------
   Alegerea limbii
   --------------------------------------------------------------------- */
.carta-limba {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.carta-limba__in { width: 100%; max-width: 380px; text-align: center; }
.carta-limba__logo { margin-inline: auto; margin-bottom: 2.5rem; width: 200px; height: auto; }

.carta-limba__t {
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  line-height: 1.1;
  margin: 0 0 .5rem;
}

.carta-limba__s {
  font-size: .875rem;
  line-height: 1.5;
  opacity: .7;
  margin: 0 0 2rem;
  /* Textul e scris în limba PAGINII, dar butoanele de sub el sunt în
     cinci limbi diferite. Fără asta, o frază românească și un buton
     ebraic s-ar alinia unul după altul și ar arăta ca o eroare. */
  text-wrap: pretty;
}

.carta-limba__lista { display: grid; gap: .625rem; }

.carta-limba__b {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  padding-inline: 1.25rem;
  border: 1px solid var(--line, #d8cbae);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}

.carta-limba__b:active { transform: scale(.985); }
.carta-limba__b:hover  { border-color: var(--ink, #151518); }

.carta-limba__cod {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .75rem;
  letter-spacing: .08em;
  opacity: .55;
  min-width: 2.25rem;
  text-align: start;
}

.carta-limba__nume {
  font-size: 1.0625rem;
  font-weight: 500;
  /* Numele fiecărei limbi e scris ÎN limba ei. «עברית» trebuie citit de
     la dreapta la stânga în interiorul celulei, fără să întoarcă
     rândul. */
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------
   Bara de sus
   --------------------------------------------------------------------- */
/* Înălțimea barei de sus, o singură dată.
   Bara de file se lipește exact sub ea. Scrisă ca număr în două locuri,
   ar fi ținut doar până la prima schimbare de logo — după care filele
   ar fi intrat sub bară, iar prima grupă ar fi devenit inaccesibilă
   fără ca nimeni să știe de ce. */
.carta-body { --carta-bara: 53px; }

.carta-bara {
  position: sticky;
  top: 0;
  min-height: var(--carta-bara);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  background: color-mix(in srgb, var(--bg, #F5EDD9) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8cbae) 60%, transparent);
}

.carta-bara__logo { height: 22px; width: auto; }

.carta-bara__inapoi {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-inline-start: -.5rem;
  border-radius: 10px;
  color: inherit;
}

.carta-bara__inapoi:active { background: color-mix(in srgb, var(--ink, #151518) 8%, transparent); }

/* Excepția 1. O săgeată care arată spre stânga înseamnă „înapoi" într-o
   pagină care merge spre dreapta — și „înainte" într-una care merge
   spre stânga. Geometria nu se oglindește singură; trebuie întoarsă. */
[dir="rtl"] .carta-sageata { transform: scaleX(-1); }

/* ---------------------------------------------------------------------
   Jetonul mesei — uşa către ecranul mesei
   ─────────────────────────────────────────
   Stă lipit în dreapta, înaintea limbilor, şi e împins acolo de el
   (`margin-inline-start: auto`). Când e pe ecran, limbile nu mai au
   nevoie de împingere — de asta regula de mai jos le-o ia.

   Numărul mesei e scris cu monospaţiu şi încadrat: omul vrea să-l
   verifice dintr-o privire, nu să-l citească.
   --------------------------------------------------------------------- */
.carta-masa {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-inline-start: auto;
  min-height: 34px;
  padding-inline: .5rem;
  border: 1px solid color-mix(in srgb, var(--line, #d8cbae) 90%, transparent);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.carta-masa:active { background: color-mix(in srgb, var(--ink, #151518) 8%, transparent); }

.carta-masa__nr {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.carta-masa__t {
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
}

/* Sub 360px (telefoanele mici, şi ebraica, care e mai lată) rămâne doar
   numărul. „Cereri" e eticheta, numărul e informaţia. */
@media (max-width: 359px) { .carta-masa__t { display: none; } }

.carta-limbi { display: flex; gap: .25rem; margin-inline-start: auto; }

.carta-masa + .carta-limbi { margin-inline-start: 0; }

.carta-limbi__b {
  min-width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding-inline: .375rem;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .6875rem;
  letter-spacing: .06em;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  opacity: .5;
}

.carta-limbi__b.is-on {
  opacity: 1;
  background: var(--ink, #151518);
  color: var(--on-dark, #F5EDD9);
}

/* ---------------------------------------------------------------------
   Capul paginii
   --------------------------------------------------------------------- */
.carta-cap { padding: 1.75rem 1rem 1rem; }

.carta-cap__t {
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.carta-cap__s { font-size: .8125rem; opacity: .65; margin: .5rem 0 0; }
.carta-cap--grupa { padding-top: 1.25rem; }

/* ---------------------------------------------------------------------
   Grila celor 14 grupe
   --------------------------------------------------------------------- */
.carta-grila {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  padding-inline: 1rem;
}

@media (min-width: 560px) { .carta-grila { grid-template-columns: repeat(3, 1fr); } }

.carta-patrat {
  position: relative;
  display: block;
  /* Pătrat, fiindcă fotografiile sunt pătrate. Alt raport ar tăia din
     farfurie tocmai ce s-a fotografiat. */
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-alt, #ece0c4);
  color: var(--on-dark, #F5EDD9);
  text-decoration: none;
  isolation: isolate;
}

.carta-patrat__poza {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.carta-patrat:active .carta-patrat__poza { transform: scale(1.04); }

.carta-patrat__jos {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem .75rem .625rem;
  /* Degradeul îl ține pe „STARTERS" lizibil și peste o poză deschisă la
     culoare. Fără el, textul alb dispare pe burrata. */
  background: linear-gradient(to top, rgba(10, 8, 6, .82), rgba(10, 8, 6, .35) 55%, transparent);
}

.carta-patrat--fara .carta-patrat__jos { background: none; }

.carta-patrat__nume {
  font-size: clamp(.8125rem, 3.4vw, .9375rem);
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.carta-patrat__nr {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .6875rem;
  opacity: .8;
  flex: 0 0 auto;
  padding-bottom: .1rem;
}

/* --- grila fără fotografii ------------------------------------------
   Aceleași pătrate, dar numele se mută din colțul de jos în mijloc și
   crește. Un nume mic lipit de o margine arată a etichetă căzută de pe
   o poză care n-a venit; unul centrat arată a buton, adică a ce e.

   CULOAREA. Peste o fotografie, plăcile colorate erau un fundal pe care
   se vedea textul alb. Fără fotografii devin ele ecranul — paisprezece
   dreptunghiuri în paisprezece culori, cu alb pe bej deschis la unele.
   Aici pătratele iau hârtia și cerneala meniului: fond crem, scris
   negru, o linie subțire. E aceeași carte, nu o paletă. */
.carta-grila--text .carta-patrat {
  /* Pătratul exista fiindcă fotografiile sunt pătrate. Fără fotografie
     nu mai are ce ține în el, iar 14 pătrate goale înseamnă trei ecrane
     de derulat ca să vezi o listă de paisprezece nume. Turtite, intră
     aproape toate deodată — care era ideea. */
  aspect-ratio: 5 / 3;
  background: #fff !important;      /* bate culoarea pusă din șablon */
  color: var(--ink, #151518);
  border: 1px solid var(--line, #d8cbae);
  transition: border-color .15s ease, transform .15s ease;
}

.carta-grila--text .carta-patrat:active { transform: scale(.985); }
.carta-grila--text .carta-patrat:hover  { border-color: var(--ink, #151518); }

.carta-grila--text .carta-patrat__jos {
  position: static;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .35rem;
  padding: .9rem;
  background: none;
}

.carta-grila--text .carta-patrat__nume {
  font-size: clamp(.9375rem, 4.2vw, 1.125rem);
  line-height: 1.1;
  text-shadow: none;
  text-wrap: balance;
}

.carta-grila--text .carta-patrat__nr { opacity: .65; padding-bottom: 0; }


/* ---------------------------------------------------------------------
   Bara de file (grupele, în interiorul unei grupe)
   --------------------------------------------------------------------- */
.carta-file {
  position: sticky;
  top: var(--carta-bara);   /* exact sub bara de sus */
  z-index: 25;
  display: flex;
  gap: .375rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: .5rem 1rem;
  background: color-mix(in srgb, var(--bg, #F5EDD9) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8cbae) 50%, transparent);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Excepția 2. Derularea orizontală pornește de la marginea de început
     a scrierii, nu de la stânga. Fără asta, la ebraică bara se deschide
     pe ultima grupă. */
  scroll-padding-inline-start: 1rem;
}

.carta-file::-webkit-scrollbar { display: none; }

/* Copia din josul grupei. Nu se lipește — ea e capătul listei, nu un
   reper permanent — și primește o linie deasupra în loc de una dedesubt,
   ca să se citească drept „de aici încolo, altă grupă". */
.carta-file--jos {
  position: static;
  margin-top: 1.25rem;
  border-bottom: 0;
  border-top: 1px solid color-mix(in srgb, var(--line, #d8cbae) 50%, transparent);
  background: transparent;
  backdrop-filter: none;
  padding-block: .9rem;
}

.carta-fila {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding-inline: .75rem;
  border: 1px solid var(--line, #d8cbae);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  background: transparent;
}

.carta-fila.is-on {
  background: var(--accent, #18490a);
  border-color: var(--accent, #18490a);
  color: var(--on-dark, #F5EDD9);
}

/* ---------------------------------------------------------------------
   Preparatele
   --------------------------------------------------------------------- */
.carta-sectiune {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
  margin: 1.75rem 0 .25rem;
  padding-inline: 1rem;
}

.carta-lista { list-style: none; margin: 0; padding: 0; }

.carta-item {
  padding: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8cbae) 45%, transparent);
}

/* --- fișa: cardul întreg e butonul care o deschide ------------------- */
.carta-fisa__cap {
  display: block;
  cursor: pointer;
  list-style: none;                 /* fără triunghiul implicit */
  -webkit-tap-highlight-color: transparent;
}
.carta-fisa__cap::-webkit-details-marker { display: none; }
.carta-fisa__cap:focus-visible {
  outline: 2px solid var(--accent, #18490a);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Poza pătrată, lată cât cardul. Pătrată din CSS, nu din speranță:
   fotografiile sunt tăiate pătrat la procesare, dar `aspect-ratio` ține
   forma și cât timp se încarcă — altfel rândurile de sub ea sar când
   sosește fiecare poză. */
.carta-item__poza {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-alt, #ece0c4);
  margin-bottom: .7rem;
}

.carta-item__poza img { width: 100%; height: 100%; object-fit: cover; display: block; }

.carta-item__text { min-width: 0; }

.carta-item__sus {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.carta-item__nume {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  /* Denumirile rămân în original (Margherita, Bucatini Peel Peel) în
     toate limbile. Într-o pagină ebraică sunt deci o insulă latină:
     `unicode-bidi: isolate` o ține întreagă, altfel parantezele și
     cratimele sar la celălalt capăt. */
  unicode-bidi: isolate;
}

.carta-pret {
  flex: 0 0 auto;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.carta-pret i { font-style: normal; font-size: .6875rem; opacity: .6; }
.carta-pret--fara { font-weight: 400; opacity: .55; font-family: inherit; font-size: .75rem; }

.carta-item__desc {
  font-size: .8125rem;
  line-height: 1.45;
  opacity: .72;
  margin: .3rem 0 0;
  text-wrap: pretty;
}

/* Cu poză mare, denumirea are voie să fie mai mare: e titlul cardului,
   nu o linie într-un tabel. */
.carta-item--foto .carta-item__nume { font-size: 1.0625rem; }
.carta-item--foto .carta-item__desc { font-size: .875rem; opacity: .78; }
.carta-item--foto .carta-pret { font-size: .9375rem; }

/* --- fișa deschisă --------------------------------------------------- */
.carta-fisa__corp {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--line, #d8cbae) 55%, transparent);
}

.carta-fisa__lista { margin: .6rem 0 0; font-size: .8125rem; }
.carta-fisa__lista dt {
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: .55; margin-top: .55rem;
}
.carta-fisa__lista dd { margin: .15rem 0 0; line-height: 1.5; }
.carta-fisa__lista dd.mono { font-family: var(--mono, ui-monospace, monospace); unicode-bidi: isolate; }

.carta-fisa__mic { font-size: .6875rem; line-height: 1.5; opacity: .6; margin: .8rem 0 0; }

/* --- etichete: gramaj, regim, alergen ------------------------------- */
.carta-etichete { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.carta-etichete--card { align-items: center; }

.carta-et {
  display: inline-flex;
  align-items: center;
  padding: .1rem .4rem;
  border: 1px solid var(--line, #d8cbae);
  border-radius: 4px;
  font-size: .625rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

/* Gramajul NU se scrie cu majuscule. Simbolul gramului e „g"; „G" e
   prefixul giga. Restul etichetelor primesc `text-transform: uppercase`
   de la `.carta-et`, aici se anulează — o unitate de măsură scrisă
   greșit pe un meniu care poartă gramaje obligatorii prin lege arată
   exact ca o greșeală, pentru că este una. */
.carta-et--gram {
  font-family: var(--mono, ui-monospace, monospace);
  opacity: .6;
  text-transform: none;
  unicode-bidi: isolate;
}
.carta-et--regim { border-color: color-mix(in srgb, var(--accent, #18490a) 45%, transparent); color: var(--accent, #18490a); }

/* Alergenii se văd altfel decât restul: pe ei se ia o decizie care ține
   de sănătate. Conturul plin = confirmat de bucătar; punctat = dedus
   automat din ingredientele tipărite și încă neconfirmat. Diferența
   trebuie să se vadă fără să treci cu mausul, fiindcă pe telefon nu
   există „a trece cu mausul". */
.carta-et--alergen {
  border-color: color-mix(in srgb, var(--ember, #d33f20) 55%, transparent);
  color: color-mix(in srgb, var(--ember, #d33f20) 85%, var(--ink, #151518));
}

.carta-et--auto { border-style: dashed; opacity: .8; }

/* Semnul „detalii" dispare când fișa e deschisă: atunci detaliile sunt
   pe ecran, iar eticheta ar spune să faci ce tocmai ai făcut. */
.carta-et--mai {
  border: 0;
  background: none;
  opacity: .45;
  padding: 0;
  margin-inline-start: .25rem;
  letter-spacing: .06em;
}
.carta-et--mai::after { content: " ›"; }
.carta-fisa[open] .carta-et--mai { display: none; }


/* ---------------------------------------------------------------------
   Note, subsol, gol
   --------------------------------------------------------------------- */
.carta-nota { font-size: .75rem; opacity: .55; padding: 1.25rem 1rem 0; margin: 0; text-wrap: pretty; }
.carta-nota--mic { font-size: .6875rem; opacity: .45; padding-top: .35rem; }
.carta-gol { padding: 3rem 1rem; text-align: center; opacity: .6; }

.carta-legal {
  margin-top: 2rem;
  padding: 1.25rem 1rem 2rem;
  border-top: 1px solid color-mix(in srgb, var(--line, #d8cbae) 55%, transparent);
  font-size: .6875rem;
  line-height: 1.55;
  opacity: .6;
  text-wrap: pretty;
}

.carta-legal p { margin: 0 0 .5rem; }
.carta-legal p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Butonul de chemat ospătarul
   --------------------------------------------------------------------- */
.carta-cheama {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg, #F5EDD9) 60%, transparent);
  pointer-events: none;
}

.carta-cheama__b {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--ink, #151518);
  color: var(--on-dark, #F5EDD9);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.carta-cheama__masa {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .6875rem;
  letter-spacing: .06em;
  opacity: .65;
  padding-inline-end: .625rem;
  /* Excepția 3. Linia despărțitoare cade pe marginea de sfârșit a
     scrierii, deci trebuie să fie `border-inline-end`, nu
     `border-right`. */
  border-inline-end: 1px solid color-mix(in srgb, var(--on-dark, #F5EDD9) 25%, transparent);
  unicode-bidi: isolate;
}

.carta-cheama__b[disabled] { opacity: .6; }
.carta-cheama.e-trimis .carta-cheama__b { background: var(--accent, #18490a); }

/* ---------------------------------------------------------------------
   Preferințe ale omului
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .carta-patrat__poza,
  .carta-limba__b { transition: none; }
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
}

.skip:focus {
  inset-inline-start: 1rem;
  top: 1rem;
  z-index: 100;
  padding: .625rem 1rem;
  background: var(--ink, #151518);
  color: var(--on-dark, #F5EDD9);
  border-radius: 8px;
}

/* =====================================================================
   COȘUL, NOTA, SUGESTIILE, NUTRIȚIA
   =====================================================================
   Tot ce urmează e opțional: dacă JavaScript-ul nu pornește, nimic din
   astea nu apare, iar meniul rămâne întreg. De aceea sunt scrise la
   sfârșit, ca un strat peste, nu amestecate în meniu.
   ===================================================================== */

/* --- butoanele de sub fiecare preparat ----------------------------- */
.carta-act { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }

.carta-act__b {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  /* 34px e sub cei 44px recomandați pentru o țintă principală, și e
     voit: astea nu sunt butoanele principale ale ecranului, sunt
     acțiuni secundare lângă un rând de meniu. Zona de atins e totuși
     mai mare decât desenul, prin padding. */
  min-height: 34px;
  padding: 0 .55rem;
  border: 1px solid var(--line, #d8cbae);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .6875rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.carta-act__b:active { transform: scale(.97); }
.carta-act__b--add { border-color: color-mix(in srgb, var(--accent, #18490a) 55%, transparent); color: var(--accent, #18490a); }
.carta-act__b--add.e-adaugat { background: var(--accent, #18490a); border-color: var(--accent, #18490a); color: var(--on-dark, #F5EDD9); }
.carta-act__nu { font-size: .6875rem; opacity: .5; align-self: center; }

/* --- bara de jos ---------------------------------------------------- */
.cos-bara {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg, #F5EDD9) 62%, transparent);
  pointer-events: none;
}

.cos-bara__b {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  min-height: 52px;
  padding-inline: 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink, #151518);
  color: var(--on-dark, #F5EDD9);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.cos-bara__nr {
  min-width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent, #18490a);
  font-size: .6875rem; font-weight: 700;
}

.cos-bara__t { flex: 1 1 auto; text-align: start; }
.cos-bara__total { font-family: var(--mono, ui-monospace, monospace); font-size: .8125rem; unicode-bidi: isolate; }

/* --- banda „scanează masa", pe meniul fără masă ----------------------
   Stă sus, sub bară, înaintea cărţilor: e singurul lucru care schimbă ce
   poate face omul cu pagina asta. Pusă jos, ar fi fost citită după ce
   omul a terminat de căutat ce caută — adică prea târziu ca să-l mai
   scutească de ceva.
   -------------------------------------------------------------------- */
.scanmasa {
  margin: .75rem 1rem 0;
  padding: .875rem 1rem;
  display: grid;
  gap: .625rem;
  border: 1px solid color-mix(in srgb, var(--accent, #18490a) 40%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #18490a) 6%, transparent);
}

.scanmasa__text { display: grid; gap: .125rem; }
.scanmasa__text strong { font-size: .9375rem; }
.scanmasa__text span { font-size: .8125rem; opacity: .7; line-height: 1.4; }

.scanmasa__b {
  justify-self: start;
  min-height: 42px;
  padding-inline: 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #18490a);
  color: var(--on-dark, #F5EDD9);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}

.scanmasa__b:active { transform: scale(.97); }

.scanmasa__scris { display: flex; gap: .5rem; align-items: center; }

.scanmasa__scris input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding-inline: .75rem;
  border: 1px solid color-mix(in srgb, var(--line, #d8cbae) 90%, transparent);
  border-radius: 10px;
  background: var(--bg, #F5EDD9);
  color: inherit;
  font: inherit;
}

.scanmasa__scris button {
  min-height: 42px;
  padding-inline: .875rem;
  border: 0;
  border-radius: 10px;
  background: var(--ink, #151518);
  color: var(--on-dark, #F5EDD9);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Pătrată: omul trebuie să ştie unde să ţină codul. `cover`, nu
   `contain` — un film cu dungi negre pe margini pare stricat. */
.scanmasa__video {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 12px;
  background: #0B0A09;
}

.scanmasa__stare { margin: 0; font-size: .8125rem; line-height: 1.4; opacity: .75; }
.scanmasa__stare:empty { display: none; }

/* --- butonul plutitor de comandă ------------------------------------
   DE CE ROTUND ŞI ÎN COLŢ, NU O BARĂ PE TOATĂ LĂŢIMEA
   O bară pe toată lăţimea acoperă rândul de jos din meniu — şi ăla e
   mereu un preparat. Pe o listă de pizze, preparatul acoperit e cel pe
   care omul tocmai derula ca să-l vadă. Butonul rotund lasă meniul
   întreg şi stă unde cade degetul mare, în colţul de jos, pe partea de
   care se citeşte pagina (de aceea `inset-inline-end`, nu `right`: în
   ebraică trece singur în stânga).

   Se LĂRGEŞTE când are ceva de spus: cu notă pe masă scrie şi cifra, cu
   coşul plin scrie totalul coşului. Un buton care nu-şi schimbă
   mărimea e un buton despre care omul nu ştie că s-a schimbat ceva.
   -------------------------------------------------------------------- */
.cos-fab {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 40;
}

.cos-fab__b {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 56px;
  padding-inline: 1.0625rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink, #151518);
  color: var(--on-dark, #F5EDD9);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .26);
  transition: transform .14s ease;
}

.cos-fab__b:active { transform: scale(.96); }

/* Cu ceva în coş, butonul devine verde: nu mai e „uită-te", e „trimite". */
.cos-fab.are-cos .cos-fab__b {
  background: var(--accent, #18490a);
}

.cos-fab__semn { display: grid; place-items: center; }

.cos-fab__t {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .875rem;
  letter-spacing: .01em;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* Pastila cu numărul: deasupra-stânga, ca la orice aplicaţie de pe
   telefon. Ascunsă la zero — un „0" pe un buton citeşte ca o defecţiune. */
.cos-fab__nr {
  position: absolute;
  top: -4px;
  inset-inline-start: -4px;
  min-width: 22px; height: 22px;
  display: grid; place-items: center;
  padding-inline: .25rem;
  border-radius: 999px;
  background: var(--accent, #18490a);
  color: var(--on-dark, #F5EDD9);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .6875rem; font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg, #F5EDD9);
}

.cos-fab.are-cos .cos-fab__nr {
  background: var(--ink, #151518);
}

/* Starea liniei, sub numele ei pe nota mesei. Mică şi stinsă: e un
   adaos, nu informaţia principală — aia e ce şi cât. */
.cos__linie-st {
  display: inline-block;
  margin-top: .125rem;
  font-size: .6875rem;
  letter-spacing: .02em;
  opacity: .62;
}

/* Gata de adus — singura stare care merită culoare: e singura la care
   omul are ceva de făcut (să se uite în sus). */
.cos__linie.e-ready .cos__linie-st {
  color: var(--accent, #18490a);
  opacity: 1;
  font-weight: 600;
}

/* --- foaia care se ridică de jos ------------------------------------ */
/* `display: flex` PESTE `[hidden]` — capcana clasică.
   `[hidden]` e doar `display: none` din foaia de stil a browserului, iar
   orice regulă de-a noastră cu `display` îl bate. Rezultatul: panoul
   „ascuns" rămâne întins peste tot ecranul, invizibil, și înghite
   fiecare atingere. Meniul arăta perfect și nu răspundea la nimic.
   De aceea regula se aplică doar când NU e ascuns. */
.cos, .nutri { position: fixed; inset: 0; z-index: 60; }
.cos:not([hidden]), .nutri:not([hidden]) { display: flex; align-items: flex-end; }
.cos[hidden], .nutri[hidden], .cos-bara[hidden], .cos-fab[hidden] { display: none; }

/* Aceeași capcană, dar înăuntrul panoului, unde se ascund și se arată
   rânduri: totalul, fâșia cu starea comenzii. Ele au `display: flex` sau
   `grid`, deci `hidden` nu le ascundea — cu coșul gol scria „Total
   estimativ 0 lei", iar fâșia stării apărea goală înainte să existe
   vreo comandă. Regula de mai jos ține pentru tot ce se ascunde în
   panou, inclusiv pentru ce se adaugă mâine. */
.cos__foaie [hidden] { display: none !important; }
.cos__fundal { position: absolute; inset: 0; background: rgba(10, 8, 6, .5); }

.cos__foaie {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  max-height: 88svh;
  /* Un panou de trei rânduri lipit de marginea de jos arată ca ceva ce
     s-a încărcat pe jumătate. Minimul îi dă formă de foaie, nu de
     resturi. */
  min-height: 22svh;
  display: flex;
  flex-direction: column;
  background: var(--bg, #F5EDD9);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  animation: cos-urca .28s cubic-bezier(.2, .8, .2, 1);
}

@keyframes cos-urca { from { transform: translateY(14%); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cos__foaie { animation: none; } }

.cos__cap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1rem .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8cbae) 50%, transparent);
}

.cos__titlu { font-size: 1.125rem; margin: 0; text-transform: uppercase; letter-spacing: .02em; }

.cos__x {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent; color: inherit;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}

.cos__corp { padding: 1rem; overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
.cos__jos {
  display: flex; gap: .5rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--line, #d8cbae) 50%, transparent);
}

.cos__h { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; margin: 1.25rem 0 .5rem; display: block; }
.cos__corp > *:first-child .cos__h, .cos__corp > .cos__h:first-child { margin-top: 0; }
.cos__mic { font-size: .6875rem; line-height: 1.5; opacity: .6; margin: .5rem 0 0; text-wrap: pretty; }
.cos__gol { opacity: .55; font-size: .875rem; margin: 0; }

/* --- ce s-a întâmplat cu comanda trimisă ---------------------------- */

/* Stă sus, înaintea coșului: cine redeschide panoul vrea să știe întâi
   ce s-a întâmplat cu ce a trimis, nu ce mai are de adăugat. */
.cos__stare {
  display: grid; gap: .15rem;
  padding: .7rem .8rem;
  margin-bottom: 1rem;
  border-inline-start: 3px solid var(--line, #d8cbae);
  background: color-mix(in srgb, var(--line, #d8cbae) 14%, transparent);
  font-size: .8125rem;
}

.cos__stare strong { font-size: .875rem; unicode-bidi: isolate; }

/* Preluată de cineva: aceeași fâșie, dar cu o culoare care spune că s-a
   mișcat ceva. Nu o alertă — o confirmare. */
.cos__stare.e-preluata { border-inline-start-color: var(--verde, #18490a); }

/* --- liniile din coș ------------------------------------------------ */
.cos__lista { list-style: none; margin: 0; padding: 0; }
.cos__linie {
  display: flex; align-items: center; gap: .625rem;
  flex-wrap: wrap;
  padding: .625rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8cbae) 40%, transparent);
}

/* Dorința scrisă la preparat, pe rândul ei, sub linie. `100%` o trimite
   pe rând nou fără să strice alinierea denumirii cu pașii și prețul. */
.cos__linie-nota { flex: 1 0 100%; }

.cos__linie-nota-c {
  width: 100%;
  font: inherit; font-size: .8125rem;
  padding: .4rem .55rem;
  border: 1px solid var(--line, #d8cbae); border-radius: 8px;
  background: transparent; color: inherit;
}
.cos__linie-n { flex: 1 1 auto; font-size: .875rem; unicode-bidi: isolate; }
.cos__linie-p { font-family: var(--mono, ui-monospace, monospace); font-size: .8125rem; unicode-bidi: isolate; }

.cos__pas { display: inline-flex; align-items: center; gap: .125rem; }
.cos__pas-b {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line, #d8cbae); border-radius: 8px;
  background: transparent; color: inherit; font: inherit; font-size: 1rem; cursor: pointer;
}
.cos__pas-n { min-width: 26px; text-align: center; font-family: var(--mono, ui-monospace, monospace); font-size: .8125rem; }

.cos__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: .75rem; font-size: .9375rem;
}
.cos__total strong { font-family: var(--mono, ui-monospace, monospace); unicode-bidi: isolate; }

/* --- sugestii ------------------------------------------------------- */
.cos__sug-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.cos__sug-item {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .625rem;
  border: 1px dashed color-mix(in srgb, var(--line, #d8cbae) 90%, transparent);
  border-radius: 10px;
}
.cos__sug-n { flex: 1 1 auto; font-size: .8125rem; unicode-bidi: isolate; }
.cos__sug-p { font-family: var(--mono, ui-monospace, monospace); font-size: .75rem; opacity: .7; unicode-bidi: isolate; }
.cos__sug-b {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent, #18490a) 50%, transparent);
  border-radius: 8px; background: transparent;
  color: var(--accent, #18490a); font: inherit; font-size: 1rem; cursor: pointer;
}

/* --- opțiuni: bacșiș, plată ----------------------------------------- */
.cos__optiuni { display: flex; flex-wrap: wrap; gap: .375rem; }
.cos__opt {
  /* Toate opțiunile au aceeași greutate vizuală, «Fără» inclusiv.
     Un buton de refuz scris mai mic e o presiune, nu un design. */
  min-height: 42px;
  padding-inline: .875rem;
  border: 1px solid var(--line, #d8cbae);
  border-radius: 999px;
  background: transparent; color: inherit;
  font: inherit; font-size: .8125rem; cursor: pointer;
}
.cos__opt.is-on { background: var(--ink, #151518); border-color: var(--ink, #151518); color: var(--on-dark, #F5EDD9); }
.cos__opt-lei { font-family: var(--mono, ui-monospace, monospace); font-size: .6875rem; opacity: .7; }

/* --- card, câmpuri -------------------------------------------------- */
.cos__rand { display: flex; gap: .375rem; }
.cos__rand input, .cos__camp textarea {
  flex: 1 1 auto; width: 100%;
  min-height: 42px; padding: .5rem .75rem;
  border: 1px solid var(--line, #d8cbae); border-radius: 10px;
  background: #fff; color: inherit; font: inherit; font-size: .875rem;
}
.cos__camp { display: block; }
.cos__camp textarea { resize: vertical; }
.cos__card-sus { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
/* Salutul pentru cardul recunoscut de pe telefon. Discret intenționat:
   e o confirmare, nu un titlu — omul vrea să vadă reducerea, nu urarea. */
.cos__card-salut { margin: 0 0 .15rem; opacity: .7; }
.cos__card-val { font-family: var(--mono, ui-monospace, monospace); font-size: 1.125rem; margin: .25rem 0 0; unicode-bidi: isolate; }
.cos__link { border: 0; background: none; color: inherit; font: inherit; font-size: .6875rem; text-decoration: underline; opacity: .6; cursor: pointer; }

/* --- butoane mari --------------------------------------------------- */
.cos__b {
  min-height: 48px; padding-inline: 1.125rem;
  border: 1px solid var(--ink, #151518); border-radius: 999px;
  background: var(--ink, #151518); color: var(--on-dark, #F5EDD9);
  font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer;
}
.cos__b--mare { flex: 1 1 auto; }
.cos__b--sec { background: transparent; color: inherit; }
.cos__b--mic { min-height: 42px; flex: 0 0 auto; font-size: .8125rem; }
.cos__b[disabled] { opacity: .45; cursor: default; }

.cos__raspuns { font-size: .8125rem; margin: 1rem 0 0; text-wrap: pretty; }
.cos__raspuns.e-bun { color: var(--accent, #18490a); }
.cos__raspuns.e-rau { color: color-mix(in srgb, var(--ember, #d33f20) 85%, var(--ink, #151518)); }

/* --- tabelul de nutriție -------------------------------------------- */
.nutri__t { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .8125rem; }
.nutri__t th, .nutri__t td {
  padding: .5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8cbae) 40%, transparent);
  text-align: start;
}
.nutri__t th { font-weight: 400; }
.nutri__t td { text-align: end; font-family: var(--mono, ui-monospace, monospace); white-space: nowrap; unicode-bidi: isolate; }
.nutri__sub th { padding-inline-start: 1rem; opacity: .65; font-size: .75rem; }
.nutri__sub td { opacity: .65; }

/* Când e deschis coșul, butonul de chemare de jos n-are ce căuta peste el. */
.cos:not([hidden]) ~ .carta-cheama { display: none; }

/* =====================================================================
   CELE PATRU CĂRȚI — prima pagină a meniului QR
   =====================================================================

   Una sub alta, fără fotografii. Rândul întreg e zona de apăsat, nu doar
   numele: pe un telefon ținut cu o mână, între două mese, ținta trebuie
   să fie cât degetul, nu cât cuvântul.
   ===================================================================== */

.carti {
  display: block;
  margin: 0 auto var(--carta-s5, 2.5rem);
  max-width: 560px;
  padding-inline: var(--carta-pad, 1.25rem);
}

.carti__u {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem .2rem;
  border-bottom: 1px solid var(--carta-linie, rgba(21,21,24,.12));
  color: inherit;
  text-decoration: none;
  transition: padding-inline-start .18s ease, background-color .18s ease;
}
.carti__u:first-child { border-top: 1px solid var(--carta-linie, rgba(21,21,24,.12)); }
.carti__u:active { background: color-mix(in srgb, currentColor 5%, transparent); }

/* Numărul de ordine: 01, 02… Discret, dar dă listei ritmul unei cărți
   de meniu tipărite, nu al unui meniu de aplicație. */
.carti__nr {
  flex: 0 0 auto;
  min-width: 2.1rem;
  font-family: var(--carta-font-cifre, 'Cinzel', Georgia, serif);
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--carta-auriu, #bea77f);
}

.carti__mij { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .18rem; }

.carti__nume {
  font-family: var(--carta-font-titlu, 'Cinzel', Georgia, serif);
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: .02em;
}

/* „de la 9 la 13", „doar take away" — condiția în care se aplică
   meniul. Stă sub nume fiindcă e o precizare, nu un al doilea titlu;
   dar e vizibilă, fiindcă un om care comandă piadizza la masă și află
   la casă că era doar la pachet a fost păcălit de un ecran. */
.carti__sub {
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--carta-sters, rgba(21,21,24,.55));
}

.carti__nr-mic {
  flex: 0 0 auto;
  font-size: .82rem;
  color: var(--carta-sters, rgba(21,21,24,.45));
  font-variant-numeric: tabular-nums;
}

.carti__sageata {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .35;
}
[dir="rtl"] .carti__sageata { transform: rotate(225deg); }

/* Lista de grupe dintr-o carte: aceeași formă, un pas mai mic — ca să se
   simtă că e al doilea nivel, nu încă o dată primul. */
.carti--grupe .carti__nume { font-size: 1.05rem; }
.carti--grupe .carti__u    { padding-block: 1.05rem; }

@media (min-width: 560px) {
  .carti__u { padding-block: 1.5rem; }
  .carti__nume { font-size: 1.35rem; }
}

/* ---------------------------------------------------------------------
   Variantele aceluiași preparat (Caesar: chicken / salmon)
   --------------------------------------------------------------------- */
.carta-variante {
  list-style: none;
  margin: .45rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.carta-varianta {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .92rem;
}

/* Linia punctată dintre denumire și preț — cum arată pe meniul tipărit.
   Fără ea, la două variante de lungimi diferite ochiul nu leagă numele
   de cifră. */
.carta-varianta__n { flex: 0 1 auto; }
.carta-varianta__n::after {
  content: "";
  display: inline-block;
  width: 100%;
}
.carta-varianta::after {
  content: "";
  flex: 1 1 auto;
  border-bottom: 1px dotted color-mix(in srgb, var(--line, #d8cbae) 90%, transparent);
  transform: translateY(-.28em);
  order: 1;
}
.carta-varianta__p { order: 2; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.carta-varianta__p i { font-style: normal; opacity: .6; font-size: .82em; }

/* ---------------------------------------------------------------------
   Pagina preparatului
   --------------------------------------------------------------------- */
.carta--produs { padding-bottom: 7rem; }

/* Banda de fotografii. `scroll-snap` face din ea un carusel fără o
   linie de JavaScript: se trage cu degetul, se oprește pe poză, și
   merge identic pe un telefon în care scriptul n-a apucat să ajungă. */
.prod-poze {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline-start: 1rem;
}
.prod-poze::-webkit-scrollbar { display: none; }

.prod-poza {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-alt, #ece0c4);
}

/* Cu o singură poză nu e carusel — e o fotografie. Nu are rost să
   sugerăm că se poate trage de ea. */
.prod-poze:not(.prod-poze--multe) .prod-poza { max-width: none; }

.prod-poza__i { width: 100%; height: 100%; object-fit: cover; display: block; }

.prod-cate {
  margin: .5rem 1rem 0;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-faint, #8b7f68);
}

.prod-corp { padding: 1.2rem 1rem 0; }

.prod-cap { margin-bottom: 1.4rem; }

.prod-nume {
  font-family: var(--font-display, Cinzel), serif;
  font-size: clamp(1.3rem, 5.5vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 .4rem;
  text-wrap: balance;
}

.prod-pret { font-size: 1.15rem; margin: 0; font-variant-numeric: tabular-nums; }
.prod-pret i { font-style: normal; opacity: .6; font-size: .8em; }

.prod-variante { margin-top: .5rem; max-width: 22rem; }

.prod-gram { margin: .35rem 0 0; font-size: .85rem; color: var(--ink-faint, #8b7f68); }

.prod-sec { margin-bottom: 1.5rem; }

.prod-h {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint, #8b7f68);
  margin: 0 0 .45rem;
  font-weight: 600;
}

.prod-ingr { margin: 0; line-height: 1.6; }
.prod-gol  { margin: 0; color: var(--ink-faint, #8b7f68); }

.prod-alergeni, .prod-regimuri {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.prod-regimuri { margin-top: .5rem; }

.prod-alergen, .prod-regim {
  font-size: .8rem;
  padding: .2rem .55rem;
  border: 1px dashed var(--line, #d8cbae);
  border-radius: 4px;
}
.prod-alergen { color: var(--pomodoro, #D33F20); border-color: currentColor; }

.prod-nota, .prod-aditivi {
  margin: .6rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-faint, #8b7f68);
}

.prod-nutri { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prod-nutri th, .prod-nutri td {
  text-align: start;
  padding: .4rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8cbae) 45%, transparent);
  font-weight: 400;
}
.prod-nutri thead th {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint, #8b7f68);
}
.prod-nutri .right { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* „din care" — subordonat, cum cere Reg. (UE) 1169/2011 la tabelul
   nutrițional. Indentarea nu e stil: e structura obligatorie. */
.prod-nutri--sub th { padding-inline-start: 1rem; color: var(--ink-faint, #8b7f68); }

.prod-actiuni { margin: 1.6rem 0 1rem; }

.prod-inapoi { margin: 1.4rem 0 0; font-size: .9rem; }
.prod-inapoi a { color: var(--terra, #6F1A02); text-decoration: none; }
.prod-inapoi a:hover { text-decoration: underline; }

/* Fotografia din listă e acum o legătură. `display:block` ca să-și
   păstreze forma de pătrat; fără el, ancora ar fi inline și ar lăsa o
   dungă albă sub poză. */
a.carta-item__poza { display: block; text-decoration: none; }

.carta-fisa__pagina { margin: .6rem 0 0; font-size: .9rem; }
.carta-fisa__pagina a { color: var(--terra, #6F1A02); text-decoration: none; }
.carta-fisa__pagina a:hover { text-decoration: underline; }


/* ---------------------------------------------------------------------
   STEAGURILE
   Emoji, nu imagini: se desenează cu fontul telefonului, deci nu adaugă
   nicio cerere la încărcare. Stau LÂNGĂ literă, nu în locul ei — pe
   câteva calculatoare cu Windows emoji-ul de steag nu se desenează, iar
   acolo butonul trebuie să rămână lizibil.
   --------------------------------------------------------------------- */

.carta-limbi__b {
  /* Din „grid / place-items" devine rând: steag, apoi literă. */
  display: flex;
  align-items: center;
  gap: .25rem;
  min-width: 46px;
}

.carta-limbi__steag {
  /* `line-height: 1` ține steagul pe linia literei; fără el, emoji-ul
     ridică rândul cu câțiva pixeli și bara de sus se mișcă la fiecare
     schimbare de limbă. */
  font-size: .9375rem;
  line-height: 1;
  /* Emoji-urile de steag sunt perechi de litere speciale. Fără
     izolare, într-o pagină ebraică ordinea lor se poate întoarce. */
  unicode-bidi: isolate;
}

.carta-limba__steag {
  font-size: 1.5rem;
  line-height: 1;
  unicode-bidi: isolate;
}


/* Șase limbi într-o bară de telefon.
   Cu steag ȘI literă, cele șase butoane plus marca depășeau lățimea unui
   ecran de 420px și ultima limbă — ebraica — rămânea tăiată pe jumătate.
   O limbă pe care n-o poți apăsa e o limbă care nu există.

   Sub 480px marca se micșorează și butoanele se string. Litera rămâne:
   e singurul lucru care se citește dacă telefonul nu desenează steagul. */
@media (max-width: 480px) {
  .carta-bara__logo { height: 17px; }

  .carta-limbi { gap: .125rem; }

  .carta-limbi__b {
    min-width: 0;
    gap: .1875rem;
    padding-inline: .25rem;
    font-size: .625rem;
    letter-spacing: 0;
  }

  .carta-limbi__steag { font-size: .8125rem; }
}

/* =====================================================================
   CONTORUL DE DESCHIDERI
   =====================================================================

   Cercul din colțul din stânga-sus al preparatului: de câte ori a fost
   deschis.

   DE CE ARATĂ AȘA
   ───────────────
   Cifra stă peste fotografie, iar fotografiile sunt de tot felul — un
   risotto alb și o pizza închisă la culoare. Un cerc alb cu text negru
   dispare pe primul; unul negru cu text alb dispare pe al doilea. Deci:
   fond închis, translucid, cu `backdrop-filter` care întunecă puțin
   poza dedesubt. Cifra rămâne lizibilă pe orice.

   E MIC, ȘI RĂMÂNE MIC
   ────────────────────
   22 de pixeli. Nu e o informație de care are nevoie cineva ca să
   comande — e o curiozitate. Dacă ar fi mai mare decât prețul, ar
   spune că numărul de priviri contează mai mult decât mâncarea.
   Cifrele mari se scriu scurtat („1,2k"), tot ca să nu crească cercul.

   `pointer-events: none` fiindcă stă PESTE legătura fotografiei: fără
   asta, degetul care nimerește colțul n-ar deschide preparatul. */

.carta-item,
.carta-fisa__cap { position: relative; }

.carta-contor {
  position: absolute;
  top: .5rem;
  inset-inline-start: .5rem;
  z-index: 2;

  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: rgba(21, 21, 24, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);

  color: #fff;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;

  pointer-events: none;

  /* Apare crescând, o singură dată, scurt. Cine deschide al doilea card
     nu trebuie să aștepte o animație ca să citească o cifră. */
  animation: carta-contor-apare .18s ease-out;
}

.carta-contor[hidden] { display: none; }

@keyframes carta-contor-apare {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .carta-contor { animation: none; }
}

/* Pe pagina preparatului cercul stă peste fotografia mare, la fel de
   sus-stânga, dar se vede de la început: acolo deschiderea S-A
   întâmplat deja, prin chiar faptul că pagina e pe ecran. */
.prod-poze { position: relative; }

.prod-contor {
  position: absolute;
  top: .75rem;
  inset-inline-start: .75rem;
  z-index: 2;

  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: rgba(21, 21, 24, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);

  color: #fff;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;

  pointer-events: none;
}

/* Preparatele FĂRĂ fotografie — jumătate din meniu, toate băuturile la
   sticlă. Acolo nu există poză peste care să stea cercul, deci nu mai e
   suprapus: intră în rând, înaintea denumirii. Aceeaşi formă, acelaşi
   contrast, alt loc. */
.carta-item:not(.carta-item--foto) .carta-contor {
  position: static;
  display: inline-flex;
  vertical-align: middle;
  margin-inline-end: .4rem;
  transform: translateY(-1px);
}

.prod-contor--gol {
  position: static;
  display: inline-flex;
  vertical-align: middle;
  margin-inline-end: .5rem;
  transform: translateY(-2px);
}