/* =====================================================================================================
   Holy Bagel: interaction layer, site-wide (SGO, 16/10/2026). Loads after every other stylesheet (inc/polish.php).
   One feel for everything that answers a pointer, a key or a finger:
     hover  260-300ms --hbm-out, never a jump; colour arrives with the movement, not after it
     press  120ms, a small give (scale .97 buttons, .985 cards), on touch screens too
     focus  every hover state also shows for keyboard focus (:focus-visible / :focus-within), never for a mouse click
   Pointer-only effects live inside (hover: hover) and (pointer: fine), so a tap never leaves a card "stuck" lifted.
   (main.css's own ungated :hover movement is moved behind the same query at load by polish-motion.js.)
   Tokens (--hbm-out, --hbm-soft, durations) come from polish-story.css, the one timing table; fallbacks here keep this file safe on its own.
   ===================================================================================================== */
:root { --hbm-hover: var(--hbm-t-hover, 260ms); --hbm-press: var(--hbm-t-tap, 90ms); /* both from the one timing table (polish-story.css) */ --hbm-lift: 0 18px 40px -18px rgba(53, 43, 36, .28), 0 4px 12px -4px rgba(53, 43, 36, .08); }

/* ---- Buttons: the colour fills in from the reading side (right), the arrow leans forward --------------- */
:is(.hb-btn--sage, .hb-btn--primary, .hb-btn--outline, .hb-btn--ghost, .hb-reviews__btn):not(.hb-header__cta) {
	position: relative; isolation: isolate; overflow: hidden;
	transition: color var(--hbm-hover) var(--hbm-out, ease-out), border-color var(--hbm-hover) var(--hbm-out, ease-out), transform var(--hbm-press) var(--hbm-out, ease-out);
}
:is(.hb-btn--sage, .hb-btn--primary, .hb-btn--outline, .hb-btn--ghost, .hb-reviews__btn):not(.hb-header__cta)::before {
	content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
	background: var(--hbm-fill, var(--hb-ink-warm));
	transform: translate3d(calc(101% * var(--hbm-from, 1)), 0, 0);
	transition: transform .3s var(--hbm-out, ease-out);
}
[dir="ltr"] :is(.hb-btn--sage, .hb-btn--primary, .hb-btn--outline, .hb-btn--ghost, .hb-reviews__btn) { --hbm-from: -1; }
.hb-btn--sage { --hbm-fill: var(--hb-sage-dark); }
.hb-btn--primary { --hbm-fill: var(--hb-orange-dark, #e09c00); }
.hb-btn--ghost { --hbm-fill: var(--hb-white, #fff); }
.hb-btn__arrow { translate: 0 0; transition: translate var(--hbm-hover) var(--hbm-out, ease-out); }

/* Keyboard focus gets the same fill as hover. */
:is(.hb-btn--sage, .hb-btn--primary, .hb-btn--outline, .hb-btn--ghost, .hb-reviews__btn):not(.hb-header__cta):focus-visible::before { transform: none; }
:is(.hb-btn--outline, .hb-reviews__btn):not(.hb-header__cta):focus-visible { color: var(--hb-white); }
:is(.hb-btn--ghost):not(.hb-header__cta):focus-visible { color: var(--hb-ink-warm); }
.hb-event:focus-visible .hb-event__btn::before { transform: none; }
.hb-event:focus-visible .hb-event__btn { color: var(--hb-ink-warm); }
.hb-event:focus-visible .hb-event__img { transform: scale(1.04); opacity: .72; }

@media (hover: hover) and (pointer: fine) {
	:is(.hb-btn--sage, .hb-btn--primary, .hb-btn--outline, .hb-btn--ghost, .hb-reviews__btn):not(.hb-header__cta):hover::before,
	.hb-event:hover .hb-event__btn::before { transform: none; }
	/* The fill does the colour change: the flat background swap from main.css would arrive before it. */
	.hb-btn--sage:not(.hb-header__cta):hover { background-color: var(--hb-sage); }
	.hb-btn--primary:not(.hb-header__cta):hover { background-color: var(--hb-orange); }
	.hb-btn--outline:not(.hb-header__cta):hover { background-color: transparent; color: var(--hb-white); }
	.hb-reviews__btn:hover { background-color: var(--hb-filter-bg); color: var(--hb-white); }
	.hb-btn--ghost:not(.hb-header__cta):hover, .hb-event:hover .hb-event__btn { background-color: transparent; color: var(--hb-ink-warm); }
	.hb-btn:hover .hb-btn__arrow, .hb-event:hover .hb-btn__arrow { translate: -4px 0; }
	[dir="ltr"] .hb-btn:hover .hb-btn__arrow { translate: 4px 0; }
}
/* Press: a small give, on every screen (touch included). */
.hb-btn:active, .hb-dd__btn:active, .hb-header__cart:active, .hb-header__search:active { transform: scale(.97); transition-duration: var(--hbm-press); }

/* ---- Cards: lift on a soft warm shadow, the photo leans in a little --------------------------------- */
.hb-pk-card, .hb-cat, .hb-review, .hb-clients__logos li, .hb-event {
	transition: transform var(--hbm-hover) var(--hbm-out, ease-out), opacity .3s var(--hbm-out, ease-out);
}
/* The lift's shadow is a layer that fades in (opacity, on the compositor) rather than an animated box-shadow. */
.hb-pk-card, .hb-cat, .hb-review, .hb-clients__logos li { position: relative; isolation: isolate; }
:is(.hb-pk-card, .hb-review, .hb-clients__logos li)::after, .hb-cat::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	box-shadow: var(--hbm-lift); opacity: 0; transition: opacity var(--hbm-hover) var(--hbm-out, ease-out);
}
.hb-clients__logos li::after { box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .4); }
.hb-pk-card__img, .hb-cat__img img, .hb-gallery__btn img, .hb-event__img, .hb-clients__logos img, .hb-pcard__media img {
	transition: transform .3s var(--hbm-out, ease-out), opacity .3s var(--hbm-out, ease-out);
}
.hb-why__icon, .hb-gallery__play { transition: transform .3s var(--hbm-out, ease-out), opacity .3s var(--hbm-out, ease-out); }

@media (hover: hover) and (pointer: fine) {
	.hb-pk-card.is-in:hover, .hb-pk-card.is-in:focus-within { transform: translate3d(0, -6px, 0); box-shadow: 0 4px 14px rgba(53, 43, 36, .04); }
	:is(.hb-pk-card.is-in, .hb-review, .hb-clients__logos li):hover::after, .hb-cat:hover::before { opacity: 1; }
	.hb-pk-card:hover .hb-pk-card__img { transform: scale(1.045); }
	.hb-cat:hover { transform: translate3d(0, -6px, 0); }
	.hb-cat:hover .hb-cat__img img { transform: scale(1.06) rotate(-2deg); }
	.hb-event:hover .hb-event__img { transform: scale(1.04); opacity: .72; }
	.hb-review:hover { transform: translate3d(0, -4px, 0); }
	.hb-clients__logos li:hover { transform: translate3d(0, -4px, 0); }
	.hb-clients__logos li:hover img { transform: scale(1.04); }
	.hb-gallery__btn:hover img { transform: scale(1.05); filter: none; transition-property: transform, opacity; }
	.hb-gallery__btn:hover .hb-gallery__play { transform: scale(1.1); }
	.hb-why__item:hover .hb-why__icon { transform: rotate(14deg) scale(1.08); }
	.hb-why__item:hover .hb-why__icon--why-kosher { transform: rotate(-76deg) scale(1.08); }
	.hb-pcard:hover .hb-pcard__media img { transform: scale(1.045); }
}
/* Keyboard: a focused card lifts like a hovered one (its link carries the ring from polish-global.css). */
.hb-cat:focus-visible, .hb-event:focus-visible { transform: translate3d(0, -6px, 0); }
.hb-pk-card.is-in:focus-within::after, .hb-review:focus-within::after, .hb-cat:focus-visible::before { opacity: 1; }
.hb-review:focus-within, .hb-gallery__item:focus-within { transform: translate3d(0, -4px, 0); }

/* Gallery: a soft shade rises from the bottom of a photo under the pointer, so the play/zoom reads as an action. */
.hb-gallery__btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(31, 24, 19, .32), rgba(31, 24, 19, 0) 55%); opacity: 0; transition: opacity .3s var(--hbm-out, ease-out); }
@media (hover: hover) and (pointer: fine) { .hb-gallery__btn:hover::after { opacity: 1; } }
.hb-gallery__btn:focus-visible::after { opacity: 1; }

