/*!
 * AOC Order Desk
 * Every rule is scoped under .aocod or .aocod-search so nothing leaks into the
 * host theme, and every colour comes from a token the PHP contrast checked
 * before printing it.
 */

/* ═══════════ 1. BASE ═══════════ */

.aocod,
.aocod-search {
	--aocod-gap: clamp(14px, 2vw, 22px);
	--aocod-ease: cubic-bezier(.22, .61, .36, 1);
	box-sizing: border-box;
	font-family: var(--aocod-body, inherit);
	color: var(--aocod-text);
	-webkit-font-smoothing: antialiased;
}

.aocod *,
.aocod *::before,
.aocod *::after,
.aocod-search *,
.aocod-search *::before,
.aocod-search *::after { box-sizing: border-box; }

.aocod {
	width: 100%;
	max-width: var(--aocod-max, 1180px);
	margin-inline: auto;
	line-height: 1.55;
}

/* Themes love a blanket p{color:#333}. Say it once, explicitly. */
.aocod p,
.aocod li,
.aocod span,
.aocod label,
.aocod b,
.aocod strong,
.aocod legend { color: var(--aocod-text); }

.aocod h1, .aocod h2, .aocod h3 {
	font-family: var(--aocod-head, inherit);
	color: var(--aocod-text);
	margin: 0;
	padding: 0;
	line-height: 1.22;
	text-transform: none;
	letter-spacing: -.01em;
	-webkit-text-fill-color: currentColor;
}

.aocod-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;
}

.aocod-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ═══════════ 1b. THEME ARMOUR ═══════════
   A WordPress theme will happily declare p{color:#333!important} and
   a{color:#0645ad!important}. In light mode that looks survivable and in dark
   mode it makes the panel unreadable. So the order desk states its own colours
   with the same weight, scoped to itself and nothing else. */

.aocod h1, .aocod h2, .aocod h3, .aocod h4,
.aocod p, .aocod li, .aocod span, .aocod small,
.aocod b, .aocod strong, .aocod em,
.aocod label, .aocod legend, .aocod div,
.aocod-search label, .aocod-search span {
	color: var(--aocod-text) !important;
	text-shadow: none !important;
	-webkit-text-fill-color: currentColor;
}

.aocod .aocod-muted,
.aocod .aocod-help,
.aocod .aocod-intro,
.aocod .aocod-note,
.aocod .aocod-sum__n,
.aocod .aocod-sum__r > span,
.aocod .aocod-line__v,
.aocod .aocod-line__q,
.aocod .aocod-modal__p,
.aocod .aocod-modal__no,
.aocod .aocod-modal__t,
.aocod .aocod-empty p { color: var(--aocod-muted) !important; }

.aocod .aocod-err { color: var(--aocod-bad) !important; }
.aocod .aocod-req { color: var(--aocod-bad) !important; }

.aocod a,
.aocod a:visited,
.aocod-search a {
	color: var(--aocod-text) !important;
	text-decoration: none !important;
}

.aocod .aocod-submit,
.aocod .aocod-submit span,
.aocod .aocod-line__b,
.aocod .aocod-tick,
.aocod .aocod-choice:has(input:checked) span,
.aocod-search .aocod-search__go { color: var(--aocod-on-primary) !important; }

.aocod .aocod-wa,
.aocod .aocod-wa span { color: #ffffff !important; }

/* A bare button inherits the theme's button colour, which is dark ink meant for
   a yellow theme button. Say ours plainly; the filled states further down are
   more specific or come later, so they still win. */
.aocod button,
.aocod .aocod-step,
.aocod .aocod-chip,
.aocod .aocod-chip em,
.aocod .aocod-page { color: var(--aocod-text) !important; }

.aocod h1, .aocod h2, .aocod h3 {
	margin: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	font-family: var(--aocod-head, inherit) !important;
}

.aocod p { margin: 0 !important; padding: 0 !important; }

.aocod ul, .aocod ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.aocod li { list-style: none !important; display: block !important; }
.aocod li::before, .aocod li::marker { content: none !important; }

.aocod fieldset {
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

.aocod legend { padding: 0 !important; float: none !important; width: auto !important; }
.aocod label { display: block; }
.aocod .aocod-choice { display: inline-flex !important; }

.aocod input, .aocod select, .aocod textarea,
.aocod-search input, .aocod-search select {
	font-family: var(--aocod-body, inherit) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	max-width: 100% !important;
}

.aocod button, .aocod-search button {
	font-family: var(--aocod-body, inherit) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border: 0 !important;
}

.aocod .aocod-modal__x { border: 1px solid var(--aocod-border) !important; }

.aocod .aocod-grid { display: grid !important; }
.aocod .aocod-fields { display: grid !important; }

/* A theme that declares button{background:#f5c33b!important} repaints our
   submit button and leaves white text on yellow. Colour statements have to
   carry the same weight as the ones they are defending against. */

.aocod .aocod-submit,
.aocod-search .aocod-search__go {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600)) !important;
	background-color: var(--aocod-primary) !important;
}

.aocod .aocod-submit:hover {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary-600), var(--aocod-primary-700)) !important;
	background-color: var(--aocod-primary-600) !important;
}

.aocod .aocod-wa {
	background-image: linear-gradient(180deg, #2fc45c, #1da851) !important;
	background-color: #1da851 !important;
}

.aocod .aocod-line__b,
.aocod .aocod-tick { background-color: var(--aocod-primary) !important; }

.aocod .aocod-modal__x { background-color: transparent !important; }

.aocod input, .aocod textarea, .aocod select,
.aocod-search input, .aocod-search select {
	background-color: var(--aocod-surface-3) !important;
	background-image: none !important;
	color: var(--aocod-text) !important;
	border-color: var(--aocod-border) !important;
	border-width: 1px !important;
	border-style: solid !important;
}

.aocod input[type="radio"],
.aocod input[type="checkbox"] {
	background-color: transparent !important;
	border: 0 !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
	accent-color: var(--aocod-primary);
}

.aocod-search input, .aocod-search select {
	background-color: transparent !important;
	border: 0 !important;
}

.aocod .aocod-choice { background-color: var(--aocod-surface-3) !important; }

.aocod .aocod-choice:has(input:checked) {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 58%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600)) !important;
	background-color: var(--aocod-primary) !important;
}

.aocod-col, .aocod-empty, .aocod-modal__box { background-color: var(--aocod-surface) !important; }
.aocod .aocod-sum { background-color: var(--aocod-surface-3) !important; }
.aocod-search { background-color: var(--aocod-surface) !important; }
.aocod-search .aocod-search__cat { background-color: var(--aocod-surface-3) !important; }

/* ═══════════ 2. THE DEPTH RECIPE ═══════════ */

.aocod-col,
.aocod-empty,
.aocod-modal__box {
	background:
		linear-gradient(180deg, var(--aocod-gloss), rgba(255, 255, 255, 0) 46%),
		var(--aocod-surface);
	background-color: var(--aocod-surface);
	border: 1px solid var(--aocod-border-soft);
	border-radius: var(--aocod-r, 16px);
	box-shadow:
		0 1px 0 var(--aocod-edge) inset,
		0 1px 1px var(--aocod-shadow),
		0 8px 18px -10px var(--aocod-shadow),
		0 26px 44px -26px var(--aocod-shadow);
}

/* ═══════════ 3. LAYOUT ═══════════ */

.aocod-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--aocod-gap);
	align-items: start;
	margin: 0;
}

.aocod-col { padding: clamp(18px, 2.4vw, 30px); }

.aocod-col--cart { position: sticky; top: 18px; }

.aocod-h {
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 700;
	margin: 0 0 4px;
}

.aocod-intro {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--aocod-muted);
	max-width: 58ch;
}

/* ═══════════ 4. CART LINES ═══════════ */

.aocod-lines { margin: 14px 0 0; }

.aocod-line {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid var(--aocod-border-soft);
}

.aocod-line:first-child { border-top: 0; padding-top: 0; }

.aocod-line__b {
	width: 42px; height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-primary);
	background-color: var(--aocod-primary);
	color: var(--aocod-on-primary);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
}

.aocod-line__m { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.aocod-line__n {
	font-weight: 600;
	font-size: 14.5px;
	overflow-wrap: anywhere;
}

.aocod-line__v,
.aocod-line__q {
	font-size: 12.5px;
	color: var(--aocod-muted);
}

.aocod-line__p {
	font-weight: 700;
	font-size: 14.5px;
	white-space: nowrap;
}

/* ═══════════ 5. TOTALS ═══════════ */

.aocod-sum {
	margin-top: 16px;
	padding: 15px 16px;
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-surface-3);
	border: 1px solid var(--aocod-border-soft);
	box-shadow: 0 1px 2px var(--aocod-shadow) inset;
}

.aocod-sum__r {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	font-size: 14px;
	padding: 3px 0;
	color: var(--aocod-muted);
}

.aocod-sum__r b { color: var(--aocod-text); font-weight: 650; }

.aocod-sum__r--tot {
	margin-top: 6px;
	padding-top: 11px;
	border-top: 1px solid var(--aocod-border-soft);
	font-size: 15px;
}

.aocod-sum__r--tot b {
	font-family: var(--aocod-head, inherit);
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 700;
}

.aocod-sum__n {
	margin: 9px 0 0;
	font-size: 12px;
	color: var(--aocod-muted);
}

.aocod-note {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--aocod-muted);
}

.aocod-note--warn {
	padding: 10px 13px;
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-primary-050);
	border: 1px solid var(--aocod-border);
	color: var(--aocod-text);
}

.aocod-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	min-height: 44px;
	padding: 11px 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--aocod-text);
	text-decoration: none;
	border-bottom: 1px solid var(--aocod-border);
	transition: border-color .2s var(--aocod-ease);
}

.aocod-back:hover { border-color: var(--aocod-primary); }
.aocod-back svg { width: 15px; height: 15px; flex: none; }

/* ═══════════ 6. FORM FIELDS ═══════════ */

.aocod-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 14px;
}

.aocod-field { display: flex; flex-direction: column; min-width: 0; }
.aocod-field--full { grid-column: 1 / -1; }

.aocod-label {
	display: block;
	font-size: 12.5px;
	font-weight: 650;
	letter-spacing: .01em;
	margin: 0 0 6px;
	padding: 0;
}

.aocod-req { color: var(--aocod-bad); }

.aocod-set { border: 0; margin: 0; padding: 0; min-width: 0; }

.aocod-input {
	width: 100%;
	font: inherit;
	font-size: 14.5px;
	color: var(--aocod-text);
	background: var(--aocod-surface-3);
	background-color: var(--aocod-surface-3);
	border: 1px solid var(--aocod-border);
	border-radius: var(--aocod-r-sm, 9px);
	padding: 11px 13px;
	line-height: 1.4;
	box-shadow: 0 1px 2px var(--aocod-shadow) inset;
	transition: border-color .18s var(--aocod-ease), box-shadow .18s var(--aocod-ease);
	appearance: none;
	-webkit-appearance: none;
	min-height: 44px;
}

textarea.aocod-input { min-height: 92px; resize: vertical; }

