/**
 * Catering builder frontend styles.
 *
 * Scoped under .gail-catering so nothing leaks into the theme or Elementor.
 * Everything sizes from CSS custom properties, which a child theme can override
 * without touching this file.
 */

.gail-catering {
	--gail-accent: #8c1d2c;
	--gail-accent-ink: #fff;
	--gail-ink: #1e1e1e;
	--gail-muted: #6b6b6b;
	--gail-line: #e3e3e3;
	--gail-surface: #fff;
	--gail-radius: 10px;

	color: var(--gail-ink);
	position: relative;
	/* Clearance for the theme's fixed header when a step change scrolls the top of
	   the builder back into view. Raise it if the header ever gets taller. */
	scroll-margin-top: 120px;
}

.gail-catering *,
.gail-catering *::before,
.gail-catering *::after {
	box-sizing: border-box;
}

/* Steps ------------------------------------------------------------------- */

.gail-catering .gail-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.gail-catering .gail-steps__step {
	align-items: center;
	color: var(--gail-muted);
	display: flex;
	flex: 1 1 160px;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 3px solid var(--gail-line);
}

.gail-catering .gail-steps__step.is-current,
.gail-catering .gail-steps__step.is-done {
	border-bottom-color: var(--gail-accent);
	color: var(--gail-ink);
}

