/* ==========================================================================
   bnjc/deli-order: the YOFI Deli order form, laid out like a good supermarket.

   Mobile first. Every colour, size and face is a theme.json token (WordPress publishes them as
   --wp--preset--*), so the form follows the palette: Ink Blue (navy) for type and lines, white cards on
   the page ground (Seafoam shows between them), Hove Green to mark a chosen product, Pomegranate-family
   berry for something that needs fixing. No gradients, no hex colours, no turquoise.

   The shop. A slot strip says when to collect and how to pay. A search box sits above a tile for every aisle
   (top-level category), each with an icon on its own colour. Opening an aisle shows its sub-categories as chips that narrow it and its products as cards, and a bar
   that follows the page (a left-hand list from 1100px) moves between aisles. A product with no photograph
   draws its aisle's icon on the aisle's colour, with the YOFI rosette faint behind, so the page looks finished
   today and improves product by product as photographs are added. A card has one-tap Add, which becomes a
   stepper. Phones get a row per product, wider screens a grid of cards.

   The order stays in view: a bar along the bottom of a phone ("3 items", Review and send) that opens upward,
   and from 960px a card beside the shop that follows the page. Without JavaScript only the server's markup is
   drawn: every aisle one under another, the number boxes are the controls, and the form posts.
   ========================================================================== */

.bnjc-deli {
	/* The aisle colours: a pale ground and a deep ink for the icon on it, from the palette. Plain is the fallback. */
	--deli-line: color-mix(in srgb, var(--wp--preset--color--navy) 16%, transparent);
	--deli-lift: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--navy) 10%, transparent), 0 8px 22px color-mix(in srgb, var(--wp--preset--color--navy) 7%, transparent);
	--tone-bg: color-mix(in srgb, var(--wp--preset--color--cream-deep) 70%, var(--wp--preset--color--white));
	--tone-ink: var(--wp--preset--color--navy);

	/* Where a sticky part of the page stops under the top: the sticky header, plus the YOFI section bar (56px) from 768px, where that bar
	   sticks too (below that it scrolls away). Without the bar's height the order panel and aisle list slid under it at 1280px. */
	--deli-stick: var(--header-h, 76px);

	position: relative;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
}

@media (min-width: 768px) {

	.bnjc-deli {
		--deli-stick: calc(var(--header-h, 76px) + 56px);
	}
}

.bnjc-deli-tone--poultry {
	--tone-bg: color-mix(in srgb, var(--wp--preset--color--gold) 46%, var(--wp--preset--color--white));
	--tone-ink: var(--wp--preset--color--yofi-rust);
}

.bnjc-deli-tone--meat {
	--tone-bg: color-mix(in srgb, var(--wp--preset--color--berry) 13%, var(--wp--preset--color--white));
	--tone-ink: var(--wp--preset--color--berry);
}

.bnjc-deli-tone--fish {
	--tone-bg: color-mix(in srgb, var(--wp--preset--color--yofi-blue) 38%, var(--wp--preset--color--white));
	--tone-ink: var(--wp--preset--color--yofi-slate);
}

.bnjc-deli-tone--fresh {
	--tone-bg: color-mix(in srgb, var(--wp--preset--color--teal) 42%, var(--wp--preset--color--white));
	--tone-ink: var(--wp--preset--color--hove-green);
}

.bnjc-deli-tone--bakery {
	--tone-bg: var(--wp--preset--color--cream-deep);
	--tone-ink: var(--wp--preset--color--yofi-rust);
}

.bnjc-deli-tone--frozen {
	--tone-bg: color-mix(in srgb, var(--wp--preset--color--pink) 48%, var(--wp--preset--color--white));
	--tone-ink: var(--wp--preset--color--navy);
}

.bnjc-deli-tone--pantry {
	--tone-bg: color-mix(in srgb, var(--wp--preset--color--yofi-terracotta) 30%, var(--wp--preset--color--white));
	--tone-ink: var(--wp--preset--color--yofi-rust);
}

.bnjc-deli [hidden] {
	display: none !important;
}

.bnjc-deli *,
.bnjc-deli *::before,
.bnjc-deli *::after {
	box-sizing: border-box;
}

/* Every icon is an outline in the colour of the words beside it. */
.bnjc-deli__icon,
.bnjc-deli__fact-icon,
.bnjc-deli__btn-icon {
	display: block;
	flex: 0 0 auto;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Notices: the editor's message, skipped Thursdays, closed ------------------------------ */
.bnjc-deli__message,
.bnjc-deli__skipped,
.bnjc-deli__closed,
.bnjc-deli__errors--server {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--xs, 2px);
}

.bnjc-deli__message {
	border-inline-start-width: 8px;
	border-inline-start-color: var(--wp--preset--color--yofi-orange);
}

.bnjc-deli__skipped {
	border-style: dashed;
}

.bnjc-deli__closed p,
.bnjc-deli__errors p {
	margin: 0;
}

.bnjc-deli__closed p + p {
	margin-block-start: 6px;
}

.bnjc-deli__closed-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.1;
}