.aocod-input::placeholder { color: var(--aocod-muted); opacity: 1; }

.aocod-input:focus,
.aocod-input:focus-visible {
	outline: none;
	border-color: var(--aocod-primary);
	box-shadow: 0 0 0 3px var(--aocod-glow);
}

.aocod-selW { position: relative; }

.aocod-selW::after {
	content: "";
	position: absolute;
	right: 14px; top: 50%;
	width: 8px; height: 8px;
	border-right: 2px solid var(--aocod-muted);
	border-bottom: 2px solid var(--aocod-muted);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.aocod-selW .aocod-input { padding-right: 36px; }

.aocod-help {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--aocod-muted);
}

.aocod-err {
	margin: 0;
	font-size: 12px;
	color: var(--aocod-bad);
	min-height: 0;
}

.aocod-err:not(:empty) { margin-top: 5px; }

.aocod-field.is-bad .aocod-input {
	border-color: var(--aocod-bad);
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}

/* choices */

.aocod-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.aocod-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 15px;
	min-height: 44px;
	border-radius: 999px;
	border: 1px solid var(--aocod-border);
	background: var(--aocod-surface-3);
	background-color: var(--aocod-surface-3);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s var(--aocod-ease), background-color .18s var(--aocod-ease), transform .12s var(--aocod-ease);
}

.aocod-choice:hover { border-color: var(--aocod-primary); transform: translateY(-1px); }

.aocod-choice input {
	width: 17px; height: 17px;
	margin: 0;
	flex: none;
	accent-color: var(--aocod-primary);
}

.aocod-choice:has(input:checked) {
	border-color: transparent;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 58%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600));
	background-color: var(--aocod-primary);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 6px 14px -8px var(--aocod-glow);
}

.aocod-choice:has(input:checked) span { color: var(--aocod-on-primary); }
.aocod-choice input:focus-visible { outline: 2px solid var(--aocod-primary); outline-offset: 3px; }

/* ═══════════ 7. SUBMIT ═══════════ */

.aocod-submit {
	position: relative;
	width: 100%;
	margin-top: 20px;
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding: 15px 24px;
	border: 0;
	border-radius: var(--aocod-r-sm, 9px);
	font: inherit;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	color: var(--aocod-on-primary);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600));
	background-color: var(--aocod-primary);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .32) inset,
		0 2px 3px -1px var(--aocod-shadow),
		0 12px 24px -12px var(--aocod-glow);
	transition: transform .14s var(--aocod-ease), box-shadow .2s var(--aocod-ease);
	text-decoration: none;
}

.aocod-submit:hover {
	transform: translateY(-2px);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary-600), var(--aocod-primary-700));
	background-color: var(--aocod-primary-600);
}

.aocod-submit:active { transform: translateY(0); }

.aocod-submit:focus-visible { outline: 3px solid var(--aocod-primary); outline-offset: 3px; }

.aocod-submit[disabled] { opacity: .62; cursor: progress; transform: none; }

.aocod-submit--link { width: auto; margin-top: 18px; }

.aocod-spin {
	display: none;
	width: 17px; height: 17px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: aocodSpin .7s linear infinite;
}

.aocod-submit.is-busy .aocod-spin { display: block; }

@keyframes aocodSpin { to { transform: rotate(360deg); } }

.aocod-alert {
	margin: 16px 0 0;
	padding: 11px 14px;
	border-radius: var(--aocod-r-sm, 9px);
	font-size: 13.5px;
	color: var(--aocod-text);
	background: var(--aocod-surface-3);
	border: 1px solid var(--aocod-bad);
}

/* ═══════════ 8. EMPTY ═══════════ */

.aocod-empty {
	padding: clamp(34px, 6vw, 62px) clamp(20px, 4vw, 40px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.aocod-empty svg { width: 40px; height: 40px; color: var(--aocod-muted); }
.aocod-empty b { font-family: var(--aocod-head, inherit); font-size: 19px; }
.aocod-empty p { margin: 0; color: var(--aocod-muted); font-size: 14px; max-width: 40ch; }

/* ═══════════ 9. THE THANK YOU POPUP ═══════════ */

.aocod-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: clamp(12px, 4vw, 34px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.aocod-modal[hidden] { display: none; }

.aocod-modal__scrim {
	position: fixed;
	inset: 0;
	background: var(--aocod-scrim);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: aocodFade .28s var(--aocod-ease) both;
}

.aocod-modal__box {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: auto;
	padding: clamp(24px, 5vw, 38px) clamp(20px, 4.5vw, 36px) clamp(20px, 4vw, 30px);
	text-align: center;
	animation: aocodPop .38s var(--aocod-ease) both;
}

.aocod-modal__top {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 14px;
}

.aocod-modal__logo {
	display: block;
	width: clamp(72px, 18vw, 104px);
	height: auto;
	max-height: 104px;
	object-fit: contain;
}

.aocod-modal__word {
	font-family: var(--aocod-head, inherit);
	font-size: clamp(19px, 4vw, 24px);
	font-weight: 700;
	color: var(--aocod-text);
}

.aocod-tick {
	margin-top: 12px;
	width: 52px; height: 52px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--aocod-on-primary);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600));
	background-color: var(--aocod-primary);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .34) inset, 0 10px 22px -10px var(--aocod-glow);
	animation: aocodTick .5s var(--aocod-ease) .12s both;
}

.aocod-tick svg { width: 26px; height: 26px; }

.aocod-modal__h {
	font-size: clamp(21px, 4.4vw, 27px);
	font-weight: 700;
	margin: 0 0 8px;
}

.aocod-modal__p {
	margin: 0;
	font-size: 14.5px;
	color: var(--aocod-muted);
	max-width: 38ch;
	margin-inline: auto;
}

.aocod-modal__no {
	margin: 14px 0 0;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aocod-muted);
}

.aocod-modal__no b {
	display: block;
	margin-top: 3px;
	font-family: var(--aocod-head, inherit);
	font-size: 19px;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--aocod-text);
}

.aocod-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 18px;
	min-height: 48px;
	padding: 13px 22px;
	border-radius: var(--aocod-r-sm, 9px);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	color: #ffffff;
	background: linear-gradient(180deg, #2fc45c, #1da851);
	background-color: #1da851;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 20px -12px rgba(29, 168, 81, .8);
	transition: transform .14s var(--aocod-ease);
}

.aocod-wa:hover { transform: translateY(-2px); color: #ffffff; }
.aocod-wa[hidden] { display: none; }
.aocod-wa svg { width: 19px; height: 19px; flex: none; }

.aocod-modal__c {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--aocod-border-soft);
	font-size: 13px;
}

.aocod-modal__c a,
.aocod-modal__c span { color: var(--aocod-text); text-decoration: none; }
.aocod-modal__c a:hover { text-decoration: underline; }

.aocod-modal__c i {
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--aocod-muted);
	opacity: .6;
}

.aocod-modal__x {
	margin-top: 18px;
	min-height: 44px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid var(--aocod-border);
	background: transparent;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--aocod-text);
	cursor: pointer;
	transition: border-color .18s var(--aocod-ease);
}

.aocod-modal__x:hover { border-color: var(--aocod-primary); }
.aocod-modal__x:focus-visible { outline: 3px solid var(--aocod-primary); outline-offset: 2px; }

.aocod-modal__t {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--aocod-muted);
	min-height: 1em;
}

@keyframes aocodFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aocodPop {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to   { opacity: 1; transform: none; }
}
@keyframes aocodTick {
	from { opacity: 0; transform: scale(.6); }
	to   { opacity: 1; transform: none; }
}

/* ═══════════ 10. THE HEADER SEARCH ═══════════ */

.aocod-search {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: 620px;
	background: var(--aocod-surface, #fff);
	background-color: var(--aocod-surface, #fff);
	border: 1px solid var(--aocod-border, #d8dbe2);
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 1px 2px var(--aocod-shadow), 0 10px 24px -18px var(--aocod-shadow);
	transition: border-color .18s var(--aocod-ease), box-shadow .18s var(--aocod-ease);
}

.aocod-search:focus-within {
	border-color: var(--aocod-primary);
	box-shadow: 0 0 0 3px var(--aocod-glow);
}

.aocod-search__cat {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	border-right: 1px solid var(--aocod-border-soft);
	background: var(--aocod-surface-3);
	background-color: var(--aocod-surface-3);
}

.aocod-search__cat select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--aocod-text);
	padding: 0 30px 0 16px;
	height: 100%;
	min-height: 48px;
	max-width: 190px;
	cursor: pointer;
	text-overflow: ellipsis;
}

.aocod-search__cat select:focus { outline: none; }
.aocod-search__cat select:focus-visible { outline: 2px solid var(--aocod-primary); outline-offset: -2px; }

.aocod-search__chev {
	position: absolute;
	right: 10px;
	width: 15px; height: 15px;
	pointer-events: none;
	color: var(--aocod-muted);
}

.aocod-search__q {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
}

.aocod-search__q svg {
	position: absolute;
	left: 14px;
	width: 17px; height: 17px;
	color: var(--aocod-muted);
	pointer-events: none;
}

.aocod-search__q input {
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14.5px;
	color: var(--aocod-text);
	padding: 0 12px 0 40px;
	min-height: 48px;
	appearance: none;
	-webkit-appearance: none;
}

.aocod-search__q input::placeholder { color: var(--aocod-muted); opacity: 1; }
.aocod-search__q input:focus { outline: none; }
.aocod-search__q input::-webkit-search-cancel-button { cursor: pointer; }

.aocod-search__go {
	flex: none;
	border: 0;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--aocod-on-primary);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600));
	background-color: var(--aocod-primary);
	padding: 0 22px;
	min-height: 48px;
	cursor: pointer;
	transition: filter .18s var(--aocod-ease);
}

.aocod-search__go:hover { filter: brightness(1.06); }
.aocod-search__go:focus-visible { outline: 3px solid var(--aocod-primary); outline-offset: -4px; }

/* ═══════════ 11. SMALL SCREENS ═══════════ */

@media (max-width: 900px) {
	.aocod-grid { grid-template-columns: minmax(0, 1fr); }
	.aocod-col--cart { position: static; order: 2; }
	.aocod-col--form { order: 1; }
}

@media (max-width: 620px) {
	.aocod-fields { grid-template-columns: minmax(0, 1fr); }
	.aocod-field--half { grid-column: 1 / -1; }

	.aocod-search {
		flex-wrap: wrap;
		border-radius: var(--aocod-r, 16px);
	}
	.aocod-search__cat {
		flex: 1 1 100%;
		border-right: 0;
		border-bottom: 1px solid var(--aocod-border-soft);
	}
	.aocod-search__cat select { max-width: none; width: 100%; }
	.aocod-search__q { flex: 1 1 auto; }
	.aocod-search__go { flex: none; padding: 0 18px; }
}