/* Touch: the press is the feedback (a card that stays lifted after a tap reads as a bug). */
@media (hover: none) {
	.hb-pk-card:active, .hb-cat:active, .hb-event:active, .hb-review:active, .hb-gallery__btn:active { transform: scale(.985); transition-duration: var(--hbm-press); }
}

/* ---- Navigation: a fine underline draws in from the reading side ------------------------------------ */
.hb-nav__list > li:not(.hb-menu-highlight) > a {
	background: linear-gradient(currentColor, currentColor) no-repeat 100% calc(100% - 8px) / 0 1.5px;
	transition: color .2s var(--hbm-out, ease-out), background-size .3s var(--hbm-out, ease-out);
}
[dir="ltr"] .hb-nav__list > li:not(.hb-menu-highlight) > a { background-position: 0 calc(100% - 8px); }
.hb-nav__list > li:not(.hb-menu-highlight) > a:focus-visible,
.hb-nav__list > li:not(.hb-menu-highlight).current-menu-item > a { background-size: 100% 1.5px; }
@media (hover: hover) and (pointer: fine) {
	.hb-nav__list > li:not(.hb-menu-highlight):hover > a { background-size: 100% 1.5px; }
	.hb-header__search:hover { background-color: rgba(255, 255, 255, .12); }
	.hb-header.is-stuck .hb-header__search:hover, body:not(.home) .hb-header__search:hover { background-color: rgba(53, 43, 36, .08); }
}
.hb-header__search { border-radius: 50%; transition: background-color .2s var(--hbm-out, ease-out), transform var(--hbm-press) var(--hbm-out, ease-out); }