.bnjc-deli__terms {
	margin: 0;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- The collection slot: day, deadline, payment ---------------------------------------------- */
.bnjc-deli__when {
	margin: 0 0 20px;
	padding: 6px 16px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--deli-line);
	border-block-start: 4px solid var(--wp--preset--color--hove-green);
	border-radius: var(--wp--custom--radius--xs, 2px);
	box-shadow: var(--deli-lift);
}

.bnjc-deli__when.is-changed {
	border-block-start-color: var(--wp--preset--color--berry);
	box-shadow: 0 0 0 3px var(--wp--preset--color--berry);
}

.bnjc-deli__facts {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnjc-deli__fact {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-block: 12px;
	border-block-end: 1px solid var(--deli-line);
}

.bnjc-deli__fact:last-child {
	border-block-end: 0;
}

.bnjc-deli__fact > div {
	min-inline-size: 0;
}

.bnjc-deli__fact p {
	margin: 0;
}

.bnjc-deli__fact-icon {
	inline-size: 40px;
	block-size: 40px;
	padding: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--hove-green) 11%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--hove-green);
}

@media (max-width: 759px) {

	.bnjc-deli__fact {
		gap: 12px;
		padding-block: 10px;
	}

	.bnjc-deli__fact-icon {
		inline-size: 36px;
		block-size: 36px;
		padding: 7px;
	}
}

.bnjc-deli__when-main {
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1.3;
}

.bnjc-deli__when-by {
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1.3;
}

.bnjc-deli__fact .bnjc-deli__terms {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
}

.bnjc-deli__when-sub {
	margin-block-start: 2px !important;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 760px) {

	.bnjc-deli__when {
		padding-block: 4px;
	}

	.bnjc-deli__facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
	}

	.bnjc-deli__fact {
		padding-block: 14px;
		border-block-end: 0;
	}

	.bnjc-deli__fact + .bnjc-deli__fact {
		padding-inline-start: 24px;
		border-inline-start: 1px solid var(--deli-line);
	}
}

/* ---- Layout of the enhanced form ------------------------------------------------------------ */
.bnjc-deli__form.bnjc-deli__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.bnjc-deli__main {
	min-inline-size: 0;
}

@media (min-width: 960px) {

	.bnjc-deli__form.bnjc-deli__layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: clamp(28px, 3.4vw, 48px);
	}

	.bnjc-deli__form.bnjc-deli__layout > .bnjc-deli__summary {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ---- Search -------------------------------------------------------------------------------- */
.bnjc-deli__tools {
	margin-block-end: 20px;
}

.bnjc-deli__search-label {
	display: block;
	margin-block-end: 6px;
	font-weight: 600;
}

.bnjc-deli__search {
	position: relative;
	display: flex;
	gap: 8px;
}

.bnjc-deli__search-field {
	position: relative;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.bnjc-deli__search-icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 16px;
	inline-size: 24px;
	block-size: 24px;
	margin-block-start: -12px;
	color: var(--wp--preset--color--navy);
	pointer-events: none;
}

.bnjc-deli .bnjc-deli__search-input {
	inline-size: 100%;
	min-block-size: 52px;
	margin: 0;
	padding: 0 16px 0 52px;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font: inherit;
}

.bnjc-deli .bnjc-deli__search-input::placeholder {
	color: var(--wp--preset--color--grey-700);
	opacity: 1;
}

.bnjc-deli .bnjc-deli__search-clear {
	flex: 0 0 auto;
	min-block-size: 52px;
	min-inline-size: 48px;
	padding: 0 20px;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.bnjc-deli__found {
	margin: 8px 0 0;
	min-block-size: 1.4em;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Your last order: a shelf for the person who orders the same things again ----------------- */
.bnjc-deli__shelf {
	display: grid;
	gap: 6px 16px;
	margin-block-end: 24px;
	padding: 16px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--deli-line);
	border-inline-start: 4px solid var(--wp--preset--color--hove-green);
	border-radius: var(--wp--custom--radius--xs, 2px);
	box-shadow: var(--deli-lift);
}

.bnjc-deli__shelf-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.1;
}

.bnjc-deli__shelf-title .bnjc-deli__icon {
	inline-size: 26px;
	block-size: 26px;
	color: var(--wp--preset--color--hove-green);
}

.bnjc-deli__shelf-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnjc-deli__shelf-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-block: 6px;
	border-block-end: 1px solid var(--deli-line);
}

.bnjc-deli__shelf-list li:last-child {
	border-block-end: 0;
}

.bnjc-deli__shelf-note {
	margin: 0;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-deli__shelf-add {
	justify-self: start;
	margin-block-start: 6px;
}

/* ---- Aisle tiles: where the shopping starts ---------------------------------------------------- */
.bnjc-deli__aisles {
	margin-block-end: 24px;
}

.bnjc-deli__aisles-title {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.1;
	text-transform: none;
}

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

.bnjc-deli a.bnjc-deli__aisle {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	block-size: 100%;
	min-block-size: 116px;
	padding: 12px;
	background: var(--tone-bg);
	border: 1px solid color-mix(in srgb, var(--tone-ink) 22%, transparent);
	border-radius: var(--wp--custom--radius--xs, 2px);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: transform var(--wp--custom--motion--dur-fast, 140ms) var(--wp--custom--motion--ease-out, ease-out), box-shadow var(--wp--custom--motion--dur-fast, 140ms) var(--wp--custom--motion--ease-out, ease-out);
}

.bnjc-deli a.bnjc-deli__aisle:hover {
	transform: translateY(-2px);
	box-shadow: var(--deli-lift);
}

.bnjc-deli__aisle-icon {
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--tone-ink);
}