@media (max-width: 400px) {
	.aocod-line { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
	.aocod-line__b { width: 34px; height: 34px; font-size: 12px; }
	.aocod-modal__box { padding: 24px 18px 20px; }
}

/* ═══════════ 12. LESS MOTION ═══════════ */

@media (prefers-reduced-motion: reduce) {
	.aocod *,
	.aocod *::before,
	.aocod *::after,
	.aocod-search * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.aocod-submit:hover,
	.aocod-wa:hover,
	.aocod-choice:hover { transform: none; }
}

/* ═══════════ 13. PRINT ═══════════ */

@media print {
	.aocod-modal,
	.aocod-search,
	.aocod-submit,
	.aocod-back { display: none !important; }
	.aocod-col { box-shadow: none; border-color: #999; }
	.aocod, .aocod * { color: #000 !important; background: #fff !important; }
}

/* ═══════════ 14. THE ORDERS SCREEN ═══════════ */

.aocod-orders {
	/* Unlike the cart, this screen puts text straight onto the page rather than
	   inside cards. In dark mode the theme's own white body would still be
	   behind it, so the screen carries its own ground. */
	background: var(--aocod-page) !important;
	border-radius: var(--aocod-r, 16px);
	padding: clamp(14px, 2.4vw, 26px);
}

.aocod-h--sm { font-size: clamp(15px, 1.5vw, 17px); margin-bottom: 10px; }

.aocod-ordTop {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 16px;
}

.aocod-ordSearch {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex: 1 1 300px;
	max-width: 460px;
	position: relative;
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	border: 1px solid var(--aocod-border);
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 1px 2px var(--aocod-shadow);
}

.aocod-ordSearch:focus-within { border-color: var(--aocod-primary); box-shadow: 0 0 0 3px var(--aocod-glow); }

.aocod-ordSearch > svg {
	position: absolute;
	left: 15px; top: 50%;
	transform: translateY(-50%);
	width: 17px; height: 17px;
	color: var(--aocod-muted);
	pointer-events: none;
}

.aocod-ordSearch input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	background: transparent !important;
	font: inherit;
	font-size: 14.5px;
	padding: 0 12px 0 42px;
	min-height: 46px;
	box-shadow: none !important;
}

.aocod-ordSearch input:focus { outline: none; }

.aocod-submit--slim {
	width: auto;
	margin-top: 0;
	min-height: 46px;
	padding: 12px 20px;
	font-size: 14px;
	border-radius: var(--aocod-r-sm, 9px);
	gap: 8px;
}

.aocod-submit--slim svg { width: 16px; height: 16px; }

.aocod-ordSearch .aocod-submit--slim { border-radius: 0; }

/* filter chips */

.aocod-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.aocod-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--aocod-border);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	font-size: 13px;
	font-weight: 650;
	text-decoration: none !important;
	transition: border-color .18s var(--aocod-ease), transform .12s var(--aocod-ease);
}

.aocod-chip:hover { border-color: var(--aocod-primary); transform: translateY(-1px); }

.aocod-chip em {
	font-style: normal;
	font-size: 11.5px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--aocod-surface-3);
	color: var(--aocod-muted) !important;
}

.aocod-chip.is-on {
	border-color: transparent;
	background-color: var(--aocod-primary) !important;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 58%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600)) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 6px 14px -8px var(--aocod-glow);
}

.aocod-chip.is-on { color: var(--aocod-on-primary) !important; }

/* The count sits on the filled chip. A translucent wash over a pale brand
   leaves the number almost invisible, so invert it instead: the ink colour
   becomes the pill and the brand colour becomes the number, a pairing the PHP
   has already contrast checked. */
.aocod-chip.is-on em {
	color: var(--aocod-primary) !important;
	background: var(--aocod-on-primary);
	background-color: var(--aocod-on-primary) !important;
}

/* status pills */

.aocod-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
	border: 1px solid var(--aocod-border);
	background: var(--aocod-surface-3);
	background-color: var(--aocod-surface-3);
}

.aocod-pill--info { border-color: var(--aocod-primary); }
.aocod-pill--go   { border-color: var(--aocod-ok); }
.aocod-pill--warn { border-color: var(--aocod-accent); }
.aocod-pill--bad  { border-color: var(--aocod-bad); }
.aocod-pill--done { opacity: .78; }

/* the list */

.aocod-ordList {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aocod-ordRow {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
	gap: 14px;
	align-items: center;
	padding: 15px 18px;
	border-radius: var(--aocod-r-sm, 9px);
	border: 1px solid var(--aocod-border-soft);
	background:
		linear-gradient(180deg, var(--aocod-gloss), rgba(255, 255, 255, 0) 46%),
		var(--aocod-surface);
	background-color: var(--aocod-surface) !important;
	box-shadow: 0 1px 0 var(--aocod-edge) inset, 0 1px 2px var(--aocod-shadow);
	text-decoration: none !important;
	transition: transform .14s var(--aocod-ease), box-shadow .2s var(--aocod-ease), border-color .18s var(--aocod-ease);
}

.aocod-ordRow:hover {
	transform: translateY(-2px);
	border-color: var(--aocod-primary);
	box-shadow: 0 1px 0 var(--aocod-edge) inset, 0 10px 22px -12px var(--aocod-shadow);
}

.aocod-ordRow:focus-visible { outline: 3px solid var(--aocod-primary); outline-offset: 2px; }

.aocod-ordRow > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.aocod-ordRow small {
	font-size: 12px;
	color: var(--aocod-muted) !important;
	font-weight: 500;
}

.aocod-ordRow__no { font-family: var(--aocod-head, inherit); font-weight: 700; font-size: 15px; }
.aocod-ordRow__who { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.aocod-ordRow__for { font-size: 13.5px; }
.aocod-ordRow__tot { font-weight: 700; font-size: 15.5px; text-align: right; white-space: nowrap; }

.aocod-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
	font-size: 13px;
	color: var(--aocod-muted);
}

.aocod-page {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--aocod-border);
	font-weight: 650;
	font-size: 13px;
	text-decoration: none !important;
}

.aocod-page:hover { border-color: var(--aocod-primary); }

/* the detail view */

.aocod-ordHead { margin-bottom: 16px; }

.aocod-ordHead .aocod-back { margin-top: 0; margin-bottom: 10px; }

.aocod-ordHead__t {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.aocod-ordGrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--aocod-gap);
	align-items: start;
}

.aocod-facts {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
	gap: 10px 16px;
}

.aocod-facts dt {
	font-size: 12.5px;
	color: var(--aocod-muted) !important;
	font-weight: 600;
}

.aocod-facts dd {
	margin: 0;
	font-size: 14.5px;
	overflow-wrap: anywhere;
}

.aocod-facts dd a { text-decoration: underline !important; }

.aocod-ordDo { margin-top: var(--aocod-gap); }

.aocod-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 18px;
}

.aocod-step {
	min-height: 44px;
	padding: 11px 17px;
	border-radius: 999px;
	border: 1px solid var(--aocod-border) !important;
	background-color: var(--aocod-surface-3) !important;
	font: inherit;
	font-size: 13.5px;
	font-weight: 650;
	cursor: pointer;
	transition: transform .12s var(--aocod-ease), border-color .18s var(--aocod-ease);
}

.aocod-step:hover { transform: translateY(-1px); border-color: var(--aocod-primary) !important; }
.aocod-step:focus-visible { outline: 3px solid var(--aocod-primary); outline-offset: 2px; }

.aocod-step.is-on {
	border-color: transparent !important;
	background-color: var(--aocod-primary) !important;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 58%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600)) !important;
	color: var(--aocod-on-primary) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 6px 14px -8px var(--aocod-glow);
}

.aocod-doRow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 14px;
}

.aocod-paper { flex: 0 1 240px; }
.aocod-paper .aocod-input { min-height: 46px; }

/* the sign in and passcode gate */

.aocod-gate { display: grid; place-items: center; padding-block: clamp(20px, 6vw, 60px); }

.aocod-gate__box {
	width: 100%;
	max-width: 420px;
	padding: clamp(22px, 4vw, 34px);
	border-radius: var(--aocod-r, 16px);
	border: 1px solid var(--aocod-border-soft);
	background:
		linear-gradient(180deg, var(--aocod-gloss), rgba(255, 255, 255, 0) 46%),
		var(--aocod-surface);
	background-color: var(--aocod-surface) !important;
	box-shadow: 0 1px 0 var(--aocod-edge) inset, 0 20px 40px -24px var(--aocod-shadow);
}

.aocod-gate__box .aocod-submit { margin-top: 16px; }

.aocod-gate form p { margin: 0 0 12px !important; }

.aocod-gate label { font-size: 12.5px; font-weight: 650; display: block; margin-bottom: 6px; }

.aocod-gate input[type="text"],
.aocod-gate input[type="password"] {
	width: 100%;
	font: inherit;
	font-size: 14.5px;
	padding: 11px 13px;
	min-height: 44px;
	border-radius: var(--aocod-r-sm, 9px);
	border: 1px solid var(--aocod-border) !important;
	background-color: var(--aocod-surface-3) !important;
	color: var(--aocod-text) !important;
}

.aocod-gate input[type="submit"] {
	width: 100%;
	min-height: 50px;
	margin-top: 8px;
	border: 0 !important;
	border-radius: var(--aocod-r-sm, 9px);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	color: var(--aocod-on-primary) !important;
	background-color: var(--aocod-primary) !important;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600)) !important;
}

/* ═══════════ 15. THE PRINTED RECEIPT ═══════════ */

/* Nothing here any more, and that is the improvement. The receipt used to be
   printed out of the middle of the orders screen, which meant hiding the whole
   shop behind a wall of shouted rules and still coming out wearing the theme's
   margins. It now opens as a document of its own with a page box the size of
   the paper it is going on, built by class-aoc-od-receipt.php. */

/* ═══════════ 16. THE ORDERS SCREEN ON SMALL SCREENS ═══════════ */

@media (max-width: 900px) {
	.aocod-ordGrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
	.aocod-ordRow {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 10px 12px;
		align-items: start;
	}
	.aocod-ordRow__no { grid-column: 1; }
	.aocod-ordRow__tot { grid-column: 2; grid-row: 1; }
	.aocod-ordRow__who { grid-column: 1 / -1; }
	.aocod-ordRow__for { grid-column: 1; }
	.aocod-ordRow .aocod-pill { grid-column: 2; justify-self: end; align-self: center; }

	.aocod-ordTop { flex-direction: column; align-items: stretch; }
	.aocod-ordSearch { max-width: none; }
	.aocod-facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
	.aocod-facts dd { margin-bottom: 10px; }
}

@media (max-width: 420px) {
	.aocod-orders { padding: 12px 10px; border-radius: 0; }
	.aocod-ordSearch { flex-wrap: wrap; border-radius: var(--aocod-r-sm, 9px); }
	.aocod-ordSearch input { flex: 1 1 100%; }
	.aocod-ordSearch .aocod-submit--slim { flex: 1 1 100%; border-radius: 0; }
	.aocod-chips { gap: 6px; }
	.aocod-chip { font-size: 12px; padding: 7px 11px; }
	.aocod-doRow { flex-direction: column; align-items: stretch; }
	.aocod-paper { flex: 1 1 auto; }
	.aocod-doRow .aocod-submit--slim { width: 100%; }
}

