/*
 * VENDEGFELULET · 5/5 — KARTYAS NEZET, KETOSZLOPOS VALASZTO, ALSO DOKK
 *
 * EGYETLEN, beagyazott szabaly (`body.qb-guest-premium { ... }`). Nem
 * bontottuk tovabb: a beagyazas egy blokk, aminek a ketteveagasa nem
 * darabolas volna, hanem atiras.
 *
 * A BETOLTESI SORREND KOTOTT, es nem izles kerdese. Ezek a fajlok EGY
 * kaszkadot alkotnak — ugyanazt, ami korabban egyetlen `vendeg.css` volt:
 *
 *   vendeg.css  ->  vendeg-vendegut.css  ->  vendeg-dizajn.css
 *               ->  vendeg-reteg.css     ->  vendeg-kartyas.css
 *
 * A darabolas BAJTRA folytonos volt: a reszek osszefuzve karakterre az
 * eredeti fajl. Ezert egyetlen szabaly sem valtoztatta a helyet a
 * kaszkadban — de csak addig, amig a sorrend ez marad. A sorrendet a
 * `lib/header.php` `$vendegLapok` tombje rogziti; ott kell hozzanyulni.
 */

/* ═══════════════════════════════════════════════════════════════════════
   VENDÉG ÉTLAP · KÁRTYÁS NÉZET, KÉTOSZLOPOS VÁLASZTÓ ÉS ALSÓ DOKK
   ═══════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium {
  --guest-bronze: #b87333;
  --guest-bronze-dark: #8e5523;
  --guest-bronze-soft: #f4e6d4;

  /*
   * A HOZZÁADÁS GOMB — EGY MÉRET, EGY SZÍN, EGY ALAK.
   *
   * Hét helyen van „tedd a kosárba" gomb: a kiemelt kártyán, a terméklistán,
   * az ajánlóban, a napi menünél, a kosár melletti ajánlónál, a heti menünél
   * és a rendeléskövető javaslatainál. Mindegyik külön méretet, sarkot és
   * színt kapott — 28, 30, 34, 38, 40, 43 és 46 pixel, halvány mentától a
   * bronzig, egy `0 17px 0 22px` aszimmetrikus sarokkal a végén.
   *
   * A vendégnek EGY dolgot kell megtanulnia: hogy néz ki a gomb, amitől a
   * termék a kosárba kerül. Innentől mind ugyanaz. Ha méretet vagy színt
   * akarsz váltani, ITT az egy hely.
   *
   * A halvány üvegháttér alatt a fotó látszik, a zöld ikon pedig egyértelműen
   * jelzi a műveletet. A közös méret minden kártyafajtán ugyanaz.
   */
  --add-size: 36px;
  --add-icon: 17px;
  --add-inset: 7px;

  /*
   * A SAROKBA VÁGOTT JEL. A gomb a kártya bal FELSŐ sarkába ül, hozzáérve
   * a széléhez: kívül a kártya saját ívét viszi tovább (`--add-notch`),
   * befelé pedig egy nagy kanyarral vág vissza (`--add-scoop`). Így nem
   * ráragasztott korong, hanem a kártyából kiharapott sarok.
   *
   * A `--add-notch` a KÁRTYA sugara — ahol a kártya más ívű, ott a kártya
   * saját szabálya írja át ezt az egy tokent, és a gomb magától követi.
   */
  --card-radius: 12px;
  --add-notch: calc(var(--card-radius) - 1px);
  --add-scoop: 12px;

  /*
   * A KIVÁLASZTÁS JELE — UGYANAZ A FORMA, MINDENHOL.
   *
   * A kártyán a „kosárban van", a választólistán az „ezt kérem", a
   * menüajánlat dinamikus kategóriáiban a kiválasztott tétel ugyanaz a döntés, ezért
   * ugyanúgy néz ki. Zöld sarok, fehér pipa — a natív karikák és
   * négyzetek helyett, amikből platformonként három különböző rajz volt.
   *
   * Kisebb, mint a kosárgomb sarka (`--add-size`), mert a választósor
   * alacsonyabb, mint egy termékkártya.
   */
  /*
   * A DOKK MÉRETE A TÖRZSÖN ÉL, nem a dokkon: a lapok alsó sávjainak is
   * tudniuk kell, mennyivel kell feljebb húzódniuk. A `--dock-space` az a
   * teljes hely, amit a lebegő sáv elfoglal — magasság + a képernyő aljától
   * mért távolság + az iPhone-ok alsó biztonsági sávja.
   *
   * A SÁV EGY SOR, és az is marad: nincs benne felirat, amitől megnőhetne.
   */
  --dock-size: 46px;
  --dock-radius: 15px;
  --dock-pad: 5px;
  --dock-gap: 4px;
  --dock-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  --dock-space: calc(var(--dock-size) + var(--dock-pad) * 2 + var(--dock-bottom) + 12px);

  --pick-size: 38px;
  --pick-radius: 10px;
  --pick-notch: calc(var(--pick-radius) - 1px);
  --pick-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.8l4.2 4.2L19 7.4' fill='none' stroke='%23fff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --add-bg: rgba(255, 252, 244, 0.32);
  --add-bg-hover: var(--brand);
  --add-border: rgba(255, 255, 255, 0.42);
  --add-fg: var(--brand-dark);
  --add-fg-hover: #fff;
  --add-shadow: 2px 3px 10px rgba(24, 55, 43, 0.08),
                inset 0 0 0 1px rgba(21, 104, 78, 0.05);

  padding-bottom: calc(var(--dock-space) + 26px);
}

body.qb-guest-premium .qb-paycall--floating {
  position: fixed;
  right: 12px;
  bottom: calc(var(--dock-space) + 10px);
  left: 12px;
  z-index: 89;
  width: min(520px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 10px 14px;
  background: #fff7df;
  border: 1px solid #ead18a;
  border-radius: 14px;
  color: #5e4810;
  box-shadow: 0 10px 26px rgba(47, 37, 12, 0.14);
  font-size: 0.82rem;
  font-weight: 750;
  text-align: center;
}

/* A TERMÉKLAPNAK NINCS SAJÁT ALSÓ SÁVJA, ezért a görgethető rész alja
   kap helyet a dokknak — különben a dokk eltakarná az utolsó sorát. */
body.qb-guest-premium .qb-sheet__panel--product > .qb-sheet__scroll {
  padding-bottom: var(--dock-space);
}

/* Termékkártyák: fénykép, ár, majd legfeljebb kétsoros név. */
body.qb-guest-premium .qb-section > .qb-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 246px;
  gap: 16px;
}

body.qb-guest-premium .qb-section > .qb-list > li,
body.qb-guest-premium .qb-section > .qb-list .qb-productrow {
  min-width: 0;
  height: 100%;
}

body.qb-guest-premium .qb-section > .qb-list .qb-productrow {
  position: relative;
}