.bnjc-deli__aisle-icon .bnjc-deli__icon {
	inline-size: 28px;
	block-size: 28px;
}

.bnjc-deli__aisle-name {
	display: block;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.bnjc-deli__aisle-count {
	display: block;
	margin-block-start: 2px;
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 640px) {

	.bnjc-deli__aisle-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (min-width: 1100px) {

	.bnjc-deli__aisle-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---- The aisle bar: follows the page on a phone, a list down the left from 1100px ------------- */
.bnjc-deli__aislebar {
	position: sticky;
	inset-block-start: var(--deli-stick);
	z-index: 19; /* under the section bar (20), which now sits above it instead of the other way round */
	margin: 0 0 16px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--deli-line);
	border-radius: var(--wp--custom--radius--xs, 2px);
	box-shadow: var(--deli-lift);
}

.bnjc-deli .bnjc-deli__aislebar-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	inline-size: 100%;
	min-block-size: 56px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-weight: 700;
	text-align: start;
	cursor: pointer;
}

.bnjc-deli__aislebar-btn .bnjc-deli__icon {
	inline-size: 24px;
	block-size: 24px;
}

.bnjc-deli__aislebar-now {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.bnjc-deli__aislebar-lead {
	font-weight: 400;
}

.bnjc-deli__aislebar-chev {
	transition: transform var(--wp--custom--motion--dur-fast, 140ms) var(--wp--custom--motion--ease-out, ease-out);
}

.bnjc-deli__aislebar.is-open .bnjc-deli__aislebar-chev {
	transform: rotate(180deg);
}

.bnjc-deli__aisle-menu {
	display: none;
	position: absolute;
	inset-inline: -1px;
	inset-block-start: 100%;
	max-block-size: calc(100vh - var(--header-h, 76px) - 170px); /* clear of the order bar along the bottom of a phone */
	margin-block-start: 4px;
	padding: 6px;
	overflow: auto;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--deli-line);
	border-radius: var(--wp--custom--radius--xs, 2px);
	box-shadow: var(--deli-lift);
}

.bnjc-deli__aislebar.is-open .bnjc-deli__aisle-menu {
	display: block;
}

.bnjc-deli__aisle-menu ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnjc-deli a.bnjc-deli__menu-link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: 48px;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--xs, 2px);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.bnjc-deli a.bnjc-deli__menu-link:hover {
	background: var(--wp--custom--color--hover-wash, color-mix(in srgb, var(--wp--preset--color--navy) 6%, transparent));
}

.bnjc-deli a.bnjc-deli__menu-link[aria-current="true"] {
	background: var(--tone-bg);
	font-weight: 700;
}

.bnjc-deli__menu-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	background: var(--tone-bg);
	color: var(--tone-ink);
}

.bnjc-deli__menu-icon .bnjc-deli__icon {
	inline-size: 20px;
	block-size: 20px;
}

.bnjc-deli__menu-name {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.bnjc-deli__menu-count {
	flex: 0 0 auto;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 1100px) {

	/* In an aisle the page has three columns: the aisles, the products, the order. The list is always open. */
	.bnjc-deli.in-aisle:not(.is-searching) .bnjc-deli__main {
		display: grid;
		grid-template-columns: 232px minmax(0, 1fr);
		column-gap: 32px;
		align-items: start;
	}

	.bnjc-deli.in-aisle:not(.is-searching) .bnjc-deli__main > * {
		grid-column: 2;
	}

	.bnjc-deli.in-aisle:not(.is-searching) .bnjc-deli__main > .bnjc-deli__aislebar {
		grid-column: 1;
		grid-row: 1 / span 12;
		align-self: start;
		inset-block-start: calc(var(--deli-stick) + 16px);
		margin: 0;
		box-shadow: none;
	}

	.bnjc-deli.in-aisle .bnjc-deli__aislebar-btn {
		display: none;
	}

	.bnjc-deli.in-aisle .bnjc-deli__aisle-menu {
		display: block;
		position: static;
		max-block-size: calc(100vh - var(--deli-stick) - 48px);
		margin: 0;
		border: 0;
		box-shadow: none;
	}
}

/* What the script's state classes show: the tiles at the start, the bar and the aisle once one is open, neither while a search is on. */
.bnjc-deli.in-aisle .bnjc-deli__aisles,
.bnjc-deli.is-searching .bnjc-deli__aisles,
.bnjc-deli.is-home .bnjc-deli__aislebar,
.bnjc-deli.is-searching .bnjc-deli__aislebar,
.bnjc-deli.in-aisle .bnjc-deli__shelf,
.bnjc-deli.is-searching .bnjc-deli__shelf {
	display: none;
}

/* A tile and a menu line show what is chosen in that aisle, in words as well as colour. */
.bnjc-deli__aisle-chosen {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--hove-green);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.5;
}

