/* ==========================================================================
   Homepage and order page — "שבת בבוקר"
   ========================================================================== */

.jg-page { position: relative; }

.jg-section-title {
	margin: 0 0 36px;
	font-size: clamp(38px, 5vw, 62px);
	line-height: .98;
}

/* ordering bar, restyled as a ticket on the paper */
.jg-page .jgo-bar {
	max-width: 560px;
	margin: 0;
	border-color: var(--jg-line);
	border-radius: 22px;
	background: var(--jg-card);
}

.jg-page .jgo-bar.is-set { border-color: var(--jg-ink); }
.jg-page .jgo-bar__icon { background-color: var(--jg-ink); }

/* ---- hero: one olive panel ----------------------------------------------------
   Inset from the page edges with big round corners. The name runs across it
   in giant cream letters; the jachnun spread, cut out of its photo, stands
   in front of them, pinned to the panel's far corner so the photo's own cut
   edges hide behind the panel's. Ordering sits in the near (reading-side)
   corner. Below 960px everything stacks and the dish closes the panel. */

.jg-status--lg { font-size: 15px; }

.jg-hero { --beat: 100ms; padding: 6px 10px 0; }
@media (min-width: 720px) { .jg-hero { padding: 8px 16px 0; } }

.jg-hero__panel {
	--hero-r: 26px;
	--pad: 20px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* The header sits inside the panel's top on load (see main.css), so the
	   padding has to clear it. --jg-head-real is the bar's measured height
	   (site.js); the fallbacks are the no-JS worst case, because a status
	   line printed over the logo is worse than a roomy hero. */
	padding: calc(var(--jg-head-real, 134px) + 14px) var(--pad) 0;
	border-radius: var(--hero-r);
	background:
		radial-gradient(90% 70% at 22% 100%, var(--hero-glow) 0%, transparent 70%),
		var(--hero-bg);
	color: var(--hero-fg);
	container-type: inline-size;
}

/* No-JS fallback only; site.js measures the real bar on every screen. */
@media (min-width: 1024px) { .jg-hero__panel { padding-top: calc(var(--jg-head-real, 116px) + 20px); } }

/* The panel's colours: a deep, warm olive. It plays against the red tomato
   and the golden rolls, and is a shade darker and browner than the green
   chili so the bowl stays separate from the ground. */
.jg-hero__panel {
	--hero-bg: #4b5326;
	--hero-glow: #626b31;
	--hero-fg: var(--jg-cream);
	--hero-mark: var(--jg-cream);
	--hero-shade: 24, 28, 6;
	--hero-cta-bg: var(--jg-card);
	--hero-cta-fg: var(--jg-ink);
}

/* The other grounds, one per visit (jg_hero_palettes in inc/home.php). Olive
   above stays the fallback when scripts are off. */
[data-hero="red"] .jg-hero__panel { --hero-bg: var(--jg-red); --hero-glow: #b52a2d; --hero-shade: 58, 4, 6; }
[data-hero="chocolate"] .jg-hero__panel { --hero-bg: #241a17; --hero-glow: #3d2c23; --hero-shade: 0, 0, 0; }
[data-hero="charcoal"] .jg-hero__panel { --hero-bg: #2a231d; --hero-glow: #3e342a; --hero-shade: 10, 8, 5; }
[data-hero="teal"] .jg-hero__panel { --hero-bg: #1e4a4c; --hero-glow: #2b6163; --hero-shade: 8, 28, 30; }
[data-hero="terracotta"] .jg-hero__panel { --hero-bg: #a9512f; --hero-glow: #bf6844; --hero-shade: 70, 25, 12; }
[data-hero="bottle"] .jg-hero__panel { --hero-bg: #2c4431; --hero-glow: #3b5a40; --hero-shade: 10, 22, 12; }

/* hawaij: a light ground, so the type and the floating header go ink, and
   the header's gold "להזמנה" goes ink too until the bar turns solid */
[data-hero="ochre"] .jg-hero__panel {
	--hero-bg: #c98f2a;
	--hero-glow: #dcaa4c;
	--hero-shade: 90, 55, 10;
	--hero-fg: var(--jg-ink);
	--hero-mark: var(--jg-ink);
}

/* sand: the lightest ground, ink type with the title in brand red, and an
   ink pill for the hero's own CTA */
[data-hero="sand"] .jg-hero__panel {
	--hero-bg: #e8d5b0;
	--hero-glow: #f3e5c8;
	--hero-shade: 92, 56, 18;
	--hero-fg: var(--jg-ink);
	--hero-mark: var(--jg-red);
	--hero-cta-bg: var(--jg-ink);
	--hero-cta-fg: var(--jg-cream);
}

[data-hero="sand"] .jg-hero-page #masthead.jg-header:not(.is-scrolled),
[data-hero="ochre"] .jg-hero-page #masthead.jg-header:not(.is-scrolled) {
	--hdr-fg: var(--jg-ink);
	--hdr-logo: var(--jg-ink);
	--hdr-muted: color-mix(in srgb, var(--jg-ink) 72%, transparent);
	--hdr-line: color-mix(in srgb, var(--jg-ink) 32%, transparent);
	--hdr-hover: color-mix(in srgb, var(--jg-ink) 10%, transparent);
}

[data-hero="sand"] .jg-hero-page #masthead.jg-header:not(.is-scrolled) { --hdr-logo: var(--jg-red); }

/* the live dot: the light green is for dark grounds */
[data-hero="sand"] .jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-hstatus.is-open .jg-hstatus__dot,
[data-hero="ochre"] .jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-hstatus.is-open .jg-hstatus__dot { background: var(--jg-live); }

[data-hero="ochre"] .jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-cta,
[data-hero="ochre"] .jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-cta:visited,
[data-hero="ochre"] .jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-cta:hover {
	background: var(--jg-ink);
	box-shadow: none;
	color: var(--jg-cream);
}

@media (min-width: 960px) {
	.jg-hero__panel {
		--hero-r: 36px;
		--pad: 44px;
		display: grid;
		/* RTL: the first column is the right-hand, reading side */
		grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		min-height: clamp(660px, calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 16px), 960px);
		padding: calc(var(--jg-bar-h) + 48px) var(--pad) var(--pad);
	}
}

.jg-hero__coil {
	position: absolute;
	z-index: -1;
	top: -12%;
	inset-inline-start: -10%;
	width: 62cqw;
	aspect-ratio: 190 / 137;
	height: auto;
	color: var(--hero-fg);
	opacity: .07;
	pointer-events: none;
}

.jg-hero__status { position: relative; z-index: 3; color: var(--hero-fg); font-size: 14.5px; }
.jg-hero__status::before { background: var(--hero-fg); }
.jg-hero__status.is-open { color: var(--hero-fg); }
.jg-hero__status.is-open::before { background: var(--hero-fg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-fg) 22%, transparent); }

/* wide screens: the header's items sit 60px in from the panel edge; the
   panel's own content keeps the same line */
@media (min-width: 1024px) { .jg-hero__panel { --pad: 60px; } }

@media (min-width: 960px) { .jg-hero__status { grid-column: 1; grid-row: 1; justify-self: start; } }
/* from 1680px the header carries the status, right above */
@media (min-width: 1680px) { .jg-hero__status { visibility: hidden; } }

/* ---- the name, giant ---- */

.jg-hero__title {
	position: relative;
	z-index: 1;
	margin: 4px 0 0;
	color: var(--hero-mark);
	line-height: 1;
}

@media (min-width: 960px) { .jg-hero__title { grid-column: 1 / -1; grid-row: 2; } }

.jg-hero__mark {
	display: block;
	font-size: min(34cqw, 230px);
	line-height: .86;
	text-align: center;
	letter-spacing: -.01em;
}

/* Wide screens: the word sits flush with the subtitle and lead below it (the
   steam keeps the other side). Its box is only as wide as the word, so the
   scroll-out shrinks it around its own centre instead of pulling it toward
   the panel's; and it steps out by Burekas' side bearing (the ג's ink starts
   .05em inside its box, Caesarea's below it almost at the edge), so the two
   inks line up. */
@media (min-width: 960px) {
	.jg-hero__mark {
		width: fit-content;
		margin-inline-start: -.047em;
		font-size: min(20cqw, 36.7svh, 346px);
	}
}

.jg-hero__line2 {
	display: block;
	color: var(--hero-fg);
	margin-top: 8cqw; /* clear of the final nun, which Burekas draws long */
	font-family: var(--jg-font-sub);
	font-size: clamp(24px, 6.4cqw, 30px);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
}

@media (min-width: 960px) {
	.jg-hero__line2 { max-width: 410px; margin-top: 4px; font-size: clamp(28px, 2.6cqw, 40px); text-align: start; }
}

/* the place's name heads the subtitle on a line of its own, in the subtitle's
   own voice: one phrase, one face */
.jg-hero__brand { display: block; }

/* ---- the dish ---- */

/* phones: under the title, flush to the far edge; its cut bottom fades out
   behind the CTA pill, which overlaps it */
.jg-hero__dish {
	position: relative;
	z-index: 2;
	width: calc(100% + var(--pad));
	margin-block: 34px 0;
	margin-inline: 0 calc(-1 * var(--pad));
	align-self: flex-end;
}

@media (max-width: 959px) {
	.jg-hero__panel { padding-bottom: 24px; }
	.jg-hero__dish .jg-hero__img {
		-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 94%);
		mask-image: linear-gradient(to bottom, #000 70%, transparent 94%);
	}
	.jg-hero__dock { margin-top: -54px; }
	.jg-hero__lead { order: 3; margin: 8px 0 0; font-size: 16px; }
}

/* wide screens: the dish is sized to the name by site.js; it stays hidden,
   its entrance on hold, until that's done (only when scripts run: data-hero) */
@media (min-width: 960px) {
	[data-hero] .jg-hero__dish:not(.is-fit) { visibility: hidden; animation-play-state: paused; }
}

@media (min-width: 960px) {
	.jg-hero__dish {
		position: absolute;
		inset-inline-end: 0;
		bottom: 0;
		width: min(58cqw, calc((100svh - var(--jg-header-h)) * .95), 1040px);
		margin: 0;
		scale: var(--dish-s, 1); /* set by site.js so the dish takes a small bite of the name */
		transform-origin: left bottom; /* its corner of the panel */
	}
}

.jg-hero__img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 34px rgba(var(--hero-shade), .45));
}

/* steam, strokes and stamp share one layer over the dish, so they can leave together on scroll */
.jg-hero__deco { position: absolute; inset: 0; pointer-events: none; }

/* hand-drawn steam over the rolls, and three "fresh" strokes by the tip */
.jg-hero__steam,
.jg-hero__burst {
	position: absolute;
	overflow: visible;
	fill: none;
	stroke: var(--hero-fg);
	stroke-linecap: round;
	stroke-width: 6px;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

.jg-hero__steam path,
.jg-hero__burst path { vector-effect: non-scaling-stroke; }

.jg-hero__steam { top: -8%; inset-inline-end: 30%; width: 12%; } /* clear of the subtitle on phones */
@media (min-width: 960px) { .jg-hero__steam { top: -15%; inset-inline-end: 29.5%; width: 15%; } }
/* beside the tomato bowl, out on the red */
.jg-hero__burst { top: 30%; inset-inline-start: -7%; width: 6%; transform: rotate(60deg); }
@media (max-width: 959px) { .jg-hero__burst { display: none; } }

/* the real count, stamped on the paper (scoped: the base .jg-stamp comes later) */
.jg-hero .jg-hero__stamp {
	--r: -9deg;
	top: -6%;
	inset-inline-end: 4%;
	width: 104px;
	height: 104px;
	padding: 10px;
	font-size: 14px;
}

@media (min-width: 960px) {
	.jg-hero .jg-hero__stamp { top: -4%; inset-inline-end: 5%; width: 136px; height: 136px; font-size: 17px; }
}

/* ---- ordering, in the reading-side corner ---- */

.jg-hero__dock {
	position: relative;
	z-index: 3;
	display: grid;
	gap: 12px;
	margin-top: 20px;
}

@media (min-width: 960px) {
	.jg-hero__dock { grid-column: 1; grid-row: 3; align-self: end; margin-top: 28px; }
}

.jg-hero__lead {
	max-width: 40ch;
	margin: 0 0 6px;
	color: var(--hero-fg);
	font-size: 17px;
	line-height: 1.6;
	text-align: center;
	justify-self: center;
}

@media (min-width: 960px) { .jg-hero__lead { text-align: start; justify-self: start; } }

a.jg-hero__cta,
a.jg-hero__cta:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 66px;
	padding-block: 8px;
	padding-inline: 26px 9px;
	border-radius: var(--jg-radius-pill);
	background: var(--hero-cta-bg);
	box-shadow: 0 20px 34px -20px rgba(var(--hero-shade), .75);
	color: var(--hero-cta-fg);
	font-size: 18.5px;
	font-weight: 800;
	text-decoration: none;
	transition: transform 160ms var(--jg-ease-out);
}

.jg-hero__go {
	display: grid;
	place-items: center;
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--jg-gold);
	box-shadow: inset 0 0 0 1.5px var(--jg-gold-edge);
	transition: transform 200ms var(--jg-ease-out);
}

