/* The shared icon set (package PP, SGO 16/10/2026). Markup: hb_icon() / hb_cat_icon() / hb_diet_badges() in inc/icons.php,
   window.hbIcons in JS. Contract: HOLYBAGEL-ORDERING-UX-2026-10.md "Icons (PP)". One stroke (1.5 on a 24 grid), colour =
   currentColor. Text on every pill is ink #352b24 on a pale tint (≥ 11:1); the icon carries the tint's own darker tone. */

.hb-i { display: inline-block; flex: none; vertical-align: -.22em; overflow: visible; }
.hb-i:not([width]) { width: 1.25em; height: 1.25em; }

/* Icon-only button: a 44px target with a visible 36px tap circle. Use with aria-label + title. */
.hb-ibtn {
	position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: var(--hb-ink-warm, #352b24); cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.hb-ibtn::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: rgba(53, 43, 36, .06); transition: background-color .16s ease-out, transform .09s ease-out; }
.hb-ibtn > * { position: relative; }
@media (hover: hover) { .hb-ibtn:hover::before { background: rgba(53, 43, 36, .11); } }
.hb-ibtn:active::before { transform: scale(.92); }
.hb-ibtn:focus-visible { outline: 2px solid var(--hb-ink-warm, #352b24); outline-offset: 0; box-shadow: 0 0 0 5px rgba(250, 162, 11, .35); }

/* Dietary pills: icon + word. Palette: dairy = amber cream, parve / vegan = sage, gluten free = blush, spicy = warm red. */
.hb-diets { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.hb-diet {
	display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px 2px 9px;
	border-radius: 999px; background: #f6efe9; box-shadow: inset 0 0 0 1px rgba(53, 43, 36, .08);
	font-weight: 700; font-size: 13px; line-height: 1.2; color: #352b24; white-space: nowrap;
}
.hb-diet .hb-i { width: 15px; height: 15px; }
.hb-diet--dairy { background: #fbf1dc; } .hb-diet--dairy .hb-i { color: #a56902; }
.hb-diet--parve { background: #e9efe8; } .hb-diet--parve .hb-i { color: #4f6450; }
.hb-diet--vegan { background: #e9efe8; } .hb-diet--vegan .hb-i { color: #4f6450; }
.hb-diet--gf { background: #f8e9e3; } .hb-diet--gf .hb-i { color: #8a4a35; }
.hb-diet--spicy { background: #f8e4de; } .hb-diet--spicy .hb-i { color: #a1281c; }
.hb-diet--icon { justify-content: center; width: 28px; min-height: 28px; padding: 0; }

@media (prefers-reduced-motion: reduce) { .hb-ibtn::before { transition: none; } .hb-ibtn:active::before { transform: none; } }

/* FX-4 (16/10/2026): "what's included" on a product page (.hb-prod__incl, main.css) used the X-shaped logo mark as a
   bullet, which reads as "remove". Same neutral check as the package cards (polish-home.css) and the `check` icon of
   this set (24px grid, path M5 12.5l4.5 4.5L19 7.5); sage, never gold. */
.hb-prod__incl li::before {
	width: 16px; height: 16px; transform: none; background: var(--hb-o-sage, #657b63);
	-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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------------------------------------------------
   IC (16/10/2026): icons in the places words stood alone (owner: "speak in icons, not only words"). One rule for all:
   an inline icon is 16–20px next to text, 24px standalone, the text's own colour, a fixed 6–8px gap; never decoration.
   Markup: hb_icon() in the templates, the nav_menu_item_title filter in inc/icons.php for menu rows. --------------- */

/* Menu rows: drawer first layer (24px), info links in the drawer and the top bar, footer columns. */
.menu-item > a:has(> .hb-mi) { display: inline-flex; align-items: center; gap: 8px; }
.hb-mi { flex: none; }
.hb-drawer__nav > ul > li > a:has(> .hb-mi) { display: flex; gap: 14px; }
.hb-drawer__nav > ul > li > a > .hb-mi { width: 24px; height: 24px; color: var(--hb-o-sage-d, #5a6f58); }
.hb-drawer__utility a:has(> .hb-mi) { display: flex; gap: 12px; }
.hb-drawer__utility .hb-mi { width: 20px; height: 20px; }
.hb-topbar__menu .hb-mi { width: 17px; height: 17px; }
.hb-topbar__menu a:has(> .hb-mi) { gap: 6px; }
.hb-footer__col li a:has(> .hb-mi) { display: inline-flex; gap: 8px; }
.hb-footer__col .hb-mi { width: 16px; height: 16px; opacity: .85; }

/* Footer contact column: e-mail, hours, service areas in the same gold as the phone mark above them. */
.hb-footer__ci { width: 16px; height: 16px; flex: none; color: var(--hb-gold, #fab20b); }
.hb-footer__contact li.hb-footer__row { display: flex; align-items: flex-start; gap: 8px; }
.hb-footer__row > .hb-footer__ci { margin-top: 2px; }

/* Breadcrumbs: "בית" is a house (the word stays for screen readers). 28px target, the crumb's colour. */
:is(.hb-shop__crumbs, .hb-prod__crumbs) li:first-child > a[href] {
	display: inline-grid; place-items: center; width: 28px; height: 22px; margin-block: -2px; font-size: 0; line-height: 0; vertical-align: top;
}
:is(.hb-shop__crumbs, .hb-prod__crumbs) li:first-child > a[href]::before {
	content: ""; 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='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 11.2L12 4.5l8.2 6.7'/%3E%3Cpath d='M6.2 9.5v10h4.3v-5.2h3v5.2h4.3v-10'/%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='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 11.2L12 4.5l8.2 6.7'/%3E%3Cpath d='M6.2 9.5v10h4.3v-5.2h3v5.2h4.3v-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.hb-shop__crumbs, .hb-prod__crumbs) li:first-child > a[href]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }

/* WhatsApp buttons carry the WhatsApp mark (the same mark as the top bar, drawer and footer), wherever they are. */
/* ::after with order -1, not ::before: ::before is the hover fill of the sage / outline buttons (polish-motion.css). */
a.hb-btn[href*="wa.me"]:not(:has(svg, img, .hb-ico, [class*="ico"]))::after {
	content: ""; position: static; order: -1; flex: none; width: 20px; height: 20px; background: currentColor;
	-webkit-mask: url("../img/whatsapp.svg") center / contain no-repeat; mask: url("../img/whatsapp.svg") center / contain no-repeat;
}
a.hb-btn[href*="wa.me"]:not(:has(svg, img, .hb-ico, [class*="ico"])) { gap: 9px; }

/* Filters: dairy / parve on the segment, the diet options with their pill colours. */
.hb-fopt__ic { width: 16px; height: 16px; margin-inline-end: 5px; vertical-align: -3px; }
.hb-shop__check .hb-fopt__ic { width: 18px; height: 18px; margin-inline-end: 7px; vertical-align: -4px; }
.hb-fopt__ic--vegan, .hb-fopt__ic--parve { color: #4f6450; }
.hb-fopt__ic--gluten-free { color: #8a4a35; }

/* Chips (FAQ topics, gallery kinds), info lists (FAQ card, kashrut, contact hours), search tabs. */
.hb-chip__ic { width: 18px; height: 18px; }
.hb-chip.is-active .hb-chip__ic { color: var(--hb-rose, #e5cec7); }
.hb-dt__ic { width: 16px; height: 16px; margin-inline-end: 6px; vertical-align: -3px; }
.hb-contact__hours .hb-dt__ic { width: 18px; height: 18px; vertical-align: -4px; }
.hb-sr__ic { width: 16px; height: 16px; margin-inline-end: -2px; }
.hb-sr__cat-ic { display: grid !important; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: #f3ebe6; color: var(--hb-o-sage-d, #5a6f58); }
.hb-sug__item .hb-sug__pic.hb-sug__pic--ic { display: grid; place-items: center; color: var(--hb-o-sage-d, #5a6f58); }

/* The menu page: every category name with its icon (the sticky row and each section head). */
.hb-mnu__cats .hb-mnu__ic { width: 18px; height: 18px; color: var(--hb-o-sage-d, #5a6f58); }
.hb-mnu__cathead h2:has(> .hb-mnu__ic) { display: inline-flex; align-items: center; gap: 10px; }
.hb-mnu__cathead .hb-mnu__ic { width: 24px; height: 24px; color: var(--hb-o-sage-d, #5a6f58); }

/* Personal area: login tabs, the head links, the three tiles. */
.hb-acc__tabs button:has(> .hb-acc__ic) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.hb-acc__nav a:has(> .hb-acc__ic) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.hb-acc__tiles strong:has(> .hb-acc__ic) { display: flex; align-items: center; gap: 9px; }
.hb-acc__tiles .hb-acc__ic { color: var(--hb-o-sage-d, #5a6f58); }

/* Order app summary: "ל-30 אורחים · אירוח בבית" with the guests mark and a pencil to change it (order-app.js). */
.hba-sum__ctx:has(.hba-ctx-ic) { display: inline-flex; align-items: center; gap: 6px; }
.hba-ctx-ic { color: var(--hb-o-sage-d, #5a6f58); }
.hba-ctx-edit { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(53, 43, 36, .06); color: var(--hb-ink-warm, #352b24); font-style: normal; }

/* Phones: the footer columns are 112–172px wide. The icons shrink so no label wraps that did not wrap before; the
   events column (the longest names) drops them below 480px rather than break "קייטרינג לאירועים פרטיים" in two. */
@media (max-width: 480px) {
	.hb-footer__col .hb-mi { width: 14px; height: 14px; }
	.hb-footer__col li a:has(> .hb-mi) { gap: 5px; }
	.hb-footer__col .hb-mi--footer-events { display: none; }
}
@media (max-width: 374px) {
	.hb-footer__col .hb-mi--footer-info { display: none; }
}

/* Order app: the diet chips, the tags on a dish photo and the facts in its details carry the diet icons. */
.hba-diet:has(.hba-dic), .hba-chip:has(.hba-dic), .hba-det__facts li:has(.hba-dic) { display: inline-flex; align-items: center; gap: 6px; }
.hba-tags li:has(.hba-dic) { display: inline-flex; align-items: center; gap: 4px; }
.hba-dic--dairy { color: #a56902; } .hba-dic--parve, .hba-dic--vegan { color: #4f6450; } .hba-dic--gluten-free { color: #8a4a35; } .hba-dic--spicy { color: #a1281c; }
.hba-diet[aria-pressed="true"] .hba-dic, .hba-chip[aria-pressed="true"] .hba-dic { color: currentColor; }
@media (max-width: 599px) {
	/* Narrow cards: the second tag and on keep only the icon (its word is the title), as on the catalog cards. */
	.hba-tags li + li:has(.hba-dic) { padding: 3px; }
	.hba-tags li + li:has(.hba-dic) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Mega / drawer dish tiles and the peek: the diet tag with its icon (polish-nav.js). */
.hb-ti__tag:has(.hba-dic), .hb-pk__tags li:has(.hba-dic) { display: inline-flex; align-items: center; gap: 4px; }