/* Header (package PP, SGO 16/10/2026, owner): the same visual gutter on both sides, in the hero state and the sticky pill,
   at every width; a cleaner, slightly taller burger centred on the logo and the seal. Loads last (polish layer 'header').

   Measured before (Chrome, visible ink, not boxes): 390 hero logo 21 / burger 20 · 390 pill 22 / 16 · 768 hero 22 / −2
   (the burger was pushed out of the header) · 1280 hero 22 / −4 (the start button touched the edge) · pill 29 / 10.
   Causes: (1) asymmetric paddings in main.css (9|16, 18|10, 14|8); (2) the logo PNG has 27/382 px of transparent margin on
   each side (7.07% of its width), so its ink sits ~9–14px inside its box; (3) the burger draws 26–28px of lines in a 44px
   box; (4) at 768–1179 and 1180–1365 the row was wider than the header. */

:root { --hbh-g: 24px; }
@media (max-width: 1179px) { :root { --hbh-g: 20px; } }
@media (max-width: 767px) { :root { --hbh-g: 16px; } }

/* 1. One gutter, both sides, both states. */
.hb-header .hb-header__inner,
.hb-header.is-stuck .hb-header__inner { padding-inline: var(--hbh-g); }

/* 2. The logo's ink, not its box, sits on the gutter: shift by its own transparent margin (7.07% of its width).
   `translate` composes with any transform the intro animation uses. */
.hb-header__logo { translate: 7.07% 0; }

/* 3. The burger: 26px lines at 1.8px (the seal's and the line icons' weight), 6px apart; its ink sits on the gutter. */
.hb-header .hb-header__burger { position: relative; gap: 6px; margin-inline-end: -9px; border-radius: 50%; }
.hb-header .hb-header__burger span { width: 26px; height: 1.8px; border-radius: 2px; }
.hb-header__burger[aria-expanded="true"] span:nth-child(1) { translate: 0 7.8px; }
.hb-header__burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -7.8px; }
/* A quiet tap circle: shows on hover, focus and press only, so it never changes the measured gutter at rest. */
.hb-header .hb-header__burger::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .16s ease-out; pointer-events: none; }
@media (hover: hover) { .hb-header .hb-header__burger:hover::before { opacity: .07; } }
.hb-header .hb-header__burger:active::before { opacity: .12; }
.hb-header .hb-header__burger:focus-visible { outline: 2px solid currentColor; outline-offset: 0; }

/* 4. Tablet and small desktop: everything fits inside the header (nothing pushed past its edge). */
@media (min-width: 768px) and (max-width: 1179px) {
	.hb-header .hb-header__inner { gap: 16px; }
	.hb-header:not(.is-stuck) .hb-header__logo img { width: 164px; }
	.hb-header .hb-header__badge { margin-inline-end: 6px; }
	.hb-header .hb-header__cart { margin-inline-start: 0; }
	.hb-header .hb-header__burger { margin-inline-start: 4px; }
}
@media (min-width: 1180px) and (max-width: 1365px) {
	.hb-header .hb-header__inner { gap: 20px; }
	.hb-header:not(.is-stuck) .hb-header__logo img { width: 172px; }
}

/* Phones: the home hero used a 150px logo, which pushed the burger past the edge (8px at 390, −22 at 360). */
@media (max-width: 767px) {
	body.home .hb-header:not(.is-stuck) .hb-header__logo img { width: 128px; }
}
@media (max-width: 374px) {
	body .hb-header:not(.is-stuck) .hb-header__logo img, body.home .hb-header:not(.is-stuck) .hb-header__logo img { width: 116px; }
	.hb-header .hb-header__inner { gap: 6px; }
	.hb-header .hb-header__badge { margin-inline-end: 2px; }
}

/* 5. FX-4 (16/10/2026): the home header is in the flow and pulls the hero up under it (main.css: wrap min-height 0 +
   margin-bottom −header-h). Once it pins (position: fixed) the wrap had nothing inside, fell to 0 and the whole page
   jumped up by the header's height: CLS 0.07–0.10 on every home scroll (0.13–0.24 in the review). The wrap now keeps
   the header's height in both states, so pinning moves nothing. Inner pages already reserve it (main.css). */
.home .hb-header-wrap { min-height: var(--hb-header-h); }

@media (prefers-reduced-motion: reduce) { .hb-header .hb-header__burger::before { transition: none; } }

/* The order pill over the home hero (package HM round 2, 16/10/2026). At the top of home the header is transparent
   over the dark film, and the pill inherited the ghost button's hover (ink text, with the white fill switched off),
   so it read as dark on dark. Over the film it is now a cream pill with ink text and the bagel: 12.5:1 at rest,
   10.6:1 on hover, whatever frame the video shows. Stuck and inner pages keep the sage pill (white on #657b63, 4.6:1). */
html.hb-has-ctx body.home .hb-header:not(.is-stuck) .hb-hpill { background: var(--hb-filter-bg, #f9f4f0); border-color: var(--hb-filter-bg, #f9f4f0); color: var(--hb-ink-warm, #352b24); box-shadow: 0 6px 18px rgba(20, 14, 10, .28); }
html.hb-has-ctx body.home .hb-header:not(.is-stuck) .hb-hpill:hover { background: var(--hb-cream, #eae0d9); border-color: var(--hb-cream, #eae0d9); color: var(--hb-ink-warm, #352b24); }
html body.home .hb-header:not(.is-stuck) .hb-hpill:focus-visible { color: var(--hb-ink-warm, #352b24); outline: 3px solid var(--hb-orange, #faa20b); outline-offset: 3px; }
html.hb-has-ctx body.home .hb-header:not(.is-stuck) .hb-hpill .hb-hpill__ico { filter: none; }

/* ---- CJ run 2 (16/10/2026): at 1280-1439 the pill's 156px cap dropped the item count even with a few pixels to spare.
   A little more room and tighter padding keep "ההזמנה שלי · N" (measured: the nav and the start button do not move); fitPill() in
   polish-order.js still steps down to the total when the header is genuinely full. */
@media (min-width: 1280px) and (max-width: 1439px) {
	html.hb-has-ctx .hb-header .hb-hpill { max-width: 172px; padding-inline: 10px; }
}