.jg-hero__go svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--jg-gold-ink);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

a.jg-hero__cta:active { transform: scale(.98); }
a.jg-hero__cta:focus-visible { outline: 3px solid var(--jg-gold); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
	a.jg-hero__cta:hover .jg-hero__go { transform: translateX(-5px); }
}

.jg-hero .jgo-bar {
	width: 100%;
	max-width: none;
	border-color: transparent;
	box-shadow: 0 20px 34px -22px rgba(var(--hero-shade), .75);
}

/* ---- menu ----------------------------------------------------------------- */

.jg-menu { padding-block: 28px 72px; }
@media (min-width: 960px) { .jg-menu { padding-block: 72px 104px; } }

.jg-menu__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 32px;
	margin-bottom: 36px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--jg-ink);
}

.jg-menu__title { margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: .95; }
.jg-menu__note { max-width: 38ch; margin: 0; color: var(--jg-ink-muted); }

/* a link inside a quiet line is underlined, not told apart by colour alone */
.jg-section-label a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---- the jachnun cards: the arch, with voldogfood.com's manners ----------------
   The card is an arch (the mouth of a tabun oven) holding an arched photo;
   the tag sits where the photo meets the text. On hover (mouse only): the
   photo eases up to 105%, the text rises, and the add button fades in, its
   label stepping aside as a gold circle with an arrow opens from its
   centre. Without a mouse the button simply shows. */

.jg-cards {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-card {
	position: relative;
	container-type: inline-size;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	grid-template-areas: "media body" "add add";
	gap: 14px 16px;
	padding: 12px 12px 14px;
	border-radius: 24px;
	background: var(--jg-card);
	box-shadow: 0 0 0 1px rgba(36, 26, 23, .05);
	transition: box-shadow .6s cubic-bezier(0.19, 1, 0.22, 1), transform .6s cubic-bezier(0.19, 1, 0.22, 1);
}

.jg-card__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

.jg-card__media {
	grid-area: media;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 14px 14px;
	background: var(--jg-paper-2);
}

.jg-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .75s cubic-bezier(0.19, 1, 0.22, 1);
}

/* the tag sits on the photo's base, centred on it, half over the edge */
.jg-card__tag {
	position: absolute;
	top: calc(12px + 140px - 12px);
	inset-inline-start: calc(12px + 56px);
	translate: 50% 0;
	white-space: nowrap;
	z-index: 2;
	padding: 5px 12px 4px;
	border-radius: var(--jg-radius-pill);
	background: rgba(36, 26, 23, .78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--jg-cream);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	pointer-events: none;
}

.jg-card__body {
	grid-area: body;
	display: grid;
	align-content: start;
	gap: 4px;
	min-width: 0;
	padding-top: 4px;
	transition: transform .5s cubic-bezier(0.65, 0, 0.35, 1);
}

.jg-card__name {
	margin: 0;
	font-family: var(--jg-font-sub);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
}

.jg-card__name a,
.jg-card__name a:visited,
.jg-row__name a,
.jg-row__name a:visited { color: var(--jg-ink); }

.jg-row__name a:hover { color: var(--jg-red); }

.jg-card__desc,
.jg-row__desc {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--jg-ink-muted);
	font-size: 15px;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.jg-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; }
