/* ==========================================================================
   ג'חנון גדרה — "שבת בבוקר"
   Warm dough paper, the deep brown of the overnight pot, caramel crust,
   one red from the logo, gold only to buy. See DESIGN.md.
   ========================================================================== */

:root {
	/* ground and ink */
	--jg-paper: #f6eddc;
	--jg-paper-2: #ede0c6;
	--jg-card: #fffaf1;
	--jg-ink: #241a17;
	--jg-ink-2: #33241d;
	--jg-ink-muted: #6e5b54;
	--jg-line: #dccab0;

	/* accents */
	--jg-crust: #9a4f1d;
	--jg-red: #a01c20;
	--jg-red-dark: #7a1418;
	--jg-red-deep: #7a1418;
	--jg-gold: #ffdd33;
	--jg-lime: #e3ed86; /* fresh accent, olive's light side: "הכי טעים" and the delivery towns; ink on it is 13:1 */
	--jg-gold-hover: #f5cf14;
	--jg-gold-edge: #c9a400;
	--jg-gold-ink: #241a17;

	/* on the dark pot */
	--jg-cream: #f7f9e6;
	--jg-on-dark-muted: #cdbba8;
	--jg-on-dark-line: rgba(247, 249, 230, .16);

	--jg-focus: #a01c20;
	--jg-live: #4c8a2c; /* the 'orders open' dot */

	/* type: Burekas for display, Savyon for text, Heebo catches Latin and ׳ ״ */
	--jg-font-display: "Burekas", "Savyon", "Heebo", "Arial Hebrew", sans-serif;
	--jg-font-body: "Savyon", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	/* the subtitle voice: second lines, product names, labels under titles */
	--jg-font-sub: "Caesarea", "Savyon", "Heebo", system-ui, sans-serif;

	/* shape and space */
	--jg-radius-sm: 6px;
	--jg-radius-md: 12px;
	--jg-radius-lg: 28px;
	--jg-radius-pill: 999px;
	--jg-wrap: 1240px;
	--jg-gutter: 18px;
	--jg-bar-h: 62px;                   /* the header bar */
	--jg-terms-h: 30px;                 /* the delivery-terms band above the bar */
	--jg-header-h: calc(var(--jg-bar-h) + var(--jg-terms-h));
	--jg-ease: cubic-bezier(.2, .7, .2, 1);
	--jg-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for entrances */

	/* Kadence palette, re-pointed so WooCommerce pages share the world */
	--global-palette1: var(--jg-red);
	--global-palette2: var(--jg-red-deep);
	--global-palette3: var(--jg-ink);
	--global-palette4: var(--jg-ink);
	--global-palette5: var(--jg-ink-muted);
	--global-palette6: var(--jg-ink-muted);
	--global-palette7: var(--jg-paper-2);
	--global-palette8: var(--jg-paper);
	--global-palette9: var(--jg-paper);
	--global-body-font-family: var(--jg-font-body);
	--global-heading-font-family: var(--jg-font-display);
}

@media (min-width: 768px) { :root { --jg-gutter: 32px; } }
@media (min-width: 1024px) { :root { --jg-bar-h: 72px; } }

/* ---- base --------------------------------------------------------------- */

html { scroll-padding-top: calc(var(--jg-header-h) + 16px); }

body {
	background: var(--jg-paper);
	color: var(--jg-ink);
	font-family: var(--jg-font-body);
	font-size: 16.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2 {
	font-family: var(--jg-font-display);
	font-weight: 400;
	line-height: 1.05;
	text-wrap: balance;
}

h3, h4, h5, h6 {
	font-family: var(--jg-font-body);
	font-weight: 700;
	text-wrap: balance;
}

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

/* Kadence clips the page wrapper, which would stop the header sticking. */
#wrapper { overflow: clip; }

.jg-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--jg-wrap) + 2 * var(--jg-gutter));
	margin-inline: auto;
	padding-inline: var(--jg-gutter);
}

.jg-display { font-family: var(--jg-font-display); font-weight: 400; }

/* the drawn + and − (jg_glyph): thin, round-capped, optically centred */
.jg-glyph {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
}

.jg-step__btn .jg-glyph { width: 16px; height: 16px; stroke-width: 2.1; }

.jg-sr {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* nowrap: a time range must not break on its dash ("07:30–" / "13:30"). */
.jg-ltr { unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jg-nowrap { white-space: nowrap; }
.jg-icon { width: 22px; height: 22px; flex: none; }

:where(.jg-header, .jg-footer, .jg-drawer, .jg-dock, .jg-page) a { text-decoration: none; }

:where(.jg-header, .jg-drawer, .jg-dock, .jg-page) :focus-visible {
	outline: 2px solid var(--jg-focus);
	outline-offset: 3px;
}

/* ---- buttons ------------------------------------------------------------ */

.jg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--jg-radius-pill);
	font-family: var(--jg-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s, color .15s, box-shadow .15s, transform .15s var(--jg-ease);
}

.jg-btn:active { transform: translateY(1px); }
.jg-btn--block { width: 100%; }
.jg-btn--lg { min-height: 56px; padding: 0 30px; font-size: 17px; }

/* Gold = buy. The darker under-edge keeps it from melting into the paper. */
/* :focus and :active listed too, or Kadence's own a:focus colour wins once
   a tap or a closing dialog leaves focus on the button. */
.jg-btn--gold,
.jg-btn--gold:link,
.jg-btn--gold:visited,
.jg-btn--gold:focus,
.jg-btn--gold:active {
	background: var(--jg-gold);
	color: var(--jg-gold-ink);
	box-shadow: inset 0 -3px 0 var(--jg-gold-edge);
}

.jg-btn--gold:hover,
.jg-btn--gold:focus-visible { background: var(--jg-gold-hover); color: var(--jg-gold-ink); }

.jg-btn--line,
.jg-btn--line:visited {
	background: transparent;
	color: var(--jg-ink);
	box-shadow: inset 0 0 0 1.5px var(--jg-line);
}

.jg-btn--line:hover { color: var(--jg-red); box-shadow: inset 0 0 0 1.5px var(--jg-red); }

.jg-textlink,
.jg-textlink:visited {
	color: var(--jg-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-color: var(--jg-crust);
}

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

/* status chip: "ההזמנות לשבת 17.10 פתוחות" */
.jg-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--jg-ink-muted);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.jg-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--jg-ink-muted);
}