/* ---- FAQ rows answer the pointer too ---------------------------------------------------------------- */
.hb-faq__item summary { cursor: pointer; }
.hb-faq__icon { transition: transform .3s var(--hbm-out, ease-out); }
@media (hover: hover) and (pointer: fine) {
	.hb-faq__item:not([open]):hover { background-color: color-mix(in srgb, var(--hb-cream) 88%, var(--hb-ink-warm)); }
	.hb-faq__item:not([open]) summary:hover .hb-faq__icon { transform: scale(1.15); }
}

/* ---- Reduced motion / the site's "stop animations" switch: colour changes only ---------------------- */
@media (prefers-reduced-motion: reduce) {
	:is(.hb-btn--sage, .hb-btn--primary, .hb-btn--outline, .hb-btn--ghost, .hb-reviews__btn)::before { transition: none; }
	.hb-pk-card, .hb-cat, .hb-review, .hb-clients__logos li, .hb-event, .hb-gallery__item, .hb-btn,
	.hb-pk-card__img, .hb-cat__img img, .hb-gallery__btn img, .hb-event__img, .hb-why__icon, .hb-btn__arrow { transform: none !important; translate: none !important; }
}
html.hb-a11y-motion :is(.hb-pk-card, .hb-cat, .hb-review, .hb-clients__logos li, .hb-event, .hb-gallery__item, .hb-btn, .hb-pk-card__img, .hb-cat__img img, .hb-gallery__btn img, .hb-event__img, .hb-why__icon, .hb-btn__arrow) { transform: none !important; translate: none !important; }