.jg-card__unit { color: var(--jg-ink-muted); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.jg-price { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the add button: a pill whose gold circle opens from its centre */
.jg-page button.jg-card__add {
	grid-area: add;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	margin: 0;
	padding-block: 0;
	padding-inline: 16px 50px; /* room for the gold circle on its side only */
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	border-radius: 14px;
	background: var(--jg-paper);
	box-shadow: inset 0 0 0 1px var(--jg-line);
	color: var(--jg-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	transition:
		opacity .4s cubic-bezier(0.2, 0.75, 0.5, 1),
		transform .5s cubic-bezier(0.2, 0.75, 0.5, 1),
		background-color .4s cubic-bezier(0.2, 0.75, 0.5, 1);
}

.jg-card__addlabel { transition: transform .65s cubic-bezier(0.785, 0.135, 0.15, 0.86); }

.jg-card__addgo {
	position: absolute;
	top: 50%;
	inset-inline-end: 9px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	border-radius: 50%;
	background: var(--jg-gold);
	clip-path: circle(50% at 50% 50%);
	transition: clip-path .65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.jg-card__addgo svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--jg-gold-ink);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .65s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.jg-page button.jg-card__add:active { background: var(--jg-paper-2); }
.jg-page button.jg-card__add:focus-visible { outline: 3px solid var(--jg-ink); outline-offset: 2px; }

.jg-card__soldout { grid-area: add; justify-self: center; color: var(--jg-ink-muted); font-weight: 700; }

@media (min-width: 720px) {
	.jg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
	.jg-card {
		grid-template-columns: 1fr;
		grid-template-areas: "media" "body" "add";
		gap: 0;
		padding: 14px 14px 18px;
		border-radius: 999px 999px 32px 32px;
	}
	.jg-card__media { aspect-ratio: 4 / 4.4; border-radius: 999px 999px 22px 22px; }
	/* the photo is the card's content width (100cqw) and 1.1× as tall */
	.jg-card__tag { top: calc(14px + 110cqw - 13px); inset-inline-start: 50%; }
	.jg-card__body { padding: 20px 10px 0; gap: 6px; }
	.jg-card__name { font-size: clamp(22px, 2vw, 28px); }
	.jg-page button.jg-card__add { margin: 16px 6px 0; }
	.jg-price { font-size: 23px; }
}

/* with a mouse: the button waits, the text sits low, both move on hover */
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
	.jg-card__body { transform: translateY(34px); }

	.jg-page button.jg-card__add { opacity: 0; transform: translateY(12px); }
	.jg-card__addgo { clip-path: circle(0 at 50% 50%); }
	.jg-card__addgo svg { transform: translateX(14px); }

	.jg-card:hover,
	.jg-card:focus-within { box-shadow: 0 0 0 1px rgba(36, 26, 23, .06), 0 26px 50px -32px rgba(36, 26, 23, .45); }
	.jg-card:hover .jg-card__media img { transform: scale(1.05); }
	.jg-card:hover .jg-card__body,
	.jg-card:focus-within .jg-card__body { transform: none; }
	.jg-card:hover button.jg-card__add,
	.jg-card:focus-within button.jg-card__add { opacity: 1; transform: none; transition-delay: .05s; }
	.jg-card:hover .jg-card__addlabel { transform: translateX(6px); }
	.jg-card:hover .jg-card__addgo { clip-path: circle(50% at 50% 50%); }
	.jg-card:hover .jg-card__addgo svg { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jg-card, .jg-card__media img, .jg-card__body, .jg-page button.jg-card__add, .jg-card__addlabel, .jg-card__addgo, .jg-card__addgo svg { transition: none; }
}

/* The jachnun cards in two earth colours, taking turns: olive (za'atar) and
   clay (the taboon), as in the reference the client picked. Only these five
   big cards; the rows of the other sections stay on cream. All text in full
   cream: on clay, a muted cream drops under 4.5:1. */
.jg-menu {
	--jg-olive: #4b5326;
	--jg-clay: #a9512f;
}

.jg-menu__cards .jg-card { --card-bg: var(--jg-olive); background: var(--card-bg); box-shadow: none; }
.jg-menu__cards .jg-card:nth-child(even) { --card-bg: var(--jg-clay); }

.jg-menu__cards .jg-card__name a,
.jg-menu__cards .jg-card__name a:visited,
.jg-menu__cards .jg-price,
.jg-menu__cards .jg-card__desc,
.jg-menu__cards .jg-card__unit,
.jg-menu__cards .jg-card__soldout { color: var(--jg-cream); }

.jg-menu__cards .jg-card__desc { font-size: 14.5px; }

/* the add pill: plain cream on the colour, the gold circle stays */
.jg-page .jg-menu__cards button.jg-card__add { background: var(--jg-cream); box-shadow: none; }
.jg-page .jg-menu__cards button.jg-card__add:active { background: var(--jg-paper); }
.jg-page .jg-menu__cards button.jg-card__add:focus-visible,
.jg-menu__cards .jg-card__name a:focus-visible { outline-color: var(--jg-cream); }

@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
	.jg-menu__cards .jg-card:hover,
	.jg-menu__cards .jg-card:focus-within { box-shadow: 0 26px 50px -30px rgba(36, 26, 23, .6); }
}

/* The menu's other sections answer the jachnun cards with a touch, not a
   block: each takes one of the two card colours in turn, on its title and as
   a thin ring round each photo (a cream gap, then the colour). */
.jg-menu__group { --jg-section: var(--jg-olive, #4b5326); }
.jg-menu__group:nth-of-type(even) { --jg-section: var(--jg-clay, #a9512f); }
.jg-menu__group .jg-more__title { color: var(--jg-section); }
.jg-menu__group .jg-row__media img { box-shadow: 0 0 0 3px var(--jg-card), 0 0 0 6px var(--jg-section); }

/* the menu's quiet entrance (reveal.js): fade and a small rise, GPU-only */
.jg-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
.jg-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .jg-reveal { opacity: 1; transform: none; transition: none; } }

/* the gold "+" */
.jg-page button.jg-add {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jg-gold);
	box-shadow: 0 0 0 1px rgba(160, 120, 0, .18), 0 8px 18px -10px rgba(120, 90, 0, .55);
	color: var(--jg-gold-ink);
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1);
}

.jg-page button.jg-add .jg-glyph { width: 20px; height: 20px; stroke-width: 1.7; transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1); }
.jg-page button.jg-add:active { transform: scale(.94); }

/* with a mouse, the plus turns a quarter: a small sign that it's live */
@media (hover: hover) and (pointer: fine) {
	.jg-page button.jg-add:hover { background: var(--jg-gold-hover); }
	.jg-page button.jg-add:hover .jg-glyph { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
	.jg-page button.jg-add .jg-glyph { transition: none; }
	.jg-page button.jg-add:hover .jg-glyph { transform: none; }
}

.jg-soldout { color: var(--jg-ink-muted); font-weight: 700; }

/* the rest of the table */
.jg-more { margin-top: 56px; }

.jg-more__title {
	margin: 0 0 18px;
	font-family: var(--jg-font-display);
	font-size: 32px;
	font-weight: 400;
}

.jg-rows {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) { .jg-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.jg-row {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	grid-template-areas: "media text text" "media price add";
	gap: 12px 16px;
	align-items: center;
	padding: 14px 16px;
	border-radius: 24px;
	background: var(--jg-card);
}

.jg-row__media { grid-area: media; display: block; }

.jg-row__media img {
	display: block;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	transition: transform .75s cubic-bezier(0.19, 1, 0.22, 1);
}

/* the same quiet hover as the cards: a soft lift, the photo eases up */
.jg-row { transition: box-shadow .6s cubic-bezier(0.19, 1, 0.22, 1); }

@media (hover: hover) and (pointer: fine) {
	.jg-row:hover { box-shadow: 0 0 0 1px rgba(36, 26, 23, .06), 0 20px 40px -28px rgba(36, 26, 23, .4); }
	.jg-row:hover .jg-row__media img { transform: scale(1.06); }
}

.jg-row__text { grid-area: text; min-width: 0; }
.jg-row__name { margin: 0 0 2px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.jg-row .jg-price { grid-area: price; font-size: 18px; }
.jg-page .jg-row button.jg-add { grid-area: add; width: 44px; height: 44px; font-size: 26px; }

/* ---- quick-add popup ------------------------------------------------------ */

.jg-qv {
	box-sizing: border-box;
	width: min(560px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	padding: 0;
	overflow: hidden; /* the form scrolls, so the rounded corners stay clean and the scrollbar tucks under them */
	border: 0;
	border-radius: var(--jg-radius-lg);
	background: var(--jg-paper);
	box-shadow: 0 40px 90px -30px rgba(36, 26, 23, .6);
	color: var(--jg-ink);
}

.jg-qv::backdrop { background: rgba(36, 26, 23, .55); }

@media (max-width: 600px) {
	.jg-qv {
		width: 100%;
		max-height: 94dvh;
		margin: auto 0 0;
		border-radius: var(--jg-radius-lg) var(--jg-radius-lg) 0 0;
	}
}

.jg-qv__form { position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (max-width: 600px) { .jg-qv__form { max-height: 94dvh; } }

.jg-qv button.jg-qv__close {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jg-paper);
	box-shadow: 0 8px 18px -10px rgba(36, 26, 23, .6);
	color: var(--jg-ink);
	cursor: pointer;
}

.jg-qv__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: var(--jg-paper-2);
}

.jg-qv__media img:not([src]) { display: none; }

.jg-qv__body { display: grid; gap: 14px; padding: 20px 22px 22px; }
.jg-qv__name { margin: 0; font-family: var(--jg-font-display); font-size: 36px; font-weight: 400; line-height: 1; }
.jg-qv__desc { margin: 0; color: var(--jg-ink-muted); }
.jg-qv .jgo-extras { margin: 0; }
.jg-qv .jgo-extra { background: var(--jg-card); border-color: var(--jg-line); }

/* the popup's "already included" line, above the paid extras: a green tick
   and the trio that comes with every jachnun, so the extras read as additions */
.jg-qv__included {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--jg-lime) 45%, var(--jg-card));
	color: var(--jg-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.jg-qv__check {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--jg-live) no-repeat center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 13px;
}

/* the extras legend's sub-note: quieter, so "בתוספת תשלום" sits under the ask */
/* an extra as a row with its own little stepper (per-extra quantity) */
.jgo-extra--step { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1.5px solid var(--jg-line); border-radius: 14px; background: var(--jg-card); }
.jgo-extra--step + .jgo-extra--step { margin-top: 8px; }
.jgo-extra--step.is-on { border-color: var(--jg-ink); }
.jgo-extra--step .jgo-extra__name { font-weight: 700; }
.jgo-extra--step .jgo-extra__price { color: var(--jg-ink-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.jg-xstep { display: inline-flex; align-items: center; border-radius: var(--jg-radius-pill); box-shadow: inset 0 0 0 1.5px var(--jg-line); }
.jg-page .jg-xstep button, .jg-xstep button { display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--jg-ink); cursor: pointer; }
.jg-xstep button:disabled { opacity: .35; cursor: not-allowed; }
.jg-xstep button .jg-glyph { width: 15px; height: 15px; stroke-width: 2.1; }
.jg-xstep output { min-width: 24px; font-size: 16px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

.jgo-label__note { display: block; margin-top: 2px; color: var(--jg-ink-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; }

.jg-qv__buy {
	position: sticky;
	bottom: 0;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	margin-inline: -22px;
	padding: 14px 22px 22px;
	background: var(--jg-paper);
}

.jg-qv__buy .jg-promise { flex-basis: 100%; font-size: 13.5px; }

.jg-qty {
	display: flex;
	flex: none;
	align-items: center;
	border-radius: var(--jg-radius-pill);
	box-shadow: inset 0 0 0 1.5px var(--jg-line);
}

.jg-qty button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 50px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--jg-ink);
	font-size: 24px;
	cursor: pointer;
}

.jg-qty button:disabled { opacity: .35; cursor: not-allowed; }
.jg-qty output { min-width: 26px; font-size: 18px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

.jg-qv__add {
	flex: 1;
	justify-content: space-between;
	min-height: 54px;
	padding: 0 22px;
	font-size: 17px;
}

.jg-qv__total { font-variant-numeric: tabular-nums; }
.jg-qv__add[disabled] { opacity: .6; cursor: progress; }

.jg-qv__error { margin: 0; color: var(--jg-red); font-weight: 600; }
.jg-qv__error[hidden] { display: none; }

/* the way to the full product page, right under the description */
.jg-qv__more,
.jg-qv__more:visited {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: -2px;
	color: var(--jg-ink);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--jg-line);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.jg-qv__more::after { content: "←"; text-decoration: none; }
.jg-qv__more:hover { text-decoration-color: var(--jg-ink); }

/* ---- "משהו לשתות?": drinks beside a dish (popup and product page) ----------
   A grid of tiles, as on Wolt: every drink in sight and only the page's own
   scroll to reach them (a sideways row is out of reach for a mouse). Tap the
   picture to add one, "−" to take one back; a picked tile wears an ink ring
   and its count. Three across on a phone, four in the popup on a computer. */

.jg-drinks { display: grid; gap: 12px; min-width: 0; margin-top: 18px; } /* clear of the extras above */
.jg-drinks[hidden] { display: none; }
.jg-drinks__title { margin: 0; }

.jg-drinks__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 16px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-drink {
	position: relative;
	display: grid;
	gap: 2px;
	align-content: start;
	min-width: 0;
}

.jg-drink button.jg-drink__add {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin: 0 0 6px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 20px;
	background: var(--jg-card);
	box-shadow: inset 0 0 0 1px var(--jg-line);
	cursor: pointer;
	transition: box-shadow .2s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1);
}

.jg-drink button.jg-drink__add:active { transform: scale(.96); }
.jg-drink.is-picked button.jg-drink__add { outline: 2.5px solid var(--jg-ink); outline-offset: -2.5px; } /* over the picture */
.jg-drink button.jg-drink__add:focus-visible { outline: 3px solid var(--jg-ink); outline-offset: 2px; }

.jg-drink__add img { display: block; width: 100%; height: 100%; object-fit: cover; }

.jg-drink__plus {
	position: absolute;
	top: 7px;
	inset-inline-end: 7px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--jg-gold);
	box-shadow: 0 0 0 1px rgba(160, 120, 0, .18), 0 6px 12px -8px rgba(120, 90, 0, .6);
	color: var(--jg-gold-ink);
}

.jg-drink__plus .jg-glyph { width: 16px; height: 16px; stroke-width: 2; }

.jg-drink__n {
	position: absolute;
	bottom: 7px;
	inset-inline-end: 7px;
	padding: 2px 8px;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-ink);
	color: var(--jg-cream);
	font-size: 13px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.jg-drink__n:empty { display: none; }

.jg-drink button.jg-drink__less {
	position: absolute;
	top: 7px;
	inset-inline-start: 7px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jg-card);
	box-shadow: 0 0 0 1px var(--jg-line), 0 6px 12px -8px rgba(36, 26, 23, .5);
	color: var(--jg-ink);
	cursor: pointer;
}

.jg-drink button.jg-drink__less[hidden] { display: none; }
.jg-drink__less .jg-glyph { width: 16px; height: 16px; stroke-width: 2; }

.jg-drink__name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.jg-drink__price { color: var(--jg-ink-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* the product page: the strip sits in the form, above the promise */
.jg-pp__form .jg-drinks { margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
	.jg-drink button.jg-drink__add { transition: none; }
}

/* ---- toast after adding ---------------------------------------------------- */

.jg-toast {
	position: fixed;
	inset-inline: 0;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 95;
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	max-width: calc(100vw - 32px);
	margin-inline: auto;
	padding: 8px 8px 8px 20px;
	padding-inline-start: 20px;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-ink);
	box-shadow: 0 20px 40px -20px rgba(36, 26, 23, .7);
	color: var(--jg-cream);
	font-weight: 600;
	animation: jg-toast .3s var(--jg-ease);
}

.jg-toast[hidden] { display: none; }
.jg-toast a, .jg-toast a:visited { color: var(--jg-cream); text-decoration: underline; text-underline-offset: 4px; }

.jg-toast a.jg-toast__go,
.jg-toast a.jg-toast__go:visited {
	padding: 10px 18px;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-gold);
	color: var(--jg-gold-ink);
	text-decoration: none;
}

@media (max-width: 1023px) { .jg-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

@keyframes jg-toast { from { opacity: 0; transform: translateY(12px); } }

/* ---- how it works ----------------------------------------------------------- */

.jg-how { padding-block: 64px 80px; }

.jg-steps {
	display: grid;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) { .jg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

.jg-steps li { padding-top: 18px; border-top: 2px solid var(--jg-ink); }

.jg-steps__n {
	display: block;
	margin-bottom: 8px;
	color: var(--jg-crust);
	font-family: var(--jg-font-display);
	font-size: 72px;
	line-height: .9;
}

.jg-steps h3 { margin: 0 0 6px; font-size: 21px; }
.jg-steps p { max-width: 34ch; margin: 0; color: var(--jg-ink-muted); }

/* ---- delivery (dark pot) ------------------------------------------------------ */

.jg-delivery {
	position: relative;
	overflow: hidden;
	padding-block: 76px 84px;
	background: var(--jg-ink);
	color: var(--jg-cream);
}

.jg-delivery__coil {
	position: absolute;
	top: -90px;
	inset-inline-start: -160px;
	width: 660px;
	height: 475px;
	color: var(--jg-ink-2);
	pointer-events: none;
}

.jg-delivery__grid { position: relative; display: grid; gap: 40px; }
@media (min-width: 960px) { .jg-delivery__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: start; } }

.jg-delivery .jg-section-title { margin-bottom: 18px; color: var(--jg-cream); }
.jg-delivery__lead { max-width: 52ch; margin: 0 0 26px; color: var(--jg-on-dark-muted); font-size: 18px; }

.jg-cityset {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-cityset li {
	padding: 8px 16px;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-lime);
	color: var(--jg-ink);
	font-size: 15.5px;
	font-weight: 600;
}

.jg-pickup {
	padding: 26px;
	border-radius: var(--jg-radius-lg);
	background: var(--jg-paper);
	color: var(--jg-ink);
}

.jg-pickup__title { margin: 0 0 4px; font-family: var(--jg-font-display); font-size: 32px; font-weight: 400; line-height: 1.05; }
.jg-pickup > p { margin: 0 0 16px; color: var(--jg-ink-muted); }
.jg-pickup .jg-chip { justify-self: start; margin-top: 8px; color: var(--jg-ink); box-shadow: inset 0 0 0 1.5px var(--jg-line); }
.jg-pickup .jg-chip:hover { color: var(--jg-red); box-shadow: inset 0 0 0 1.5px var(--jg-red); }

/* ---- handmade: the brand story -----------------------------------------------------
   The logo's coil is a rolled jachnun, so it is the picture here: big, in
   crust, rolling into place as the section scrolls in (where scroll-driven
   animation exists; elsewhere it simply sits there). A short display
   headline, the shop's own line as readable text, three true facts. */

.jg-handmade { overflow: hidden; padding-block: 72px; background: var(--jg-lime); }

.jg-handmade__grid { display: grid; gap: 28px; align-items: center; }

@media (min-width: 960px) {
	.jg-handmade { padding-block: 104px; }
	/* RTL: text on the reading side, the coil beside it */
	.jg-handmade__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; }
	.jg-handmade__text { grid-column: 1; grid-row: 1; }
	.jg-handmade__art { grid-column: 2; grid-row: 1; }
}

.jg-handmade__art { position: relative; width: min(68%, 260px); margin-inline: auto; }
@media (min-width: 960px) { .jg-handmade__art { width: min(100%, 460px); } }

.jg-handmade__coil {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 190 / 137;
	color: var(--jg-crust);
}

.jg-handmade .jg-handmade__stamp {
	--r: 8deg;
	top: -6%;
	inset-inline-end: 2%;
	width: 108px;
	height: 108px;
	font-size: 22px;
}

@media (min-width: 960px) { .jg-handmade .jg-handmade__stamp { width: 128px; height: 128px; font-size: 26px; } }

.jg-handmade__eyebrow {
	margin: 0 0 10px;
	color: var(--jg-crust);
	font-family: var(--jg-font-sub);
	font-size: 23px;
	font-weight: 700;
}

.jg-handmade__title {
	margin: 0 0 18px;
	color: var(--jg-ink);
	font-size: clamp(46px, 6.4vw, 84px);
	line-height: .98;
}

.jg-handmade__lead {
	max-width: 36ch;
	margin: 0 0 32px;
	color: var(--jg-ink-muted);
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.6;
}

.jg-handmade__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 20px 0 0;
	border-top: 2px solid var(--jg-ink);
	list-style: none;
}

.jg-handmade__facts li { display: grid; align-content: start; gap: 4px; padding-inline: 0 16px; }
.jg-handmade__facts li + li { padding-inline-start: 16px; border-inline-start: 1px solid var(--jg-line); }

.jg-handmade__facts strong {
	justify-self: start;
	color: var(--jg-red);
	font-family: var(--jg-font-display);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 400;
	line-height: 1;
}

.jg-handmade__facts span { color: var(--jg-ink); font-size: 14.5px; font-weight: 700; line-height: 1.35; }

/* rolling in: the coil turns into place as the section enters the screen */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.jg-handmade__coil {
			animation: jg-roll linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
		}
	}
}