.bnjc-deli a.bnjc-deli__aisle {
	position: relative;
}

.bnjc-deli__menu-count.is-chosen {
	color: var(--wp--preset--color--hove-green);
	font-weight: 700;
}

.bnjc-deli__cat,
.bnjc-deli__tools {
	scroll-margin-block-start: calc(var(--header-h, 76px) + 80px);
}

.bnjc-deli__tools {
	scroll-margin-block-start: calc(var(--header-h, 76px) + 16px);
}

@media (min-width: 1100px) {

	.bnjc-deli__cat {
		scroll-margin-block-start: calc(var(--header-h, 76px) + 16px);
	}
}

/* ---- Aisles and products ------------------------------------------------------------------------- */
.bnjc-deli__cats {
	display: grid;
	gap: 28px;
}

.bnjc-deli__cats:focus {
	outline: none;
}

.bnjc-deli__cat-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin-block-end: 14px;
}

.bnjc-deli__cat-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	background: var(--tone-bg);
	color: var(--tone-ink);
}

.bnjc-deli__cat-icon .bnjc-deli__icon {
	inline-size: 30px;
	block-size: 30px;
}

.bnjc-deli__cat-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.1;
	text-transform: none;
}

.bnjc-deli__cat-title:focus {
	outline: none;
}

.bnjc-deli__cat-count {
	flex-basis: 100%;
	margin: 0;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 400px) {

	.bnjc-deli__cat-count {
		flex-basis: auto;
		margin-inline-start: auto;
	}
}

/* ---- Inside an aisle: chips for its sub-categories ------------------------------------------------ */
@media (max-width: 1099px) {

	.bnjc-deli.at-details .bnjc-deli__aislebar {
		display: none;
	}
}

.bnjc-deli__cat,
.bnjc-deli__chips {
	min-inline-size: 0; /* a long row of chips scrolls inside its own box instead of making the page wider than the phone */
}

.bnjc-deli__chips {
	max-inline-size: 100%;
	margin: 0 0 16px;
}

.bnjc-deli__chip-list {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
	padding: 2px 2px 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.bnjc-deli__chip-list > li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.bnjc-deli a.bnjc-deli__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 6px 16px;
	background: var(--wp--preset--color--white);
	border: 1px solid color-mix(in srgb, var(--tone-ink) 40%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.bnjc-deli a.bnjc-deli__chip:hover {
	background: var(--tone-bg);
}

.bnjc-deli a.bnjc-deli__chip[aria-pressed="true"] {
	background: var(--tone-ink);
	border-color: var(--tone-ink);
	color: var(--wp--preset--color--white);
}

.bnjc-deli__chip-count {
	font-weight: 400;
	opacity: 0.85;
}

@media (min-width: 760px) {

	.bnjc-deli__chip-list {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

.bnjc-deli__sub + .bnjc-deli__sub {
	margin-block-start: 22px;
}

.bnjc-deli__sub-title {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1.15;
	text-transform: none;
	scroll-margin-block-start: calc(var(--header-h, 76px) + 72px);
}

.bnjc-deli__sub-title:focus {
	outline: none;
}

/* With one chip chosen the block's own heading is the chip, so it is not said twice. */
.bnjc-deli__cat.is-filtered .bnjc-deli__sub-title {
	display: none;
}

.bnjc-deli__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phone: a row. The picture on the left, the name and the Add button beside it. */
.bnjc-deli__item {
	position: relative;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	grid-template-areas:
		"pic info"
		"pic qty";
	align-content: center;
	gap: 6px 14px;
	padding: 12px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--deli-line);
	border-radius: var(--wp--custom--radius--xs, 2px);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent);
}

.bnjc-deli__item {
	/* A control brought into view by the keyboard or an error is scrolled clear of the header, the aisle bar and the order bar. */
	scroll-margin-block: calc(var(--header-h, 76px) + 80px) 104px;
}

.bnjc-deli__item.is-chosen {
	border-color: var(--wp--preset--color--hove-green);
	box-shadow: 0 0 0 2px var(--wp--preset--color--hove-green);
	background: color-mix(in srgb, var(--wp--preset--color--hove-green) 6%, var(--wp--preset--color--white));
}

.bnjc-deli__item.is-unavailable {
	opacity: 0.75;
}

/* The photograph, or the aisle's icon on the aisle's colour. Either way the same square, so a list never jumps. */
.bnjc-deli__pic {
	position: relative;
	grid-area: pic;
	align-self: center;
	inline-size: 88px;
	block-size: 88px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xs, 2px);
	background: var(--tone-bg);
}

.bnjc-deli__pic .bnjc-deli__img,
.bnjc-deli__pic img {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: var(--fx, 50%) var(--fy, 50%); /* The point staff chose as the photo's centre (Recrop); the middle when none. */
}

/* A photo that is clearly tall or wide is shown whole, never cut: it sits on a soft, enlarged copy of itself (the address is in --bg, so nothing is downloaded twice). */
.bnjc-deli__pic.is-whole img {
	object-fit: contain;
}

.bnjc-deli__pic.is-whole::before {
	content: "";
	position: absolute;
	inset: -12%;
	background: var(--bg, none) center / cover no-repeat, var(--tone-bg);
	filter: blur(14px) saturate(1.1);
	opacity: 0.55;
}

.bnjc-deli__pic.is-placeholder {
	--disc: 62%;

	display: grid;
	place-items: center;
	color: var(--tone-ink);
}

/* A white disc under the icon, so it reads at a glance on any of the colours. */
.bnjc-deli__pic.is-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: var(--disc);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	z-index: 1;
}

