/*
 * CJ fix layer (FX-5, SGO 16/10/2026): the visual fixes from the first customer-journey run
 * (seo-agents/research/HOLYBAGEL-CJ-RUN1-2026-10.md). Loaded last of the polish layers (inc/polish.php), so it wins
 * without !important where it can. Numbers in the comments are the CJ finding numbers.
 */

/* 1 · The undo toast inside the order sheet: above the sheet's foot, never over "לתשלום", never on the scrim. */
.hb-cartd__panel > .hb-utoast.is-in-sheet { position: absolute; inset-inline: 12px; bottom: var(--hb-ut-b, 96px); width: auto; max-width: none; margin: 0; z-index: 30; }
html.hb-ss-open .hb-cartd__panel > .hb-utoast.is-in-sheet { transform: none; opacity: 1; }

/* 11 · The site's toasts while the sheet is open: over the sheet, above its foot. */
html.hb-cart-lock .hb-toasts {
	left: calc(var(--hb-sheet-x, 0px) + var(--hb-sheet-w, 100vw) / 2);
	bottom: calc(var(--hb-sheet-foot, 0px) + 12px);
	width: min(420px, calc(var(--hb-sheet-w, 100vw) - 24px));
	z-index: 1100;
}

/* 2 · The empty order: the three ways stack whenever the box is narrow (the sheet is 460px wide on a 1440 screen),
   wide only where there is room for three readable cards. A container query, not the viewport. */
.hb-cartempty { container-type: inline-size; width: 100%; }
.hb-cartempty .hb-paths { grid-template-columns: minmax(0, 1fr) !important; max-width: 520px; margin-inline: auto; }
@container (min-width: 760px) {
	.hb-cartempty .hb-paths { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 900px; }
}

/* 4 · Package page: the context strip is there from the first paint (one line, no jump above the add button). */
.hb-pp-page--package .hb-pp__ctx[data-hb-pp-ctx] { min-height: 40px; }
.hb-pp-page--package .hb-pp__ctx [data-hb-pp-ctx-t] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }

/* 5 · Personal boxes: why the add button is locked, and the bar with price · boxes · total while choosing. */
.hb-boxes__why { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; color: #f6efe9; }
.hb-boxes__why[hidden] { display: none; }
.hb-boxes__bar { position: fixed; z-index: 880; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; padding-inline-start: 18px; border-radius: 18px; background: #352b24; color: #fff; box-shadow: 0 14px 34px rgba(38, 30, 25, .3); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .2s ease, transform .24s cubic-bezier(.22, 1, .36, 1); }
.hb-boxes__bar.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hb-boxes__bar p { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 14.5px; }
.hb-boxes__bar strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.hb-boxes__bar .hb-btn { min-height: 44px; padding-inline: 18px; background: #657b63; color: #fff; border-color: #657b63; white-space: nowrap; }
.hb-boxes__bar .hb-btn.is-locked { background: #5b524d; border-color: #5b524d; }
html.hb-boxes-bar-on .hb-ctabar { visibility: hidden; }
@media (min-width: 1024px) { .hb-boxes__bar { inset-inline: auto 24px; width: min(560px, calc(100vw - 48px)); } }
@media (prefers-reduced-motion: reduce) { .hb-boxes__bar { transition: none; } }
/* 25 · The mark beside each kind is a status (✓ when something is picked), not a second checkbox. */
.hb-boxes__cat .hb-boxes__tick { border-color: transparent; border-radius: 50%; background: transparent; }
.hb-boxes__cat.is-on .hb-boxes__tick { border-color: #657b63; background: #657b63; }

/* 8 · /packages/: the menus' difference line, each menu's total for the chosen guests, any guest count. */
.hb-pkp__diff { max-width: 62ch; margin: 10px auto 0; font-size: 16px; line-height: 1.55; color: #5b524d; }
.hb-pkp__mtot { margin: 6px 0 0; font-weight: 700; font-size: 15.5px; color: #352b24; font-variant-numeric: tabular-nums; }
.hb-pkp__mtot.is-off { font-weight: 500; color: #6b625d; }
.hb-pk-other { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 14px auto 0; font-size: 15.5px; color: #352b24; }
.hb-pk-other label { font-weight: 600; }
.hb-pk-other input { width: 112px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(53, 43, 36, .25); border-radius: 12px; background: #fff; font: inherit; text-align: center; }
.hb-pk-other__go { min-height: 44px; padding: 0 18px; border: 1px solid #352b24; border-radius: 999px; background: #fff; color: #352b24; font: inherit; font-weight: 700; cursor: pointer; }
.hb-pk-other input:focus-visible, .hb-pk-other__go:focus-visible { outline: 2px solid #352b24; outline-offset: 2px; }
@media (hover: hover) { .hb-pk-other__go:hover { background: #352b24; color: #fff; } }

/* 12 · E-mail and phone: Birzia has capitals only for Latin letters; addresses and numbers use a Latin-friendly face. */
input[type="email"], input[type="tel"], input#billing_email, input#billing_phone, .hb-co input[name*="email"], .hb-co input[name*="phone"] {
	font-family: "Assistant", "Segoe UI", Arial, "Arial Hebrew", sans-serif !important; text-transform: none; letter-spacing: 0; unicode-bidi: plaintext; text-align: right;
}

/* 14 · Header focus: a ring that shows on the light bar and on the photo alike (amber with a dark edge). */
.hb-header a:focus-visible, .hb-header button:focus-visible, .hb-header [tabindex]:focus-visible {
	outline: 3px solid #faa20b !important; outline-offset: 2px; box-shadow: 0 0 0 2px #352b24 !important;
}

/* 22 · The line's pencil while its editor is open: a white pencil on the dark circle. */
.hb-cline__row .hb-lact.hb-ibtn.hb-cline__edit[aria-expanded="true"] { color: #fff; }

/* 23 · The builder's category rail on desktop: long names wrap to two lines instead of "פלטות קר.". */
@media (min-width: 1024px) {
	.hba .hba-rail__b { white-space: normal; padding-block: 7px; line-height: 1.25; }
	.hba .hba-rail__n { overflow: visible; text-overflow: clip; white-space: normal; }
}

/* 24 · The packages comparison on a phone: the first column stays put while the rest scroll, with a hint. */
.hb-pkp__cmp-table tbody th[scope="row"], .hb-pkp__cmp-table thead td { position: sticky; inset-inline-start: 0; z-index: 1; background: #fff; }
.hb-pkp__cmp-table thead td { background: var(--hb-filter-bg, #f9f4f0); }
.hb-pkp__cmp-hint { margin: 12px 0 -6px; text-align: center; font-size: 14px; color: #5b524d; }
.hb-pkp__cmp-hint[hidden] { display: none; }

/* 26 · Checkout: the phone's order bar stays above the footer. */
body:has(form.hb-co--pj) .hb-main { position: relative; z-index: 3; }
.hb-co__review.is-cleared .hb-co__totals { visibility: hidden; }
/* 5 · On a phone the commerce bar (polish-commerce.js, .hb-boxbar) is the one bar; this one is for tablet and desktop. */
@media (max-width: 767px) { .hb-boxes__bar { display: none; } }
.hb-boxbar__unit.is-warn { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
/* Search popup: a scrollable region the keyboard can reach, with a visible ring. */
.hb-sug:focus-visible { outline: 2px solid #352b24; outline-offset: -2px; }
/* Catalog: with guests chosen (html.hb-has-ctx is set in <head>), each card's "ל-30 אורחים: 3 מגשים" line has its place
   from the first paint, so the price row does not drop 25px when the script fills it. */
html.hb-has-ctx .hb-shop .hb-pcard__sug[data-sug]:empty { display: block; min-height: 1.4em; }
@media (max-width: 767px) { html.hb-has-ctx .hb-shop .hb-pcard__sug[data-sug]:empty { min-height: 1.4em; } }

/* Owner 16/10 · "ההזמנה שלי" (checkout summary and side sheet): one scroll region. The title stays at the top and the
   totals at the bottom (sticky inside the same scroller), only the middle moves; the add-on rail scrolls sideways only;
   the scrollbar is a thin line in the site's ink instead of a second full system bar. */
@media (min-width: 1024px) {
	.hb-co--pj .hb-co__sumh { position: sticky; top: -20px; z-index: 2; margin: -20px -20px 12px; padding: 20px 20px 12px; background: #fff; }
}
.hb-co__sumbody { overscroll-behavior: auto; } /* at either end the wheel carries on to the page */
.hb-co__sumbody, .hb-osh__scroll { scrollbar-width: thin; scrollbar-color: rgba(53, 43, 36, .28) transparent; }
.hb-co__sumbody::-webkit-scrollbar, .hb-osh__scroll::-webkit-scrollbar { width: 6px; }
.hb-co__sumbody::-webkit-scrollbar-thumb, .hb-osh__scroll::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(53, 43, 36, .28); }
.hb-co__sumbody::-webkit-scrollbar-track, .hb-osh__scroll::-webkit-scrollbar-track { background: transparent; }
.hb-ups__row { overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(53, 43, 36, .28) transparent; }
.hb-ups__row::-webkit-scrollbar { height: 6px; }
.hb-ups__row::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(53, 43, 36, .28); }

/* Owner 16/10 · "on hover you can't see anything": main.css's --hb-cat-count (#b49a91) is the hover colour of the header
   links, FAQ questions and contact links, and the fill behind white text on chips, steppers and the date picker. It is
   2.6:1 on white. Same rose hue, darker: 5.5:1 on white and 4.9:1 on the cream, with white text on it 5.5:1. */
:root { --hb-cat-count: #80625a; }
/* The count lines that take the focus after a filter change: no ring for a programmatic focus, a ring for the keyboard. */
.hb-shop__count[tabindex="-1"]:focus:not(:focus-visible), .hb-pkp__count[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.hb-pkp__packages h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Owner 16/10 · search overlay: no cloud of words. The ideas are ONE row that scrolls sideways, and the starting points
   are a compact list (about 56px a row). Site rule: one row or a short list, never a pill cloud over several lines. */
.hb-sug .hb-sug__chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); padding-inline-end: 28px; }
.hb-sug .hb-sug__chips::-webkit-scrollbar { display: none; }
.hb-sug .hb-sug__chip { flex: none; scroll-snap-align: start; min-height: 40px; white-space: nowrap; }
.hb-sug .hb-sug__item { min-height: 56px; padding-block: 6px; gap: 12px; grid-template-columns: 44px minmax(0, 1fr) auto 14px; }
.hb-sug .hb-sug__item .hb-sug__pic, .hb-sug .hb-sug__item .hb-sug__ico { width: 44px; height: 44px; }
.hb-sug .hb-sug__item .hb-sug__pic img { width: 44px; height: 44px; }
@media (max-width: 767px) {
	.hb-sug .hb-sug__item { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 56px; padding: 6px 10px; }
}

/* Owner 16/10 · "ההזמנה שלי" lines: compact (about 84px instead of 140). One panel with hairline rows instead of a card
   per line. Row 1: photo | name + size (one line each) | stepper 104×40. Row 2: price under the name | edit and remove as
   32px icons under the stepper (their touch area stays 40px). The editor opens under the whole row. Checkout's full list
   (.hb-clines--full) keeps its own layout. */
.hb-clines:not(.hb-clines--full) { gap: 0; padding: 2px 12px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgba(53, 43, 36, .04); }
.hb-clines:not(.hb-clines--full) > .hb-cline {
	grid-template-columns: 56px minmax(0, 1fr) 52px 52px; grid-template-areas: "img txt qty qty" "img price ed x" "cedit cedit cedit cedit";
	gap: 2px 10px; align-items: center; padding: 8px 0; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid rgba(53, 43, 36, .08);
}
.hb-clines:not(.hb-clines--full) > .hb-cline:last-child { border-bottom: 0; }
.hb-clines:not(.hb-clines--full) > .hb-cline.is-editing { background: transparent; }
.hb-clines:not(.hb-clines--full) .hb-cline__img { grid-row: 1 / span 2; align-self: center; width: 56px; height: 56px; }
.hb-clines:not(.hb-clines--full) .hb-cline__txt { grid-area: txt; align-self: end; gap: 0; }
.hb-clines:not(.hb-clines--full) .hb-cline__name, .hb-clines:not(.hb-clines--full) .hb-cline__meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hb-clines:not(.hb-clines--full) .hb-cline__name { font-size: 15.5px; line-height: 1.3; }
.hb-clines:not(.hb-clines--full) .hb-cline__meta { font-size: 13px; line-height: 1.3; }
.hb-clines:not(.hb-clines--full) .hb-cline__row { display: contents; }
.hb-clines:not(.hb-clines--full) .hb-cline__qty { grid-area: qty; justify-self: end; height: 40px; }
.hb-clines:not(.hb-clines--full) .hb-cline__qty .hb-lstep__b { width: 34px; height: 38px; }
.hb-clines:not(.hb-clines--full) .hb-cline__qty .hb-lstep__in { width: 32px; height: 36px; }
.hb-clines:not(.hb-clines--full) .hb-cline__price { grid-area: price; justify-self: start; align-self: start; margin: 0; font-size: 15px; font-weight: 700; }
.hb-clines:not(.hb-clines--full) .hb-cline__row .hb-cline__edit { grid-area: ed; }
.hb-clines:not(.hb-clines--full) .hb-cline__row .hb-cline__x { grid-area: x; }
.hb-clines:not(.hb-clines--full) .hb-cline__row .hb-cline__edit, .hb-clines:not(.hb-clines--full) .hb-cline__row .hb-cline__x {
	justify-self: center; width: 40px; height: 40px; min-height: 40px; margin-block: -6px; border-color: transparent; background: transparent; color: #5b524d;
} /* a 40px touch area that takes a 32px row */
.hb-clines:not(.hb-clines--full) .hb-cline__row .hb-lact .hb-i { width: 17px; height: 17px; }
@media (hover: hover) { .hb-clines:not(.hb-clines--full) .hb-cline__row .hb-lact:hover { border-color: rgba(53, 43, 36, .2); background: #f6efe9; color: #352b24; } }
.hb-clines:not(.hb-clines--full) .hb-cline__row .hb-cline__edit[aria-expanded="true"] { border-color: #352b24; background: #352b24; color: #fff; }
.hb-clines:not(.hb-clines--full) .hb-cedit { grid-area: cedit; }

/* The guests note in the sheet: shorter, the title with its icon, then one line each for the coverage and what is short. */
.hb-osh .hb-cartp__ctx { gap: 2px; padding: 8px 12px; border-radius: 14px; }
.hb-osh .hb-cartp__ctx-head { font-size: 14.5px; gap: 6px; }
.hb-osh .hb-cartp__ctx-head .hb-ico, .hb-osh .hb-cartp__ctx-head svg { width: 18px; height: 18px; }
.hb-osh .hb-cartp__cov, .hb-osh .hb-cartp__short { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; }
.hb-osh .hb-cartp__cov small { display: none; }
.hb-osh .hb-cartp__short { display: flex; gap: 0 10px; margin: 0; padding: 0; list-style: none; }
.hb-osh .hb-cartp__short li { flex: none; }

/* ORDER APP cards (/?order=1, owner 16/10/2026): the same compact line as the order sheet. Name on one line, the
   description in two, price with the guest suggestion under it, and a 112×40 stepper on the price row. The photo
   runs the full height of the card, so there is no empty strip under it. order-app.css loads after this file,
   so every rule here is scoped under .hba. */
.hba .hba-card { grid-template-columns: 88px minmax(0, 1fr); gap: 0 12px; padding: 10px; }
.hba .hba-card__img { align-self: stretch; width: 88px; height: auto; min-height: 88px; border-radius: 12px; }
.hba .hba-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto; grid-template-areas: "name name" "desc desc" "meta act" "sug act"; gap: 0 8px; align-items: center; }
.hba .hba-card__name { grid-area: name; display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; font-size: 15.5px; line-height: 1.35; }
.hba .hba-card__name button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hba .hba-card__name .hba-card__hint { flex: none; margin: 0; font-size: 12.5px; }
/* Desc: order-app.js already shortens it to 84 chars (full text in title + פרטים), so no CSS clamp: a clamp cut the text at zoom (desk 06/11/2026). */
.hba .hba-card__desc { grid-area: desc; align-self: start; display: block; overflow: visible; margin-top: 1px; font-size: 13px; line-height: 1.4; }
.hba .hba-card__meta { grid-area: meta; align-self: end; margin: 6px 0 0; gap: 4px 8px; }
.hba .hba-card__meta .hba-price { font-size: 15.5px; line-height: 1.3; }
.hba .hba-card__sug { grid-area: sug; align-self: start; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12.5px; line-height: 1.35; }
.hba .hba-card__sug button { min-height: 0; padding: 0 2px; }
.hba .hba-card__sug button::after { inset: -10px -4px; }
.hba .hba-card__act { grid-area: act; align-self: end; margin: 6px 0 0; padding: 0; }
.hba .hba-card:has(.hba-seg) .hba-card__body { grid-template-areas: "name name" "desc desc" "meta meta" "sug act"; }
.hba .hba-card:has(.hba-seg) .hba-card__sug { align-self: center; }
/* The stepper: 112×40, the add button the same size. */
.hba .hba-card .hba-card__act .hb-qty { flex: none; width: 112px; min-height: 40px; }
.hba .hba-card .hba-card__act .hb-qty .hb-qty__add { width: 112px; min-height: 40px; padding: 0 10px; gap: 4px; font-size: 14.5px; }
.hba .hba-card .hba-card__act .hb-qty .hb-qty__add svg { width: 16px; height: 16px; }
.hba .hba-card .hba-card__act .hb-qty.is-step { height: 40px; justify-content: space-between; }
.hba .hba-card .hba-card__act .hb-qty .hb-qty__b { width: 38px; height: 37px; }
.hba .hba-card .hba-card__act .hb-qty__n { min-width: 28px; font-size: 15px; }
/* In the order: a light sage tint and a 1.5px edge, with the ×N badge on the photo. */
.hba .hba-card.is-in { background: #f7faf6; border-color: var(--sage); box-shadow: inset 0 0 0 .5px var(--sage); }
@media (max-width: 599px) {
	.hba .hba-card__more { top: 2px; inset-inline-end: 2px; }
	.hba .hba-card__name { padding-inline-end: 36px; }
	.hba .hba-card__desc { padding-inline-end: 6px; }
}
@media (min-width: 600px) {
	.hba .hba-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; padding: 0; }
	.hba .hba-card__img { width: 100%; height: auto; min-height: 0; border-radius: 0; }
	.hba .hba-card__body { position: relative; padding: 10px 12px 12px; }
	.hba .hba-card__name { padding-inline-end: 30px; }
	/* "פרטים" is the chevron beside the name here too, not a row of its own under the stepper. */
	.hba .hba-card__more { position: absolute; top: 4px; inset-inline-end: 4px; display: grid; place-items: center; width: 36px; min-width: 36px; height: 36px; min-height: 36px; margin: 0; border-radius: 50%; color: var(--mute); text-decoration: none; }
	.hba .hba-card__more span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.hba .hba-card__more svg { display: block; width: 20px; height: 20px; transform: scaleX(-1); }
	.hba .hba-card__more:hover { background: var(--sage-t); color: var(--ink); }
	.hba .hba-card__more::after { inset: -4px; }
	.hba .hba-card.is-in { box-shadow: inset 0 0 0 .5px var(--sage), 0 8px 24px rgba(79, 99, 77, .12); }
}

/* ORDER APP filter sheet (owner 16/10/2026): sort as a segmented control, then rows (icon, name, count, a switch).
   The sheet is as tall as its rows; the footer shows the live count and "ניקוי" as a link. */
.hba .hba-layer--filter .hba-layer__in { padding-top: 18px; }
.hba .hba-fs { display: grid; gap: 14px; margin: 12px 0 14px; }
.hba .hba-fs__h { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--mute); }
.hba .hba-fs__seg { display: flex; width: 100%; }
.hba .hba-fs__seg button { flex: 1 1 0; min-height: 40px; font-size: 14px; }
.hba .hba-fs__rows { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.hba .hba-fs__rows li + li { border-top: 1px solid var(--line); }
.hba .hba-frow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-align: start; transition: background-color .16s ease; }
.hba .hba-frow:hover { background: #faf7f4; }
.hba .hba-frow__i { display: grid; place-items: center; width: 22px; flex: none; color: var(--sage-d); }
.hba .hba-frow__i svg { width: 18px; height: 18px; }
.hba .hba-frow__t { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hba .hba-frow__n { flex: none; min-width: 24px; font-size: 13.5px; font-weight: 600; color: var(--mute); text-align: end; font-variant-numeric: tabular-nums; }
.hba .hba-frow__sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #d9d0c9; transition: background-color .16s ease; }
.hba .hba-frow__sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(53, 43, 36, .25); transition: inset-inline-start .16s ease; }
.hba .hba-frow[aria-pressed="true"] .hba-frow__sw { background: var(--sage); }
.hba .hba-frow[aria-pressed="true"] .hba-frow__sw::after { inset-inline-start: 19px; }
.hba .hba-frow:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.hba .hba-fs__go { display: flex; align-items: center; gap: 8px 16px; }
.hba .hba-fs__go .hba-cta { flex: 1 1 auto; min-height: 50px; }
.hba .hba-fs__go .hba-link { flex: none; }
/* The filter button: a count when anything is on. */
.hba .hba-fbtn em { top: 2px; inset-inline-end: 2px; background: var(--sage-d); }
/* Active filters: one removable row at the top of the results. */
.hba .hba-afl { display: flex; align-items: center; gap: 6px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; }
.hba .hba-afl[hidden] { display: none; }
.hba .hba-afl__b { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--sage); border-radius: 999px; background: var(--sage-t); color: var(--sage-d); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.hba .hba-afl__b svg { width: 14px; height: 14px; }
.hba .hba-afl__b:hover { background: #e2e9df; }
.hba .hba-afl__all { flex: none; min-height: 36px; font-size: 13.5px; white-space: nowrap; }
@media (min-width: 600px) { .hba .hba-afl { padding: 12px 24px 0; } }
/* Desktop keeps the diet pills in the bar; the button opens sort and price too. */
@media (min-width: 1024px) { .hba .hba-fbtn { display: inline-grid; } .hba.has-layer--first .hba-fbtn { visibility: hidden; } }
/* Diet tags on the dish photo: icons only, one row, never a chip cloud. The word stays for screen readers and as the
   tooltip (title on the li). A tag with no icon keeps its word. */
.hba .hba-tags { flex-wrap: nowrap; gap: 3px; max-width: calc(100% - 12px); }
.hba .hba-tags li:has(.hba-dic) { position: relative; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; }
.hba .hba-tags li:has(.hba-dic) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hba .hba-tags li:has(.hba-dic) svg { width: 15px; height: 15px; }
.hba .hba-tags li:not(:has(.hba-dic)) { white-space: nowrap; }
/* Personal boxes: "פרטים" sits inside its card (its -6px block margin pushed it 5px past the card edge). */
.hb-boxes .hb-bcards .hb-bcard .hb-bcard__info { margin-block-end: 2px; }
.hb-boxes .hb-boxes__total[hidden] { display: none; }
/* Sheet lines, actions in one row (defect hunt 16/10): row 1 photo | name + size, row 2 the price, the stepper, edit and
   remove side by side at the row's end. */
.hb-clines:not(.hb-clines--full) > .hb-cline { grid-template-columns: 56px minmax(0, 1fr) auto 38px 38px; grid-template-areas: "img txt txt txt txt" "img price qty ed x" "cedit cedit cedit cedit cedit"; gap: 4px 6px; }
.hb-clines:not(.hb-clines--full) .hb-cline__img { margin-inline-end: 4px; }
.hb-clines:not(.hb-clines--full) .hb-cline__txt { align-self: center; }
.hb-clines:not(.hb-clines--full) .hb-cline__price { justify-self: start; align-self: center; white-space: nowrap; }
.hb-clines:not(.hb-clines--full) .hb-cline__row .hb-cline__edit, .hb-clines:not(.hb-clines--full) .hb-cline__row .hb-cline__x { width: 38px; margin-block: 0; }
/* One icon tone per group in the order app (defect hunt 16/10): the diet word says which diet, so the icons share the
   ink-sage tone instead of three diet colours side by side. A pressed chip keeps its own (white) colour. */
.hba .hba-tags .hba-dic, .hba .hba-frow__i .hba-dic, .hba .hba-afl__b .hba-dic, .hba .hba-diet:not([aria-pressed="true"]) .hba-dic, .hba .hba-chip:not([aria-pressed="true"]) .hba-dic { color: var(--sage-d); }
/* Trays toolbar: the "מיון" label at AA on the cream bar (4.36 → 5.6). */
.hb-shop .hb-shop__sort-label { color: #6b605a; }

/* ---- CJ run 2 (16/10/2026): the order sheet's inner list scrolls only a few dozen px, so the upsell "הוספה" buttons sat at the
   edge of the sheet footer until the visitor scrolled. The list now keeps its own room above the footer (the last row is fully
   tappable at the end of the scroll, and a focused button scrolls clear of the footer), and its bottom edge fades so it reads as scrollable. */
.hba-sum .hb-osh__scroll { padding-bottom: 32px; scroll-padding-block-end: 28px; -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent); mask-image: linear-gradient(#000 calc(100% - 20px), transparent); }

/* 17/10 (last leftovers): in the phone order sheet the add-on cards were 296px tall, so with one dish in the list their
   "הוספה" buttons sat in the 20px fade above the footer. A wider, shorter picture frees ~33px; the buttons clear the fade unscrolled. */
.hba-sum .hb-ups__img { aspect-ratio: 2 / 1; }
/* "ההזמנה שלי" line (owner 17/10/2026, "אין מרווח" at 340px): the price shared row 2 with the image column and the
   stepper, so at phone widths it ran into the "+". Now row 1 = photo | name, row 2 = price at the start, the stepper,
   edit and remove at the end; the price owns the photo's width plus the free space, so the two never meet. */
.hb-clines:not(.hb-clines--full) > .hb-cline { grid-template-columns: 56px minmax(0, 1fr) auto 38px 38px; grid-template-areas: "img txt txt txt txt" "price price qty ed x" "cedit cedit cedit cedit cedit"; gap: 6px 8px; }
.hb-clines:not(.hb-clines--full) .hb-cline__img { grid-area: img; grid-row: auto; }
.hb-clines:not(.hb-clines--full) .hb-cline__price { justify-self: start; align-self: center; }