.jg-status.is-open { color: var(--jg-ink); }
.jg-status.is-open::before { background: var(--jg-red); box-shadow: 0 0 0 4px rgba(160, 28, 32, .14); }

/* ==========================================================================
   Header, after voldogfood.com. On the homepage it opens with no background
   at all: logo, status and nav sit on the olive hero panel in cream, as part
   of it. The moment the page scrolls it becomes a solid full-width bar (card
   background, ink text, red logo, soft shadow) and slims down. Every other
   page starts on the solid bar. Colours run through --hdr-* so both states
   share one set of rules.
   ========================================================================== */

#masthead.jg-header {
	--hdr-fg: var(--jg-ink);
	--hdr-muted: var(--jg-ink-muted);
	--hdr-logo: var(--jg-red);
	--hdr-line: var(--jg-line);
	--hdr-hover: var(--jg-paper-2);
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--jg-card);
	box-shadow: 0 1px 0 var(--jg-line), 0 14px 34px -26px rgba(36, 26, 23, .5);
	transition: background-color .35s ease, box-shadow .35s ease, padding .35s var(--jg-ease-out);
}

@media (max-width: 600px) { #masthead.jg-header { top: 0; } }

/* homepage, top of the page: on the hero, no background */
.jg-hero-page #masthead.jg-header {
	position: fixed;
	inset-inline: 0;
}

.jg-hero-page #masthead.jg-header:not(.is-scrolled) {
	--hdr-fg: var(--jg-cream);
	--hdr-muted: color-mix(in srgb, var(--jg-cream) 72%, transparent);
	--hdr-logo: var(--jg-cream);
	--hdr-line: color-mix(in srgb, var(--jg-cream) 32%, transparent);
	--hdr-hover: color-mix(in srgb, var(--jg-cream) 14%, transparent);
	padding-top: 18px; /* clear of the panel's top edge */
	background: transparent;
	box-shadow: none;
}

@media (min-width: 1024px) {
	.jg-hero-page #masthead.jg-header:not(.is-scrolled) { padding-top: 26px; }
}

#masthead .jg-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas: "burger brand actions";
	align-items: center;
	gap: 8px;
	max-width: none;
	height: var(--jg-bar-h);
	padding-inline: 10px;
	transition: height .35s var(--jg-ease-out), padding .35s var(--jg-ease-out);
}

/* on the hero the bar sits inside the panel: taller, and inset to the
   panel's own padding (8/16px page inset + the panel's padding) */
.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-header__inner {
	height: calc(var(--jg-bar-h) + 8px);
	padding-inline: 30px;
}

@media (min-width: 720px) {
	.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-header__inner { padding-inline: 48px; }
}

.jg-brandbox {
	grid-area: brand;
	justify-self: center;
	display: flex;
	align-items: center;
	min-width: 0;
}

/* the coil alone on the hero, the full logo everywhere else; stacked in one cell */
.jg-brand { display: grid; place-items: center; color: var(--hdr-logo); transition: color .35s ease; }
.jg-brand > svg { grid-area: 1 / 1; }

/* The logo swap, on voldogfood.com's timings. Turning solid: the coil folds
   into its centre and fades (.7s), and .4s in the full logo opens from its
   centre outward (.7s). Back on the hero: the logo drops 20px and fades
   (.4s) and the coil comes back (.4s, after .2s). */
.jg-brand__logo {
	height: calc(var(--jg-bar-h) - 14px);
	width: calc((var(--jg-bar-h) - 14px) * 1.5085);
	clip-path: inset(0 0);
	transition:
		clip-path .7s cubic-bezier(0.33, 1, 0.68, 1) .4s,
		opacity .7s cubic-bezier(0.33, 1, 0.68, 1) .4s,
		transform 0s .4s;
}

.jg-brand__mark {
	height: calc(var(--jg-bar-h) - 24px);
	width: calc((var(--jg-bar-h) - 24px) * 1.39);
	clip-path: inset(0 50%);
	opacity: 0;
	transition: clip-path .7s cubic-bezier(0.45, 0, 0.55, 1), opacity .7s cubic-bezier(0.45, 0, 0.55, 1);
}

.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-brand__mark {
	clip-path: inset(0 0);
	opacity: 1;
	transition: clip-path 0s, opacity .4s cubic-bezier(0.33, 1, 0.68, 1) .2s;
}

.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-brand__logo {
	clip-path: inset(0 50%);
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity .4s cubic-bezier(0.32, 0, 0.67, 0),
		transform .4s cubic-bezier(0.32, 0, 0.67, 0),
		clip-path 0s .4s;
}

@media (prefers-reduced-motion: reduce) {
	.jg-brand__logo, .jg-brand__mark,
	.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-brand__logo,
	.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-brand__mark { transition: opacity .2s ease; transform: none; clip-path: none; }
}

/* reading side: the order status, a hairline, the nav */
.jg-headstart { grid-area: start; justify-self: start; display: none; align-items: center; gap: 22px; min-width: 0; }

/* the next order day, two lines on the logo's other side, before the
   contact pill: "שבת 24.10 / ההזמנות פתוחות" */
.jg-hstatus {
	display: none;
	align-items: center;
	gap: 11px;
	margin-inline-end: 4px;
	padding-inline-end: 22px;
	border-inline-end: 1px solid var(--hdr-line);
	transition: opacity .4s cubic-bezier(0.23, 1, 0.32, 1);
	line-height: 1.15;
	white-space: nowrap;
}

.jg-hstatus__text { display: grid; }
.jg-hstatus small { color: var(--hdr-muted); font-size: 12.5px; font-weight: 600; }
.jg-hstatus strong { color: var(--hdr-fg); font-family: var(--jg-font-sub); font-size: 17px; font-weight: 800; }