/* ═══════════ 17. THE ORDER EDITOR ═══════════
   Add a dish by searching, change a quantity, drop a line, save. The same
   panel creates an order the kitchen took on the phone. */

.aocod-editor,
.aocod-cal2 {
	margin: 0 0 18px;
	padding: clamp(14px, 2vw, 20px);
	border: 1px solid var(--aocod-border);
	border-radius: var(--aocod-r, 16px);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	box-shadow: 0 1px 2px var(--aocod-shadow), 0 18px 34px -30px var(--aocod-shadow);
}

.aocod-editor .aocod-intro,
.aocod-cal2 .aocod-intro { margin: 0 0 14px; font-size: 13.5px; }

/* the dish search */

.aocod-dish { margin-bottom: 14px; }

.aocod-dish__box { position: relative; }

.aocod-dish__hits {
	position: absolute;
	z-index: 30;
	left: 0; right: 0; top: calc(100% + 6px);
	max-height: 288px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 6px;
	border: 1px solid var(--aocod-border);
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	box-shadow: 0 18px 40px -18px var(--aocod-shadow), 0 2px 6px var(--aocod-shadow);
}

.aocod-dish__hit {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--aocod-r-sm, 9px);
	background: transparent;
	background-color: transparent;
	font: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	color: var(--aocod-text) !important;
}

.aocod-dish__hit:hover,
.aocod-dish__hit:focus-visible {
	background: var(--aocod-surface-3);
	background-color: var(--aocod-surface-3);
	outline: none;
}

.aocod-dish__hit em {
	font-style: normal;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	color: var(--aocod-muted) !important;
}

.aocod-dish__none {
	margin: 0;
	padding: 12px;
	font-size: 13.5px;
	color: var(--aocod-muted) !important;
}

/* the lines */

.aocod-editLines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.aocod-editLines__none {
	margin: 0;
	padding: 16px;
	text-align: center;
	font-size: 13.5px;
	border: 1px dashed var(--aocod-border);
	border-radius: var(--aocod-r-sm, 9px);
	color: var(--aocod-muted) !important;
}

.aocod-editLine {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto auto;
	align-items: center;
	gap: 8px 12px;
	padding: 9px 10px;
	border: 1px solid var(--aocod-border-soft);
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-surface-2, var(--aocod-surface));
	background-color: var(--aocod-surface-2, var(--aocod-surface));
}

.aocod-editLine__n { font-size: 14px; font-weight: 600; min-width: 0; }
.aocod-editLine__u { font-size: 12.5px; white-space: nowrap; color: var(--aocod-muted) !important; }
.aocod-editLine__t { font-size: 14px; font-weight: 750; white-space: nowrap; }

.aocod-editLine__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	flex: none;
	border: 1px solid var(--aocod-border);
	border-radius: 999px;
	background: transparent;
	background-color: transparent;
	cursor: pointer;
	color: var(--aocod-muted) !important;
	transition: border-color .16s var(--aocod-ease), color .16s var(--aocod-ease);
}

.aocod-editLine__x svg { width: 15px; height: 15px; }

.aocod-editLine__x:hover {
	border-color: var(--aocod-bad);
	color: var(--aocod-bad) !important;
}

/* quantity stepper */

.aocod-qty {
	display: inline-flex;
	align-items: stretch;
	flex: none;
	border: 1px solid var(--aocod-border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
}

.aocod-qty__b {
	width: 36px;
	min-height: 36px;
	border: 0;
	background: transparent;
	background-color: transparent;
	font: inherit;
	font-size: 17px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	color: var(--aocod-text) !important;
}

.aocod-qty__b:hover {
	background: var(--aocod-surface-3);
	background-color: var(--aocod-surface-3);
}

.aocod-qty__n {
	width: 46px;
	min-height: 36px;
	border: 0 !important;
	border-left: 1px solid var(--aocod-border-soft) !important;
	border-right: 1px solid var(--aocod-border-soft) !important;
	background: transparent !important;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	color: var(--aocod-text) !important;
	box-shadow: none !important;
	padding: 0;
	-moz-appearance: textfield;
}

.aocod-qty__n::-webkit-outer-spin-button,
.aocod-qty__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aocod-qty__n:focus { outline: none; }

/* the button variants the desk uses */

.aocod-ghost,
.aocod-danger {
	background-image: none !important;
	background-color: transparent !important;
	border: 1px solid var(--aocod-border) !important;
	color: var(--aocod-text) !important;
	box-shadow: none !important;
}

.aocod-ghost:hover { border-color: var(--aocod-primary) !important; }

.aocod-danger { color: var(--aocod-bad) !important; border-color: var(--aocod-border) !important; }
.aocod-danger:hover { border-color: var(--aocod-bad) !important; }

.aocod-danger.is-armed {
	border-color: var(--aocod-bad) !important;
	background-color: var(--aocod-bad) !important;
	color: #fff !important;
}

.aocod-new svg { stroke-width: 2.4; }

/* ═══════════ 18. OPEN AND CLOSE DAYS ═══════════ */

.aocod-calGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin-bottom: 14px;
}

.aocod-calBox {
	padding: 14px;
	border: 1px solid var(--aocod-border-soft);
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-surface-2, var(--aocod-surface));
	background-color: var(--aocod-surface-2, var(--aocod-surface));
}

.aocod-calBox__h {
	margin: 0 0 4px;
	font-family: var(--aocod-head, inherit);
	font-size: 14.5px;
	font-weight: 750;
	color: var(--aocod-text) !important;
}

.aocod-calBox .aocod-help { margin: 0 0 10px; }

.aocod-calAdd {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.aocod-calAdd .aocod-input { flex: 1 1 auto; min-width: 0; margin: 0; }
.aocod-calAdd .aocod-submit--slim { flex: none; }

.aocod-calDays {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	min-height: 22px;
}

.aocod-day {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 6px 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--aocod-border);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	font-size: 12.5px;
	font-weight: 650;
	white-space: nowrap;
}

.aocod-day--bad { border-color: var(--aocod-bad); }
.aocod-day--go { border-color: var(--aocod-ok); }

.aocod-day button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	flex: none;
	border: 0;
	border-radius: 999px;
	background: transparent;
	background-color: transparent;
	cursor: pointer;
	color: var(--aocod-muted) !important;
}

.aocod-day button:hover {
	background: var(--aocod-surface-3);
	background-color: var(--aocod-surface-3);
	color: var(--aocod-text) !important;
}

.aocod-day button svg { width: 13px; height: 13px; }

/* ═══════════ 19. THE PUBLIC STATUS PAGE ═══════════ */

.aocod-track { width: 100%; }

.aocod-track__box {
	padding: clamp(18px, 3vw, 32px);
	border: 1px solid var(--aocod-border);
	border-radius: var(--aocod-r, 16px);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	box-shadow: 0 1px 2px var(--aocod-shadow), 0 26px 50px -40px var(--aocod-shadow);
}

.aocod-track__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 6px;
}

.aocod-track__form .aocod-input { flex: 1 1 240px; min-width: 0; margin: 0; }
.aocod-track__form .aocod-submit { flex: 0 0 auto; width: auto; margin-top: 0; min-height: 50px; padding: 12px 26px; }

.aocod-track__out { margin-top: 18px; }

.aocod-track__help {
	margin: 18px 0 8px;
	font-size: 13.5px;
	color: var(--aocod-muted) !important;
}

.aocod-trackCard {
	padding: 16px;
	border: 1px solid var(--aocod-border);
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-surface-2, var(--aocod-surface));
	background-color: var(--aocod-surface-2, var(--aocod-surface));
}

.aocod-trackCard + .aocod-trackCard { margin-top: 12px; }

.aocod-trackCard__top {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.aocod-trackCard__no {
	display: block;
	font-family: var(--aocod-head, inherit);
	font-size: clamp(16px, 2vw, 19px);
	font-weight: 750;
	letter-spacing: .01em;
}

.aocod-trackCard__who {
	display: block;
	font-size: 13px;
	color: var(--aocod-muted) !important;
}

/* the progress rail */

.aocod-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0;
	margin: 0 0 16px;
	padding: 0;
	list-style: none !important;
	counter-reset: none;
}

.aocod-rail__s {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
	list-style: none !important;
}

.aocod-rail__s::before {
	content: "";
	position: absolute;
	top: 8px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--aocod-border);
}

.aocod-rail__s:first-child::before { display: none; }

.aocod-rail__s i {
	position: relative;
	z-index: 1;
	width: 18px; height: 18px;
	border-radius: 999px;
	border: 2px solid var(--aocod-border);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
}

.aocod-rail__s span {
	font-size: 11.5px;
	font-weight: 650;
	line-height: 1.25;
	color: var(--aocod-muted) !important;
}

.aocod-rail__s.is-done::before { background: var(--aocod-ok); }

.aocod-rail__s.is-done i {
	border-color: var(--aocod-ok);
	background: var(--aocod-ok);
	background-color: var(--aocod-ok);
}

.aocod-rail__s.is-now::before { background: var(--aocod-ok); }

.aocod-rail__s.is-now i {
	border-color: var(--aocod-primary);
	background: var(--aocod-primary);
	background-color: var(--aocod-primary);
	box-shadow: 0 0 0 4px var(--aocod-glow);
}

.aocod-rail__s.is-now span { color: var(--aocod-text) !important; font-weight: 750; }

.aocod-trackCard__d {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 6px 16px;
	margin: 0 0 12px;
}

.aocod-trackCard__d dt { font-size: 12.5px; color: var(--aocod-muted) !important; }
.aocod-trackCard__d dd { margin: 0; font-size: 13.5px; font-weight: 650; }

.aocod-trackCard__items summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 650;
	padding: 8px 0;
	min-height: 34px;
	color: var(--aocod-text) !important;
}

.aocod-trackCard__items ul {
	margin: 4px 0 0;
	padding: 0;
	list-style: none !important;
}

.aocod-trackCard__items li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 13.5px;
	border-top: 1px solid var(--aocod-border-soft);
	list-style: none !important;
}

.aocod-trackCard__items li em { font-style: normal; font-weight: 700; color: var(--aocod-muted) !important; }

.aocod-empty--slim { padding: 20px 16px; }

/* ═══════════ 20. CALL AND EMAIL BUTTONS ═══════════ */

.aocod-calls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.aocod-call {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 46px;
	padding: 11px 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	color: var(--aocod-on-primary) !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600));
	background-color: var(--aocod-primary);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 8px 18px -12px var(--aocod-glow);
	transition: transform .14s var(--aocod-ease), filter .18s var(--aocod-ease);
}

.aocod-call:hover { transform: translateY(-1px); filter: brightness(1.05); }
.aocod-call svg { width: 17px; height: 17px; flex: none; }

.aocod-call--soft {
	background-image: none !important;
	background-color: transparent !important;
	border-color: var(--aocod-border) !important;
	color: var(--aocod-text) !important;
	box-shadow: none !important;
}

.aocod-call--soft:hover { border-color: var(--aocod-primary) !important; }

.aocod-modal__do {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 6px;
}

.aocod-modal__do .aocod-modal__x { margin: 0; }

