/* ==========================================================================
   Product page — "שבת בבוקר"
   Info on the reading side, the photo in an arch beside it (sticky on desktop
   while the info scrolls). On phones the photo leads and the buy row is
   pinned to the bottom edge.
   ========================================================================== */

.jg-pp { padding-block: 20px 0; }

.jg-pp__grid {
	display: grid;
	gap: 26px;
	align-items: start;
}

@media (min-width: 960px) {
	.jg-pp { padding-block: 40px 0; }
	.jg-pp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
	/* info on the reading side (right), photo beside it */
	.jg-pp__info { grid-column: 1; grid-row: 1; }
	.jg-pp__media { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--jg-header-h) + var(--wp-admin--admin-bar--height, 0px) + 20px); }
}

/* ---- photo ---------------------------------------------------------------- */

.jg-pp__media {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

.jg-pp__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 999px 999px var(--jg-radius-lg) var(--jg-radius-lg);
	box-shadow: 0 40px 70px -40px rgba(36, 26, 23, .55);
}

@media (min-width: 960px) { .jg-pp__img { aspect-ratio: 4 / 5; } }

.jg-pp__stamp {
	--r: -9deg;
	top: 4%;
	inset-inline-start: -6px;
	width: 104px;
	height: 104px;
	padding: 12px;
	font-size: 19px;
}

@media (min-width: 960px) {
	.jg-pp__stamp { inset-inline-start: -34px; width: 128px; height: 128px; font-size: 22px; }
}


/* ---- title block ---------------------------------------------------------- */

.jg-pp__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--jg-ink-muted);
	font-size: 14.5px;
	font-weight: 600;
}

.jg-pp__crumbs a,
.jg-pp__crumbs a:visited { color: var(--jg-ink-muted); }
.jg-pp__crumbs a:hover { color: var(--jg-red); }

.jg-pp__title {
	margin: 10px 0 8px;
	font-size: clamp(44px, 5.6vw, 76px);
	line-height: .95;
}

.jg-pp__hook {
	margin: 0 0 22px;
	color: var(--jg-red);
	font-family: var(--jg-font-sub);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
	line-height: 1.2;
}

.jg-pp__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0 0 18px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--jg-ink);
}

.jg-pp__amount { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.jg-pp__unit { color: var(--jg-ink-muted); font-size: 16px; font-weight: 600; }

.jg-pp__desc {
	max-width: 52ch;
	margin: 0 0 18px;
	color: var(--jg-ink-muted);
	font-size: 17.5px;
	line-height: 1.65;
}

/* what comes with it */
.jg-pp__with {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.jg-pp__dot {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border-radius: var(--jg-radius-pill);
	background: var(--jg-card);
	box-shadow: inset 0 0 0 1.5px var(--jg-line);
	font-size: 14.5px;
	font-weight: 700;
}

.jg-pp__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--jg-ink-muted); }
.jg-pp__dot--egg::before { background: var(--jg-crust); }
.jg-pp__dot--resek::before { background: var(--jg-red); }
.jg-pp__dot--hot::before { background: #557a2a; }
.jg-pp__dot--free { box-shadow: inset 0 0 0 1.5px var(--jg-ink); }
.jg-pp__dot--free::before { background: var(--jg-ink); }

/* ---- form ------------------------------------------------------------------ */

.jg-pp__form { margin: 0; }
.jg-pp__form .jg-promise { margin-bottom: 14px; }
.jg-pp__form .jgo-extras { margin-bottom: 18px; }
.jg-pp__form .jgo-extra { background: var(--jg-card); border-color: var(--jg-line); }

.jg-pp__buy {
	display: flex;
	gap: 12px;
	align-items: center;
}

.jg-pp__qty input.jg-pp__qtyinput {
	width: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--jg-ink);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

.jg-pp__qty input.jg-pp__qtyinput::-webkit-outer-spin-button,
.jg-pp__qty input.jg-pp__qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

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

.jg-pp__qty button:disabled { opacity: .35; cursor: not-allowed; }

.jg-page .jg-pp__add.jg-btn {
	flex: 1;
	justify-content: space-between;
	min-height: 58px;
	padding: 0 24px;
	font-size: 17.5px;
}

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

.jg-pp__error { margin: 10px 0 0; color: var(--jg-red); font-weight: 600; }
.jg-pp__error[hidden] { display: none; }
.jg-pp__soldout { margin: 0 0 18px; font-weight: 700; }

/* the sticky buy bar: slides up once the inline add button scrolls out of
   view (site.js adds .is-shown), on every width. It drives the real form
   above it, so quantity, extras and the total stay in one place. */
.jg-pp__sticky {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 92;
	transform: translateY(110%);
	visibility: hidden;
	opacity: 0;
	background: color-mix(in srgb, var(--jg-paper) 94%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 -1px 0 var(--jg-line), 0 -18px 40px -28px rgba(36, 26, 23, .5);
	transition: transform .32s var(--jg-ease-out), opacity .32s var(--jg-ease-out), visibility .32s;
}

.jg-pp__sticky.is-shown { transform: none; visibility: visible; opacity: 1; }

.jg-pp__stickyrow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px var(--jg-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
}

.jg-pp__stickymedia { flex: none; }
.jg-pp__stickymedia img { display: block; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }

.jg-pp__stickyinfo { display: grid; gap: 1px; min-width: 0; margin-inline-end: auto; }
.jg-pp__stickyname { font-family: var(--jg-font-sub); font-size: 16px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-pp__stickyprice { color: var(--jg-ink-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.jg-pp__stickyqty { flex: none; }
.jg-pp__stickyqty output { min-width: 26px; font-size: 17px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

.jg-page .jg-pp__stickyadd.jg-btn { flex: none; min-height: 52px; gap: 12px; padding-inline: 24px; }
.jg-pp__stickytotal { font-variant-numeric: tabular-nums; }

/* tight phones: the thumbnail and name step back, price + qty + add stay */
@media (max-width: 480px) {
	.jg-pp__stickymedia { display: none; }
	.jg-pp__stickyname { display: none; }
	.jg-pp__stickyinfo { gap: 0; }
	.jg-page .jg-pp__stickyadd.jg-btn { padding-inline: 18px; }
	.jg-pp__stickyrow { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.jg-pp__sticky { transition: visibility .01s; }
}

/* ---- reassurance ------------------------------------------------------------ */

.jg-pp__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 22px 0 22px;
	padding: 0;
	list-style: none;
	color: var(--jg-ink-muted);
	font-size: 14.5px;
	font-weight: 600;
}

.jg-pp__trust li { display: inline-flex; align-items: center; gap: 7px; }
.jg-pp__trust .jg-icon { width: 18px; height: 18px; color: var(--jg-crust); }

/* ---- the rest of the menu ----------------------------------------------------- */

.jg-pp__more {
	margin-top: 64px;
	padding-block: 64px 72px;
	background: var(--jg-paper-2);
}

.jg-pp__more .jg-row { background: var(--jg-paper); }

/* "כבר כלול: …" note on the product page, for a dish with custom included text
   (the default brown-egg trio keeps its styled .jg-pp__with dots instead). */
.jg-pp__included {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 2px 0 6px;
	padding: 10px 14px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--jg-lime) 45%, var(--jg-card));
	color: var(--jg-ink);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
}