.jg-hstatus__dot {
	position: relative;
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hdr-muted);
}

.jg-hstatus.is-open .jg-hstatus__dot { background: var(--jg-live); }
.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-hstatus.is-open .jg-hstatus__dot { background: #9fd36b; }

/* a slow ring off the live dot */
@media (prefers-reduced-motion: no-preference) {
	.jg-hstatus.is-open .jg-hstatus__dot::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: inherit;
		animation: jg-live 2.4s ease-out infinite;
	}
}

/* the order day beside "add to cart" (jg_promise: popup, product page, side
   cart): which Saturday, and when it comes. The dot is live green while
   orders are open, quiet grey when they aren't. */
.jg-promise {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 0;
	color: var(--jg-ink-muted);
	font-size: 14.5px;
	line-height: 1.4;
}

.jg-promise strong { color: var(--jg-ink); font-weight: 800; }

.jg-promise__dot {
	position: relative;
	top: -1px;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--jg-ink-muted);
	opacity: .55;
}

.jg-promise.is-open .jg-promise__dot,
.jg-dock .jg-promise__dot { background: var(--jg-live); opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
	.jg-promise.is-open .jg-promise__dot::after,
	.jg-dock .jg-promise__dot::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: inherit;
		animation: jg-live 2.4s ease-out infinite;
	}
}

.jg-cart__heading { display: grid; gap: 8px; }
.jg-cart__heading .jg-promise { font-size: 14px; }

@keyframes jg-live {
	from { opacity: .55; transform: scale(1); }
	to { opacity: 0; transform: scale(3); }
}

.jg-header button.jg-burger,
.jg-drawer button.jg-drawer__close {
	grid-area: burger;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--jg-radius-pill);
	background: transparent;
	box-shadow: none;
	color: var(--jg-ink);
	cursor: pointer;
}

.jg-header button.jg-burger { justify-self: start; color: var(--hdr-fg); }

.jg-header button.jg-burger:hover { background: var(--hdr-hover); }
.jg-drawer button.jg-drawer__close:hover { background: var(--jg-paper-2); }

.jg-burger .jg-icon { width: 26px; height: 26px; }

.jg-nav { display: none; }

.jg-actions {
	grid-area: actions;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* phone + WhatsApp, one pill split by a hairline */
.jg-contactpill {
	display: none;
	align-items: center;
	height: 46px;
	padding: 0 4px;
	border-radius: var(--jg-radius-pill);
	box-shadow: inset 0 0 0 1px var(--hdr-line);
}

.jg-contactpill__sep { width: 1px; height: 18px; background: var(--hdr-line); }

.jg-iconlink,
.jg-iconlink:visited {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--jg-radius-pill);
	color: var(--hdr-fg);
	transition: background-color .15s, color .35s;
}

.jg-iconlink .jg-icon { width: 20px; height: 20px; }
.jg-iconlink:hover { background: var(--hdr-hover); color: var(--hdr-fg); }

/* cart pill: bag · count · total */
.jg-cartpill,
.jg-cartpill:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 14px;
	border-radius: var(--jg-radius-pill);
	box-shadow: inset 0 0 0 1px var(--hdr-line);
	color: var(--hdr-fg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: box-shadow .15s, color .35s;
}

.jg-cartpill:hover { box-shadow: inset 0 0 0 1px var(--hdr-fg); }
.jg-cartpill .jg-icon { width: 21px; height: 21px; }

.jg-cartpill__n {
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: var(--jg-radius-pill);
	background: var(--hdr-hover);
	font-size: 13px;
}

.jg-cartpill.has-items,
.jg-cartpill.has-items:visited { background: var(--jg-ink); box-shadow: none; color: var(--jg-cream); }
.jg-cartpill.has-items .jg-cartpill__n { background: var(--jg-red); color: var(--jg-cream); }
.jg-cartpill__total:empty { display: none; }

/* the one gold button, with an arrow that leans forward on hover */
.jg-cta { display: none; gap: 10px; min-height: 46px; padding-inline: 22px 18px; }
.jg-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--jg-ease-out); }

@media (hover: hover) and (pointer: fine) {
	.jg-cta:hover svg { transform: translateX(-3px); }
}

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

@media (min-width: 1024px) {
	#masthead .jg-header__inner {
		gap: 20px;
		padding-inline: 32px;
	}
	.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-header__inner { padding-inline: 76px; }
	.jg-nav { display: block; }
	.jg-cta { display: inline-flex; }
}

/* the contact pill needs the room; until then the drawer carries it */
@media (min-width: 1180px) { .jg-contactpill { display: inline-flex; } }

/* the logo is centred, so the nav gets half the bar: from 1280px it fits;
   below that it lives in the drawer, behind the burger */
@media (min-width: 1280px) {
	#masthead .jg-header__inner { grid-template-areas: "start brand actions"; }
	.jg-header button.jg-burger { display: none; }
	.jg-headstart { display: flex; }
}

/* the order day joins the bar with the nav: measured, from 1280px it keeps
   70px+ off the logo; narrower, the hero and the drawer carry it */
@media (min-width: 1280px) { .jg-hstatus { display: inline-flex; } }

/* small laptops: just the day, one line ("שבת 24.10"); the bar has room for
   that much once the phone dock is gone */
@media (min-width: 1024px) and (max-width: 1279px) {
	.jg-hstatus { display: inline-flex; gap: 9px; padding-inline-end: 16px; }
	.jg-hstatus strong { display: none; }
	.jg-hstatus small { color: var(--hdr-fg); font-family: var(--jg-font-sub); font-size: 16px; font-weight: 800; }
}

/* over the hero the panel says it already (below 1680px); the bar takes it
   over on scroll. From 1680px the panel leaves it to the bar (home.css). */
@media (max-width: 1679px) {
	.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-hstatus { opacity: 0; }
}