@keyframes jg-roll {
	from { opacity: .25; transform: rotate(-70deg) scale(.82); }
	to { opacity: 1; transform: none; }
}

/* ---- questions -------------------------------------------------------------------- */

.jg-faq { padding-block: 76px 88px; }
.jg-faq__grid { display: grid; gap: 12px; }
@media (min-width: 960px) { .jg-faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; } }

.jg-faq details { border-bottom: 1px solid var(--jg-line); }
.jg-faq details:first-child { border-top: 1px solid var(--jg-line); }

.jg-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 20px;
	font-size: 18.5px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.jg-faq summary::-webkit-details-marker { display: none; }
.jg-faq summary::after { content: "+"; flex: none; color: var(--jg-crust); font-size: 28px; font-weight: 400; line-height: 1; }
.jg-faq details[open] summary::after { content: "−"; }
.jg-faq details p { max-width: 62ch; margin: 0 0 22px; color: var(--jg-ink-muted); }

/* ---- order page head ------------------------------------------------------------------ */

.jg-orderhead { padding-block: 28px 8px; }
.jg-orderhead__title { margin: 16px 0 12px; font-size: clamp(46px, 7vw, 92px); line-height: .92; }
.jg-orderhead__lead { max-width: 52ch; margin: 0 0 22px; color: var(--jg-ink-muted); font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
	.jg-page button.jg-add { transition: none; }
	.jg-toast { animation: none; }
}