.gail-catering .gail-steps__num {
	align-items: center;
	background: var(--gail-line);
	border-radius: 50%;
	display: flex;
	flex: 0 0 26px;
	font-size: 13px;
	font-weight: 700;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.gail-catering .gail-steps__step.is-current .gail-steps__num,
.gail-catering .gail-steps__step.is-done .gail-steps__num {
	background: var(--gail-accent);
	color: var(--gail-accent-ink);
}

/* Menu cards -------------------------------------------------------------- */

.gail-catering .gail-menus {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gail-catering .gail-menu-card {
	background: var(--gail-surface);
	border: 2px solid var(--gail-line);
	border-radius: var(--gail-radius);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	text-align: left;
	transition: border-color .15s ease, transform .15s ease;
	width: 100%;
}

.gail-catering .gail-menu-card:hover,
.gail-catering .gail-menu-card:focus-visible {
	border-color: var(--gail-accent);
	transform: translateY(-2px);
}

.gail-catering .gail-menu-card.is-selected {
	border-color: var(--gail-accent);
}

.gail-catering .gail-menu-card__name {
	font-size: 20px;
	font-weight: 700;
}

.gail-catering .gail-menu-card__meta {
	color: var(--gail-muted);
	font-size: 14px;
}

/* Sections and items ------------------------------------------------------ */

.gail-catering .gail-sections {
	/* Room for the sticky bar, so the last row can always be scrolled clear. */
	padding-bottom: 80px;
}

/* Only rendered when the shortcode locks the builder to one menu. */
.gail-catering .gail-sections__title {
	font-size: 24px;
	margin: 0 0 24px;
}

.gail-catering .gail-section {
	margin: 0 0 32px;
}

.gail-catering .gail-section__title {
	border-bottom: 2px solid var(--gail-line);
	font-size: 20px;
	margin: 0 0 16px;
	padding-bottom: 8px;
}

.gail-catering .gail-section__items {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.gail-catering .gail-item {
	background: var(--gail-surface);
	border: 1px solid var(--gail-line);
	border-radius: var(--gail-radius);
	display: flex;
	gap: 12px;
	padding: 12px;
	/* The summary bar is sticky to the bottom of the viewport and floats over
	   whatever is beneath it. Keep an item's controls clear of it whenever the
	   browser scrolls one into view (anchor jump, focus, keyboard nav). */
	scroll-margin-bottom: 96px;
}

.gail-catering .gail-item.is-selected {
	border-color: var(--gail-accent);
	box-shadow: inset 3px 0 0 var(--gail-accent);
}

/*
 * The thumbnail is a button — it opens the item popup. Element-qualified and
 * reset hard, because the theme's bare `button` rule (padding: 15px 95px) would
 * otherwise blow it out to 200px wide and push the card's text off the row.
 */
.gail-catering .gail-item button.gail-item__thumb {
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	display: block;
	flex: 0 0 96px;
	height: 96px;
	margin: 0;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 96px;
}

.gail-catering .gail-item__img {
	border-radius: 8px;
	display: block;
	height: 96px;
	object-fit: cover;
	width: 96px;
}

.gail-catering .gail-item__img--empty {
	background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 6px, #ececec 6px, #ececec 12px);
}

/* A magnifier that fades in over the photo, so the thumbnail reads as openable
   rather than decorative. Hidden from the a11y tree — the button already has a
   label — and it never affects layout, so it cannot shift the card. */
.gail-catering .gail-item__zoom {
	align-items: center;
	background: rgba(0, 0, 0, .45);
	border-radius: 8px;
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	position: absolute;
	transition: opacity .15s ease;
}

.gail-catering .gail-item__zoom::after {
	background-color: #fff;
	content: "";
	height: 22px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 22px;
}

.gail-catering .gail-item button.gail-item__thumb:hover .gail-item__zoom,
.gail-catering .gail-item button.gail-item__thumb:focus-visible .gail-item__zoom {
	opacity: 1;
}

/*
 * The name is a button too, but it has to keep looking like a heading — including
 * wrapping like one. The theme sets `white-space: nowrap` on bare buttons, which
 * held a long dish name on a single line and pushed it out past the card.
 */
.gail-catering .gail-item__name button.gail-item__name-btn {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline;
	font: inherit;
	min-height: 0;
	padding: 0;
	text-align: left;
	white-space: normal;
	width: auto;
}

.gail-catering .gail-item__name button.gail-item__name-btn:hover,
.gail-catering .gail-item__name button.gail-item__name-btn:focus-visible {
	color: var(--gail-accent);
	text-decoration: underline;
}

.gail-catering .gail-item button.gail-item__details {
	align-self: flex-start;
	background: none;
	border: 0;
	color: var(--gail-accent);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	min-height: 0;
	padding: 0;
	text-align: left;
	text-decoration: underline;
	width: auto;
}

.gail-catering .gail-item__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.gail-catering .gail-item__name {
	font-size: 16px;
	margin: 0;
}

.gail-catering .gail-item__desc {
	color: var(--gail-muted);
	font-size: 13px;
	line-height: 1.45;
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.gail-catering .gail-item__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin-top: auto;
}

.gail-catering .gail-item__controls select.gail-item__size {
	/* Native arrow suppressed in favour of an inline SVG chevron, so the control
	   looks the same across browsers. The SVG is a data URI because a strict CSP
	   blocks external assets. */
	appearance: none;
	background-color: var(--gail-surface);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzc4M18zODc1IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjUiIGhlaWdodD0iMjUiPgo8cmVjdCB4PSIwLjYzMTgzNiIgeT0iMC42ODM1OTQiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfNzgzXzM4NzUpIj4KPHBhdGggZD0iTTEyLjYzMTggMTUuMzQ0OUMxMi41MTEzIDE1LjM0NDkgMTIuMzk5MiAxNS4zMjU3IDEyLjI5NTMgMTUuMjg3MkMxMi4xOTE1IDE1LjI0ODkgMTIuMDkyNyAxNS4xODI5IDExLjk5OTEgMTUuMDg5Mkw3LjUwNDgyIDEwLjU5NUM3LjM2NjQ4IDEwLjQ1NjUgNy4yOTMxNSAxMC4yODQ5IDcuMjg0ODIgMTAuMDgwNEM3LjI3NjQ4IDkuODc2MTIgNy4zNDk4MiA5LjY5NjM3IDcuNTA0ODIgOS41NDEyQzcuNjQ5ODIgOS4zOTYzNyA3LjgyNTQ4IDkuMzIzOTUgOC4wMzE4MiA5LjMyMzk1QzguMjM4MTUgOS4zMjM5NSA4LjQxMzgyIDkuMzk2MzcgOC41NTg4MiA5LjU0MTJMMTIuNjMxOCAxMy41OTg5TDE2LjcwNDggOS41NDEyQzE2Ljg0MzMgOS40MDI3IDE3LjAxNDggOS4zMjkyOCAxNy4yMTkzIDkuMzIwOTVDMTcuNDIzOCA5LjMxMjYyIDE3LjYwMzcgOS4zODYwMyAxNy43NTg4IDkuNTQxMkMxNy45MDM3IDkuNjg2MDMgMTcuOTc2MSA5Ljg2MTYyIDE3Ljk3NjEgMTAuMDY3OUMxNy45NzYxIDEwLjI3NDQgMTcuOTAzNyAxMC40NTAxIDE3Ljc1ODggMTAuNTk1TDEzLjI2NDYgMTUuMDg5MkMxMy4xNzA5IDE1LjE4MjkgMTMuMDcyMiAxNS4yNDg5IDEyLjk2ODMgMTUuMjg3MkMxMi44NjQ1IDE1LjMyNTcgMTIuNzUyMyAxNS4zNDQ5IDEyLjYzMTggMTUuMzQ0OVoiIGZpbGw9IiMxQzFCMUYiLz4KPC9nPgo8L3N2Zz4K");
	background-position: center right 1px;
	background-repeat: no-repeat;
	background-size: 24px;
	border: 1px solid var(--gail-line);
	border-radius: 6px;
	color: var(--gail-ink);
	cursor: pointer;
	/* Its own row: sharing one with the quantity stepper clipped the tail of the
	   longer labels ("Full Tray (Serves 20–50) — $220.00"). */
	flex: 1 1 100%;
	font-size: 13px;
	height: 32px;
	margin: 0;
	max-width: 100%;
	min-height: 0;
	min-width: 0;
	outline: none;
	/* Right padding clears the 24px chevron, or the tail of the longer labels
	   renders underneath it ("… — $90.0" with the "0" behind the arrow). */
	padding: 0 30px 0 8px;
	width: 100%;
}

.gail-catering .gail-item__price {
	font-weight: 700;
}

/* Quantity ---------------------------------------------------------------- */

.gail-catering .gail-qty {
	align-items: flex-end;
	display: flex;
	gap: 4px;
}

/*
 * The theme styles bare `button` and `input` hard — `padding: 15px 95px` on
 * buttons, `padding: 15px 40px` on inputs — and those rules outrank a lone class.
 * Unchecked, the buttons rendered 192px wide and the quantity digit was pushed
 * clean out of its box. Qualifying the class with the element name buys the extra
 * specificity, and the box (padding, width, min-width) is pinned explicitly so the
 * control survives whatever the theme does to form elements.
 */
.gail-catering .gail-qty button.gail-qty__btn {
	align-items: center;
	background: var(--gail-surface);
	border: 1px solid var(--gail-line);
	border-radius: 6px;
	color: var(--gail-ink);
	cursor: pointer;
	/* Flex-centred rather than line-height-centred: the theme's line-height on
	   buttons knocked the "−" and "+" glyphs off-centre in the box. */
	display: flex;
	flex: 0 0 32px;
	font-size: 16px;
	height: 32px;
	justify-content: center;
	line-height: 1;
	min-width: 0;
	padding: 0;
	text-align: center;
	width: 32px;
}

/* The theme fills buttons dark on :focus/:active, which turned the "+" into a
   black disc after a click. Keep the control looking like itself. */
.gail-catering .gail-qty button.gail-qty__btn:hover:not(:disabled),
.gail-catering .gail-qty button.gail-qty__btn:focus:not(:disabled),
.gail-catering .gail-qty button.gail-qty__btn:active:not(:disabled) {
	background: var(--gail-surface);
	border-color: var(--gail-accent);
	color: var(--gail-accent);
}

.gail-catering .gail-qty button.gail-qty__btn:disabled {
	cursor: not-allowed;
	opacity: .4;
}

.gail-catering .gail-qty input.gail-qty__input {
	background: var(--gail-surface);
	border: 1px solid var(--gail-line);
	border-radius: 6px;
	color: var(--gail-ink);
	flex: 0 0 52px;
	font-size: 15px;
	height: 32px;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0 4px;
	text-align: center;
	width: 52px;
}

/* Review ------------------------------------------------------------------ */

.gail-catering .gail-review__title {
	font-size: 20px;
	margin: 0 0 16px;
}

.gail-catering .gail-review__lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gail-catering .gail-review__line {
	align-items: center;
	border-bottom: 1px solid var(--gail-line);
	display: flex;
	gap: 12px;
	padding: 12px 0;
}

.gail-catering .gail-review__info {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.gail-catering .gail-review__name {
	font-weight: 600;
}

.gail-catering .gail-review__opt {
	color: var(--gail-muted);
	font-size: 13px;
}

.gail-catering .gail-review__total {
	font-weight: 700;
	white-space: nowrap;
}

.gail-catering .gail-review__remove {
	background: none;
	border: 0;
	color: var(--gail-muted);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 4px 8px;
}

.gail-catering .gail-review__remove:hover {
	color: var(--gail-accent);
}

.gail-catering .gail-review__foot {
	display: flex;
	font-size: 18px;
	font-weight: 700;
	justify-content: space-between;
	padding: 16px 0;
}

/* Sticky summary bar ------------------------------------------------------ */

.gail-catering .gail-bar {
	align-items: center;
	background: var(--gail-surface);
	border: 1px solid var(--gail-line);
	border-radius: var(--gail-radius);
	bottom: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-top: 24px;
	padding: 12px 16px;
	position: sticky;
	z-index: 5;
}

.gail-catering .gail-bar__sep {
	color: var(--gail-line);
	margin: 0 6px;
}

.gail-catering .gail-bar__actions {
	display: flex;
	gap: 8px;
}

/* Buttons ----------------------------------------------------------------- */

/* Element-qualified for the same reason as the quantity controls: the theme's
   bare `button`/`a` rules would otherwise win on padding and focus colours. */
.gail-catering button.gail-btn,
.gail-catering a.gail-btn {
	border: 1px solid var(--gail-line);
	border-radius: 8px;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	min-height: 0;
	padding: 10px 18px;
	text-align: center;
	text-decoration: none;
	transition: opacity .15s ease;
	width: auto;
}

.gail-catering .gail-btn {
	border: 1px solid var(--gail-line);
	border-radius: 8px;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	padding: 10px 18px;
	text-align: center;
	text-decoration: none;
	transition: opacity .15s ease;
}

.gail-catering button.gail-btn--primary,
.gail-catering a.gail-btn--primary,
.gail-catering button.gail-btn--primary:hover,
.gail-catering button.gail-btn--primary:focus,
.gail-catering button.gail-btn--primary:active,
.gail-catering a.gail-btn--primary:hover,
.gail-catering a.gail-btn--primary:focus {
	background: var(--gail-accent);
	border-color: var(--gail-accent);
	color: var(--gail-accent-ink);
}

.gail-catering button.gail-btn--ghost,
.gail-catering a.gail-btn--ghost,
.gail-catering button.gail-btn--ghost:hover,
.gail-catering button.gail-btn--ghost:focus,
.gail-catering button.gail-btn--ghost:active,
.gail-catering a.gail-btn--ghost:hover,
.gail-catering a.gail-btn--ghost:focus {
	background: var(--gail-surface);
	border-color: var(--gail-line);
	color: var(--gail-ink);
}

.gail-catering .gail-btn--primary {
	background: var(--gail-accent);
	border-color: var(--gail-accent);
	color: var(--gail-accent-ink);
}

.gail-catering .gail-btn--ghost {
	background: var(--gail-surface);
	color: var(--gail-ink);
}

.gail-catering .gail-btn--link {
	background: none;
	border-color: transparent;
	color: var(--gail-muted);
	padding: 10px 8px;
}

.gail-catering .gail-btn:disabled {
	cursor: not-allowed;
	opacity: .45;
}

.gail-catering .gail-btn:hover:not(:disabled) {
	opacity: .9;
}

/* Modal ------------------------------------------------------------------- */

.gail-catering .gail-modal {
	align-items: center;
	background: rgba(0, 0, 0, .55);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 20px;
	position: fixed;
	z-index: 999;
}

.gail-catering .gail-modal__box {
	background: var(--gail-surface);
	border-radius: var(--gail-radius);
	max-width: 512px;
	padding: 28px;
	width: 100%;
}

.gail-catering .gail-modal__title {
	font-size: 20px;
	margin: 0 0 8px;
}

.gail-catering .gail-modal__msg {
	color: var(--gail-muted);
	margin: 0 0 20px;
}

.gail-catering .gail-modal__actions {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* States ------------------------------------------------------------------ */

.gail-catering .gail-loading,
.gail-catering .gail-empty {
	color: var(--gail-muted);
	padding: 32px 0;
	text-align: center;
}

.gail-catering .gail-error {
	background: #fdf1f1;
	border: 1px solid #e6b3b3;
	border-radius: 8px;
	color: #8c1d2c;
	margin: 0 0 16px;
	padding: 12px 16px;
}

@media (max-width: 640px) {
	.gail-catering .gail-section__items {
		grid-template-columns: 1fr;
	}

	.gail-catering .gail-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.gail-catering .gail-bar__actions .gail-btn {
		flex: 1;
	}
}

/* Event details step ------------------------------------------------------- */

.gail-catering .gail-event {
	max-width: 520px;
	padding-bottom: 80px;
}

.gail-catering .gail-event__title {
	font-size: 20px;
	margin: 0 0 8px;
}

.gail-catering .gail-event__intro {
	color: var(--gail-muted);
	margin: 0 0 24px;
}

.gail-catering .gail-field {
	margin: 0 0 20px;
}

.gail-catering .gail-field__label {
	display: block;
	font-weight: 600;
	margin: 0 0 6px;
}

/* Element-qualified for the same reason as the quantity controls: the theme's
   bare `input` rule (padding: 15px 40px) would otherwise win. */
.gail-catering .gail-field input.gail-field__input {
	background: var(--gail-surface);
	border: 1px solid var(--gail-line);
	border-radius: 8px;
	color: var(--gail-ink);
	display: block;
	font-size: 15px;
	height: 44px;
	margin: 0;
	min-height: 0;
	padding: 0 12px;
	width: 100%;
}

.gail-catering .gail-field.has-error input.gail-field__input {
	border-color: #b3261e;
}

.gail-catering .gail-field__hint {
	color: var(--gail-muted);
	font-size: 13px;
	margin: 6px 0 0;
}

.gail-catering .gail-field__error {
	color: #b3261e;
	font-size: 13px;
	font-weight: 600;
	margin: 6px 0 0;
}

/* Fulfillment step --------------------------------------------------------- */

.gail-catering .gail-fulfil {
	padding-bottom: 80px;
}

.gail-catering .gail-fulfil__title {
	font-size: 20px;
	margin: 0 0 8px;
}

.gail-catering .gail-fulfil__intro {
	color: var(--gail-muted);
	margin: 0 0 24px;
}

.gail-catering .gail-fulfil__options {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/*
 * icon | text | tick, on one row.
 *
 * Every child is placed explicitly. Left to auto-placement, the two children that
 * carry a definite row (the icon and the tick) get positioned before the one that
 * does not, and the tick lands in the middle column ahead of the text.
 */
.gail-catering .gail-fulfil__option {
	align-items: start;
	background: var(--gail-surface);
	border: 2px solid var(--gail-line);
	border-radius: var(--gail-radius);
	cursor: pointer;
	display: grid;
	gap: 14px;
	grid-template-columns: auto 1fr auto;
	margin: 0;
	padding: 20px;
	position: relative;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.gail-catering .gail-fulfil__option:hover {
	border-color: var(--gail-accent);
}

.gail-catering .gail-fulfil__option.is-selected {
	border-color: var(--gail-accent);
	box-shadow: 0 0 0 1px var(--gail-accent);
}

/*
 * The radio is real — it carries the keyboard and screen-reader behaviour — but
 * it is never seen: the card is the control. Clipped rather than display:none,
 * which would take it out of the tab order along with the semantics.
 */
.gail-catering .gail-fulfil__option input.gail-fulfil__radio {
	height: 1px;
	margin: 0;
	min-height: 0;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.gail-catering .gail-fulfil__option:focus-within {
	border-color: var(--gail-accent);
	box-shadow: 0 0 0 3px rgba(140, 29, 44, .25);
}

.gail-catering .gail-fulfil__icon {
	background-color: var(--gail-muted);
	grid-column: 1;
	grid-row: 1;
	height: 32px;
	transition: background-color .15s ease;
	width: 32px;
}

.gail-catering .gail-fulfil__option.is-selected .gail-fulfil__icon {
	background-color: var(--gail-accent);
}

/* Masked rather than set as a background image, so the glyph can take the accent
   colour when its card is selected instead of being baked in at one colour. */
.gail-catering .gail-fulfil__icon--pickup {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 4.4 4.6A1 1 0 0 1 5.36 4h13.28a1 1 0 0 1 .96.6L21 9.5M3 9.5h18M3 9.5v1a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0v-1M5 13.9V19a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5.1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 4.4 4.6A1 1 0 0 1 5.36 4h13.28a1 1 0 0 1 .96.6L21 9.5M3 9.5h18M3 9.5v1a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0v-1M5 13.9V19a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gail-catering .gail-fulfil__icon--delivery {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7.5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1V16H8.5M2 16h1.5M14 9.5h3.4a1 1 0 0 1 .82.43l2.6 3.72a1 1 0 0 1 .18.57V16h-2.5M14 16h1.5'/%3E%3Ccircle cx='6' cy='17.5' r='2'/%3E%3Ccircle cx='17.5' cy='17.5' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7.5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1V16H8.5M2 16h1.5M14 9.5h3.4a1 1 0 0 1 .82.43l2.6 3.72a1 1 0 0 1 .18.57V16h-2.5M14 16h1.5'/%3E%3Ccircle cx='6' cy='17.5' r='2'/%3E%3Ccircle cx='17.5' cy='17.5' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gail-catering .gail-fulfil__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.gail-catering .gail-fulfil__name {
	font-size: 18px;
	font-weight: 700;
}

.gail-catering .gail-fulfil__blurb {
	color: var(--gail-muted);
	font-size: 14px;
	line-height: 1.45;
}

.gail-catering .gail-fulfil__detail {
	color: var(--gail-ink);
	font-size: 13px;
	font-weight: 600;
}

.gail-catering .gail-fulfil__check {
	border: 2px solid var(--gail-line);
	border-radius: 50%;
	flex: 0 0 22px;
	grid-column: 3;
	grid-row: 1;
	height: 22px;
	position: relative;
	width: 22px;
}

.gail-catering .gail-fulfil__option.is-selected .gail-fulfil__check {
	background: var(--gail-accent);
	border-color: var(--gail-accent);
}

.gail-catering .gail-fulfil__option.is-selected .gail-fulfil__check::after {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	height: 9px;
	left: 6px;
	position: absolute;
	top: 3px;
	transform: rotate(45deg);
	width: 5px;
}

/* Item details popup ------------------------------------------------------- */

.gail-catering .gail-modal--details .gail-modal__box {
	max-height: calc(100vh - 40px);
	max-width: 820px;
	overflow-y: auto;
	padding: 0;
	position: relative;
}

/* Flex-centred as well as text-align-centred: the theme's line-height on buttons
   knocks the "×" off-centre in a round box, the same way it did to the quantity
   stepper's "−" and "+". */
.gail-catering .gail-details button.gail-details__close {
	align-items: center;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--gail-line);
	border-radius: 50%;
	color: var(--gail-ink);
	cursor: pointer;
	display: flex;
	font-size: 22px;
	height: 36px;
	justify-content: center;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: 0;
	position: absolute;
	right: 12px;
	text-align: center;
	top: 12px;
	width: 36px;
	z-index: 2;
}

.gail-catering .gail-details button.gail-details__close:hover {
	background: #fff;
	border-color: var(--gail-accent);
	color: var(--gail-accent);
}

.gail-catering .gail-details__grid {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}

.gail-catering .gail-details__media {
	background: #f4f4f4;
}

/*
 * No height clamp of its own: the media column is a grid track that already
 * stretches to whatever the text column beside it needs, so the photo simply
 * fills that. The 260/460px floor and ceiling that used to live here fought the
 * grid — a short description left the image straining against the 260px floor
 * and spilling past the box's rounded corner, and a long one was capped at 460px
 * with a gap under it.
 */
.gail-catering .gail-details__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* The placeholder has no intrinsic size, so unlike a real photo it does need a
   floor — without one the column collapses to nothing. */
.gail-catering .gail-details__img--empty {
	background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 10px, #ececec 10px, #ececec 20px);
	min-height: 260px;
}

.gail-catering .gail-details__info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
}

.gail-catering .gail-details__section {
	color: var(--gail-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0;
	text-transform: uppercase;
}

.gail-catering .gail-details__name {
	font-size: 24px;
	margin: 0;
	/* Room for the close button, which floats over this corner. */
	padding-right: 40px;
}

/* The one block of shop-authored markup in the builder, so its children are
   styled rather than assumed: a description may hold paragraphs or a list. */
.gail-catering .gail-details__desc {
	color: var(--gail-muted);
	font-size: 15px;
	line-height: 1.6;
}

.gail-catering .gail-details__desc > *:first-child {
	margin-top: 0;
}

.gail-catering .gail-details__desc > *:last-child {
	margin-bottom: 0;
}

.gail-catering .gail-details__desc ul,
.gail-catering .gail-details__desc ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.gail-catering .gail-details__desc img {
	height: auto;
	max-width: 100%;
}

.gail-catering .gail-details__desc--empty {
	font-style: italic;
}

.gail-catering .gail-details__actions {
	border-top: 1px solid var(--gail-line);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

.gail-catering .gail-details__label {
	color: var(--gail-muted);
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.gail-catering .gail-details__price {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.gail-catering .gail-details__qty {
	align-items: center;
	display: flex;
	gap: 12px;
}

.gail-catering .gail-details__qty .gail-details__label {
	margin: 0;
}

.gail-catering .gail-details__in-order {
	color: var(--gail-muted);
	font-size: 14px;
	margin: 0;
}

.gail-catering .gail-details__unavailable {
	color: #b3261e;
	font-weight: 600;
	margin: 0;
}

.gail-catering .gail-details__add {
	align-self: flex-start;
}

@media (max-width: 720px) {
	.gail-catering .gail-details__grid {
		grid-template-columns: 1fr;
	}

	.gail-catering .gail-details__img,
	.gail-catering .gail-details__img--empty {
		max-height: 240px;
		min-height: 180px;
	}

	.gail-catering .gail-details__info {
		padding: 20px;
	}
}

/* Event summary on the review step ---------------------------------------- */

.gail-catering .gail-review__event {
	background: #faf7f7;
	border: 1px solid var(--gail-line);
	border-radius: var(--gail-radius);
	display: grid;
	gap: 4px 16px;
	grid-template-columns: auto 1fr;
	margin: 0 0 20px;
	padding: 14px 16px;
}

.gail-catering .gail-review__event dt {
	color: var(--gail-muted);
	font-size: 14px;
	margin: 0;
}

.gail-catering .gail-review__event dd {
	font-weight: 600;
	margin: 0;
}

.gail-catering .gail-review__fulfillment {
	display: flex;
	flex-direction: column;
}

.gail-catering .gail-review__fulfillment-note {
	color: var(--gail-muted);
	font-size: 13px;
	font-weight: 400;
}