/* Vízszintes scroll tiltása mobilon.
   overflow-x: clip – CSAK body-n: nem hoz létre scroll containert (sticky megmarad),
   és nem zavarja a html szintű scrollbar-gutter-t.
   html-en overflow-x: clip tiltja a scrollbar-gutter: stable működését Chrome-ban. */
body {
  overflow-x: clip;
  max-width: 100%;
}
/* Görgetősáv helye mindig foglalt – megakadályozza a layout-ugrást, amikor
   rövid tartalomnál a görgetősáv eltűnik és a centrált elemek jobbra csúsznak.
   overflow-x nélkül a html-en ez megfelelően működik. */
html {
  scrollbar-gutter: stable;
  overflow-y: auto;
}

/* Alapszínek - egeszsegkonyha.hu brand colors */
:root {
  /* Zöld színek */
  --brand-zold: #3c9e1d;              /* rgb(60, 158, 29) - minden zöld felület */
  --zold-gomb: #3c9e1d;               /* rgb(60, 158, 29) - egyéb gombok */
  --zold-gomb-vilagos: #64c476;       /* rgb(100, 196, 118) - + gomb és gombok hover */

  /* Piros színek */
  --brand-piros: #e0454c;             /* rgb(224, 69, 76) - minden piros és piros gombok (kivéve - gomb) */
  --piros-gomb-vilagos: #ff9788;      /* rgb(255, 151, 136) - - gomb és gombok hover */

}

/* Információ kurzor (i betű) */
.cursor-info {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="rgba(59,130,246,0.8)"/><text x="12" y="16" text-anchor="middle" font-size="14" font-weight="bold" fill="white">i</text></svg>') 12 12, help;
  position: relative;
}

/* Markdown formázás */
.markdown-body {
  line-height: 1.6;
  color: #374151; /* Tailwind text-gray-700 */
  font-size: 1rem;
}