body.qb-guest-premium .qb-section > .qb-list .qb-product {
  --product-photo-height: 132px;
  position: relative;
  display: grid;
  grid-template-areas: "photo" "copy";
  grid-template-rows: var(--product-photo-height) minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 0 15px;
  overflow: hidden;
  background: #fffefa;
  border: 1px solid color-mix(in srgb, var(--guest-bronze) 24%, var(--hairline));
  border-radius: var(--card-radius);
  box-shadow: 0 10px 28px rgba(23, 57, 46, 0.09);
  text-align: left;
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__img {
  grid-area: photo;
  width: 100%;
  height: var(--product-photo-height);
  background: linear-gradient(145deg, #f1eee6, var(--guest-bronze-soft));
  border: 0;
  border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0;
  object-fit: cover;
}

/* A kártya zárósorában az ár a JOBB oldalon zár — lásd a lap végi közös
   ár-szabályt; itt csak a méret marad, ami ehhez a kártyához tartozik. */
body.qb-guest-premium .qb-section > .qb-list .qb-price {
  position: static;
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.1;
}

/* A fotó alatt csak két rögzített tartalmi sor marad: név, majd
   kiszerelés és ár. A termékjelzések a fotón ülnek, így nem nyújtják meg
   azokat a kártyákat, amelyeken több információ jelenik meg. */
body.qb-guest-premium .qb-section > .qb-list .qb-product__main {
  grid-area: copy;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 40px 1fr;
  align-content: start;
  gap: 7px 10px;
  min-width: 0;
  padding: 12px 14px 0;
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__marks {
  position: absolute;
  top: calc(var(--product-photo-height) - 27px);
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 8px);
  min-height: 27px;
  min-width: 0;
  padding: 3px 8px;
  overflow: hidden;
  background: rgba(255, 254, 250, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 9px 0 0;
  box-shadow: 0 3px 12px rgba(17, 48, 38, 0.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  backdrop-filter: blur(10px) saturate(1.12);
  white-space: nowrap;
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__signals {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__marks :is(.qb-akciojel, .qb-hit) {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--brand-dark);
  box-shadow: none;
  font-size: 0.62rem;
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__marks :is(.qb-chili__ikon, .qb-kavebab__ikon) {
  width: 13px;
  height: 13px;
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__popular {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--add-size);
  height: var(--add-size);
  padding: 0;
  color: #ffad42;
  background: rgba(55, 29, 13, 0.68);
  border: 1px solid rgba(255, 239, 210, 0.58);
  border-top: 0;
  border-right: 0;
  border-radius: 0 var(--add-notch) 0 var(--add-scoop);
  box-shadow: 0 4px 14px rgba(42, 19, 7, 0.22);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  backdrop-filter: blur(10px) saturate(1.12);
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__popular-icon {
  width: 18px;
  height: 18px;
  color: #ff9a36;
  animation: qb-popular-flame 1.8s ease-in-out infinite;
  transform-origin: 50% 85%;
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__popular-icon path:first-child {
  fill: rgba(255, 116, 38, 0.28);
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__popular-icon path:last-child {
  fill: #ffd36a;
  stroke: #fff0b0;
}

@keyframes qb-popular-flame {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(224, 101, 31, 0.22));
    transform: translateY(0) scale(1);
  }
  50% {
    filter: drop-shadow(0 0 4px rgba(224, 101, 31, 0.5));
    transform: translateY(-1px) scale(1.08, 1.12);
  }
}

/* A név fix kétsoros helye után minden kártyán ugyanott kezdődik az ársor. */
body.qb-guest-premium .qb-section > .qb-list .qb-product__foot {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: end;
  /*
   * RÁCS, NEM FLEX. Flexben a két elem alapmérete („flex base size") nem
   * az, aminek látszik: az ár doboza 88 pixelt rajzolt, de 118-cal
   * számolt, és a különbözetet a kiszerelésen hajtotta be — „0,…" lett
   * belőle egy olyan soron, ahol 21 pixel szabad hely maradt.
   *
   * A rács sávjai a tartalomból méreteződnek, és pontosan azt adják, amit
   * a mérés mond: az első sáv zsugorodhat (`minmax(0, auto)`), a második
   * az ár teljes szélessége.
   */
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
  padding-bottom: 2px;
}

/*
 * A kiszerelés adja meg magát, ha szűk a hely — az ár nem. „0,33 l" helyett
 * „0,3…" még mindig informatív; egy másik sorba csúszott ár viszont
 * elrontja azt az egy vonalat, amiért a zárósor van.
 */
/*
 * EGYIK ELEM SE ZSUGORODJON A ZÁRÓSORBAN.
 *
 * Mérve: „0,33 l" 27 pixel, az ár 88, a rés 8, a sor 144 — 21 pixel marad
 * szabadon, tehát nincs mit elvenni. A zsugorítás mégis elvett: fél pixelre
 * pontatlan alapmérettel dolgozott, és „0,…" lett a kiszerelésből ott, ahol
 * bőven kifért volna.
 *
 * `flex: 0 0 auto` mindkettőn: mindenki a saját szélességét kapja, a
 * `space-between` a maradékot közéjük teszi. Ha valaki egyszer nagyon hosszú
 * kiszerelést ír be, a kártya `overflow: hidden`-je vágja le — az ár akkor
 * is teljes marad, mert az sosem csonkul.
 */
body.qb-guest-premium .qb-section > .qb-list .qb-product__size {
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * AZ ÁR SOHA NEM ZSUGORODIK ÉS SOHA NEM CSONKUL.
 *
 * Ez a fontossági sorrend a záró sorban: ha egyszer mégis szűk a hely,
 * a kiszerelés adja meg magát („0,3…" még mindig mond valamit), az ár
 * viszont nem — egy levágott „621 |" rosszabb, mint a semmi, mert a
 * vendég félreolvassa. Ezért `flex: 0 0 auto`, és nincs rajta `overflow`.
 */
body.qb-guest-premium .qb-section > .qb-list .qb-price {
  flex: 0 0 auto;
}

/* Az áthúzott ár az akciós elé, kisebben — nem versenyez vele. */
body.qb-guest-premium .qb-section > .qb-list .qb-price__list {
  margin-right: 5px;
  font-size: 0.8rem;
  font-weight: 600;
}

body.qb-guest-premium .qb-section > .qb-list .qb-product__name {
  grid-row: 1;
  grid-column: 1;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.18;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*
 * Az akciócímke a névvel EGY sorban, jobbra zárva.
 *
 * A SZÉLESSÉGE KORLÁTOZVA VAN, és ez nem díszítés: egy kétoszlopos
 * telefonos rácsban a kártya ~168 pixel, a „Happy hour −10%" felirat
 * viszont egy sorban 114 — a névnek 50 pixel maradna, vagyis „Ásv" és
 * „Coc Col". A címke inkább törjön két sorba, mint hogy a termék nevét
 * olvashatatlanná tegye: a névért jött a vendég, az akció csak érv.
 */
body.qb-guest-premium .qb-section > .qb-list .qb-product__size {
  color: var(--ash);
  font-size: 0.72rem;
}

/*
 * A terméklista kártyáján a fotó tetején ül a gomb, nem az alján: alul a
 * név két sorig futhat, és a gomb elé kerülne. A KINÉZETÉT nem írjuk felül
 * — méret, szín, sarok a közös `--add-*` tokenekből jön. Itt csak az
 * marad, ami tényleg ehhez a kártyához tartozik: a hely.
 *
 * A korábbi `border-radius: 0 17px 0 22px` innen ment ki. Négy különböző
 * sarok egyetlen 46 pixeles gombon, sehol máshol nem ismételve — a vendég
 * ezt nem stílusnak látta, hanem hibának.
 */

/* Terméklap és kétoszlopos választók. */
body.qb-guest-premium .qb-sheet {
  z-index: 70;
}

body.qb-guest-premium .qb-sheet__panel--product {
  width: min(760px, 100%);
  max-width: 760px;
  max-height: calc(100dvh - 10px);
  background: #f6faf6;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--hairline));
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 50px rgba(15, 50, 39, 0.24);
}

body.qb-guest-premium .qb-sheet__figure,
body.qb-guest-premium .qb-sheet__figure img {
  border-radius: 17px 17px 0 0;
}

body.qb-guest-premium .qb-sheet__figure img {
  height: clamp(220px, 35dvh, 340px);
  max-height: 340px;
}

body.qb-guest-premium .qb-sheet__x {
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  background: rgba(255, 254, 250, 0.95);
  border: 1px solid rgba(32, 53, 45, 0.14);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(24, 55, 43, 0.16);
}

body.qb-guest-premium .qb-sheet__scroll {
  padding-bottom: 6px;
  background: linear-gradient(180deg, #f6faf6, #eef7f1);
}

body.qb-guest-premium .qb-sheet__intro,
body.qb-guest-premium .qb-sheet__body {
  padding-right: clamp(14px, 4vw, 26px);
  padding-left: clamp(14px, 4vw, 26px);
}

body.qb-guest-premium .qb-group {
  margin: 0 0 16px;
  padding: 5px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.qb-guest-premium .qb-group__legend,
body.qb-guest-premium .qb-menuoffer__step legend {
  width: 100%;
  margin: 0 0 11px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

body.qb-guest-premium .qb-group__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.qb-guest-premium .qb-group__title {
  min-width: 0;
}

body.qb-guest-premium .qb-group__meta {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--brand-dark);
  background: var(--mint-soft);
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/*
 * A VÁLASZTÓLISTA OSZLOPSZÁMA A TARTALOMBÓL JÖJJÖN, NE FIXEN KETTŐ LEGYEN.
 *
 * Fix két oszlopnál a panel 317 pixele két 153 pixeles hasábra esik, és
 * abból a belső margók után 105 marad a névnek. A „Közepes Hasábburgonya"
 * 148 pixel — vagyis a név eleve nem fér ki, akárhogy is tördel. Nem a
 * betű nagy: a hasáb kicsi.
 *
 * A `minmax(210px, 1fr)` azt mondja, hogy egy hasáb 210 pixelnél keskenyebb
 * ne legyen. A 210 nem kerek szám kedvéért ennyi: a leghosszabb köretnév
 * 148 pixel, a soron belül pedig 10 pixel bal margó, 40 a sarokba vágott
 * pipának és 2 a keretnek — a hasábnak tehát ~200 pixel a minimuma ahhoz,
 * hogy a név egy sorba férjen. Telefonon ebből egy oszlop lesz, a
 * terméklapon három — magától, breakpoint nélkül.
 */
body.qb-guest-premium .qb-group__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 0;
  border: 0;
}

body.qb-guest-premium .qb-group__list > * {
  width: 100%;
  min-width: 0;
}

/*
 * A menüválasztók szabályos rácsban ülnek. Az utolsó, egyedül maradó
 * termék így egyetlen kártya széles marad, és nem nyúlik végig a teljes
 * soron.
 */
body.qb-guest-premium .qb-menuoffer__choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 0;
  border: 0;
}

body.qb-guest-premium .qb-menuoffer__choices > * {
  width: 100%;
  min-width: 0;
}

body.qb-guest-premium .qb-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-content: center;
  row-gap: 3px;
  min-width: 0;
  /*
   * A JEL MÉRETE KÖVESSE A CHIP MÉRETÉT. A menüválasztó sora fényképes és
   * 84 pixel magas — ott a 38 pixeles sarok arányos. Egy „Hagyma" chip
   * viszont fele akkora, és ott ugyanaz a sarok 42 pixelt vesz el a
   * szélességből: emiatt fért egy sorba kettő ott, ahol három is elférne.
   * A forma ugyanaz marad, csak a mérete kisebb.
   */
  --pick-size: 30px;
  height: 82px;
  margin: 0;
  padding: 11px calc(var(--pick-size) + 2px) 11px 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(24, 55, 43, 0.055);
  transition: border-color 150ms ease, background-color 150ms ease,
              box-shadow 150ms ease, transform 150ms ease;
}

/*
 * A NATÍV KARIKA ELTŰNIK A SZEM ELŐL, DE NEM A GÉPEK ELŐL.
 *
 * `display: none` helyett elrejtve, de a dokumentumban maradva: így a
 * billentyűzet rááll, a felolvasó bemondja, a `:checked` állapot pedig
 * továbbra is ez alapján rajzolódik. Csak a RAJZÁT vesszük át.
 */
body.qb-guest-premium .qb-option input,
body.qb-guest-premium .qb-menuoffer__choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.qb-guest-premium .qb-option__name,
body.qb-guest-premium .qb-option__price,
body.qb-guest-premium .qb-option__kcal {
  grid-column: 1;
  min-width: 0;
}

body.qb-guest-premium .qb-option__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.16;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* A szín és a vastagság a lap végi EGY ÁR-szabályból jön (`.qb-option__price`
   ott is szerepel) — itt csak az, ami ennek a helynek a sajátja. */
body.qb-guest-premium .qb-option__price {
  margin-top: 2px;
  font-size: 0.82rem;
}

body.qb-guest-premium .qb-option__kcal {
  font-size: 0.7rem;
}

body.qb-guest-premium .qb-option:has(input:checked) {
  background: linear-gradient(145deg, #f4fff9, var(--mint-soft));
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand),
              0 7px 18px rgba(0, 104, 80, 0.13);
  transform: translateY(-1px);
}

body.qb-guest-premium .qb-menuoffer {
  margin: 10px clamp(10px, 3vw, 22px) 18px;
  padding: 16px;
  background: linear-gradient(155deg, rgba(255, 254, 250, 0.98), rgba(232, 247, 239, 0.92));
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--hairline));
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(19, 75, 57, 0.09);
}

body.qb-guest-premium .qb-menuoffer__head {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 16%, var(--hairline));
}

body.qb-guest-premium .qb-menuoffer__head > strong {
  border-radius: 9px;
  box-shadow: 0 5px 14px rgba(0, 104, 80, 0.18);
}

body.qb-guest-premium .qb-menuoffer__lead {
  margin: 12px 0 15px;
  line-height: 1.42;
}

body.qb-guest-premium .qb-menuoffer__progress { margin: -4px 0 13px; color: var(--brand-dark); font-size: .76rem; font-weight: 800; }
body.qb-guest-premium .qb-menuoffer__step.is-current { border-color: color-mix(in srgb, var(--brand) 44%, var(--hairline)); box-shadow: none; }
body.qb-guest-premium .qb-menuoffer__step.is-done legend span { background: #267a61; }
body.qb-guest-premium .qb-menuoffer__step.is-locked { opacity: .5; }
body.qb-guest-premium .qb-menuoffer__step.is-locked .qb-menuoffer__choice { cursor: default; }

body.qb-guest-premium .qb-menuoffer__step {
  margin: 0 0 12px;
  padding: 12px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--brand) 14%, var(--hairline));
  border-radius: 0;
}

body.qb-guest-premium .qb-menuoffer__step:last-child {
  margin-bottom: 0;
}

body.qb-guest-premium .qb-menuoffer__step legend span {
  border-radius: 7px;
  box-shadow: 0 4px 10px rgba(0, 104, 80, 0.16);
}

body.qb-guest-premium .qb-menuoffer__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 13px;
  color: var(--ash);
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed color-mix(in srgb, var(--brand) 32%, var(--hairline));
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.qb-quickfilters { margin: 10px var(--page-pad) 4px; padding: 12px; background: rgba(255, 254, 250, .86); border: 1px solid var(--hairline); border-radius: 12px; }
.qb-quickfilters__title { margin: 0 0 9px; color: var(--ink); font-size: .78rem; font-weight: 800; }
.qb-quickfilters__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.qb-quickfilters .qb-chip { min-height: 38px; }
.qb-quickfilters__result { min-height: 1em; margin: 8px 0 0; color: var(--ash); font-size: .75rem; }
.is-quick-hidden,
.qb-section.is-quick-empty { display: none; }
.qb-hit--new { background: #eaf3ff; color: #275683; }
.qb-hit--today { background: #fff0d7; color: #80551b; }

/*
 * A KÉPOSZLOP CSAK AKKOR FOGLALJON, HA VAN KÉP. Fixen 52 pixel volt, akkor
 * is, ha a választónak nincs fényképe — a köret- és italsorokon nincs —,
 * és emiatt a „Közepes Hasábburgonya" fölöslegesen tört két sorba egy
 * félig üres soron. A kép szélessége a `:has(img)` ágban marad.
 */
body.qb-guest-premium .qb-menuoffer__choice {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  min-height: 84px;
  padding: 10px calc(var(--pick-size) + 2px) 10px 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(24, 55, 43, 0.055);
  transition: border-color 150ms ease, background-color 150ms ease,
              box-shadow 150ms ease, transform 150ms ease;
}

/*
 * A SZÖVEG OSZLOPA IS A KÉPTŐL FÜGG. A `style.css` a `> span`-t fixen a 2.
 * sávba teszi — az a képes elrendezés maradéka. Kép nélkül nincs 1. sáv,
 * tehát a szöveg egy KITALÁLT második oszlopba került, és jobbra tolódott.
 */
body.qb-guest-premium .qb-menuoffer__choice > span {
  grid-column: 1;
}

body.qb-guest-premium .qb-menuoffer__choice:has(img) {
  grid-template-columns: 52px minmax(0, 1fr);
}

body.qb-guest-premium .qb-menuoffer__choice:has(img) > span {
  grid-column: 2;
}

/* Kép nélkül a sor alacsonyabb lehet — 84 pixel egy egysoros névhez üres
   sáv, hatféle körettel már fél képernyő. Kényelmes koppintáshoz 62 is
   bőven elég (a szabvány 44). */
body.qb-guest-premium .qb-menuoffer__choice:not(:has(img)) {
  min-height: 62px;
}

body.qb-guest-premium .qb-menuoffer__choice img {
  width: 52px;
  height: 58px;
  border-radius: 10px;
}

body.qb-guest-premium .qb-menuoffer__choice strong {
  font-size: 0.88rem;
  line-height: 1.16;
}

body.qb-guest-premium .qb-menuoffer__choice small {
  color: var(--brand-dark);
  font-size: 0.8rem;
  font-weight: 800;
}

body.qb-guest-premium .qb-menuoffer__choice:has(input:checked) {
  background: linear-gradient(145deg, #f4fff9, var(--mint-soft));
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand),
              0 7px 18px rgba(0, 104, 80, 0.13);
  transform: translateY(-1px);
}

/*
 * A MARADÉK ALSÓ SÁVOK a fizetés- és a jelzéslapé (`lib/fizetes-lap.php`,
 * `statusz.php`): ott EGY gomb van, léptető nélkül. A terméklap sávja a
 * dokkba költözött, ezért a léptető szabályai is oda kerültek.
 */
body.qb-guest-premium .qb-sheet__foot .qb-btn--wide {
  min-width: 0;
  min-height: 56px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border: 1px solid var(--brand-dark);
  border-radius: 13px;
  color: #fff;
  box-shadow: 0 7px 18px rgba(0, 104, 80, 0.22);
  font-size: 0.92rem;
  font-weight: 850;
}

/* Valódi, az összes termékben kereső lap. */
body.qb-guest-premium .qb-searchsheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
}

body.qb-guest-premium .qb-searchsheet__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(15, 42, 33, 0.52);
  border: 0;
  backdrop-filter: blur(6px);
}

body.qb-guest-premium .qb-searchsheet__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(82dvh, 760px);
  padding: 20px;
  background: #f6faf6;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--hairline));
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -16px 54px rgba(15, 50, 39, 0.28);
}

body.qb-guest-premium .qb-searchsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body.qb-guest-premium .qb-searchsheet__eyebrow,
body.qb-guest-premium .qb-searchsheet__count {
  margin: 0;
  color: var(--ash);
  font-size: 0.72rem;
  font-weight: 750;
}

body.qb-guest-premium .qb-searchsheet__head h2 {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
}

body.qb-guest-premium .qb-searchsheet__close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 13px;
  color: var(--ink);
  font-size: 1.45rem;
}

body.qb-guest-premium .qb-searchsheet__field {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 0 15px;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--brand) 35%, var(--hairline));
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(24, 55, 43, 0.08);
}

body.qb-guest-premium .qb-searchsheet__field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 133, 104, 0.11);
}

body.qb-guest-premium .qb-searchsheet__field svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--brand-dark);
  stroke-width: 1.9;
  stroke-linecap: round;
}

body.qb-guest-premium .qb-searchsheet__field input {
  min-width: 0;
  min-height: 54px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 1rem;
}

body.qb-guest-premium .qb-searchsheet__field input:focus {
  box-shadow: none;
}

body.qb-guest-premium .qb-searchsheet__count {
  margin-top: 11px;
}

body.qb-guest-premium .qb-searchsheet__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0 2px 6px;
  overflow-y: auto;
  list-style: none;
}

body.qb-guest-premium .qb-searchresult__button {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 11px;
  width: 100%;
  min-height: 88px;
  padding: 9px;
  background: #fffefa;
  border: 1px solid var(--hairline-strong);
  border-radius: 15px;
  color: var(--ink);
  text-align: left;
}

/* Kiírt ágak: a `.qb-searchresult__button img` ág egy elemmel nehezebb, és
   `:is()`-ben ezt a súlyt a placeholder is megkapta volna. */
body.qb-guest-premium .qb-searchresult__button img,
body.qb-guest-premium .qb-searchresult__placeholder {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 68px;
  height: 68px;
  background: linear-gradient(145deg, #f1eee6, var(--guest-bronze-soft));
  border-radius: 11px;
  object-fit: cover;
}

body.qb-guest-premium .qb-searchresult__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.qb-guest-premium .qb-searchresult__copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.qb-guest-premium .qb-searchresult__copy small {
  overflow: hidden;
  color: var(--ash);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.qb-guest-premium .qb-searchresult__price {
  align-self: end;font-size: 0.88rem;}

@media (max-width: 640px) {
  body.qb-guest-premium .qb-section > .qb-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 190px;
    gap: 11px;
  }

  body.qb-guest-premium .qb-section > .qb-list .qb-product {
    --product-photo-height: 104px;
    grid-template-rows: var(--product-photo-height) minmax(0, 1fr);
    min-height: 0;
    padding-bottom: 6px;
  }

  body.qb-guest-premium .qb-section > .qb-list .qb-product__img {
    height: var(--product-photo-height);
  }

  /* A `margin: 11px 11px 0` innen kikerült: az ár már nem külön rács-sor
     a fotó alatt, hanem a zárósor jobb oldala. */
  body.qb-guest-premium .qb-section > .qb-list .qb-price {
    font-size: 1rem;
  }

  /* Telefonon a rövidített kártya is ugyanazt a két sort tartja. */
  body.qb-guest-premium .qb-section > .qb-list .qb-product__main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 32px minmax(0, 1fr);
    gap: 1px 8px;
    padding: 5px 11px 0;
  }

  body.qb-guest-premium .qb-section > .qb-list .qb-akciojel {
    margin: 0;
    overflow: hidden;
    font-size: 0.62rem;
    text-overflow: ellipsis;
  }

  body.qb-guest-premium .qb-section > .qb-list .qb-product__foot {
    position: static;
    grid-row: 2;
    align-self: end;
  }

  body.qb-guest-premium .qb-section > .qb-list .qb-product__name {
    font-size: 0.9rem;
  }

  body.qb-guest-premium .qb-searchsheet__panel {
    max-height: 88dvh;
    padding: 16px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  }}