.aocod-modal__x--track {
	background-image: none !important;
	background-color: transparent !important;
	border: 1px solid var(--aocod-border) !important;
	color: var(--aocod-text) !important;
	text-decoration: none !important;
}

.aocod-modal__x--track:hover { border-color: var(--aocod-primary) !important; }

/* ═══════════ 21. WIDTH ═══════════
   The order desk fills whatever it is dropped into, and the header search
   takes the width the Elementor container gives it rather than stopping at a
   fixed pixel value halfway across. */

.aocod-orders { max-width: none; }

.aocod-search--full { max-width: none; }
.aocod-search--wide { max-width: 860px; }
.aocod-search--narrow { max-width: 460px; }

/* Height follows the container too, so a slim header bar gets a slim widget
   without a stylesheet edit. */
.aocod-search.is-compact .aocod-search__cat select,
.aocod-search.is-compact .aocod-search__q input,
.aocod-search.is-compact .aocod-search__go { min-height: 40px; }

/* ═══════════ 22. THE NEW PARTS ON SMALL SCREENS ═══════════ */

@media (max-width: 760px) {
	.aocod-editLine {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 10px;
	}
	.aocod-editLine__n { grid-column: 1 / -1; }
	.aocod-editLine__u { grid-column: 1; }
	.aocod-editLine__t { grid-column: 2; text-align: right; }
	.aocod-qty { grid-column: 1; grid-row: 3; }
	.aocod-editLine__x { grid-column: 2; grid-row: 3; justify-self: end; }

	.aocod-rail { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
	.aocod-rail__s {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		text-align: left;
		padding: 7px 0;
	}
	.aocod-rail__s::before {
		top: auto;
		bottom: 50%;
		left: 8px;
		width: 2px;
		height: 100%;
	}
	.aocod-rail__s span { font-size: 13px; }

	.aocod-track__form .aocod-submit { flex: 1 1 100%; }
	.aocod-calAdd { flex-wrap: wrap; }
	.aocod-calAdd .aocod-input { flex: 1 1 100%; }
	.aocod-calAdd .aocod-submit--slim { flex: 1 1 100%; }
	.aocod-calls { flex-direction: column; }
	.aocod-call { justify-content: center; }
	.aocod-modal__do { flex-direction: column; }
	.aocod-modal__do .aocod-modal__x { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
	.aocod-editor, .aocod-cal2 { padding: 12px 10px; }
	.aocod-track__box { padding: 16px 12px; }
	.aocod-trackCard__d { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
	.aocod-trackCard__d dd { margin-bottom: 8px; }
}

/* ═══════════ 23. ARMOUR FOR THE NEW PARTS ═══════════
   Section 1b answers the theme's blanket colours at equal weight, but it uses
   element selectors: .aocod a and .aocod span outrank a plain class, so a new
   class alone loses even with !important on it. Everything below is stated at
   .aocod .class, which outranks both. */

.aocod .aocod-call,
.aocod .aocod-call:visited { color: var(--aocod-on-primary) !important; }

.aocod .aocod-call--soft,
.aocod .aocod-call--soft:visited,
.aocod .aocod-modal__x--track,
.aocod .aocod-modal__x--track:visited { color: var(--aocod-text) !important; }

.aocod .aocod-editLine__u,
.aocod .aocod-editLines__none,
.aocod .aocod-dish__none,
.aocod .aocod-dish__hit em,
.aocod .aocod-trackCard__who,
.aocod .aocod-trackCard__d dt,
.aocod .aocod-trackCard__items li em,
.aocod .aocod-rail__s span,
.aocod .aocod-track__help,
.aocod .aocod-day button { color: var(--aocod-muted) !important; }

.aocod .aocod-rail__s.is-now span,
.aocod .aocod-editLine__n,
.aocod .aocod-editLine__t,
.aocod .aocod-trackCard__no,
.aocod .aocod-trackCard__d dd,
.aocod .aocod-dish__hit,
.aocod .aocod-dish__hit span,
.aocod .aocod-day,
.aocod .aocod-qty__b,
.aocod .aocod-qty__n { color: var(--aocod-text) !important; }

/* The ghost and the danger buttons wear the submit class for its shape, but
   section 1b paints every .aocod .aocod-submit in the brand at !important. One
   more class each outranks it, which is what makes an outline button possible
   on a theme that insists on filling every button it sees. */

.aocod .aocod-submit.aocod-ghost,
.aocod .aocod-submit.aocod-danger,
.aocod .aocod-submit.aocod-ghost:hover,
.aocod .aocod-submit.aocod-danger:hover {
	background-image: none !important;
	background-color: transparent !important;
	border: 1px solid var(--aocod-border) !important;
	box-shadow: none !important;
	text-transform: none !important;
}

.aocod .aocod-submit.aocod-ghost,
.aocod .aocod-submit.aocod-ghost span { color: var(--aocod-text) !important; }
.aocod .aocod-submit.aocod-ghost:hover { border-color: var(--aocod-primary) !important; }

.aocod .aocod-submit.aocod-danger,
.aocod .aocod-submit.aocod-danger span { color: var(--aocod-bad) !important; }
.aocod .aocod-submit.aocod-danger:hover { border-color: var(--aocod-bad) !important; }

.aocod .aocod-submit.aocod-danger.is-armed,
.aocod .aocod-submit.aocod-danger.is-armed:hover {
	background-color: var(--aocod-bad) !important;
	border-color: var(--aocod-bad) !important;
}

.aocod .aocod-submit.aocod-danger.is-armed,
.aocod .aocod-submit.aocod-danger.is-armed span { color: #fff !important; }

/* The theme's own list styling has to be answered on the rail and the item
   list, or a disc appears beside every step. */
.aocod .aocod-rail,
.aocod .aocod-rail__s,
.aocod .aocod-trackCard__items ul,
.aocod .aocod-trackCard__items li {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.aocod .aocod-rail__s,
.aocod .aocod-trackCard__items li { display: flex !important; }

/* And its button paint, the same fight section 1b already had. */
.aocod .aocod-call {
	border: 1px solid transparent !important;
	background-color: var(--aocod-primary) !important;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600)) !important;
	text-transform: none !important;
	font-size: 14px !important;
	padding: 11px 18px !important;
}

.aocod .aocod-call--soft {
	background-image: none !important;
	background-color: transparent !important;
	border-color: var(--aocod-border) !important;
}

.aocod .aocod-qty__b,
.aocod .aocod-editLine__x,
.aocod .aocod-dish__hit,
.aocod .aocod-day button {
	background-image: none !important;
	text-transform: none !important;
	font-size: inherit !important;
}

.aocod .aocod-qty__b,
.aocod .aocod-day button,
.aocod .aocod-dish__hit {
	background-color: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

.aocod .aocod-dish__hit { padding: 9px 12px !important; }
.aocod .aocod-qty__b { font-size: 17px !important; }

.aocod .aocod-editLine__x {
	background-color: transparent !important;
	border: 1px solid var(--aocod-border) !important;
	padding: 0 !important;
}

.aocod .aocod-qty__n {
	border: 0 !important;
	border-left: 1px solid var(--aocod-border-soft) !important;
	border-right: 1px solid var(--aocod-border-soft) !important;
	background-color: transparent !important;
	padding: 0 !important;
	font-size: 14px !important;
	text-align: center !important;
}

.aocod .aocod-trackCard__items summary { color: var(--aocod-text) !important; }

/* ═══════════ 24. THE LINE THEY MUST NOT MISS ═══════════
   One sentence in the popup, set large enough that it is read rather than
   skimmed, and repeated in bold at the top of the WhatsApp message. */

.aocod-modal__shout {
	margin: 12px 0 4px !important;
	padding: 14px 18px;
	border-radius: var(--aocod-r-sm, 9px);
	border: 1px solid var(--aocod-border);
	background: var(--aocod-primary-050, var(--aocod-surface-3));
	background-color: var(--aocod-primary-050, var(--aocod-surface-3));
	font-family: var(--aocod-head, inherit);
	font-size: clamp(17px, 2.6vw, 22px);
	font-weight: 750;
	line-height: 1.32;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.aocod .aocod-modal__shout { color: var(--aocod-text) !important; }

@media (max-width: 420px) {
	.aocod-modal__shout { padding: 12px 13px; font-size: 17px; }
}

/* ═══════════ 25. WORKING ON MANY ORDERS AT ONCE ═══════════ */

.aocod-ordWrap {
	display: flex;
	align-items: stretch;
	gap: 0;
	border-radius: var(--aocod-r-sm, 9px);
	transition: background-color .16s var(--aocod-ease);
}

.aocod-ordWrap > .aocod-ordRow { flex: 1 1 auto; min-width: 0; }

.aocod-ordWrap.is-picked {
	background: var(--aocod-primary-050, var(--aocod-surface-3));
	background-color: var(--aocod-primary-050, var(--aocod-surface-3));
	box-shadow: inset 3px 0 0 var(--aocod-primary);
}

/* Armoured, because a theme that says label{display:block!important} flattens
   this and the words end up jammed against the box. The gap is stated twice on
   purpose: as a gap for anything that lays out as flex, and as a margin for
   anything the theme has argued back into a block. */
.aocod .aocod-tickBox,
.aocod .aocod-all {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer;
}

.aocod .aocod-tickBox > input,
.aocod .aocod-all > input { margin-right: 10px !important; }

.aocod .aocod-tickBox > input + *,
.aocod .aocod-all > input + * { margin-left: 0 !important; }

.aocod-tickBox {
	flex: none;
	justify-content: center;
	width: 46px;
	min-height: 46px;
	padding: 0 4px;
}

.aocod-all {
	margin: 0 0 10px;
	padding: 9px 4px;
	min-height: 40px;
	font-size: 13px;
	font-weight: 650;
}

/* The tick is drawn here, so the browser must be told not to draw its own.
   Without the !important a theme saying input{appearance:auto!important} wins,
   the native box comes back, and the customer sees two ticks in one box: the
   browser's underneath and ours on top. */
.aocod .aocod-tickBox input[type="checkbox"],
.aocod .aocod-all input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	flex: none;
	width: 20px !important;
	height: 20px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--aocod-border) !important;
	border-radius: 5px !important;
	background: var(--aocod-surface) !important;
	background-color: var(--aocod-surface) !important;
	cursor: pointer;
	box-shadow: none !important;
	position: relative;
	transition: border-color .14s var(--aocod-ease), background-color .14s var(--aocod-ease);
}

.aocod .aocod-tickBox input[type="checkbox"]:checked,
.aocod .aocod-all input[type="checkbox"]:checked,
.aocod .aocod-all input[type="checkbox"]:indeterminate {
	border-color: var(--aocod-primary) !important;
	background-color: var(--aocod-primary) !important;
}

.aocod .aocod-tickBox input[type="checkbox"]:checked::after,
.aocod .aocod-all input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px; top: 1px;
	width: 5px; height: 10px;
	border: solid var(--aocod-on-primary);
	border-width: 0 2.4px 2.4px 0;
	transform: rotate(43deg);
}

.aocod .aocod-all input[type="checkbox"]:indeterminate::after {
	content: "";
	position: absolute;
	left: 3px; top: 7px;
	width: 10px; height: 2.4px;
	background: var(--aocod-on-primary);
}

.aocod .aocod-tickBox input[type="checkbox"]:focus-visible,
.aocod .aocod-all input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--aocod-primary);
	outline-offset: 2px;
}