.jg-nav__list {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-nav__list a,
.jg-nav__list a:visited {
	position: relative;
	display: block;
	padding: 10px 13px;
	color: var(--hdr-fg);
	font-size: 16.5px;
	font-weight: 600;
	white-space: nowrap; /* labels never break mid-word */
	transition: color .35s ease;
}

.jg-nav__list a::after {
	content: "";
	position: absolute;
	inset-inline: 13px;
	bottom: 3px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transition: transform .22s var(--jg-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.jg-nav__list a:hover { color: var(--hdr-fg); }
	.jg-nav__list a:hover::after { transform: scaleX(1); }
}

/* Only real pages are "current"; links to homepage sections (#how) never are. */
.jg-nav__list .current-menu-item > a:not([href*="#"]) { color: var(--jg-red); }
.jg-nav__list .current-menu-item > a:not([href*="#"])::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	#masthead.jg-header, #masthead .jg-header__inner, .jg-brand, .jg-nav__list a, .jg-nav__list a::after,
	.jg-cta svg, .jg-iconlink, .jg-cartpill { transition: none; }
}

/* -- drawer (native <dialog>: focus trap, Esc, inert page) -- */

.jg-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	box-sizing: border-box;
	width: min(88vw, 400px);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0 22px 28px;
	overflow-y: auto;
	border: 0;
	background: var(--jg-paper);
	color: var(--jg-ink);
	transform: translateX(100%);
	transition: transform .32s var(--jg-ease);
}

.jg-drawer.is-open { transform: translateX(0); }
.jg-drawer::backdrop { background: rgba(36, 26, 23, .5); opacity: 0; transition: opacity .32s; }
.jg-drawer.is-open::backdrop { opacity: 1; }

.jg-drawer__head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 12px;
	background: var(--jg-paper);
}

.jg-drawer__brand { display: flex; color: var(--jg-red); }
.jg-drawer__logo { width: 81px; height: 54px; }
.jg-drawer > .jg-status { margin-top: 4px; }

.jg-drawer__list { margin: 18px 0 0; padding: 0; list-style: none; }

.jg-drawer__list a,
.jg-drawer__list a:visited {
	display: flex;
	align-items: center;
	min-height: 60px;
	border-bottom: 1px solid var(--jg-line);
	color: var(--jg-ink);
	font-family: var(--jg-font-display);
	font-size: 30px;
	line-height: 1.1;
}

.jg-drawer__list a:hover { color: var(--jg-red); }
.jg-drawer__actions { display: grid; gap: 10px; margin-top: 24px; }
.jg-drawer__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jg-drawer__pair .jg-btn { padding: 0 10px; font-size: 15px; }
.jg-drawer__pair .jg-icon { width: 20px; height: 20px; }

.jg-drawer__account,
.jg-drawer__account:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
	padding-block: 8px;
	color: var(--jg-ink-muted);
	font-weight: 600;
}

/* -- phone order dock -- */

.jg-dock { display: none; }

@media (max-width: 1023px) {
	body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

	.jg-dock {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		gap: 10px;
		align-items: center;
		padding: 12px var(--jg-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
		background: color-mix(in srgb, var(--jg-paper) 94%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 -1px 0 var(--jg-line);
	}

	.jg-dock .jg-btn { min-height: 52px; }

	/* Every state, pinned: closing the side cart returns focus to this link,
	   and Kadence's own a:focus colour repainted "הסל שלי" red on a dark
	   pill. The dock never changes colour — the focus ring marks focus. */
	.jg-dock__cart,
	.jg-dock__cart:link,
	.jg-dock__cart:visited,
	.jg-dock__cart:hover,
	.jg-dock__cart:focus,
	.jg-dock__cart:focus-visible,
	.jg-dock__cart:active {
		display: flex;
		flex: 1;
		align-items: center;
		gap: 10px;
		min-height: 52px;
		padding: 0 16px;
		border-radius: var(--jg-radius-pill);
		background: var(--jg-ink);
		color: var(--jg-cream);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	.jg-dock__cart strong { margin-inline-start: auto; color: inherit; }
	.jg-dock__cart :where(span, strong, small) { color: inherit; }
	.jg-dock__cart .jg-dock__label small { color: color-mix(in srgb, var(--jg-cream) 70%, transparent); }

	/* "הסל שלי" over the order day */
	.jg-dock__label { display: grid; line-height: 1.2; }
	.jg-dock__label small { color: color-mix(in srgb, var(--jg-cream) 70%, transparent); font-size: 12.5px; font-weight: 600; }

	.jg-dock__n {
		display: grid;
		place-items: center;
		min-width: 26px;
		height: 26px;
		border-radius: var(--jg-radius-pill);
		background: var(--jg-red);
		font-size: 14px;
		font-weight: 700;
	}
}

/* ==========================================================================
   Footer: the dark pot
   ========================================================================== */

.jg-footer {
	position: relative;
	overflow: hidden;
	background: var(--jg-ink);
	color: var(--jg-cream);
	font-size: 15.5px;
}

.jg-footer a,
.jg-footer a:visited { color: var(--jg-cream); }
.jg-footer a:hover { color: var(--jg-gold); }
.jg-footer :focus-visible { outline: 2px solid var(--jg-gold); outline-offset: 3px; }

.jg-footer__coil {
	position: absolute;
	inset-inline-end: -120px;
	bottom: -150px;
	width: 620px;
	height: 446px;
	color: var(--jg-ink-2);
	pointer-events: none;
}

.jg-footer__main {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	padding-block: 64px 44px;
}

@media (min-width: 768px) {
	.jg-footer__main { grid-template-columns: 1fr 1fr; }
	.jg-footer__branches { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
	.jg-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 56px; }
	.jg-footer__branches { grid-column: auto; }
}

.jg-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.jg-footer__logo { width: 151px; height: 100px; color: var(--jg-cream); }
.jg-footer__tagline { max-width: 30ch; margin: 0; color: var(--jg-on-dark-muted); }

.jg-footer__title {
	display: flex;
	flex-wrap: wrap; /* a long branch name keeps the 'open now' badge on its own line */
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 8px;
	color: var(--jg-cream);
	font-family: var(--jg-font-display);
	font-size: 28px;
	line-height: 1.1;
}

.jg-badge {
	padding: 3px 10px;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-gold);
	color: var(--jg-gold-ink);
	font-family: var(--jg-font-body);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
}

.jg-badge[hidden] { display: none; }
.jg-branchname { white-space: nowrap; } /* "סניף אשדוד" never splits across lines */

.jg-footer__branches { display: grid; gap: 36px; }
@media (min-width: 560px) { .jg-footer__branches { grid-template-columns: 1fr 1fr; gap: 32px; } }

.jg-branch__addr,
.jg-branch__closed,
.jg-footer__note { margin: 0 0 4px; color: var(--jg-on-dark-muted); }

.jg-hours { margin: 6px 0 0; }

.jg-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	max-width: 280px;
	padding-block: 6px;
	border-bottom: 1px solid var(--jg-on-dark-line);
}

.jg-hours__row dt { font-weight: 600; }
.jg-hours__row dd { margin: 0; }
.jg-hours__row.is-today dt::after { content: " · היום"; color: var(--jg-gold); font-weight: 700; }

.jg-branch__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.jg-chip,
.jg-chip:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 14px;
	border-radius: var(--jg-radius-pill);
	box-shadow: inset 0 0 0 1.5px currentColor;
	font-size: 14px;
	font-weight: 600;
}

