/*!
 * 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 ═══════════ */

.aocod-receipt { display: none; }

.aocod-receipt__in { font-family: var(--aocod-body, inherit); color: #000; }

.aocod-receipt__top { text-align: center; margin-bottom: 10px; }
.aocod-receipt__top strong { display: block; font-size: 15pt; font-family: var(--aocod-head, inherit); }
.aocod-receipt__top span { display: block; font-size: 8pt; margin-top: 3px; }

.aocod-receipt__no {
	text-align: center;
	font-size: 12pt;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 6px 0;
	border-top: 1px dashed #000;
	border-bottom: 1px dashed #000;
}

.aocod-receipt__when { text-align: center; font-size: 8.5pt; margin: 6px 0 10px; }

.aocod-receipt__t { width: 100%; border-collapse: collapse; font-size: 9pt; }
.aocod-receipt__t td { padding: 4px 0; vertical-align: top; }
.aocod-receipt__q { text-align: center; white-space: nowrap; padding-inline: 6px !important; }
.aocod-receipt__p { text-align: right; white-space: nowrap; }
.aocod-receipt__t tfoot td {
	border-top: 1px dashed #000;
	padding-top: 7px;
	font-weight: 700;
	font-size: 11pt;
}

.aocod-receipt__d {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px dashed #000;
	font-size: 8.5pt;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 3px 8px;
}

.aocod-receipt__d dt { font-weight: 700; }
.aocod-receipt__d dd { margin: 0; overflow-wrap: anywhere; }

.aocod-receipt__note {
	margin-top: 9px;
	padding: 6px 8px;
	border: 1px dashed #000;
	font-size: 8.5pt;
}

.aocod-receipt__note b { display: block; }

.aocod-receipt__foot {
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px dashed #000;
	text-align: center;
	font-size: 8pt;
}

@media print {
	body.aocod-printing > *:not(.aocod-print-host) { display: none !important; }

	/* A theme wraps the page in its own containers, so the app root is rarely a
	   direct child of body. Name it as well. */
	body.aocod-printing .aocod-orders,
	body.aocod-printing .aocod-search,
	body.aocod-printing .aocod-grid,
	body.aocod-printing .aocod-modal { display: none !important; }

	body.aocod-printing .aocod-print-host,
	body.aocod-printing .aocod-print-host * { display: revert; }

	body.aocod-printing .aocod-receipt {
		display: block !important;
		position: static !important;
	}

	body.aocod-printing .aocod-receipt__in {
		width: 100%;
		margin: 0 auto;
		color: #000 !important;
		background: #fff !important;
	}

	body.aocod-printing .aocod-receipt * {
		color: #000 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	body.aocod-printing[data-paper="80mm"] .aocod-receipt__in { max-width: 72mm; }
	body.aocod-printing[data-paper="58mm"] .aocod-receipt__in { max-width: 50mm; font-size: 8pt; }
	body.aocod-printing[data-paper="a4"] .aocod-receipt__in { max-width: 170mm; }
	body.aocod-printing[data-paper="letter"] .aocod-receipt__in { max-width: 175mm; }
	body.aocod-printing[data-paper="a5"] .aocod-receipt__in { max-width: 125mm; }
}

/* ═══════════ 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);
}

.aocod-tickBox,
.aocod-all {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
}

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

.aocod-tickBox input[type="checkbox"],
.aocod-all input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	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-tickBox input[type="checkbox"]:checked,
.aocod-all input[type="checkbox"]:checked,
.aocod-all input[type="checkbox"]:indeterminate {
	border-color: var(--aocod-primary) !important;
	background-color: var(--aocod-primary) !important;
}

.aocod-tickBox input[type="checkbox"]:checked::after,
.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-all input[type="checkbox"]:indeterminate::after {
	content: "";
	position: absolute;
	left: 3px; top: 7px;
	width: 10px; height: 2.4px;
	background: var(--aocod-on-primary);
}

.aocod-tickBox input[type="checkbox"]:focus-visible,
.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; }

/* the print sheet: many receipts, one after another */

.aocod-sheet { display: none; }

.aocod-sheet__one + .aocod-sheet__one { margin-top: 14px; }

@media (max-width: 760px) {
	.aocod-bulk {
		position: static;
		flex-direction: column;
		align-items: stretch;
	}
	.aocod-bulk__n {
		border-right: 0;
		border-bottom: 1px solid var(--aocod-border-soft);
		padding: 0 0 8px;
		margin: 0;
	}
	.aocod-bulk__sel { flex: 1 1 auto; }
	.aocod-bulk .aocod-submit--slim { width: 100%; }
	.aocod-bulk__off { margin-left: 0; }
	.aocod-tickBox { width: 42px; }
}

@media print {
	/* Each receipt in a batch starts its own page, so a stack comes off the
	   printer as a stack rather than one long ribbon. */
	body.aocod-printing .aocod-sheet { display: block !important; }

	body.aocod-printing .aocod-sheet__one {
		display: block !important;
		break-after: page;
		page-break-after: always;
		margin: 0 !important;
	}

	body.aocod-printing .aocod-sheet__one:last-child {
		break-after: auto;
		page-break-after: auto;
	}

	body.aocod-printing .aocod-bulk,
	body.aocod-printing .aocod-all,
	body.aocod-printing .aocod-tickBox { display: none !important; }
}

/* ═══════════ 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; }
}

@media print {
	body.aocod-printing .aocod-reach { display: none !important; }
}

/* ═══════════ 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)); }
}

@media print {
	body.aocod-printing .aocod-days,
	body.aocod-printing .aocod-cal3,
	body.aocod-printing .aocod-who { display: none !important; }
}

/* ═══════════ 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;
}