@media (max-width: 420px) {
  /*
   * Kis kijelzőn csak a MÉRET csökken — a szerkezet nem. Elég a tokent
   * átírni: a korongok szélessége, a középső mező magassága és a pirulák
   * kerekítése mind ebből számolódik.
   */
  body.qb-guest-premium {
    --dock-size: 44px;
  }

  body.qb-guest-premium .qb-menuoffer {
    margin-right: 8px;
    margin-left: 8px;
    padding: 13px;
  }

  /* A harmadik, 20 pixeles oszlop a natív rádiógombé volt — az azóta
     rejtve van, a jelölést a sarokba vágott pipa adja. Üres sávot hagyni
     ott, ahol a névnek kellene a hely, kis kijelzőn a legdrágább. */
  body.qb-guest-premium .qb-menuoffer__choice {
    grid-template-columns: minmax(0, 1fr);
    min-height: 76px;
    padding: 8px calc(var(--pick-size) - 4px) 8px 8px;
  }

  body.qb-guest-premium .qb-menuoffer__choice:has(img) {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  body.qb-guest-premium .qb-menuoffer__choice img {
    width: 42px;
    height: 52px;
  }

  body.qb-guest-premium .qb-menuoffer__choice strong,
  body.qb-guest-premium .qb-option__name {
    font-size: 0.8rem;
  }
}

@media (max-width: 340px) {

  body.qb-guest-premium .qb-section > .qb-list .qb-price:has(.qb-price__list) {
    display: grid;
    justify-items: end;
    line-height: 1.05;
  }

  body.qb-guest-premium .qb-section > .qb-list .qb-price__list {
    margin-right: 0;
    font-size: 0.67rem;
  }

  body.qb-guest-premium .qb-fees .qb-kozlsav {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   AJÁNLÓKÁRTYÁK · a sarokjel a FOTÓRA üljön, ne a fehér margóra
   ══════════════════════════════════════════════════════════════════════════

   A kivágott sarok a terméklista kártyáján azért olvasható, mert ott a fotó
   a kártya széléig ér: a jel a KÉPBŐL van kiharapva. Az ajánlókártyáknak
   viszont 8 pixel belső margójuk volt, tehát a fotó beljebb kezdődött, a
   gomb pedig a fölötte lévő fehér sávra került — krém a fehéren, a kép
   lekerekített sarka mellett. Így nézett ki elcsúszottnak.

   A margó lekerült a kártyáról és átment a SZÖVEGRE. A fotó kiér a szélig,
   a sarokjel a helyére ül, és az ajánlókártya végre ugyanaz a kártya, mint
   a terméklistában.
   ══════════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium .qb-reco,
body.qb-guest-premium .qb-cartreco__item {
  gap: 3px;
  padding: 0 0 10px;
}

body.qb-guest-premium .qb-recos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
}

body.qb-guest-premium .qb-reco {
  width: auto;
  min-width: 0;
}

body.qb-guest-premium .qb-reco__img,
body.qb-guest-premium .qb-cartreco__img {
  width: 100%;
  border-radius: 0;
}

body.qb-guest-premium .qb-reco__img {
  height: 92px;
}

body.qb-guest-premium .qb-cartreco__img {
  height: 78px;
}

body.qb-guest-premium :is(.qb-reco__name, .qb-reco__price,
  .qb-cartreco__nev, .qb-cartreco__ar) {
  padding-inline: 10px;
}

body.qb-guest-premium :is(.qb-reco__name, .qb-cartreco__nev) {
  margin-top: 7px;
  min-height: 2.5em;
  overflow: hidden;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 360px) {
  body.qb-guest-premium {
    --dock-size: 42px;
  }

  body.qb-guest-premium .qb-recos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ALLERGÉNEK · tájékoztatás, nem lábjegyzet
   ══════════════════════════════════════════════════════════════════════════

   Egy halvány verzális felirat és egy apró folt volt a termékadatok alatt,
   ugyanabban a szürkeségben, mint a leírás. Ez viszont nem stílus kérdése:
   allergénről TÁJÉKOZTATNI kell, és aki emiatt olvassa a lapot, annak meg
   kell találnia — nem a szeme sarkából.

   Saját, meleg sávot kap, felső borostyán jelzéssel: elkülönül a
   zöld-fehér terméklaptól anélkül, hogy figyelmeztetésnek látszana. Az
   allergének fehér pirulákon ülnek, a sorszám külön korongon — az a
   hivatalos szám, amit a vendég a táblán is megtalál.
   ══════════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium .qb-sheet__allergen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin: 13px 0 2px;
  padding: 13px 14px 14px;
  background: linear-gradient(145deg, rgba(255, 253, 247, 0.98), rgba(248, 241, 225, 0.94));
  border: 1px solid #e6d7b8;
  border-top: 3px solid #d99a2b;
  border-radius: 12px;
  box-shadow: 0 7px 20px rgba(92, 62, 17, 0.08);
}

body.qb-guest-premium .qb-sheet__allergen-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: #654914;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

body.qb-guest-premium .qb-sheet__allergen-cap::before {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  content: "";
  background: #d99a2b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4.5 5v5.7c0 5 3.1 9.2 7.5 11.3 4.4-2.1 7.5-6.3 7.5-11.3V5L12 2Zm0 4.1c.7 0 1.2.5 1.2 1.2v5.2a1.2 1.2 0 1 1-2.4 0V7.3c0-.7.5-1.2 1.2-1.2Zm0 11.3a1.35 1.35 0 1 1 0-2.7 1.35 1.35 0 0 1 0 2.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4.5 5v5.7c0 5 3.1 9.2 7.5 11.3 4.4-2.1 7.5-6.3 7.5-11.3V5L12 2Zm0 4.1c.7 0 1.2.5 1.2 1.2v5.2a1.2 1.2 0 1 1-2.4 0V7.3c0-.7.5-1.2 1.2-1.2Zm0 11.3a1.35 1.35 0 1 1 0-2.7 1.35 1.35 0 0 1 0 2.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.qb-guest-premium .qb-sheet__allergen-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

body.qb-guest-premium .qb-sheet__allergen-chip {
  gap: 6px;
  padding: 4px 11px 4px 5px;
  background: #fff;
  border: 1px solid #eddec0;
  border-radius: 999px;
  color: #7a4f06;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 7px rgba(92, 62, 17, 0.06);
}

body.qb-guest-premium .qb-sheet__allergen-num {
  width: 19px;
  height: 19px;
  margin: 0;
  background: #f3e3c1;
  border: 0;
  border-radius: 50%;
  color: #7a4f06;
  font-size: 0.62rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   FIZETÉS · a végösszeg legyen a lap legerősebb sora
   ══════════════════════════════════════════════════════════════════════════

   Az összesítő eddig egy dobozban futó, egyforma súlyú sorok halmaza volt:
   a részösszeg, a borravaló és a FIZETENDŐ ugyanúgy nézett ki. Aki fizet,
   egyetlen számot keres, és azt kell elsőre megtalálnia.

   Ugyanaz a nyelv, mint a termékadatok tábláján: halk papír, hajszálvonalak,
   tabuláris számok. A végösszeget zöld vonal választja el a fölötte lévő
   tételektől, és a lap legnagyobb száma — nem szín kiabál, hanem a méret.
   ══════════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium .qb-paysummary {
  margin-top: 18px;
  padding: 2px 14px 12px;
  background: linear-gradient(180deg, #fbfdfa, #f3f8f3);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

body.qb-guest-premium .qb-paysummary .qb-payrow {
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 72%, transparent);
}

body.qb-guest-premium .qb-paysummary .qb-payrow__name {
  color: var(--ash);
  font-size: 0.86rem;
}

body.qb-guest-premium .qb-paysummary .qb-payrow__sum {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

body.qb-guest-premium .qb-paysummary .qb-payrow--total {
  border-bottom: 0;
}

body.qb-guest-premium .qb-paysummary .qb-payrow--total.is-grand {
  margin-top: 3px;
  padding-top: 13px;
  border-top: 2px solid var(--brand);
}

body.qb-guest-premium .qb-paysummary .qb-payrow--total.is-grand .qb-payrow__name {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
}

body.qb-guest-premium .qb-paysummary .qb-payrow--total.is-grand .qb-payrow__sum {
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-size: 1.26rem;
  font-weight: 850;
}

/* ══════════════════════════════════════════════════════════════════════════
   EGY JELÖLÉS MINDENHOL · zöld sarok, fehér pipa
   ══════════════════════════════════════════════════════════════════════════

   Eddig háromféle „ez ki van választva" volt a vendégoldalon:

     · a kártyán  — zöld sarok pipával (`.is-in-cart`)
     · a választólistán — natív rádiógomb karikája
     · a menüajánlatban — natív jelölőnégyzet

   A natív jelölők platformonként máshogy néznek ki, és semmi közük nem volt
   ahhoz a formához, amit a vendég a kártyán már megtanult. Innentől
   mindhárom UGYANAZ a jel: a sarokba vágott zöld mező, benne fehér pipa.

   A jel a `:has(input:checked)`-ből jön, tehát a natív állapot rajzolja —
   nem külön osztály, amit egy szkriptnek karban kellene tartania.
   ══════════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium .qb-option::after,
body.qb-guest-premium .qb-menuoffer__choice::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--pick-size);
  height: var(--pick-size);
  background: var(--brand) var(--pick-check) no-repeat center / 19px 19px;
  border-radius: 0 var(--pick-notch) 0 var(--add-scoop);
  opacity: 0;
  transform: scale(0.55);
  transform-origin: top right;
  transition: opacity 130ms ease,
              transform 200ms cubic-bezier(.2, .9, .25, 1.3);
  pointer-events: none;
}

body.qb-guest-premium .qb-option:has(input:checked)::after,
body.qb-guest-premium .qb-menuoffer__choice:has(input:checked)::after {
  opacity: 1;
  transform: scale(1);
}

/*
 * A KÁRTYA „KOSÁRBAN VAN" JELE UGYANEZ A PIPA. Eddig egy `content: "✓"`
 * szöveges karakter volt — betűtípustól függő rajz, más vastagsággal, mint
 * a választóké. Most ugyanaz a kép, ugyanaz a vonal.
 */
body.qb-guest-premium .qb-showcard__cart.is-in-cart::after {
  content: none;
}

/*
 * „VÁLASZTÁS KELL HOZZÁ" — nyíl a plusz helyett.
 *
 * Ez a gomb nem tesz kosárba: megnyitja a termék lapját, mert köretet és
 * italt kell választani. A nyíl ELVISZ valahová; a plusz azt ígérné, hogy
 * a koppintással kész vagyunk. A `menu.js` teszi rá az osztályt.
 */
body.qb-guest-premium .qb-showcard__cart.is-choose,
body.qb-guest-premium .qb-quickadd.is-choose {
  background: rgba(255, 254, 250, 0.34);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--hairline));
  color: var(--brand-dark);
}

/*
 * A SORREND ITT SZÁMÍT. Ez a blokk az `is-choose` UTÁN áll, és nem véletlenül:
 * mindkét szabály (0,3,1) súlyú, tehát azonos erősségű — ilyenkor a KÉSŐBBI
 * nyer. Ha ez a blokk feljebb kerülne, a „választás kell" világos gombja
 * elnyomná a „bekerült a kosárba" zöldjét, és a vendég a koppintás után nem
 * látna visszajelzést. (Egyszer pont ez történt egy összevonás során.)
 */
/*
 * „BEKERÜLT A KOSÁRBA" — EGY ÁLLAPOT, EGY SZABÁLY.
 *
 * Két osztály jelöli ugyanazt a tényt, más időtávon: az `is-added` a
 * koppintás utáni 2,4 másodperc (ezt a `menu.js` teszi rá és veszi le), az
 * `is-in-cart` pedig a tartós állapot, amíg a tétel a kosárban van. A
 * KINÉZETÜK azonos — tömör zöld, fehér pipa, belső gyűrű —, mert a vendég
 * számára is ugyanaz az üzenet.
 *
 * Korábban három külön szabály állította ezeket, egymást felülírva: az
 * elsőben `--brand`, a másodikban `--brand-dark`, a harmadikban megint
 * `--brand` plusz a pipa. Csak a harmadik érvényesült, a másik kettő
 * elgondolása pedig láthatatlanul ottmaradt a fájlban.
 *
 * A PIPA HÁTTÉRKÉPBŐL jön, nem a gomb ikonjából: az `is-in-cart` tartós
 * állapotban a `menu.js` nem cserél ikont, tehát a rajznak a CSS-ből kell
 * jönnie. Az `is-added` alatt a szkript pipára cseréli az ikont — azt itt
 * elrejtjük, hogy a két állapot pixelre ugyanúgy nézzen ki.
 */
body.qb-guest-premium .qb-showcard__cart.is-in-cart,
body.qb-guest-premium .qb-showcard__cart.is-added,
body.qb-guest-premium .qb-quickadd.is-in-cart,
body.qb-guest-premium .qb-quickadd.is-added,
body.qb-guest-premium .qb-reco__add.is-added,
body.qb-guest-premium .qb-suggest__add.is-added,
body.qb-guest-premium .qb-heti__kosar.is-added,
body.qb-guest-premium .qb-cartreco__item > .qb-btn.is-added {
  background: var(--brand) var(--pick-check) no-repeat center / 21px 21px;
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34), var(--add-shadow);
}

body.qb-guest-premium .qb-showcard__cart.is-in-cart svg,
body.qb-guest-premium .qb-showcard__cart.is-added svg,
body.qb-guest-premium .qb-quickadd.is-in-cart svg,
body.qb-guest-premium .qb-quickadd.is-added svg,
body.qb-guest-premium .qb-reco__add.is-added svg,
body.qb-guest-premium .qb-suggest__add.is-added svg,
body.qb-guest-premium .qb-heti__kosar.is-added svg,
body.qb-guest-premium .qb-cartreco__item > .qb-btn.is-added svg {
  display: none;
}

/* A KIPATTANÁS csak az `is-added`-é: az a „most tettem be", nem a „benne van". */
body.qb-guest-premium .qb-showcard__cart.is-added,
body.qb-guest-premium .qb-quickadd.is-added,
body.qb-guest-premium .qb-reco__add.is-added,
body.qb-guest-premium .qb-suggest__add.is-added,
body.qb-guest-premium .qb-heti__kosar.is-added,
body.qb-guest-premium .qb-cartreco__item > .qb-btn.is-added {
  animation: qb-add-pop 440ms cubic-bezier(.2, .9, .25, 1.25);
}
/* ══════════════════════════════════════════════════════════════════════════
   KERESŐ · két hasáb telefonon is
   ══════════════════════════════════════════════════════════════════════════

   Egy hasábban 29 találat majdnem harminc képernyőnyi görgetés, pedig a
   találat három adat: kép, név, ár. Két hasábban ugyanannyi hely alatt a
   duplája látszik — ugyanaz a kártya, mint az étlapon, tehát a vendégnek
   nem kell új elrendezést megtanulnia a kereséshez.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  body.qb-guest-premium .qb-searchsheet__results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.qb-guest-premium .qb-searchresult__button {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0;
    min-height: 0;
    padding: 0 0 10px;
    overflow: hidden;
  }

  body.qb-guest-premium .qb-searchresult__button img,
  body.qb-guest-premium .qb-searchresult__placeholder {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 92px;
    border-radius: 0;
  }

  body.qb-guest-premium .qb-searchresult__copy {
    grid-row: 2;
    gap: 2px;
    margin-top: 8px;
    padding-inline: 10px;
  }

  body.qb-guest-premium .qb-searchresult__price {
    grid-row: 3;
    align-self: start;
    margin-top: 5px;
    padding-inline: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TERMÉKADATOK EGY BLOKKBAN · tápérték · összetevők · allergének
   ══════════════════════════════════════════════════════════════════════════

   A három ugyanarra a kérdésre felel, egyre részletesebben: mennyi, miből,
   mire figyeljek. Ezért egy hasábban futnak, azonos papíron és azonos
   hajszálvonalakkal — a vendégnek nem kell háromszor újratanulnia, hol
   keresse őket.

   A blokk a lap ALJÁN áll, az ajánló után: itt már nem azt dönti el, hogy
   MIT kér, hanem azt, hogy megeheti-e.
   ══════════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium .qb-productinfo {
  display: block;
  padding-top: 0;
  padding-bottom: 0;
}

body.qb-guest-premium .qb-productinfo__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

body.qb-guest-premium .qb-productinfo__summary::-webkit-details-marker {
  display: none;
}

body.qb-guest-premium .qb-productinfo__chevron {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

body.qb-guest-premium .qb-productinfo[open] .qb-productinfo__chevron {
  transform: rotate(225deg);
}

body.qb-guest-premium .qb-productinfo__content {
  display: grid;
  gap: 8px;
  padding: 10px 0 2px;
}

body.qb-guest-premium .qb-productinfo .qb-specs,
body.qb-guest-premium .qb-productinfo .qb-sheet__allergen {
  margin: 0;
}

body.qb-guest-premium .qb-productinfo__row {
  padding: 12px 14px;
  background: linear-gradient(180deg, #fbfdfa, #f3f8f3);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}

body.qb-guest-premium .qb-productinfo__cap {
  margin: 0 0 5px;
  color: var(--ash);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.qb-guest-premium .qb-productinfo__text {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.5;
}

/*
 * „FELTÖLTÉS ALATT" — halkabban, mint az adat. Ez nem összetevőlista,
 * hanem ígéret; ha ugyanolyan hangsúlyos lenne, a vendég adatnak olvasná.
 */
body.qb-guest-premium .qb-productinfo__text.is-pending {
  color: var(--ash);
  font-style: italic;
}

/*
 * „NEM TARTALMAZ ALLERGÉNT" — a chipek helyén, ugyanabban a meleg sávban.
 * Nem zöld pipa: az azt sugallná, hogy ez egy minőségi jelzés. Ez csak
 * tényközlés, ugyanolyan hangon, mint maguk az allergének.
 */
body.qb-guest-premium .qb-sheet__allergen-none {
  color: #7a4f06;
  font-size: 0.78rem;
  font-weight: 650;
}

/* Allergén nélkül nincs mit sorolni: a sáv keskenyebb lehet. */
body.qb-guest-premium .qb-sheet__allergen.is-empty {
  padding: 11px 14px;
}

/*
 * A LEVONÁS MÁS SZÍN, MINT A FELÁR. Mindkettő ár, de ellentétes irányba:
 * ha ugyanúgy néznének ki, a vendégnek el kellene olvasnia a jelet ahhoz,
 * hogy tudja, drágul vagy olcsóbb lesz. A felár marad márkazöld (ez a
 * „hozzáadás" színe az egész lapon), a levonás halkabb, semlegesebb —
 * nem kiabál, mert nem is művelet, hanem következmény.
 */
body.qb-guest-premium .qb-option__price.is-minus {
  color: var(--ash);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   AZ ÁR · EGY SZABÁLY, MINDEN KÁRTYÁN
   ══════════════════════════════════════════════════════════════════════════

   Nyolc helyen van ár a vendégoldalon, és eddig nyolcféleképp nézett ki:
   hol mono, hol display betűvel, `--ash`, `--ink`, `--brand-dark` és
   `--mint-solid` színnel keverve, kártyánként más igazítással. A vendég
   végigfut a listán, és minden kártyán újra meg kell keresnie, hol az ár.

   Innentől mindenhol UGYANAZ: márkazöld, display betű, tabuláris számjegy,
   a kártya JOBB ALSÓ sarkában. Ha az ár kinézetén változtatni kell, ez az
   egy hely.

   A szabály a lap VÉGÉN áll, tehát a fenti, szétszórt beállításokat
   felülírja — azok a takarítás során ki is kerültek onnan.
   ══════════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium .qb-price,
body.qb-guest-premium .qb-showcard__price,
body.qb-guest-premium .qb-reco__price,
body.qb-guest-premium .qb-cartreco__ar,
body.qb-guest-premium .qb-searchresult__price,
body.qb-guest-premium .qb-heti__ar,
body.qb-guest-premium .qb-suggest__price,
body.qb-guest-premium .qb-option__price {
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
}

/*
 * A HELYE: a doboz aljára, jobbra. Az oszlopos kártyákon a `margin-top: auto`
 * tolja le, az `align-self` húzza jobbra; a rácsosokon ugyanez egy
 * `justify-self`. Két írásmód, egy eredmény — mert a kártyák elrendezése
 * különbözik, az áré nem.
 */
body.qb-guest-premium .qb-showcard__price,
body.qb-guest-premium .qb-reco__price,
body.qb-guest-premium .qb-cartreco__ar {
  margin-top: auto;
  align-self: flex-end;
}

body.qb-guest-premium .qb-searchresult__price,
body.qb-guest-premium .qb-option__price {
  justify-self: end;
}

/* ══════════════════════════════════════════════════════════════════════════
   A LAPOK HELYET HAGYNAK A DOKKNAK
   ══════════════════════════════════════════════════════════════════════════

   A dokk a lapok FÖLÖTT áll (`z-index: 90`), tehát a lapok aljának feljebb
   kell húzódnia — különben a dokk eltakarná az utolsó sorukat. A
   `--dock-space` mondja meg, mennyivel: a dokk magassága, a képernyő aljától
   mért távolsága és a biztonsági sáv.

   A TERMÉKLAPNAK MÁR NINCS SAJÁT ALSÓ SÁVJA: a darabszám és a „Kosárba" a
   dokk középső mezőjébe költözött (lásd a művelet-üzemmódot fentebb). Ez
   volt az egyetlen hely, ahol két műveleti sáv ült egymáson.
   ══════════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium .qb-searchsheet__panel {
  padding-bottom: var(--dock-space);
}

/* A csevegőablak a dokk FÖLÉ ül, nem alá: a kettő ugyanabban a sarokban van. */
body.qb-guest-premium .qb-chat {
  bottom: calc(var(--dock-space) + 8px);
}

@keyframes qb-chat-uj {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.16); }
  44%  { transform: scale(0.96); }
  66%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/*
 * MOZGÁSCSÖKKENTÉS. A fájl végén áll, ezért erőltetett prioritás nélkül is
 * felülírja a vendégfelület összes animációját és átmenetét.
 */
@media (prefers-reduced-motion: reduce) {
  body.qb-guest-premium *,
  body.qb-guest-premium *::before,
  body.qb-guest-premium *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   A VENDÉG ALSÓ DOKKJA — EGY SÁV, NÉGY HELY, NULLA FELIRAT
   ══════════════════════════════════════════════════════════════════════════

   EZ A DOKK EGYETLEN SZAKASZA. Korábban 118 szabály írta le, öt egymásra
   rakódott nemzedékben: mindegyik az előzőt hangolta át, és a végén a
   kaszkád mondta meg, mi látszik. Egy felirat méretét három helyen lehetett
   átírni, és a harmadik nyert. Ez a blokk mind a 118-at kiváltja — ha a
   dokkon módosítani kell, ITT az egy hely.

   NINCS BENNE SZÖVEG. Se „Kosárba", se „Leadom", se „Menü a kosárba", se
   összeg. A feliratok a jelölésben ott maradtak `.qb-srtext`-tel: a
   felolvasó felolvassa, a `menu.js` ugyanoda írja az árat, mint eddig —
   csak a KÉP tűnt el, nem a jelentés.

   ENNEK KÉT KÖVETKEZMÉNYE VAN, ÉS MIND A KETTŐ EZÉRT ÉRT MEG:

     1. A SÁV MAGASSÁGA ÁLLANDÓ. Felirat nélkül nincs, ami tördelődjön vagy
        kiszoruljon, tehát nem kell sem második sor, sem méretcsökkentés.

     2. A NÉGY HELY MINDIG KIFÉR. 375 pixelen korábban a „Kosárba" szó
        eltűnt a terméklapon — egy ikon és egy összeg maradt a gombon. Ezért
        rejtette el a régi kód hol a kezdőlapot, hol az árat: egy sorban
        valamelyiket mindig el kellett venni. Most semmit nem kell.

   NÉGY HELY, RÁCSBAN, MINDIG UGYANOTT:

     ┌──────┬──────┬──────────────────────┬──────┐
     │ 💬   │ 🏠   │ kosár  VAGY  művelet │ 🔍   │
     └──────┴──────┴──────────────────────┴──────┘
        1      2               3             4

   Az 1., 2. és 4. hely FIX SZÉLESSÉGŰ, a 3. kapja a maradékot. Ezért nem
   mozdul el a kezdőlap és a keresés attól, hogy a vendég megnyit egy
   terméket — és ezért nem mozdul el a rendeléskövetőn sem, ahol nincs
   kosár: a harmadik oszlop ilyenkor is ott van, csak üres.

   A SÁV ÜVEG. Sötétzöld, áttetsző, elmosott háttérrel: a lap alatta
   átsejlik, tehát látszik, hogy még van lejjebb tartalom. A művelet ezen
   krém kapszula — a sávban EGYETLEN kitöltött elem van, és az a teendő.
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * LÁTHATATLAN, DE OTT VAN. Nem `display: none`: az a felolvasó elől is
 * elvenné. Egy pixelre zsugorítva a szöveg a gomb felolvasott nevének a
 * része marad, és a szkript is megtalálja az elemet.
 */
body.qb-guest-premium .qb-srtext {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.qb-guest-premium .qb-guestdock {
  /* A sáv üvege és a rajta ülő művelet színei — egy helyen. */
  --dock-ink: color-mix(in srgb, var(--brand-dark) 92%, #10201a);
  --dock-fg: #fffdf8;
  /*
   * A MŰVELET SEM TÖMÖR FEHÉR. Vakító fehér téglalap a zöld üvegen két
   * különböző anyag egymáson; áttetsző krémmel a kettő EGY tárgy — a sáv
   * kivilágosodó szakasza. A 86% még bőven elég ahhoz, hogy a sötétzöld
   * rajz olvasható maradjon rajta.
   */
  --dock-act-bg: rgba(255, 253, 248, 0.86);
  --dock-act-bg-hover: rgba(255, 255, 255, 0.96);
  --dock-act-fg: #0f3a2c;
  --dock-inner-radius: calc(var(--dock-radius) - var(--dock-pad) + 2px);

  position: fixed;
  left: 50%;
  bottom: var(--dock-bottom);
  /*
   * A LAPOK FÖLÖTT. A termék- és kosárlap 70-en, a kereső 80-on áll; a dokk
   * 90-re megy, hogy nyitott lap mellett is elérhető maradjon.
   */
  z-index: 90;
  transform: translateX(-50%);

  /*
   * NÉGY OSZLOP, NEM FLEX. Flexszel a hiányzó csevegő vagy kosár
   * összehúzta volna a sort, és a kezdőlap gombja máshová került volna a
   * rendeléskövetőn, mint az étlapon. Rácsnál az üres hely IS hely.
   *
   * A HARMADIK OSZLOP `1fr`: ő nyúlik, amikor a művelet beleül. A másik
   * három fix — tehát a hüvelykujj minden lapon és minden üzemmódban
   * ugyanoda nyúl.
   */
  display: grid;
  /*
   * EGY RÁCS MINDEN ÁLLAPOTRA. Az 1., 2. és 4. oszlop FIX szélességű, a
   * harmadik kapja a maradékot — és ez így van böngészés közben is, nyitott
   * terméklapon is, fizetéskor is. Ezért nem mozdul el a csevegő, a kezdőlap
   * és a keresés SOHA: sem attól, hogy kerül valami a kosárba, sem attól,
   * hogy a vendég megnyit egy terméket.
   *
   * A harmadik oszlopban vagy a kosár ül az összeggel, vagy a lap teendője.
   */
  grid-template-columns:
    var(--dock-size) var(--dock-size) minmax(0, 1fr) var(--dock-size);
  align-items: center;
  gap: var(--dock-gap);
  /*
   * ÁLLANDÓ SZÉLESSÉG. Ez az egy sor oldja meg a „minden lapon máshogy néz
   * ki" bajának a felét: a sáv nem a tartalmától lesz szélesebb-keskenyebb.
   */
  width: min(430px, calc(100vw - 20px));
  margin: 0;
  padding: var(--dock-pad);

  /*
   * A SÁV NEM EGY ZÖLD TÉGLALAP, HANEM ÜVEG.
   *
   * Tömör festéssel a sáv „sima" volt: lapos folt a lap alján, aminek semmi
   * köze a mögötte lévő tartalomhoz. Három dolog teszi üveggé, és mind a
   * három kell:
   *
   *   · 64-78%-os festés + erős elmosás — a lap átsejlik, tehát látszik,
   *     hogy lejjebb még van tartalom, és hogy a sáv FÖLÖTTE lebeg
   *   · finom átmenet fentről lefelé — enélkül a legátlátszóbb üveg is
   *     lapos marad, mert nincs rajta fény
   *   · világos perem felül, sötét alul — ettől lesz vastagsága
   */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--dock-ink) 64%, transparent) 0%,
      color-mix(in srgb, var(--dock-ink) 78%, transparent) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--dock-radius);
  box-shadow: 0 16px 40px rgba(12, 40, 30, 0.26),
              inset 0 1px 0 rgba(255, 255, 255, 0.22),
              inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
}

/*
 * MINDEN HELY A SAJÁT OSZLOPÁT KAPJA, kimondottan. Automatikus elhelyezéssel
 * a keresés becsúszna a harmadik oszlopba ott, ahol nincs kosár — és épp az
 * veszne el, amiért a rács van.
 */
body.qb-guest-premium .qb-guestdock__chat        { grid-column: 1; }
body.qb-guest-premium .qb-guestdock__home        { grid-column: 2; }
body.qb-guest-premium .qb-guestdock .qb-cartbar  { grid-column: 3; }
body.qb-guest-premium .qb-guestdock__action      { grid-column: 3; }
body.qb-guest-premium .qb-guestdock__search      { grid-column: 4; }

/* ── A NÉGY GOMB ───────────────────────────────────────────────────────── */

/*
 * Kiírt ágak, nem `:is()`: a csoport a legspecifikusabb ágának a súlyát adná
 * mindegyiknek, és elnyomná az alatta következő egyedi szabályokat.
 */
body.qb-guest-premium .qb-guestdock__chat,
body.qb-guest-premium .qb-guestdock__home,
body.qb-guest-premium .qb-guestdock__search,
body.qb-guest-premium .qb-guestdock .qb-cartbar {
  /*
   * A `position: relative` ITT NEM DÍSZ. A `.qb-cartbar` alapszabálya
   * (`vendeg.css`) `position: fixed; right: 16px; bottom: 16px` — az a sáv
   * ELŐTTI, jobb alsó sarokban lebegő kosárgombé volt. Kioltás nélkül a
   * gomb kiszökik a rácsból, és a darabszám-jelvény a sáv fölött lebeg.
   */
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: var(--dock-size);
  height: var(--dock-size);
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--dock-inner-radius);
  color: var(--dock-fg);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease;
}

body.qb-guest-premium .qb-guestdock__chat svg,
body.qb-guest-premium .qb-guestdock__home svg,
body.qb-guest-premium .qb-guestdock__search svg,
body.qb-guest-premium .qb-guestdock .qb-cartbar__icon {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A kosárikon két kereke tömör pont — a `fill: none` azt is kioltaná. */
body.qb-guest-premium .qb-guestdock .qb-cartbar__icon circle {
  fill: currentColor;
  stroke: none;
}

body.qb-guest-premium .qb-guestdock__chat:hover,
body.qb-guest-premium .qb-guestdock__home:hover,
body.qb-guest-premium .qb-guestdock__search:hover,
body.qb-guest-premium .qb-guestdock .qb-cartbar:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Nyitott művelet mellett a kosárikon helyét a művelet foglalja el. */
body.qb-guest-premium .qb-guestdock.is-action .qb-cartbar {
  display: none;
}

/* ── A KOSÁR DARABSZÁMA ────────────────────────────────────────────────── */

/*
 * A DARABSZÁM JELVÉNY, NEM FELIRAT.
 *
 * Régebben teli kosárnál a gomb pirulává nyílt, és kiírta, hogy
 * „2 | 3 481 Ft". Két baj volt vele. Egy: a sáv szétesett tőle — a másik
 * három ikon odébb csúszott, amint a vendég betett valamit. Kettő: az összeg
 * ott nem művelet, csak könyvelés; a kosárlap fejlécében és az „Összesen"
 * sorban amúgy is ott van, méghozzá nagyban.
 *
 * Ami maradt: egy szám a sarokban. Nem olvasnivaló, hanem egy pillantás — és
 * ez az egyetlen dolog, amit a kosárról tudni kell, mielőtt megnyitja.
 */
/*
 * A BUROK A JELVÉNY VONATKOZTATÁSI PONTJA. Enélkül a szám a GOMBHOZ
 * igazodna — az viszont teli kosárnál széles mező, tehát a jelvény a
 * kosártól messze, a mező sarkába kerülne.
 */
body.qb-guest-premium .qb-guestdock .qb-cartbar__mark {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

/*
 * A JELVÉNY MÉRETE A RAJZHOZ IGAZODIK, nem a mezőhöz: 18 pixel, vékony
 * gyűrűvel. A gyűrű a sáv tintájából van — ettől válik el a kosártól akkor
 * is, ha épp a rajz vonalára esik.
 *
 * EGY SZÁM VAN A SÁVBAN, ÉS EGY ÖSSZEG, DE NEM EGYMÁS MELLETT. Sorba
 * állítva („2  1 980 Ft") két szám követte egymást, és a szem nem tudta,
 * melyik mit jelent. A sarokra ültetve az egyik a KOSÁRRÓL szól, a másik a
 * PÉNZRŐL — a helyük mondja meg, nem a sorrendjük.
 */
body.qb-guest-premium .qb-guestdock .qb-cartbar__db {
  position: absolute;
  top: -7px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--dock-act-bg);
  border: 2px solid var(--dock-ink);
  border-radius: 9px;
  color: var(--brand-dark);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
}

/* Üres kosárnál a nulla nem hír: a puszta ikon többet mond nála. */
body.qb-guest-premium .qb-guestdock:not(.is-cartfull) .qb-cartbar__db {
  display: none;
}

/* ── Olvasatlan üzenet a csevegőgombon ─────────────────────────────────── */

/*
 * HANG NINCS, ÉS EZ NEM MULASZTÁS. A böngészők felhasználói interakció
 * nélkül nem engednek hangot lejátszani, a `navigator.vibrate()` pedig iOS
 * Safariban egyáltalán nem létezik. Ami minden telefonon működik: egy szám
 * és egy rövid mozgás — és a mozgás CSAK AKKOR fut, ha a szám nőtt
 * (`is-new`, a `menu.js` teszi rá). Egy folyamatosan pulzáló pötty két perc
 * alatt háttérzajjá válik, és pont akkor nem veszik észre.
 */
body.qb-guest-premium .qb-guestdock__badge {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  background: var(--guest-bronze);
  border: 2px solid var(--dock-ink);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

body.qb-guest-premium .qb-guestdock__chat.has-unread {
  background: color-mix(in srgb, var(--guest-bronze) 20%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--guest-bronze) 55%, transparent);
}

body.qb-guest-premium .qb-guestdock__chat.is-new {
  animation: qb-chat-uj 620ms cubic-bezier(.2, .8, .25, 1);
}

/* ── A HARMADIK HELY MŰVELET-ÜZEMMÓDBAN ────────────────────────────────── */

/*
 * A `hidden` a JELÖLÉSBEN is ott van (`data-dock-action`), tehát zárt
 * állapotban a felolvasó sem találja meg. A `display` és a `hidden` együtt
 * mozog — a `menu.js` és a `vendegdokk.js` mindkettőt egyszerre állítja.
 */
body.qb-guest-premium .qb-guestdock__action {
  display: none;
}

body.qb-guest-premium .qb-guestdock.is-action .qb-guestdock__action {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  height: var(--dock-size);
  animation: qb-dock-action-in 0.2s ease-out both;
}

/*
 * A BELÉPÉS CSAK HALVÁNYULÁS — ELMOZDULÁS NINCS BENNE, ÉS EZ NEM ÍZLÉS.
 *
 * Itt előbb egy `translateY(3px)` is volt. A fizetőlapon a
 * `statusz.js` másodpercenként frissít, és minden frissítés újraindította
 * ezt az animációt — a mező így gyakorlatilag ÁLLANDÓAN a kezdőképkockán
 * állt, vagyis HÁROM PIXELLEL LEJJEBB. A krém kapszula ettől kilógott a
 * zöld sáv alól.
 *
 * Mérve: a kezdőlap gombja 751–795 között állt, a művelet-mező 754–798
 * között. Ugyanabban a sorban, három pixel csúszással.
 *
 * Egy mozgó animáció, ami újraindulhat, MINDIG el tudja csúsztatni azt,
 * amin ül. A halványulás nem: annak a maradéka legfeljebb átlátszóság,
 * nem elmozdulás.
 */
@keyframes qb-dock-action-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/*
 * A FIZETÉSI LAP ALSÓ SÁVJA IDE KÖLTÖZIK, de a saját kerete nem jön vele: a
 * `display: contents` eltünteti a dobozt, és a benne lévő gomb lesz a
 * művelet közvetlen eleme. Így a `fizetes.js` továbbra is a sávot
 * kapcsolgatja (`el.foot`), a `.is-hidden` pedig `!important`-tal üt.
 *
 * MIÉRT KÖLTÖZTETI A SZKRIPT? Mert a fizetési lap KÖZÖS a pincérével
 * (`admin/pincer.php`), ahol nincs dokk. Ha a jelölésből vennénk ki a
 * gombot, a pincér lapjáról tűnne el.
 */
body.qb-guest-premium .qb-guestdock__action > .qb-sheet__foot {
  display: contents;
}

/* Nyitott fizetőlapon a lap saját művelete ül a helyén, nem a kosáré. */
body.qb-guest-premium .qb-guestdock.is-overlay-action [data-dock-default] {
  display: none;
}

/*
 * A DOKKBA KÖLTÖZÖTT GOMB FELIRATA IS ELHALLGAT. A fizetési lap alsó sávja
 * a PINCÉR lapján is fut, ahol nincs dokk — ott a felirat a helyén marad.
 */
body.qb-guest-premium .qb-guestdock__action .qb-btn__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * EGY KAPSZULA, NEM KÉT DOBOZ.
 *
 * A terméklapon a léptető és a „kosárba" jel, a rendeléskövetőn az
 * utánrendelés és a fizetés ül egymás mellett. Két külön gombként két
 * világos folt versengett, és a szem nem tudta, melyik a teendő. Egy
 * kapszulán belül a másodlagos vezérlő SZAKASZ: halvány festés,
 * hajszálvonal, közös sarok.
 */
body.qb-guest-premium .qb-dockproduct,
body.qb-guest-premium .qb-dockstatus {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--dock-act-bg);
  border-radius: var(--dock-inner-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 2px 6px rgba(12, 40, 30, 0.18);
  /*
   * SAJÁT ELMOSÁS. A sáv elmosása a sáv MÖGÖTT lévő lapra vonatkozik; ami a
   * kapszula alatt átdereng, az ettől még éles maradna — egy termékkép
   * körvonala átütne a gombon. Ez a réteg azt is elmossa.
   */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/*
 * A MŰVELETI GOMB. Egyedül (kosárlap) ő maga a kapszula; kapszulán belül
 * (terméklap, fizetés) a kapszula jobb kétharmada. Mindkét esetben KRÉM a
 * sötét üvegen: a hangsúlyt a kontraszt adja, nem egy második zöld.
 */
body.qb-guest-premium .qb-guestdock__action .qb-btn--wide,
body.qb-guest-premium .qb-guestdock__action .qb-dockaction--pay {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  /* A rajz és az összeg közti hézag; összeg nélkül nincs mit elválasztani. */
  gap: 9px;
  min-width: 0;
  /*
   * A `min-height: 0` NEM FELESLEGES SOR — ez tartja a gombot a sávban.
   *
   * A `.qb-btn--wide` alapból 56 pixel magas (`style.css`): egy lap aljára
   * szánt, teljes szélességű gomb mérete. A dokk helye viszont 46
   * (`--dock-size`), és a `height: 100%` ezt a 46-ot jelenti — csakhogy a
   * `min-height` ERŐSEBB nála. A gomb tehát 56 maradt, és tíz pixellel
   * KILÓGOTT a zöld sáv alól.
   *
   * A terméklapon ez nem látszott, mert ott a kapszula (`.qb-dockproduct`)
   * `overflow: hidden`-nel levágta; a fizetőgomb viszont közvetlenül a
   * művelet-mezőben ül, ott nincs mi levágja. Ezért a magasságot kell
   * rendbe tenni, nem a takarást.
   */
  min-height: 0;
  height: 100%;
  padding: 0 12px;
  background: var(--dock-act-bg);
  border: 0;
  border-radius: var(--dock-inner-radius);
  color: var(--dock-act-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 2px 6px rgba(12, 40, 30, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-decoration: none;
  cursor: pointer;
}

/* A kapszulán belül a gombnak már nincs saját alakja és árnyéka. */
body.qb-guest-premium .qb-dockproduct .qb-btn--wide,
body.qb-guest-premium .qb-dockstatus .qb-dockaction--pay {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  /* A kapszula már elmosott — a benne ülő gomb ne mossa el még egyszer. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/*
 * A MŰVELET RAJZA NAGYOBB A NAVIGÁCIÓÉNÁL. Egy pillantással el kell dőlnie,
 * melyik a teendő és melyik a tájékozódás — felirat híján ezt a méret és a
 * kitöltött háttér mondja meg, semmi más.
 */
body.qb-guest-premium .qb-guestdock__action .qb-btn--wide > svg,
body.qb-guest-premium .qb-guestdock__action .qb-dockaction--pay > svg {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.qb-guest-premium .qb-guestdock__action .qb-btn--wide > svg circle {
  fill: currentColor;
  stroke: none;
}

/*
 * AZ ÖSSZEG A MŰVELETI GOMBON.
 *
 * Két helyen látszik: a leadógombon („ennyit hagyok jóvá") és a fizetésén
 * („ennyi az asztal számlája"). Egyik sem felirat — a rajz mondja meg, mit
 * tesz a gomb, a szám azt, mennyiről van szó. Pont ilyenkor tűnik el a
 * kosár melletti összeg a sávról (a művelet ül a helyén), tehát enélkül a
 * leadás lenne az egyetlen pillanat, amikor a vendég nem látja az összeget.
 *
 * MONOSPACE, RÖGZÍTETT SZÁMSZÉLESSÉGGEL — ugyanaz a ritmus, mint a kosár
 * melletti összegnél: a „990 Ft" és a „12 000 Ft" nem ugráltatja a gombot.
 */
body.qb-guest-premium .qb-guestdock__action [data-cart-submit-total],
body.qb-guest-premium .qb-guestdock__action [data-grand-total],
body.qb-guest-premium .qb-guestdock__action [data-pay-send-total] {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Üres összeget ne hagyjon hézagot maga előtt. */
body.qb-guest-premium .qb-guestdock__action [data-cart-submit-total]:empty,
body.qb-guest-premium .qb-guestdock__action [data-grand-total]:empty,
body.qb-guest-premium .qb-guestdock__action [data-pay-send-total]:empty {
  display: none;
}

/* A leadógomb kitölti a helyét: a sáv szélessége már egyszer eldőlt. */
body.qb-guest-premium .qb-guestdock__action .qb-dockcart {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

/* ── A kapszula másodlagos szakasza: léptető és utánrendelés ───────────── */

/* A `display` NEM közös: a léptető rács (három hasáb), az utánrendelés
   egyetlen középre zárt jel. Külön-külön mondjuk ki, lentebb. */
body.qb-guest-premium .qb-dockproduct .qb-stepper,
body.qb-guest-premium .qb-dockstatus .qb-dockaction--more {
  flex: 0 0 auto;
  height: 100%;
  padding: 0;
  background: rgba(15, 58, 44, 0.06);
  border: 0;
  border-radius: 0;
  box-shadow: inset -1px 0 0 rgba(15, 58, 44, 0.14);
  color: var(--dock-act-fg);
}

body.qb-guest-premium .qb-dockstatus .qb-dockaction--more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
}

body.qb-guest-premium .qb-dockstatus .qb-dockaction__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * A LÉPTETŐ HÁROM HASÁBJA. A „−" és a „+" nem felirat, hanem jel: ez az a
 * két karakter, amit minden nyelven ugyanúgy olvasnak. A közepén a szám —
 * az sem szöveg, hanem az, amit a vendég épp beállít.
 */
body.qb-guest-premium .qb-dockproduct .qb-stepper {
  display: grid;
  grid-template-columns: 36px 26px 36px;
  align-items: center;
  justify-content: center;
}

body.qb-guest-premium .qb-dockproduct .qb-stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dock-act-fg);
  font-family: var(--font-body);
  font-size: 1.34rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

body.qb-guest-premium .qb-dockproduct .qb-stepper span {
  display: grid;
  place-items: center;
  color: var(--dock-act-fg);
  font-family: var(--font-mono);
  font-size: 0.94rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Rámutatás, fókusz, letiltás ───────────────────────────────────────── */

body.qb-guest-premium .qb-guestdock__action .qb-btn--wide:hover,
body.qb-guest-premium .qb-guestdock__action .qb-dockaction--pay:hover {
  background: var(--dock-act-bg-hover);
}

/* Kapszulán belül a rámutatás a KAPSZULÁT világosítja, nem a gombot. */
body.qb-guest-premium .qb-dockproduct:hover,
body.qb-guest-premium .qb-dockstatus:hover {
  background: var(--dock-act-bg-hover);
}

body.qb-guest-premium .qb-dockproduct .qb-stepper button:hover {
  background: rgba(15, 58, 44, 0.1);
}

body.qb-guest-premium .qb-guestdock__chat:focus-visible,
body.qb-guest-premium .qb-guestdock__home:focus-visible,
body.qb-guest-premium .qb-guestdock__search:focus-visible,
body.qb-guest-premium .qb-guestdock .qb-cartbar:focus-visible,
body.qb-guest-premium .qb-guestdock__action .qb-btn--wide:focus-visible,
body.qb-guest-premium .qb-guestdock__action .qb-dockaction--pay:focus-visible,
body.qb-guest-premium .qb-guestdock__action .qb-dockaction--more:focus-visible {
  outline: 2px solid var(--dock-act-bg);
  outline-offset: 2px;
}

/*
 * A LETILTOTT MŰVELET HALKABB, DE NEM TŰNIK EL: megmondja, hogy van, és
 * hogy most nem lehet rákoppintani. Körvonalas, mert a tömör krém azt
 * ígérné, hogy működik.
 *
 * FELIRAT NÉLKÜL EZ TÖBBET SZÁMÍT, MINT EDDIG: a „miért nem lehet" választ
 * nem a sáv adja meg, hanem a lap — a terméklapon a kitöltetlen kötelező
 * csoport, a kosárlapon a hiányzó asztal-token. A sávnak annyi a dolga,
 * hogy ne úgy nézzen ki, mintha működne.
 */
body.qb-guest-premium .qb-guestdock__action .qb-btn--wide[disabled] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 253, 248, 0.42);
  color: rgba(255, 253, 248, 0.6);
  cursor: default;
}

body.qb-guest-premium .qb-dockproduct:has(.qb-btn--wide[disabled]) {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 253, 248, 0.42);
}

body.qb-guest-premium .qb-dockproduct:has(.qb-btn--wide[disabled]) .qb-stepper {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset -1px 0 0 rgba(255, 253, 248, 0.3);
}

body.qb-guest-premium .qb-dockproduct:has(.qb-btn--wide[disabled]) .qb-stepper button,
body.qb-guest-premium .qb-dockproduct:has(.qb-btn--wide[disabled]) .qb-stepper span {
  color: var(--dock-fg);
}

/*
 * A REJTÉS A LEGVÉGÉN ÁLL, ÉS EZ NEM RENDETLENSÉG.
 *
 * A `[hidden]` egy attribútum (0,1,0), a művelet gombját megrajzoló szabály
 * viszont `body.qb-guest-premium .qb-guestdock__action .qb-btn--wide`
 * (0,3,1) — az erősebb, és `display: flex`-et ad. Ha a rejtés fentebb
 * állna, a kosárlap leadógombja a TERMÉKLAPON IS látszana, a „kosárba" jel
 * mellett. Pontosan ez történt, mielőtt ide került.
 *
 * A súlyt tehát ki kell egyenlíteni, és a sorrendnek is a rejtés javára
 * kell dőlnie — ezért mindkettő.
 */
body.qb-guest-premium .qb-guestdock__action .qb-dockproduct[hidden],
body.qb-guest-premium .qb-guestdock__action .qb-dockstatus[hidden],
body.qb-guest-premium .qb-guestdock__action .qb-dockcart[hidden],
body.qb-guest-premium .qb-guestdock__action .qb-btn--wide[hidden] {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   A KOSÁR MINT INFORMÁCIÓ — a harmadik hely böngészés közben
   ══════════════════════════════════════════════════════════════════════════

   A rajz megmondja, MI EZ; az összeg megmondja, HOL TART. A kettő együtt az
   egyetlen dolog, amit a vendégnek az étlap görgetése közben tudnia kell a
   kosaráról — anélkül, hogy megnyitná.

   NEM ÚGY NÉZ KI, MINT A MŰVELET, ÉS EZ SZÁNDÉKOS. A teendő a sávban
   MINDIG tömör krém kapszula (lásd a `.qb-dockproduct` és a `.qb-dockcart`
   szabályait). Ez itt halk, áttetsző mező a sötét üvegen: ugyanaz a hely,
   de a szem egy pillanat alatt megkülönbözteti a kettőt. Ha az összeg is
   krém pirulán ülne, két teendő versengene egymással — pontosan az volt a
   régi sáv baja.
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * TELI KOSÁRNÁL KITÖLTI AZ OSZLOPÁT. Nem nő ki belőle: az oszlop szélessége
 * fix, tehát a másik három hely akkor sem mozdul, amikor „12 400 Ft" kerül
 * ide „890 Ft" helyett.
 */
body.qb-guest-premium .qb-guestdock.is-cartfull .qb-cartbar {
  /*
   * A HÉZAG A JELVÉNYNEK IS KELL. A szám a rajz jobb felső sarkából KILÓG
   * — nyolc pixeles hézagnál ráült a „3 380 Ft" első számjegyére. Tizenhat
   * pixel pont annyi, hogy a jelvény és az összeg ne érjen össze.
   */
  gap: 16px;
  width: 100%;
  padding: 0 12px 0 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/*
 * AZ ÖSSZEG MONOSPACE-SZEL, RÖGZÍTETT SZÁMSZÉLESSÉGGEL. Így a „990 Ft" és a
 * „12 000 Ft" ugyanolyan ritmusú, és az összeg nem ugrál a szemnek, amikor
 * a vendég egymás után tesz be három terméket.
 */
body.qb-guest-premium .qb-guestdock .qb-cartbar__total {
  min-width: 0;
  overflow: hidden;
  color: var(--dock-fg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * ÜRES KOSÁRNÁL NINCS ÖSSZEG. A „0 Ft" nem hír, csak zaj — a puszta rajz
 * többet mond nála. A gomb ilyenkor visszaszűkül korongra, és középre áll az
 * oszlopában.
 */
body.qb-guest-premium .qb-guestdock:not(.is-cartfull) .qb-cartbar__total {
  display: none;
}

/*
 * A DARABSZÁM TELI KOSÁRNÁL IS LÁTSZIK — A RAJZ SARKÁBAN.
 *
 * Egy ideig elhagytam: úgy gondoltam, az összeg mindent elmond. Nem mond el
 * mindent. „3 670 Ft" nem árulja el, hogy egy tétel van-e benne vagy négy —
 * pedig a vendég épp azt ellenőrzi, hogy amit az előbb hozzáadott, tényleg
 * bekerült-e. A szám a rajzon ül, nem a felirat mellett: nem tol el semmit,
 * és egy pillantás.
 */
/*
 * TELI KOSÁRNÁL A MEZŐ VILÁGOSABB, mint a sáv — ott a jelvény gyűrűje is a
 * mező színét veszi fel, különben egy sötét karika ülne a világos foltban.
 */
body.qb-guest-premium .qb-guestdock.is-cartfull .qb-cartbar__db {
  border-color: color-mix(in srgb, var(--dock-ink) 86%, #fff);
}

/*
 * SZŰK TELEFON — a 320 pixel esete.
 *
 * A rendeléskövetőn négy dolog osztozik a sávon: a három navigációs korong,
 * az utánrendelés jele és a fizetésé AZ ÖSSZEGGEL. 320 pixelen ebből az
 * összeg csonkolódott („6 00…"), ami rosszabb, mint ha ott sem lenne — egy
 * félbevágott ár félretájékoztat.
 *
 * A megoldás NEM az összeg elhagyása, hanem hogy a körülötte lévő hézagok
 * adják oda a helyet: kisebb belső margó, keskenyebb másodlagos szakasz,
 * egy hajszállal kisebb rajz. A navigációból semmit nem veszünk el.
 */
@media (max-width: 380px) {
  body.qb-guest-premium .qb-guestdock__action .qb-btn--wide,
  body.qb-guest-premium .qb-guestdock__action .qb-dockaction--pay {
    gap: 6px;
    padding: 0 8px;
  }

  body.qb-guest-premium .qb-guestdock__action .qb-btn--wide > svg,
  body.qb-guest-premium .qb-guestdock__action .qb-dockaction--pay > svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
  }

  body.qb-guest-premium .qb-dockstatus .qb-dockaction--more {
    width: 40px;
  }

  body.qb-guest-premium .qb-dockproduct .qb-stepper {
    grid-template-columns: 31px 22px 31px;
  }

  body.qb-guest-premium .qb-guestdock__action [data-cart-submit-total],
  body.qb-guest-premium .qb-guestdock__action [data-grand-total],
  body.qb-guest-premium .qb-guestdock__action [data-pay-send-total] {
    font-size: 0.78rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   AZ AJÁNLÓ — a harmadik hely, amíg a kosár üres
   ══════════════════════════════════════════════════════════════════════════

   Böngészés közben a sáv közepén egy magányos kosárikon állt, két oldalán
   tenyérnyi ürességgel. Ez a lap LEGSZEM ELŐTT LÉVŐ pontja — ott van a
   hüvelykujj —, és semmit nem mondott.

   UGYANAZ A KRÉM KAPSZULA, mint a terméklapon. Nem új forma: a sáv közepe
   mindig egy kitöltött tárgy, akármelyik lapon áll a vendég. Ettől nincs
   olyan állapot, amiben a sáv félig üresen lebeg.

   A KÉP, A NÉV ÉS AZ ÁR — ennyi fér el, és ennyi kell. Koppintásra megnyílik
   a termék lapja; a `data-product` horgot a `menu.js` amúgy is kezeli
   (`openProduct()`), egyetlen új eseménykötés sem kellett hozzá.

   AMINT KERÜL VALAMI A KOSÁRBA, ELTŰNIK. A vendégnek a saját kosarának az
   állása fontosabb hír, mint bármilyen ajánlat — a `menu.js` a
   `renderCartBar()`-ban rejti el, ugyanabból a darabszámból, amiből a
   kosár pirulát tölti.
   ══════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium .qb-guestdock .qb-docktip {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: var(--dock-size);
  margin: 0;
  padding: 0 11px 0 6px;
  background: var(--dock-act-bg);
  border: 0;
  border-radius: var(--dock-inner-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 2px 6px rgba(12, 40, 30, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--dock-act-fg);
  text-align: left;
  cursor: pointer;
}

body.qb-guest-premium .qb-guestdock .qb-docktip__img {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  object-fit: cover;
  background: #e7eee9;
  border-radius: 9px;
}

body.qb-guest-premium .qb-guestdock .qb-docktip__name {
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 750;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.qb-guest-premium .qb-guestdock .qb-docktip__price {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

body.qb-guest-premium .qb-guestdock .qb-docktip:hover {
  background: var(--dock-act-bg-hover);
}

body.qb-guest-premium .qb-guestdock .qb-docktip:focus-visible {
  outline: 2px solid var(--dock-act-bg);
  outline-offset: 2px;
}

/*
 * AZ AJÁNLÓ ÉS A KOSÁR EGY HELYEN ÁL, TEHÁT EGYSZERRE CSAK EGY LÁTSZIK.
 *
 *   üres kosár   → az ajánló  (a kosárikon félreáll)
 *   teli kosár   → a kosár az összeggel (a `menu.js` rejti az ajánlót)
 *   nyitott lap  → a művelet  (mindkettő félreáll)
 *
 * A `[hidden]` a legvégén és a teljes súllyal: a fenti szabály `display:
 * flex`-et ad (0,4,0), amit egy csupasz attribútum nem tudna legyőzni.
 */
/*
 * A KOSÁR CSAK AKKOR ÁLL FÉLRE, HA TÉNYLEG VAN MI HELYETTE.
 *
 * A `:has()` nélkül ez a szabály feltétel nélkül elrejtette a kosarat — és
 * ahol nem volt ajánló (kategórialap, illetve olyan hely, ahol egyetlen
 * termék sincs kiemelve), ott a sáv közepe ÜRESEN MARADT. Élesben derült
 * ki, egy képernyőképen: három ikon és egy tenyérnyi semmi.
 *
 * Így a feltétel az, ami: „van egy LÁTHATÓ ajánló". Ha nincs, a kosár marad
 * a helyén, ahogy mindig is volt.
 */
body.qb-guest-premium .qb-guestdock:not(.is-cartfull):not(.is-action):has(.qb-docktip:not([hidden])) .qb-cartbar {
  display: none;
}

body.qb-guest-premium .qb-guestdock.is-action .qb-docktip,
body.qb-guest-premium .qb-guestdock .qb-docktip[hidden] {
  display: none;
}

/*
 * A TERMÉKLAP KAPSZULÁJA SEM TÁTONG. Felirat nélkül a „kosárba" jel körül
 * ugyanaz a tenyérnyi üresség maradt; az ár egyszerre tölti ki és mondja
 * meg, mit hagy jóvá a vendég — ugyanaz, mint a „Rendelek" és a „Fizetnék"
 * gombon.
 */
body.qb-guest-premium .qb-guestdock__action [data-add-total] {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.qb-guest-premium .qb-guestdock__action [data-add-total]:empty {
  display: none;
}

@media (max-width: 380px) {
  body.qb-guest-premium .qb-guestdock__action [data-add-total] {
    font-size: 0.78rem;
  }

  /* Szűk telefonon szorosabb a hézag — a kép és az ár marad. */
  body.qb-guest-premium .qb-guestdock .qb-docktip {
    gap: 7px;
    padding: 0 9px 0 5px;
  }

  body.qb-guest-premium .qb-guestdock .qb-docktip__name {
    font-size: 0.8rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   A KEZDŐLAP ÖSSZEHÚZÁSA — csempe a kártya helyett
   ══════════════════════════════════════════════════════════════════════════

   A kezdőlap 3 277 pixel magas volt: huszonnégy kategória, egyenként 205
   pixeles kártyán. A vendég négy képernyőnyit görgetett, mire a végére ért —
   és közben ugyanazt látta huszonnégyszer.

   A HELY NEM A FOTÓTÓL FOGYOTT EL, HANEM A FOTÓ ALATTI FEHÉR SÁVTÓL. Abban
   állt a név, a darabszám és egy sarokikon; együtt a kártya magasságának a
   fele. A fotó a fele helyen ugyanakkora maradhat, ha a név RÁKERÜL.

   AMI KIKERÜLT, ÉS MIÉRT:

     · a „6 termék" — a vendég nem azért választ kategóriát, mert hány tétel
       van benne; a szám csak akkor lenne hír, ha nulla lenne, de olyan
       kategória nem jelenik meg
     · a sarokikon — a fénykép már elmondta, mi ez; ugyanannak a dolognak a
       második rajza
     · a „Válassz a kedvenceink közül" — a kirakat képei mondják el

   Eredmény: 2 185 pixel, és egy képernyőre hat kategória helyett tizenkettő
   fér. Egyetlen kategória nem tűnt el, egyetlen fotó nem lett kisebb.
   ══════════════════════════════════════════════════════════════════════ */

/*
 * A CSEMPE. A fotó kitölti, a név a saját sötét fátylán ül rajta. A
 * `--foto` ág a feltétel: fénykép nélküli kategória marad a régi, ikonos
 * kártya — ott nincs mire ráírni a nevet.
 */
body.qb-guest-premium .qb-catcard--foto {
  position: relative;
  min-height: 92px;
  border: 0;
  border-radius: 13px;
  box-shadow: 0 2px 10px rgba(20, 47, 37, 0.1);
}

body.qb-guest-premium .qb-catcard--foto .qb-catcard__media {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: inherit;
}

body.qb-guest-premium .qb-catcard--foto .qb-catcard__foto {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

/*
 * A FÁTYOL ALULRÓL INDUL, ÉS ÁTLÁTSZÓAN ÉR VÉGET. Tömör sávval a csempe
 * megint kétrészes lenne — a lényeg épp az, hogy egy tárgy legyen.
 */
/*
 * A FÁTYOL HALK. Elsőre 82%-ig sötétedett, és ettől a csempe alsó harmada
 * szinte tömör sötét sáv lett — a fényképnek épp az a része tűnt el, ami a
 * legtöbbet mondja róla (a tányér, a pohár alja). A név olvashatósága nem a
 * fátyol SÖTÉTSÉGÉN múlik, hanem a kontraszton: halkabb fátyol és
 * határozottabb szövegárnyék együtt ugyanolyan olvasható, de a fotó megmarad.
 */
body.qb-guest-premium .qb-catcard--foto .qb-catcard__text {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  min-height: 0;
  margin: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(
    180deg,
    rgba(11, 33, 25, 0) 0%,
    rgba(11, 33, 25, 0.28) 46%,
    rgba(11, 33, 25, 0.58) 100%);
  border-radius: 0 0 13px 13px;
}

body.qb-guest-premium .qb-catcard--foto .qb-catcard__name {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 750;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
               0 0 14px rgba(0, 0, 0, 0.45);
}

body.qb-guest-premium .qb-catcard--foto .qb-catcard__count,
body.qb-guest-premium .qb-catcard--foto .qb-catcard__cornericon,
body.qb-guest-premium .qb-catcard--foto .qb-catcard__icon {
  display: none;
}

body.qb-guest-premium .qb-catgrid {
  gap: 9px;
}

/*
 * A KIRAKAT EGY GÖRGETHETŐ SOR, nem két óriáskártya.
 *
 * Két kártya 490 pixelt vett el, és a vendégnek át kellett görgetnie
 * rajtuk, hogy a kategóriákhoz jusson. Egy sorban ugyanannyi helyen nem
 * kettő fér el, hanem ahány kiemelt tétel van — és a görgetés VÍZSZINTES,
 * tehát nem áll az útjába annak, aki lefelé tart.
 */
body.qb-guest-premium .qb-showcase--featured .qb-showcase__list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

body.qb-guest-premium .qb-showcase--featured .qb-showcase__list::-webkit-scrollbar {
  display: none;
}

body.qb-guest-premium .qb-showcase--featured .qb-showcase__item {
  flex: 0 0 47%;
  scroll-snap-align: start;
}

body.qb-guest-premium .qb-showcase--featured .qb-showcard__img {
  aspect-ratio: 4 / 3;
  min-height: 0;
  height: auto;
}

/*
 * A CÍMEK HALKABBAK. „Kiemelt termékeink" és „Kategóriák" — két nagy címsor
 * azért, hogy elmondja, amit a képek úgyis elmondanak. Szemöldöksorként
 * megmarad a tagolás, de nem visz el egy képernyőnyi helyet.
 */
body.qb-guest-premium .qb-showcase__title,
body.qb-guest-premium .qb-catgrid__title {
  margin-bottom: 6px;
  color: #6d7d74;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/*
 * CSAK A KIRAKAT VEZETŐ SORA KERÜL KI. A heti menüé a NAP NEVÉT mondja
 * („Péntek"), az információ — azt nem hallgattatjuk el.
 */
body.qb-guest-premium .qb-showcase--featured .qb-showcase__lead {
  display: none;
}

/* A fejléc is szorosabb: a lap tetején minden pixel a tartalomtól vett el. */
body.qb-guest-premium .qb-header {
  padding: 9px 11px;
}

body.qb-guest-premium .qb-header__logo {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
}

body.qb-guest-premium .qb-header__meta {
  margin-top: 4px;
}

/*
 * A FIZETŐGOMB NEM HÚZÓDIK ÖSSZE A KÖZEPÉN.
 *
 * A dokkba költözött fizetőgombon két apró elem állt — egy kártyaikon és
 * egy összeg —, és mindkettő középre húzódott, két oldalán tenyérnyi
 * ürességgel. Nem a gomb volt túl széles: nem volt benne elég mondanivaló.
 *
 * Most három szakasza van, és kitölti a helyét: balra a rajz, középen a
 * VÁLASZTOTT FIZETÉSI MÓD („Készpénz"), jobbra az összeg. A mód nem dísz —
 * az a másik dolog, amit a vendég ezzel a koppintással jóváhagy.
 */
body.qb-guest-premium .qb-guestdock__action [data-pay-send] {
  justify-content: flex-start;
  gap: 10px;
}

body.qb-guest-premium .qb-guestdock__action .qb-btn__method {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.qb-guest-premium .qb-guestdock__action .qb-btn__method:empty {
  display: none;
}

/*
 * AZ ÖSSZEG A JOBB SZÉLRE KERÜL, ÉS SOHA NEM CSONKUL.
 *
 * A `flex: 0 0 auto` nem óvatoskodás: 320 pixelen a „SZÉP-kártya" mellett
 * az ár „1 85…"-ra vágódott. Egy félbevágott ÁR nem szépséghiba, hanem
 * félretájékoztatás — a mód nevét el lehet hármaspontozni, az összeget nem.
 */
body.qb-guest-premium .qb-guestdock__action [data-pay-send] [data-pay-send-total] {
  flex: 0 0 auto;
  margin-left: auto;
}

/*
 * SZŰK TELEFONON A MÓD NEVE ELMARAD, NEM CSONKUL.
 *
 * 320 pixelen a „SZÉP-kártya" negyven pixelt kapott, és „SZ…"-re vágódott.
 * Egy kétbetűs csonk nem információ, csak zaj a gombon — a rajz és az
 * összeg viszont ott a helyén, és azon a szélességen ketten ki is töltik.
 *
 * A HATÁR 340, NEM 380. Először 380-at írtam ide, és ezzel a 375 pixeles
 * iPhone-okról — vagyis a telefonok feléről — eltűnt a szó, pedig ott
 * bőven kifér. A küszöb attól a szélességtől szól, ahol tényleg nincs
 * hely, nem attól, ahol a fejlesztő „kicsinek" érzi a kijelzőt.
 */
@media (max-width: 340px) {
  body.qb-guest-premium .qb-guestdock__action .qb-btn__method {
    display: none;
  }

  body.qb-guest-premium .qb-guestdock__action [data-pay-send] {
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   A BÚCSÚKÉPERNYŐ — a köszönet a kártyán, a teendő a sávban
   ══════════════════════════════════════════════════════════════════════════

   A fizetés utáni képernyő NÉGYSZER mondta ugyanazt: „A számla rendezve",
   „Köszönjük, Gábor, hogy nálunk jártál!", „Mindent elrendeztünk. Szép
   napot, Gábor! Visszavárunk." — a vendég nevét kétszer, a búcsút háromszor.
   Közben a lap egyetlen teendője egy gombon ült a kártya alján, a lebegő sáv
   közepe pedig üresen tátongott.

   A CÍMSOR MOST EGY SORBA FÉR („Köszönjük, Gábor!"), a búcsú egy sor, a
   teendő pedig lement a sávba — oda, ahol a hüvelykujj van.

   A SÁVBAN KÉT DOLOG ÁLLHAT, ÉS PONTOSAN EGY LÁTSZIK:

     · az ÉRTÉKELÉS három válasza, ha a hely bekapcsolta;
     · a VISSZAÚT az étlapra, ha nincs értékelés — vagy ha a vendég már
       válaszolt (`qb-rating-done`).

   Mindkettő a `body.qb-is-paid` alatt jelenik meg; azt a `fizetes.js` teszi
   ki ugyanabban a pillanatban, amikor a búcsúkártyát is megmutatja.
   ══════════════════════════════════════════════════════════════════════ */

/* ── A kártya ─────────────────────────────────────────────────────────── */

body.qb-guest-premium .qb-farewell {
  padding: 30px 24px 26px;
  border: 1px solid var(--hairline);
  border-top: 0;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(20, 47, 37, 0.09);
}

/*
 * A PIPA KÖR LETT, LÁGY PEREMMEL. A négyzet sarka ugyanazt a formát vitte,
 * mint a gombok és a kártyák — egy visszaigazoló jelnek viszont pont az a
 * dolga, hogy ne úgy nézzen ki, mint amire koppintani lehet.
 */
body.qb-guest-premium .qb-farewell__mark {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  background: linear-gradient(145deg, #e9f6ef, #d3ecdf);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(0, 133, 104, 0.06);
}

body.qb-guest-premium .qb-farewell__mark svg {
  width: 25px;
  height: 25px;
}

body.qb-guest-premium .qb-farewell__badge {
  color: #8aa096;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
}

body.qb-guest-premium .qb-farewell__thanks {
  margin-top: 8px;
  font-size: clamp(1.5rem, 6.4vw, 1.9rem);
  letter-spacing: -0.03em;
}

body.qb-guest-premium .qb-farewell__bye {
  margin-top: 8px;
  font-size: 0.9rem;
}

/*
 * A NAGY GOMB LEKERÜL A KÁRTYÁRÓL. A visszaút a sávban van — vagy az
 * étlap-kapszulán, vagy (értékelés közben) a kezdőlap ikonján, ami a
 * rendeléskövetőn amúgy is az étlapra visz.
 */
body.qb-guest-premium .qb-farewell > .qb-btn {
  display: none;
}

/*
 * A HÁROM VÁLASZ A KÁRTYÁN ELMARAD, mert a sávba költözött. A KÉRDÉS és a
 * „most nem" MARAD: a kérdés mondja meg, mire válaszol a vendég odalent,
 * a kilépés pedig nem vehető el egy űrlapból.
 */
body.qb-guest-premium.qb-rating-on:has(.qb-dockvote) .qb-rating__choices {
  display: none;
}

/* ── A sáv két lehetséges tartalma ────────────────────────────────────── */

/*
 * REJTVE INDUL MIND A KETTŐ. A rendeléskövetőn a rendelés még fut: ott a
 * sáv közepén az utánrendelés és a fizetés áll. Ezek csak a számla
 * rendezése után lépnek a helyükre.
 */
body.qb-guest-premium .qb-guestdock .qb-dockvote,
body.qb-guest-premium .qb-guestdock .qb-dockback {
  display: none;
  grid-column: 3;
}

/*
 * A HÁROM VÁLASZ CSAK AKKOR, HA TÉNYLEG KÉRDEZÜNK.
 *
 * A `qb-rating-on` osztályt a `statusz.js` teszi ki, UGYANABBÓL a válaszból,
 * amiből a kártyán a kérdést („Milyen volt nálunk?") megmutatja. Enélkül
 * három néma jel állt a sáv közepén olyankor is, amikor a szerver nem kért
 * értékelést — koppintásra nem történt volna semmi. Ez rosszabb, mint az
 * üres hely, amit orvosolni akartunk.
 */
body.qb-guest-premium.qb-is-paid.qb-rating-on:not(.qb-rating-done)
  .qb-guestdock:not(.is-action) .qb-dockvote {
  display: grid;
}

/*
 * A VISSZAÚT AKKOR JÖN, HA NINCS ÉRTÉKELÉS — vagy ha már megvolt. Így a
 * sáv közepe a búcsúképernyőn SOHA nem marad üresen.
 */
body.qb-guest-premium.qb-is-paid:not(.qb-rating-on) .qb-guestdock:not(.is-action) .qb-dockback,
body.qb-guest-premium.qb-is-paid.qb-rating-done .qb-guestdock:not(.is-action) .qb-dockback {
  display: flex;
}

/* ── Az értékelés a sávban ────────────────────────────────────────────── */

body.qb-guest-premium .qb-guestdock .qb-dockvote {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  min-width: 0;
  height: var(--dock-size);
  overflow: hidden;
  background: var(--dock-act-bg);
  border-radius: var(--dock-inner-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 2px 6px rgba(12, 40, 30, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.qb-guest-premium .qb-guestdock .qb-dockvote button {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: inset -1px 0 0 rgba(15, 58, 44, 0.14);
  color: var(--dock-act-fg);
  font: 700 1.2rem/1 var(--font-body);
  cursor: pointer;
}

body.qb-guest-premium .qb-guestdock .qb-dockvote button:last-child {
  box-shadow: none;
}

/* A legjobb válasz szíve meleg színt kap — az egyetlen szín a sávban. */
body.qb-guest-premium .qb-guestdock .qb-dockvote button.is-best {
  color: #b0432f;
}

body.qb-guest-premium .qb-guestdock .qb-dockvote button:hover {
  background: rgba(15, 58, 44, 0.07);
}

body.qb-guest-premium .qb-guestdock .qb-dockvote button:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: -3px;
}

body.qb-guest-premium .qb-guestdock .qb-dockvote button[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* ── A visszaút az étlapra ────────────────────────────────────────────── */

body.qb-guest-premium .qb-guestdock .qb-dockback {
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  height: var(--dock-size);
  padding: 0 14px;
  background: var(--dock-act-bg);
  border: 0;
  border-radius: var(--dock-inner-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 2px 6px rgba(12, 40, 30, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--dock-act-fg);
  font: 750 0.9rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
}

body.qb-guest-premium .qb-guestdock .qb-dockback svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.qb-guest-premium .qb-guestdock .qb-dockback:hover {
  background: var(--dock-act-bg-hover);
}

body.qb-guest-premium .qb-guestdock .qb-dockback:focus-visible {
  outline: 2px solid var(--dock-act-bg);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   A KOSÁR VISSZASZÓL — látható visszajelzés a hozzáadásra
   ══════════════════════════════════════════════════════════════════════════

   A darabszám és az összeg eddig is AZONNAL frissült, csak épp senki nem
   vette észre: két szám csendben átíródott a képernyő alján, miközben a
   vendég a kártyára nézett, amire koppintott. A változás megtörtént, de nem
   történt MEG NEKI.

   Egy rövid mozdulat ezt orvosolja. Nem dísz: ez mondja meg, hogy a
   koppintás célba ért — és pont ezért rövid, 420 ezredmásodperc. Ami
   ennél tovább tart, az már nem visszajelzés, hanem várakozás.
   ══════════════════════════════════════════════════════════════════════ */

@keyframes qb-cart-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.07); }
  70%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

@keyframes qb-cartdb-pop {
  0%   { transform: scale(1); }
  34%  { transform: scale(1.38); }
  72%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

body.qb-guest-premium .qb-guestdock .qb-cartbar.is-bumped {
  animation: qb-cart-pop 420ms cubic-bezier(.2, .8, .25, 1);
}

/*
 * A SZÁM NAGYOBBAT UGRIK, MINT A GOMB. Az a szám változott meg — a
 * mozdulat oda vezesse a szemet, ne csak általánosságban a sávhoz.
 */
body.qb-guest-premium .qb-guestdock .qb-cartbar.is-bumped .qb-cartbar__db {
  animation: qb-cartdb-pop 420ms cubic-bezier(.2, .8, .25, 1);
}

/*
 * AZ ÖSSZEG NEM UGRÁL, CSAK FELVILLAN. Egy mozgó szám olvashatatlan, és
 * pont azt kellene elolvasni. A halvány felvillanás jelzi, hogy változott.
 */
@keyframes qb-carttotal-flash {
  0%   { color: #fffdf8; }
  30%  { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.55); }
  100% { color: var(--dock-fg); text-shadow: none; }
}

body.qb-guest-premium .qb-guestdock .qb-cartbar.is-bumped .qb-cartbar__total {
  animation: qb-carttotal-flash 520ms ease-out;
}


/*
 * ══════════════════════════════════════════════════════════════════════════
 * VENDÉGOLDALI FEJLÉCFOTÓ · Start és Pro
 * ══════════════════════════════════════════════════════════════════════════
 *
 * A LEGUTOLSÓ RÉTEGBEN, mert a fejléc szabályai négy lapon oszlanak szét
 * (vendegut → dizajn → reteg → kartyas). Magasabb borító, finom sötétítés
 * felül és alul, nyelvválasztó a képen, középre rendezett infósor, és a
 * zárva-sáv ugyanolyan széles, mint a fejléc.
 */
body.qb-guest .qb-header--cover .qb-header__cover { height: 212px; margin-bottom: 58px; }
body.qb-guest .qb-header--cover .qb-header__cover::after {
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 38%, transparent 62%, rgba(0, 0, 0, .18));
}
body.qb-guest .qb-header--cover .qb-header__cover-logo { z-index: 2; width: 96px; height: 96px; bottom: -46px; }
body.qb-guest .qb-header__cover-monogram {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--brand-dark, #1f2a24);
  color: #fff;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .02em;
}
body.qb-guest .qb-langs.qb-langs--cover {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, .9);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
body.qb-guest.qb-guest-premium .qb-header--cover .qb-title { font-size: clamp(1.5rem, 3.4vw, 2rem); }
body.qb-guest .qb-header--cover .qb-header__meta {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
body.qb-guest .qb-header--cover .qb-header__loyal { margin-left: 0; }
body.qb-guest .qb-header--cover .qb-badge,
body.qb-guest .qb-header--cover .qb-header__orders,
body.qb-guest .qb-hourchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: #fafaf6;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
body.qb-guest .qb-hourchip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint, #2f7d5f); }
body.qb-guest .qb-hourchip--zarva { border-color: #f1d9ad; background: #fdf3e1; color: #8a5307; }
body.qb-guest .qb-hourchip--zarva .qb-hourchip__dot { background: #d98a1c; }

body.qb-guest .qb-orderpause.qb-orderpause--sav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(calc(100% - 28px), 1040px);
  min-height: 0;
  margin: 0 auto 14px;
  padding: 12px 14px;
  border: 1px solid #f1d9ad;
  border-radius: 16px;
  background: #fdf6ea;
  box-shadow: none;
}
body.qb-guest .qb-orderpause--sav::after,
body.qb-guest .qb-orderpause--sav::before { display: none; }
body.qb-guest .qb-orderpause--sav .qb-orderpause__dot { flex: none; width: 10px; height: 10px; }
body.qb-guest .qb-orderpause--sav .qb-orderpause__copy { display: block; flex: 1; min-width: 0; padding: 0; }
body.qb-guest .qb-orderpause--sav .qb-orderpause__title { margin: 0; font-size: .98rem; line-height: 1.25; }
body.qb-guest .qb-orderpause--sav .qb-orderpause__lead { margin: 2px 0 0; font-size: .82rem; }
body.qb-guest .qb-orderpause--sav .qb-btn { flex: none; min-height: 38px; }

@media (min-width: 761px) {
  body.qb-guest .qb-header--cover .qb-header__cover { height: 250px; margin-bottom: 66px; }
  body.qb-guest .qb-header--cover .qb-header__cover-logo { width: 112px; height: 112px; bottom: -54px; }
  body.qb-guest .qb-header__cover-monogram { font-size: 2.2rem; }
}

@media (max-width: 480px) {
  body.qb-guest .qb-orderpause.qb-orderpause--sav { flex-wrap: wrap; }
  body.qb-guest .qb-orderpause--sav .qb-btn { margin-left: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAPI ÉS HETI MENÜ · végleges vendégoldali kártyarendszer
   ══════════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium .qb-heti {
  position: relative;
  margin: 20px var(--main-pad-x, 20px) 32px;
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 2%, rgba(0, 133, 104, 0.13), transparent 28%),
    linear-gradient(145deg, rgba(255, 254, 250, 0.98), rgba(237, 247, 242, 0.92));
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--hairline));
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(22, 72, 54, 0.08);
}

body.qb-guest-premium .qb-heti__szekciofej {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 0 2px;
}

body.qb-guest-premium .qb-heti .qb-showcase__title {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: none;
}

body.qb-guest-premium .qb-heti .qb-showcase__lead {
  margin: 4px 0 0;
  padding: 0;
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

body.qb-guest-premium .qb-heti__szekcioikon {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  border: 1px solid rgba(0, 104, 80, 0.55);
  border-radius: 15px;
  color: #fff;
  box-shadow: 0 9px 20px rgba(0, 104, 80, 0.18);
}

body.qb-guest-premium .qb-heti__szekcioikon-svg {
  width: 24px;
  height: 24px;
}

body.qb-guest-premium .qb-heti__lista {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
  padding: 0;
}

body.qb-guest-premium .qb-heti__kartya {
  gap: 16px;
  min-height: 0;
  padding: clamp(17px, 2.4vw, 22px);
  background: rgba(255, 255, 252, 0.96);
  border-color: rgba(0, 104, 80, 0.15);
  border-radius: 17px;
  box-shadow: 0 8px 24px rgba(22, 72, 54, 0.07);
}

body.qb-guest-premium .qb-heti__kartya--ma {
  border-left: 4px solid var(--brand);
}

body.qb-guest-premium .qb-heti__ghost {
  right: -24px;
  bottom: -30px;
  width: 132px;
  height: 132px;
  color: var(--brand);
  opacity: 0.045;
}

body.qb-guest-premium .qb-heti__head {
  display: flex;
  align-items: center;
  gap: 13px;
}

body.qb-guest-premium .qb-heti__ikonkeret {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--hairline));
  border-radius: 13px;
  color: var(--brand-dark);
}

body.qb-guest-premium .qb-heti__ikon {
  width: 23px;
  height: 23px;
  color: currentColor;
}

body.qb-guest-premium .qb-heti__fejszoveg {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.qb-guest-premium .qb-heti .qb-heti__nev {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.03rem, 2.2vw, 1.18rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

body.qb-guest-premium .qb-heti__ablak {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--ash);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

body.qb-guest-premium .qb-heti__metaikon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.qb-guest-premium .qb-heti__fogasok {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: #5f7067;
  font-size: 0.92rem;
  line-height: 1.35;
  list-style: none;
}

body.qb-guest-premium .qb-heti__fogasok li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: baseline;
  gap: 9px;
  margin: 0;
}

body.qb-guest-premium .qb-heti__fogasok li::before {
  width: 5px;
  height: 5px;
  margin-top: 0.2em;
  background: color-mix(in srgb, var(--brand) 68%, #fff);
  border-radius: 50%;
  content: "";
}

body.qb-guest-premium .qb-heti__fogas {
  color: inherit;
  font-weight: 550;
  text-decoration-color: color-mix(in srgb, var(--brand) 28%, transparent);
  text-underline-offset: 4px;
}

body.qb-guest-premium .qb-heti__buy {
  position: relative;
  z-index: 2;
  min-height: 42px;
  padding-top: 13px;
  border-top-color: rgba(0, 104, 80, 0.12);
}

body.qb-guest-premium .qb-heti__ar {
  margin-right: auto;
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.015em;
}

/* A napi menü művelete teljes értékű, feliratos CTA; nem sarokba vágott ikon. */
body.qb-guest-premium .qb-heti__kartya .qb-heti__kosar {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  border: 1px solid var(--brand-dark);
  border-radius: 12px;
  color: #fff;
  font: 750 0.82rem/1 var(--font-body);
  box-shadow: 0 7px 16px rgba(0, 104, 80, 0.17);
  backdrop-filter: none;
}

body.qb-guest-premium .qb-heti__kartya .qb-heti__kosar:hover,
body.qb-guest-premium .qb-heti__kartya .qb-heti__kosar:focus-visible {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

body.qb-guest-premium .qb-heti__kartya .qb-heti__kosar svg {
  order: -1;
  width: 17px;
  height: 17px;
}

body.qb-guest-premium .qb-heti__tobbi {
  margin: 18px 0 0;
  padding-top: 2px;
  border-top: 1px solid rgba(0, 104, 80, 0.12);
  font-size: 0.92rem;
}

body.qb-guest-premium .qb-heti__tobbi > summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 3px;
  color: var(--ink);
  font-weight: 750;
  list-style: none;
}

body.qb-guest-premium .qb-heti__tobbi > summary::-webkit-details-marker {
  display: none;
}

body.qb-guest-premium .qb-heti__tobbi-jel {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  color: var(--brand-dark);
}

body.qb-guest-premium .qb-heti__nyil {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ash);
  border-bottom: 2px solid var(--ash);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms ease;
}

body.qb-guest-premium .qb-heti__tobbi[open] .qb-heti__nyil {
  transform: rotate(225deg) translate(-1px, -1px);
}

body.qb-guest-premium .qb-heti__napok {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 8px;
}

body.qb-guest-premium .qb-heti__nap {
  min-width: 0;
}

body.qb-guest-premium .qb-heti__napnev {
  margin: 0 0 8px;
  padding: 0 2px;
  color: var(--brand-dark);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

body.qb-guest-premium .qb-heti__lista--jovo {
  grid-template-columns: minmax(0, 1fr);
}

body.qb-guest-premium .qb-heti__kartya--jovo {
  gap: 13px;
  height: 100%;
  padding: 16px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(22, 72, 54, 0.055);
}

body.qb-guest-premium .qb-heti__kartya--jovo .qb-heti__ikonkeret {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

body.qb-guest-premium .qb-heti__kartya--jovo .qb-heti__ikon {
  width: 20px;
  height: 20px;
}

body.qb-guest-premium .qb-heti__kartya--jovo .qb-heti__buy {
  min-height: 0;
  margin-top: auto;
}

@media (max-width: 760px) {
  body.qb-guest-premium .qb-heti {
    margin: 14px 10px 26px;
    padding: 17px 15px 16px;
    border-radius: 18px;
  }

  body.qb-guest-premium .qb-heti__szekciofej {
    margin-bottom: 15px;
  }

  body.qb-guest-premium .qb-heti__szekcioikon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  body.qb-guest-premium .qb-heti__lista,
  body.qb-guest-premium .qb-heti__napok {
    grid-template-columns: minmax(0, 1fr);
  }

  body.qb-guest-premium .qb-heti__kartya {
    padding: 17px;
    border-radius: 15px;
  }

  body.qb-guest-premium .qb-heti__napok {
    gap: 17px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  body.qb-guest-premium .qb-heti__napok {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}