/* Ordering from inside the menu (WP-B v2, 16/10/2026). Markup: inc/megamenu.php, behaviour: assets/js/polish-nav.js.
   Built on the designer's line as it renders (computed 16/10): Birzia, ink #352b24 on white / cream #f6efe9,
   the 30px white mega surface with its long soft shadow, 14–22px radii, pills (99px), sage #657b63 as the one
   filled action colour (white text 4.9:1), orange #faa20b only as an accent ring, links #8a5600 (5.0:1),
   muted #6b625d (5.9:1). Targets ≥ 44px. Motion: transform/opacity only, off under reduced motion. */
.hb-mmx, .hb-drawer__sub-body {
	--nv-ink: #352b24; --nv-muted: #6b625d; --nv-line: rgba(53, 43, 36, .09); --nv-cream: #f6efe9; --nv-cream2: #f9f4f0;
	--nv-sage: #657b63; --nv-sage-d: #5a6f58; --nv-sage-t: #4f624d; --nv-orange: #faa20b; --nv-link: #8a5600; --nv-rose: #e5cec7;
	--nv-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Guest presets (drawer row, desktop popover) ------------------------------------------------------------ */
.hb-nav-g { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hb-nav-g__l { font-weight: 700; font-size: 14.5px; color: var(--hb-ink-warm); }
.hb-nav-g__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hb-nav-g__chip {
	min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(53, 43, 36, .16); border-radius: 99px;
	background: var(--hb-white); color: var(--hb-ink-warm); font: inherit; font-weight: 700; font-size: 15px;
	font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out;
}
.hb-nav-g__chip[aria-pressed="true"] { border-color: var(--hb-ink-warm); background: var(--hb-ink-warm); color: var(--hb-white); }
.hb-nav-g__chip:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
.hb-nav-g__in { display: inline-flex; }
.hb-nav-g__in[hidden] { display: none; }
.hb-nav-g__in input { width: 76px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(53, 43, 36, .3); border-radius: 99px; background: var(--hb-white); color: var(--hb-ink-warm); font: inherit; font-size: 15px; text-align: center; }
.hb-nav-g__in input:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	.hb-nav-g__chip:not([aria-pressed="true"]):hover { border-color: var(--hb-ink-warm); }
}
html:not(.hb-mm-js) .hb-mm__panel .hb-gq, html:not(.hb-mm-js) .hb-ti__act, html:not(.hb-mm-js) .hb-ti__peek { display: none; }

/* + → stepper (tiles, peek, drawer rows) ---------------------------------------------------------------- */
.hb-q { flex: none; color: #fff; font: inherit; }
.hb-q--add {
	position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: var(--hb-ink-warm); cursor: pointer; transition: transform .09s ease-out, background-color .16s ease-out;
}
.hb-q--add:active { transform: scale(.94); }
.hb-q__plus, .hb-q__minus { position: relative; display: block; width: 14px; height: 14px; }
.hb-q__plus::before, .hb-q__plus::after, .hb-q__minus::before { content: ""; position: absolute; inset: 6px 0 auto; height: 2px; border-radius: 2px; background: currentColor; }
.hb-q__plus::after { transform: rotate(90deg); }
.hb-q__n {
	position: absolute; top: -5px; inset-inline-end: -5px; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid #fff; border-radius: 99px;
	background: var(--hb-gold); color: var(--hb-ink-warm); font-weight: 700; font-size: 12px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.hb-q--step { display: inline-flex; align-items: center; height: 44px; overflow: hidden; border-radius: 99px; background: var(--hb-ink-warm); }
.hb-q__b { display: grid; place-items: center; width: 42px; height: 44px; padding: 0; border: 0; border-radius: 99px; background: transparent; color: #fff; cursor: pointer; transition: background-color .14s ease-out; }
.hb-q--step output { min-width: 20px; color: #fff; font-weight: 700; font-size: 15.5px; text-align: center; font-variant-numeric: tabular-nums; }
.hb-q--add:focus-visible, .hb-q__b:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
.hb-q__b:focus-visible { outline-color: #fff; outline-offset: -4px; }
.hb-q.is-busy, .hb-q__b.is-busy { opacity: .75; }
.hb-nav-out { font-size: 13px; color: #6b625d; }
@media (hover: hover) and (pointer: fine) {
	.hb-q--add:hover { background: #4a3d33; }
	.hb-q__b:hover { background: rgba(255, 255, 255, .14); }
}

/* Desktop panel ---------------------------------------------------------------------------------------- */
.hb-mmx .hb-mm__in { grid-template-columns: 232px minmax(0, 1fr) 272px; align-items: start; gap: 18px 28px; padding: 22px 24px 18px; }
.hb-mmx__rail, .hb-mmx__side { max-height: var(--hb-mmx-main, none); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.hb-mmx .hb-mm__foot { padding-top: 12px; gap: 8px 10px; }
.hb-mmx .hb-mm__foot .hb-mm__chip { min-height: 44px; }

/* Rail: the categories, each a real link; the one in the stage sits on cream with the bagel ring on its photo. */
.hb-mmx__rail { margin: -4px; padding: 4px; }
.hb-mmx__eyebrow { margin: 2px 12px 8px; font-weight: 700; font-size: 13px; color: var(--nv-muted); }
.hb-mmx__rail ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hb-mmx__ri {
	display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 4px 10px 4px 8px;
	border-radius: 16px; font-weight: 600; font-size: 15px; line-height: 1.2; transition: background-color .16s ease-out;
}
.hb-mmx__ri:not(:has(.hb-mmx__ri-img, .hb-mm__ph)) { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 12px 10px; }
.hb-mmx__ri .hb-mmx__ri-img, .hb-mmx__ri .hb-mm__ph { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; transition: box-shadow .2s ease-out; }
.hb-mmx__ri-t { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hb-mmx__ri-n { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 99px; background: rgba(53, 43, 36, .06); font-weight: 700; font-size: 12.5px; line-height: 22px; text-align: center; color: var(--nv-muted); font-variant-numeric: tabular-nums; }
.hb-mmx__ri-chev { width: 7px; height: 7px; margin-inline-start: 4px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(-45deg); opacity: .4; }
.hb-mmx__rail li.is-sub .hb-mmx__ri { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 44px; margin-inline-start: 12px; font-weight: 500; font-size: 14.5px; }
.hb-mmx__rail li.is-sub .hb-mmx__ri::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(53, 43, 36, .3); }
.hb-mmx__rail li.is-sub .hb-mmx__ri-chev { display: none; }
.hb-mm__panel .hb-mmx__ri.is-on { background: var(--nv-cream); font-weight: 700; color: var(--hb-ink-warm); }
.hb-mmx__ri.is-on .hb-mmx__ri-img, .hb-mmx__ri.is-on .hb-mm__ph { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nv-orange); }
.hb-mmx__ri.is-on .hb-mmx__ri-n { background: #fff; color: var(--hb-ink-warm); }
.hb-mmx__ri.is-on .hb-mmx__ri-chev { opacity: .9; }
.hb-mmx__rail li.is-sub .hb-mmx__ri.is-on::before { background: var(--nv-orange); }
@media (hover: hover) and (pointer: fine) {
	.hb-mmx__ri:not(.is-on):hover { background: var(--nv-cream2); }
}

/* Stage: head (title · count | guests | full page), then the dishes; it scrolls inside the panel if it must. */
.hb-mmx__stage { position: relative; display: flex; flex-direction: column; min-width: 0; max-height: var(--hb-mmx-main, none); container: hbst / inline-size; }
.hb-mmx__shead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--nv-line); }
.hb-mmx__ttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; margin-inline-end: auto; }
.hb-mmx__h { margin: 0; font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; color: var(--hb-ink-warm); }
.hb-mmx__h a { color: var(--nv-link); font-weight: 600; }
.hb-mmx__sep { margin: 0 8px; color: rgba(53, 43, 36, .3); font-weight: 400; }
.hb-mmx__n { font-weight: 600; font-size: 14px; color: var(--nv-muted); }
.hb-mmx__n:empty { display: none; }
.hb-mm__panel a.hb-mmx__full {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 99px;
	font-weight: 700; font-size: 14.5px; color: var(--nv-link); box-shadow: inset 0 0 0 1px rgba(138, 86, 0, .3); white-space: nowrap; transition: background-color .16s ease-out;
}
.hb-mmx__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: -6px; padding: 6px; }
@media (hover: hover) and (pointer: fine) {
	.hb-mm__panel a.hb-mmx__full:hover { background: #fff4dc; }
	.hb-mmx__full:hover .hb-mm__arrow { transform: translateX(-4px); }
	.hb-mmx__crumb:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Guests: one compact control in the stage head; the presets open under it. Unset = a soft orange ring (a nudge). */
.hb-gq { position: relative; }
.hb-gq__btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: 99px;
	background: #fff8ea; color: var(--hb-ink-warm); font: inherit; font-weight: 700; font-size: 14.5px; white-space: nowrap; cursor: pointer;
	box-shadow: inset 0 0 0 2px var(--nv-orange); transition: background-color .16s ease-out, box-shadow .16s ease-out;
}
.hb-gq.is-set .hb-gq__btn { background: var(--nv-cream); box-shadow: inset 0 0 0 1px rgba(53, 43, 36, .12); }
.hb-gq__btn:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
.hb-gq__ico { width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.3-5.5 6.5-5.5s5.9 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.7c2 .7 3.2 2.4 3.5 5.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.3-5.5 6.5-5.5s5.9 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.7c2 .7 3.2 2.4 3.5 5.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.hb-gq__chev { width: 9px; height: 5px; background: currentColor; -webkit-mask: url("../img/chevron-down.svg") center / contain no-repeat; mask: url("../img/chevron-down.svg") center / contain no-repeat; transition: transform .25s var(--nv-ease); }
.hb-gq__btn[aria-expanded="true"] .hb-gq__chev { transform: rotate(180deg); }
.hb-gq__pop {
	position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 6; width: 292px; padding: 14px 14px 12px; border-radius: 20px;
	background: #fff; box-shadow: 0 2px 6px rgba(36, 28, 22, .06), 0 18px 44px rgba(36, 28, 22, .2);
}
.hb-gq__pop[hidden] { display: none; }
.hb-gq__g { display: grid; gap: 10px; }
.hb-gq__g .hb-nav-g__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hb-gq__g .hb-nav-g__chip { min-width: 0; padding: 0 6px; }
.hb-gq__g .hb-nav-g__in input { width: 100%; }
.hb-gq__hint { margin: 10px 2px 0; font-size: 13px; line-height: 1.45; color: var(--nv-muted); }
@media (hover: hover) and (pointer: fine) {
	.hb-gq__btn:hover { background: #fff; }
}

/* Dish grid: 3 columns (4 when the stage is wide), two calm rows; the last cell is the way to the full page. */
.hb-mmx__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hb-mmx__grid > .hb-ti:nth-child(n+6) { display: none; }
.hb-mmx__grid--row > .hb-ti:nth-child(n+4) { display: none; }
@container hbst (min-width: 900px) {
	.hb-mmx__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.hb-mmx__grid > .hb-ti:nth-child(n+6) { display: flex; }
	.hb-mmx__grid > .hb-ti:nth-child(n+8) { display: none; }
	.hb-mmx__grid--row > .hb-ti:nth-child(n+4) { display: flex; }
	.hb-mmx__grid--row > .hb-ti:nth-child(n+5) { display: none; }
}

/* The dish tile */
.hb-ti {
	position: relative; display: flex; flex-direction: column; min-width: 0; padding: 6px; border-radius: 20px; background: #fff;
	box-shadow: inset 0 0 0 1px var(--nv-line); list-style: none; transition: box-shadow .22s var(--nv-ease), transform .22s var(--nv-ease);
}
.hb-ti.is-in { box-shadow: inset 0 0 0 2px var(--nv-sage); }
.hb-ti__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: #f3ebe6; }
.hb-ti__img { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.hb-ti__img .hb-mm__img, .hb-ti__img .hb-mm__ph { width: 100%; height: 100%; object-fit: cover; }
.hb-ti__tag { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .94); font-weight: 700; font-size: 12.5px; line-height: 1.4; color: var(--hb-ink-warm); pointer-events: none; }
.hb-ti__in { position: absolute; top: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 9px; border-radius: 99px; background: var(--nv-sage); font-weight: 700; font-size: 12.5px; line-height: 1.4; color: #fff; pointer-events: none; }
.hb-ti__in::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg); }
.hb-ti__in[hidden] { display: none; }
.hb-ti__peek {
	position: absolute; bottom: 8px; inset-inline-end: 8px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 99px;
	background: rgba(53, 43, 36, .86); color: #fff; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
	opacity: 0; transform: translateY(4px); transition: opacity .18s ease-out, transform .22s var(--nv-ease);
}
.hb-ti__peek::before { content: ""; position: absolute; inset: -6px; }
.hb-ti__peek:focus-visible { opacity: 1; transform: none; outline: 2px solid #fff; outline-offset: -4px; }
.hb-ti__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 6px 2px; }
.hb-mm__panel a.hb-ti__name { overflow: hidden; font-weight: 700; font-size: 15.5px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; color: var(--hb-ink-warm); }
.hb-ti__desc { overflow: hidden; min-height: 18px; margin: 0; font-size: 13px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; color: var(--nv-muted); }
.hb-ti__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.hb-ti__price { display: grid; gap: 1px; min-width: 0; margin: 0; }
.hb-ti__p { font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--hb-ink-warm); font-variant-numeric: tabular-nums; }
.hb-ti__sug { overflow: hidden; font-weight: 600; font-size: 12.5px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; color: var(--nv-sage-t); }
.hb-ti__sug:empty { display: none; }
.hb-ti__act { display: flex; flex: none; }
@media (hover: hover) and (pointer: fine) {
	.hb-ti:hover { box-shadow: inset 0 0 0 1px rgba(53, 43, 36, .12), 0 12px 28px rgba(36, 28, 22, .1); transform: translateY(-2px); }
	.hb-ti.is-in:hover { box-shadow: inset 0 0 0 2px var(--nv-sage), 0 12px 28px rgba(36, 28, 22, .1); }
	.hb-ti:hover .hb-ti__img .hb-mm__img { transform: scale(1.04); }
	.hb-ti:hover .hb-ti__peek, .hb-ti:focus-within .hb-ti__peek { opacity: 1; transform: none; }
	.hb-mm__panel a.hb-ti__name:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (hover: none), (pointer: coarse) { .hb-ti__peek { opacity: 1; transform: none; } }

/* The closing tile: "לכל 23 המנות" */
.hb-ti-all { display: flex; min-width: 0; list-style: none; }
.hb-mm__panel .hb-ti-all a {
	position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 4px; min-height: 160px; padding: 18px 18px 20px;
	border-radius: 20px; background: var(--nv-cream); color: var(--hb-ink-warm); transition: background-color .2s ease-out;
}
.hb-ti-all__b { width: 44px; height: 44px; margin-bottom: 6px; filter: drop-shadow(0 3px 5px rgba(36, 28, 22, .18)); transition: transform .5s var(--nv-ease); }
.hb-ti-all strong { font-size: 16px; line-height: 1.3; }
.hb-ti-all small { font-size: 13px; line-height: 1.45; color: var(--nv-muted); }
.hb-ti-all__go { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 8px; border-radius: 50%; background: var(--hb-ink-warm); color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.hb-mm__panel .hb-ti-all a:hover { background: #efe5dd; }
	.hb-ti-all a:hover .hb-mm__arrow { transform: translateX(-4px); }
	.hb-ti-all a:hover .hb-ti-all__b { transform: rotate(-35deg); }
}

/* Loading / empty / error */
.hb-ti--skel { padding: 6px; }
.hb-ti__sk { display: block; aspect-ratio: 16 / 10; margin-bottom: 12px; }
.hb-ti--skel .hb-skel--line { display: block; width: 70%; margin: 0 6px 8px; }
.hb-ti--skel .hb-ti__sk2 { width: 45%; }
.hb-mmx__occsk { min-height: 150px; border-radius: 18px; list-style: none; }
.hb-nav-skel--row { min-height: 84px; margin-bottom: 8px; border-radius: 18px; list-style: none; }
.hb-nav-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 0 4px; font-size: 14px; color: #6b625d; }
.hb-nav-loading__b { animation: hb-nav-turn .9s linear infinite; }
@keyframes hb-nav-turn { to { transform: rotate(360deg); } }
.hb-nav-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 12px; text-align: center; font-size: 15px; color: var(--hb-ink-warm); }
.hb-nav-empty p { margin: 0; }
.hb-nav-empty a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: #8a5600; }
.hb-mmx__err, .hb-mmx__lead { margin: 6px 0 12px; font-size: 15px; line-height: 1.5; color: var(--hb-ink-warm); }
.hb-mmx__err a { color: #8a5600; font-weight: 700; }
.hb-mmx__sub { margin: 2px 0 10px; font-weight: 700; font-size: 14px; color: var(--nv-muted); }
.hb-mmx__occfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--nv-line); }
.hb-mm__panel .hb-mmx__qbtn { margin: 0; background: var(--nv-sage); color: #fff; }

/* The peek: one dish, closer, over the stage (both sizes, what is on it, add) */
.hb-peek {
	position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: start; gap: 22px;
	overflow-y: auto; padding: 16px; border-radius: 24px; background: #fff; box-shadow: 0 2px 6px rgba(36, 28, 22, .06), 0 24px 60px rgba(36, 28, 22, .2);
}
.hb-peek__media { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px; background: #f3ebe6; }
.hb-peek__media .hb-mm__img, .hb-peek__media .hb-mm__ph { width: 100%; height: 100%; object-fit: cover; }
.hb-peek__x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--nv-cream); cursor: pointer; }
.hb-peek__x::before, .hb-peek__x::after { content: ""; position: absolute; top: 21px; left: 14px; width: 16px; height: 2px; border-radius: 2px; background: var(--hb-ink-warm); transform: rotate(45deg); }
.hb-peek__x::after { transform: rotate(-45deg); }
.hb-peek__x:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
.hb-pk { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 6px 4px 4px 52px; }
.hb-pk p { margin: 0; }
.hb-pk__eyebrow { font-weight: 700; font-size: 13px; color: var(--nv-muted); }
.hb-pk__t { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; color: var(--hb-ink-warm); }
.hb-pk__d { font-size: 15px; line-height: 1.55; color: var(--hb-ink-warm); }
.hb-pk__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hb-pk__tags li { padding: 4px 12px; border-radius: 99px; background: var(--nv-cream); font-weight: 700; font-size: 13px; }
.hb-pk__sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 2px 0 0; }
.hb-pk__sizes > div { padding: 10px 12px; border-radius: 14px; background: var(--nv-cream2); box-shadow: inset 0 0 0 1px var(--nv-line); }
.hb-pk__sizes dt { font-weight: 700; font-size: 14px; }
.hb-pk__sizes dd { margin: 2px 0 0; font-size: 13.5px; color: var(--nv-muted); font-variant-numeric: tabular-nums; }
.hb-pk__sizes dd bdi { font-weight: 700; color: var(--hb-ink-warm); }
.hb-pk__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 10px 12px 10px 10px; border-radius: 18px; background: var(--nv-cream); }
.hb-pk__sug { font-weight: 700; font-size: 15px; color: var(--nv-sage-t); }
.hb-pk.is-in .hb-pk__row { box-shadow: inset 0 0 0 2px var(--nv-sage); }
.hb-pk__note { font-size: 13px; line-height: 1.45; color: var(--nv-muted); }
.hb-mm__panel a.hb-pk__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 15px; color: var(--nv-link); }

/* Occasion cards (a group) */
.hb-mmx__occs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hb-mmx__occ { position: relative; display: grid; align-content: end; min-height: 168px; overflow: hidden; border-radius: 20px; isolation: isolate; padding: 12px 16px 14px; }
.hb-mmx__occ > .hb-mm__img, .hb-mmx__occ > .hb-mm__ph { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hb-mmx__occ::after { content: ""; position: absolute; inset: 30% 0 0; z-index: -1; background: linear-gradient(to top, rgba(28, 22, 18, .84), rgba(28, 22, 18, 0)); }
.hb-mm__panel .hb-mmx__occ-t { font-weight: 700; font-size: 17px; color: var(--hb-white); }
.hb-mmx__occ small { font-size: 13px; color: rgba(255, 255, 255, .92); }
@media (hover: hover) and (pointer: fine) { .hb-mmx__occ:hover > .hb-mm__img { transform: scale(1.05); } }
@container hbst (min-width: 900px) { .hb-mmx__occ { min-height: 200px; } }

/* Menu cards (an occasion / the event menus) */
.hb-mmx__menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.hb-mmx__menu { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--nv-line); }
.hb-mmx__menus--3 .hb-mmx__menu { grid-template-columns: 1fr; }
.hb-mmx__menu-img { display: block; overflow: hidden; border-radius: 14px; background: #f3ebe6; }
.hb-mmx__menu-img img { display: block; width: 100%; height: 100%; min-height: 76px; aspect-ratio: 1; object-fit: cover; }
.hb-mmx__menus--3 .hb-mmx__menu-img img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.hb-mmx__menu-b { display: grid; align-content: start; gap: 2px; min-width: 0; padding-inline: 2px; }
.hb-mmx__menu-b p { margin: 0; }
.hb-mmx__menu-t { font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.hb-mmx__menu-tag { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.4; color: #6b625d; }
.hb-mmx__menu-p { font-weight: 700; font-size: 14.5px; }
.hb-mmx__menu-tot { font-size: 13px; color: var(--nv-sage-t); font-weight: 600; }
.hb-mmx__menu-min { font-size: 12.5px; font-weight: 700; color: #8a4b00; }
.hb-mmx__menu-min[hidden] { display: none; }
.hb-mm__panel .hb-mmx__menu-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: 14.5px; color: #8a5600; }
.hb-mmx__st { margin-top: 4px; }
.hb-mmx__stage[data-hb-nav-stage="stations"] .hb-gq { display: none; }

/* Summary column: the total first, then how far it feeds the guests, then one filled action. */
.hb-mmx__side { display: grid; align-content: start; gap: 12px; min-width: 0; margin: -4px; padding: 4px; }
.hb-mmx__sum { display: grid; gap: 12px; padding: 16px 18px 18px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--nv-line); color: var(--hb-ink-warm); }
.hb-mmx__sum:empty { display: none; }
.hb-sum__head { padding-bottom: 12px; border-bottom: 1px dashed rgba(200, 128, 3, .45); }
.hb-sum__head .hb-bhead__t { font-size: 18px; }
.hb-sum__ctx { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 -6px; font-weight: 600; font-size: 14.5px; }
.hb-mm__panel .hb-sum__edit { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--nv-sage-t); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hb-sum__edit[hidden] { display: none !important; }
.hb-sum__edit:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
.hb-sum__total { display: grid; gap: 2px; }
.hb-sum__lbl { font-size: 13px; color: var(--nv-muted); }
.hb-sum__amt { font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hb-sum__per { font-size: 14px; color: var(--nv-muted); }
.hb-sum__per:empty { display: none; }
.hb-sum__fit { display: grid; gap: 6px; }
.hb-sum__fit[hidden] { display: none; }
.hb-sum__bar { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #efe6df; }
.hb-sum__bar > span { position: absolute; inset: 0; border-radius: inherit; background: #d38c12; transform-origin: 100% 50%; transform: scaleX(var(--p, 0)); transition: transform .5s var(--nv-ease); }
.hb-sum__fit.is-full .hb-sum__bar > span { background: var(--nv-sage); }
.hb-sum__fitt { font-weight: 600; font-size: 13.5px; color: #8a4b00; }
.hb-sum__fit.is-full .hb-sum__fitt { color: var(--nv-sage-t); }
.hb-sum__lines { display: grid; gap: 6px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--nv-line); list-style: none; }
.hb-sum__lines[hidden] { display: none; }
.hb-sum__lines li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.hb-sum__lines img, .hb-sum__ph { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; background: #f3ebe6; }
.hb-sum__ln { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hb-sum__lq { font-weight: 700; color: var(--nv-muted); font-variant-numeric: tabular-nums; }
.hb-sum__lines li.hb-sum__lmore { display: block; padding-inline-start: 42px; color: var(--nv-muted); }
.hb-mm__panel a.hb-sum__go {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: 99px;
	background: var(--nv-sage); color: #fff; font-weight: 700; font-size: 16px; transition: background-color .16s ease-out;
}
.hb-mm__panel a.hb-sum__more { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: -6px; font-weight: 700; font-size: 14px; color: var(--nv-link); }
.hb-sum__empty { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px; }
.hb-sum__bagel { width: 40px; height: 40px; filter: drop-shadow(0 3px 5px rgba(36, 28, 22, .18)); }
.hb-sum__empty p { display: grid; gap: 4px; margin: 0; }
.hb-sum__empty strong { font-size: 15px; }
.hb-sum__empty span { font-size: 13.5px; line-height: 1.5; color: var(--nv-muted); }
@media (hover: hover) and (pointer: fine) {
	.hb-mm__panel a.hb-sum__go:hover { background: var(--nv-sage-d); color: #fff; }
	.hb-sum__go:hover .hb-mm__arrow { transform: translateX(-4px); }
	.hb-mm__panel a.hb-sum__more:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* "Not sure how much?" → the builder (two questions); ready packages as a quiet second link. */
.hb-mmx__pk { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px; border-radius: 22px; background: var(--nv-rose); color: var(--hb-ink-warm); }
.hb-mmx__pk-media { display: block; overflow: hidden; width: 64px; height: 64px; border-radius: 14px; }
.hb-mmx__pk-media .hb-mm__img, .hb-mmx__pk-media .hb-mm__ph { width: 100%; height: 100%; object-fit: cover; }
.hb-mmx__pk-t { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.hb-mmx__pk-t p { margin: 0; }
.hb-mmx__pk-h { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.hb-mmx__pk-s { font-size: 13.5px; line-height: 1.45; }
.hb-mm__panel a.hb-mmx__pk-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 2px; font-weight: 700; font-size: 14.5px; color: var(--hb-ink-warm); }
.hb-mm__panel a.hb-mmx__pk-alt { display: inline-flex; align-items: center; min-height: 32px; font-size: 13.5px; color: var(--hb-ink-warm); text-decoration: underline; text-underline-offset: 3px; }
.hb-mmx__quote { grid-template-rows: auto; }
.hb-mmx__quote .hb-mm__promo-body { padding: 16px 18px 18px; }
.hb-mmx__quote .hb-mm__promo-h { font-size: 17px; }
.hb-mm__panel .hb-mmx__quote .hb-mm__btn { width: 100%; white-space: nowrap; font-size: 15px; padding: 0 18px; }
@media (hover: hover) and (pointer: fine) {
	.hb-mmx__pk-go:hover .hb-mm__arrow { transform: translateX(-4px); }
	.hb-mm__panel .hb-mmx__qbtn:hover { background: var(--nv-sage-d); color: #fff; }
}

/* Width steps */
@media (max-width: 1439px) {
	.hb-mmx .hb-mm__in { grid-template-columns: 210px minmax(0, 1fr) 244px; gap: 16px 22px; padding-inline: 20px; }
	.hb-mmx__h { font-size: 20px; }
	.hb-mmx__ri { gap: 10px; font-size: 14.5px; }
	.hb-sum__amt { font-size: 27px; }
}
@media (min-width: 1700px) {
	.hb-mmx .hb-mm__in { grid-template-columns: 252px minmax(0, 1fr) 292px; gap: 20px 32px; padding: 24px 28px 20px; }
}

/* Without JavaScript the rail is a plain list of links and the stage shows the printed first preview. */
html:not(.hb-mm-js) .hb-mmx__rail, html:not(.hb-mm-js) .hb-mmx__stage, html:not(.hb-mm-js) .hb-mmx__side { max-height: none; }
html:not(.hb-mm-js) .hb-mmx__sum { display: none; }

/* Drawer, compact rebuild (16/10/2026; owner: "people won't get to it"). One clear order on one screen, the Airbnb /
   Wolt pattern: a slim head (back · title · "לעמוד המלא"), a sticky sideways row of categories (photo + name), and
   right under it the dishes of the one selected, with +. Guests sit behind one control; one quiet help row ends the
   list; the foot is one slim row (the order and "לסל", phone and WhatsApp as round icons). Everything 44px+. */
#hb-drawer .hb-drawer__sub { padding: 0 14px 18px; scroll-padding-top: 160px; }
#hb-drawer .hb-drawer__sub-head {
	grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; height: 56px; margin: 0 -14px; padding: 6px 12px; border-bottom: 0;
}
#hb-drawer .hb-drawer__back { grid-row: auto; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 0; }
#hb-drawer .hb-drawer__back-ico { width: 9px; height: 9px; margin-inline-start: -3px; }
#hb-drawer .hb-drawer__sub-title { overflow: hidden; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; }
#hb-drawer a.hb-dr__full {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-weight: 700; font-size: 14px;
	color: #8a5600; text-decoration: none; white-space: nowrap;
}
/* The guests control lives in the head row (always in view); short label, the full sentence is its name. */
#hb-drawer .hb-drawer__sub-head { z-index: 4; }
#hb-drawer .hb-drawer__sub-head .hb-dr__gq { flex: none; }
#hb-drawer .hb-drawer__sub-head .hb-dr__gq[hidden] { display: none; }
#hb-drawer .hb-drawer__sub-head .hb-gq__btn { padding: 0 12px 0 10px; font-size: 14px; }
#hb-drawer .hb-drawer__sub-head .hb-gq__pop { inset-inline-start: auto; inset-inline-end: 0; width: min(300px, calc(100vw - 52px)); }
#hb-drawer .hb-drawer__sub-head .hb-nav-g__l { display: none; }
#hb-drawer .hb-drawer__sub-head .hb-dr__guests .hb-nav-g__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
#hb-drawer .hb-drawer__sub-head .hb-dr__guests .hb-nav-g__chip { min-width: 0; padding: 0 6px; }
#hb-drawer .hb-drawer__sub-head .hb-dr__guests .hb-nav-g__in input { width: 100%; }
#hb-drawer a.hb-dr__full:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; border-radius: 8px; }
/* The top bar: search, account and cart on one 60px row (it was 73px). */
#hb-drawer .hb-drawer__top { padding-block: 8px; }
#hb-drawer .hb-dsearch__bar input[type="search"] { height: 44px; border-radius: 14px; font-size: 16px; }

.hb-drawer__sub-body .hb-dr { display: block; }
/* Categories: a sticky row under the head; it scrolls sideways, the chosen one is ink. */
.hb-drawer__sub-body .hb-dr__cats {
	position: sticky; top: 56px; z-index: 3; margin: 0 -14px; padding: 0 0 4px; background: var(--hb-filter-bg);
	box-shadow: 0 1px 0 rgba(53, 43, 36, .08);
}
.hb-drawer__sub-body ul.hb-dr__crow {
	display: flex; gap: 4px; margin: 0; padding: 4px 10px 2px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
	scroll-padding-inline: 14px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px); mask-image: linear-gradient(to right, transparent 0, #000 26px);
}
.hb-drawer__sub-body ul.hb-dr__crow::-webkit-scrollbar { display: none; }
.hb-drawer__sub-body ul.hb-dr__crow > li { flex: none; scroll-snap-align: start; }
.hb-drawer__sub-body ul.hb-dr__crow a.hb-dr__cat {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; width: 74px; min-height: 44px; padding: 2px 2px 6px;
	border: 0; border-radius: 14px; background: none; font-weight: 600; font-size: 12.5px; line-height: 1.2; color: #5f524c; text-align: center; text-decoration: none;
	transition: color .16s ease-out;
}
.hb-dr__cat-img { display: block; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: #f3ebe6; transition: box-shadow .2s ease-out; }
.hb-dr__cat-img img, .hb-dr__cat-img .hb-dr__ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-dr__cat-t { display: -webkit-box; overflow: hidden; min-height: 2.4em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* The chosen one: the bagel's orange ring on its photo, ink label and a short ink bar under it (Airbnb's row). */
.hb-drawer__sub-body ul.hb-dr__crow a.hb-dr__cat.is-on { font-weight: 700; color: var(--hb-ink-warm); }
.hb-dr__cat.is-on .hb-dr__cat-img { box-shadow: 0 0 0 2px var(--hb-filter-bg), 0 0 0 4px var(--nv-orange); }
.hb-dr__cat.is-on::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 22px; height: 2px; border-radius: 2px; background: var(--hb-ink-warm); transform: translateX(-50%); }
.hb-drawer__sub-body a.hb-dr__cat:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 0; }
.hb-drawer__sub-body a.hb-dr__cat:active .hb-dr__cat-img { transform: scale(.95); }
.hb-drawer__sub-body .hb-dr__csep { display: flex; align-items: center; max-width: 56px; padding-inline: 8px 2px; border-inline-start: 1px solid rgba(53, 43, 36, .14); font-weight: 700; font-size: 11.5px; line-height: 1.25; color: #6b625d; }

/* The stage: name · count and the guests control on one row, then the dishes. */
.hb-drawer__sub-body .hb-dr__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 8px; }
.hb-drawer__sub-body .hb-dr__sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.hb-drawer__sub-body .hb-dr__sh-t { overflow: hidden; min-width: 0; margin: 0; font-size: 13.5px; color: #6b625d; white-space: nowrap; text-overflow: ellipsis; }
.hb-drawer__sub-body .hb-dr__sh-t strong { font-weight: 700; font-size: 17px; color: var(--hb-ink-warm); }
.hb-drawer__sub-body .hb-dr__gq { flex: none; }
.hb-drawer__sub-body .hb-dr__gq .hb-gq__btn { padding: 0 12px 0 10px; font-size: 14px; }
.hb-drawer__sub-body .hb-dr__gq .hb-gq__pop { inset-inline-start: auto; inset-inline-end: 0; width: min(300px, calc(100vw - 52px)); }
.hb-drawer__sub-body .hb-dr__gq .hb-dr__guests { padding: 0; border-radius: 0; }
.hb-drawer__sub-body .hb-dr__gq .hb-nav-g__l { display: none; }
.hb-drawer__sub-body .hb-dr__guests .hb-nav-g__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.hb-drawer__sub-body .hb-dr__guests .hb-nav-g__chip { min-width: 0; padding: 0 6px; }
.hb-drawer__sub-body .hb-dr__guests .hb-nav-g__in input { width: 100%; }
.hb-drawer__sub-body .hb-dr__h { margin: 4px 0 0; font-weight: 700; font-size: 13.5px; color: #6b625d; }
.hb-drawer__sub-body .hb-dr__err { margin: 8px 0; font-size: 15px; }

/* Dish rows: photo, name, one line, price + guests line, + → stepper. 64px photos keep five rows in view. */
.hb-drawer__sub-body ul.hb-dr__prows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hb-drawer__sub-body .hb-dr__prow {
	display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px 6px 6px;
	border-radius: 18px; background: var(--hb-white); box-shadow: inset 0 0 0 1px rgba(53, 43, 36, .06); transition: box-shadow .2s ease-out;
}
.hb-drawer__sub-body .hb-dr__prow.is-in { grid-template-columns: 64px minmax(0, 1fr); row-gap: 4px; box-shadow: inset 0 0 0 2px var(--nv-sage); }
.hb-drawer__sub-body .hb-dr__prow.is-in .hb-dr__pimg { grid-row: span 2; align-self: start; }
.hb-drawer__sub-body .hb-dr__prow.is-in .hb-dr__pact { grid-column: 2; justify-self: end; }
.hb-drawer__sub-body .hb-dr__prow a { display: block; min-height: 0; padding: 0; border: 0; }
.hb-drawer__sub-body a.hb-dr__pimg { overflow: hidden; width: 64px; height: 64px; border-radius: 12px; background: #f3ebe6; }
.hb-drawer__sub-body .hb-dr__pimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-drawer__sub-body .hb-dr__ptxt { position: relative; display: grid; gap: 1px; min-width: 0; }
/* The dish name answers over its whole text block (name, price, guests line): a 60px+ target, not a 20px line. */
.hb-drawer__sub-body a.hb-dr__pname::after { content: ""; position: absolute; inset: -6px 0; }
.hb-drawer__sub-body a.hb-dr__pname { overflow: hidden; font-weight: 700; font-size: 15px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; color: var(--hb-ink-warm); }
/* No description line on the phone (name, price and the guests line say enough; the dish page has the rest): a row is 76px, not 96. */
.hb-drawer__sub-body .hb-dr__pdesc { display: none; }
.hb-drawer__sub-body .hb-dr__pmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 1px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--nv-sage-t); }
.hb-drawer__sub-body .hb-dr__pmeta bdi { font-weight: 700; font-size: 15px; color: var(--hb-ink-warm); }
.hb-drawer__sub-body .hb-dr__pmeta [data-sug]:empty { display: none; }
.hb-drawer__sub-body .hb-dr__pact { display: flex; }
.hb-drawer__sub-body .hb-q__b { width: 44px; }
.hb-drawer__sub-body .hb-nav-skel--row { min-height: 76px; margin: 0; border-radius: 18px; }

/* Event menus: photo · name / price · minimum (the total once guests are set) · an arrow; the whole card is the way in. */
.hb-drawer__sub-body ul.hb-dr__menus { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hb-drawer__sub-body .hb-dr__menu { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 32px; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 18px; background: var(--hb-white); box-shadow: inset 0 0 0 1px rgba(53, 43, 36, .06); }
.hb-drawer__sub-body a.hb-dr__menu-img { overflow: hidden; width: 56px; height: 56px; min-height: 0; padding: 0; border: 0; border-radius: 12px; background: #f3ebe6; }
.hb-drawer__sub-body .hb-dr__menu-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-drawer__sub-body .hb-dr__menu-b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; grid-column: 2 / span 2; padding-inline-end: 38px; }
.hb-drawer__sub-body .hb-dr__menu-b p { margin: 0; font-size: 13px; line-height: 1.4; }
.hb-drawer__sub-body .hb-dr__menu-t { flex: 1 0 100%; overflow: hidden; font-weight: 700; font-size: 15px !important; white-space: nowrap; text-overflow: ellipsis; }
.hb-drawer__sub-body .hb-dr__menu-tag { display: none; }
.hb-drawer__sub-body .hb-dr__menu-p { font-weight: 700; }
.hb-drawer__sub-body .hb-dr__menu-min::before { content: "·"; margin-inline-end: 6px; color: #6b625d; }
.hb-drawer__sub-body .hb-dr__menu-min[hidden] { display: none; }
.hb-drawer__sub-body .hb-dr__menu-min.is-below { flex: 1 0 100%; }
.hb-drawer__sub-body .hb-dr__menu-min.is-below::before { content: none; }
.hb-drawer__sub-body .hb-dr__menu-tot { flex: 1 0 100%; display: none; color: var(--nv-sage-t); font-weight: 600; }
.hb-drawer__sub-body .hb-dr__menu.has-g .hb-dr__menu-tot { display: block; }
.hb-drawer__sub-body a.hb-dr__menu-go { position: absolute; top: 50%; inset-inline-end: 8px; display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--hb-filter-bg); color: var(--hb-ink-warm); transform: translateY(-50%); }
.hb-drawer__sub-body a.hb-dr__menu-go::before { content: ""; position: absolute; inset: -6px; }
.hb-dr__menu-go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hb-drawer__sub-body .hb-dr__menu:active { transform: scale(.99); }

/* After the list: the full page as a small link, then one quiet help row (builder / quote). */
.hb-drawer__sub-body a.hb-dr__l2more { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; font-weight: 700; font-size: 14.5px; color: #8a5600; text-decoration: none; }
.hb-drawer__sub-body a.hb-dr__help {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; margin-top: 2px; padding: 8px 14px 8px 12px;
	border: 0; border-radius: 16px; background: var(--hb-white); box-shadow: inset 0 0 0 1px rgba(53, 43, 36, .08); color: var(--hb-ink-warm); text-decoration: none;
}
.hb-drawer__sub-body a.hb-dr__help--q { grid-template-columns: minmax(0, 1fr) auto; background: var(--hb-ink-warm); box-shadow: none; color: var(--hb-white); }
.hb-dr__help-b { width: 28px; height: 28px; }
.hb-drawer__sub-body .hb-dr__help-t { display: grid; gap: 1px; min-width: 0; }
.hb-drawer__sub-body .hb-dr__help-t strong { font-size: 15px; }
.hb-drawer__sub-body .hb-dr__help-t small { font-weight: 400; font-size: 13px; color: #6b625d; }
.hb-drawer__sub-body .hb-dr__help--q .hb-dr__help-t small { color: rgba(255, 255, 255, .86); }
.hb-drawer__sub-body .hb-dr__help-t small:empty { display: none; }
.hb-drawer__sub-body a.hb-dr__help:focus-visible, .hb-drawer__sub-body a.hb-dr__l2more:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
.hb-dr__arrow { flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--mm-arrow) center / contain no-repeat; mask: var(--mm-arrow) center / contain no-repeat; }
.hb-drawer__sub-body .hb-dr__ph { display: block; width: 100%; height: 100%; background: #f3ebe6; }

/* The foot: one slim row. With an order: [order · total · לסל] [phone] [WhatsApp]; without: [start] [phone] [WhatsApp]. */
#hb-drawer .hb-drawer__foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
#hb-drawer .hb-drawer__foot > .hb-dr__sum, #hb-drawer .hb-drawer__foot > .hb-drawer__cta { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; min-height: 48px; }
#hb-drawer .hb-drawer__foot > .hb-dr__sum[hidden], #hb-drawer .hb-drawer__foot.has-order > .hb-drawer__cta { display: none; }
#hb-drawer .hb-drawer__foot .hb-drawer__cta.hb-btn { padding-inline: 16px; font-size: 17px; }
.hb-drawer__foot .hb-dr__sum {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 0 14px; border-radius: 99px;
	background: var(--hb-ink-warm); color: var(--hb-white); font-weight: 700; font-size: 15px; text-decoration: none;
}
.hb-dr__sum-n { overflow: hidden; margin-inline-end: auto; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.hb-dr__sum-go { display: inline-flex; flex: none; align-items: center; gap: 6px; white-space: nowrap; }
.hb-dr__sum-mark { flex: none; width: 22px; height: 22px; margin-inline-end: -2px; }
.hb-drawer__foot .hb-dr__sum:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
#hb-drawer .hb-drawer__reach { display: flex; flex: none; gap: 6px; margin: 0; }
#hb-drawer .hb-drawer__reach-link { width: 48px; height: 48px; min-height: 48px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; }
#hb-drawer .hb-drawer__reach-link bdi { display: none; }
#hb-drawer .hb-drawer__reach-ico { width: 20px; height: 20px; }
@media (max-width: 400px) {
	#hb-drawer .hb-drawer__sub-head { gap: 8px; padding-inline: 10px; }
	#hb-drawer .hb-drawer__sub-title { font-size: 16px; }
	#hb-drawer .hb-drawer__sub-head .hb-gq__btn { gap: 6px; padding: 0 10px 0 8px; }
	.hb-dr__sum-mark { display: none; }
	.hb-drawer__foot .hb-dr__sum { padding-inline: 14px; font-size: 14.5px; }
	#hb-drawer .hb-drawer__reach-link { width: 44px; height: 44px; min-height: 44px; }
}

/* Reduced motion (and the site's own switch) */
@media (prefers-reduced-motion: reduce) {
	.hb-nav-g__chip, .hb-q--add, .hb-mmx__ri, .hb-ti, .hb-ti__peek, .hb-sum__bar > span, .hb-drawer__sub-body a.hb-dr__cat, .hb-drawer__sub-body .hb-dr__prow { transition: none; }
	.hb-ti:hover { transform: none; }
	.hb-nav-loading__b { animation: none; }
}
html.hb-a11y-motion .hb-q--add, html.hb-a11y-motion .hb-mmx__ri, html.hb-a11y-motion .hb-ti, html.hb-a11y-motion .hb-ti__peek, html.hb-a11y-motion .hb-sum__bar > span { transition: none; }
html.hb-a11y-motion .hb-ti:hover { transform: none; }
html.hb-a11y-motion .hb-nav-loading__b { animation: none; }

/* Summary without guests yet: one clear next step */
.hb-sum__ctx[hidden] { display: none; }
.hb-sum__pick { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 99px; background: #fff8ea; box-shadow: inset 0 0 0 2px var(--nv-orange); color: var(--hb-ink-warm); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.hb-sum__pick[hidden] { display: none; }
.hb-sum__pick:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .hb-sum__pick:hover { background: #fff; } }
@media (prefers-reduced-motion: reduce) { .hb-ti-all__b { transition: none; } }
/* Short windows: a slightly wider crop so two rows of dishes still fit without scrolling. */
@media (max-height: 860px) { .hb-ti__media, .hb-ti__sk { aspect-ratio: 2 / 1; } .hb-mmx__shead { margin-bottom: 12px; padding-bottom: 12px; } }
.hb-mm__panel a.hb-mmx__pk-alt { min-height: 44px; }

/* Fix wave FX-2 (16/10/2026) ------------------------------------------------------------------------------
   One add control (the fallback until FX-1's hbOrder.ui is live, drawn like it): "+ הוספה" in sage with white text
   (the only primary colour), then − n + on white with a sage hairline, a bin at 1. 44px everywhere. No number badge. */
.hb-q--add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 44px; height: 44px; padding: 0 16px 0 14px; border-radius: 99px; background: var(--nv-sage); color: #fff; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; }
.hb-q--add .hb-q__plus { width: 12px; height: 12px; }
.hb-q--add .hb-q__plus::before, .hb-q--add .hb-q__plus::after { inset: 5px 0 auto; }
.hb-q__n { display: none; }
.hb-q--step { background: #fff; box-shadow: inset 0 0 0 1.5px var(--nv-sage); }
.hb-q--step .hb-q__b { color: var(--nv-sage-t); }
.hb-q--step output { color: var(--hb-ink-warm); }
.hb-q__b:focus-visible { outline-color: var(--hb-ink-warm); outline-offset: -3px; }
.hb-q__bin { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
	.hb-q--add:hover { background: var(--nv-sage-d); }
	.hb-q--step .hb-q__b:hover { background: rgba(101, 123, 99, .12); }
}
/* "בהזמנה" on a tile: a small mark, not a banner over the photo (review P7). */
.hb-ti__in { gap: 4px; padding: 2px 8px 2px 7px; font-size: 11.5px; }
.hb-ti__in::before { width: 7px; height: 4px; }
/* Suggestion lines are words; nothing to say = no empty line. */
[data-sug][hidden] { display: none; }

/* The chevron next to a header item: 26px you can see, a 44px area that answers. */
.hb-mm__toggle { width: 26px; height: 26px; }
.hb-mm__toggle::before { inset: -9px; }

/* Menus: the minimum is always on the card; under it, the card says so instead of a total it cannot take. */
.hb-mmx__menu-min:not(.is-below), .hb-drawer__sub-body .hb-dr__menu-min:not(.is-below) { font-weight: 600; color: #6b625d; }
.hb-mmx__menu-min.is-below, .hb-drawer__sub-body .hb-dr__menu-min.is-below { color: #8a4b00; }

/* Boxes stage (the "מארזים אישיים" row in the trays and catering menus) */
.hb-mmx__box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 22px; }
.hb-mmx__box-img { display: block; overflow: hidden; border-radius: 18px; background: #f3ebe6; }
.hb-mmx__box-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hb-mmx__box-b { display: grid; gap: 14px; min-width: 0; }
.hb-mmx__box-b .hb-mmx__lead { margin: 0; font-size: 15.5px; line-height: 1.6; }
.hb-mmx__box-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hb-mmx__box-facts li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--nv-cream); }
.hb-mmx__box-facts strong { font-size: 17px; color: var(--hb-ink-warm); }
.hb-mmx__box-facts span { font-size: 13px; color: #5f524c; }
.hb-mmx__box .hb-mmx__occfoot { margin-top: 2px; }

/* Short windows (1280×900 and lower): rail rows tighten so the whole rail fits without scrolling. */
@media (min-width: 1024px) and (max-height: 960px) {
	.hb-mmx .hb-mm__in { padding-block: 16px 14px; row-gap: 14px; }
	.hb-mmx__ri { grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 44px; padding-block: 2px; }
	.hb-mmx__ri .hb-mmx__ri-img, .hb-mmx__ri .hb-mm__ph { width: 34px; height: 34px; border-radius: 10px; }
	.hb-mmx__rail ul { gap: 0; }
	.hb-mmx__eyebrow { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .hb-q--add, .hb-q--step .hb-q__b { transition: none; } }
/* Tiles: the suggestion may take two short lines next to "+ הוספה" (never cut to "מגש לעד 15 או."). */
.hb-ti__sug { overflow: visible; white-space: normal; text-overflow: clip; text-wrap: balance; }

/* Category icons (package BG, 16/10/2026): food categories in the rail and the drawer row speak in the shared line
   icons (inc/icons.php) on a quiet cream disc; occasions keep their photos. The selected one gets the same ring. */
.hb-mmx__ri .hb-mmx__ri-ic { display: grid; place-items: center; background: var(--nv-cream, #f6efe9); color: var(--hb-o-sage-d, #5a6f58); }
.hb-mmx__ri-ic .hb-i { width: 22px; height: 22px; }
.hb-mmx__ri.is-on .hb-mmx__ri-ic { background: #fff; color: var(--hb-ink-warm); }
.hb-dr__cat-img:has(> .hb-dr__ic) { display: grid; place-items: center; background: #f3ebe6; color: var(--hb-o-sage-d, #5a6f58); }
.hb-dr__ic { display: grid; place-items: center; }
.hb-dr__ic .hb-i { width: 22px; height: 22px; }
.hb-dr__cat.is-on .hb-dr__cat-img:has(> .hb-dr__ic) { background: #fff; color: var(--hb-ink-warm); }
/* Image consistency (package BG): the dish photos in the mega tiles and drawer rows sit on the same cream tile as
   the catalogue cards, multiplied into it (white studio backdrops become the tile colour). */
.hb-ti__media, .hb-drawer__sub-body a.hb-dr__pimg { isolation: isolate; }
.hb-ti__img .hb-mm__img, .hb-drawer__sub-body a.hb-dr__pimg img { mix-blend-mode: multiply; }
.hb-ti__media::after, .hb-drawer__sub-body a.hb-dr__pimg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(53, 43, 36, .06); }
.hb-drawer__sub-body a.hb-dr__pimg { position: relative; }

/* The three ways to order (package BG, 16/10/2026): hb_ways_list() in the trays mega's side column and the drawer root.
   Icon on a cream disc, title + one line; "build" carries the sage tint (the one primary path). */
.hb-ways-mini { color: var(--hb-ink-warm); }
.hb-ways-mini__h { margin: 0 0 8px; font-weight: 700; font-size: 16px; }
.hb-ways-mini__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hb-ways-mini__a { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px 6px 12px; border-radius: 16px; background: #fff; color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(53, 43, 36, .08); transition: background-color var(--hbm-t-hover, 260ms) var(--hbm-out), box-shadow var(--hbm-t-hover, 260ms) var(--hbm-out), transform var(--hb-t-press, 90ms) var(--hbm-out); }
.hb-ways-mini__a--build { background: #f3f6f2; box-shadow: inset 0 0 0 1.5px rgba(101, 123, 99, .4); }
.hb-ways-mini__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f3ebe6; color: var(--hb-o-sage-d, #5a6f58); }
.hb-ways-mini__a--build .hb-ways-mini__ic { background: #fff; }
.hb-ways-mini__t { display: grid; gap: 1px; min-width: 0; }
.hb-ways-mini__t b { font-size: 15px; line-height: 1.25; }
.hb-ways-mini__t small { font-size: 13px; line-height: 1.3; color: rgba(53, 43, 36, .75); }
.hb-ways-mini__note { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; font-size: 13px; line-height: 1.35; color: rgba(53, 43, 36, .78); }
.hb-ways-mini__note .hb-i { flex: none; color: var(--hb-o-sage-d, #5a6f58); }
.hb-ways-mini__a:active { transform: scale(.98); }
.hb-ways-mini__a:focus-visible { outline: 2px solid var(--hb-ink-warm); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .hb-ways-mini__a:hover { box-shadow: inset 0 0 0 1.5px var(--hb-ink-warm); } }
.hb-mmx__ways { margin-top: 14px; padding: 14px; border-radius: 20px; background: var(--nv-cream, #f6efe9); }
.hb-mmx__alt { margin: 10px 4px 0; font-size: 14px; color: rgba(53, 43, 36, .78); }
.hb-mmx__alt a { display: inline-block; padding: 12px 0; font-weight: 700; color: var(--hb-ink-warm); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(53, 43, 36, .35); }
.hb-drawer__ways { margin: 18px 20px 6px; }
.hb-drawer__ways .hb-ways-mini__h { font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .hb-ways-mini__a { transition: none; } }

/* ---- The designer's line for icons and the ways list (package HM round 2, 16/10/2026) ----------------------------
   One disc for every category/menu icon on the site (chips, mega rail, drawer rows, search, the ways list): round
   like her category photos, her light blush (#f1e4df) behind the ink line icon (these are actions, so ink, not
   sage). The chosen one keeps its white disc. The ways list in the trays mega and the drawer echoes the home cubes:
   blush cards and her filled taupe glyphs (the ones in "למה לבחור בהולי בייגל?") on a white disc instead of the
   stroke icons; "build it yourself" keeps the sage ring (the one primary path). Markup and behaviour unchanged. */
html .hb-fchip__ic, html .hb-mmx__ri .hb-mmx__ri-ic, html .hb-dr__cat-img:has(> .hb-dr__ic), html .hb-sr__cat-ic { border-radius: 50%; background: #f1e4df; color: var(--hb-ink-warm, #352b24); }
html .hb-mmx__ri .hb-mmx__ri-img, html .hb-mmx__ri .hb-mm__ph { border-radius: 50%; }
html .hb-fchip[aria-pressed="true"] .hb-fchip__ic, html .hb-fchip.is-on .hb-fchip__ic, html .hb-mmx__ri.is-on .hb-mmx__ri-ic, html .hb-dr__cat.is-on .hb-dr__cat-img:has(> .hb-dr__ic) { background: #fff; color: var(--hb-ink-warm, #352b24); }
html .hb-mnu__cats .hb-mnu__ic, html .hb-mnu__cathead .hb-mnu__ic, html .hb-sug__item .hb-sug__pic.hb-sug__pic--ic { color: var(--hb-ink-warm, #352b24); }
.hb-ways-mini__a { background: #f1e4df; box-shadow: none; }
/* R14 (17/10): the three ways are equal choices, one tile style (the build tint read as "selected"). */
.hb-ways-mini__a--build { background: #f1e4df; box-shadow: none; }
.hb-ways-mini__ic, .hb-ways-mini__a--build .hb-ways-mini__ic { background: #fff url("../img/why-variety.svg") center / 20px 20px no-repeat; }
.hb-ways-mini__list > li:nth-child(2) .hb-ways-mini__ic { background-image: url("../img/why-all.svg"); }
.hb-ways-mini__list > li:nth-child(3) .hb-ways-mini__ic { background-image: url("../img/why-years.svg"); }
.hb-ways-mini__ic .hb-i { visibility: hidden; }
.hb-ways-mini__note .hb-i { color: #8c7068; }

/* ==== MG (16/10/2026): the mega menu and the drawer in the designer's line, and far less in them =====================
   Owner: "the mega feels very crowded". Out: the order summary column, the dark "אירוע גדול" card, the repeated ways
   list, the rail's eyebrow, counts and chevrons, the occasions listed twice (rail + cards), the second "לעמוד ..." link.
   In: one rail, one stage head, ONE row of cards per block as a slider (hbRail: 44px buttons, paging, fades), more air.
   Her card (the home package cards): cream #f9f4f0, radius 28, the photo set inside with its own radius 20, the name
   and one line under it in ink. One divider style: 1px hairline, flush with the content edges. */
.hb-mm-stage { border-radius: 36px; }
.hb-mmx .hb-mm__in { grid-template-columns: 220px minmax(0, 1fr); gap: 0 36px; padding: 28px 32px 30px; }
@media (max-width: 1439px) { .hb-mmx .hb-mm__in { grid-template-columns: 204px minmax(0, 1fr); gap: 0 28px; padding: 24px 26px 26px; } }
@media (min-width: 1700px) { .hb-mmx .hb-mm__in { grid-template-columns: 240px minmax(0, 1fr); gap: 0 44px; padding: 32px 40px 34px; } }
.hb-mmx__rail { display: flex; flex-direction: column; }
.hb-mmx__rail ul { gap: 4px; }
.hb-mmx .hb-mmx__ri { grid-template-columns: 40px minmax(0, 1fr); min-height: 48px; padding: 4px 12px 4px 8px; }
.hb-mmx__ri-chev, .hb-mmx__ri-n, .hb-mmx__eyebrow { display: none; }
.hb-mmx__railfoot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--nv-line); }
.hb-mm__panel a.hb-mmx__qlink { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 10px; border-radius: 16px; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--nv-link); transition: background-color .16s ease-out; }
.hb-mmx__qlink .hb-i { flex: none; width: 20px; height: 20px; color: #8c7068; }
@media (hover: hover) and (pointer: fine) { .hb-mm__panel a.hb-mmx__qlink:hover { background: var(--nv-cream2); text-decoration: underline; text-underline-offset: 3px; } }

/* Stage head: title · count on the start side; the guests pill and "לעמוד המלא" on the end, one height (44), one
   hairline, one baseline, centred on the title's line. */
.hb-mmx__shead { flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--nv-line); }
.hb-mmx__ttl { align-items: baseline; }
.hb-mmx .hb-gq__btn, .hb-mm__panel a.hb-mmx__full { box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px rgba(53, 43, 36, .16); font-weight: 700; font-size: 14.5px; line-height: 1; color: var(--hb-ink-warm); }
.hb-mm__panel a.hb-mmx__full { color: var(--nv-link); }
.hb-mmx .hb-gq:not(.is-set) .hb-gq__btn { background: #fff8ea; box-shadow: inset 0 0 0 1.5px var(--nv-orange); }
.hb-mmx .hb-gq.is-set .hb-gq__btn { background: var(--nv-cream2); }
@media (hover: hover) and (pointer: fine) { .hb-mmx .hb-gq__btn:hover, .hb-mm__panel a.hb-mmx__full:hover { background: var(--nv-cream); box-shadow: inset 0 0 0 1px var(--hb-ink-warm); } }
.hb-mmx__sub { margin: 0 0 12px; font-size: 15px; color: var(--hb-ink-warm); }
.hb-mmx__row + .hb-mmx__sub { margin-top: 24px; }
.hb-mmx__body { overflow-x: hidden; }

/* One row of cards per block: 4 in view (3 when the stage is narrower), the rest a page away. */
.hb-mmx .hb-mmx__row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; margin: 0; padding: 2px 2px 8px; list-style: none; }
@container hbst (max-width: 819px) { .hb-mmx .hb-mmx__row { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; } }
.hb-mmx .hb-mmx__row > :is(.hb-ti, .hb-ti-all, li) { display: flex; }
.hb-mmx .hb-mmx__menus.hb-mmx__row { grid-auto-columns: calc((100% - 2 * 18px) / 3); }

/* The dish card */
.hb-mmx .hb-ti { padding: 10px; border-radius: 28px; background: var(--nv-cream2); box-shadow: none; }
.hb-mmx .hb-ti__media { aspect-ratio: 4 / 3; border-radius: 20px; }
.hb-mmx .hb-ti__body { gap: 4px; padding: 12px 6px 2px; }
.hb-mmx .hb-ti.is-in { box-shadow: inset 0 0 0 2px var(--nv-sage); }
@media (hover: hover) and (pointer: fine) {
	.hb-mmx .hb-ti:hover { box-shadow: 0 14px 30px rgba(53, 43, 36, .1); transform: translateY(-3px); }
	.hb-mmx .hb-ti.is-in:hover { box-shadow: inset 0 0 0 2px var(--nv-sage), 0 14px 30px rgba(53, 43, 36, .1); }
}
.hb-mm__panel .hb-mmx .hb-ti-all a, .hb-mmx .hb-ti-all a { min-height: 0; border-radius: 28px; background: var(--nv-cream); }

/* The occasion card */
.hb-mmx__occ { display: flex; flex: 1; flex-direction: column; align-content: start; gap: 2px; min-height: 0; overflow: visible; padding: 10px 10px 16px; border-radius: 28px; background: var(--nv-cream2); isolation: auto; transition: box-shadow .22s var(--nv-ease), transform .22s var(--nv-ease); }
.hb-mmx__occ::after { content: none; }
.hb-mmx__occ-media { display: block; overflow: hidden; margin-bottom: 10px; aspect-ratio: 16 / 10; border-radius: 20px; background: #f3ebe6; }
.hb-mmx__occ-media .hb-mm__img, .hb-mmx__occ-media .hb-mm__ph { position: static; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--nv-ease); }
.hb-mm__panel .hb-mmx__occ-t { padding-inline: 6px; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--hb-ink-warm); }
.hb-mmx__occ small { padding-inline: 6px; font-size: 13.5px; line-height: 1.4; color: var(--nv-muted); }
@container hbst (min-width: 900px) { .hb-mmx__occ { min-height: 0; } }
@media (hover: hover) and (pointer: fine) {
	.hb-mmx__occ:hover { box-shadow: 0 14px 30px rgba(53, 43, 36, .1); transform: translateY(-3px); }
	.hb-mmx__occ:hover .hb-mmx__occ-media .hb-mm__img { transform: scale(1.04); }
	.hb-mm__panel .hb-mmx__occ:hover .hb-mmx__occ-t { text-decoration: underline; text-underline-offset: 3px; }
}

/* The menu card, same family */
.hb-mmx .hb-mmx__menu { grid-template-columns: 1fr; gap: 10px; padding: 10px 10px 8px; border-radius: 28px; background: var(--nv-cream2); box-shadow: none; }
.hb-mmx .hb-mmx__menu-img { border-radius: 20px; }
.hb-mmx .hb-mmx__menu-img img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.hb-mmx .hb-mmx__menu-b { padding-inline: 6px; }

/* Rail buttons inside the stage: on the card edges, never past the panel. */
.hb-mmx__body > .hb-rail > .hb-rail__btn--prev, .hb-mmx__body.hb-rail > .hb-rail__btn--prev { right: calc(var(--hb-rail-x1, 0px) - 6px); }
.hb-mmx__body > .hb-rail > .hb-rail__btn--next, .hb-mmx__body.hb-rail > .hb-rail__btn--next { left: calc(var(--hb-rail-x0, 0px) - 6px); }
@media (prefers-reduced-motion: reduce) { .hb-mmx__occ, .hb-mmx__occ-media .hb-mm__img { transition: none; } .hb-mmx__occ:hover { transform: none; } }

/* Drawer: the category row is an hbRail (fades from hbRail, not the old fixed left mask). */
.hb-drawer__sub-body ul.hb-dr__crow.hb-rail__track--fade { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--hb-rail-fs), #000 calc(100% - var(--hb-rail-fe)), transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 var(--hb-rail-fs), #000 calc(100% - var(--hb-rail-fe)), transparent 100%); }
.hb-drawer__sub-body .hb-dr__cats .hb-rail__btn { width: 36px; height: 36px; margin-top: -18px; }
.hb-drawer__sub-body .hb-dr__cats .hb-rail__btn::before { content: ""; position: absolute; inset: -4px; }
.hb-mmx__rowwrap + .hb-mmx__sub { margin-top: 24px; }
/* The rail decides the panel's height: rows of 44px (the target), so the panel ends close under the cards. */
.hb-mmx .hb-mmx__rail ul { gap: 2px; }
.hb-mmx .hb-mmx__ri { min-height: 44px; padding-block: 2px; }
.hb-mmx .hb-mmx__ri .hb-mmx__ri-img, .hb-mmx .hb-mmx__ri .hb-mm__ph { width: 38px; height: 38px; }
.hb-mm__panel a.hb-mmx__qlink { white-space: nowrap; }

/* Owner 17/10/2026: after "הוספה" the row grew to two lines (stepper dropped under the name). The stepper now takes the
   button's place in the same row, at the button's height; the name may wrap to two lines instead of a mid-word "…". */
.hb-drawer__sub-body .hb-dr__prow.is-in { grid-template-columns: 64px minmax(0, 1fr) auto; row-gap: 0; }
.hb-drawer__sub-body .hb-dr__prow.is-in .hb-dr__pimg { grid-row: auto; align-self: center; }
.hb-drawer__sub-body .hb-dr__prow.is-in .hb-dr__pact { grid-column: auto; justify-self: end; }
.hb-drawer__sub-body .hb-dr__prow.is-in .hb-q__b { width: 36px; }
.hb-drawer__sub-body a.hb-dr__pname { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* Owner 17/10/2026: a tap anywhere on an event-menu card opens it (only the photo and the arrow did). The photo link
   stretches over the card; the arrow stays on top with the same href. */
.hb-drawer__sub-body a.hb-dr__menu-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hb-drawer__sub-body .hb-dr__menu { cursor: pointer; }
.hb-drawer__sub-body a.hb-dr__menu-go { z-index: 1; }

/* R15 (Sunday review, 17/10/2026): the ~56px empty band in the drawer sub-layer. hbRail (polish-rail.js) set an inline
   position:relative on the category row while it was still static (rendered before it reached the drawer), so its
   sticky offset (top:56px) became a plain 56px shift down, over the stage head. The row stays sticky, as designed. */
.hb-drawer__sub-body .hb-dr__cats { position: sticky !important; }

/* Eliyahu 03/11/2026: at the end of a menu strip the arrow fades out, and a second click on the same spot went through it
   to the card underneath (a page change instead of "nothing more"). In the menu, the faded arrow still takes the click. */
.hb-mmx .hb-rail__btn:disabled, .hb-mega .hb-rail__btn:disabled { pointer-events: auto; cursor: default; }