/* Ordering core (WP-A, SGO 16/10/2026): motion tokens, the header order pill, the phone bar label, the mini
   summary, the flying bagel layer, digit roll, the bagel loader, skeletons and the brand atoms (hbBrand).
   Behaviour: assets/js/polish-order.js. Contract: seo-agents/research/HOLYBAGEL-ORDERING-UX-2026-10.md. */

/* Timing (FX-4, 16/10/2026): the --hb-t-* rows and --hb-step live in ONE table, polish-story.css :root (loaded on every
   page). This file only reads them. Map of the rows that were duplicated here, value for value, nothing changed:
   --hb-t-press 90ms · --hb-t-tick 160ms · --hb-t-swap 140ms · --hb-t-enter 220ms · --hb-t-pulse 260ms ·
   --hb-t-celebrate 640ms · --hb-step 26ms (identical rows, removed) · --hb-t-fly 420ms / 360ms phones and
   --hb-t-land 260ms (only here before, moved into the story table) · --hb-ease-out = --hbm-out (same curve). */
:root {
	--hb-ease-out: var(--hbm-out, cubic-bezier(.22, 1, .36, 1));
	--hb-ease-land: cubic-bezier(.34, 1.45, .64, 1);
	--hb-o-sage: #657b63;      /* the AA sage (white text 4.7:1), same as the header button */
	--hb-o-sage-d: #5a6f58;
	--hb-o-ink: #352b24;
	--hb-o-line: rgba(53, 43, 36, .14);
}