/* phones: the ordering bar's button gets its own row */
@media (max-width: 480px) {
	.jg-page .jgo-bar { flex-wrap: wrap; }
	.jg-page .jgo-bar .jgo-bar__text { flex-basis: calc(100% - 60px); }
	.jg-page .jgo-bar .jgo-bar__btn { width: 100%; }
}

/* ---- hero entrance ----------------------------------------------------------
   Plays once, on load. The panel opens out of a smaller card (clip-path, so
   nothing reflows), the name rises as it opens, then the subtitle word by
   word on a 6-frame (100ms) beat, 40px. The dish rises into its corner
   without fading, so the largest paint isn't held back. Steam and strokes
   draw themselves in once it lands; the stamp and the ordering corner close
   the sequence. Under 1.5s in all. */

.jg-word { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
	.jg-hero__panel { animation: jg-panel-open 900ms var(--jg-ease-out) both; }

	/* the cream header lives on the panel, so it arrives once the panel has opened under it */
	.jg-hero-page #masthead.jg-header { animation: jg-fade 450ms ease 500ms both; }

	.jg-hero__status,
	.jg-hero__title .jg-word,
	.jg-hero__lead,
	.jg-hero__cta,
	.jg-hero .jgo-bar {
		animation: jg-rise 600ms var(--jg-ease-out) both;
		animation-delay: calc(200ms + var(--n, 0) * var(--beat));
	}

	.jg-hero__status { --rise: 12px; }
	.jg-hero__title .jg-word { --rise: 40px; --n: var(--i); }
	.jg-hero__mark .jg-word { --rise: 60px; animation-duration: 800ms; }
	.jg-hero__lead { --n: 6; }
	.jg-hero__cta { --n: 7; }
	.jg-hero .jgo-bar { --n: 8; }

	.jg-hero__dish { animation: jg-dish-in 1000ms var(--jg-ease-out) 250ms both; }

	.jg-hero__steam path,
	.jg-hero__burst path {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
		animation: jg-draw 600ms var(--jg-ease-out) both;
		animation-delay: calc(1000ms + var(--d, 0ms));
	}

	.jg-hero__steam path:nth-child(2),
	.jg-hero__burst path:nth-child(2) { --d: 90ms; }
	.jg-hero__steam path:nth-child(3),
	.jg-hero__burst path:nth-child(3) { --d: 180ms; }

	/* once drawn, the steam keeps rising, slowly */
	.jg-hero__steam { animation: jg-steam 3.4s ease-in-out 1.8s infinite alternate; }

	.jg-hero__stamp {
		animation: jg-tag-in 400ms var(--jg-ease-out) both;
		animation-delay: 1150ms;
	}
}

@keyframes jg-panel-open {
	from { clip-path: inset(16% 10% 34% round var(--hero-r)); }
	to { clip-path: inset(0 round var(--hero-r)); }
}

@keyframes jg-rise {
	from { opacity: 0; transform: translateY(var(--rise, 24px)); }
}

@keyframes jg-dish-in {
	from { transform: translateY(16%) scale(.97); }
}

@keyframes jg-draw {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@keyframes jg-steam {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(-8px); opacity: .55; }
}

@keyframes jg-tag-in {
	from { opacity: 0; transform: translateY(16px) rotate(var(--r, 0deg)) scale(.95); }
}


/* ---- scroll, after voldogfood.com ----------------------------------------------
   Two kinds of motion, as on the reference:
   · tied to the scroll: the whole hero shrinks toward its top over a full
     screen of scrolling, so the effect takes its time;
   · played on cue (site.js toggles html.jg-away once the page leaves the
     top, and back at the top): the name shrinks and fades out, and grows
     back in at the top. The header turning solid and its logo opening from
     the centre are cued too (main.css, "Header"). */

/* The name alone: leaving the top it shrinks toward its centre as it fades,
   slowly; back at the top it grows back from ~70% while fading in, as the
   reference does (measured off its frames: 245px → 345px over ~1s). The
   illustrations stay put. */
.jg-hero__mark {
	transform-origin: 50% 40%;
	transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 960px) { .jg-hero__mark { transform-origin: 100% 40%; } } /* right-aligned there: shrink from its right edge */

.jg-away .jg-hero__mark {
	opacity: 0;
	transform: scale(.72);
	transition-duration: .9s, 1s;
	transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1), cubic-bezier(0.45, 0, 0.55, 1);
}