/* the bar itself */

.aocod-bulk {
	position: sticky;
	top: 8px;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid var(--aocod-primary);
	border-radius: var(--aocod-r, 16px);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	box-shadow: 0 2px 4px var(--aocod-shadow), 0 20px 40px -26px var(--aocod-shadow);
}

.aocod-bulk__n {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding-right: 6px;
	margin-right: 2px;
	border-right: 1px solid var(--aocod-border-soft);
	min-height: 34px;
	align-items: center;
}

.aocod-bulk__n b {
	font-family: var(--aocod-head, inherit);
	font-size: 20px;
	font-weight: 750;
	line-height: 1;
}

.aocod-bulk__n span { font-size: 12.5px; }

.aocod-bulk__sel { flex: 0 1 200px; min-width: 150px; }
.aocod-bulk__sel .aocod-input { margin: 0; min-height: 46px; }

.aocod-bulk__ex { margin: 0; display: contents; }

.aocod-bulk__off { margin-left: auto; }

.aocod-bulk .aocod-note {
	flex: 1 1 100%;
	margin: 0;
	font-size: 13px;
	min-height: 18px;
}

.aocod .aocod-bulk__n span { color: var(--aocod-muted) !important; }
.aocod .aocod-bulk__n b { color: var(--aocod-text) !important; }
.aocod .aocod-all span { color: var(--aocod-text) !important; }

.aocod-submit--slim[disabled] { opacity: .5; cursor: not-allowed; }


/* ═══════════ 26. REACHING THE CUSTOMER ═══════════
   Two buttons on the order aimed at the number the customer gave. The WhatsApp
   one is green, because that is how it is found in a row before it is read,
   but not WhatsApp's own #25d366: white on that measures 1.98:1, which is
   unreadable, and the same white on the darker green below measures 5.4:1.
   It still reads as the WhatsApp button and it can actually be read. */

.aocod-reach {
	margin: 0 0 16px;
	padding: 14px;
	border: 1px solid var(--aocod-border-soft);
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-surface-2, var(--aocod-surface));
	background-color: var(--aocod-surface-2, var(--aocod-surface));
}

.aocod-reach__h {
	display: block;
	margin-bottom: 10px;
	font-family: var(--aocod-head, inherit);
	font-size: 13.5px;
	font-weight: 750;
}

.aocod-reach__row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.aocod-reach__b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	flex: 1 1 160px;
	min-height: 48px;
	padding: 12px 18px;
	border: 1px solid transparent;
	border-radius: var(--aocod-r-sm, 9px);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none !important;
	transition: transform .14s var(--aocod-ease), filter .18s var(--aocod-ease);
}

.aocod-reach__b:hover { transform: translateY(-1px); filter: brightness(1.05); }
.aocod-reach__b svg { width: 18px; height: 18px; flex: none; }

.aocod-reach__b--wa {
	color: #ffffff;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, #12903f, #0c6a2e);
	background-color: #0f7a37;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 18px -12px rgba(15, 122, 55, .8);
}

.aocod-reach__b--sms {
	color: var(--aocod-on-primary);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600));
	background-color: var(--aocod-primary);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 8px 18px -12px var(--aocod-glow);
}

.aocod-reach .aocod-help { margin: 10px 0 0; }

.aocod-reach__peek { margin-top: 10px; }

.aocod-reach__peek summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 650;
	padding: 7px 0;
	min-height: 34px;
}

.aocod-reach__pre {
	margin: 8px 0;
	padding: 12px 14px;
	max-height: 260px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--aocod-border);
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Section 1b paints every .aocod a in the body colour and every .aocod-submit
   in the brand, so both of these need one more class to keep their own. */
.aocod .aocod-reach__b--wa,
.aocod .aocod-reach__b--wa:visited,
.aocod .aocod-reach__b--wa span { color: #ffffff !important; }

.aocod .aocod-reach__b--wa {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, #12903f, #0c6a2e) !important;
	background-color: #0f7a37 !important;
}

.aocod .aocod-reach__b--sms,
.aocod .aocod-reach__b--sms:visited { color: var(--aocod-on-primary) !important; }

.aocod .aocod-reach__b--sms {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600)) !important;
	background-color: var(--aocod-primary) !important;
}

.aocod .aocod-reach__h,
.aocod .aocod-reach__peek summary { color: var(--aocod-text) !important; }
.aocod .aocod-reach__pre { color: var(--aocod-text) !important; }

@media (max-width: 480px) {
	.aocod-reach__row { flex-direction: column; }
	.aocod-reach__b { flex: 1 1 auto; }
}

/* ═══════════ 27. THEIR OWN ORDER HISTORY ═══════════ */

.aocod-history__n {
	margin: 0 0 12px !important;
	font-size: 13px;
	font-weight: 650;
}

.aocod-history__h { margin: 22px 0 10px !important; }

.aocod-history__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aocod-past {
	padding: 14px;
	border: 1px solid var(--aocod-border);
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	transition: border-color .16s var(--aocod-ease);
}

.aocod-past:hover { border-color: var(--aocod-primary); }

.aocod-past__top {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.aocod-past__no {
	display: block;
	font-family: var(--aocod-head, inherit);
	font-size: 15px;
	font-weight: 750;
}

.aocod-past__when { display: block; font-size: 12.5px; }

.aocod-past__what {
	margin: 0 0 12px !important;
	font-size: 13.5px;
	line-height: 1.5;
}

.aocod-past__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}

.aocod-past__tot { font-size: 15.5px; font-weight: 750; }

.aocod-past__no2 { font-size: 12.5px; max-width: 42ch; }

.aocod-trackCard__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--aocod-border-soft);
}

.aocod-again {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	color: var(--aocod-on-primary);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600));
	background-color: var(--aocod-primary);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 8px 18px -12px var(--aocod-glow);
	transition: transform .14s var(--aocod-ease), filter .18s var(--aocod-ease);
}

.aocod-again:hover { transform: translateY(-1px); filter: brightness(1.05); }
.aocod-again svg { width: 16px; height: 16px; flex: none; }
.aocod-again[disabled] { opacity: .75; cursor: wait; transform: none; }

.aocod-again__said {
	flex: 1 1 100%;
	margin: 8px 0 0 !important;
	font-size: 12.5px;
	line-height: 1.5;
}

/* the form says so when it filled itself in from a repeat order */
.aocod-form.is-prefilled .aocod-field--date::after,
form.is-prefilled .aocod-field--date::after {
	content: "";
	display: block;
}

/* Section 1b again: a class alone loses to .aocod a and .aocod .aocod-submit. */
.aocod .aocod-again,
.aocod .aocod-again span { color: var(--aocod-on-primary) !important; }

.aocod .aocod-again {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 56%),
		linear-gradient(180deg, var(--aocod-primary), var(--aocod-primary-600)) !important;
	background-color: var(--aocod-primary) !important;
	border: 0 !important;
	text-transform: none !important;
	font-size: 14px !important;
	padding: 12px 20px !important;
}

.aocod .aocod-past__when,
.aocod .aocod-past__no2,
.aocod .aocod-past__what,
.aocod .aocod-again__said { color: var(--aocod-muted) !important; }

.aocod .aocod-past__no,
.aocod .aocod-past__tot,
.aocod .aocod-history__n { color: var(--aocod-text) !important; }

@media (max-width: 480px) {
	.aocod-past__foot { flex-direction: column; align-items: stretch; }
	.aocod-past__tot { text-align: left; }
	.aocod-again { width: 100%; }
	.aocod-trackCard__foot { justify-content: stretch; }
	.aocod-trackCard__foot .aocod-again { width: 100%; }
}

/* ═══════════ 28. DAY VIEWS AND THE MONTH GRID ═══════════ */

.aocod-days {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--aocod-border-soft);
}

.aocod-days__h {
	font-size: 11.5px;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-right: 2px;
}

/* Most chips are links, which the theme leaves alone. This one is a button,
   and a theme that paints every button yellow wins against a plain background
   declaration. Section 1b's fight, one more time. */
.aocod .aocod-chip--cal {
	cursor: pointer;
	font: inherit;
	font-size: 13px !important;
	font-weight: 650;
	text-transform: none !important;
	padding: 8px 14px !important;
	border: 1px solid var(--aocod-border) !important;
	background-image: none !important;
	background-color: var(--aocod-surface) !important;
	color: var(--aocod-text) !important;
}

.aocod .aocod-chip--cal.is-on { border-color: var(--aocod-primary) !important; }

.aocod-cal3 {
	margin: 0 0 16px;
	padding: clamp(12px, 2vw, 18px);
	border: 1px solid var(--aocod-border);
	border-radius: var(--aocod-r, 16px);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	box-shadow: 0 1px 2px var(--aocod-shadow), 0 18px 34px -30px var(--aocod-shadow);
}

.aocod-cal3__top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 12px;
}

.aocod-cal3__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	flex: none;
	border: 1px solid var(--aocod-border);
	border-radius: 999px;
	text-decoration: none !important;
	transition: border-color .16s var(--aocod-ease);
}

.aocod-cal3__nav:hover { border-color: var(--aocod-primary); }
.aocod-cal3__top h3 { flex: 1 1 auto; text-align: center; margin: 0 !important; }