.jg-chip .jg-icon { width: 17px; height: 17px; }
.jg-footer .jg-chip { color: var(--jg-cream); box-shadow: inset 0 0 0 1.5px var(--jg-on-dark-line); }
.jg-footer .jg-chip:hover { color: var(--jg-gold); box-shadow: inset 0 0 0 1.5px var(--jg-gold); }

.jg-contact, .jg-social, .jg-legal { margin: 0; padding: 0; list-style: none; }
.jg-contact { margin-bottom: 14px; }
.jg-contact li + li { margin-top: 6px; }
.jg-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 600; }
.jg-contact .jg-icon { width: 20px; height: 20px; }

.jg-social { display: flex; gap: 8px; }

.jg-social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--jg-radius-pill);
	box-shadow: inset 0 0 0 1.5px var(--jg-on-dark-line);
}

.jg-footer .jg-social a:hover { box-shadow: inset 0 0 0 1.5px var(--jg-gold); }

.jg-footer__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 28px;
	padding-block: 20px 26px;
	border-top: 1px solid var(--jg-on-dark-line);
	font-size: 14px;
}

.jg-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.jg-legal a { display: inline-block; padding-block: 6px; }
.jg-secure, .jg-copy { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--jg-on-dark-muted); }
.jg-credit { margin: 0; color: var(--jg-on-dark-muted); }
.jg-credit a, .jg-credit a:visited { color: var(--jg-on-dark-muted); letter-spacing: .3px; transition: color .15s ease; }
.jg-credit a:hover { color: var(--jg-cream); }
.jg-secure .jg-icon { width: 16px; height: 16px; }

/* ==========================================================================
   WooCommerce buy buttons follow the gold rule
   ========================================================================== */

.woocommerce :is(.single_add_to_cart_button, .add_to_cart_button, .ajax_add_to_cart, .checkout-button, #place_order).button,
.woocommerce :is(.single_add_to_cart_button, .checkout-button, #place_order).button.alt {
	border-color: transparent;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-gold);
	box-shadow: inset 0 -3px 0 var(--jg-gold-edge);
	color: var(--jg-gold-ink);
	font-weight: 700;
}

.woocommerce :is(.single_add_to_cart_button, .add_to_cart_button, .ajax_add_to_cart, .checkout-button, #place_order).button:hover,
.woocommerce :is(.single_add_to_cart_button, .checkout-button, #place_order).button.alt:hover {
	background: var(--jg-gold-hover);
	color: var(--jg-gold-ink);
}

/* ---- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.jg-drawer, .jg-drawer::backdrop, .jg-btn, #masthead.jg-header { transition: none; }
}

/* checkout blocked: the reason first, then the way back */
.jg-cart-errors { display: grid; gap: 16px; max-width: 640px; }
.jg-cart-errors__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 0; }


/* ==========================================================================
   Side cart — the order slides in from the far edge, over a dimmed page
   (native <dialog>: focus trap, Esc, inert page). The panel fills the
   dialog, so a click that lands on the dialog itself is the backdrop.
   ========================================================================== */

html.jg-locked { overflow: hidden; }

.jg-cart {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	inset-inline-start: auto;
	box-sizing: border-box;
	width: min(100vw, 460px);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	color: var(--jg-ink);
	transform: translateX(-100%);
	transition: transform .36s cubic-bezier(0.32, 0.72, 0, 1);
}

.jg-cart.is-open { transform: translateX(0); }
.jg-cart::backdrop { background: rgba(36, 26, 23, .5); opacity: 0; transition: opacity .32s; }
.jg-cart.is-open::backdrop { opacity: 1; }

.jg-cart__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--jg-card);
	box-shadow: 0 0 60px rgba(36, 26, 23, .28);
}

@media (min-width: 560px) {
	/* the edge facing the page is rounded, the one against the window isn't */
	.jg-cart__panel { border-start-start-radius: 26px; border-end-start-radius: 26px; }
}

.jg-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px 12px;
}

.jg-cart__title { margin: 0; font-family: var(--jg-font-display); font-size: 34px; font-weight: 400; line-height: 1; }

.jg-cart button.jg-cart__x {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jg-paper-2);
	box-shadow: none;
	color: var(--jg-ink);
	cursor: pointer;
}

.jg-cart__x .jg-icon { width: 20px; height: 20px; }

.jg-cart > .jg-cart__panel > .jgo-bar { margin: 0 24px 6px; max-width: none; border-radius: 18px; background: var(--jg-paper); }

.jg-cart__body { display: flex; flex: 1; flex-direction: column; min-height: 0; }

.jg-cart__scroll {
	flex: 1;
	min-height: 0;
	padding: 0 24px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ---- lines ---- */

.jg-cart__lines { margin: 0; padding: 0; list-style: none; }

.jg-line {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--jg-line);
	transition: opacity .2s;
}