@supports (animation-timeline: scroll()) {
	/* phones and tablets: the loved shrink on scroll, anchored to the hero's
	   bottom edge. Anchoring there keeps that edge fixed in layout whatever the
	   screen height, so the title always sits the same tight distance under it —
	   no empty band, no overlap, nothing to tune per device. */
	@media (prefers-reduced-motion: no-preference) and (max-width: 959px) {
		.jg-hero {
			transform-origin: 50% 100%;
			animation: jg-hero-shrink-sm linear both;
			animation-timeline: scroll(root);
			animation-range: 100px 560px;
		}
	}

	/* wide screens, on voldogfood.com's choreography stretched 1.4× for a
	   slower feel (with Lenis smoothing the wheel, site.js):
	   · 0–1000px: the name drops 50px and shrinks to half, fading out by 500;
	   · 500–1000px: then the panel draws in to 75% and dims a touch, while
	     the header turns solid at 500 (site.js) and swaps its logo;
	   · the hero is pinned for the first 560px and the menu runs on under
	     it (the pin overlaps the next section), growing from 80% to full. */
	@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
		.jg-hero-pin { margin-bottom: -560px; }
		.jg-hero-pin__run { height: 560px; }

		.jg-hero {
			position: sticky;
			top: var(--wp-admin--admin-bar--height, 0px);
			z-index: 2;
			transform-origin: 50% 0;
			animation: jg-hero-shrink linear both;
			animation-timeline: scroll(root);
			animation-range: 500px 1000px;
		}

		.jg-hero__mark,
		.jg-away .jg-hero__mark {
			transition: none;
			transform-origin: 100% 0; /* from the word's right edge: it recedes into its column, flush with the text below */
			animation: jg-mark-out linear both;
			animation-timeline: scroll(root);
			animation-range: 0 1000px;
		}

		.jg-hero-pin + .jg-menu {
			padding-top: 420px;
			transform-origin: 50% 100%;
			animation: jg-next-in linear both;
			animation-timeline: scroll(root);
			animation-range: 0 1000px;
		}
	}
}

@keyframes jg-hero-shrink { to { transform: scale(.75); opacity: .9; } }
@keyframes jg-hero-shrink-sm { to { transform: scale(.9); } }

@keyframes jg-mark-out {
	0% { opacity: 1; transform: none; }
	50% { opacity: 0; }
	100% { opacity: 0; transform: translateY(50px) scale(.5); }
}

@keyframes jg-next-in {
	from { transform: scale(.8); }
	to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.jg-hero__mark, .jg-away .jg-hero__mark { transform: none; }
}

/* reduced motion: nothing travels or draws; the text arrives with a short fade */
@media (prefers-reduced-motion: reduce) {
	.jg-hero__status,
	.jg-hero__title .jg-word,
	.jg-hero__lead,
	.jg-hero__cta,
	.jg-hero .jgo-bar,
	.jg-hero__stamp { animation: jg-fade 200ms ease both; }
}

@keyframes jg-fade {
	from { opacity: 0; }
}

/* ==========================================================================
   Stamps — the round bakery rubber stamp: red ink, a cream inner ring, set at
   an angle. One shape for product claims, the hero count, Waze, events.
   ========================================================================== */

.jg-stamp {
	--r: -10deg;
	position: absolute;
	z-index: 2;
	display: grid;
	place-content: center;
	width: 88px;
	height: 88px;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 50%;
	background: var(--jg-red);
	box-shadow: inset 0 0 0 3px var(--jg-red), inset 0 0 0 4.5px var(--jg-cream), 0 12px 22px -14px rgba(36, 26, 23, .7);
	color: var(--jg-cream);
	font-family: var(--jg-font-display);
	font-size: 17px;
	line-height: 1.02;
	text-align: center;
	transform: rotate(var(--r));
	pointer-events: none;
}

.jg-stamp--sm { width: 54px; height: 54px; padding: 6px; font-size: 11.5px; }

.jg-stamp--paper {
	background: var(--jg-paper);
	box-shadow: inset 0 0 0 3px var(--jg-paper), inset 0 0 0 4.5px var(--jg-red), 0 16px 30px -18px rgba(36, 26, 23, .7);
	color: var(--jg-red);
}

/* on menu cards: over the top corner of the arch */


.jg-row__media { position: relative; }
.jg-row__stamp { top: -12px; inset-inline-start: -12px; }

.jg-menu__count { display: block; color: var(--jg-ink); }

.jg-stamp__big { font-size: 24px; line-height: 1; letter-spacing: -.01em; } /* "+27,000" fits the 104px circle */
.jg-stamp__small { font-family: var(--jg-font-body); font-size: 11.5px; font-weight: 700; margin-top: 2px; }

@media (min-width: 960px) {
	.jg-stamp__big { font-size: 30px; }
	.jg-stamp__small { font-size: 12.5px; }
}

/* plain label under a display title: "שלושה צעדים, ושבת מסודרת." */
.jg-section-label {
	margin: -22px 0 34px;
	color: var(--jg-ink-muted);
	font-size: 18px;
	font-weight: 700;
}

.jg-delivery .jg-section-label { margin-top: -6px; color: var(--jg-on-dark-muted); }
.jg-faq .jg-section-label { margin-bottom: 0; }

/* ==========================================================================
   Ticker — delivery cities scrolling past on a caramel band
   ========================================================================== */

.jg-ticker {
	position: relative;
	overflow: hidden;
	padding-block: 20px;
	direction: ltr; /* anchor the track to the left edge so the translate stays on screen */
	background: var(--jg-crust);
	color: var(--jg-cream);
}

.jg-ticker__track {
	display: flex;
	width: max-content;
	direction: ltr; /* translate math in one direction; each group reads RTL */
}

.jg-ticker__group {
	display: flex;
	flex: none;
	align-items: center;
	gap: 26px;
	padding-inline-end: 26px;
	direction: rtl;
}

.jg-ticker__item,
.jg-ticker__lead {
	font-family: var(--jg-font-display);
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1;
	white-space: nowrap;
}

.jg-ticker__lead { font-size: clamp(21px, 2.56vw, 32px); } /* 20% under the strip's display size */

/* a review: stars, the words, who said them */
.jg-review {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	white-space: nowrap;
}

.jg-review__stars { display: inline-flex; gap: 1px; font-size: 17px; line-height: 1; letter-spacing: 0; }
.jg-review__star { color: color-mix(in srgb, var(--jg-cream) 30%, transparent); }
.jg-review__star.is-on { color: var(--jg-cream); }

.jg-review__text {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--jg-cream);
	font-family: var(--jg-font-sub);
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 800;
	line-height: 1.1;
}

.jg-review__by {
	color: color-mix(in srgb, var(--jg-cream) 90%, transparent); /* 4.5:1 on the crust */
	font-size: 14.5px;
	font-weight: 600;
}

.jg-ticker__mark { width: 40px; height: 29px; color: var(--jg-paper-2); }

/* New words enter from the left and travel right, so a Hebrew reader meets them in order. */
@media (prefers-reduced-motion: no-preference) {
	.jg-ticker__track { animation: jg-ticker 140s linear infinite; } /* slow enough to read a sentence */
}

@media (hover: hover) and (pointer: fine) {
	.jg-ticker:hover .jg-ticker__track { animation-play-state: paused; }
}

.jg-ticker:focus-within .jg-ticker__track,
.jg-ticker.is-paused .jg-ticker__track { animation-play-state: paused; }

/* the stop button: a small cream circle at the strip's start */
.jg-ticker button.jg-ticker__pause {
	position: absolute;
	top: 50%;
	right: 14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: -18px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jg-cream);
	box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6);
	color: var(--jg-ink);
	cursor: pointer;
}

.jg-ticker button.jg-ticker__pause:focus-visible { outline: 3px solid var(--jg-cream); outline-offset: 3px; }
.jg-ticker__pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jg-ticker__ico-play { display: none; fill: currentColor; stroke: none; }
.jg-ticker.is-paused .jg-ticker__ico-pause { display: none; }
.jg-ticker.is-paused .jg-ticker__ico-play { display: inline; }

@media (prefers-reduced-motion: reduce) {
	.jg-ticker button.jg-ticker__pause { display: none; } /* nothing moves */
}