/* 1. Header pill: takes the start button's place once there is a context ---------------------------- */
.hb-hpill { display: none; }
html.hb-has-ctx .hb-header .hb-header__cta { display: none; }
html.hb-has-ctx .hb-header .hb-hpill {
	display: inline-flex; align-items: center; gap: 10px;
	min-width: 185px; max-width: 340px; min-height: 50px; padding: 0 20px 0 22px;
	font-size: 16px; font-weight: 700; line-height: 1.15; white-space: nowrap; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out, transform var(--hb-t-press) ease-out, box-shadow .25s ease-out;
}
body:not(.home) .hb-header .hb-hpill,
.hb-header.is-stuck .hb-hpill { background: var(--hb-o-sage); border-color: var(--hb-o-sage); color: #fff; }
body:not(.home) .hb-header .hb-hpill:hover,
.hb-header.is-stuck .hb-hpill:hover { background: var(--hb-o-sage-d); border-color: var(--hb-o-sage-d); color: #fff; }
.hb-header .hb-hpill:focus-visible { outline: 3px solid var(--hb-orange, #faa20b); outline-offset: 3px; }
/* Like the start button it replaces, the pill does not take the site's sliding button fill (polish-motion.css). */
html body .hb-header .hb-hpill::before { content: none; }
html .hb-header .hb-hpill:focus-visible { color: #fff; }
.hb-header .hb-hpill:active { transform: scale(.96); }
.hb-hpill__ico { flex: none; display: block; width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(36, 28, 22, .25)); transition: transform .38s var(--hb-ease-out); }
.hb-hpill__ico img { display: block; width: 100%; height: 100%; }
.hb-hpill__t { min-width: 0; overflow: hidden; unicode-bidi: plaintext; }
.hb-hpill__dot { opacity: .7; }
.hb-hpill__t [hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
	.hb-header .hb-hpill:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(36, 28, 22, .2); }
	.hb-header .hb-hpill:hover .hb-hpill__ico { transform: rotate(90deg); }
}
/* The header has the start button's room (~185-230px) below 1440: with items, the guests leave the pill (they stay
   in its accessible name and in the side cart's fit line); the count and the total are what matter there. */
@media (max-width: 1439px) {
	html.hb-has-ctx .hb-header .hb-hpill { max-width: 236px; min-width: 0; gap: 8px; padding-inline: 16px 18px; font-size: 15px; }
	.hb-hpill__t { white-space: nowrap; }
}
/* 1280-1439: the full nav is shown and the start button is only ~153px; the pill keeps that footprint. */
@media (min-width: 1280px) and (max-width: 1439px) {
	html.hb-has-ctx .hb-header .hb-hpill { max-width: 156px; padding-inline: 12px; font-size: 14px; }
	html.hb-has-ctx .hb-header .hb-hpill .hb-hpill__ico { display: none; }
}
@media (max-width: 767px) { html.hb-has-ctx .hb-header .hb-hpill { display: none; } }

/* 2. Phone bottom bar: the start button carries the same words ------------------------------------- */
.hb-ctabar__start.has-ctx .hb-ctabar__orig { display: none; }
.hb-ctabar__ctx { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; unicode-bidi: plaintext; }
.hb-ctabar .hb-ctabar__start.has-ctx { padding-inline: 12px; }
/* One primary colour (fix wave 16/10/2026): the bar's start button carries the order in the same sage as every other
   primary action, white text 4.7:1. Amber stays an accent (badges, focus ring). */
.hb-ctabar .hb-ctabar__start.hb-btn.has-ctx { background: var(--hb-o-sage); border-color: var(--hb-o-sage); color: #fff; }
.hb-ctabar .hb-ctabar__start.hb-btn.has-ctx:active { background: var(--hb-o-sage-d); }
.hb-ctabar__start.has-ctx { min-width: 0; }

/* 3. Fly layer, landing ring, digit roll ------------------------------------------------------------ */
#hb-fx { position: fixed; inset: 0; z-index: 1150; pointer-events: none; contain: strict; overflow: hidden; }
.hb-fx-bagel { position: absolute; display: block; will-change: transform; filter: drop-shadow(0 4px 6px rgba(36, 28, 22, .28)); }
.hb-fx-bagel.is-photo { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 6px 14px rgba(36, 28, 22, .25); }
.hb-fx-ring { position: absolute; border: 2px solid #c88003; border-radius: 50%; opacity: 0; }
.hb-roll { display: inline-grid; overflow: hidden; vertical-align: bottom; line-height: inherit; }
.hb-roll > span { grid-area: 1 / 1; white-space: nowrap; }
[aria-busy="true"].is-adding { cursor: progress; }

/* 4. Loader (the bagel turning) and skeletons ------------------------------------------------------- */
.hb-bagel-spin {
	--s: 20px; display: inline-block; flex: none; width: var(--s); height: var(--s); vertical-align: middle;
	background: url("../img/bagel.webp") center / contain no-repeat;
	animation: hb-bagel-turn 900ms linear infinite;
}
@keyframes hb-bagel-turn { to { transform: rotate(360deg); } }
.hb-skel { border-radius: 14px; background: rgba(53, 43, 36, .07); }
.hb-skel--line { height: 12px; border-radius: 6px; }
@media (min-width: 768px) {
	.hb-skel { background: linear-gradient(100deg, rgba(53, 43, 36, .06) 30%, rgba(53, 43, 36, .11) 50%, rgba(53, 43, 36, .06) 70%) 0 0 / 300% 100%; animation: hb-skel 1.4s ease-in-out infinite; }
}
@keyframes hb-skel { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* 5. Brand atoms (hbBrand) -------------------------------------------------------------------------- */
.hb-bmark { display: block; flex: none; width: 20px; height: auto; }
.hb-bhead__bagel { display: block; flex: none; width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(36, 28, 22, .2)); }
.hb-bloader { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--hb-o-ink); }
.hb-bhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hb-bhead__t { margin: 0; font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--hb-o-ink); }
.hb-bhead__sub { flex-basis: 100%; margin: 0; font-size: 14px; color: rgba(53, 43, 36, .72); }
.hb-bempty { display: grid; justify-items: center; gap: 8px; padding: 22px 12px; text-align: center; color: var(--hb-o-ink); }
.hb-bempty__bagel { width: 56px; height: 56px; filter: drop-shadow(0 4px 6px rgba(36, 28, 22, .2)); }
.hb-bempty__h { margin: 4px 0 0; font-weight: 700; font-size: 19px; }
.hb-bempty__t { max-width: 32ch; margin: 0; font-size: 15px; color: rgba(53, 43, 36, .75); }
.hb-bempty__go { margin-top: 6px; background: var(--hb-o-sage); color: #fff; }
.hb-bempty__go:hover { background: var(--hb-o-sage-d); color: #fff; }
.hb-seal { --s: 76px; display: inline-flex; flex-direction: column; align-items: center; gap: calc(var(--s) * .1); flex: none; }
.hb-seal__disc { position: relative; display: grid; place-items: center; width: var(--s); height: var(--s); }
.hb-seal__ring { position: absolute; inset: 0; border-radius: 50%; background: #f6efe9; box-shadow: inset 0 0 0 1.5px rgba(200, 128, 3, .55); }
.hb-seal__dash { position: absolute; inset: 9%; border-radius: 50%; border: 1.5px dashed rgba(200, 128, 3, .6); }
.hb-seal__cap { font-weight: 700; font-size: max(14px, calc(var(--s) * .19)); line-height: 1.2; letter-spacing: 0; color: #352b24; white-space: nowrap; }
.hb-seal__bagel { position: relative; width: 56%; height: 56%; filter: drop-shadow(0 2px 3px rgba(36, 28, 22, .25)); }
.hb-seal__ok { position: absolute; inset-block-end: 2%; inset-inline-end: 2%; width: 30%; height: 30%; border-radius: 50%; background: var(--hb-o-sage) url("../img/check.svg") center / 52% no-repeat; box-shadow: 0 0 0 2px #fff; filter: brightness(1); }
.hb-seal__ok { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 5.8 3.6 3.4L12.5 1.8'/%3E%3C/svg%3E"); }
.hb-toast--brand .hb-toast__ico { border: 0; width: 28px; height: 28px; }
.hb-toast--brand .hb-toast__ico img { display: block; width: 28px; height: 28px; }

/* 6. Mini summary ("ההזמנה שלי") -------------------------------------------------------------------- */
.hb-omini { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--hb-o-line); border-radius: 22px; background: #fff; color: var(--hb-o-ink); }
.hb-omini__h { padding-bottom: 10px; border-bottom: 1px dashed rgba(200, 128, 3, .45); }
.hb-omini__ctx { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-weight: 600; font-size: 15px; }
.hb-omini__edit { min-height: 44px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; font: inherit; font-weight: 700; color: var(--hb-o-sage); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hb-omini__edit:focus-visible { outline: 3px solid var(--hb-orange, #faa20b); outline-offset: 2px; }
.hb-omini__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.hb-omini__nums > div { min-width: 0; padding: 8px 10px; border-radius: 14px; background: #f6efe9; }
.hb-omini__nums > div[hidden] { display: none; }
.hb-omini__nums dt { font-size: 13px; color: rgba(53, 43, 36, .72); }
.hb-omini__nums dd { margin: 2px 0 0; font-weight: 700; font-size: 18px; white-space: nowrap; }
.hb-omini__nums > div:first-child dd { white-space: normal; font-size: 15px; line-height: 1.3; }
.hb-omini__fit { margin: 0; font-size: 14px; color: var(--hb-o-sage-d); }
.hb-omini__fit[hidden] { display: none; }
.hb-omini__empty { display: none; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: rgba(53, 43, 36, .75); }
.hb-omini[data-state="empty"] .hb-omini__empty, .hb-omini[data-state="ctx"] .hb-omini__empty { display: flex; }
.hb-omini[data-state="empty"] .hb-omini__nums, .hb-omini[data-state="ctx"] .hb-omini__nums { display: none; }
.hb-omini[data-state="empty"] .hb-omini__go, .hb-omini[data-state="ctx"] .hb-omini__go { display: none; }
.hb-omini__empty img { flex: none; width: 28px; height: 28px; }
.hb-omini__go { width: 100%; min-height: 50px; background: var(--hb-o-sage); color: #fff; }
.hb-omini__go:hover { background: var(--hb-o-sage-d); color: #fff; }

/* 7. Page lines: product suggestion, checkout note ------------------------------------------------- */
.hb-osuggest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; padding: 8px 14px; border-radius: 14px; background: #f6efe9; font-weight: 600; font-size: 15px; color: var(--hb-o-ink); }
.hb-osuggest[hidden] { display: none; }
.hb-osuggest__set { min-height: 44px; padding: 0 10px; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--hb-o-sage); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hb-osuggest__set:focus-visible { outline: 3px solid var(--hb-orange, #faa20b); outline-offset: 2px; border-radius: 8px; }
.hb-co-ctx { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: #f6efe9; font-weight: 600; font-size: 15px; color: var(--hb-o-ink); }

/* 7b. The one add control (hbOrder.ui.qty / cartQty, contract FX-1 C) -------------------------------- */
.hb-qty { display: inline-flex; align-items: center; flex: none; min-height: 44px; vertical-align: middle; font-family: var(--hb-font, inherit); -webkit-tap-highlight-color: transparent; }
.hb-qty svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hb-qty .hb-qty__add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; margin: 0; padding: 0 18px 0 20px; border: 0; border-radius: 999px; background: var(--hb-o-sage); color: #fff; font: inherit; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .16s ease, transform var(--hb-t-press) ease-out; }
.hb-qty .hb-qty__add:hover { background: var(--hb-o-sage-d); color: #fff; }
.hb-qty .hb-qty__add:active { transform: scale(.96); }
.hb-qty .hb-qty__add[disabled] { background: #e3dad3; color: #6b605a; cursor: default; }
.hb-qty.hb-qty--compact .hb-qty__add { width: 44px; padding: 0; }
.hb-qty.is-step { gap: 0; padding: 0; border: 1.5px solid var(--hb-o-sage); border-radius: 999px; background: #fff; color: var(--hb-o-ink); }
.hb-qty .hb-qty__b { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--hb-o-sage-d); cursor: pointer; transition: background-color .16s ease, transform var(--hb-t-press) ease-out; }
.hb-qty .hb-qty__b:hover { background: #eef2ec; }
.hb-qty .hb-qty__b:active { transform: scale(.92); }
.hb-qty .hb-qty__b[disabled] { opacity: .35; cursor: default; }
.hb-qty .hb-qty__b[data-one="true"] { color: #8a3a2c; }
.hb-qty__n { min-width: 24px; text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.hb-qty :focus-visible { outline: 2px solid var(--hb-o-ink); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(250, 162, 11, .35); }
.hb-qty.is-busy { cursor: progress; }
.hb-qty.is-busy .hb-qty__add, .hb-qty.is-busy .hb-qty__b { pointer-events: none; }
.hb-qty.is-busy .hb-qty__add { opacity: .85; }
/* The draft bar on the cart: the builder's open choice is not in the cart yet (contract FX-1 E). */
.hb-draftbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(101, 123, 99, .45); border-radius: 18px; background: #eef2ec; color: var(--hb-o-ink); text-align: start; }
.hb-draftbar img { flex: none; width: 32px; height: 32px; }
.hb-draftbar__t { flex: 1 1 220px; margin: 0; font-size: 15px; line-height: 1.45; }
.hb-draftbar__t b { display: block; font-weight: 700; }
.hb-draftbar__t span { display: block; color: #4a3f39; }
.hb-draftbar__go.hb-btn { flex: none; min-height: 44px; padding: 0 20px; background: var(--hb-o-sage); border-color: var(--hb-o-sage); color: #fff; }
.hb-draftbar__go.hb-btn:hover { background: var(--hb-o-sage-d); color: #fff; }
.hb-cartempty .hb-draftbar { margin: 0 0 14px; width: 100%; }

/* 8. Reduced motion and the site's own motion switch ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.hb-bagel-spin, .hb-skel { animation: none; }
	.hb-hpill, .hb-hpill__ico { transition: none; }
	#hb-fx { display: none; }
	.hb-qty__add, .hb-qty__b { transition: none; }
	.hb-qty__add:active, .hb-qty__b:active { transform: none; }
}
html.hb-a11y-motion .hb-bagel-spin, html.hb-a11y-motion .hb-skel { animation: none !important; }
html.hb-a11y-motion #hb-fx { display: none; }
html.hb-a11y-motion .hb-hpill__ico { transition: none; }

/* QA 16/10/2026: the side cart is the add's feedback while it is open; a good-news toast over it hid its checkout button. */
html.hb-cart-lock .hb-toast--brand { display: none; }