.jg-line.is-busy { opacity: .5; pointer-events: none; }

.jg-line__media { display: block; }

.jg-line__img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	object-fit: cover;
	background: var(--jg-paper-2);
}

.jg-line__text { display: grid; gap: 2px; }
.jg-line__name, .jg-line__name:visited { color: var(--jg-ink); font-family: var(--jg-font-sub); font-size: 17px; font-weight: 800; line-height: 1.2; text-decoration: none; }
.jg-line__name:hover { color: var(--jg-red); }
.jg-line__meta { color: var(--jg-ink-muted); font-size: 13.5px; line-height: 1.35; }
.jg-line__price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- the pill stepper, shared by lines and cutlery ---- */

.jg-step {
	display: inline-flex;
	flex-direction: row-reverse; /* "+" on the left, "−" on the right (DOM order kept for the focus logic) */
	align-items: center;
	height: 40px;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-paper);
	box-shadow: inset 0 0 0 1.5px var(--jg-line);
}

.jg-cart button.jg-step__btn,
.jg-plates button.jg-step__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--jg-radius-pill);
	background: transparent;
	box-shadow: none;
	color: var(--jg-ink);
	font-size: 21px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s;
}

.jg-plates button.jg-step__btn:disabled,
.jg-cart button.jg-step__btn:disabled { opacity: .3; cursor: not-allowed; }
.jg-cart button.jg-step__btn:active:not(:disabled) { background: var(--jg-paper-2); }

.jg-step__btn--del svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jg-step__n { min-width: 18px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- cutlery, note ---- */

.jg-cart__row,
.jg-cart__note > summary {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
}

.jg-cart__row { padding: 16px 0; border-bottom: 1px solid var(--jg-line); }
.jg-cart__note { display: block; }
.jg-cart__note > summary { list-style: none; cursor: pointer; }
.jg-cart__note > summary::-webkit-details-marker { display: none; }

.jg-cart__rowicon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--jg-paper-2);
}

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

.jg-cart__rowtext { display: grid; gap: 1px; }
.jg-cart__rowtext strong { font-size: 15.5px; font-weight: 800; }
.jg-cart__rowtext span { color: var(--jg-ink-muted); font-size: 13.5px; }

.jg-cart__edit {
	padding: 8px 16px;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-paper-2);
	font-size: 14px;
	font-weight: 700;
}

.jg-cart__note[open] .jg-cart__edit { display: none; }

.jg-cart__note textarea {
	box-sizing: border-box;
	width: 100%;
	margin-top: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--jg-line);
	border-radius: 14px;
	background: var(--jg-paper);
	color: var(--jg-ink);
	font: inherit;
	font-size: 15px;
	resize: vertical;
}

.jg-cart__note textarea:focus { border-color: var(--jg-ink); outline: none; }

/* ---- more for the table ---- */

.jg-cart__h { margin: 26px 0 12px; font-family: var(--jg-font-display); font-size: 26px; font-weight: 400; line-height: 1; }

.jg-recs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jg-rec {
	position: relative;
	display: grid;
	gap: 2px;
	padding-bottom: 12px;
	overflow: hidden;
	border-radius: 18px;
	background: var(--jg-paper);
	box-shadow: inset 0 0 0 1px var(--jg-line);
}

.jg-rec__media { display: block; aspect-ratio: 4 / 3; margin-bottom: 8px; background: var(--jg-paper-2); }
.jg-rec__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jg-rec__name { padding-inline: 12px; font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.jg-rec__price { padding-inline: 12px; color: var(--jg-ink-muted); font-size: 14px; font-weight: 600; }

.jg-cart button.jg-rec__add {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jg-gold);
	box-shadow: inset 0 0 0 1.5px var(--jg-gold-edge), 0 6px 14px -6px rgba(36, 26, 23, .5);
	color: var(--jg-gold-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: transform .16s var(--jg-ease-out);
}

.jg-cart button.jg-rec__add:active { transform: scale(.94); }
.jg-cart button.jg-rec__add:disabled { opacity: .6; cursor: progress; }

/* ---- footer: progress and the way to pay ---- */

.jg-cart__foot {
	padding: 14px 24px calc(18px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--jg-line);
	background: var(--jg-card);
}

.jg-cart__progress { display: grid; gap: 8px; margin: 0 0 12px; font-size: 14.5px; font-weight: 700; }
.jg-cart__progress.is-done { color: var(--jg-crust); }
.jg-cart__bar { display: block; height: 6px; overflow: hidden; border-radius: var(--jg-radius-pill); background: var(--jg-paper-2); }
.jg-cart__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--jg-red); }

a.jg-cart__go,
a.jg-cart__go:visited {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 0 18px;
	border-radius: 18px;
	background: var(--jg-gold);
	box-shadow: inset 0 -3px 0 var(--jg-gold-edge);
	color: var(--jg-gold-ink);
	font-size: 18px;
	font-weight: 800;
	text-decoration: none;
	transition: background-color .15s, transform .16s var(--jg-ease-out);
}

a.jg-cart__go:hover { background: var(--jg-gold-hover); }
a.jg-cart__go:active { transform: scale(.985); }

.jg-cart__gon {
	display: grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-gold-ink);
	color: var(--jg-gold);
	font-size: 14px;
}

.jg-cart__golabel { flex: 1; }
.jg-cart__gototal { font-variant-numeric: tabular-nums; }

/* ---- empty ---- */

.jg-cart__empty { display: grid; justify-items: center; gap: 6px; margin: auto; padding: 40px 32px 80px; text-align: center; }
.jg-cart__empty p { margin: 0; color: var(--jg-ink-muted); }
.jg-cart__emptymark { width: 132px; height: 96px; margin-bottom: 10px; color: var(--jg-paper-2); }
.jg-cart__empty p.jg-cart__emptytitle { color: var(--jg-ink); font-family: var(--jg-font-display); font-size: 32px; line-height: 1; }
.jg-cart__empty .jg-btn { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
	.jg-cart, .jg-cart::backdrop, .jg-line, a.jg-cart__go, .jg-cart button.jg-rec__add { transition: none; }
}