@keyframes jg-ticker {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.jg-ticker__track { flex-wrap: wrap; justify-content: center; width: auto; }
	.jg-ticker__group + .jg-ticker__group { display: none; }
	.jg-ticker__group { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
	.jg-review { white-space: normal; flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   Branches, after tacosmyguey.com's locations: on brand red, a big photo of
   each place with a white card over its foot, a round stamp spinning
   "ניווט בוויז" around the coil, and the gold pickup button underneath.
   ========================================================================== */

.jg-branches {
	padding-block: 64px 72px;
	background: var(--jg-red);
	color: var(--jg-cream);
}

@media (min-width: 960px) { .jg-branches { padding-block: 96px 104px; } }

.jg-branches .jg-section-title { margin-bottom: 10px; color: var(--jg-cream); }
.jg-branches .jg-section-label { margin: 0 0 36px; color: var(--jg-cream); }

.jg-places {
	display: grid;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 860px) { .jg-places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }

.jg-place { display: grid; gap: 12px; }

.jg-place__frame {
	position: relative;
	overflow: hidden;
	border-radius: 26px;
	background: var(--jg-red-deep);
	box-shadow: 0 0 0 1px rgba(36, 26, 23, .25);
}

.jg-place__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }

.jg-place__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s cubic-bezier(0.19, 1, 0.22, 1);
}

/* until the photo is in: the coil on the deep red */
.jg-place__nophoto {
	position: absolute;
	inset: 18% 22%;
	width: 56%;
	height: 64%;
	color: color-mix(in srgb, var(--jg-cream) 14%, transparent);
}

@media (hover: hover) and (pointer: fine) {
	.jg-place:hover .jg-place__photo img { transform: scale(1.04); }
}

/* the white card over the photo's foot */
.jg-place__card {
	position: relative;
	margin: -96px 12px 12px;
	padding: 20px 22px 18px;
	padding-inline-end: 132px;
	border-radius: 18px;
	background: var(--jg-card);
	box-shadow: 0 0 0 1px rgba(36, 26, 23, .12);
	color: var(--jg-ink);
}

.jg-place__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 8px;
	color: var(--jg-red);
	font-family: var(--jg-font-display);
	font-size: clamp(30px, 3vw, 40px);
	font-weight: 400;
	line-height: 1;
}

.jg-place__name .jg-badge { font-family: var(--jg-font-body); }

.jg-place__addr,
.jg-place__phone { margin: 0 0 4px; font-size: 15px; }
.jg-place__phone a, .jg-place__phone a:visited { color: var(--jg-ink); font-weight: 700; }

.jg-place__hours { display: grid; gap: 2px; margin: 10px 0 4px; font-size: 15px; }
.jg-place__hours .jg-hours__row { display: flex; gap: 10px; }
.jg-place__hours dt { min-width: 3.2em; font-weight: 700; }
.jg-place__hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.jg-place__hours .is-today { color: var(--jg-red); }
.jg-place__closed { margin: 0; color: var(--jg-ink-muted); font-size: 13.5px; }

/* the round stamp: "ניווט בוויז" turning slowly around the coil */
.jg-spinstamp,
.jg-spinstamp:visited {
	position: absolute;
	top: 50%;
	inset-inline-end: 18px;
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	margin-top: -52px;
	border-radius: 50%;
	background: var(--jg-gold);
	box-shadow: inset 0 0 0 2px var(--jg-gold-edge);
	color: var(--jg-red);
	transition: transform .4s var(--jg-ease-out);
}

.jg-spinstamp__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: currentColor;
	font-family: var(--jg-font-sub);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2.6px; /* fills the full circle, a ring well inside the edge */
}

.jg-spinstamp__mark { width: 34px; height: 25px; }

@media (prefers-reduced-motion: no-preference) {
	.jg-spinstamp__ring { animation: jg-spin 16s linear infinite; }
}

@media (hover: hover) and (pointer: fine) {
	.jg-spinstamp:hover { transform: scale(1.06) rotate(-6deg); }
}

@keyframes jg-spin { to { transform: rotate(-360deg); } }

.jg-page .jg-place__order { width: 100%; min-height: 56px; font-size: 17px; cursor: pointer; }

.jg-place__maps,
.jg-place__maps:visited {
	justify-self: center;
	color: var(--jg-cream);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* the pickup note in the delivery section now points here */
.jg-pickup .jg-pickup__go { margin-top: 6px; }

@media (max-width: 480px) {
	.jg-place__card { margin-top: -64px; padding-inline-end: 22px; padding-bottom: 128px; }
	.jg-spinstamp { top: auto; bottom: 16px; margin-top: 0; inset-inline-end: 16px; width: 96px; height: 96px; }
}

/* ==========================================================================
   Events — caramel block
   ========================================================================== */

.jg-events {
	position: relative;
	overflow: hidden;
	padding-block: 72px;
	background: var(--jg-crust);
	color: var(--jg-cream);
}

.jg-events__coil {
	position: absolute;
	bottom: -120px;
	inset-inline-start: -140px;
	width: 600px;
	height: 432px;
	color: #8a4619;
	pointer-events: none;
}

.jg-events__grid { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .jg-events__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; } }

.jg-events__eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.jg-events__title { max-width: 16ch; margin: 0 0 16px; color: var(--jg-cream); font-size: clamp(40px, 5.6vw, 72px); line-height: .98; }
.jg-events__text { max-width: 52ch; margin: 0 0 28px; font-size: 18px; }

.jg-btn--cream,
.jg-btn--cream:visited { background: var(--jg-cream); color: var(--jg-ink); box-shadow: inset 0 -3px 0 rgba(36, 26, 23, .18); }
.jg-btn--cream:hover { background: var(--jg-paper); color: var(--jg-ink); }

.jg-events__stamp {
	--r: 8deg;
	position: relative;
	justify-self: center;
	width: 190px;
	height: 190px;
	padding: 22px;
	font-size: 30px;
}

@media (max-width: 899px) { .jg-events__stamp { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.jg-spinstamp, .jg-place__photo img { transition: none; }
}

/* ==========================================================================
   Subtitle voice — Caesarea. Burekas stays the brand's main-title face (it
   echoes the logo wordmark); Caesarea carries the tier just below it, bold
   and narrow, so title and subtitle read as two clearly different voices.
   ========================================================================== */

.jg-row__name,
.jg-qv__name {
	font-family: var(--jg-font-sub);
	font-weight: 800;
}

/* the menu's sections ("מהפלטה", "מהטאבון") in Burekas, like the section heads
   of a printed menu; the dishes under them stay in Caesarea */
.jg-more__title { font-family: var(--jg-font-display); font-weight: 400; font-size: 36px; line-height: 1; }
@media (min-width: 960px) { .jg-more__title { font-size: 44px; } }

.jg-section-label,
.jg-menu__count {
	font-family: var(--jg-font-sub);
	font-weight: 700;
}

.jg-section-label { color: var(--jg-ink); font-size: 23px; line-height: 1.25; }
.jg-delivery .jg-section-label { color: var(--jg-cream); }

.jg-steps h3 { font-family: var(--jg-font-sub); font-size: 23px; font-weight: 700; }

/* the events teaser links on to /אירועים/ */
.jg-events__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.jg-events__more,
.jg-events__more:visited { color: var(--jg-cream); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.jg-events__more:hover,
.jg-events__more:focus-visible,
.jg-events__more:active { color: #fff; }

/* ---- the menu's category chips and sections (after the printed menu) ---- */

/* the rail: sticky under the bar for as long as the menu runs (sticky inside
   the menu's wrap, so it leaves with it), on the page's own paper drawn edge
   to edge, with a hairline once it's riding (site.js sets .is-stuck) */
.jg-menu__catsbar {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--jg-header-h));
	z-index: 20;
	margin: -14px 0 32px;
	padding-block: 10px;
}

.jg-menu__catsbar::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline: calc(50% - 50vw);
	z-index: -1;
	background: var(--jg-paper);
	transition: box-shadow .25s ease;
}

.jg-menu__catsbar.is-stuck::before { box-shadow: 0 1px 0 var(--jg-line), 0 14px 24px -22px rgba(36, 26, 23, .5); }

@media (max-width: 600px) {
	.jg-menu__catsbar { top: var(--jg-header-h); } /* the admin bar scrolls away on phones */
}

.jg-menu__cats {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
}

.jg-menu__cats::-webkit-scrollbar { display: none; }

.jg-menu__cats a,
.jg-menu__cats a:visited {
	flex: none;
	padding: 10px 18px 9px;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-card);
	box-shadow: inset 0 0 0 1.5px var(--jg-line);
	color: var(--jg-ink);
	font-family: var(--jg-font-sub);
	font-size: 18px;
	font-weight: 800;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.jg-menu__cats a:hover { box-shadow: inset 0 0 0 1.5px var(--jg-ink); }
}

/* the section being read (site.js): filled ink, like Wolt's current tab */
.jg-menu__cats a[aria-current="true"],
.jg-menu__cats a[aria-current="true"]:visited {
	background: var(--jg-ink);
	box-shadow: none;
	color: var(--jg-cream);
}

.jg-menu__cats a { transition: box-shadow .2s ease, background-color .2s ease, color .2s ease; }

/* phones: smaller chips, and the row runs to the screen's edges */
@media (max-width: 959px) {
	.jg-menu__catsbar { margin-bottom: 24px; }
	.jg-menu__cats { margin-inline: calc(-1 * var(--jg-gutter)); padding-inline: var(--jg-gutter); }
	.jg-menu__cats a,
	.jg-menu__cats a:visited { padding: 8px 16px 7px; font-size: 16.5px; }
}