.bnjc-deli__pic.is-placeholder .bnjc-deli__icon {
	position: relative;
	z-index: 2;
	inline-size: calc(var(--disc) * 0.56);
	block-size: auto;
	aspect-ratio: 1;
}

/* The rosette is the YOFI mark; here it is a quiet flower in the aisle's own colour behind the icon. */
.bnjc-deli__pic.is-placeholder .bnjc-rosette {
	position: absolute;
	inset-block-start: -4%;
	inset-inline-start: -4%;
	inline-size: 108%;
	block-size: 108%;
	--rosette-petal: color-mix(in srgb, var(--tone-ink) 6%, var(--tone-bg));
	--rosette-small: color-mix(in srgb, var(--tone-ink) 3%, var(--tone-bg));
	--rosette-heart: color-mix(in srgb, var(--tone-ink) 8%, var(--tone-bg));
}

.bnjc-rosette {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.bnjc-rosette__petals {
	fill: var(--rosette-petal, var(--wp--preset--color--yofi-orange));
}

.bnjc-rosette__small {
	fill: var(--rosette-small, var(--wp--preset--color--yofi-terracotta));
}

.bnjc-rosette__heart {
	fill: var(--rosette-heart, var(--wp--preset--color--yofi-rust));
}

.bnjc-deli__info {
	grid-area: info;
	align-self: end;
	min-inline-size: 0;
}

.bnjc-deli__name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.bnjc-deli__pack {
	display: block;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

/* "In your order" says in words what the green frame says in colour. */
.bnjc-deli__tag {
	display: none;
	align-items: center;
	gap: 6px;
	margin-block-start: 2px;
	color: var(--wp--preset--color--hove-green);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.bnjc-deli__tag::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 14px;
	block-size: 14px;
	background: currentcolor;
	clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}

.bnjc-deli__item.is-chosen .bnjc-deli__tag {
	display: flex;
}

.bnjc-deli__item-err {
	display: block;
	margin-block-start: 4px;
	padding-inline-start: 8px;
	border-inline-start: 4px solid var(--wp--preset--color--berry);
	color: var(--wp--preset--color--berry);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Add, then the stepper: round minus and plus around the real number box. */
.bnjc-deli__qty {
	grid-area: qty;
	align-self: start;
	display: flex;
	align-items: center;
	gap: 6px;
	min-inline-size: 0;
}

.bnjc-deli .bnjc-deli__num {
	inline-size: 4.5rem;
	min-inline-size: 0;
	min-block-size: 44px;
	margin: 0;
	padding: 0 4px;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--xs, 2px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-weight: 600;
	text-align: center;
}

.bnjc-deli__form.is-shop .bnjc-deli__num {
	appearance: textfield;
	-moz-appearance: textfield;
	inline-size: 3.5rem;
}

.bnjc-deli__form.is-shop .bnjc-deli__num::-webkit-outer-spin-button,
.bnjc-deli__form.is-shop .bnjc-deli__num::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
}

.bnjc-deli .bnjc-deli__step {
	display: grid;
	place-items: center;
	flex: 0 0 44px;
	inline-size: 44px;
	block-size: 44px;
	min-block-size: 44px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.bnjc-deli .bnjc-deli__step:hover:not(:disabled) {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.bnjc-deli .bnjc-deli__step:disabled {
	border-color: color-mix(in srgb, var(--wp--preset--color--navy) 35%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--navy) 45%, transparent);
	cursor: not-allowed;
}

/* The one-tap Add (drawn by the script). While nothing is chosen it stands in for the stepper. */
.bnjc-deli .bnjc-deli__add,
.bnjc-deli .bnjc-deli__shelf-add,
.bnjc-deli .bnjc-deli__aisle-next,
.bnjc-deli .bnjc-deli__aisle-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 44px;
	margin: 0;
	padding: 0 20px;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.bnjc-deli .bnjc-deli__add:hover,
.bnjc-deli .bnjc-deli__shelf-add:hover,
.bnjc-deli .bnjc-deli__aisle-next:hover,
.bnjc-deli .bnjc-deli__aisle-all:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.bnjc-deli .bnjc-deli__add:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bnjc-deli__btn-icon {
	inline-size: 20px;
	block-size: 20px;
	stroke-width: 2.25;
}

.bnjc-deli__form.is-shop .bnjc-deli__item:not(.is-chosen):not(.is-typing) .bnjc-deli__step,
.bnjc-deli__form.is-shop .bnjc-deli__item:not(.is-chosen):not(.is-typing) .bnjc-deli__num,
.bnjc-deli__form.is-shop .bnjc-deli__item:is(.is-chosen, .is-typing) .bnjc-deli__add {
	display: none;
}

/* The foot of an aisle: on to the next one, or back to all of them. */
.bnjc-deli__cat-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 16px;
}

/* A search shows matching products from every aisle under each aisle's name. */
.bnjc-deli.is-searching .bnjc-deli__cat-foot {
	display: none;
}

@media (min-width: 600px) {

	/* Wider: a card. The picture across the top, the name, then Add along the bottom. */
	.bnjc-deli__list {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
		gap: 14px;
	}

	.bnjc-deli__item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"pic"
			"info"
			"qty";
		grid-template-rows: auto 1fr auto; /* the buttons line up along the foot of every card in a row */
		align-content: stretch;
		gap: 10px;
		padding: 0 0 14px;
		overflow: hidden;
	}

	.bnjc-deli__pic {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 1 / 1; /* One square frame for every shape of photograph, so a row of cards lines up and a photo never changes frame between phone and desktop. */
		border-radius: 0;
	}

	.bnjc-deli__pic.is-placeholder {
		--disc: 38%;
	}

	.bnjc-deli__info {
		align-self: start;
		padding-inline: 14px;
	}

	.bnjc-deli__qty {
		align-self: end;
		justify-content: space-between;
		padding-inline: 14px;
	}

	.bnjc-deli__form.is-shop .bnjc-deli__add {
		inline-size: 100%;
	}

	.bnjc-deli__form.is-shop .bnjc-deli__num {
		flex: 1 1 auto;
		inline-size: auto;
	}
}

/* ---- Your details ---------------------------------------------------------------------------- */
.bnjc-deli__details {
	margin: 28px 0 0;
	padding: clamp(16px, 3vw, 28px);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--deli-line);
	border-block-start: 4px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--xs, 2px);
	box-shadow: var(--deli-lift);
	min-inline-size: 0;
	scroll-margin-block-start: calc(var(--header-h, 76px) + 16px);
}