/* checkout: the plates row in the order summary */
.jg-plates td { padding-block: 14px; }
.jg-plates.is-busy { opacity: .5; pointer-events: none; }
.jg-plates__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.jg-plates__text { display: grid; gap: 2px; }
.jg-plates__text strong { font-weight: 800; }
.jg-plates__text span { color: var(--jg-ink-muted); font-size: 14px; }

.jg-footer__events { margin: 14px 0 0; }
.jg-footer__events a,
.jg-footer__events a:visited { color: var(--jg-cream); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   404: an olive panel, inset like the homepage's hero, with the coil behind
   ========================================================================== */

.jg-404 { padding: 10px; }
@media (min-width: 720px) { .jg-404 { padding: 16px; } }

.jg-404__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	justify-items: center;
	gap: 14px;
	min-height: min(78svh, 760px);
	align-content: center;
	padding: 72px 20px;
	border-radius: 26px;
	background: radial-gradient(90% 70% at 22% 100%, #626b31 0%, transparent 70%), #4b5326;
	color: var(--jg-cream);
	text-align: center;
}

.jg-404__coil {
	position: absolute;
	inset: 50% auto auto 50%;
	z-index: -1;
	width: min(120vw, 1100px);
	height: auto;
	aspect-ratio: 1.4;
	color: var(--jg-cream);
	opacity: .07;
	transform: translate(-50%, -50%);
}

.jg-404__code {
	margin: 0;
	color: var(--jg-lime);
	font-family: var(--jg-font-display);
	font-size: clamp(110px, 22vw, 240px);
	line-height: .85;
}

.jg-404 .jg-404__title {
	margin: 0;
	color: var(--jg-cream);
	font-family: var(--jg-font-display);
	font-size: clamp(36px, 6vw, 64px);
	font-weight: 400;
	line-height: 1.05;
}

.jg-404__lead { max-width: 34ch; margin: 0; color: color-mix(in srgb, var(--jg-cream) 88%, transparent); font-size: 18px; }

.jg-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.jg-404 .jg-404__home,
.jg-404 .jg-404__home:visited { min-height: 56px; padding: 0 28px; box-shadow: inset 0 0 0 1.5px var(--jg-cream); color: var(--jg-cream); font-size: 17px; }
.jg-404 .jg-404__home:hover { background: color-mix(in srgb, var(--jg-cream) 12%, transparent); }

.jg-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; }
.jg-404__links a,
.jg-404__links a:visited { color: var(--jg-cream); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.jg-404__links a:hover { color: var(--jg-lime); }

/* ==========================================================================
   Floating hotline (*5407): always a tap away, bottom corner on every page.
   Red pill, cream text, a soft pulse ring to catch the eye. On phones it
   lifts clear of the order dock and shows as a compact pill.
   ========================================================================== */
.jg-call,
.jg-call:visited {
	position: fixed;
	bottom: 24px;
	inset-inline-start: auto;
	inset-inline-end: 24px; /* left edge in this RTL layout */
	z-index: 92;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	height: 58px;
	padding-block: 0;
	padding-inline: 12px 24px; /* icon side, then the text side (more room on the left in RTL) */
	border-radius: var(--jg-radius-pill);
	background: var(--jg-red);
	color: var(--jg-cream);
	box-shadow: 0 16px 34px -12px rgba(36, 26, 23, .6), 0 0 0 1px rgba(255, 255, 255, .06) inset;
	/* hidden until the reader is past the first fold (JS adds .is-shown) */
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	pointer-events: none;
	transition: transform .22s var(--jg-ease-out), box-shadow .18s var(--jg-ease-out), background-color .18s ease, opacity .22s ease, visibility .22s;
}

.jg-call.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* steps aside once the footer is on screen, so it never covers the footer links */
.jg-call.is-tucked {
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px);
	pointer-events: none;
}
/* lock the text colour: Kadence's global a:hover otherwise recolours the link,
   and the number (inheriting currentColor) would vanish on the dark-red hover */
.jg-call,
.jg-call:visited,
.jg-call:hover,
.jg-call:focus,
.jg-call:active { color: var(--jg-cream); }
.jg-call.is-shown:hover { background: var(--jg-red-dark); transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(36, 26, 23, .68); }
.jg-call:focus-visible { outline: 3px solid var(--jg-ink); outline-offset: 3px; }

.jg-call__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(247, 249, 230, .16);
}
.jg-call__icon .jg-icon { width: 21px; height: 21px; color: var(--jg-cream); }

/* the attention ring, expanding softly out of the icon */
.jg-call__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--jg-cream);
	opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.jg-call__ring { animation: jg-call-pulse 2.6s var(--jg-ease-out) infinite; }
}
@keyframes jg-call-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(2.1); opacity: 0; }
	100% { transform: scale(2.1); opacity: 0; }
}

.jg-call__text { display: grid; row-gap: 3px; line-height: 1.1; text-align: start; }
.jg-call__text small { font-size: 12px; font-weight: 600; color: rgba(247, 249, 230, .8); }
.jg-call__text strong { font-family: var(--jg-font-sub); font-size: 19px; font-weight: 800; letter-spacing: .3px; color: var(--jg-cream); }