.markdown-body h1 {
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.markdown-body h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.markdown-body h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.markdown-body ul {
  list-style: disc;
  margin-left: 1.5rem;
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.markdown-body li {
  margin-bottom: 0.5rem;
}

.markdown-body hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2rem 0;
}

.markdown-body p,
.markdown-body code {
  margin-bottom: 1rem;
  display: block;
  font-size: 1rem;
}

.markdown-body code {
  background-color: #e5e7eb; /* Tailwind gray-200 */
  padding: 0.1em 0.3em;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.95em;
  white-space: pre-wrap;
  word-break: break-word;
}

.markdown-body li > code {
  display: inline;
  vertical-align: baseline;
}

@media (max-width: 640px) {
  .markdown-body {
    font-size: 0.875rem; /* Tailwind text-sm */
  }

  .markdown-body h1 {
    font-size: 1.5rem;
  }

  .markdown-body h2 {
    font-size: 1.25rem;
  }

  .markdown-body h3 {
    font-size: 1.125rem;
  }

  .markdown-body p,
  .markdown-body code {
    font-size: 0.875rem;
  }
}

/* === Étlap étel kártya komponens === */
/* További tesztreszabás */
aside.bg-green-700 {
  background-color: var(--brand-zold) !important;
}

div.bg-green-700 {
  background-color: var(--brand-zold) !important;
}

/* Zöld gombok - általános (megrendelés leadása, modal header, stb.) */
button.bg-green-600 {
  background-color: var(--zold-gomb) !important;
}
button.bg-green-600:hover {
  background-color: var(--zold-gomb-vilagos) !important;
}

/* + gombok (specifikus) - világos zöld, hover: fekete szöveg */
button[class*="btn-plus"]:not(:disabled):not(.btn-expired) {
  background-color: var(--zold-gomb-vilagos) !important;
  color: white !important;
}
button[class*="btn-plus"]:not(:disabled):not(.btn-expired):hover {
  background-color: var(--zold-gomb-vilagos) !important;
  color: black !important;
}

/* - gombok (specifikus) - világos piros, hover: fekete szöveg */
button[class*="btn-minus"]:not(:disabled):not(.btn-expired) {
  background-color: var(--piros-gomb-vilagos) !important;
  color: white !important;
}
button[class*="btn-minus"]:not(:disabled):not(.btn-expired):hover {
  background-color: var(--piros-gomb-vilagos) !important;
  color: black !important;
}

/* Disabled gombok - szürke háttér */
button.btn-plus-1:disabled,
button.btn-plus-2:disabled,
button.btn-plus-3:disabled,
button.btn-minus-1:disabled,
button.btn-minus-2:disabled,
button.btn-minus-3:disabled {
  background-color: #9ca3af !important; /* gray-400 */
  color: white !important;
  cursor: not-allowed;
}

/* Törlés gomb (Másnak rendelek) - brand piros */
button.bg-red-400 {
  background-color: var(--brand-piros) !important;
  color: white !important;
}
button.bg-red-400:hover {
  background-color: var(--brand-piros) !important;
  filter: brightness(1.15);
}

/* Modal header - nem változik hover-nél */
.bg-green-600.modal-header {
  background-color: var(--zold-gomb) !important;
}
.bg-green-600.modal-header:hover {
  background-color: var(--zold-gomb) !important;
}

.text-sotet-zold {
  color: var(--brand-zold);
}
span.text-green-600 {
  color: var(--zold-gomb) !important;
}

/* Alpine elindításáig maradjanak rejtve a modálok*/
[x-cloak] { display: none !important; }

/* Háttérkép - minden oldalon (kivéve admin) */
body.with-background {
  min-height: calc(100vh + 1px); /* garantálja, hogy görgetősáv mindig látható → nincs layout-ugrás */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
/* bg-etlap csak nem-revolution és nem-lovable témáknál töltődik le */
:root:not([data-theme^="revolution"]):not([data-theme="lovable"]) body.with-background {
  background-image: url("../bg-etlap.dc085939a5a3.jpg"); /* fallback régi böngészőkhöz */
  background-image: -webkit-image-set(url("../bg-etlap.dcad85f90fd4.webp") 1x, url("../bg-etlap.dc085939a5a3.jpg") 1x);
  background-image: image-set(
    url("../bg-etlap.dcad85f90fd4.webp") type('image/webp'),
    url("../bg-etlap.dc085939a5a3.jpg") type('image/jpeg')
  );
}

/* Halványító réteg a háttérkép fölött – témafüggő szín (themes.css definiálja) */
body.with-background::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: var(--theme-overlay-color, rgba(255, 255, 255, 0.81));
  pointer-events: none;
  z-index: -1;
}

/* Tartalom mindig felül legyen - CSAK a main konténerekre */
body.with-background .max-w-7xl,
body.with-background .max-w-6xl,
body.with-background .max-w-4xl,
body.with-background .max-w-3xl,
body.with-background .max-w-2xl {
  position: relative;
  z-index: 1;
}

/* Telefonszám linkek - mobilon aláhúzott és kattintható, PC-n nem */
a[href^="tel:"] {
  text-decoration: underline !important;
}

@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
  }
}

/* ===== Betűméret toggle (mobilon) ===== */

/* Mobil info szöveg (.font-scalable saját text-sm osztályát felülírjuk, spec. 0,2,0 > 0,1,0) */
body.font-enlarged .font-scalable {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Étlap mobilnézet: menü nevek ("Hagyományos menü") és étellista szövegek.
   Az időszak konténerek ID-ja menücsoportos: idoszak-{groepIdx}-{idoszakIdx}
   (lásd rendeles_tablazatos.html), ezért prefix szelektorral illesztünk – így a
   régi idoszak-{n} formátum is beleesik.
   Specificitás (0,3,1) > Tailwind .text-sm (0,1,0) → nyer, ezért !important nélkül is felülír. */
body.font-enlarged [id^="idoszak-"] .text-sm {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Modal tartalma: összetevők/tápértékek (text-sm) */
body.font-enlarged #etelModalContent .text-sm {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Modal étel nevek (text-lg h4) */
body.font-enlarged #etelModalContent .text-lg {
    font-size: 1.25rem;
    line-height: 1.5;
}

/* Információ oldal tartalom */
body.font-enlarged #informacio-main .text-sm {
    font-size: 1.05rem;
    line-height: 1.6;
}
body.font-enlarged #informacio-main .text-base {
    font-size: 1.1rem;
    line-height: 1.7;
}
body.font-enlarged #informacio-main .text-lg {
    font-size: 1.2rem;
    line-height: 1.6;
}

