/* Kávézói étlap — /menu/ (F fázis, 2026-09-22).
   A kiemelt bemutató elrendezése a tulajdonos által megadott Figma-referencia szerkezetét követi
   (bal oldali szöveg + középen korongon álló kivágott pohár + jobb oldali ízsín), a Hollyweed
   arculatában és saját adatokkal. Üveg/„lámpa" receptek: 21st.dev 15025 és 3206, vanillára fordítva. */

.hw-main--menu{--mn-gut:clamp(16px,4vw,44px);--mn-top:clamp(76px,9.5vh,100px);
 --mn-cream:#F3EFE4;--mn-card:#FFFCF4;--mn-ink:#17231B;--mn-green:#00643C;
 background:var(--mn-cream);padding-bottom:0}
.hw-main--menu section,.hw-main--menu nav,.hw-main--menu header{box-sizing:border-box}
.hw-main--menu .cpr{font-size:.5em;vertical-align:super;letter-spacing:0}
.scr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Könnyű fejléc ────────────────────────────────────────────────── */
.mnt{padding:clamp(22px,4vw,44px) var(--mn-gut) clamp(14px,2vw,22px)}
/* ⚠️⚠️ NE HASZNÁLJ `.mnc` OSZTÁLYT ÚJ ELEMRE! A `.mnc` az étlap alján lévő
   SÖTÉTZÖLD ZÁRÓ SÁV (kávézólista) — `background:radial-gradient(#16482f…)` és
   `grid-template-columns:1.2fr 1fr`. Egy új kategóriasávot `.mnc` néven
   megépítve az örökölte a sötét hátteret és a kéthasábos rácsot: az egész sáv
   szétesett. A kategóriasáv a már működő `.mnn` komponenst használja. */

/* Szöveg balra, a két művelet jobbra EGYMÁS ALATT, a címmel egy vonalban. */
.mnt__in{display:flex;align-items:flex-end;justify-content:space-between;
 gap:clamp(20px,3vw,48px);max-width:1200px;margin:0 auto}
.mnt__tx{min-width:0}
.mnt__b{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:9px}
.mnt__b .mnb{justify-content:center;white-space:nowrap}
@media(max-width:860px){
 .mnt__in{flex-direction:column;align-items:stretch}
 .mnt__b{flex-direction:row;flex-wrap:wrap}
}
.mnt__e{display:inline-flex;align-items:center;gap:7px;font-size:10.2px;font-weight:700;letter-spacing:.16em;
 text-transform:uppercase;color:var(--mn-green)}