.bnjc-deli__details-title {
	padding: 0 6px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.1;
}

.bnjc-deli__field {
	max-inline-size: 42rem;
	margin-block-start: 16px;
}

.bnjc-deli__label {
	display: block;
	font-weight: 600;
}

.bnjc-deli__req {
	color: var(--wp--preset--color--grey-700);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-deli__hint {
	margin: 2px 0 6px;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-deli .bnjc-deli__input {
	display: block;
	inline-size: 100%;
	min-block-size: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--xs, 2px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font: inherit;
}

.bnjc-deli .bnjc-deli__textarea {
	min-block-size: 96px;
	resize: vertical;
}

.bnjc-deli .bnjc-deli__input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--berry);
	border-width: 4px;
}

.bnjc-deli__err {
	margin: 6px 0 0;
	padding-inline-start: 8px;
	border-inline-start: 4px solid var(--wp--preset--color--berry);
	color: var(--wp--preset--color--berry);
	font-weight: 600;
}

.bnjc-deli__field--check {
	margin-block-start: 20px;
}

.bnjc-deli__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-block-size: 44px;
	cursor: pointer;
}

.bnjc-deli__check input {
	flex: 0 0 24px;
	inline-size: 24px;
	block-size: 24px;
	margin: 10px 0 0;
	accent-color: var(--wp--preset--color--navy);
}

/* The field only a robot fills in: out of sight and out of the tab order, but still in the page. */
.bnjc-deli__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Send ------------------------------------------------------------------------------------- */
.bnjc-deli__send {
	margin-block-start: 24px;
	max-inline-size: 42rem;
}

.bnjc-deli .bnjc-deli__submit,
.bnjc-deli a.bnjc-deli__review,
.bnjc-deli .bnjc-deli__again {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	min-inline-size: 48px;
	padding: 0 28px;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.bnjc-deli .bnjc-deli__submit {
	margin-block-start: 14px;
}

.bnjc-deli .bnjc-deli__submit:disabled {
	opacity: 0.7;
	cursor: progress;
}

.bnjc-deli__errors {
	margin-block-start: 16px;
	padding: 12px 16px;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--berry);
	border-inline-start-width: 8px;
	border-radius: var(--wp--custom--radius--xs, 2px);
	color: var(--wp--preset--color--navy);
}

.bnjc-deli__errors-lead {
	margin: 0;
	font-weight: 700;
}

.bnjc-deli__errors-list,
.bnjc-deli__errors--server ul {
	margin: 8px 0 0;
	padding-inline-start: 20px;
}

.bnjc-deli__errors a {
	display: inline-block;
	min-block-size: 44px;
	line-height: 44px;
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

.bnjc-deli__errors--server {
	border-color: var(--wp--preset--color--berry);
	border-inline-start-width: 8px;
}

.bnjc-deli__errors:focus {
	outline: none;
}

/* ---- Confirmation ---------------------------------------------------------------------------- */
.bnjc-deli__done {
	padding: clamp(18px, 3vw, 32px);
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--hove-green);
	border-inline-start-width: 8px;
	border-radius: var(--wp--custom--radius--xs, 2px);
}