/* ---- The bagel, one character on every page (polish-motion.js §3) ------------------------------------
   The script writes --hbx-w (its flywheel angle); it is added to whatever turns the bagel already (GSAP's
   transform, the CSS loops, main.js's --hb-spin) through the separate 'rotate' property. Bagels never take a
   pointer: taps are hit-tested by geometry, so a bagel can never sit between a finger and a link. */
:where(.hb-bagel__spin, .hb-footer__bagel-whole img, .hb-faq__bagel, .hb-faqp__bagel, .hb-galp__bagel, .hb-about__hero-bagel, .hb-om__badge-bagel, .hb-state__code img) { rotate: var(--hbx-w, 0deg); }
[data-hb-spin] { rotate: calc(var(--hb-spin, 0deg) + var(--hbx-w, 0deg)); }
:where(.hb-bagel, .hb-bagel__spin, .hb-footer__bagel-whole, .hb-faq__bagel, .hb-faqp__bagel, .hb-galp__bagel, .hb-about__hero-bagel, .hb-om__badge-bagel, .hb-state__code img, [data-hb-spin]) { pointer-events: none; -webkit-user-select: none; user-select: none; }
/* Motion blur for the home packages bagel: two faint copies trailing its spin (opacity 0 at rest). */
.hb-bagel__spin .hbx-ghost { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
/* Its contact shadow on the counter: soft at the edges, darkest right under the crust. */
.hbx-floor { position: absolute; left: 13%; right: 13%; top: 84%; height: 13%; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(53, 43, 36, .26), rgba(53, 43, 36, .1) 58%, rgba(53, 43, 36, 0)); }
/* Sesame (and a few poppy) seeds that jump off a flicked bagel. */
.hbx-seeds { position: fixed; inset: 0; z-index: 9990; pointer-events: none; overflow: hidden; contain: strict; }
.hbx-seeds i { position: absolute; width: 5px; height: 8px; margin: -4px 0 0 -2.5px; border-radius: 50%; background: radial-gradient(ellipse at 40% 35%, #fbf1d8, #e8cf9c 70%, #c9a465); box-shadow: 0 1px 1px rgba(53, 43, 36, .18); will-change: transform, opacity; }
.hbx-seeds i.is-dark { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #3a2e26; }
/* 404: bites, each a scalloped arc of three overlapping round bites into the crust (kept as the bagel turns). */
.hb-state__code img.hbx-bite-1, .hb-state__code img.hbx-bite-2, .hb-state__code img.hbx-bite-3 {
	-webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.hb-state__code img.hbx-bite-1 {
	--b1: radial-gradient(15% 15% at 85.4% 14.6%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 94.5% 27.3%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 72.7% 5.4%, #0000 97%, #000 100%);
	-webkit-mask-image: var(--b1); mask-image: var(--b1);
}
.hb-state__code img.hbx-bite-2 {
	--b2: radial-gradient(15% 15% at 85.4% 14.6%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 94.5% 27.3%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 72.7% 5.4%, #0000 97%, #000 100%),
		radial-gradient(15% 15% at 0.2% 54.4%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 4% 69.5%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 1.3% 38.8%, #0000 97%, #000 100%);
	-webkit-mask-image: var(--b2); mask-image: var(--b2);
}
.hb-state__code img.hbx-bite-3 {
	--b3: radial-gradient(15% 15% at 85.4% 14.6%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 94.5% 27.3%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 72.7% 5.4%, #0000 97%, #000 100%),
		radial-gradient(15% 15% at 0.2% 54.4%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 4% 69.5%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 1.3% 38.8%, #0000 97%, #000 100%),
		radial-gradient(15% 15% at 41.3% 99.2%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 57% 99.5%, #0000 97%, #000 100%), radial-gradient(13.5% 13.5% at 26.5% 94.1%, #0000 97%, #000 100%);
	-webkit-mask-image: var(--b3); mask-image: var(--b3);
}
@media (prefers-reduced-motion: reduce) { .hbx-seeds { display: none; } }