/* phones: clear the order dock, and tuck to a compact pill */
@media (max-width: 1023px) {
	/* phones: a small round icon-only button (no text), on the left above the dock */
	.jg-call,
	.jg-call:visited {
		bottom: calc(84px + 14px + env(safe-area-inset-bottom, 0px));
		inset-inline-start: auto;
		inset-inline-end: 14px;
		width: 54px;
		height: 54px;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
	.jg-call__text { display: none; }
	.jg-call__icon { width: 46px; height: 46px; background: transparent; }
	.jg-call__icon .jg-icon { width: 23px; height: 23px; }
}

/* cart/checkout have no dock, so the button can sit low on phones too */
@media (max-width: 1023px) {
	body.woocommerce-cart .jg-call,
	body.woocommerce-checkout .jg-call {
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}
}

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

/* ==========================================================================
   Legal / policy documents (terms of use, etc.): a readable, sectioned
   long-form layout wrapped in .jg-doc.
   ========================================================================== */
.jg-doc {
	max-width: 760px;
	margin-inline: auto;
	padding: 6px 0 20px;
	color: var(--jg-ink);
	font-size: 16.5px;
	line-height: 1.75;
	text-align: start;
}
.jg-doc__lead { margin: 0 0 6px; font-size: 18px; line-height: 1.7; }
.jg-doc h2 {
	margin: 34px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--jg-line);
	color: var(--jg-red);
	font-family: var(--jg-font-sub);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
}
.jg-doc p { margin: 0 0 12px; }
.jg-doc ul { margin: 0 0 8px; padding: 0; list-style: none; }
.jg-doc li { position: relative; margin: 0 0 10px; padding-inline-start: 22px; }
.jg-doc li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	top: 12px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--jg-red);
}
.jg-doc ul ul { margin: 10px 0 2px; padding-inline-start: 14px; }
.jg-doc ul ul li::before { top: 11px; background: transparent; border: 1.5px solid var(--jg-red); }
.jg-doc a { color: var(--jg-red); text-decoration: underline; text-underline-offset: 3px; }
.jg-doc a:hover { color: var(--jg-red-dark); }
.jg-doc strong { font-weight: 800; }
.jg-doc__note { margin: 2px 0 12px; color: var(--jg-ink-muted); font-size: 14px; }

/* a readable data table (e.g. per-branch accessibility), scrollable on phones */
.jg-doc__tablewrap { margin: 4px 0 10px; overflow-x: auto; border-radius: 12px; -webkit-overflow-scrolling: touch; }
.jg-doc__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.jg-doc__table th,
.jg-doc__table td { padding: 11px 13px; text-align: center; border: 1px solid var(--jg-line); }
.jg-doc__table thead th { background: color-mix(in srgb, var(--jg-line) 45%, var(--jg-card)); color: var(--jg-ink); font-family: var(--jg-font-sub); font-weight: 800; white-space: nowrap; }
.jg-doc__table tbody th[scope="row"] { background: color-mix(in srgb, var(--jg-line) 28%, var(--jg-card)); font-family: var(--jg-font-sub); font-weight: 800; font-size: 16px; }
.jg-access__note { text-align: start; min-width: 190px; color: var(--jg-ink-muted); font-size: 13.5px; line-height: 1.45; }

.jg-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; font-weight: 800; line-height: 1; }
.jg-av--yes { background: color-mix(in srgb, var(--jg-live) 20%, transparent); color: var(--jg-live); }
.jg-av--no { background: color-mix(in srgb, var(--jg-red) 12%, transparent); color: color-mix(in srgb, var(--jg-red) 78%, var(--jg-ink)); }

.jg-doc__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 10px; color: var(--jg-ink-muted); font-size: 14px; }
.jg-doc__legend .jg-av { width: 22px; height: 22px; font-size: 12px; }

@media (max-width: 767px) {
	.jg-doc { font-size: 16px; }
	.jg-doc h2 { font-size: 20px; margin-top: 28px; }
	.jg-doc__table { font-size: 14.5px; }
	.jg-doc__table th, .jg-doc__table td { padding: 9px 11px; }
}

/* ==========================================================================
   Branded scrollbars. WebKit/Blink (Chrome, Safari, Edge) through
   ::-webkit-scrollbar; Firefox through scrollbar-color. A soft brand-red
   thumb on a transparent track, slim with rounded ends. The hidden chip
   rails keep their own display:none rules (higher specificity).
   ========================================================================== */
html,
.jg-qv__form,
.jg-cart__scroll,
.jg-cart__body,
.jg-drawer,
.jg-asst__log {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--jg-red) 45%, var(--jg-line)) transparent;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
/* inset the track top/bottom (and left/right) so the thumb never reaches the
   very edge — its rounded caps stay visible even when scrolled fully up/down */
::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
::-webkit-scrollbar-track:horizontal { margin: 0 8px; }
::-webkit-scrollbar-thumb {
	background-color: color-mix(in srgb, var(--jg-red) 42%, var(--jg-line));
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background-color: color-mix(in srgb, var(--jg-red) 68%, var(--jg-line));
	background-clip: padding-box;
}

/* ==========================================================================
   Terms strip — the delivery rules, a thin band at the top of the header.
   It inherits the header's own --hdr-* tokens, so it follows every hero
   colour-way and the solid/transparent states without a rule of its own per
   theme: over the hero it is bare, with only a hairline under it; once the
   header turns solid it picks up a faint wash so it reads as a utility band
   above the nav. It stays put on scroll — it is information, not an advert.
   ========================================================================== */
.jg-terms {
	overflow: hidden;
	color: var(--hdr-muted);
	background: color-mix(in srgb, var(--jg-ink) 5%, var(--jg-card));
	border-bottom: 1px solid var(--hdr-line);
	transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.jg-terms__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	height: var(--jg-terms-h);
	padding-inline: 12px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.jg-terms__inner::-webkit-scrollbar { display: none; }

.jg-terms__sep { opacity: .4; }

/* over the hero the band is bare: the hero's own colour shows through, and
   only the hairline marks where the header begins */
.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-terms {
	background: transparent;
	border-bottom-color: color-mix(in srgb, currentColor 22%, transparent);
	padding-top: var(--jg-terms-top, 13px);
}

/* that state also carries the header's 18px breathing room; it belongs under
   the band, so the band itself stays flush with the top of the screen */
.jg-hero-page #masthead.jg-header:not(.is-scrolled) { padding-top: 0; }
.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-header__inner { margin-top: 18px; }

/* the short wording only where the long one would not fit */
.jg-terms__short { display: none; }

@media (max-width: 480px) {
	.jg-terms__inner { gap: 8px; font-size: 12px; padding-inline: 10px; }
	.jg-hero-page #masthead.jg-header:not(.is-scrolled) .jg-terms { --jg-terms-top: 10px; }
	.jg-terms__long { display: none; }
	.jg-terms__short { display: inline; }
}

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