.bnjc-deli__done:focus {
	outline: none;
}

.bnjc-deli__done-title {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.1;
}

.bnjc-deli__ref {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--heading-s);
}

.bnjc-deli__ref strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-m);
	letter-spacing: 0.02em;
}

.bnjc-deli__done-lines {
	margin: 12px 0;
	padding: 0;
	list-style: none;
	max-inline-size: 34rem;
}

.bnjc-deli__done-lines li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-block: 6px;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 14%, transparent);
}

.bnjc-deli__done-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.bnjc-deli .bnjc-deli__print {
	min-block-size: 48px;
	min-inline-size: 48px;
	padding: 0 20px;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ---- Your order: a card beside the shop ... ----------------------------------------------------- */
.bnjc-deli__summary {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.bnjc-deli__summary-panel {
	padding: 16px;
}

.bnjc-deli__summary-title {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.1;
}

/* The slot, kept beside the order the way a supermarket keeps the delivery slot beside the trolley. */
.bnjc-deli__summary-collect {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	padding-block-end: 12px;
	border-block-end: 1px solid var(--deli-line);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.bnjc-deli__summary-collect .bnjc-deli__icon {
	inline-size: 22px;
	block-size: 22px;
	margin-block-start: 1px;
	color: var(--wp--preset--color--hove-green);
}

.bnjc-deli__summary-list {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.bnjc-deli__summary-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 4px 10px;
	border-block-end: 1px solid var(--deli-line);
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-deli__summary-name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.bnjc-deli__summary-qty {
	white-space: nowrap;
	font-weight: 700;
}

.bnjc-deli__summary-item.is-unavailable .bnjc-deli__summary-name {
	text-decoration: line-through;
}

.bnjc-deli .bnjc-deli__summary-remove {
	display: inline-grid;
	place-items: center;
	min-block-size: 44px;
	min-inline-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

.bnjc-deli .bnjc-deli__summary-remove:hover {
	background: color-mix(in srgb, var(--wp--preset--color--berry) 12%, transparent);
	color: var(--wp--preset--color--berry);
}

.bnjc-deli__summary-remove .bnjc-deli__icon {
	inline-size: 20px;
	block-size: 20px;
}

/* "Empty my order": one tap clears everything (shown when there is more than one item). */
.bnjc-deli .bnjc-deli__empty-order {
	display: inline-block;
	min-block-size: 44px;
	margin: 0 0 4px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	cursor: pointer;
}

.bnjc-deli__summary-empty {
	margin: 4px 0 12px;
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-deli__summary-panel a.bnjc-deli__review {
	inline-size: 100%;
}

.bnjc-deli__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 960px) {

	.bnjc-deli__summary {
		position: sticky;
		inset-block-start: calc(var(--deli-stick) + 16px);
		max-block-size: calc(100vh - var(--deli-stick) - 32px);
		overflow: auto;
		border: 1px solid var(--deli-line);
		border-block-start: 4px solid var(--wp--preset--color--navy);
		border-radius: var(--wp--custom--radius--xs, 2px);
		box-shadow: var(--deli-lift);
	}

	.bnjc-deli__bar {
		display: none;
	}
}

/* ... and a bar along the bottom of a phone, opening upward. */
@media (max-width: 959px) {

	.bnjc-deli__summary {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 60;
		border-block-start: 2px solid var(--wp--preset--color--navy);
		box-shadow: 0 -6px 18px color-mix(in srgb, var(--wp--preset--color--navy) 22%, transparent);
	}

	.bnjc-deli__summary.is-empty,
	.bnjc-deli__summary.at-details {
		display: none;
	}

	.bnjc-deli__summary-panel {
		display: none;
	}

	.bnjc-deli__summary.is-open .bnjc-deli__summary-panel {
		display: block;
		max-block-size: min(60vh, 28rem);
		overflow: auto;
		border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 22%, transparent);
	}

	.bnjc-deli__summary-panel a.bnjc-deli__review {
		display: none;
	}

	.bnjc-deli__bar {
		display: flex;
		align-items: stretch;
		gap: 10px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
	}

	.bnjc-deli .bnjc-deli__bar-toggle {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 1.5rem;
		align-items: center;
		gap: 12px;
		flex: 1 1 auto;
		min-block-size: 52px;
		margin: 0;
		padding: 0 4px;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--navy);
		font: inherit;
		font-weight: 700;
		line-height: 1.2;
		text-align: start;
		cursor: pointer;
	}

	.bnjc-deli__bar-chev::before {
		content: "";
		display: block;
		inline-size: 0.6rem;
		block-size: 0.6rem;
		margin: 0.3rem auto 0;
		border-block-start: 2px solid currentcolor;
		border-inline-end: 2px solid currentcolor;
		transform: rotate(-45deg);
	}

	.bnjc-deli__summary.is-open .bnjc-deli__bar-chev::before {
		margin-block-start: 0;
		transform: rotate(135deg);
	}

	.bnjc-deli a.bnjc-deli__review {
		flex: 0 0 auto;
		padding-inline: 20px;
	}

	/* Room under the page for the bar, so the last line of the page is never hidden behind it, and a control brought into view
	   by the keyboard is scrolled clear of it. */
	html.has-deli-bar body {
		padding-block-end: 92px;
	}

	html.has-deli-bar {
		scroll-padding-block-end: 104px;
	}
}

/* ---- Focus: the same two-colour ring as everywhere else on the site ---------------------------- */
.bnjc-deli :is(.bnjc-deli__step, .bnjc-deli__num, .bnjc-deli__add, .bnjc-deli__search-input, .bnjc-deli__search-clear, .bnjc-deli__input, .bnjc-deli__submit, .bnjc-deli__bar-toggle, .bnjc-deli__summary-remove, .bnjc-deli__empty-order, .bnjc-deli__review, .bnjc-deli__again, .bnjc-deli__print, .bnjc-deli__check input, .bnjc-deli__errors a, .bnjc-deli__aisle, .bnjc-deli__aislebar-btn, .bnjc-deli__menu-link, .bnjc-deli__shelf-add, .bnjc-deli__aisle-next, .bnjc-deli__aisle-all):focus-visible {
	outline: 2px solid var(--focus-ring, var(--wp--preset--color--navy));
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--focus-halo, var(--wp--preset--color--white));
}

@media (prefers-reduced-motion: reduce) {

	.bnjc-deli * {
		scroll-behavior: auto;
		transition: none !important;
	}

	.bnjc-deli a.bnjc-deli__aisle:hover {
		transform: none;
	}
}

/* The logo for a printed confirmation is never seen on screen. */
.bnjc-deli__print-head {
	display: none;
}

@media print {

	.bnjc-deli__summary,
	.bnjc-deli__print,
	.bnjc-deli__again,
	.bnjc-deli__aislebar {
		display: none !important;
	}

	/* "Print this page" on a confirmed order prints the order and nothing else (3 Nov 2026): not the header, menu, footer,
	   basket, aisles or the rest of the page. Everything is hidden except the confirmation, the logo above it and the elements
	   that contain them, so it needs no list of what the theme puts around the block. It only applies while a confirmation is
	   on the page (the box is hidden until an order is placed), so printing the ordering page itself is unchanged. The staff
	   print page (PrintPage.php) is its own document and is not affected. */
	body:has(.bnjc-deli__done:not([hidden])) *:not(:has(.bnjc-deli__done:not([hidden]))):not(.bnjc-deli__done):not(.bnjc-deli__done *):not(.bnjc-deli__print-head):not(.bnjc-deli__print-head *) {
		display: none !important;
	}

	/* The elements around the confirmation lose their spacing, ground, frame and fixed positions, so it starts at the top
	   of the page, in the page's own margins. */
	:is(html, body, body *):has(.bnjc-deli__done:not([hidden])) {
		position: static !important;
		inset: auto !important;
		display: block !important;
		inline-size: auto !important;
		max-inline-size: none !important;
		block-size: auto !important;
		min-block-size: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: #fff !important;
		box-shadow: none !important;
		transform: none !important;
		overflow: visible !important;
	}

	body:has(.bnjc-deli__done:not([hidden])) .bnjc-deli__print-head {
		display: block !important;
		margin: 0 0 10mm !important;
		padding: 0 !important;
	}

	.bnjc-deli__print-head img {
		display: block;
		inline-size: 30mm;
		block-size: auto;
	}

	/* Black on white, the body font, sizes in points. */
	.bnjc-deli__done,
	.bnjc-deli__done * {
		color: #000 !important;
		background: none !important;
		box-shadow: none !important;
		font-family: var(--wp--preset--font-family--body, Heebo, Arial, sans-serif) !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		text-shadow: none !important;
	}

	.bnjc-deli__done {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		font-size: 12pt;
		line-height: 1.45;
	}

	.bnjc-deli__done p {
		margin: 0 0 8pt;
		orphans: 3;
		widows: 3;
	}

	.bnjc-deli__done-title {
		margin: 0 0 10pt;
		font-size: 22pt;
		font-weight: 700;
		line-height: 1.15;
	}

	.bnjc-deli__ref {
		margin: 0 0 12pt;
		font-size: 13pt;
	}

	.bnjc-deli__ref strong {
		font-size: 18pt;
		font-weight: 700;
	}

	.bnjc-deli__done-lines {
		max-inline-size: none;
		margin: 10pt 0 14pt;
		padding: 0;
		border-block-start: 1pt solid #000;
		break-inside: avoid;
	}

	.bnjc-deli__done-lines li {
		padding-block: 5pt;
		border-block-end: 0.5pt solid #000;
	}

	/* No buttons, and no web address printed after a link. */
	.bnjc-deli__done-actions,
	.bnjc-deli__done .bnjc-deli__again,
	.bnjc-deli__done .bnjc-deli__print,
	.bnjc-deli__done p:has(> .bnjc-deli__again) {
		display: none !important;
	}

	.bnjc-deli__done a {
		text-decoration: none;
	}

	.bnjc-deli__done a[href]::after {
		content: none !important;
	}
}