.aocod-cal3__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.aocod-cal3__dow {
	padding: 4px 2px 8px;
	text-align: center;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.aocod-cal3__pad { min-height: 10px; }

.aocod-cal3__d {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 74px;
	padding: 7px 6px;
	border: 1px solid var(--aocod-border-soft);
	border-radius: var(--aocod-r-sm, 9px);
	text-decoration: none !important;
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	transition: border-color .14s var(--aocod-ease), transform .12s var(--aocod-ease);
}

a.aocod-cal3__d:hover { border-color: var(--aocod-primary); transform: translateY(-1px); }

.aocod-cal3__d b { font-size: 13.5px; font-weight: 750; line-height: 1.1; }
.aocod-cal3__c { font-size: 11px; line-height: 1.3; }
.aocod-cal3__d em { font-style: normal; font-size: 11.5px; font-weight: 700; margin-top: auto; }

.aocod-cal3__d.is-empty { opacity: .55; }
.aocod-cal3__d.is-today { border-color: var(--aocod-primary); box-shadow: 0 0 0 2px var(--aocod-glow); }

/* Four steps of weight rather than a colour scale, so a busy day reads at a
   glance and nobody has to learn a legend. The brand tint carries it, which
   means it works whatever colour the shop is. */
.aocod-cal3__d.is-heat1 { background-color: color-mix(in srgb, var(--aocod-primary) 8%, var(--aocod-surface)); }
.aocod-cal3__d.is-heat2 { background-color: color-mix(in srgb, var(--aocod-primary) 16%, var(--aocod-surface)); }
.aocod-cal3__d.is-heat3 { background-color: color-mix(in srgb, var(--aocod-primary) 26%, var(--aocod-surface)); }
.aocod-cal3__d.is-heat4 { background-color: color-mix(in srgb, var(--aocod-primary) 38%, var(--aocod-surface)); }

/* A browser with no color-mix falls back to the plain surface, which is
   readable, just flatter. */
@supports not (background-color: color-mix(in srgb, red 10%, blue)) {
	.aocod-cal3__d.is-heat3,
	.aocod-cal3__d.is-heat4 { border-color: var(--aocod-primary); }
}

.aocod-cal3__sum {
	margin: 12px 0 0 !important;
	text-align: center;
	font-size: 13px;
}

.aocod .aocod-cal3__dow,
.aocod .aocod-cal3__c,
.aocod .aocod-cal3__sum,
.aocod .aocod-cal3__d em,
.aocod .aocod-days__h { color: var(--aocod-muted) !important; }

.aocod .aocod-cal3__d b { color: var(--aocod-text) !important; }
.aocod .aocod-cal3__d.is-heat3 b,
.aocod .aocod-cal3__d.is-heat4 b { color: var(--aocod-text) !important; }

/* ═══════════ 29. DELIVERY OR PICKUP ═══════════ */

.aocod-mode {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	margin-left: 6px;
	border-radius: 999px;
	border: 1px solid var(--aocod-border);
	background: var(--aocod-surface-3);
	background-color: var(--aocod-surface-3);
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	vertical-align: middle;
}

.aocod-mode svg { width: 13px; height: 13px; flex: none; }
.aocod-mode--delivery { border-color: var(--aocod-primary); }
.aocod-mode--pickup { border-color: var(--aocod-ok); }

.aocod-mode--under {
	border-color: var(--aocod-bad);
	background: transparent;
	background-color: transparent;
	white-space: normal;
}

/* Which delivery area an order fell in, next to the delivery badge. */
.aocod-mode--area {
	border-color: var(--aocod-primary);
	background: transparent;
	background-color: transparent;
}

.aocod .aocod-mode { color: var(--aocod-text) !important; }
.aocod .aocod-mode--under { color: var(--aocod-bad) !important; }

/* The badge rides inside the status pill on a row, so it must not inherit the
   pill's own padding fight. */
.aocod-ordRow .aocod-mode { margin-left: 8px; }

/* ═══════════ 30. THE CUSTOMER CARD ═══════════ */

.aocod-who {
	grid-column: 1 / -1;
	margin: 0 0 16px;
	padding: clamp(14px, 2vw, 20px);
	border: 1px solid var(--aocod-border);
	border-radius: var(--aocod-r, 16px);
	background: var(--aocod-surface);
	background-color: var(--aocod-surface);
	box-shadow: 0 1px 2px var(--aocod-shadow);
}

.aocod-who__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin: 12px 0 0;
}

.aocod-who__s {
	padding: 12px;
	border-radius: var(--aocod-r-sm, 9px);
	background: var(--aocod-surface-2, var(--aocod-surface-3));
	background-color: var(--aocod-surface-2, var(--aocod-surface-3));
	text-align: center;
}

.aocod-who__s b {
	display: block;
	font-family: var(--aocod-head, inherit);
	font-size: clamp(17px, 2.2vw, 21px);
	font-weight: 750;
	line-height: 1.15;
}

.aocod-who__s span { display: block; margin-top: 3px; font-size: 11.5px; }

.aocod-who__new {
	margin: 12px 0 0 !important;
	padding: 10px 12px;
	border-radius: var(--aocod-r-sm, 9px);
	border: 1px dashed var(--aocod-primary);
	font-size: 13px;
}

.aocod-who__h {
	margin: 18px 0 8px;
	font-family: var(--aocod-head, inherit);
	font-size: 13px;
	font-weight: 750;
}

.aocod-who__list { margin: 0; padding: 0; list-style: none !important; }

.aocod-who__list li { list-style: none !important; }

.aocod-who__list a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 4px 12px;
	align-items: center;
	padding: 10px 12px;
	margin-bottom: 6px;
	border: 1px solid var(--aocod-border-soft);
	border-radius: var(--aocod-r-sm, 9px);
	text-decoration: none !important;
	transition: border-color .14s var(--aocod-ease);
}

.aocod-who__list a:hover { border-color: var(--aocod-primary); }