/* ===== Rendelési előzmény szűrő gombok ===== */
.szuro-gomb {
    padding: 0.4rem 0.85rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
    border: none;
}
.szuro-gomb.aktiv {
    background-color: var(--brand-zold, #16a34a);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.szuro-gomb.inaktiv {
    background-color: var(--szuro-gomb-inaktiv, #bbf7d0);
    color: var(--szuro-gomb-inaktiv-szin, #166534);
}
.szuro-gomb.inaktiv:hover {
    filter: brightness(0.93);
}


/* ───────────────────────────────────────────────────────────────────────────
   Étlap v2 csempe (ételkártya) — ETLAP_V2_CSEMPE_SPEC.md szerint, pixelre.
   Egy csempe = egy menü: bal oldalt egy 116×116 fotó (több fogásnál váltakozik),
   jobb oldalt az infó-oszlop. Az osztálynevek szándékosan a spec nevei.
   ─────────────────────────────────────────────────────────────────────────── */
.v2card {
    display: flex;
    gap: 12px;
    background: #fff;
    border: 1px solid #e4e9df;
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(28, 38, 31, .05);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1c261f;
    cursor: pointer;
    text-align: left;
}

/* Fotó */
.v2thumb {
    position: relative;
    flex: 0 0 116px;
    width: 116px;
    height: 116px;
    border-radius: 13px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef4e8, #dfebd6);
}
.v2img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Infó-oszlop */
.v2info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.v2menu {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #2f7a36;
    margin-bottom: 2px;
}
.v2name {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.2;
    color: #1c261f;
    /* Az ételnevet NEM választjuk el: a keskeny desktop-oszlopban (mérve 128 px
       hasznos hely) az `illesztEtelNevek()` kicsinyíti a nevet annyira, hogy a
       leghosszabb szó egészben kiférjen. Az `overflow-wrap` csak végső háló arra
       az esetre, ha még a 8 px-es alsó határon sem férne ki. */
    overflow-wrap: break-word;
    hyphens: manual;
    -webkit-hyphens: manual;
}
/* Kombi menü: minden fogás SAJÁT sort kap a csempén belül – fénykép + név –,
   alattuk a menü egészére vonatkozó közös adatok. Egyetlen csempe marad. */
.v2card--kombi { flex-direction: column; }
/* Egy fogás: bal oldalt a fénykép, JOBB oldalt – a név alatt – a fogás saját
   adatai. (A tápérték-felirat külön sorba kerül, ezért az értékek ebben a
   keskenyebb oszlopban is elférnek.) */
.v2fogas {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.v2fogas-info {
    flex: 1;
    min-width: 0;
}
.v2fogas + .v2fogas { margin-top: 10px; }
.v2fogas-nev {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.2;
    color: #1c261f;
    /* Lásd `.v2name`: elválasztás helyett illesztünk. */
    overflow-wrap: anywhere;
    hyphens: manual;
    -webkit-hyphens: manual;
}
.v2card--kombi .v2info { margin-top: 10px; }

/* Desktopon a nap-oszlop keskeny (mérve: 150 px 1280 px-es, 152 px 1440 px-es
   képernyőn). Sorba rendezve a 116 px-es fotó + 12 px köz után a szövegnek
   0–2 px maradt, ezért a böngésző a nevet gyakorlatilag betűnként törte.
   Desktopon tehát a csempe OSZLOPOS: fotó felül, alatta a teljes szélességű
   szöveg (mérve 128 px), így a név egészben kiírható. */
.view-desktop .v2card { flex-direction: column; }
.view-desktop .v2thumb {
    flex: 0 0 auto;
    width: 100%;
    height: 128px;
    border-radius: 12px;
}
.view-desktop .v2card--kombi .v2fogas { flex-direction: column; }
.view-desktop .v2card--kombi .v2thumb { height: 96px; }
/* A keskeny oszlopban a név csak kisebb betűvel írható ki egészben (mérve: a
   leghosszabb ételnév-szó 8,5 px-nél fér ki 128 px-be), ezért az adatsorokat is
   arányosan kisebbre vesszük – különben az adat nagyobb lenne, mint a név. */
.view-desktop .v2menu { font-size: 9px; }
/* A név desktopon kisbetűs: mérve a leghosszabb ételnév-szó nagybetűvel csak
   8,5 px-en, kisbetűvel viszont 10 px-en fér ki a 128 px-es oszlopba – így a név
   marad a csempe legnagyobb szövege, az adatsorok fölött. */
.view-desktop .v2name,
.view-desktop .v2fogas-nev { font-size: 12px; text-transform: none; }
.view-desktop .v2adag { font-size: 9px; }
.view-desktop .v2meta,
.view-desktop .v2meta100,
.view-desktop .v2allerg { font-size: 9px; }
/* Kombi menüben a szövegoszlop keskenyebb (a fotó mellett áll), ezért ott a
   tápérték-sorok kisebbek, és a fotó is – hogy a sorok kiférjenek. Mérve: 116 px-es
   fotónál a „Tápanyag adagban: …" sor pár pixellel túllógott és tördelt. */
.v2card--kombi .v2thumb {
    flex-basis: 92px;
    width: 92px;
    height: 92px;
    border-radius: 11px;
}

/* Adag mennyisége: külön sor, VASTAG betűvel, a tápértékek fölött. */
.v2adag {
    font-size: 11px;
    font-weight: 700;
    color: #4a5748;
    margin-top: 4px;
}
/* Tápérték-blokkok: a FELIRAT külön sorban, alatta az értékek egymás mellett.
   A felirat `flex-basis: 100%`-kal töri a sort – így az értékek a keskenyebb
   oszlopban is egy sorba férnek. */
.v2meta,
.v2meta100 {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    /* Egy fokkal kisebb a névnél és az árnál (felhasználói kérés, 2026-08-19):
       a tápérték kísérő adat, ne versenyezzen a névvel. */
    font-size: 10px;
    line-height: 1.35;
}
.v2meta .v2tap-cimke,
.v2meta100 .v2tap-cimke {
    flex: 0 0 100%;
}
.v2meta {
    color: #4a5748;
    margin-top: 4px;
}
.v2meta100 {
    color: #93a08b;
    margin-top: 4px;
}
.v2tap-cimke { font-weight: 600; }
.v2allerg {
    font-size: 10px;
    color: #b26a00;
    margin-top: 5px;
}

/* Csempe-láb: ide költözik az ár és a kosár-vezérlő, hogy MINDEN információ
   egyetlen csempén belül legyen. Az összeg és a Kosárba gomb a csempe KÖZEPÉN
   áll – egy fogásnál a név alatti oszlopban, kombinál a csempe teljes
   szélességében –, tehát sosem a fénykép alatt. */
.v2foot {
    margin-top: auto;
    padding-top: 8px;
    text-align: center;
}
.v2foot [id^="price-"] {
    font-size: 15px;
    font-weight: 800;
    /* Zöld (felhasználói kérés, 2026-08-19) – az összeget a widget maga is zöldre
       festi, a „Mindössze"/„N napra összesen" felirat viszont eddig sötét volt. */
    color: #2f7a36;
    text-align: center;
}
.v2foot .etlap-controls-row { margin-top: 8px; }
.v2foot .etlap-controls-row.qty-zero > button:last-child {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    min-height: 0;
    padding: 9px;
    border-radius: 10px;
    background: #3c9a40 !important;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
/* Kosárban lévő állapot: sáv − · N · + */
.v2foot .etlap-controls-row:not(.qty-zero) {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    background: #e7f2e4;
    border-radius: 10px;
    padding: 4px;
    column-gap: 8px;
}
.v2foot .etlap-controls-row:not(.qty-zero) > button {
    min-width: 38px;
    width: 38px;
    height: 34px;
    min-height: 34px;
    border-radius: 8px;
    /* A `button[class*="btn-plus"]` szabály fentebb `color: white !important`-et ad –
       fehér alapon fehér szöveg lenne, ezért itt is `!important` kell. */
    background: #fff !important;
    color: #2f7a36 !important;
    font-size: 17px;
    font-weight: 800;
    box-shadow: none;
}
.v2foot .etlap-controls-row:not(.qty-zero) > .etlap-qty-center {
    font-size: 12px;
    font-weight: 700;
    color: #2f7a36;
}
/* A darabszám mellől a „a kosárban" felirat KIKERÜLT (felhasználói kérés,
   2026-08-19): a − és a + között elég maga a szám. */

/* ── Egy fogásos csempe MOBILON: rács (felhasználói elrendezés, 2026-08-19) ────
   Sor 1: menü kód a fotó fölött · Sor 2: fotó | név + tápérték-sorok + ár ·
   Sor 3: Kosárba gomb a fotó alatt.

   A név a fotó FELSŐ VONALÁVAL indul (az infó-oszlop a 2. sorban kezdődik), és a
   gomb a fotó alá kerül – így a szövegoszlopnak a fotó + gomb teljes magassága
   jut, tehát a „Tápanyag adagban", a „Tápanyag 100 g" és az ár is kifér.

   Csak `.view-mobile`-ra és csak EGY fogásos csempére: desktopon a nap-oszlop
   keskeny (mérve 150 px), ott a csempe oszlopos marad; a kombi csempe pedig
   fogásonkénti sorokból áll, azt nem érinti. */
.view-mobile .v2card:not(.v2card--kombi) {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: start;
}
.view-mobile .v2card:not(.v2card--kombi) > .v2menu  { grid-column: 1; grid-row: 1; }
.view-mobile .v2card:not(.v2card--kombi) > .v2thumb { grid-column: 1; grid-row: 2; }
.view-mobile .v2card:not(.v2card--kombi) > .v2info  { grid-column: 2; grid-row: 2; }
/* A 3. sor a „vásárlás" sora: a csempe TELJES szélességében, középen az ár, alatta
   a Kosárba gomb – ugyanaz, mint a kombi csempén (felhasználói kérés, 2026-08-21).

   A 2026-08-19-i változat itt két oszlopra bontotta a sort (balra gomb, jobbra ár);
   azt ez váltja fel. Az ár középre igazítását és a gomb szélességét a `.v2foot`
   alapszabályai adják, ezért itt csak a rácsba helyezés marad. */
.view-mobile .v2card:not(.v2card--kombi) > .v2foot {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;
}

/* A csempe MÉRETE kövesse a képernyőt: mobilon a kártya a konténere önmagának,
   és minden belső méret a kártya szélességéhez arányosított (`cqw`).

   Kalibrálva a mai 390 px-es telefonra: ott a kártya 359 px, a fotó 116 px –
   116/359 = 32.3cqw –, tehát azon a szélességen SEMMI nem változik, szélesebb
   képernyőn viszont a fotó és a szövegek is arányosan nagyobbak lesznek.

   A fix px-es értékek fentebb maradnak: régi böngészőn a `cqw`-s deklaráció
   érvénytelen, és a korábbi érték marad érvényben. */
@supports (container-type: inline-size) {
    .view-mobile .v2card { container-type: inline-size; }

    .view-mobile .v2thumb {
        flex-basis: clamp(116px, 32.3cqw, 260px);
        width: clamp(116px, 32.3cqw, 260px);
        height: clamp(116px, 32.3cqw, 260px);
        border-radius: clamp(13px, 3.6cqw, 26px);
    }
    .view-mobile .v2card--kombi .v2thumb {
        flex-basis: clamp(92px, 25.6cqw, 206px);
        width: clamp(92px, 25.6cqw, 206px);
        height: clamp(92px, 25.6cqw, 206px);
    }
    .view-mobile .v2menu { font-size: clamp(11px, 3.06cqw, 18px); }
    .view-mobile .v2name,
    .view-mobile .v2fogas-nev { font-size: clamp(14px, 3.9cqw, 24px); }
    .view-mobile .v2adag { font-size: clamp(11px, 3.06cqw, 18px); }
    .view-mobile .v2meta,
    .view-mobile .v2meta100,
    .view-mobile .v2allerg { font-size: clamp(10px, 2.79cqw, 16px); }
    .view-mobile .v2foot [id^="price-"] { font-size: clamp(15px, 4.18cqw, 26px); }
    .view-mobile .v2foot .etlap-controls-row.qty-zero > button:last-child {
        font-size: clamp(13px, 3.62cqw, 22px);
        padding: clamp(9px, 2.5cqw, 16px);
    }
    .view-mobile .v2foot .etlap-controls-row:not(.qty-zero) > button {
        font-size: clamp(17px, 4.73cqw, 28px);
    }
    .view-mobile .v2foot .etlap-controls-row:not(.qty-zero) > .etlap-qty-center {
        font-size: clamp(12px, 3.34cqw, 20px);
    }
}


/* ── Széles nap-oszlop: a csempe a MOBIL elrendezést kapja ────────────────────
   Felhasználói kérés (2026-08-19): „nyugodtan húzd szét a csempét, és úgy jelenjen
   meg, mint a mobil verzió". Amióta csak a rendelhető napok kapnak oszlopot, három
   szolgáltatási napnál a cella a korábbi ~150 px helyett ~380 px széles – ott a fotó
   melletti szövegoszlop bőven elfér.

   A kapcsoló KONTÉNER-lekérdezés, nem képernyőszélesség és nem JS-osztály: a CELLA
   szélessége az, ami számít (6 napnál 1440 px-en is keskeny marad, 3 napnál 1280 px-en
   is széles). Régi böngészőn a `@container` egyszerűen nem alkalmazódik, és marad a
   mai oszlopos desktop elrendezés – tehát nem törik el semmi. */
.view-desktop .etlap-cell-nap { container-type: inline-size; }

@container (min-width: 250px) {
    .view-desktop .v2card:not(.v2card--kombi) {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        align-items: start;
    }
    .view-desktop .v2card:not(.v2card--kombi) > .v2menu  { grid-column: 1; grid-row: 1; }
    .view-desktop .v2card:not(.v2card--kombi) > .v2thumb { grid-column: 1; grid-row: 2; }
    .view-desktop .v2card:not(.v2card--kombi) > .v2info  { grid-column: 2; grid-row: 2; }
    .view-desktop .v2card:not(.v2card--kombi) > .v2foot {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 0;
    }
    .view-desktop .v2card:not(.v2card--kombi) .v2thumb {
        flex: 0 0 auto;
        width: 116px;
        height: 116px;
        border-radius: 13px;
    }
    /* Széles cellában a szövegek visszakapják a mobil méretüket – a desktop
       kicsinyítés a KESKENY oszlopra való (mérve: ott 128 px a hasznos hely). */
    .view-desktop .v2card:not(.v2card--kombi) .v2name {
        font-size: 14px;
        text-transform: uppercase;
    }
    .view-desktop .v2card:not(.v2card--kombi) .v2menu { font-size: 11px; }
    .view-desktop .v2card:not(.v2card--kombi) .v2adag { font-size: 11px; }
    .view-desktop .v2card:not(.v2card--kombi) .v2meta,
    .view-desktop .v2card:not(.v2card--kombi) .v2meta100,
    .view-desktop .v2card:not(.v2card--kombi) .v2allerg { font-size: 10px; }

    /* A KOMBI csempe is visszakapja a mobil elrendezést: fogásonként fotó balra,
       szöveg jobbra – a keskeny desktop oszlopra való egymás-alá helyett. */
    .view-desktop .v2card--kombi .v2fogas { flex-direction: row; }
    .view-desktop .v2card--kombi .v2thumb {
        flex: 0 0 auto;
        width: 92px;
        height: 92px;
        border-radius: 11px;
    }
    .view-desktop .v2card--kombi .v2fogas-nev {
        font-size: 14px;
        text-transform: uppercase;
    }
    .view-desktop .v2card--kombi .v2menu { font-size: 11px; }
    .view-desktop .v2card--kombi .v2adag { font-size: 11px; }
    .view-desktop .v2card--kombi .v2meta,
    .view-desktop .v2card--kombi .v2meta100,
    .view-desktop .v2card--kombi .v2allerg { font-size: 10px; }

    /* A vásárlás sora a csempe ALJÁN maradjon (lásd lentebb: a csempe kitölti a
       cellát), különben a hosszabb szöveg lejjebb tolja a gombot. */
    .view-desktop .v2card:not(.v2card--kombi) { grid-template-rows: auto auto 1fr; }
    .view-desktop .v2card:not(.v2card--kombi) > .v2foot { align-self: end; }
}

/* ── Aranymetszés a fotó és a szöveg között (felhasználói kérés, 2026-08-22) ───
   A csempe SORBA rendezett elrendezéseiben – mobilon mindig, desktopon a széles
   cellában (lásd a fenti `@container`-t) – a fotó és a mellette álló szöveg
   3 : 5 arányban osztozik a hasznos szélességen (a 12 px-es köz levonása után),
   tehát a fotó a 37,5 %-a.

   Mérve (előtte): a fotó fix px volt, ezért az arány a cella szélességétől függött –
   kombi csempén 92 : 237 = 1 : 2,58 (desktop 1280 px) és 92 : 233 = 1 : 2,53 (mobil
   390 px), egy fogásos csempén 116 : 209 = 1 : 1,80. A kért 3 : 5 = 1 : 1,667.

   `minmax(0, …)`: az `fr` alapértelmezett `min-width: auto`-ja miatt egy hosszú,
   töretlen ételnév szétfeszítené a szövegoszlopot, és az arány elcsúszna.

   A fotó NÉGYZET marad: a szélességet a rács szabja, a magasságot az `aspect-ratio`.
   Ez a blokk szándékosan a fenti fix px-es / `clamp(cqw)`-s méretek UTÁN áll: azonos
   fajsúlynál a későbbi szabály nyer.

   A keskeny desktop-oszlop OSZLOPOS elrendezését (fotó felül, teljes szélességben)
   ez nem érinti – ott nincs „kép melletti" szöveg. */
.view-mobile .v2card:not(.v2card--kombi) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
}
.view-mobile .v2card--kombi .v2fogas {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
    column-gap: 12px;
    align-items: start;
}
.view-mobile .v2card:not(.v2card--kombi) > .v2thumb,
.view-mobile .v2card--kombi .v2fogas > .v2thumb {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

@container (min-width: 250px) {
    .view-desktop .v2card:not(.v2card--kombi) {
        grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
    }
    .view-desktop .v2card--kombi .v2fogas {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
        column-gap: 12px;
        align-items: start;
    }
    .view-desktop .v2card:not(.v2card--kombi) > .v2thumb,
    .view-desktop .v2card--kombi .v2fogas > .v2thumb {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* ── A „Kosárba" gomb egy sorban a táblázat egy során belül ───────────────────
   Felhasználói kérés (2026-08-19): „Legyen egy vonalban a kosár gomb".

   Az ok (mérve, 4 nap-oszlopnál 1280 px-en): a csempe magassága a szövegtől függ
   (név, tápérték, allergének), ezért a láb – az ár és a gomb – oszloponként
   máshova esett: soronként **107–127 px** eltérés is volt.

   A megoldás: a táblázat egy sorában a cellák magassága úgyis egyenlő, tehát a
   csempe TÖLTSE KI a cellát, a láb pedig üljön a csempe aljára. Így minden
   oszlopban ugyanoda kerül.

   A `td { height: 1px }` nem elírás: enélkül a cellának nincs „határozott"
   magassága, és a benne lévő `height: 100%` nem oldódik fel (mérve: a jelölt
   CSS enélkül semmit nem változtatott). A cella ettől még a tartalomhoz nő –
   a mérés szerint a cella-magasságok változatlanok maradtak.

   Mérve mind a három nap-beállításon (1,3,5 · 1,3,5,6 · 1,2,3,4,5,6) és a
   többnapos csomagon (1-2,3-4,5-6) is: minden sorban 0 px az eltérés, és a
   csempe egyetlen esetben sem lóg ki a cellából. */
.view-desktop table td { height: 1px; }
.view-desktop td > .menu-variacio-blokk { height: 100%; display: flex; flex-direction: column; }
.view-desktop .menu-variacio-blokk > .etlap-cell-nap { flex: 1 1 auto; }
.view-desktop .etlap-cell-nap > .v2card { height: 100%; }
/* A kombi csempe fogásonkénti sorokból áll – ott a láb alulra tolása kell. */
.view-desktop .v2card--kombi { display: flex; flex-direction: column; }
.view-desktop .v2card--kombi > .v2foot { margin-top: auto; }

/* A két gomb-állapot legyen EGYFORMA magas, különben a kosárba tett csempénél a
   sor 10 px-szel feljebb csúszik (mérve: „Kosárba" 32 px, a „− 1 +" vezérlő 42 px). */
.view-desktop .etlap-controls-row { min-height: 42px; align-items: center; }

/* ── Étrend fejléc-sor (a korábbi bal oldali típus-oszlop helyett) ───────────── */
.etrend-fejlec th { background: #f3f6f1; }
.etrend-fejlec-nev {
    font-size: 15px;
    font-weight: 800;
    color: #1c261f;
    margin-right: 8px;
}
.etrend-fejlec-kod {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #2f7a36;
    background: #e7f2e4;
    border-radius: 6px;
    padding: 1px 7px;
    vertical-align: middle;
}
.etrend-fejlec-leiras {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 3px;
}
/* Nap-fejléc: a nap neve és alatta a dátuma. */
.nap-fejlec-nev { display: block; }
.nap-fejlec-datum {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}