/* five jachnun cards across on wide screens */
@media (min-width: 1200px) {
	.jg-menu__cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
	.jg-menu__cards .jg-card__name { font-size: 22px; }
}

/* a jump lands clear of the bar and the chips' rail */
#menu-jachnun,
.jg-menu__group { scroll-margin-top: calc(var(--jg-header-h) + 70px); }
@media (min-width: 960px) {
	#menu-jachnun,
	.jg-menu__group { scroll-margin-top: calc(var(--jg-header-h) + 92px); }
}

/* ---- the menu as a quick-order list, after Wolt -------------------------------
   A plain click on a card or a row opens the popup (the links stay real links
   for Google, new tabs and long-press); the "+" adds outright when there is
   nothing to choose, and says so: a bump on the cart, then "+ n −" in its place. */

.jg-row { position: relative; }
.jg-row__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.jg-row .jg-add,
.jg-row__name a { position: relative; z-index: 2; }



/* in the cart: the "+" turns into "+ n −", in sight without a hover */
.jg-page button.jg-add.is-in-cart,
.jg-page button.jg-card__add.is-in-cart,
.jg-page button.jg-buy__add.is-in-cart,
.jg-page .jg-buy--solo.is-in-cart { display: none; }

/* when an item is in the cart, the quick-add side of a split becomes the gold
   stepper, filling the pill flush to its rounded edges, while the "options"
   end-cap stays put beside it. High specificity to beat .jg-card .jg-qstep. */
.jg-card .jg-buy--split .jg-qstep,
.jg-row .jg-buy--split .jg-qstep,
.jg-buy--split .jg-qstep {
	grid-area: auto;
	flex: 1 1 auto;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	align-self: stretch;
	border-radius: 0;
	box-shadow: none;
}

.jg-qstep {
	grid-area: add;
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 50px;
	border-radius: 14px;
	background: var(--jg-gold);
	box-shadow: inset 0 -3px 0 var(--jg-gold-edge);
	color: var(--jg-gold-ink);
	transition: opacity .2s cubic-bezier(0.23, 1, 0.32, 1), transform .2s cubic-bezier(0.23, 1, 0.32, 1);
}

@starting-style { .jg-qstep { opacity: 0; transform: scale(.96); } }

.jg-page .jg-qstep button {
	display: grid;
	place-items: center;
	height: 100%;
	min-width: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
}

.jg-page .jg-qstep button:disabled { opacity: .5; cursor: progress; }
.jg-page .jg-qstep button:focus-visible { outline: 3px solid var(--jg-ink); outline-offset: -3px; }

@media (hover: hover) and (pointer: fine) {
	.jg-page .jg-qstep button:hover { background: rgba(36, 26, 23, .07); }
}

.jg-qstep__n { min-width: 28px; padding-bottom: 3px; font-size: 19px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

@media (min-width: 720px) { .jg-card .jg-qstep { margin: 16px 6px 0; } }

/* a card with something in the cart keeps its stepper and text up, at rest */
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
	.jg-card.has-qty .jg-card__body { transform: none; }
}

.jg-row .jg-qstep { width: 128px; height: 44px; border-radius: var(--jg-radius-pill); }

@media (prefers-reduced-motion: reduce) { .jg-qstep { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
	.jg-cartpill.is-bump,
	.jg-dock__cart.is-bump { animation: jg-bump .45s var(--jg-ease-out); }
}

@keyframes jg-bump {
	40% { transform: scale(1.12); }
}

/* ==========================================================================
   Pre-order items (e.g. sabaya): a small clock badge in the menu list, and a
   note inside the quick-add popup. Driven by the product's lead-days, so the
   mark and the ordering rule always agree.
   ========================================================================== */
.jg-pretag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 7px;
	padding: 3px 11px 3px 8px;
	border-radius: var(--jg-radius-pill);
	background: color-mix(in srgb, #4b5326 13%, var(--jg-card));
	color: var(--jg-ink);
	font-family: var(--jg-font-sub);
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.3;
}
.jg-pretag__icon { width: 14px; height: 14px; color: #4b5326; flex: none; }

.jg-qv__pre {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 12px 0 0;
	padding: 11px 13px;
	border-radius: 12px;
	background: color-mix(in srgb, #4b5326 11%, var(--jg-card));
	color: var(--jg-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}
.jg-qv__preicon { width: 18px; height: 18px; color: #4b5326; flex: none; margin-top: 1px; }
.jg-qv__pre[hidden] { display: none; }

/* ==========================================================================
   Buy control: a split button so the quick "add to cart" and the richer popup
   (upgrades, extras, a drink to pair) are both obvious. One side adds at once;
   the other, with a sliders mark, opens the options. A product you must
   configure, or a plain dish, shows a single button instead.
   ========================================================================== */
.jg-buy { grid-area: add; position: relative; z-index: 2; }

.jg-buy--split {
	display: flex;
	align-items: stretch;
	height: 50px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--jg-paper);
	box-shadow: inset 0 0 0 1px var(--jg-line);
}
.jg-buy--split button { border: 0; background: transparent; color: var(--jg-ink); font: inherit; font-weight: 800; cursor: pointer; transition: background-color .18s ease, color .18s ease; }

.jg-buy__add {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-inline: 12px;
	font-size: 16px;
	white-space: nowrap;
}
.jg-buy__label { white-space: nowrap; }
.jg-buy__plus { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--jg-gold); color: var(--jg-gold-ink); }
.jg-buy__plus .jg-glyph { width: 17px; height: 17px; stroke-width: 2.4; }

.jg-buy__more {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding-inline: 15px;
	border-inline-start: 1px solid var(--jg-line) !important;
	font-size: 14.5px;
}
.jg-buy__tune { width: 21px; height: 21px; flex: none; }
.jg-buy__morelabel { white-space: nowrap; }
.jg-buy__more { padding-inline: 13px; }
/* a narrow featured card hasn't room for the "שדרוגים" word — the sliders mark
   and the divided section still signal the extra options */
@container (max-width: 265px) {
	.jg-buy__morelabel { display: none; }
	.jg-buy__more { padding-inline: 12px; }
}

@media (hover: hover) and (pointer: fine) {
	.jg-buy__add:hover { background: color-mix(in srgb, var(--jg-ink) 6%, transparent); }
	.jg-buy__more:hover { background: color-mix(in srgb, var(--jg-red) 9%, transparent); color: var(--jg-red); }
}
.jg-buy--split button:focus-visible,
.jg-buy--solo:focus-visible { outline: none; box-shadow: inset 0 0 0 2.5px var(--jg-ink); }

/* the single-button cases (choose-first, or a plain dish) */
.jg-buy--solo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 50px;
	border: 0;
	border-radius: 14px;
	background: var(--jg-paper);
	box-shadow: inset 0 0 0 1px var(--jg-line);
	color: var(--jg-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	transition: background-color .18s ease;
}
.jg-buy--solo:hover { background: var(--jg-paper-2); }
.jg-buy--sold { grid-area: add; align-self: center; justify-self: center; color: var(--jg-ink-muted); font-weight: 700; }

/* --- compact in the rows: icons only, no text labels --- */
.jg-row .jg-buy__label,
.jg-row .jg-buy__morelabel { display: none; }
.jg-row .jg-buy--split { height: 44px; border-radius: var(--jg-radius-pill); }
.jg-row .jg-buy__add { padding-inline: 12px; }
.jg-row .jg-buy__more { padding-inline: 12px; }
.jg-row .jg-buy--solo { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.jg-row .jg-buy--solo .jg-buy__plus { width: 30px; height: 30px; }
.jg-row .jg-buy--solo .jg-buy__plus .jg-glyph { width: 20px; height: 20px; }

/* ==========================================================================
   Featured cards: the buy control (CTA) rests hidden and appears on hover on
   desktop (as before), while on phones it stays put with a little more air
   above it. A card with something in the cart keeps its stepper visible.
   ========================================================================== */
.jg-menu__cards .jg-buy { transition: opacity .35s cubic-bezier(0.2, 0.75, 0.5, 1), transform .45s cubic-bezier(0.2, 0.75, 0.5, 1); }

@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
	.jg-menu__cards .jg-card:not(.has-qty) .jg-buy { opacity: 0; transform: translateY(12px); }
	.jg-menu__cards .jg-card:hover .jg-buy,
	.jg-menu__cards .jg-card:focus-within .jg-buy { opacity: 1; transform: none; transition-delay: .05s; }
}

/* phones (no hover): always visible, with a touch more gap from the photo above */
@media (max-width: 719px) {
	.jg-menu__cards .jg-buy { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.jg-menu__cards .jg-buy { transition: none; }
}