.aocod-who__no { font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.aocod-who__when { font-size: 11.5px; text-align: right; white-space: nowrap; }
.aocod-who__what { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; }
.aocod-who__list a b { grid-row: 1; grid-column: 3; font-size: 13px; font-weight: 750; }

.aocod .aocod-who__s span,
.aocod .aocod-who__when,
.aocod .aocod-who__what { color: var(--aocod-muted) !important; }

.aocod .aocod-who__s b,
.aocod .aocod-who__no,
.aocod .aocod-who__h,
.aocod .aocod-who__new,
.aocod .aocod-who__list a b { color: var(--aocod-text) !important; }

/* ═══════════ 31. A NOTE THE CUSTOMER CAN READ ═══════════ */

.aocod-label--pub {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.aocod-eye {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--aocod-border);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.aocod-eye svg { width: 12px; height: 12px; }

/* The brand carries this block through its border and its icon, not through a
   tinted ground. The quiet heading inside it is a colour the PHP contrast
   checked against surface-3 and nothing else, so putting it on a brand tint
   instead was a promise the palette had never been asked to keep: on a yellow
   shop in dark mode it came out at 4.35:1. On surface-3 it is checked. */
.aocod-said {
	display: flex;
	gap: 11px;
	margin: 12px 0 0;
	padding: 13px 15px;
	border-radius: var(--aocod-r-sm, 9px);
	border: 1px solid var(--aocod-primary);
	border-left-width: 4px;
	background: var(--aocod-surface-3);
	background-color: var(--aocod-surface-3);
}

.aocod-said svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--aocod-primary); }
.aocod-said b { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.aocod-said p { margin: 0 !important; font-size: 14px; line-height: 1.55; }

.aocod .aocod-eye { color: var(--aocod-muted) !important; }
.aocod .aocod-said b { color: var(--aocod-muted) !important; }
.aocod .aocod-said p { color: var(--aocod-text) !important; }
.aocod .aocod-said svg { color: var(--aocod-primary) !important; }

/* the reach panel says louder when a step has its own message */
.aocod-reach.is-step { border-color: var(--aocod-primary); }

@media (max-width: 760px) {
	.aocod-cal3__d { min-height: 58px; padding: 5px 4px; }
	.aocod-cal3__c { display: none; }
	.aocod-cal3__d b { font-size: 12.5px; }
	.aocod-cal3__d em { font-size: 10.5px; }
	.aocod-days { gap: 6px; }
	.aocod-days__h { flex: 1 1 100%; }
	.aocod-who__list a { grid-template-columns: 1fr auto; }
	.aocod-who__when { grid-row: 2; grid-column: 1; text-align: left; }
	.aocod-who__list a b { grid-row: 2; grid-column: 2; }
	.aocod-who__what { grid-row: 3; }
}

@media (max-width: 420px) {
	.aocod-cal3 { padding: 10px 8px; }
	.aocod-cal3__grid { gap: 3px; }
	.aocod-cal3__d { min-height: 48px; }
	.aocod-cal3__d em { display: none; }
	.aocod-who__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════ 32. WHAT A DELIVERY COSTS ═══════════ */

.aocod-sum__free {
	margin: 10px 0 0 !important;
	padding: 9px 12px;
	border-radius: var(--aocod-r-sm, 9px);
	border: 1px dashed var(--aocod-ok);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.45;
	text-align: center;
}

.aocod .aocod-sum__free { color: var(--aocod-text) !important; }

/* The block is replaced by the server when the customer picks, so it is faded
   rather than emptied: a total that vanishes and comes back reads as a fault. */
.aocod-sum.is-asking { opacity: .55; transition: opacity .12s var(--aocod-ease); }

@media (prefers-reduced-motion: reduce) {
	.aocod-sum.is-asking { transition: none; }
}

/* ═══════════ 33. WHEN THE BROWSER WOULD NOT OPEN THE TAB ═══════════ */

/* A page is only allowed to open a tab for a few seconds after a tap, so the
   handover to WhatsApp is a genuine attempt that can be refused. Nothing has
   gone wrong when it is. The button below the message is a real link and it
   always works, so it is lit up and handed the keyboard, and the customer has
   one obvious thing to press instead of a page that went nowhere. */

.aocod-wa.is-waiting {
	animation: aocod-wa-beat 1.9s var(--aocod-ease) infinite;
}

/* Two rings: the inner one is the surface, so the outer green reads as a halo
   on a light box and on a dark one. Written at .aocod .aocod-wa.is-waiting so
   it outranks both the shadow set on the resting button and a theme that puts
   !important on every button it can find. */
.aocod .aocod-wa.is-waiting {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .3) inset,
		0 10px 22px -12px rgba(29, 168, 81, .85),
		0 0 0 3px var(--aocod-surface),
		0 0 0 6px #1da851 !important;
}

@keyframes aocod-wa-beat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

/* The ring carries the message on its own, so section 12 stopping the movement
   for anyone who asked for less of it costs nothing. */

/* ═══════════ 34. WHERE WE DELIVER ═══════════ */

/* The answer to the postcode, printed under the box while they are still
   filling the form rather than after they have pressed Submit. */
.aocod-area {
	margin: 7px 0 0 !important;
	padding: 8px 11px;
	border-radius: var(--aocod-r-sm, 9px);
	border: 1px solid var(--aocod-border);
	background-color: var(--aocod-surface-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.aocod-area[hidden] { display: none !important; }

/* Ink is set at .aocod .class so a theme painting every paragraph on the page
   the same grey does not win, and the two states are told apart by their
   border rather than by colour alone. */
.aocod .aocod-area { color: var(--aocod-text) !important; }

.aocod-area.is-in {
	border-color: var(--aocod-ok);
	border-left: 4px solid var(--aocod-ok);
}

.aocod-area.is-out {
	border-color: var(--aocod-bad);
	border-left: 4px solid var(--aocod-bad);
}

/* The small order fee is worth explaining rather than only charging, so it
   gets the same treatment as the free delivery line above it. */
.aocod-sum__free--small { border-style: solid; }

.aocod .aocod-sum__free--small { color: var(--aocod-text) !important; }

/* ═══════════ 35. THE DELIVERY RULE ═══════════ */

/* The one sentence that governs the delivery or pickup question, printed with
   the question rather than somewhere the customer has to go and find after
   they have already chosen. */
.aocod-rule {
	margin: 10px 0 0 !important;
	padding: 9px 12px;
	border-radius: var(--aocod-r-sm, 9px);
	border: 1px solid var(--aocod-border);
	border-left: 4px solid var(--aocod-primary);
	background-color: var(--aocod-surface-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

.aocod .aocod-rule { color: var(--aocod-text) !important; }

/* ═══════════ 36. THE DROPDOWN LIST ═══════════ */

/* A native select popup is drawn by the operating system, and it takes the
   ink colour from the select while painting its own background white. Our
   select is transparent over a dark bar, so its ink is near white, and the
   list came out white on white: open, correctly sized, and completely
   unreadable. Saying both halves out loud is the whole fix. */
.aocod select option,
.aocod select optgroup,
.aocod-search select option,
.aocod-search select optgroup {
	background-color: var(--aocod-surface) !important;
	color: var(--aocod-text) !important;
	font-weight: 500;
}

/* The one already chosen, so the list says where you are. */
.aocod select option:checked,
.aocod-search select option:checked {
	background-color: var(--aocod-surface-3) !important;
	color: var(--aocod-text) !important;
	font-weight: 700;
}

/* ═══════════ 37. CHANGING THE ORDER ═══════════ */

/* Fewer, more, remove, on every line of the basket. A host theme paints bare
   buttons with its own background, border and uppercase text, which turns a
   neat pair of steppers into two yellow bricks, so every declaration here is
   made at a specificity the theme cannot reach past. */
.aocod .aocod-step {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.aocod .aocod-step__b,
.aocod .aocod-step__x {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px;
	background: var(--aocod-surface-2) !important;
	border: 1px solid var(--aocod-border) !important;
	color: var(--aocod-text) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

/* 32px keeps the tap target honest on a phone without the row growing. */
.aocod .aocod-step__b {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	font-size: 0 !important;
	flex: none;
}

/* The click has to land on the button, not on the icon inside it. Without
   this a tap on the bare plus arrives with an SVG as its target, and an older
   browser that has no closest() on SVG elements would drop it. */
.aocod .aocod-step__b svg,
.aocod .aocod-step__x svg { pointer-events: none; }

.aocod .aocod-step__b svg { width: 15px; height: 15px; display: block; }

.aocod .aocod-step__b:hover:not(:disabled),
.aocod .aocod-step__x:hover {
	background: var(--aocod-surface-3) !important;
	border-color: var(--aocod-accent) !important;
}

.aocod .aocod-step__b:disabled {
	opacity: .38;
	cursor: not-allowed;
}

/* The count sits between the two buttons and must not shuffle them sideways
   when it goes from 9 to 10, hence the fixed width and the lining figures. */
.aocod .aocod-step__n {
	min-width: 26px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--aocod-text) !important;
}

.aocod .aocod-step__x {
	height: 32px !important;
	padding: 0 10px !important;
	font-size: 12px !important;
	color: var(--aocod-muted) !important;
	margin-left: 2px;
}

.aocod .aocod-step__x:hover { color: var(--aocod-bad) !important; }
.aocod .aocod-step__x svg { width: 14px; height: 14px; flex: none; }

/* A line waiting on the shop dims rather than jumping, so the page does not
   flinch on a slow connection. */
.aocod .aocod-line.is-working { opacity: .5; }
.aocod .aocod-line.is-working button { cursor: progress; }

/* On a narrow phone the remove label is the first thing worth giving up: the
   bin and its spoken name carry the meaning on their own. */
@media (max-width: 420px) {
	.aocod .aocod-step__x span { display: none; }
	.aocod .aocod-step__x { padding: 0 9px !important; }
}

/* What went wrong, said on the line it went wrong on. The form's own alert
   box is in the other column and a screen further down on a phone, which is
   no use to somebody wondering why the button did nothing. */
.aocod .aocod-line__say {
	margin: 6px 0 0 !important;
	font-size: 12.5px !important;
	font-weight: 600;
	color: var(--aocod-bad) !important;
	line-height: 1.4;
}

/* ═══════════ 38. MOVING AN ORDER ALONG FROM THE LIST ═══════════ */

/* The one thing done twenty times a day, taken out of the order and put on
   the row. It sits beside the link rather than inside it, because a select
   inside an anchor is a fight between the two every time it is opened. */
.aocod .aocod-ordStep {
	flex: none;
	display: flex;
	align-items: center;
	align-self: stretch;
}

.aocod .aocod-ordStep select {
	height: 34px !important;
	min-height: 34px !important;
	max-width: 150px;
	padding: 0 28px 0 11px !important;
	border-radius: 8px !important;
	border: 1px solid var(--aocod-border) !important;
	background: var(--aocod-surface-2) !important;
	color: var(--aocod-text) !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}

.aocod .aocod-ordStep select:hover:not(:disabled) { border-color: var(--aocod-accent) !important; }
.aocod .aocod-ordStep select:disabled { opacity: .5; cursor: progress; }

/* the popup the operating system draws, same problem as the search dropdown */
.aocod .aocod-ordStep select option {
	background-color: var(--aocod-surface) !important;
	color: var(--aocod-text) !important;
}

/* On a phone the row is already stacked, so the control goes full width
   underneath rather than squeezing the total off the side. */
@media (max-width: 720px) {
	.aocod .aocod-ordWrap { flex-wrap: wrap; }
	.aocod .aocod-ordStep { width: 100%; margin-top: 8px; }
	.aocod .aocod-ordStep select { max-width: 100%; width: 100%; }
}

/* ═══════════ 39. THE BAR ALONG THE BOTTOM OF A PHONE ═══════════ */

/* Hidden by default and revealed by a width the shop chooses, which is why the
   media query is written by the script rather than sat here: a fixed
   breakpoint would be one more thing nobody could change. */
.aocod-bar { display: none; }

.aocod-bar.is-on {
	display: flex;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	background: var(--aocod-surface, #fff) !important;
	border-top: 1px solid var(--aocod-border, #e3e3e3);
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .09);
	/* a phone with a home bar of its own must not sit on top of these */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.aocod-bar .aocod-bar__b {
	flex: 1 1 0;
	min-width: 0;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 8px 2px 7px !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--aocod-text, #1a1a1a) !important;
	font-family: inherit !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	/* 52px is the smallest a thumb finds reliably */
	min-height: 52px;
	cursor: pointer;
}

.aocod-bar .aocod-bar__b:active { background: var(--aocod-surface-2, #f4f4f4) !important; }

.aocod-bar .aocod-bar__i { position: relative; display: block; line-height: 0; }
.aocod-bar .aocod-bar__i svg { width: 22px; height: 22px; display: block; }

.aocod-bar .aocod-bar__t {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The count. Sits on the icon, never grows the button, and reads as a number
   rather than as decoration. */
.aocod-bar .aocod-bar__n {
	position: absolute;
	top: -6px;
	left: 13px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--aocod-accent, #c0392b) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* The search, which opens over the page rather than sending anybody away. */
.aocod-barFind {
	position: fixed;
	inset: 0;
	z-index: 9991;
	background: rgba(0, 0, 0, .55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 14px;
}

.aocod-barFind__in {
	position: relative;
	width: 100%;
	max-width: 560px;
	background: var(--aocod-surface, #fff);
	border-radius: var(--aocod-r, 14px);
	padding: 46px 16px 18px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}

.aocod-barFind__x {
	position: absolute !important;
	top: 8px;
	right: 8px;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--aocod-surface-2, #eee) !important;
	color: var(--aocod-text, #222) !important;
	font-size: 20px !important;
	line-height: 1;
	box-shadow: none !important;
	cursor: pointer;
}

/* ═══════════ 40. LIGHT OR DARK, BLOCK BY BLOCK ═══════════ */

/* The reader's own switch, in the corner of whichever block it belongs to.
   Small enough to ignore, large enough to hit. */
.aocod .aocod-skinBtn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--aocod-border) !important;
	border-radius: 999px !important;
	background: var(--aocod-surface-2) !important;
	color: var(--aocod-muted) !important;
	box-shadow: none !important;
	cursor: pointer;
	opacity: .7;
	transition: opacity .18s ease, border-color .18s ease, color .18s ease;
}

.aocod .aocod-skinBtn:hover {
	opacity: 1;
	color: var(--aocod-text) !important;
	border-color: var(--aocod-accent) !important;
}

/* the block needs somewhere for the corner to be */
.aocod[data-aocod-skinnable] { position: relative; }

/* One icon at a time: the sun when it is dark, because that is what pressing
   it would give you, and the moon when it is light. */
.aocod .aocod-skinBtn__sun { display: none; }
.aocod .aocod-skinBtn__moon { display: block; }
.aocod[data-aocod-skin="dark"] .aocod-skinBtn__sun { display: block; }
.aocod[data-aocod-skin="dark"] .aocod-skinBtn__moon { display: none; }

@media (prefers-color-scheme: dark) {
	.aocod[data-aocod-skin="auto"] .aocod-skinBtn__sun { display: block; }
	.aocod[data-aocod-skin="auto"] .aocod-skinBtn__moon { display: none; }
}

/* A heading under the button must not run into it. */
.aocod[data-aocod-skinnable] > .aocod-grid > .aocod-col:first-child > .aocod-h,
.aocod[data-aocod-skinnable] > .aocod-track__box > .aocod-h { padding-right: 44px; }

/* ═══════════ 41. WHAT IS HIDDEN STAYS HIDDEN ═══════════ */

/* The browser hides anything carrying the hidden attribute with a rule of its
   own, and that rule is the weakest one on the page: a display named anywhere
   in this stylesheet beats it. So a panel written with a display of its own
   paints itself over every page of the shop, whatever the attribute says. It
   happened to the bar's search box, which covered the page and quietly ate
   every click aimed at what was underneath it, and it happened to the bar of
   actions for picked orders.

   Patching those one at a time is how the third one gets written. This is the
   whole plugin in a single rule, at the end of the file so it has the last
   word, and shouted because a theme that shouts is the reason this stylesheet
   shouts back. The one exception the browser has for find-in-page is left
   alone. */
[class*="aocod-"][hidden]:not([hidden="until-found"]),
[class*="aocod-"] [hidden]:not([hidden="until-found"]),
[id^="aocod-"][hidden]:not([hidden="until-found"]) { display: none !important; }

/* ═══════════ 42. WHERE THEY ARE STANDING ═══════════ */

/* The two buttons under an address box. Small, quiet, and clearly not the
   thing that sends the order. */
.aocod .aocod-pin {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.aocod .aocod-pin__b {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	min-height: 40px;
	padding: 8px 13px !important;
	margin: 0 !important;
	border: 1px solid var(--aocod-border, #d9d9d9) !important;
	border-radius: var(--aocod-r-sm, 9px) !important;
	background: var(--aocod-surface-2, #f4f4f4) !important;
	color: var(--aocod-text, #1a1a1a) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.aocod .aocod-pin__b:hover { background: var(--aocod-surface-3, #ececec) !important; }

.aocod .aocod-pin__b[disabled],
.aocod .aocod-pin__b.is-busy { opacity: .6; cursor: progress; }

.aocod .aocod-pin__b svg { flex: 0 0 auto; }

.aocod .aocod-pin__said {
	flex: 1 1 100%;
	margin: 0 !important;
	color: var(--aocod-muted, #666) !important;
	font-size: 12.5px !important;
	line-height: 1.45;
}

.aocod .aocod-pin__said.is-bad { color: var(--aocod-bad, #b3261e) !important; }

/* On a narrow phone the two buttons take a row each rather than squeezing. */
@media (max-width: 420px) {
	.aocod .aocod-pin__b { flex: 1 1 100%; justify-content: center; }
}