.mnt__e::before{content:'';width:6px;height:6px;border-radius:50%;background:#2FBF7E;box-shadow:0 0 0 3px rgba(47,191,126,.2)}
.mnt__h{margin:8px 0 0;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:clamp(28px,5vw,54px);line-height:.98;letter-spacing:-.015em;color:var(--mn-ink)}
.mnt__p{margin:8px 0 0;max-width:58ch;font-size:13.6px;line-height:1.55;color:var(--muted,#57625a)}
.mnt__m{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.mnt__m li{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:999px;font-size:11.4px;
 color:var(--muted,#57625a);background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(38,51,44,.09)}
.mnt__m b{font-weight:700;color:var(--mn-ink);font-variant-numeric:tabular-nums}

/* ── Kiemelt WeedShake-bemutató ───────────────────────────────────── */
.mws{padding:0 var(--mn-gut) clamp(16px,2.4vw,28px)}
.mws__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr) clamp(96px,9vw,142px) 16px;
 gap:clamp(16px,2.6vw,40px);align-items:center;max-width:1200px;margin:0 auto;
 padding:clamp(20px,3vw,44px);border-radius:clamp(22px,3vw,38px);overflow:hidden;
 background:var(--mn-card);box-shadow:0 1px 0 rgba(38,51,44,.05),0 40px 70px -56px rgba(19,32,25,.6),inset 0 0 0 1px rgba(38,51,44,.06)}
.mws__in::before{content:'';position:absolute;right:-14%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;
 pointer-events:none;opacity:.14;transition:background .5s;
 background:radial-gradient(circle,var(--a1) 0%,transparent 66%)}

.mws__l{position:relative;z-index:1;min-width:0}
/* Feliratozás a FŐOLDALI WeedShake-blokk mintájára (2026-09-23): állandó „WeedShake©"
 kicker az akcentusszínben + szezonális jelvény, ami CSAK ott látszik, ahol az ízhez
 tényleg tartozik szezonfelirat (a két szezonális íznél). */
.mws__hd{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.mws__k{display:inline-block;font-family:var(--fut,'Oswald',sans-serif);font-weight:500;
 text-transform:uppercase;font-size:clamp(13px,1.24vw,17px);letter-spacing:.3em;line-height:1;
 color:var(--a1,#0E4A31);transition:color .5s ease}
.mws__k .cpr{font-size:.48em;letter-spacing:0;vertical-align:.9em;margin-left:.16em;opacity:.9}
.mws__e{display:inline-flex;align-items:center;gap:7px;font-size:10.4px;font-weight:700;
 letter-spacing:.15em;text-transform:uppercase;color:#fff;padding:5px 12px 5px 10px;
 border-radius:999px;background:var(--a1,#0E4A31);
 box-shadow:0 8px 20px -12px var(--a1,#0E4A31);transition:background .5s ease,opacity .3s}
.mws__e::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;
 animation:mwspulse 2.2s ease-in-out infinite}
@keyframes mwspulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.mws__e.is-off{display:none}
.mws__d{margin:10px 0 0;font-size:clamp(13px,1.34vw,16.5px);font-weight:500;line-height:1.25;
 letter-spacing:.01em;color:var(--a1,#0E4A31);transition:color .5s ease;min-height:1.25em}
/* Nyílpár a cím fölött — a referencia szerint karikában */
.mws__nav{display:flex;gap:10px;margin:16px 0 0}
.mws__ar{display:grid;place-items:center;width:clamp(38px,3.4vw,46px);aspect-ratio:1;border-radius:50%;
 border:1.6px solid rgba(38,51,44,.28);background:transparent;color:var(--mn-ink);cursor:pointer;
 transition:background .22s,border-color .22s,color .22s,transform .22s}
.mws__ar svg{width:18px;height:18px}
/* Tételszámláló a nyilak mellett — csak nagy kategóriánál, a jelzőcsík-sor helyett. */
.mws__no{align-self:center;font-style:normal;font-size:12.4px;font-weight:700;letter-spacing:.02em;
 color:var(--muted,#57625a);font-variant-numeric:tabular-nums;white-space:nowrap}
.mws__no[hidden]{display:none}
.mws__vi[hidden]{display:none}
.mws__ar:hover{background:var(--mn-ink);border-color:var(--mn-ink);color:#fff;transform:translateY(-1px)}
.mws__ar:active{transform:scale(.94)}
.mnb.is-off{display:none}
.mws__h{margin:12px 0 0;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:clamp(28px,4.4vw,60px);line-height:.94;letter-spacing:-.02em;color:var(--mn-ink);text-wrap:balance}
.mws__pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:14px 0 0}
.mws__pr small{display:block;width:100%;margin:6px 0 0;font-size:11.4px;line-height:1.4;
 letter-spacing:.02em;color:var(--muted,#57625a);opacity:.9}
.mws__pr b{font-family:var(--fut,'Oswald',sans-serif);font-weight:700;font-size:clamp(20px,2.6vw,30px);
 color:var(--mn-green);font-variant-numeric:tabular-nums}
.mws__pr span{font-size:11.4px;color:var(--muted,#57625a)}
.mws__c{margin:12px 0 0;max-width:46ch;font-size:13.4px;line-height:1.6;color:var(--muted,#57625a);min-height:3.2em}
/* A `min-height` azért van, hogy íz-váltáskor ne ugráljon a blokk. Kategóriaváltáskor
   viszont van, amihez nincs ilyen szöveg (a boltis termékeknek csak rövid leírásuk van) —
   ott a fenntartott hely üres lyukként látszana. */
.mws__c:empty,.mws__d:empty{min-height:0;margin:0}
.mws__pr small:empty{display:none}
.mws__k .hw-sup{font-size:.48em;letter-spacing:0;vertical-align:.9em;margin-left:.16em;opacity:.9}

/* „Kérd menüben" — a két kávézói menü + a választható sütemények */
.mws__mn{margin:22px 0 0}
.mws__sl{display:block;font-size:10.4px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mn-ink);opacity:.62}
.mws__mt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:11px 0 0}
.mws__mb{display:block;text-align:left;padding:11px 13px;border:0;border-radius:15px;cursor:pointer;
 background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px rgba(38,51,44,.12);
 transition:box-shadow .22s,background .22s,transform .22s}
.mws__mb b{display:block;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:13.4px;letter-spacing:.01em;color:var(--mn-ink)}
.mws__mb small{display:block;margin-top:4px;font-size:10.8px;line-height:1.35;color:var(--muted,#57625a)}
.mws__mb:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px rgba(0,100,60,.35)}
.mws__mb.on{background:#fff;box-shadow:inset 0 0 0 2px var(--mn-green),0 12px 22px -18px rgba(19,32,25,.9)}
.mws__mb.off{opacity:.5;cursor:not-allowed}
.mws__mb.off:hover{transform:none;box-shadow:inset 0 0 0 1.5px rgba(38,51,44,.12)}
.mws__mno{margin:9px 0 0;font-size:10.8px;line-height:1.45;color:var(--muted,#57625a)}
.mws__mno .cpr{font-size:.7em}

.mws__pick{margin:16px 0 0}
.mws__pick[hidden]{display:none}
.mws__pl{display:block;font-size:11px;font-weight:600;color:var(--mn-ink);opacity:.7}
.mws__pick ul{display:flex;gap:clamp(9px,1.2vw,15px);margin:9px 0 0;padding:2px 2px 6px;list-style:none;
 overflow-x:auto;scrollbar-width:none;
 -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 42px),transparent 100%);
 mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 42px),transparent 100%)}
.mws__pick ul::-webkit-scrollbar{display:none}
.mws__ch{flex:0 0 auto;width:clamp(62px,6.4vw,82px);padding:0;border:0;background:none;cursor:pointer;
 text-align:center;color:var(--mn-ink)}
.mws__si{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
 background:#F2EFE4;box-shadow:inset 0 0 0 1px rgba(38,51,44,.09);
 transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s}
.mws__si img{width:100%;height:100%;object-fit:cover;display:block}
.mws__ch:hover .mws__si{transform:translateY(-3px);box-shadow:inset 0 0 0 2px rgba(0,100,60,.4),0 14px 22px -16px rgba(19,32,25,.8)}
.mws__ch[aria-pressed="true"] .mws__si{box-shadow:inset 0 0 0 3px var(--mn-green),0 14px 22px -16px rgba(19,32,25,.85)}
.mws__ch[aria-pressed="true"] .mws__si::after{content:'';position:absolute;right:4%;bottom:4%;width:34%;height:34%;
 border-radius:50%;background:var(--mn-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/62% no-repeat;
 box-shadow:0 0 0 2px #fff}
.mws__ch b{display:block;margin-top:7px;font-size:10.4px;font-weight:600;line-height:1.24;letter-spacing:-.01em}

.mws__b{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.mnb{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;
 font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.05em;
 transition:background .22s,box-shadow .22s,transform .22s,color .22s}
.mnb svg{width:16px;height:16px;transition:transform .25s}
.mnb:hover svg{transform:translateX(3px)}
.mnb--p{color:#fff;background:linear-gradient(150deg,#0E4A31,#00764A);
 box-shadow:0 16px 28px -16px rgba(0,100,60,.85),inset 0 1px 0 rgba(255,255,255,.22)}
.mnb--p:hover{background:linear-gradient(150deg,#13593B,#028A57);transform:translateY(-1px)}
.mnb--g{color:var(--mn-ink);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(38,51,44,.18)}
.mnb--g:hover{background:rgba(38,51,44,.05);transform:translateY(-1px)}

/* Közép: NÉGYZETES színpad — a korong és a pohár ugyanarra a középpontra van igazítva,
   így a rácsméretektől függetlenül soha nem csúszhatnak el egymáshoz képest. */
.mws__mid{position:relative;z-index:1;width:100%;max-width:clamp(280px,34vw,500px);margin:0 auto;aspect-ratio:1/1}
.mws__disc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:88%;aspect-ratio:1;border-radius:50%;transition:background .5s ease;
 background:radial-gradient(120% 120% at 30% 16%,color-mix(in srgb,var(--a2) 62%,#fff) 0%,var(--a1) 56%,color-mix(in srgb,var(--deep) 52%,var(--a1)) 100%);
 box-shadow:0 44px 64px -46px rgba(19,32,25,.75)}
/* A kivágott PNG-k két méretarányban készültek (1:1 és 16:9), eltérő üres kerettel — ezért NEM a
   képet, hanem a POHARAT hozzuk egy méretre: a magasságot a `--hf` (1/befoglaló-magasság) szorozza.
   `max-width` szándékosan nincs: a 16:9-es képeknél a kereten úgyis csak átlátszó sáv lóg ki. */
.mws__cup{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;width:auto;max-width:none;object-fit:contain;
 height:calc(86% * var(--hf,1.07));
 filter:drop-shadow(0 26px 34px rgba(19,32,25,.34));
 transform:translate(-50%,-50%);
 animation:mwsbob 7s ease-in-out infinite;
 transition:opacity .22s ease}
/* ⚠️ A lebegés az ÖNÁLLÓ `translate` tulajdonságon fut, pixelben — a középre igazító
   `transform:translate(-50%,…)` STATIKUS marad. Korábban a `transform` animálódott a
   `-50%`-kal együtt: a Safari (Mac és iPhone) a futó animáció százalékait az indulás
   pillanatában rögzíti, és képcserekor (1:1 ↔ 16:9-es PNG) NEM számolja újra — a pohár
   ezért „találomra" oldalra csúszott a korongjáról (2026-09-23, 9. kör). */
@keyframes mwsbob{
 0%,100%{translate:0 0}
 50%{translate:0 -10px}
}
.mws__mid.sw .mws__cup,.mws__cup.gone{opacity:0}
/* ── Boltis termékfotó a korongon (`is-round`) ────────────────────────
   A kávézói italokhoz kivágott, átlátszó hátterű pohárképünk van — az lebeg a
   korong fölött. A többi kategória (CBD olajok, virágok, kekszek…) fotói viszont
   NÉGYZETES, jellemzően fehér hátterű boltis képek: lebegtetve fehér négyzetként
   ülnének a színes korongon. Ezért ott a fotó KÖR alakú kivágást kap, és a korong
   csak keretként/árnyékként látszik körülötte. A váltást a hw-m.js teszi az
   adat `cut` jelzője alapján — nem CSS találgatás. */
.mws__mid.is-round .mws__cup{width:88%;height:88%;max-width:88%;object-fit:cover;border-radius:50%;
 animation:none;filter:none;box-shadow:0 34px 54px -40px rgba(19,32,25,.8)}
.mws__tw.is-round img{width:100%;height:100%;max-width:100%;object-fit:cover;border-radius:50%;
 transform:translate(-50%,-50%);animation:none;filter:none}
/* A kiemelt pohár kattintható felülete. A KÉP maga `pointer-events:none` (a 16:9-es PNG
 átlátszó sávja különben elnyelné a kattintást a bal oszlopról), ezért a linket a koronggal
 azonos geometriájú, kör alakú réteg adja. Nincs termék → `is-off`, nem kattintható. */
.mws__cl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
 display:block;width:88%;aspect-ratio:1;border-radius:50%;cursor:pointer;
 -webkit-tap-highlight-color:transparent}
.mws__cl::after{content:'';position:absolute;inset:0;border-radius:50%;
 box-shadow:inset 0 0 0 0 rgba(255,255,255,0);transition:box-shadow .3s ease}
.mws__cl:hover::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.mws__cl:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* FLIP-csere: a repülő másolatok */
.mws__fly{position:fixed;z-index:80;pointer-events:none;object-fit:contain;
 filter:drop-shadow(0 26px 34px rgba(19,32,25,.34));will-change:transform}
.mws__fly.is-round{border-radius:50%;object-fit:cover}
.mws__dots{position:absolute;left:50%;bottom:clamp(6px,1.4vw,18px);transform:translateX(-50%);z-index:2;
 display:flex;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.2);
 -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.mws__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
 background:rgba(255,255,255,.55);transition:transform .25s,background .25s,width .25s}
.mws__dots button:hover{background:#fff}
.mws__dots button.on{width:20px;border-radius:999px;background:#fff}

/* Jobb szélső, függőleges ízjelző — a referencia szaggatott sávja szerint */
.mws__vi{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:7px;align-self:stretch}
.mws__vi button{width:3px;height:14px;padding:0;border:0;border-radius:999px;cursor:pointer;
 background:rgba(38,51,44,.22);
 transition:height .34s cubic-bezier(.34,1.3,.64,1),background .28s}
.mws__vi button:hover{background:rgba(38,51,44,.45)}
.mws__vi button.on{height:46px;background:var(--a1,#0E4A31)}

/* Jobb oldali ízsín */
.mws__r{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(16px,2.4vw,30px);justify-content:center}
.mws__t{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer}
/* A gombon belül külön, `inset:0` színpad: a <button> nem megbízható hivatkozási doboz a
   százalékos magassághoz, ezért a poharat ehhez a sima dobozhoz méretezzük — ugyanaz a
   recept, mint a középső színpadnál. */
.mws__tw{position:absolute;inset:0;display:block}
.mws__td{position:absolute;inset:0;border-radius:50%;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
 background:radial-gradient(120% 120% at 32% 18%,color-mix(in srgb,var(--ta) 30%,#fff) 0%,var(--ta) 62%,color-mix(in srgb,var(--ta) 70%,#000) 100%);
 box-shadow:0 18px 28px -22px rgba(19,32,25,.9)}
.mws__tw img{position:absolute;left:50%;top:50%;height:calc(112% * var(--hf,1.07));width:auto;max-width:none;
 object-fit:contain;filter:drop-shadow(0 12px 16px rgba(19,32,25,.35));
 transform:translate(-50%,-52%);
 animation:mwsbob2 var(--fd,6.5s) ease-in-out infinite;animation-delay:var(--fdl,0s);
 transition:opacity .2s}
/* ugyanaz a javítás, mint a `mwsbob`-nál: csak a pixeles `translate` animálódik */
@keyframes mwsbob2{
 0%,100%{translate:0 0}
 50%{translate:0 -7px}
}
.mws__tw img.gone{opacity:0}
.mws__t .mws__tw{transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.mws__t.in .mws__tw{animation:mwsin .42s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--in-d,0s)}
@keyframes mwsin{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
.mws__t em{position:absolute;right:-6%;bottom:2%;z-index:2;padding:5px 10px;border-radius:999px;background:#fff;
 font-style:normal;font-size:10.6px;font-weight:700;white-space:nowrap;color:var(--mn-ink);font-variant-numeric:tabular-nums;
 box-shadow:0 8px 16px -10px rgba(19,32,25,.8),inset 0 0 0 1px rgba(38,51,44,.07)}
.mws__t:hover .mws__td{transform:scale(1.08);box-shadow:0 24px 32px -22px rgba(19,32,25,.95)}
/* 2026-09-23, tulajdonosi döntés: a jobb oldali kis képekről (sín) az ÁRCÍMKE LEKERÜL —
   nem kérte, egy korábbi munkamenetből maradt. (A mobilos „további termékek" sor árai
   a `.mws__ai em`-ben vannak, azok maradnak.) */
.mws__t em{display:none}
.mws__t:focus-visible .mws__td{outline:2px solid var(--mn-green);outline-offset:3px}

/* ── Kategóriacsempék (bento) — a referencia „Shop by category" rácsa ─────────────── */
.mnb2{padding:clamp(14px,2.4vw,30px) var(--mn-gut) clamp(6px,1vw,14px)}
.mnb2__in{display:grid;gap:clamp(8px,1.1vw,14px);max-width:1200px;margin:0 auto;
 grid-template-columns:repeat(3,minmax(0,1fr));
 grid-template-areas:'szezon szezon shake' 'szezon szezon kavek' 'tea suti nasi'}
.mnb2__t--szezon{grid-area:szezon}
.mnb2__t--shake{grid-area:shake}
.mnb2__t--kavek{grid-area:kavek}
.mnb2__t--tea{grid-area:tea}
.mnb2__t--suti{grid-area:suti}
.mnb2__t--nasi{grid-area:nasi}
.mnb2__t--egyeb{display:none}
.mnb2__t{position:relative;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;
 min-height:clamp(104px,11vw,148px);padding:clamp(12px,1.5vw,20px);border-radius:clamp(16px,2vw,26px);
 color:var(--i,#22301F);background:var(--c,#E3D3BE);isolation:isolate;
 box-shadow:inset 0 0 0 1px rgba(38,51,44,.06);
 transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.mnb2__t::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.55;
 background:radial-gradient(120% 120% at 18% 10%,rgba(255,255,255,.75),transparent 62%)}
.mnb2__t:hover{transform:translateY(-3px);box-shadow:0 22px 34px -24px rgba(19,32,25,.75),inset 0 0 0 1.5px rgba(19,32,25,.2)}
.mnb2__t.on{box-shadow:inset 0 0 0 2.5px var(--mn-green),0 18px 30px -24px rgba(19,32,25,.8)}
.mnb2__n{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.62;
 font-variant-numeric:tabular-nums}
.mnb2__t b{margin-top:5px;max-width:11ch;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;
 text-transform:uppercase;font-size:clamp(14px,1.7vw,21px);line-height:1.02;letter-spacing:-.005em}
.mnb2__t--szezon b{max-width:10ch;font-size:clamp(20px,2.8vw,34px)}
.mnb2__im{position:absolute;right:-6%;bottom:-8%;width:52%;aspect-ratio:1;display:grid;place-items:center;
 pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.mnb2__im img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
 box-shadow:0 16px 26px -18px rgba(19,32,25,.9)}
.mnb2__t.is-cut .mnb2__im{right:-4%;bottom:-14%;width:58%}
.mnb2__t.is-cut .mnb2__im img{object-fit:contain;border-radius:0;box-shadow:none;
 filter:drop-shadow(0 16px 20px rgba(19,32,25,.35))}
.mnb2__t--szezon .mnb2__im{width:44%;right:4%;bottom:-6%}
.mnb2__t:hover .mnb2__im{transform:translateY(-5px) scale(1.04)}
.mnb2__t i{position:absolute;left:clamp(12px,1.5vw,20px);bottom:clamp(11px,1.4vw,18px);
 display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
 background:rgba(255,255,255,.72);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.mnb2__t i svg{width:14px;height:14px}
.mnb2__t:hover i,.mnb2__t.on i{opacity:1;transform:none}
.mnb2__t--szezon{min-height:clamp(200px,24vw,320px);justify-content:flex-end}
.mnb2__t--szezon .mnb2__n{order:-1}
/* Szűrt állapotban a nem választott szekciók elrejtve — a tartalom a DOM-ban marad,
   hogy a strukturált adat és az indexelhető szöveg ne sérüljön. */
.mns[hidden]{display:none}
.mnb2__all{display:inline-flex;align-items:center;gap:7px;margin:10px auto 0;padding:8px 16px;border-radius:999px;
 border:0;cursor:pointer;font-size:12px;font-weight:600;color:var(--mn-ink);background:rgba(255,255,255,.75);
 box-shadow:inset 0 0 0 1px rgba(38,51,44,.12)}
.mnb2__all[hidden]{display:none}
.mnb2__foot{display:flex;justify-content:center}

/* ── KIEMELT TERMÉKSÁV szekciónként + választósor ──────────────────────────────────────
   Minden kategóriának van egy kiemelt tétele (korongon álló ital, saját leírással és
   árral), alatta a szekció összes tétele. A sorból bármelyikre kattintva az kerül
   a kiemelt helyre — FLIP-animációval. */
.msb{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
 gap:clamp(14px,2.6vw,44px);align-items:center;overflow:hidden;
 padding:clamp(16px,2.4vw,34px);border-radius:clamp(20px,2.6vw,32px);
 background:linear-gradient(125deg,#FFFCF4,#F6F1E4);
 box-shadow:inset 0 0 0 1px rgba(38,51,44,.07),0 30px 50px -46px rgba(19,32,25,.75)}
.msb::before{content:'';position:absolute;right:-16%;top:-52%;width:62%;aspect-ratio:1;border-radius:50%;
 pointer-events:none;opacity:.16;transition:background .5s;
 background:radial-gradient(circle,var(--a1,#0E4A31) 0%,transparent 66%)}

.msb__mid{position:relative;z-index:1;width:100%;max-width:clamp(200px,24vw,350px);margin:0 auto;aspect-ratio:1/1}
.msb__disc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88%;aspect-ratio:1;border-radius:50%;
 transition:background .5s ease;
 background:radial-gradient(120% 120% at 30% 16%,color-mix(in srgb,var(--a2,#fff) 62%,#fff) 0%,var(--a1,#0E4A31) 56%,color-mix(in srgb,var(--deep,#000) 52%,var(--a1,#0E4A31)) 100%);
 box-shadow:0 40px 58px -44px rgba(19,32,25,.8)}
.msb__img{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;transform:translate(-50%,-50%);
 transition:opacity .22s ease;animation:mwsbob 7s ease-in-out infinite}
.msb__mid.is-cut .msb__img{width:auto;max-width:none;height:calc(86% * var(--hf,1.07));object-fit:contain;
 filter:drop-shadow(0 24px 30px rgba(19,32,25,.34))}
.msb__mid:not(.is-cut) .msb__img{width:72%;height:72%;border-radius:50%;object-fit:cover;
 box-shadow:0 24px 36px -26px rgba(19,32,25,.9),inset 0 0 0 1px rgba(255,255,255,.3)}
.msb__img.gone{opacity:0}

.msb__t{position:relative;z-index:1;min-width:0}
.msb__e{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
 color:var(--mn-green);padding:5px 11px;border-radius:999px;background:rgba(0,100,60,.08)}
.msb__t h3{margin:11px 0 0;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:clamp(22px,3.4vw,46px);line-height:.96;letter-spacing:-.018em;color:var(--mn-ink);text-wrap:balance}
.msb__d{margin:11px 0 0;max-width:46ch;font-size:13.4px;line-height:1.6;color:var(--muted,#57625a);min-height:3.2em}
.msb__p{margin:13px 0 0}
.msb__p b{font-family:var(--fut,'Oswald',sans-serif);font-weight:700;font-size:clamp(20px,2.6vw,32px);
 color:var(--mn-green);font-variant-numeric:tabular-nums}
.msb__b{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 0}

/* Választósor */
.msr{display:flex;gap:clamp(11px,1.5vw,22px);margin:clamp(13px,1.8vw,22px) 0 0;padding:8px 2px 12px;
 list-style:none;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
 -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent 100%);
 mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent 100%)}
.msr::-webkit-scrollbar{display:none}
.msr li{flex:0 0 auto;scroll-snap-align:center}
.msr__i{display:block;width:clamp(88px,8.6vw,122px);padding:0;border:0;background:none;cursor:pointer;text-align:center;color:var(--mn-ink)}
.msr__i>span.msr__d{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;
 transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
 background:radial-gradient(120% 120% at 32% 18%,color-mix(in srgb,var(--ta,#0E4A31) 32%,#fff) 0%,var(--ta,#0E4A31) 62%,color-mix(in srgb,var(--ta,#0E4A31) 66%,#000) 100%);
 box-shadow:0 16px 24px -20px rgba(19,32,25,.9)}
.msr__i img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .2s}
.msr__i img.is-cut{height:calc(112% * var(--hf,1.07));width:auto;max-width:none;object-fit:contain;
 transform:translate(-50%,-54%);filter:drop-shadow(0 10px 14px rgba(19,32,25,.4))}
.msr__i img:not(.is-cut){width:74%;height:74%;border-radius:50%;object-fit:cover}
.msr__i img.gone{opacity:0}
.msr__i b{display:block;margin-top:9px;font-size:11.2px;font-weight:600;line-height:1.24;letter-spacing:-.01em}
.msr__i em{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:700;color:var(--mn-green);
 font-variant-numeric:tabular-nums}
.msr__i:hover .msr__d{transform:translateY(-4px) scale(1.04)}
.msr__i.on .msr__d{box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--mn-green),0 18px 26px -20px rgba(19,32,25,.9)}
.msr__i.in{animation:mwsin .42s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--in-d,0s)}

/* A menüajánlat-blokk sima kártyaként (nincs benne korong) */
.mws__in--plain{display:block;padding:clamp(16px,2.2vw,30px)}
.mws__in--plain .mws__mn{margin:0}

/* ── Ragadós üveg-nav „lámpa"-jelzővel ───────────────────────────── */
.mnn{position:sticky;top:var(--mn-top);z-index:20;margin-top:clamp(8px,1.4vw,18px);padding:10px var(--mn-gut);
 background:rgba(243,239,228,.78);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
 box-shadow:inset 0 -1px 0 rgba(38,51,44,.1)}
/* ── EGYSOROS kategóriasáv (2026-09-23, 2. kör) ─────────────────────────────────
   Tulajdonosi kérés: egy sor, a Starbucks-app redesignok mintájára. Minden fül =
   kerek termékikon + felirat; a kiválasztott a zöld „lámpa"-pirula.
   ⚠️ Az első kísérlet (vízszintes görgetés jelzés nélkül) után a tulajdonos csak a
   „CBD olajok"-ig látta a listát — ezért asztalon KÖTELEZŐ a folytatás jelzése:
   elhalványuló szél (`--fl`/`--fr`, a JS állítja) + két oldali nyíl + a görgőkerék
   is vízszintesen görget a sáv fölött. Mobilon képernyőszélig futó, húzható sor. */
.mnn__w{position:relative;max-width:1200px;margin:0 auto;border-radius:999px;background:rgba(255,255,255,.62);
 box-shadow:inset 0 0 0 1px rgba(38,51,44,.08),inset 0 1px 0 rgba(255,255,255,.9)}
.mnn__in{position:relative;display:flex;flex-wrap:nowrap;gap:2px;padding:7px 6px 5px;
 overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
.mnn__in::-webkit-scrollbar{display:none}
.mnn__ar{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;
 border-radius:50%;transform:translateY(-50%);background:#fff;color:var(--mn-ink);cursor:pointer;
 box-shadow:0 6px 16px -8px rgba(19,32,25,.55),inset 0 0 0 1px rgba(38,51,44,.1);transition:background .2s,color .2s}
.mnn__ar svg{width:16px;height:16px}
.mnn__ar:hover{background:var(--mn-ink);color:#fff}
.mnn__ar--p{left:8px}
.mnn__ar--n{right:8px}
.mnn__ar[hidden]{display:none}
/* A lámpa `left`/`top`-pal áll be, a fül tényleges dobozához igazítva. */
.mnn__lamp{position:absolute;left:0;top:4px;bottom:auto;width:0;height:0;opacity:0;border-radius:999px;pointer-events:none;
 background:linear-gradient(150deg,#0E4A31,#00643C);
 box-shadow:0 8px 18px -10px rgba(0,100,60,.9),inset 0 1px 0 rgba(255,255,255,.22);
 transition:left .38s cubic-bezier(.34,1.4,.64,1),top .28s cubic-bezier(.34,1.4,.64,1),width .38s cubic-bezier(.34,1.4,.64,1),height .28s,opacity .2s}
.mnn__lamp::after{content:'';position:absolute;left:50%;top:-5px;width:34px;height:4px;border-radius:999px;
 transform:translateX(-50%);background:#5BE39B;box-shadow:0 0 12px 3px rgba(91,227,155,.6),0 0 26px 8px rgba(91,227,155,.28)}
.mnn__in a{position:relative;z-index:1;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
 padding:5px 16px 5px 5px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:-.005em;
 color:var(--mn-ink);white-space:nowrap;transition:color .25s,background .25s}
.mnn__t{display:block;line-height:1.1}
/* Kerek termékikon — kivágott pohárnál (`is-cut`) a pohár a korongon áll, boltis
   fotónál körbe vágott kép; üres kategóriánál csak a kategória színe. */
.mnn__th{position:relative;flex:0 0 auto;width:32px;height:32px;border-radius:50%;overflow:hidden;
 background:radial-gradient(120% 120% at 32% 18%,color-mix(in srgb,var(--ta,#7F7A6A) 32%,#fff) 0%,var(--ta,#7F7A6A) 64%,color-mix(in srgb,var(--ta,#7F7A6A) 70%,#000) 100%);
 box-shadow:inset 0 0 0 1px rgba(38,51,44,.08);transition:box-shadow .25s,transform .25s}
.mnn__th img{display:block;width:100%;height:100%;object-fit:cover}
.mnn__th.is-cut img{position:absolute;left:50%;top:54%;width:auto;max-width:none;height:calc(100% * var(--hf,1));
 object-fit:contain;transform:translate(-50%,-50%)}
.mnn__in a:hover .mnn__th{transform:scale(1.07)}
.mnn__in a.on .mnn__th{box-shadow:0 0 0 2px rgba(255,255,255,.92)}
.mnn__in a:hover{color:var(--mn-green)}
.mnn__in a.on,.mnn__in a.on:hover{color:#fff}
.mnn__in a i{font-style:normal;font-size:9.6px;font-weight:700;color:var(--muted,#57625a);font-variant-numeric:tabular-nums;
 padding:2px 6px;border-radius:999px;background:rgba(38,51,44,.07);transition:color .25s,background .25s}
.mnn__in a.on i{color:#CFF6E2;background:rgba(255,255,255,.16)}
.mnn__in a .hw-sup{font-size:.6em;vertical-align:.55em;margin-left:.04em;line-height:0}
/* Mobil (Starbucks-app minta): a sáv képernyőszélig fut, minden fül önálló fehér
   pirula, ujjal húzható, a kiválasztott automatikusan beúszik (hw-m.js, 4. modul). */
@media(max-width:900px){
.mnn{padding-left:0;padding-right:0}
.mnn__w{max-width:none;border-radius:0;background:none;box-shadow:none}
.mnn__ar{display:none!important}
.mnn__in{gap:8px;padding:6px var(--mn-gut);scroll-snap-type:x proximity;scroll-padding-inline:var(--mn-gut)}
.mnn__in a{scroll-snap-align:start;padding:4px 14px 4px 4px;font-size:12.6px;
 background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(38,51,44,.1)}
.mnn__in a.on{background:transparent;box-shadow:none}
.mnn__th{width:30px;height:30px}
}

/* ── Üres kategória ──────────────────────────────────────────────────
   A 485/486/487/488 és a 300 még feltöltés alatt van. Kitalált tétel helyett
   ez az üzenet jelenik meg; ha a tulajdonos beteszi a termékeket, eltűnik. */
.mne{max-width:1200px;margin:0 auto;padding:clamp(40px,6vw,86px) var(--mn-gut);text-align:center;
 font-size:clamp(14px,1.5vw,17px);line-height:1.6;color:var(--muted,#57625a)}
.mne[hidden]{display:none}
.mws[hidden]{display:none}

/* ── Szekciók ─────────────────────────────────────────────────────── */
.mnw{max-width:1200px;margin:0 auto;padding:0 var(--mn-gut)}
.mns{padding:clamp(34px,5.5vw,64px) 0;scroll-margin-top:calc(var(--mn-top) + 74px)}
.mns + .mns{box-shadow:inset 0 1px 0 rgba(38,51,44,.09)}
.mns__h{max-width:60ch;margin:0 0 clamp(18px,2.6vw,30px)}
.mns__e{display:block;font-size:10.2px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mn-green)}
.mns__h h2{margin:6px 0 0;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:clamp(23px,3.6vw,38px);line-height:1.02;letter-spacing:-.008em;color:var(--mn-ink)}
.mns__h p{margin:8px 0 0;font-size:13.2px;line-height:1.58;color:var(--muted,#57625a)}

.mnp{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:clamp(10px,1.4vw,16px)}
.mns--pic .mnp{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.mnp__i{position:relative;display:flex;flex-direction:column;padding:10px 10px 14px;border-radius:22px;background:var(--mn-card);
 box-shadow:0 1px 0 rgba(38,51,44,.05),0 10px 24px -20px rgba(19,32,25,.5),inset 0 0 0 1px rgba(38,51,44,.07);
 transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.mnp__i:hover{transform:translateY(-4px);
 box-shadow:0 1px 0 rgba(38,51,44,.05),0 26px 40px -26px rgba(19,32,25,.65),inset 0 0 0 1.5px rgba(0,100,60,.35)}
.mnp__im{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;
 background:linear-gradient(160deg,#F2EFE4,#E7E3D6)}
.mnp__im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.mnp__i:hover .mnp__im img{transform:scale(1.06)}
.mnp__i b{margin:11px 4px 0;font-weight:600;font-size:13.2px;line-height:1.24;letter-spacing:-.012em;color:var(--mn-ink);text-wrap:balance}
.mnp__i em{margin:6px 4px 0;font-style:normal;font-weight:700;font-size:13.8px;color:var(--mn-green);font-variant-numeric:tabular-nums}
.mns--pic .mnp__i b{font-size:14.6px}
.mns--pic .mnp__i em{position:absolute;right:16px;top:16px;margin:0;padding:6px 11px;border-radius:999px;font-size:13px;
 color:#12301F;background:rgba(255,255,255,.86);
 -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 6px 14px -8px rgba(19,32,25,.6)}

/* ── Záró sáv ─────────────────────────────────────────────────────── */
.mnc{margin-top:clamp(26px,4vw,52px);padding:clamp(32px,5.5vw,64px) var(--mn-gut);
 background:radial-gradient(120% 160% at 16% 0%,#16482f 0%,#0c2519 55%,#071510 100%);color:#F4F1E8}
.mnc__in{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(22px,4vw,52px);align-items:center;max-width:1200px;margin:0 auto}
.mnc h2{margin:0;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:clamp(24px,3.6vw,40px);line-height:1.02;color:#fff}
.mnc p{margin:12px 0 0;max-width:52ch;font-size:13.8px;line-height:1.6;color:rgba(244,241,232,.8)}
.mnc .mnb--p{color:#05291a;background:linear-gradient(150deg,#AEEFCB,#4FDE97);
 box-shadow:0 16px 30px -16px rgba(91,227,155,.95),inset 0 1px 0 rgba(255,255,255,.55)}
.mnc .mnb--p:hover{background:linear-gradient(150deg,#C2F4D9,#63E6A6)}
.mnc .mnb:not(.mnb--p){color:#F4F1E8;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.mnc .mnb:not(.mnb--p):hover{background:rgba(255,255,255,.16)}
.mnc__c{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.mnc__c li{padding:13px 16px;border-radius:18px;background:rgba(255,255,255,.07);
 -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.26)}
.mnc__c b{display:block;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;font-size:14.5px;color:#fff}
.mnc__c span{display:block;margin-top:4px;font-size:11.4px;line-height:1.4;color:rgba(244,241,232,.72)}
.mnc__c i{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-style:normal;font-size:9.6px;font-weight:600;
 color:#fff;background:rgba(0,100,60,.55);border-radius:999px;padding:3px 9px}
.mnc__c i::before{content:'';width:5px;height:5px;border-radius:50%;background:#5BE39B}

/* ── KÁVÉZÓI TERMÉKOLDAL (/termek/<slug>/, a 18-as „Menü" kategória tételei) ──────────
   Szerkezet a Figma-referencia PRODUCT PAGE 1 alapján: bal oldalt szöveg, középen a
   korongon álló ital, jobbra ívelt sötétzöld panel. */
.hw-main--cafe{--mn-gut:clamp(16px,4vw,44px);--mn-cream:#F3EFE4;--mn-card:#FFFCF4;--mn-ink:#17231B;--mn-green:#00643C;
 background:var(--mn-cream)}
.hw-main--cafe .cpr{font-size:.5em;vertical-align:super}
/* A fejléc felső infósávja (telefon · e-mail · városok) FEHÉR szövegre van hangolva,
 mert a főoldalon sötét hero van mögötte. A krém alapú kávézói oldalakon ettől
 olvashatatlan, „elcsúszott" szellemsorként jelent meg — itt tintaszínre váltjuk. */
/* A jobb tömítése a FŐOLDAL függőleges sávjához (`.ws2__band`) van szabva:
 `padding-right:calc(clamp(165px,19.7vw,330px) + 22px)`. Ahol nincs sáv, ott ettől
 ~350 px-szel beljebb kerül, és középre csúszottnak látszik — itt a jobb szélre zárjuk. */
body:has(.hw-main--cafe) .isl-wrap .cbar,body:has(.hw-main--menu) .isl-wrap .cbar{
 padding-right:16px;justify-content:flex-end}
/* ⚠️ `!important` KELL: a `hw.css`-ben `.cbar a{color:rgba(255,255,255,.86)!important}`
   áll (a főoldali sötét hero miatt), amit sima szabállyal nem lehet felülírni —
   ezért maradt fehér és olvashatatlan a krém háttéren. A `text-shadow` is oda tartozik:
   a sötét derengés világos alapon koszos peremként jelenik meg.
   Ugyanez a minta él már a boltoldalakon: `body.hw-shop .cbar a{…!important}`. */
body:has(.hw-main--cafe) .cbar a,body:has(.hw-main--menu) .cbar a{
 color:rgba(23,35,27,.72)!important;text-shadow:none!important}
body:has(.hw-main--cafe) .cbar a:hover,body:has(.hw-main--menu) .cbar a:hover{color:#17231B!important}
body:has(.hw-main--cafe) .cbar svg,body:has(.hw-main--menu) .cbar svg{
 opacity:.5;filter:none!important}
body:has(.hw-main--cafe) .cbar__d,body:has(.hw-main--menu) .cbar__d{background:rgba(23,35,27,.2)!important}
/* EGY SOR, három hasáb (2026-09-23, 5. kör):
   bal = kiegészítő infó · közép = a termék szövege + összeállító · jobb = a kitolt
   korong a lebegő termékkel. A sötétzöld „tojásforma" megszűnt. */
.cpz{position:relative;display:grid;
 /* A bal hasáb szélesebb lett: a menüösszeállító tételneveinek kell a hely.
    A többletet a középső hasábtól vesszük el, a termék korongja nem szűkül. */
 grid-template-columns:minmax(0,.72fr) minmax(0,1.42fr) minmax(0,.82fr);
 /* A morzsamenü saját rácselem, a középső hasáb FÖLÖTT — a bal és a jobb hasáb
    mindkét soron átível, így a látvány ugyanaz, mint amikor a hasábon belül volt. */
 grid-template-rows:auto auto;grid-template-areas:'s bc m' 's c m';
 align-items:center;gap:0 clamp(18px,2.4vw,40px);
 padding:clamp(18px,2.6vw,34px) 0 clamp(20px,2.8vw,38px);overflow:hidden}
/* ⚠️ Nevesített területeknél MINDEN rácselemnek kell terület, különben implicit
   sorokba esik. A négy elem: morzsamenü · bal hasáb · középső hasáb · termék. */
.cpz__bc{grid-area:bc;align-self:end;padding:0 clamp(4px,.8vw,12px)}
.cpz__side{grid-area:s}
.cpz__c{grid-area:c}
.cpz__mid{grid-area:m}

/* ── bal hasáb: kiegészítő infó, teljes magasságú, vékony elválasztó vonallal ── */
.cpz__side{position:relative;z-index:2;align-self:stretch;min-width:0;
 /* FELÜLRŐL indul, nem középre zárva: a hasáb tartalma a menü alatt rögzítve
    kezdődik, így nem ugrál attól függően, hogy a választó vagy az összegző látszik. */
 display:flex;flex-direction:column;justify-content:flex-start;
 padding:clamp(6px,1vw,14px) clamp(16px,2.2vw,34px) clamp(6px,1vw,14px) var(--mn-gut)}
.cpz__side::after{content:'';position:absolute;right:0;top:0;bottom:0;width:1px;
 background:linear-gradient(180deg,transparent,rgba(14,74,49,.26) 8%,rgba(14,74,49,.26) 92%,transparent)}
.cpz__sh{margin:0;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:11px;letter-spacing:.14em;color:var(--mn-green);opacity:.85}

/* ── középső hasáb: a termék szövege és az összeállító ── */
.cpz__c{position:relative;z-index:2;min-width:0;padding:0 clamp(4px,.8vw,12px)}
.cpz__bc{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;color:var(--muted,#57625a)}
.cpz__bc a{color:var(--mn-green);font-weight:600}
.cpz__bc a:hover{text-decoration:underline;text-underline-offset:3px}
.cpz__h{margin:9px 0 0;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:clamp(26px,3.2vw,44px);line-height:.95;letter-spacing:-.02em;color:var(--mn-ink);text-wrap:balance}
.cpz__d{margin:10px 0 0;max-width:42ch;font-size:13.2px;line-height:1.55;color:var(--muted,#57625a)}
/* Ár + gombok BALRA egy oszlopban, a menükártya MELLETTÜK jobbra, egészen a
   középső hasáb széléig — vagyis a nagy termékig. */
.cpz__prw{position:relative;display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);margin:13px 0 0}
.cpz__prl{flex:none}
.cpz__pr{display:flex;align-items:baseline;gap:10px;margin:0}
.cpz__pr span{font-size:10.6px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#57625a)}
.cpz__pr b{font-family:var(--fut,'Oswald',sans-serif);font-weight:700;font-size:clamp(23px,2.7vw,32px);
 color:var(--mn-green);font-variant-numeric:tabular-nums}
.cpz__b{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 0}
.cpz__prl .cpz__b{margin-top:12px}
.cpz__n{margin:8px 0 0;font-size:10.6px;line-height:1.5;color:var(--muted,#57625a)}
/* „Hol kapható" lábjegyzet a középső hasáb alján — egy sor, a cím beleolvad. */
.cpz__nf{margin-top:clamp(9px,1.2vw,14px);font-size:10.2px}
.cpz__nf b{margin-right:7px;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;
 text-transform:uppercase;font-size:9.6px;letter-spacing:.14em;color:var(--mn-green)}

/* ── jobb hasáb: a KORONG jobbra kitolva a képből, rajta a lebegő termék ──────
 A korong jóval nagyobb a színpadnál és jobbra el van csúsztatva, a `.cpz`
 `overflow:hidden`-je vágja le a képszélen. A termék viszont a színpad közepén
 marad, tehát teljes egészében látszik. */
/* `justify-self:end`: a termék a hasáb jobb széléhez zár, így a középső hasáb
 (és vele az összeállító tálca) szélesebb lehet. */
.cpz__mid{position:relative;z-index:1;align-self:center;justify-self:end;
 width:100%;max-width:clamp(240px,25vw,380px);aspect-ratio:1/1;
 margin:clamp(26px,3.2vw,48px) 0 0}
.cpz__disc{position:absolute;left:50%;top:50%;border-radius:50%;
 width:clamp(380px,44vw,700px);height:clamp(380px,44vw,700px);
 transform:translate(calc(-50% + clamp(46px,7vw,150px)),-50%);
 background:radial-gradient(120% 120% at 30% 16%,color-mix(in srgb,var(--a2) 62%,#fff) 0%,var(--a1) 56%,color-mix(in srgb,var(--deep) 52%,var(--a1)) 100%);
 box-shadow:0 54px 80px -56px rgba(19,32,25,.7)}
/* Kivágott pohár: nagy méretben, a korongon túl is lóghat. */
.cpz__mid--cut .cpz__img{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;width:auto;max-width:none;
 height:calc(112% * var(--hf,1.07));object-fit:contain;transform:translate(-50%,-50%);
 filter:drop-shadow(0 34px 44px rgba(19,32,25,.36));animation:mwsbob 7s ease-in-out infinite}
.cpz__mid:not(.cpz__mid--cut) .cpz__img{position:absolute;left:50%;top:50%;z-index:1;width:84%;height:84%;
 border-radius:50%;object-fit:cover;transform:translate(-50%,-50%);
 box-shadow:0 34px 50px -30px rgba(19,32,25,.9),inset 0 0 0 1px rgba(255,255,255,.3)}

.cpz__h2{margin-top:clamp(14px,1.9vw,22px)!important}
/* ── Összeállító tálca, közvetlenül a termékszöveg alatt, a középső hasábban ── */
.cpo{position:relative;z-index:2;margin:clamp(14px,1.9vw,22px) 0 0}
/* A tömítések szűkebbek, mint korábban: a tálca hasznos szélessége így ~36px-szel
   nőtt anélkül, hogy a hasábok arányához hozzá kellett volna nyúlni. */
.cpo__in{display:flex;align-items:stretch;justify-content:center;
 gap:clamp(10px,1.1vw,14px);padding:clamp(11px,1.5vw,17px) clamp(12px,1.2vw,15px);
 border-radius:clamp(18px,2vw,26px);background:rgba(255,255,255,.58);
 box-shadow:inset 0 0 0 1.4px rgba(14,74,49,.14),0 22px 44px -40px rgba(19,32,25,.85)}
/* ⚠️ `flex-basis:auto`, NEM 0. Nullás alappal a három hasáb a `flex-grow`
   arányában kap helyet, függetlenül attól, mennyi szövegük van — ezért csonkult
   a „Laktózmentes tej", miközben a méretoszlopban maradt üres hely. `auto`-val a
   kiindulás a TARTALOM mérete, és a maradékot osztja csak a `grow`. */
.cpo__s{position:relative;flex:1 1 auto;min-width:0;max-width:420px;text-align:center}
/* A rács-elemek alapból `min-width:auto`-k: a leghosszabb szó (Pörköltmogyorós,
 étcsokoládékávé) szétfeszítette a hasábot, és a szomszéd szekcióba lógott.
 Itt engedjük őket összemenni, a hosszú szavak pedig törhetnek. */
.cpo__s ul>li{min-width:0}
/* A maradék helyből a kávéfajta kap a legtöbbet (ott a leghosszabbak az
   alcímek), a méretoszlop a legkevesebbet — ott csak három rövid felirat van. */
.cpo__s--fm{flex-grow:1.5}
.cpo__s--sz{flex-grow:.6}
.cpo__s--mk{flex-grow:1}
/* ⚠️ Ha a három hasáb együtt mégsem fér el, a zsugorodás ARÁNYOSAN osztódik, és
   a tejhasáb a „Laktózmentes tej"-t háromponttal levágja. A kávé és a méret
   tördelni tud, a tejnév nem — ezért a tejhasáb ellenáll a zsugorodásnak, és a
   szűkítés a másik kettőre esik. */
.cpo__s--mk{flex-shrink:.35}
.cpo__s button{min-width:0;max-width:100%}
.cpz__fmb b,.cpz__fmb i,.cpz__szb>b,.cpz__szb>i,.cpz__szb em{overflow-wrap:anywhere;hyphens:auto}
.cpo__s+.cpo__s{padding-left:clamp(10px,1.1vw,14px)}
.cpo__s+.cpo__s::before{content:'';position:absolute;left:0;top:-2px;bottom:-2px;width:1px;
 background:linear-gradient(180deg,transparent,rgba(14,74,49,.22) 16%,rgba(14,74,49,.22) 84%,transparent)}
.cpo__h{margin:0;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:11px;letter-spacing:.14em;color:var(--mn-green);text-align:center;opacity:.85}

/* Kávéfajta-választó (2026-09-23) — a három saját pörkölésű kenderes kávé,
 hátterében a csomagolásfotóval, előtte a kávé saját színével sötétített fátyol. */
/* Világos kártya + a csomagolás bélyegképe — ugyanaz a vizuális család, mint a
 méret- és a tejválasztó. (A korábbi teljes felületű fotóháttéren a csomagoláson
 lévő felirat ütközött a kártya saját nevével, és sötét sávként lógott ki a sorból.) */
/* Három kávé egy SORBAN: kerek csomagolás-bélyegkép + név — ugyanaz a kör-forma,
 mint a jobb panel kapcsolódó tételeinél, ezért olvasódik egy rendszernek. */
/* Sorokban, nem csempékben: így a hosszú alcímek egy sorba férnek, és a hasáb
 alacsonyabb is lesz. */
.cpz__fm{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none}
.cpz__fmb{position:relative;display:flex;flex-direction:row;align-items:center;gap:9px;
 width:100%;text-align:left;padding:5px 22px 5px 6px;border:0;border-radius:13px;
 cursor:pointer;color:var(--mn-ink);
 background:transparent;box-shadow:inset 0 0 0 1.4px transparent;
 transition:background .22s,box-shadow .22s,transform .22s}
.cpz__fmb::before{content:'';flex:none;width:32px;height:32px;border-radius:50%;
 background:var(--fi) center/cover no-repeat;
 box-shadow:0 0 0 2px var(--fc,#0E4A31),0 8px 14px -10px rgba(19,32,25,.8);
 transition:box-shadow .24s,transform .24s}
.cpz__fmx{display:block;min-width:0;flex:1}
.cpz__fmb:hover{background:rgba(255,255,255,.7)}
.cpz__fmb:hover::before{transform:translateY(-1px)}
.cpz__fmb.on{background:#fff;box-shadow:inset 0 0 0 1.6px var(--mn-green),0 12px 22px -18px rgba(19,32,25,.9)}
.cpz__fmb.on::before{box-shadow:0 0 0 2px var(--mn-green),0 8px 14px -10px rgba(19,32,25,.8)}
.cpz__fmb b{display:block;font-family:var(--fut,'Oswald',sans-serif);
 font-weight:700;text-transform:uppercase;font-size:11.8px;letter-spacing:.01em;
 line-height:1.15;color:var(--mn-ink)}
/* ⚠️ NINCS `nowrap`: a `flex-basis:auto` amúgy is a TÖRDELETLEN szélességet kéri
   alapként, tehát ha van hely, nem tör. Ha viszont nincs, tördel — a `nowrap`
   ilyenkor kilógna a hasábból. Ez a biztonságosabb viselkedés. */
.cpz__fmb i{display:block;font-style:normal;font-size:9.6px;line-height:1.25;
 letter-spacing:-.008em;color:var(--muted,#57625a)}
.cpz__fmb.on::after{content:'';position:absolute;z-index:2;right:6px;top:50%;margin-top:-7.5px;
 width:15px;height:15px;border-radius:50%;background:var(--mn-green)
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072016' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/9px no-repeat;
 box-shadow:0 0 0 2px #fff}

/* Tejválasztó — egyszerű sorok rádiópöttyel és felárral, világos alapon */
/* EGY oszlop: a két oszlopban a hosszabb nevek (Laktózmentes tej) és a felár
 egymásra csúsztak. Egy sorban a név elfér, az ár jobbra zárva mögé kerül. */
.cpz__mk{display:grid;gap:4px;margin:9px 0 0;padding:0;list-style:none}
.cpz__mkb{display:flex;align-items:center;gap:5px;width:100%;text-align:left;
 padding:6px 7px;border:0;border-radius:11px;cursor:pointer;color:var(--mn-ink);
 background:transparent;box-shadow:inset 0 0 0 1.4px transparent;
 transition:background .22s,box-shadow .22s}
.cpz__mkb:hover{background:rgba(255,255,255,.7)}
.cpz__mkb.on{background:#fff;box-shadow:inset 0 0 0 1.6px var(--mn-green),0 12px 22px -18px rgba(19,32,25,.9)}
.cpz__mki{flex:none;width:12px;height:12px;border-radius:50%;
 box-shadow:inset 0 0 0 1.5px rgba(14,74,49,.32);transition:box-shadow .22s}
.cpz__mkb.on .cpz__mki{box-shadow:inset 0 0 0 4px var(--mn-green),inset 0 0 0 1.5px var(--mn-green)}
.cpz__mkb b{flex:1;min-width:0;font-weight:600;font-size:10.8px;line-height:1.25;
 letter-spacing:-.016em;color:var(--mn-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpz__mkb b small{font-weight:400;font-size:9.2px;color:var(--muted,#57625a)}
.cpz__mkb em{flex:none;margin-left:auto;padding-left:3px;font-style:normal;font-size:9.6px;font-weight:700;
 color:var(--mn-green);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Méretválasztó — három pohárikon, kiszereléssel és felárral, világos alapon */
.cpz__sz{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:9px 0 0;padding:0;list-style:none}
.cpz__szb{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;height:100%;
 padding:7px 4px 7px;
 border:0;border-radius:14px;cursor:pointer;color:var(--mn-ink);background:transparent;
 box-shadow:inset 0 0 0 1.4px transparent;transition:background .22s,box-shadow .22s}
.cpz__szb:hover{background:rgba(255,255,255,.7)}
.cpz__szb.on{background:#fff;box-shadow:inset 0 0 0 1.6px var(--mn-green),0 12px 22px -18px rgba(19,32,25,.9)}
/* Pohárikon: FEHÉR papírpohár a kerek Cannabistro-jellel, kiválasztva ugyanaz a
 pohár a ház zöldjében. A jel a poháron kicsi — címke, nem felirat.
 A kontúrt négy irányú drop-shadow adja, mert a `clip-path` a box-shadow-t levágná. */
.cpz__cup{position:relative;display:block;width:44px;height:50px;margin:0 auto 4px;
 --cw:calc(15px + var(--s,1) * 13px);--ch:calc(15px + var(--s,1) * 17px)}
.cpz__cup::before{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
 width:var(--cw);height:var(--ch);
 clip-path:polygon(8% 0,92% 0,79% 100%,21% 100%);
 background:linear-gradient(180deg,rgba(255,255,255,.5) 0 20%,transparent 20%),
  rgba(38,51,44,.32);
 transition:background .22s}
.cpz__szb.on .cpz__cup::before{background:linear-gradient(180deg,rgba(255,255,255,.5) 0 20%,transparent 20%),
  var(--mn-green)}
/* A kerek jel a pohár hasán — a logó ALFÁJA maszkként, a színt a CSS adja.
   Kicsi: a pohár szélességének 40%-a, hogy címke legyen, ne felirat. */
.cpz__cup b{position:absolute;left:50%;bottom:calc(var(--ch) * .3);transform:translateX(-50%);
 width:calc(var(--cw) * .4);height:calc(var(--cw) * .4);
 background:#fff;
 -webkit-mask:url('img/footer-logo.png') center/contain no-repeat;
 mask:url('img/footer-logo.png') center/contain no-repeat;
 opacity:.85;transition:opacity .22s}
.cpz__szb.on .cpz__cup b{opacity:.95}
/* Fedő: épp csak a pohár felső pereménél szélesebb. */
.cpz__cup::after{content:'';position:absolute;left:50%;transform:translateX(-50%);
 bottom:calc(var(--ch) - 1px);
 width:calc(var(--cw) * .94);height:3.2px;border-radius:2px;
 background:rgba(38,51,44,.3);transition:background .22s}
.cpz__szb.on .cpz__cup::after{background:var(--mn-green)}
.cpz__cup i{position:absolute;left:0;right:0;bottom:calc(var(--ch) + 3px);
 display:flex;justify-content:center;align-items:flex-end;gap:4px;font-style:normal}
.cpz__cup--hot i::before,.cpz__cup--hot i::after{content:'';width:2px;border-radius:2px;
 background:rgba(38,51,44,.24);transition:background .22s}
.cpz__cup--hot i::before{height:10px}
.cpz__cup--hot i::after{height:6px}
.cpz__szb.on .cpz__cup--hot i::before,.cpz__szb.on .cpz__cup--hot i::after{background:var(--mn-green)}
.cpz__cup--cold i::before{content:'';width:3px;height:calc(9px + var(--s,1) * 6px);border-radius:2px;
 margin-left:calc(var(--cw) * .3);background:rgba(38,51,44,.34);
 transform:rotate(15deg);transform-origin:bottom center;transition:background .22s}
.cpz__szb.on .cpz__cup--cold i::before{background:var(--mn-green)}
.cpz__szb>b{font-family:var(--fut,'Oswald',sans-serif);font-weight:700;text-transform:uppercase;
 font-size:11.6px;line-height:1.1;color:var(--mn-ink)}
.cpz__szb>i{font-style:normal;font-size:9.6px;color:var(--muted,#57625a);font-variant-numeric:tabular-nums}
.cpz__szb em{font-style:normal;font-size:9.6px;font-weight:700;color:var(--mn-green);font-variant-numeric:tabular-nums}
/* Csak a menü NEVE, és csak az, amiben a tétel tényleg kérhető — a hosszú leírás
 és a „nem kérhető" változat csak zavarta a vásárlót (tulajdonosi döntés). */
/* A korábbi négyzetes kártyás megjelenítés (tulajdonosi kérés) — csak a menü nevével. */
/* ── Menüösszeállító a BAL hasábban, a két választó EGYMÁS ALATT ──
   Hogy kiférjen: a hasáb szélesebb (.72fr), a léptetők és a sorszám a címsorban
   ülnek (a kártya mellől ~50px-et vettek el a névtől), a kártya pedig alacsonyabb. */
.cpm{margin:0}
.cpm__h{margin:0;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;
 text-transform:uppercase;font-size:10.4px;letter-spacing:.14em;color:var(--muted,#57625a)}
.cpm .cpz__mnp{display:grid;gap:9px;padding:8px 8px 9px}
.cpm .cpz__car+.cpz__car{margin-top:0;padding-top:0;border-top:0}
/* Címsor: felirat balra, léptetők + sorszám jobbra. */
.cpz__carh{display:flex;align-items:center;gap:6px}
.cpz__carnav{flex:none;display:flex;align-items:center;gap:3px}
.cpz__carnav[hidden]{display:none}
.cpz__carnav em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.06em;
 white-space:nowrap;color:var(--mn-green);opacity:.7;font-variant-numeric:tabular-nums}
.cpz__mn{display:grid;gap:6px;margin:9px 0 0;padding:0;list-style:none}
/* ⚠️ KELL: a saját `display:grid` erősebb a böngésző `[hidden]{display:none}`
   szabályánál, ezért a `hidden` attribútum önmagában NEM rejtette el a választót —
   az összegző így alá került, és megnyújtotta a szekciót. */
.cpz__mn[hidden]{display:none}
.cpz__mn li{border-radius:14px;background:rgba(255,255,255,.62);overflow:hidden;
 box-shadow:inset 0 0 0 1.4px rgba(14,74,49,.16)}
/* Fix címsor a lenyitható gomb helyett — a menüválasztó mindig nyitva áll
   (tulajdonosi döntés), ezért nincs toggle. */
.cpz__mnt{padding:9px 12px 7px;box-shadow:inset 0 -1px 0 rgba(14,74,49,.12)}
.cpz__mnb{display:flex;align-items:center;justify-content:space-between;gap:10px;
 width:100%;padding:10px 12px;border:0;background:none;cursor:pointer;
 color:var(--mn-green);transition:background .2s}
.cpz__mnb:hover{background:rgba(255,255,255,.6)}
.cpz__mn b{display:block;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;
 text-transform:uppercase;font-size:12.6px;letter-spacing:.02em;color:var(--mn-green)}
.cpz__mnb svg{flex:none;width:15px;height:15px;opacity:.6;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.cpz__mnb[aria-expanded="true"] svg{transform:rotate(180deg)}
.cpz__mnp{padding:0 7px 8px}
.cpz__mnp[hidden]{display:none}

/* Választható tételek carousel — ugyanaz a lépcsőzetes becsúszás, mint a
 WeedShake-sínen: a tartalom cserélődik, a szem folyamatos mozgást lát. */
.cpz__car+.cpz__car{margin-top:8px;padding-top:8px;border-top:1px solid rgba(14,74,49,.12)}
.cpz__cnone{margin:6px 0 0;padding:8px 10px;border-radius:12px;font-size:10.4px;line-height:1.45;
 color:var(--muted,#57625a);background:rgba(255,255,255,.55);
 box-shadow:inset 0 0 0 1.2px rgba(14,74,49,.12)}
.cpz__carl{flex:1;min-width:0;display:block;font-size:9.6px;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;color:var(--muted,#57625a);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpz__carw{display:block;margin:5px 0 0}
.cpz__carn{flex:none;display:grid;place-items:center;width:17px;height:17px;padding:0;
 border:0;border-radius:50%;cursor:pointer;color:var(--mn-green);
 background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1.2px rgba(14,74,49,.22);
 transition:background .2s,color .2s,transform .2s}
.cpz__carn svg{width:11px;height:11px}
.cpz__carn:hover{background:var(--mn-green);color:#fff;transform:translateY(-1px)}
.cpz__carn[hidden]{display:none}
/* EGY tétel egyszerre, széles fekvő kártyán: korongon lebegő termék balra,
 mellette a sorszám és a név. A kártya kifut a szekció széléig. */
.cpz__cart{position:relative;flex:1;min-width:0;display:block;margin:0;padding:0;list-style:none;
 border-radius:14px;overflow:hidden;background:rgba(255,255,255,.72);
 box-shadow:inset 0 0 0 1.3px rgba(14,74,49,.14)}
.cpz__cart::after{content:'';position:absolute;left:0;bottom:0;height:2px;
 width:calc(var(--p,1) * 100%);background:var(--mn-green);opacity:.55;
 transition:width .42s cubic-bezier(.22,1,.36,1)}
.cpz__cart li{min-width:0;list-style:none}
.cpz__cart button{position:relative;display:flex;flex-direction:row;align-items:center;gap:9px;
 width:100%;text-align:left;border:0;background:none;cursor:pointer;
 padding:6px 26px 6px 6px;color:var(--mn-ink);transition:background .2s}
.cpz__cart button:hover{background:rgba(255,255,255,.9)}
/* Kijelölve: zöld gyűrű a kártyán és pipa a jobb szélen. */
.cpz__cart:has(button[aria-pressed="true"]){box-shadow:inset 0 0 0 1.8px var(--mn-green),0 12px 22px -18px rgba(19,32,25,.9)}
.cpz__cok{position:absolute;right:7px;top:50%;margin-top:-8px;width:16px;height:16px;border-radius:50%;
 box-shadow:inset 0 0 0 1.5px rgba(14,74,49,.28);transition:background .2s,box-shadow .2s}
.cpz__cart button[aria-pressed="true"] .cpz__cok{background:var(--mn-green)
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
 box-shadow:inset 0 0 0 1.5px var(--mn-green)}

/* Az összeállított menü összegzője — EGY sáv, két információval: mi van benne,
   és miből jön ki az ár. A korábbi 8 soros függőleges lista kilökte az oldalt
   a képernyőről, és a háromszor ismételt „benne" semmit nem mondott. */
/* ⚠️ A kártya KIVAN VÉVE A FOLYAMATBÓL (abszolút), különben a magassága
   megnyújtotta az egész sort, és vele az oldalt. Az alja az árblokk aljához
   igazodik, felfelé pedig a cím alatti üres helyre nő — ez a hely amúgy is
   kihasználatlan, így a kép magassága nem változik tőle. */
/* Az összegző a VÁLASZTÓ HELYÉN ül a bal hasábban (a `.cpz__mn` ilyenkor rejtett),
   ezért nem ad hozzá semmit az oldal magasságához. */
.cpz__sum{margin:9px 0 0;padding:10px 12px;border-radius:14px;
 background:rgba(0,100,60,.07);box-shadow:inset 0 0 0 1.3px rgba(14,74,49,.18)}
.cpz__sum[hidden]{display:none}
.cpz__sum p[hidden]{display:none}
.cpz__sum>b{display:block;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;
 text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--mn-green)}
.cpz__sum p{margin:4px 0 0;font-size:10.6px;line-height:1.45;color:var(--mn-ink)}
/* A tételfelsorolás rugalmas sor: a tételek egész néven, egyben törnek, nem
   szavanként — így 5 sor helyett 2-3 lesz belőle. */
.cpz__sum p[data-sum="list"]{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 6px}
/* Az árbontás vékony vonallal elválasztva, név–összeg sorokban. */
.cpz__sum p+p{margin-top:6px;padding-top:6px;border-top:1px solid rgba(14,74,49,.18)}
.cpz__sum .pl{margin:0;color:var(--mn-green);opacity:.5;font-weight:700}
.cpz__sum .miss{flex:1 0 100%;margin-top:2px;font-style:italic;color:rgba(23,35,27,.5)}
.cpz__sum .r{display:flex;align-items:baseline;gap:8px}
.cpz__sum .r+.r{margin-top:2px}
.cpz__sum .r i{flex:1;min-width:0;font-style:normal;color:var(--muted,#57625a);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpz__sum .r em{flex:none;font-style:normal;font-weight:700;white-space:nowrap;
 color:var(--mn-green);font-variant-numeric:tabular-nums}
.cpz__sum .r.tot{margin-top:4px;padding-top:4px;border-top:1px solid rgba(14,74,49,.28)}
.cpz__sum .r.tot i{color:var(--mn-ink);font-weight:700}
.cpz__sum .r.tot em{font-size:12.2px}
/* Összehasonlítás: mennyibe kerülne külön-külön, és mennyit nyer a menüvel. */
.cpz__sum .r.solo em{color:var(--muted,#57625a);font-weight:600;text-decoration:line-through;
 text-decoration-thickness:1px;text-decoration-color:rgba(87,98,90,.55)}
/* ⚠️ NEM gomb: a korábbi teljes szélességű, tömör zöld pirula kattinthatónak
   látszott. Most szöveges jelzés — a tartalomhoz simuló, halvány zöld kiemelés. */
.cpz__sum .win{display:inline-block;margin-top:6px;padding:2px 7px;border-radius:6px;
 font-size:10.2px;font-weight:700;letter-spacing:.01em;
 color:var(--mn-green);background:rgba(0,100,60,.13)}
/* Visszaút a választóhoz. */
.cpz__edit{display:block;width:100%;margin:7px 0 0;padding:5px 8px;border:0;
 border-radius:999px;cursor:pointer;font-size:9.6px;font-weight:700;
 letter-spacing:.1em;text-transform:uppercase;color:var(--mn-green);
 background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.2px rgba(14,74,49,.2);
 transition:background .2s,color .2s}
.cpz__edit:hover{background:#fff}
.cpz__cim{position:relative;flex:none;display:block;width:38px;height:38px;border-radius:50%;
 background:radial-gradient(120% 120% at 32% 18%,color-mix(in srgb,var(--ta,#0E4A31) 30%,#fff) 0%,color-mix(in srgb,var(--ta,#0E4A31) 66%,#fff) 100%);
 box-shadow:inset 0 0 0 1px rgba(14,74,49,.14),0 10px 18px -12px rgba(19,32,25,.9)}
.cpz__cart img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:92%;height:92%;object-fit:contain;display:block;
 filter:drop-shadow(0 6px 8px rgba(19,32,25,.3))}
.cpz__cix{flex:1;min-width:0}
/* A sorszám a címsorba költözött (.cpz__carnav em) — a kártyán már csak a név van,
   így a keskeny hasábban is marad neki 2 sornyi hely. */
.cpz__cart b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
 font-family:var(--fut,'Oswald',sans-serif);font-weight:700;
 text-transform:uppercase;font-size:11.6px;line-height:1.14;letter-spacing:.005em;
 overflow-wrap:normal;word-break:normal;hyphens:none;color:var(--mn-ink)}
/* Váltás: a korong beperdül, a szöveg utána úszik be — a sín koreográfiája kicsiben.
   (A tétel már `button`, nem `a` — a régi `a.in` szelektorral a váltás néma maradt.) */
.cpz__cart button.in .cpz__cim{animation:cpcim .52s cubic-bezier(.34,1.18,.5,1) both}
.cpz__cart button.in .cpz__cix{animation:cpcix .44s cubic-bezier(.22,1,.36,1) .05s both}
@keyframes cpcim{from{opacity:0;transform:scale(.68) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes cpcix{from{opacity:0;transform:translateX(var(--in-x,16px))}to{opacity:1;transform:none}}
.cpz__no{margin:9px 0 0;font-size:10.6px;color:rgba(244,241,232,.6)}
/* Lapozható szekciólista: a cím és a léptetők egy sorban, alattuk 3 tétel.
   A nem szezonális shake-oldalakon tucatnyi tétel van — lapozva férnek el. */
.cpz__relh{margin-top:clamp(14px,1.9vw,22px)}
.cpz__rell{flex:1;min-width:0;margin:0!important}
.cpz__rel>li[hidden]{display:none}
.cpz__rel a.in{animation:cpcix .42s cubic-bezier(.22,1,.36,1) both}
.cpz__rel i[hidden]{display:none}
.cpz__rel{display:grid;gap:3px;margin:9px 0 0;padding:0;list-style:none}
.cpz__rel a{display:flex;align-items:center;gap:9px;padding:5px 8px 5px 4px;border-radius:12px;
 color:var(--mn-ink);transition:background .2s}
.cpz__rel a:hover{background:rgba(255,255,255,.7)}
/* Bélyegkép: a kivágott pohár a tétel saját színű korongján, KÖZÉPRE igazítva és
 `contain`-nel — a `cover` levágta a pohár tetejét-alját, ezért nézett ki csúszottnak. */
.cpz__rel span{position:relative;flex:0 0 42px;width:42px;height:42px;border-radius:50%;
 overflow:hidden;display:block;
 background:radial-gradient(120% 120% at 32% 18%,color-mix(in srgb,var(--ta,#0E4A31) 26%,#fff) 0%,color-mix(in srgb,var(--ta,#0E4A31) 58%,#fff) 100%);
 box-shadow:inset 0 0 0 1px rgba(14,74,49,.14)}
/* ⚠️ MAGASSÁG szerint skálázunk, nem `contain`-nel. A WeedShake-kivágatok FEKVŐ
   vásznak (pl. Oreo 2000×1124), a Raspberry Kush viszont NÉGYZETES (2560×2560);
   a `contain` a fekvőket a szélességhez igazította, ezért lettek fele akkorák.
   `width:auto` + fix magasság = minden pohár ugyanakkora, a felesleg a korong
   `overflow:hidden`-jén kívülre esik (a pohár a vásznon középen van). */
.cpz__rel img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:auto;height:112%;max-width:none;display:block}
/* A NEM kivágott bélyegkép a VÁGATLAN (`medium`, négyzetes) változat: a pohár
   teljes egészében rajta van, csak a vászonhoz képest kisebb — ezért kap egy
   kicsivel nagyobb nagyítást, hogy a shake-ekkel egy méretűnek lássék. */
.cpz__rel img:not(.is-cut){height:124%}
.cpz__rel b{flex:1;min-width:0;font-size:11.4px;font-weight:600;line-height:1.25;color:var(--mn-ink)}
.cpz__rel i{font-style:normal;font-size:11px;font-weight:700;color:var(--mn-green);font-variant-numeric:tabular-nums}

@media(max-width:1100px){
 /* A kiegészítő hasáb alulra kerül, a vonal vízszintesre vált. */
 .cpz{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  grid-template-rows:auto auto auto;grid-template-areas:'bc m' 'c m' 's s';
  gap:clamp(14px,2.4vw,26px) clamp(16px,2.2vw,30px)}
 .cpz__bc{grid-area:bc;align-self:end;padding-left:var(--mn-gut)}
 .cpz__c{grid-area:c;padding-left:var(--mn-gut)}
 .cpz__mid{grid-area:m}
 .cpz__side{grid-area:s;align-self:auto;flex-direction:row;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(16px,3vw,34px);padding:clamp(14px,2.4vw,24px) var(--mn-gut) 0}
 .cpz__side::after{left:var(--mn-gut);right:var(--mn-gut);top:0;bottom:auto;width:auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(14,74,49,.26) 6%,rgba(14,74,49,.26) 94%,transparent)}
 .cpz__side>*{flex:1 1 200px;min-width:0}
 .cpz__h2{margin-top:0!important}
 .cpo__s{max-width:300px}
}
@media(max-width:620px){
 /* Az összeállító sáv egymás alá kerül — a függőleges elválasztó helyett vízszintes. */
 .cpo__in{flex-direction:column;gap:clamp(18px,4vw,26px)}
 .cpo__s{max-width:none;width:100%}
 .cpo__s+.cpo__s{padding-left:0;padding-top:clamp(18px,4vw,26px)}
 .cpo__s+.cpo__s::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(38,51,44,.2) 12%,rgba(38,51,44,.2) 88%,transparent)}
}
/* ══════════════════════════════════════════════════════════════════════════
   MOBIL: NEM összenyomott asztali oldal, hanem TERMÉKLAP-KÉPERNYŐ egy appból.
   A minta (tulajdonosi referencia, 2026-09-23): hero-kép → balra zárt név és
   leírás → szekciónként EGY-EGY fehér kártya vízszintesen görgethető
   választókkal → az ár és a fő gomb RÖGZÍTETT alsó sávban.
   Két dolog teszi appá: a balra zárás (a középre zárt szöveg mindig weboldal)
   és a rögzített alsó akciósáv (a vásárlás mindig kéznél van).
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
 /* ⚠️ Az `overflow:hidden` MARAD. Egy kísérletben `visible`-re vettem, hogy a
    korong a fejléc alá úszhasson — ettől viszont a korong vízszintesen is
    kilógott, és OLDALRA GÖRGETHETŐVÉ tette az egész oldalt. A levágott tetőt
    nem a vágás kikapcsolásával kell megoldani, hanem azzal, hogy a korong
    BELEFÉR a színpadba (lásd `.cpz__mid` / `.cpz__disc` lentebb). */
 /* Telefonon a morzsamenü az ELSŐ sor: a menüsáv alatt, a hero fölött —
    folyamatban, nem abszolút pozícióval. */
 .cpz{grid-template-columns:1fr;grid-template-rows:auto;
  grid-template-areas:'bc' 'm' 'c' 's';text-align:left;
  gap:0;max-width:100%}
 /* ⚠️⚠️ `display:contents` a középső hasábon: ELVETVE, NE PRÓBÁLJUK ÚJRA.
    A `.cpz__c`-n `min-width:0` van — ez fogja vissza a rács oszlopát. A
    `display:contents` eltünteti a dobozt, a gyerekek pedig `min-width:auto`-val
    lesznek rácselemek, így a legszélesebb tartalmuk SZÉTFESZÍTETTE az oldalt,
    és minden kilógott jobbra. A morzsamenü ehelyett a RÁCS saját eleme lett
    (a markupban kikerült a hasábból), és területkiosztással ül a helyén. */
 .cpz__c{padding:0 var(--mn-gut);min-width:0}
 /* Övsömör: egyetlen rácselem se feszíthesse szét az oldalt. */
 .cpz>*{min-width:0;max-width:100%}
 .cpz__bc{grid-area:bc;position:relative;z-index:4;align-self:auto;
  padding:0 var(--mn-gut);margin:0}
 /* ⚠️ A korong alapból FIX 380px (a `clamp` alsó határa), és jobbra van tolva —
    asztalon szándékosan lóg ki a képből. Telefonon ez nagyobb volt, mint a
    színpad, ezért lógott ki minden irányba és vágódott le felül.
    Itt a korong PONTOSAN a színpad mérete, középen: semmi nem lóg ki. */
 .cpz__mid{justify-self:center;align-self:center;width:100%;
  max-width:min(76vw,300px);margin:18px auto 8px}
 .cpz__disc{width:100%;height:100%;transform:translate(-50%,-50%)}
 /* A pohár épp csak túlnyúlik a korongon (a lebegő hatás miatt), de annyival,
    amennyi a fenti margóba belefér. */
 .cpz__mid--cut .cpz__img{height:calc(100% * var(--hf,1.07))}
 /* Rövidebb, tömörebb leírás — a nagyobb sortáv miatt hatott hosszúnak. */
 .cpz__d{margin-top:7px;font-size:12.2px;line-height:1.45}
 /* ⚠️ A ≤1100px-es szabály SORBA rendezi az oldalsávot (`flex:1 1 200px`), ami
    telefonon két hasábba törné a menüválasztót és a szekciólistát. Itt vissza
    egy oszlopba, teljes szélességen. */
 .cpz__side{flex-direction:column;flex-wrap:nowrap;text-align:left;
  gap:clamp(14px,4vw,20px);padding-top:clamp(14px,4vw,20px)}
 .cpz__side>*{flex:none;width:100%}
 .cpz__bc{justify-content:flex-start}
 .cpz__h{font-size:clamp(25px,7.4vw,34px);line-height:1}
 .cpz__d{margin-left:0;margin-right:0;max-width:none}

 /* ── Választók: szekciónként saját fehér kártya ─────────────────────── */
 .cpo{margin-top:clamp(16px,4.5vw,22px)}
 .cpo__in{flex-direction:column;gap:10px;padding:0;border-radius:0;
  background:none;box-shadow:none}
 .cpo__s{max-width:none;text-align:left;padding:13px 14px 15px;border-radius:20px;
  background:rgba(255,255,255,.74);
  box-shadow:inset 0 0 0 1.3px rgba(14,74,49,.1),0 18px 34px -34px rgba(19,32,25,.8)}
 .cpo__s+.cpo__s{padding-left:14px;padding-top:13px}
 .cpo__s+.cpo__s::before{display:none}
 .cpo__h{text-align:left}

 /* ⚠️ A kávéfajta HÁROM FIX tétel, nem carousel — nem görgetősor, hanem rács,
    ami mindig kifér. Fix 106px-es csempékkel a három kártya 6px-szel túllógott
    a szekción; `minmax(0,1fr)`-rel a szélesség igazodik a helyhez. */
 .cpz__fm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin:10px 0 0;padding:3px 3px 4px;overflow:visible}
 .cpz__fm>li{min-width:0}
 .cpz__fmb{flex-direction:column;align-items:center;gap:8px;width:100%;
  padding:12px 6px 13px;text-align:center;background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1.4px rgba(14,74,49,.1)}
 .cpz__fmb::before{width:56px;height:56px}
 .cpz__fmb b{font-size:11.8px}
 .cpz__fmb i{font-size:9.6px;line-height:1.25}
 .cpz__fmb.on::after{right:8px;top:9px;margin-top:0}

 /* Méret: marad a három egymás mellett, de tapintható kártyákként. */
 .cpz__sz{gap:8px;margin:10px 0 0}
 .cpz__szb{padding:12px 6px 13px;border-radius:18px;background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1.4px rgba(14,74,49,.1)}

 /* Tej: pirula-csipeszek vízszintes sorban, rádiópötty nélkül — appban a
    kijelölt állapotot a kitöltés jelzi, nem egy külön pötty. */
 .cpz__mk{display:flex;gap:8px;margin:10px 0 0;padding:3px 3px 8px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
 .cpz__mk::-webkit-scrollbar{display:none}
 .cpz__mk>li{flex:0 0 auto;scroll-snap-align:start}
 .cpz__mki{display:none}
 .cpz__mkb{flex-direction:column;align-items:flex-start;gap:1px;width:auto;
  padding:9px 15px 10px;border-radius:18px;background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1.4px rgba(14,74,49,.1)}
 .cpz__mkb b{flex:none;margin:0;white-space:nowrap;overflow:visible;text-overflow:clip}
 .cpz__mkb em{margin:0}

 /* „Hol kapható" lábjegyzet és a menüblokk a kártyák ritmusában. */
 .cpz__nf{padding:0 2px}
 .cpm{margin-top:clamp(14px,4vw,20px)}
 .cpz__mn{margin-top:9px}
 .cpz__rl{margin-top:clamp(14px,4vw,20px)}
 .cpz__rel{grid-template-columns:1fr;gap:4px}
 .cpz__rel a{padding:7px 10px 7px 6px}
 .cpz__rel span{flex:0 0 46px;width:46px;height:46px}
 .cpz__rel b{font-size:12.4px}
 .cpz__rel i{font-size:12px}

 /* ── RÖGZÍTETT alsó akciósáv: ár + rendelés, mindig kéznél ──────────── */
 .cpz__prw{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;
  padding:10px var(--mn-gut) calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,#0E4A31 4%,#F6F3E9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 rgba(14,74,49,.12),0 -20px 40px -34px rgba(19,32,25,.9)}
 .cpz__prl{display:flex;align-items:center;gap:12px;width:100%}
 .cpz__pr{flex:none;flex-direction:column;align-items:flex-start;gap:0}
 .cpz__pr span{font-size:9.4px;letter-spacing:.16em}
 .cpz__pr b{font-size:clamp(19px,5.6vw,24px);line-height:1.1}
 .cpz__prl .cpz__b{flex:1;margin:0;justify-content:flex-end}
 /* A másodlagos gombot a morzsamenü („Kávézó menü") váltja ki — a sávban
    csak EGY elsődleges művelet lehet. */
 .cpz__prl .mnb--g{display:none}
 .cpz__prl .mnb--p{flex:1;max-width:230px;justify-content:center}
 /* Hely a rögzített sávnak, különben eltakarja az utolsó szekciót. */
 .hw-main--cafe{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}

/* ── Reszponzív ───────────────────────────────────────────────────── */
@media(max-width:1080px){
 .mws__in{grid-template-columns:minmax(0,1fr) minmax(0,.95fr) 16px;grid-template-areas:'l m v' 'r r v';row-gap:clamp(14px,2vw,24px)}
 .mws__l{grid-area:l}.mws__mid{grid-area:m}.mws__vi{grid-area:v}
 .mws__r{grid-area:r;flex-direction:row;justify-content:center;gap:clamp(22px,4vw,44px)}
 .mws__t{width:clamp(84px,11vw,116px)}
}
@media(max-width:900px){
 .mnn{top:calc(clamp(76px,9.5vh,100px) - 4px)}
 .mnb2__in{grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:'szezon szezon' 'shake kavek' 'tea suti' 'nasi nasi'}
 .mnb2__t--szezon{min-height:clamp(170px,44vw,260px)}
}
@media(max-width:760px){
 .mws__in{grid-template-columns:1fr 16px;grid-template-areas:'m v' 'l l' 'r r';text-align:center}
 .mws__nav{justify-content:center}
 .mws__hd{justify-content:center}
.mws__pr,.mws__b{justify-content:center}
 .mws__mt{grid-template-columns:1fr}
 .mws__pick ul{justify-content:flex-start}
 .mws__mb,.mws__pl,.mws__sl,.mws__mno{text-align:left}
 .mws__c{margin-left:auto;margin-right:auto;min-height:0}
 .mws__mid{min-height:clamp(250px,58vw,340px)}
 .mnc__in{grid-template-columns:1fr}
 .mnc .mws__b{justify-content:center}
 .msb{grid-template-columns:1fr;text-align:center}
 .msb__b,.msb__p{justify-content:center}
 .msb__d{margin-left:auto;margin-right:auto;min-height:0}
 .msb__mid{max-width:clamp(190px,52vw,300px)}
 .msr__i{width:clamp(78px,24vw,108px)}
}
@media(max-width:520px){
 .mnp{grid-template-columns:repeat(2,1fr);gap:9px}
 .mns--pic .mnp{grid-template-columns:repeat(2,1fr)}
 .mnp__i{padding:8px 8px 12px;border-radius:18px}
 .mns--pic .mnp__i em{right:12px;top:12px;padding:5px 9px;font-size:12.2px}
 .mws__ch{width:clamp(58px,17vw,74px)}
}
/* ══ A KIEMELT SÁV SÖTÉTZÖLD VÁLTOZATA ═══════════════════════════════════════════════
   A tulajdonos által csatolt (zöld, prezentációs) referencia szerkezete: sötétzöld panel,
   balra a kivágott termék, mellette világosabb zöld szövegkártya (mentazöld címmel),
   jobb szélen álló, elforgatott ár, alatta a szekció tételei fehér kártyákon.
   Ez FELÜLÍRJA a fentebbi világos változatot. */
.msb{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto;align-items:center;
 background:linear-gradient(135deg,#16482F 0%,#0E3624 58%,#0A2A1C 100%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 34px 54px -44px rgba(10,30,20,.95)}
.msb::before{right:-24%;top:-62%;width:78%;opacity:.35;
 background:radial-gradient(circle,var(--a1,#5BE39B) 0%,transparent 64%)}
.msb__mid{max-width:clamp(180px,22vw,300px)}
.msb__disc{opacity:.22;filter:blur(2px)}
.msb__t{padding:clamp(16px,2vw,28px) clamp(18px,2.2vw,32px);border-radius:clamp(16px,2vw,26px);
 background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.2)}
.msb__e{color:#0B2E1E;background:#9BE7BE}
.msb__t h3{color:#9BE7BE}
.msb__d{color:rgba(244,241,232,.84);max-width:52ch}
.msb__side{align-self:stretch;display:flex;align-items:center;justify-content:center;padding-left:6px}
.msb__side span{display:block;writing-mode:vertical-rl;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;
 font-size:clamp(17px,2.2vw,30px);letter-spacing:.02em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.msb .mnb--p{color:#05291a;background:linear-gradient(150deg,#AEEFCB,#4FDE97);
 box-shadow:0 16px 28px -16px rgba(91,227,155,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.msb .mnb--p:hover{background:linear-gradient(150deg,#C2F4D9,#63E6A6)}
.msb .mnb--g{color:#F4F1E8;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.msb .mnb--g:hover{background:rgba(255,255,255,.12)}

/* Választósor: fehér kártyák a referencia bal oldali sávja szerint */
.msr{gap:clamp(9px,1.1vw,14px);padding:10px 2px 12px}
.msr__i{width:clamp(96px,9vw,128px);padding:9px 8px 10px;border-radius:16px;background:#FFFDF7;
 box-shadow:inset 0 0 0 1px rgba(38,51,44,.09),0 10px 20px -18px rgba(19,32,25,.7);
 transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s}
.msr__i>span.msr__d{width:100%;aspect-ratio:1;border-radius:12px;background:linear-gradient(160deg,#F2EFE4,#E7E3D6);
 box-shadow:none}
.msr__i img:not(.is-cut){width:100%;height:100%;border-radius:12px}
.msr__i img.is-cut{height:calc(108% * var(--hf,1.07));transform:translate(-50%,-52%)}
.msr__i:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(0,100,60,.35),0 20px 28px -22px rgba(19,32,25,.8)}
.msr__i:hover .msr__d{transform:none}
.msr__i.on{box-shadow:inset 0 0 0 2px var(--mn-green),0 18px 26px -20px rgba(19,32,25,.8)}
.msr__i.on .msr__d{box-shadow:none}
.msr__i b{margin-top:8px;font-size:10.8px}
.msr__i em{font-size:11px}

@media(max-width:820px){
 .msb{grid-template-columns:1fr}
 .msb__side{display:none}
}

/* ══ ONEPAGE ÉTLAP (2026-09-23, 3. kör) ══════════════════════════════════════════════
   Tulajdonosi kérés: „a felső sáv eléggé el van nyújtva függőlegesen és nem fér bele a
   képbe teljesen egy kategóriaoldal … úgy lenne a legjobb ha az egész egy onepage oldal
   tudna lenni". Helyet CSAK a blokk fölött szabad nyerni (a WeedShake-blokk elfogadott,
   érinthetetlen):
   1. tömör fejléc (a leírás és a jelzőpirulák egy sorban, kisebb cím és gombok);
   2. alacsonyabb kategóriasáv. */
/* ⚠️ A felső belső margó NEM csökkenthető: a `.hw-main` felső margója (96px + 2vw)
   kevesebb, mint a fix webhelyfejléc magassága, a hiányt ez a margó pótolja. Amikor
   4 px-re vettem, a „Kávézó menü" felirat és a Házhozszállítás gomb a fejléc alá csúszott. */
.mnt{padding:clamp(22px,4vw,44px) var(--mn-gut) clamp(8px,1.4vh,14px)}
.mnt__in{align-items:center}
.mnt__h{margin-top:4px;font-size:clamp(24px,5.2vh,46px)}
.mnt__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:clamp(6px,1vh,10px)}
.mnt__p{margin:0;max-width:none;font-size:12.8px}
.mnt__m{margin:0}
.mnt__m li{padding:4px 11px;font-size:11px}
.mnt__b{gap:7px}
.mnt__b .mnb{padding:10px 20px;font-size:12px}
@media(min-width:901px){
 .mnn{margin-top:0;padding-top:6px;padding-bottom:6px}
 .mnn__in{padding:6px 6px 4px}
 .mnn__in a{padding:3px 15px 3px 3px;font-size:12.8px}
 .mnn__th{width:28px;height:28px}
 /* TELJES SZÉLESSÉGŰ SÁV (2026-09-23, 7. kör, tulajdonosi kérés: „sokkal jobban nézne
    ki ha ez a menüsáv teljes szélességű lenne ha már ilyen sok kategóriánk van benne").
    A sáv a képernyő széléig fut; az első fül a tartalom bal széléhez igazodik, görgetve
    a fülek a képernyő széléig csúsznak. A korábbi 1200 px-es pirula-keret megszűnt, ezért
    minden fül saját, halvány fehér pirulát kap (mint mobilon) — különben lebegő szövegnek
    hatnának a széles üveg sávon. */
 .mnn{padding-left:0;padding-right:0}
 .mnn__w{max-width:none;border-radius:0;background:none;box-shadow:none}
 /* 8. kör: alapállásban a BAL oldal is a képernyő széléig fut (tulajdonos: „jobb oldalt
    stimmel, de az alapállásnál bal oldalt nem") — mindkét oldalon csak kis szegély. */
 .mnn__in{gap:6px;padding-left:clamp(12px,1.6vw,24px);padding-right:clamp(12px,1.6vw,24px)}
 .mnn__in a{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(38,51,44,.08)}
 .mnn__in a.on{background:transparent;box-shadow:none}
 .mnn__ar--p{left:clamp(10px,1.4vw,22px)}
 .mnn__ar--n{right:clamp(10px,1.4vw,22px)}
}
/* A kiválasztott fület a lámpa jelöli — a böngésző kék fókuszkerete kattintás után
   fölösleges (és idegen színű). Billentyűzetes fókusznál márkaszínű keret marad. */
.mnn__in a:focus{outline:none}
.mnn__in a:focus-visible{outline:2px solid rgba(91,227,155,.95);outline-offset:-2px}
/* ⛔ 2026-09-23, 4. kör — A WEEDSHAKE-BLOKK (`#kiemelt .mws__in`) ÁTMÉRETEZÉSE TÖRÖLVE.
   A 3. körben a blokkot a képernyőhöz szorítottam (fix magasság + `cqh`-méretezés, nyilak
   a felirat sorában) — ez a tulajdonos által ELFOGADOTT etalonblokk jóváhagyás nélküli
   átalakítása volt. Tulajdonos: „ki adott engedélyt az elfogadott weedshake blokk
   megváltoztatására?". A blokk ismét az eredeti méretű és elrendezésű.
   ➜ A képernyőhöz igazítás CSAK a fejlécen és a kategóriasávon történhet. */

/* Fejléc egy sávban (asztal): balra felirat + cím, középen leírás + jelzőpirulák,
   jobbra a két gomb egymás alatt. */
@media(min-width:1081px){
 .mnt__tx{flex:1 1 auto;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,3vw,44px);align-items:center}
 .mnt__e{grid-column:1;grid-row:1}
 .mnt__h{grid-column:1;grid-row:2;white-space:nowrap}
 .mnt__row{grid-column:2;grid-row:1/3;margin:0}
}

/* ══ APP-KÉPERNYŐ (2026-09-23, 8. kör) ══════════════════════════════════════════════
   A látható fejléc (`.mnt`) kikerült; a kategóriasáv az oldal első eleme.
   • A fix webhelyfejléc a `.hw-main` felső margójánál MAGASABB — eddig a `.mnt` felső
     margója pótolta a különbséget, most a sáv felső margója teszi ugyanezt.
   • Asztalon (≥1081 px, `body.hw-app`) a webhelyfejléc az első pillanattól összehúzott
     (hw.js), ezért a lap felső margója = a ragadós sáv helye (`--mn-top`): a sáv a
     betöltéskor már ott áll, ahol görgetés közben is — nem mozdul. */
/* 9. kör: a „Kávézó menü" + cím visszakerült a sáv fölé (önmagában). A fix fejléc
   magasságát ismét a `.mnt` felső margója pótolja; app-módban (összehúzott fejléc) ez a
   margó kicsi. Görgetéskor a cím felgördül, a kategóriasáv ragad — mint az iOS-appok
   „nagy címe". */
/* 2026-09-23: VISSZAVONVA — a /menu/ oldalon is a teljes webhelyfejléc látszik (tulajdonos nem
   kérte az összehúzást). A fix fejléc magasságát ismét a `.mnt` alap felső margója pótolja. */

/* ══ ZÁRÓ SÁV a lap alapszínén (8. kör) ══════════════════════════════════════════════
   Tulajdonos: „mivel a lábléc zöld így ennek a kategória alap háttérszínét kéne, hogy
   vigye". A sötétzöld sáv eddig összefolyt a zöld lábléccel — most az étlap krémszínét
   kapja, a kávézókártyák pedig a blokk kártyaszínét. */
.mnc{background:var(--mn-cream);color:var(--mn-ink);box-shadow:inset 0 1px 0 rgba(38,51,44,.1)}
.mnc h2{color:var(--mn-ink)}
.mnc p{color:var(--muted,#57625a)}
.mnc .mnb--p{color:#fff;background:linear-gradient(150deg,#0E4A31,#00764A);
 box-shadow:0 16px 28px -16px rgba(0,100,60,.85),inset 0 1px 0 rgba(255,255,255,.22)}
.mnc .mnb--p:hover{background:linear-gradient(150deg,#13593B,#028A57)}
.mnc .mnb:not(.mnb--p){color:var(--mn-ink);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(38,51,44,.18)}
.mnc .mnb:not(.mnb--p):hover{background:rgba(38,51,44,.05)}
.mnc__c li{background:var(--mn-card);-webkit-backdrop-filter:none;backdrop-filter:none;
 box-shadow:inset 0 0 0 1px rgba(38,51,44,.08),0 14px 26px -22px rgba(19,32,25,.5)}
.mnc__c b{color:var(--mn-ink)}
.mnc__c span{color:var(--muted,#57625a)}
.mnc__c i{color:#fff;background:var(--mn-green)}

/* ══ INTERAKTÍV KÁVÉZÓKÁRTYÁK (2026-09-23) ═════════════════════════════════════════
   Útvonal (a kártya + „Útvonal" gomb) · élő nyitvatartás · hívás · legközelebbi kávézó.
   A meglévő `.mnc__c b / span / i` szabályok érvényben maradnak (név, cím, állapot). */
.mnc__r{display:flex;flex-direction:column;gap:10px;min-width:0}
.mnc__near{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:0;border-radius:999px;
 cursor:pointer;font-size:12.4px;font-weight:600;color:var(--mn-green);background:rgba(0,100,60,.07);
 box-shadow:inset 0 0 0 1.5px rgba(0,100,60,.25);transition:background .2s,box-shadow .2s}
.mnc__near svg{width:15px;height:15px;flex:none}
.mnc__near:hover{background:rgba(0,100,60,.12)}
.mnc__near.is-busy{opacity:.65;pointer-events:none}
.mnc__near.is-done{color:var(--muted,#57625a);background:transparent;box-shadow:inset 0 0 0 1px rgba(38,51,44,.14)}
.mnc__c li.mnc__k{position:relative;display:flex;flex-direction:column;gap:9px;transition:box-shadow .25s,transform .25s}
.mnc__c li.mnc__k.is-near{box-shadow:inset 0 0 0 2px var(--mn-green),0 16px 28px -22px rgba(0,100,60,.7)}
.mnc__go{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.mnc__go:hover b{color:var(--mn-green)}
.mnc__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mnc__c i.mnc__st{margin-top:0;transition:background .3s}
.mnc__c i.mnc__st.is-soon{background:#B9791F}
.mnc__c i.mnc__st.is-soon::before{background:#FFD48A}
.mnc__c i.mnc__st.is-closed{background:rgba(38,51,44,.14);color:var(--mn-ink)}
.mnc__c i.mnc__st.is-closed::before{background:rgba(38,51,44,.45)}
.mnc__km{font-style:normal;font-size:11.2px;font-weight:700;color:var(--mn-green);font-variant-numeric:tabular-nums}
.mnc__km[hidden]{display:none}
.mnc__act{display:flex;gap:6px;margin-left:auto}
.mnc__ab{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 13px;border-radius:999px;
 font-size:11.6px;font-weight:700;letter-spacing:.02em;color:#fff;background:linear-gradient(150deg,#0E4A31,#00764A);
 box-shadow:0 10px 18px -12px rgba(0,100,60,.9);transition:transform .2s,background .2s}
.mnc__ab svg{width:14px;height:14px;flex:none}
.mnc__ab:hover{transform:translateY(-1px);background:linear-gradient(150deg,#13593B,#028A57)}
.mnc__ab--tel{width:34px;padding:0;color:var(--mn-green);background:rgba(0,100,60,.08);box-shadow:inset 0 0 0 1.5px rgba(0,100,60,.25)}
.mnc__ab--tel:hover{background:rgba(0,100,60,.14)}

/* Sok tételnél (pl. 420 Kiegészítők: 46) a jelzőcsík-sor sűrűbb, hogy ne nyújtsa meg a
   blokkot. A WeedShake-kategóriában (15 tétel) az eredeti méret marad. */
.mws__vi.is-many{gap:3px}
.mws__vi.is-many button{height:5px}
.mws__vi.is-many button.on{height:22px}

/* ══ MOBIL APP-NÉZET (≤760 px, 2026-09-23, 10. kör) ═════════════════════════════════
   Terv: claude/menuoldal-mobil-fejlesztesi-terv-2026-09-23.md. Tulajdonosi döntések:
   1) nyilak helyett elég a lapozás (húzás + pöttyök) · 2) a kategória ÖSSZES tétele
   húzható sorban · 4) rögzített alsó sáv: ár + Megnézem + Rendelés.
   (3: a szöveg igazítása még nyitott — marad a mostani középre zárás.)
   ⚠️ Minden szabály `#kiemelt`-re szűkítve és ≤760 px-re: az asztali blokk érintetlen.
   ⛔ Nincs `display:contents` és nincs `overflow:visible` a rácson (termékoldali tanulság). */
.mws__all,.mws__bar{display:none}
/* 19. kör: a jegeskávé-nevek „Iced" előtti sortörése CSAK mobilon (asztalon rejtve). */
.mws__br{display:none}
@media(max-width:760px){#kiemelt .mws__br{display:inline}}
@media(max-width:760px){
 /* M1 – kisebb cím, kisebb fülek */
 .mnt__h{font-size:clamp(22px,6.6vw,28px)}
 .mnt{padding-bottom:6px}
 .mnn__in a{padding:3px 12px 3px 3px;font-size:12px}
 .mnn__th{width:26px;height:26px}

 /* M2 – a blokk: korong → vízszintes pöttysor → szöveg → „mind" sor */
 #kiemelt .mws__in{grid-template-columns:minmax(0,1fr);grid-template-areas:'m' 'v' 'l' 'a';row-gap:12px}
 #kiemelt .mws__in>*{min-width:0}
 #kiemelt .mws__mid{max-width:min(56vw,220px);min-height:0}
 #kiemelt .mws__nav,#kiemelt .mws__r{display:none}
 #kiemelt .mws__vi{flex-direction:row;align-self:auto;justify-content:center;gap:6px;min-height:6px}
 #kiemelt .mws__vi button{width:14px;height:3px;transition:width .34s cubic-bezier(.34,1.3,.64,1),background .28s}
 #kiemelt .mws__vi button.on{width:34px;height:3px}
 #kiemelt .mws__vi.is-many{gap:2px}
 #kiemelt .mws__vi.is-many button{width:4px}
 #kiemelt .mws__vi.is-many button.on{width:14px}
 #kiemelt .mws__h{margin-top:8px}
 #kiemelt .mws__c{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
 /* az ár és a két gomb az alsó sávba költözik */
 #kiemelt .mws__pr b,#kiemelt .mws__b{display:none}
 #kiemelt .mws__pr small{margin-top:4px}

 /* „mind" sor: a kártya széléig húzható (a kártya `overflow:hidden`-je fogja meg) */
 #kiemelt .mws__all{grid-area:a;position:relative;display:flex;gap:12px;margin:4px -20px 0;padding:4px 20px 6px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:20px}
 #kiemelt .mws__all::-webkit-scrollbar{display:none}
 .mws__ai{flex:0 0 auto;width:76px;padding:0;border:0;background:none;cursor:pointer;text-align:center;
  color:var(--mn-ink);scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
 .mws__ad{position:relative;display:block;width:64px;height:64px;margin:0 auto;border-radius:50%;overflow:hidden;
  background:radial-gradient(120% 120% at 32% 18%,color-mix(in srgb,var(--ta,#7F7A6A) 32%,#fff) 0%,var(--ta,#7F7A6A) 64%,color-mix(in srgb,var(--ta,#7F7A6A) 70%,#000) 100%);
  box-shadow:inset 0 0 0 1px rgba(38,51,44,.08);transition:box-shadow .25s}
 .mws__ad img{display:block;width:100%;height:100%;object-fit:cover}
 .mws__ad.is-cut img{position:absolute;left:50%;top:56%;width:auto;max-width:none;height:calc(100% * var(--hf,1));
  object-fit:contain;transform:translate(-50%,-50%)}
 .mws__ai.on .mws__ad{box-shadow:0 0 0 2.5px var(--mn-green),0 10px 18px -12px rgba(19,32,25,.8)}
 .mws__ai b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:6px;
  font-size:10.6px;font-weight:600;line-height:1.25}
 .mws__ai b .hw-sup{font-size:.6em;vertical-align:.5em;line-height:0}
 .mws__ai em{display:block;margin-top:2px;font-style:normal;font-size:10.4px;font-weight:700;color:var(--mn-green);
  font-variant-numeric:tabular-nums}

 /* M3 – rögzített alsó akciósáv (iPhone home-sáv: safe-area) */
 #kiemelt .mws__bar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;
  display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-radius:20px;
  background:rgba(255,252,244,.94);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 18px 38px -18px rgba(19,32,25,.55),inset 0 0 0 1px rgba(38,51,44,.08);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s}
 #kiemelt .mws__bar.is-out{transform:translateY(140%);opacity:0;pointer-events:none}
 .mws__bar b{margin-right:auto;font-family:var(--fut,'Oswald',sans-serif);font-weight:700;font-size:20px;
  color:var(--mn-green);white-space:nowrap;font-variant-numeric:tabular-nums}
 .mws__bar .mnb{padding:11px 14px;font-size:12px;white-space:nowrap}
 .mws__bar .mnb svg{width:14px;height:14px}
 .hw-main--menu{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* ══ MOBIL, 11. kör (tulajdonosi kérés, 2026-09-23) ══════════════════════════════════
   • „Kávézó menü / A Cannabistro étlapja": BALRA zárva, közvetlenül a menüsáv alatt.
     (A mobil fejlécpirula alja = `--mn-top`; a korábbi +16 px + 22 px rés megszűnt.)
   • A blokk: FELÜL a kategórianév + szezonális jelvény → alatta KÉT HASÁB: balra a
     termékkép, JOBBRA mellette a terméknév, az ízleírás, az ár és a leírás → a kép
     ALATT csak a „további termékek" sor. A pöttysor mobilon nincs (a sor jelöli a
     kiválasztottat).
     A felirat+jelvény (`.mws__hd`) a JS teszi át a rács saját elemévé (≤760 px), és
     visszateszi, ha a képernyő szélesebb lesz — ⛔ NEM `display:contents` (tanulság).
   • A „további termékek" sorban a képek EGY MAGASSÁGBAN állnak (a <button> alapból
     függőlegesen középre tette a tartalmát → az egysoros nevűek lejjebb csúsztak), a
     név EGY sorban fér ki (a tétel a névhez szélesedik, max. 132 px, utána „…"). */
@media(max-width:760px){
 .hw-main.hw-main--menu{padding-top:calc(clamp(76px,9.5vh,100px) + 2px)}
 .mnt{padding-top:6px}
 .mnt,.mnt__tx{text-align:left}
 .mnt__in{align-items:flex-start}

 /* 12. kör (tulajdonosi kérés): nagyobb termékkép (44% → 54% hasáb) és kisebb belső
    margó (20 → 12 px). A „mind" sor negatív oldalmargója ugyanennyi, lent. */
 #kiemelt .mws__in{grid-template-columns:minmax(0,54%) minmax(0,1fr);grid-template-areas:'h h' 'm l' 'a a';
  column-gap:10px;row-gap:10px;align-items:center;text-align:left;padding:14px 12px 12px}
 #kiemelt .mws__all{margin:2px -12px 0;padding:4px 12px 4px;scroll-padding-inline:12px}
 #kiemelt .mws__in>.mws__hd{grid-area:h;justify-content:flex-start}
 #kiemelt .mws__k{font-size:12px;letter-spacing:.22em}
 #kiemelt .mws__e{padding:4px 10px 4px 8px;font-size:9.4px}
 #kiemelt .mws__mid{grid-area:m;width:100%;max-width:none;margin:0}
 /* 21. kör: a kép melletti szövegtömb (név, ízsor, ár, leírás) FÜGGŐLEGESEN középen,
    a középre zárt termékképhez mérten — a hasáb a képernyő kitöltése miatt magasabb
    a szövegnél, ezért eddig a szöveg felül állt, a kép pedig középen. */
 #kiemelt .mws__l{grid-area:l;display:flex;flex-direction:column;justify-content:center;align-self:stretch}
 #kiemelt .mws__vi{display:none}
 #kiemelt .mws__h{margin-top:0;font-size:clamp(20px,6.4vw,26px)}
 #kiemelt .mws__d{margin-top:4px;font-size:12.8px}
 #kiemelt .mws__pr{margin-top:8px;justify-content:flex-start}
 #kiemelt .mws__pr b{display:inline;font-size:20px}
 #kiemelt .mws__pr small{display:none}
 /* 18. kör: a leírás TELJES terjedelmében látszik (nincs sorlevágás); a hasáb magasságát
    a hw-m.js `sizeText()` a kategória leghosszabb szövegéhez igazítja. */
 #kiemelt .mws__c{margin:8px 0 0;font-size:12.2px;line-height:1.45;
  display:block;-webkit-line-clamp:unset;overflow:visible;
  /* 17. kör: BALRA ZÁRT, sorkizárás és szótagolás NÉLKÜL (tulajdonos: „nem akarok ilyen
     nagy sorközi helyet … és szótagolást sem"). A ~145 px-es hasábban a sorkizárás
     elválasztás nélkül mindig nagy szóközöket ad — ezért nem sorkizárt. */
  text-align:left;-webkit-hyphens:manual;hyphens:manual}

 #kiemelt .mws__all{align-items:flex-start}
 .mws__ai{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:auto;min-width:72px;max-width:132px}
 .mws__ai b{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}

 /* 13. kör (tulajdonosi kérés): a hosszú nevek (jegeskávék: „Amnesia Haze Iced Latte")
    KÉT sorba törnek — a termékkép magassága és helye NEM változik (a tétel tetejéhez
    igazítva, fix 64 px-es korong). A név mindig 2 sornyi helyet foglal, így az árak is
    egy vonalban maradnak. A rövid nevek továbbra is egy sorban állnak. */
 /* 14. kör: a jegeskávék neve pontosan az „Iced" előtt törik (a JS tesz oda sortörést,
    `pre-line`), ezért a tétel 120 px-ig szélesedhet, hogy a második sor ne törjön tovább. */
 .mws__ai{max-width:120px}
 .mws__ai b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:pre-line;
  text-overflow:clip;min-height:2.5em;line-height:1.25}

 /* 14. kör: a kávézólista után fölösleges volt a térköz a lábléc előtt — a lap alsó
    84 px-es margója az alsó sávnak szólt, de az a lap alján már el van rejtve (`is-out`). */
 .hw-main--menu{padding-bottom:0}
 .mnc{padding-bottom:24px}
 /* 24. kör: a „Kérd házhoz, vagy vidd el" sáv közelebb a kategóriablokkhoz. Eddig
    16 (blokk alsó margó) + 26 (sáv felső margó) + 32 (sáv belső felső margó) ≈ 74 px
    üres hely volt köztük — mivel a sáv is krémszínű, ez mind üresnek látszott. Most ~28 px. */
 #kiemelt{padding-bottom:10px}
 .mnc{margin-top:0;padding-top:18px}

 /* „Kérd házhoz" sáv: a két gomb EGYMÁS MELLETT, egyenlő szélességgel. */
 .mnc .mws__b{flex-wrap:nowrap;gap:8px}
 .mnc .mws__b .mnb{flex:1 1 0;min-width:0;justify-content:center;text-align:center;white-space:normal;
  padding:12px 10px;font-size:11.4px;line-height:1.2}
 .mnc .mws__b .mnb svg{flex:none;width:14px;height:14px}
}

/* ══ CÍMSOR + KATEGÓRIASÁV EGY SORBAN (2026-09-23, tulajdonosi kérés) ══════════════════
   „a kategóriásmenü fusson bele a Cannabistro étlapja szövegbe, a Cannabistro étlapja pedig
   legyen teljesen balra zárt". Csak asztalon (≥1081 px); a mobil/tablet elfogadott nézet
   változatlan. A `--mnt-w` (a cím jobb széle + 24 px) és a `--mnn-mt` (a sáv a H1 közepére
   igazítva) értékét a hw-m.js 4. modulja (`inrow()`) méri. Ragadt állapotban (`is-stuck`,
   a cím már felgördült) a sáv bal széle visszafut a képernyő széléig. */
@media(min-width:1081px){
 .mnt{padding-left:clamp(12px,1.6vw,24px);padding-right:clamp(12px,1.6vw,24px)}
 .mnt__in{max-width:none;margin:0}
 .mnn.is-row{margin-top:var(--mnn-mt,0);margin-left:var(--mnt-w,0);transition:margin-left .35s cubic-bezier(.22,1,.36,1)}
 .mnn.is-row.is-stuck{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
 .mnn.is-row{transition:none}
 .mnb,.mnb svg,.mnp__i,.mnp__im img,.mnn__lamp,.mws__cup,.mws__td,.mws__tw img{transition:none!important}
 .mws__cup,.mws__tw img,.mws__t.in .mws__tw{animation:none!important}
}