/* =====================================================
   BRASA public theme additions — extends html_templates/assets/css/style.css
   when WP serves plugin templates. Variables are injected by Brasa_Public.
   ===================================================== */
:root {
	--color-ink:    var(--brasa-ink,   #1a1410);
	--color-bone:   var(--brasa-bone,  #faf6f0);
	--color-paper:  var(--brasa-paper, #f3ece1);
	--color-ember:  var(--brasa-ember, #b8362d);
	--color-honey:  var(--brasa-honey, #d4a24c);
	--color-sage:   var(--brasa-sage,  #5b6f47);
}

body { font-family: var(--brasa-font-sans, "Inter", system-ui, sans-serif); background: var(--color-bone); color: var(--color-ink); font-size: var(--brasa-base-size, 16px); margin: 0; }
h1, h2, h3, h4 { font-family: var(--brasa-font-display, "Fraunces", Georgia, serif); color: var(--color-ink); }
a { color: inherit; text-decoration: none; }

/* ===========================
   CHIPOTLE-STYLE RECTANGLE PRODUCT CELLS
   - Image LEFT, title RIGHT
   - Whole cell clickable
   =========================== */
.brasa-build-wrap { padding: clamp(40px, 6vw, 80px) 0; }
.brasa-build-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	margin: 0 auto 36px;
	max-width: 1200px;
	padding: 0 clamp(16px, 4vw, 32px);
}
.brasa-build-head h1 {
	font-size: clamp(2.5rem, 1.8rem + 3vw, 5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
}
.brasa-build-head h1 em { font-style: italic; color: var(--color-ember); font-weight: 400; }
.brasa-build-head-text { display: flex; flex-direction: column; gap: 8px; }
.brasa-build-eyebrow {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-ember);
}
.brasa-build-head .brasa-build-go {
	background: var(--color-ember); color: #fff; padding: 14px 26px;
	border-radius: 999px; font-weight: 700; font-size: 13px;
	letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid var(--color-ember);
	cursor: pointer; transition: transform .15s, background .2s;
}
.brasa-build-go:hover { background: var(--color-ink); border-color: var(--color-ink); transform: translateY(-1px); }

.brasa-build-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 18px;
}

.brasa-cell {
	display: grid;
	grid-template-columns: 140px 1fr;
	align-items: stretch;
	background: #fff;
	border: 1.5px solid rgba(26,20,16,0.1);
	border-radius: 18px;
	overflow: hidden;
	cursor: pointer;
	transition: transform .18s ease-out, box-shadow .2s, border-color .2s;
	text-align: left;
	width: 100%;
	padding: 0;
	font: inherit;
}
.brasa-cell:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -20px rgba(26,20,16,0.18);
	border-color: var(--color-ember);
}
.brasa-cell-img { background: var(--color-paper); overflow: hidden; position: relative; }
.brasa-cell-img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease-out;
}
.brasa-cell:hover .brasa-cell-img img { transform: scale(1.07); }
.brasa-cell-body {
	display: flex; flex-direction: column; justify-content: center;
	padding: 18px 20px;
	gap: 4px;
}
.brasa-cell-cat {
	font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--color-ember); font-weight: 700; margin-bottom: 4px;
}
.brasa-cell-name {
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: clamp(1.2rem, 0.9rem + 0.5vw, 1.4rem);
	font-weight: 500;
	margin: 0;
	line-height: 1.15;
	color: var(--color-ink);
}
.brasa-cell-desc {
	font-size: 13px;
	color: rgba(26,20,16,0.62);
	margin: 4px 0 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.brasa-cell-price {
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1.1rem;
	font-weight: 500;
	margin-top: 6px;
	color: var(--color-ink);
}
/*
 * Catering cells expose two prices side-by-side (Pickup vs On-Site)
 * so the customer can see how the choice will affect their total
 * BEFORE clicking through. The label preceding each amount is intentionally
 * uppercase + small to read like a tag, not a number.
 */
.brasa-cell-price-pair {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 6px;
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	color: var(--color-ink);
}
.brasa-cell-price-line {
	font-size: 1.05rem;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.brasa-cell-price-line small {
	font-family: var(--brasa-font-body, system-ui, sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-mute, #6e6258);
}

/* =================================================================
 *  IN-PAGE CATERING SERVICE TOGGLE  (brasa-product.php)
 *
 *  Two-segment pill that lets the customer switch between Catering
 *  Pickup and On-Site Catering pricing right on the product detail
 *  page. Each segment shows the relevant price so the trade-off is
 *  visible side-by-side. The active segment is filled; the inactive
 *  segment is a quiet hairline so the choice is unambiguous.
 *
 *  Mobile: stacks vertically — easier thumb targets and avoids
 *  squashing the prices.
 * ================================================================= */
.brasa-svc-toggle {
	display: inline-flex;
	gap: 0;
	margin-top: 18px;
	padding: 6px;
	background: rgba(26, 20, 16, 0.05);
	border: 1px solid rgba(26, 20, 16, 0.08);
	border-radius: 999px;
	max-width: 100%;
}
.brasa-svc-toggle__seg {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 999px;
	color: var(--color-ink, #1a1410);
	font-family: var(--brasa-font-body, "Inter", system-ui, sans-serif);
	transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
	min-width: 220px;
	text-align: left;
}
.brasa-svc-toggle__seg:hover { background: rgba(26, 20, 16, 0.04); }
.brasa-svc-toggle__seg.is-active {
	background: var(--color-ember, #b8362d);
	color: #fff;
	box-shadow: 0 6px 18px -6px rgba(184, 54, 45, 0.55);
}
.brasa-svc-toggle__seg.is-active:hover { background: var(--color-ember, #b8362d); }
.brasa-svc-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(26, 20, 16, 0.06);
	color: inherit;
	flex-shrink: 0;
}
.brasa-svc-toggle__seg.is-active .brasa-svc-toggle__icon {
	background: rgba(255, 255, 255, 0.18);
}
.brasa-svc-toggle__body {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.1;
}
.brasa-svc-toggle__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}
.brasa-svc-toggle__price {
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1.45rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.brasa-svc-toggle__caption {
	font-size: 13px;
	margin-top: 10px;
	max-width: 640px;
}

@media ( max-width: 720px ) {
	.brasa-svc-toggle {
		display: flex;
		flex-direction: column;
		border-radius: 22px;
		gap: 4px;
	}
	.brasa-svc-toggle__seg {
		min-width: 0;
		width: 100%;
		border-radius: 18px;
		padding: 12px 16px;
	}
}
.brasa-cell.is-featured {
	grid-column: 1 / -1;
	grid-template-columns: 280px 1fr;
	border: 2px solid var(--color-ember);
	background: linear-gradient(135deg, #fff 0%, #fdf3eb 100%);
}
.brasa-cell.is-featured .brasa-cell-name { font-size: clamp(1.6rem, 1rem + 1.2vw, 2.2rem); }
.brasa-cell.is-featured .brasa-cell-img { min-height: 220px; }

@media (max-width: 560px) {
	.brasa-cell { grid-template-columns: 110px 1fr; }
	.brasa-cell.is-featured { grid-template-columns: 140px 1fr; }
	.brasa-cell.is-featured .brasa-cell-img { min-height: 0; }
}

/* ===========================
   POPUPS — service type + address chooser
   =========================== */
.brasa-modal {
	position: fixed; inset: 0;
	background: rgba(26,20,16,0.62);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	z-index: 1000;
	padding: 16px;
	opacity: 0; pointer-events: none;
	transition: opacity .25s ease;
}
.brasa-modal.is-open { opacity: 1; pointer-events: auto; }
.brasa-modal-panel {
	background: var(--color-bone);
	border-radius: 22px;
	max-width: 560px;
	width: 100%;
	max-height: 86vh;
	overflow: auto;
	padding: 36px;
	position: relative;
	transform: translateY(20px) scale(0.98);
	transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.brasa-modal.is-open .brasa-modal-panel { transform: none; }
.brasa-modal-close {
	position: absolute; top: 16px; right: 16px;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(26,20,16,0.08);
	border: none; cursor: pointer;
	font-size: 18px;
	color: var(--color-ink);
}
.brasa-modal-close:hover { background: var(--color-ember); color: #fff; }
.brasa-modal h2 {
	font-size: clamp(1.6rem, 1rem + 1vw, 2.2rem);
	font-weight: 400;
	margin: 0 0 6px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.brasa-modal h2 em { color: var(--color-ember); font-style: italic; }
.brasa-modal .brasa-modal-sub {
	color: rgba(26,20,16,0.62);
	font-size: 14px;
	margin-bottom: 24px;
}
.brasa-service-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}
.brasa-service-btn {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 6px;
	padding: 22px;
	background: #fff;
	border: 2px solid rgba(26,20,16,0.1);
	border-radius: 16px;
	cursor: pointer;
	transition: border-color .2s, transform .15s;
	text-align: left;
}
.brasa-service-btn:hover { border-color: var(--color-ember); transform: translateY(-2px); }
.brasa-service-btn b {
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1.4rem;
	font-weight: 500;
}
.brasa-service-btn span {
	font-size: 13px;
	color: rgba(26,20,16,0.6);
}
.brasa-service-btn .ico { font-size: 26px; margin-bottom: 4px; }

.brasa-location-search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 1.5px solid rgba(26,20,16,0.16);
	border-radius: 999px;
	background: #fff;
	margin-bottom: 14px;
}
.brasa-location-search input {
	flex: 1;
	border: none;
	background: transparent;
	font: inherit;
	font-size: 15px;
}
.brasa-location-search input:focus { outline: none; }

.brasa-location-list { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; }
.brasa-location-card {
	display: flex; gap: 14px; padding: 14px 16px;
	background: #fff;
	border: 1.5px solid rgba(26,20,16,0.1);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color .2s, transform .15s, background .2s;
	text-align: left;
	width: 100%;
	font: inherit;
}
.brasa-location-card:hover { border-color: var(--color-ember); transform: translateY(-1px); }
.brasa-location-card-num {
	width: 38px; height: 38px;
	background: var(--color-ember);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1rem;
	font-weight: 500;
	flex-shrink: 0;
}
.brasa-location-card-meta b { display: block; font-family: var(--brasa-font-display, "Fraunces", Georgia, serif); font-size: 1.1rem; font-weight: 500; line-height: 1.1; }
.brasa-location-card-meta span { display: block; font-size: 12.5px; color: rgba(26,20,16,0.62); margin-top: 4px; line-height: 1.4; }
.brasa-location-empty { padding: 32px 18px; text-align: center; color: rgba(26,20,16,0.5); font-size: 14px; }

/* Counter "you can choose X more" badge */
.brasa-limit-info {
	background: var(--color-paper);
	border: 1.5px solid var(--color-honey);
	border-radius: 12px;
	padding: 12px 16px;
	margin: 14px 0;
	font-size: 14px;
	display: flex;
	gap: 12px;
	align-items: center;
}
.brasa-limit-info b { color: var(--color-ember); font-weight: 700; font-family: var(--brasa-font-display, "Fraunces", Georgia, serif); font-size: 1.4rem; }
.brasa-limit-info.is-overflow { border-color: var(--color-ember); background: rgba(184,54,45,0.06); }
/* Group satisfied — paint the surrounding row with the themed
   "limit reached" surface so the customer's eye is drawn straight
   to the new pill.  Both the surface and pill colours live in CSS
   variables exposed via the Theme & Branding admin. */
.brasa-limit-info.is-limit-reached {
	border-color: var(--brasa-limit-reached-border, var(--color-sage, #5b6f47));
	background:   var(--brasa-limit-reached-surface, rgba(91,111,71,0.10));
}
.brasa-limit-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	margin: 0 4px;
	border-radius: 999px;
	background: var(--brasa-limit-reached-bg, var(--color-sage, #5b6f47));
	color:      var(--brasa-limit-reached-fg, #ffffff);
	border: 1px solid var(--brasa-limit-reached-border, transparent);
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 4px 10px color-mix(in srgb, var(--brasa-limit-reached-bg, #5b6f47) 28%, transparent);
	white-space: nowrap;
	vertical-align: middle;
	animation: brasa-limit-pill-in 200ms ease-out;
}
.brasa-limit-pill--over {
	background: var(--brasa-limit-overflow-bg, var(--color-ember, #b8362d));
	color:      var(--brasa-limit-overflow-fg, #ffffff);
	border-color: var(--brasa-limit-overflow-border, transparent);
	box-shadow: 0 4px 10px color-mix(in srgb, var(--brasa-limit-overflow-bg, #b8362d) 30%, transparent);
}
.brasa-limit-pill__icon { display: inline-grid; place-items: center; }
.brasa-limit-pill__icon svg { display: block; }
@keyframes brasa-limit-pill-in {
	from { transform: scale(0.85); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}

/* ---------------------------------------------------------------
   BUILD-FLOW VANILLA-JS VALIDATION
   ---------------------------------------------------------------
   No HTML5 `required` attributes anywhere on this plugin — the
   feedback below is driven entirely by setupBuilder() in public.js.
   The Add-to-Bag button stays clickable when blocked so the click
   can reveal the missing picks; CSS just makes that state visible.
   --------------------------------------------------------------- */
.brasa-builder-group {
	border-left: 3px solid transparent;
	padding-left: 14px;
	margin-left: -14px;
	transition: border-color 160ms ease, background 160ms ease;
	border-radius: 0 12px 12px 0;
}
.brasa-builder-group.is-incomplete {
	border-left-color: var(--color-ember, #b8362d);
	background: rgba(184,54,45,0.04);
}
.brasa-builder-group__title { display: inline-flex; align-items: baseline; gap: 6px; }
.brasa-builder-group__req {
	color: var(--color-ember, #b8362d);
	font-weight: 800;
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1.1em;
	line-height: 1;
	transform: translateY(-2px);
}
.brasa-builder-group__error {
	margin: -6px 0 0;
	padding: 10px 14px;
	background: rgba(184,54,45,0.08);
	border: 1px solid rgba(184,54,45,0.35);
	border-radius: 10px;
	color: var(--color-ember, #b8362d);
	font-size: 13.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}
.brasa-builder-group__error::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-ember, #b8362d);
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	flex-shrink: 0;
}
.brasa-builder-group.is-incomplete .brasa-limit-info {
	border-color: var(--color-ember, #b8362d);
	background: rgba(184,54,45,0.06);
}

/* Add-to-Bag blocked state — visually dim, NOT HTML-disabled. */
.brasa-btn-primary.is-blocked,
[data-add-to-bag].is-blocked {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
	filter: saturate(0.8);
}
.brasa-btn-primary.is-blocked:hover,
[data-add-to-bag].is-blocked:hover { transform: none; }

/* Master blockers panel — listed under Add-to-Bag with all the
   groups that still need picks. Mirrors the Bootstrap/inline error
   patterns we use elsewhere on the site. */
.brasa-builder-blockers {
	margin-top: 14px;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(184,54,45,0.07);
	border: 1.5px solid rgba(184,54,45,0.35);
	color: var(--color-ember, #b8362d);
	font-size: 14px;
	box-shadow: 0 8px 24px -16px rgba(184,54,45,0.45);
}
.brasa-builder-blockers__title {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1rem;
}
.brasa-builder-blockers__list {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 4px;
	list-style: disc;
}
.brasa-builder-blockers__list li { line-height: 1.45; }

/* SR-only utility (used for the (required) hint next to required
   group titles — visually hidden but available to screen readers). */
.brasa-builder-group .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Option chips for build customisation */
.brasa-product-gallery {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
}
.brasa-product-gallery__stage {
	background: var(--color-paper);
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	box-shadow: 0 18px 45px color-mix(in srgb, var(--color-ink) 10%, transparent);
}
.brasa-product-gallery__stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.brasa-product-gallery__thumbs {
	display: grid;
	gap: 10px;
	align-content: start;
	max-height: min(560px, calc(100vh - 160px));
	overflow: auto;
	padding-right: 3px;
}
.brasa-product-gallery__thumb {
	width: 76px;
	height: 76px;
	border: 2px solid transparent;
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
	background: var(--color-paper);
	cursor: pointer;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--color-ink) 8%, transparent);
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.brasa-product-gallery__thumb:hover,
.brasa-product-gallery__thumb.is-active {
	border-color: var(--color-ember);
	transform: translateY(-1px);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--color-ember) 18%, transparent);
}
.brasa-product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 640px) {
	.brasa-product-gallery {
		grid-template-columns: 1fr;
	}
	.brasa-product-gallery__thumbs {
		order: 2;
		display: flex;
		overflow-x: auto;
		max-height: none;
		padding: 4px 0;
	}
}

.brasa-opt-row {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 10px 0 18px;
}
.brasa-opt {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 14px;
	border: 1.5px solid rgba(26,20,16,0.16);
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, border-width .2s ease, box-shadow .2s ease;
	font-family: inherit;
}
.brasa-opt:hover { border-color: var(--color-ink); }
.brasa-opt.is-selected {
	background: var(--color-ink); color: #fff; border-color: var(--color-ink);
}

/*
 * LIMIT FEEDBACK — when the customer reaches a group's max selections,
 * every pick that counts toward that limit picks up a themeable border
 * ("you're satisfied"). Thickness, style and color come from the
 * dashboard via Theme → Build flow.
 *
 * Because the border-width changes, the chip's padding compensates
 * (border eats into the box) so the chip doesn't visually jump.
 */
.brasa-opt.is-limit-met {
	border-color: var(--brasa-limit-border-color, var(--color-sage));
	border-style: var(--brasa-limit-border-style, solid);
	border-width: var(--brasa-limit-border-thickness, 3px);
	padding: calc(9px - ( var(--brasa-limit-border-thickness, 3px) - 1.5px )) calc(14px - ( var(--brasa-limit-border-thickness, 3px) - 1.5px ));
	box-shadow: 0 0 0 4px color-mix( in srgb, var(--brasa-limit-border-color, #5b6f47) 18%, transparent );
}
/*
 * OVERFLOW (extras) — picks beyond the limit carry the "extra paid"
 * background + foreground colours. They keep the same themed border
 * so it's still clear they're part of a satisfied group.
 */
.brasa-opt.is-overflow {
	background: var(--brasa-extra-bg-color, rgba(212,162,76,0.18));
	color:      var(--brasa-extra-fg-color, #6e4a0c);
	border-color: var(--brasa-limit-border-color, var(--color-honey));
	border-style: var(--brasa-limit-border-style, solid);
	border-width: var(--brasa-limit-border-thickness, 3px);
	padding: calc(9px - ( var(--brasa-limit-border-thickness, 3px) - 1.5px )) calc(14px - ( var(--brasa-limit-border-thickness, 3px) - 1.5px ));
}
.brasa-opt.is-overflow .price { color: inherit; opacity: 0.85; }
.brasa-opt .price { opacity: 0.65; font-size: 11px; margin-left: 2px; }

/* Build option thumbnail tooltips. The JS functions mirror tool-tips.html. */
.brasa-header-search-nav-item {
	display: inline-flex;
	align-items: center;
}
.brasa-header-search-toggle {
	display: inline-grid;
	place-items: center;
	height: 100%;
	min-height: 28px;
	padding: 0.4rem 0;
	border: 0;
	background: transparent;
	color: var(--brasa-header-search-icon, var(--color-ink));
	cursor: pointer;
	line-height: 1;
	transition: color 160ms ease, transform 160ms ease;
}
.brasa-header-search-toggle:hover,
.brasa-header-search-toggle[aria-expanded="true"] {
	color: var(--color-ember);
	transform: translateY(-1px);
}
.brasa-header-search-toggle svg {
	display: block;
	width: 20px;
	height: 20px;
}
.brasa-header-search-panel {
	max-height: 0;
	overflow: hidden;
	background: var(--brasa-header-search-bg, #fff);
	border-top: 0 solid var(--brasa-header-search-border, var(--color-honey));
	border-bottom: 0 solid var(--brasa-header-search-border, var(--color-honey));
	box-shadow: 0 14px 34px color-mix(in srgb, var(--brasa-header-search-shadow, #1a1410) 0%, transparent);
	transition: max-height 260ms ease, border-width 260ms ease, box-shadow 260ms ease;
}
.brasa-header-search-panel.is-open {
	max-height: 65px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	box-shadow: 0 14px 34px color-mix(in srgb, var(--brasa-header-search-shadow, #1a1410) 16%, transparent);
}
.brasa-header-search-panel__inner {
	height: 65px;
	width: min(600px, calc(100% - 32px));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.brasa-header-search-panel__inner > * {
	width: 100%;
	max-width: 600px;
}
.brasa-header-search-panel input[type="search"],
.brasa-header-search-panel input[type="text"],
.brasa-header-search-panel form {
	width: 100%;
}
.brasa-mobile-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.55em;
	border: 0;
	background: transparent;
	color: var(--color-bone);
	font-family: var(--font-display);
	font-size: clamp(2rem, 6vw, 3rem);
	line-height: 1.1;
	font-weight: 400;
	text-align: left;
	padding: 0.4rem 0;
	cursor: pointer;
	min-height: calc(1.1em + 0.8rem);
	-webkit-tap-highlight-color: rgba(255,255,255,0.12);
	touch-action: manipulation;
}
.brasa-mobile-search-toggle:hover,
.brasa-mobile-search-toggle[aria-expanded="true"] {
	color: var(--color-honey);
}
.brasa-mobile-search-toggle svg {
	width: 0.72em;
	height: 0.72em;
	flex: 0 0 auto;
}
.brasa-mobile-search-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 260ms ease, opacity 220ms ease, margin 220ms ease;
	opacity: 0;
	margin: 0;
}
.brasa-mobile-search-panel.is-open {
	max-height: 120px;
	opacity: 1;
	margin: 0.35rem 0 0.8rem;
}
.brasa-mobile-search-panel__inner {
	width: 100%;
	max-width: 600px;
	min-height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
}
.brasa-mobile-search-panel__inner > *,
.brasa-mobile-search-panel input[type="search"],
.brasa-mobile-search-panel input[type="text"],
.brasa-mobile-search-panel form {
	width: 100%;
	max-width: 600px;
}

.brasa-opt-tooltip-wrap.tooltip-container {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	padding: 0;
	cursor: pointer;
}
.brasa-opt-tooltip-wrap .brasa-opt {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
/* Same chip + ? grouping for the Substitutions section.
   Inline-flex keeps the chip flush against the question mark. */
.brasa-sub-chip-wrap.tooltip-container,
.brasa-sub-card-ingredient-wrap.tooltip-container {
	display: inline-flex;
	align-items: stretch;
	cursor: pointer;
}
.brasa-sub-chip-wrap .brasa-sub-chip {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.brasa-sub-chip-wrap .brasa-opt-tooltip-q,
.brasa-sub-card-ingredient-wrap .brasa-opt-tooltip-q {
	width: 28px;
	min-width: 28px;
	font-size: 12px;
	border-radius: 0 999px 999px 0;
}
.brasa-sub-card-ingredient-wrap {
	gap: 0;
}
.brasa-sub-card-ingredient-wrap .brasa-sub-card-ingredient {
	margin-right: 6px;
}
.brasa-opt-tooltip-q {
	display: grid;
	place-items: center;
	width: 34px;
	min-width: 34px;
	border: 1.5px solid rgba(26,20,16,0.16);
	border-left: 0;
	border-radius: 0 999px 999px 0;
	background: var(--brasa-option-tooltip-q-bg, var(--color-ink));
	color: var(--brasa-option-tooltip-q-fg, #fff);
	font-weight: 900;
	cursor: pointer;
	/* Honour the WCAG 44x44 minimum tap target so phones / tablets
	   can reliably trigger the click handler. */
	-webkit-tap-highlight-color: rgba(26,20,16,0.18);
	touch-action: manipulation;
}
.tooltip {
	position: absolute;
	width: var(--brasa-option-tooltip-width, 188px);
	min-height: var(--brasa-option-tooltip-height, 113px);
	opacity: 0;
	transition: opacity 0.3s;
	filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--brasa-option-tooltip-shadow, #000) 40%, transparent));
	z-index: 9999;
	pointer-events: none;
}
@media (max-width: 768px) {
	/* Bigger ? tap target on phones — WCAG min is 44px square. */
	.brasa-opt-tooltip-q {
		width: 40px;
		min-width: 40px;
		min-height: 40px;
		font-size: 16px;
	}
	.brasa-sub-chip-wrap .brasa-opt-tooltip-q,
	.brasa-sub-card-ingredient-wrap .brasa-opt-tooltip-q {
		width: 36px;
		min-width: 36px;
		min-height: 36px;
		font-size: 14px;
	}
	/* Constrain the bubble width so it never spills past the
	   viewport edge regardless of the admin's pixel setting. */
	.tooltip {
		width: min(var(--brasa-option-tooltip-width, 188px), 76vw);
	}
}
.tooltip.left { margin-right: 20px; }
.tooltip.top { margin-bottom: 20px; }
.tooltip.right { margin-left: 20px; }
.tooltip.bottom { margin-top: 20px; }
.tooltip:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
}
.tooltip.top:before {
	bottom: -25px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 25px solid var(--brasa-option-tooltip-bg, red);
}
.tooltip.bottom:before {
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 25px solid var(--brasa-option-tooltip-bg, red);
}
.tooltip.right:before {
	left: -25px;
	top: 50%;
	transform: translateY(-50%);
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-right: 25px solid var(--brasa-option-tooltip-bg, red);
}
.tooltip.left:before {
	right: -25px;
	top: 50%;
	transform: translateY(-50%);
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid var(--brasa-option-tooltip-bg, red);
}
.brasa-option-tooltip {
	border: 1px solid var(--brasa-option-tooltip-border, var(--color-honey));
	border-radius: var(--brasa-option-tooltip-radius, 16px);
	color: var(--brasa-option-tooltip-fg, #fff);
	overflow: visible;
}
.brasa-option-tooltip__inner.tooltip-container {
	display: grid;
	gap: 8px;
	padding: 10px;
	cursor: default;
}
.brasa-option-tooltip__media {
	position: relative;
	display: block;
	width: 100%;
	height: 70px;
	border-radius: calc(var(--brasa-option-tooltip-radius, 16px) - 5px);
	overflow: hidden;
	background: color-mix(in srgb, var(--brasa-option-tooltip-fg, #fff) 16%, transparent);
}
/* Loading spinner — shows while the food photo is fetched. Hidden
   the moment the <img> finishes loading (or errors out) via the
   `is-loaded` class set by inline onload/onerror. */
.brasa-option-tooltip__spinner {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	border: 3px solid color-mix(in srgb, var(--brasa-option-tooltip-fg, #fff) 30%, transparent);
	border-top-color: var(--brasa-option-tooltip-fg, #fff);
	border-radius: 50%;
	animation: brasa-tooltip-spin 0.8s linear infinite;
	z-index: 1;
	pointer-events: none;
}
.brasa-option-tooltip__media.is-loaded .brasa-option-tooltip__spinner { display: none; }
@keyframes brasa-tooltip-spin { to { transform: rotate(360deg); } }
.brasa-option-tooltip__img,
.brasa-option-tooltip__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: calc(var(--brasa-option-tooltip-radius, 16px) - 5px);
	object-fit: cover;
	position: relative;
	z-index: 2;
	background: transparent;
}
.brasa-option-tooltip__media:not(.is-loaded) .brasa-option-tooltip__img {
	opacity: 0;
}
.brasa-option-tooltip__media.is-loaded .brasa-option-tooltip__img {
	opacity: 1;
	transition: opacity 0.2s ease-in;
}
.brasa-option-tooltip__inner strong {
	font-size: 13px;
	line-height: 1.15;
	color: var(--brasa-option-tooltip-fg, #fff);
}

/* Apology pill on closed date */
.brasa-apology {
	background: rgba(184,54,45,0.08);
	color: var(--color-ember);
	padding: 12px 16px;
	border-radius: 12px;
	border-left: 4px solid var(--color-ember);
	font-size: 14px;
	margin: 12px 0;
}

/* ===================================================================
 * BRAND LOGO — image variant for the front-end header & footer.
 *
 * When the admin uploads a logo in Settings → Brand logo, the header /
 * footer partials render the asset inside the existing `.brand`
 * anchor. We strip the inline padding the textual brand picks up so
 * the image sits cleanly, and let the inline `height` attribute on
 * the img drive the size (admin-configurable per-surface).
 * ================================================================= */
.brand.brand--has-logo { gap: 10px; padding: 0; line-height: 1; text-transform: none; letter-spacing: 0; font-size: inherit; }
.brand .brand-logo { display: block; width: auto; max-width: 240px; object-fit: contain; }
.brand .brand-text { font-family: var( --brasa-font-display, "Fraunces", serif ); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase; }
.footer-x .brand .brand-text { color: var( --color-bone ); }

/* ===================================================================
 * BRASA FIELDS — premium form-control styling.
 *
 * Applied across the whole front-end (.brasa-field). Inputs sit on a
 * white card-like surface with a generous resting border. The label
 * is a small uppercase eyebrow above the input, mirroring the
 * dashboard's voice. Focus state lifts to ember accent + soft glow.
 * Error state (added by the JS validator) paints the border red and
 * surfaces a per-field hint underneath.
 * ================================================================= */
.brasa-field {
	--bf-bg:        #fff;
	--bf-border:    rgba(26, 20, 16, 0.14);
	--bf-border-hi: rgba(26, 20, 16, 0.32);
	--bf-focus:     var(--color-ember);
	--bf-label:     #6e6258;
	--bf-error:     #c0392b;
	--bf-error-bg:  #fdecea;
	display: flex; flex-direction: column;
	gap: 6px; margin: 0; position: relative;
}
.brasa-field > span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--bf-label);
	font-weight: 700;
	line-height: 1.2;
}
.brasa-field input,
.brasa-field select,
.brasa-field textarea {
	width: 100%;
	background: var(--bf-bg);
	border: 1.5px solid var(--bf-border);
	border-radius: 14px;
	padding: 14px 16px;
	font: inherit;
	font-size: 15px;
	color: var(--color-ink);
	transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height: 1.35;
	box-shadow: 0 1px 0 rgba(26, 20, 16, 0.04);
}
.brasa-field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.brasa-field input::placeholder,
.brasa-field textarea::placeholder { color: rgba(26, 20, 16, 0.4); }
.brasa-field input:hover,
.brasa-field select:hover,
.brasa-field textarea:hover { border-color: var(--bf-border-hi); }
.brasa-field input:focus,
.brasa-field select:focus,
.brasa-field textarea:focus {
	outline: none;
	border-color: var(--bf-focus);
	box-shadow: 0 0 0 4px rgba(184, 54, 45, 0.16);
	background: #fff;
}
.brasa-field input:disabled,
.brasa-field select:disabled,
.brasa-field textarea:disabled { background: #f4f1ec; color: #8a7e72; cursor: not-allowed; }
.brasa-field input[type="datetime-local"],
.brasa-field input[type="date"],
.brasa-field input[type="time"] { font-feature-settings: "tnum" 1; }

/* Error states pushed in by the JS validator. */
.brasa-field.has-error > span { color: var(--bf-error); }
.brasa-field.has-error input,
.brasa-field.has-error select,
.brasa-field.has-error textarea {
	border-color: var(--bf-error);
	background: var(--bf-error-bg);
	box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12);
}
.brasa-field__hint {
	display: none;
	font-size: 12px;
	color: var(--bf-error);
	margin-top: 4px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.brasa-field.has-error .brasa-field__hint { display: block; }

/* Sub-grouping (e.g. "On-site contact" on checkout). */
.brasa-field-group {
	background: var(--color-paper);
	border: 1.5px dashed rgba(26, 20, 16, 0.16);
	border-radius: 16px;
	padding: 18px 18px 16px;
}
.brasa-field-group__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--color-ember);
	font-weight: 800;
	display: inline-block;
	margin-bottom: 4px;
}
.brasa-field-group__hint {
	color: rgba(26, 20, 16, 0.65);
	font-size: 13px;
	margin: 0 0 14px;
}

/* Vanilla-JS validation banner at top of any form. */
.brasa-form-errors {
	background: #fdecea;
	color: #8a1b15;
	border: 1.5px solid #f2b6b0;
	border-left: 6px solid #c0392b;
	border-radius: 14px;
	padding: 16px 20px 14px;
	margin-bottom: 22px;
	font-size: 14px;
}
.brasa-form-errors[hidden] { display: none; }
.brasa-form-errors__title { display: block; font-size: 14px; margin-bottom: 6px; color: #7a1812; font-weight: 700; }
.brasa-form-errors__list { margin: 0; padding-left: 18px; }
.brasa-form-errors__list li { margin: 2px 0; line-height: 1.4; }

/* ===================================================================
 * SOFT EMPTY-BAG BANNER on the checkout page. Shown above the form,
 * NEVER replaces it. Previously the boot script would set the form
 * to display:none when localStorage looked empty, which made the
 * page feel completely broken whenever the cart→checkout transition
 * was even slightly racy. The form now always stays mounted; this
 * banner just nudges the customer back to the menu if needed.
 * ================================================================= */
.brasa-empty-banner {
	display: flex; align-items: center; gap: 18px;
	background: linear-gradient(135deg, #fff9f1 0%, #fff 100%);
	border: 1px solid rgba(204, 91, 38, 0.25);
	border-left: 4px solid var(--color-ember, #cc5b26);
	border-radius: 16px;
	padding: 16px 20px;
	margin: 0 auto 22px;
	max-width: 960px;
	box-shadow: 0 6px 18px -14px rgba(204, 91, 38, 0.4);
}
.brasa-empty-banner[hidden] { display: none; }
.brasa-empty-banner__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.brasa-empty-banner__title { font-family: var(--brasa-font-display, serif); font-size: 1.15rem; color: var(--color-ink, #1a1410); }
.brasa-empty-banner__hint  { color: rgba(26, 20, 16, 0.7); font-size: 13px; line-height: 1.45; }
.brasa-empty-banner__cta   { white-space: nowrap; }
@media (max-width: 640px) {
	.brasa-empty-banner { flex-direction: column; align-items: stretch; text-align: left; }
	.brasa-empty-banner__cta { align-self: stretch; text-align: center; }
}

/* ===================================================================
 * CHECKOUT page layout — section cards + summary card + special list.
 * ================================================================= */
.brasa-checkout-section {
	background: #fff;
	border: 1px solid rgba(26, 20, 16, 0.08);
	border-radius: 22px;
	padding: 28px 28px 26px;
	margin-bottom: 22px;
	box-shadow: 0 8px 24px -18px rgba(26, 20, 16, 0.25);
}
.brasa-checkout-section__head { margin-bottom: 18px; }
.brasa-checkout-section__eyebrow {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-ember);
	font-weight: 800;
}
.brasa-checkout-section__title {
	font-family: var(--brasa-font-display, "Fraunces", serif);
	font-size: 1.6rem;
	margin: 4px 0 4px;
	color: var(--color-ink);
}
.brasa-checkout-section__hint {
	margin: 0;
	color: rgba(26, 20, 16, 0.6);
	font-size: 14px;
}

.brasa-checkout-mode-card {
	margin: 0 0 22px;
	padding: 18px 20px;
	border-radius: 20px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--color-sage) 16%, #fff), #fff);
	border: 1.5px solid color-mix(in srgb, var(--color-sage) 42%, transparent);
	box-shadow: 0 12px 30px -24px rgba(26,20,16,.35);
}
.brasa-checkout-mode-card--catering {
	background: linear-gradient(135deg, color-mix(in srgb, var(--color-ember) 14%, #fff), color-mix(in srgb, var(--color-honey) 12%, #fff));
	border-color: color-mix(in srgb, var(--color-ember) 36%, transparent);
}
.brasa-checkout-mode-card__eyebrow {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-ember);
}
.brasa-checkout-mode-card strong {
	display: block;
	font-family: var(--brasa-font-display, "Fraunces", serif);
	font-size: clamp(1.25rem, 1rem + .75vw, 1.8rem);
	line-height: 1.08;
	color: var(--color-ink);
}
.brasa-checkout-mode-card p {
	margin: 7px 0 0;
	max-width: 760px;
	color: color-mix(in srgb, var(--color-ink) 68%, transparent);
}

.brasa-special-list { display: grid; gap: 10px; }
.brasa-special {
	display: flex; align-items: center; gap: 14px;
	border: 1.5px solid rgba(26, 20, 16, 0.12);
	border-radius: 14px; padding: 14px 16px; cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease;
}
.brasa-special:hover { border-color: rgba(184, 54, 45, 0.55); background: var(--color-bone); }
.brasa-special input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-ember); }
.brasa-special__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.brasa-special__title { font-size: 14px; }
.brasa-special__desc  { font-size: 12px; color: rgba(26, 20, 16, 0.6); }
.brasa-special__price { font-family: var(--brasa-font-display, "Fraunces", serif); font-size: 1.2rem; color: var(--color-ember); }

.brasa-summary-card {
	background: #fff;
	border: 1px solid rgba(26, 20, 16, 0.08);
	border-radius: 22px;
	padding: 26px;
	position: sticky; top: 90px;
	box-shadow: 0 12px 32px -22px rgba(26, 20, 16, 0.35);
}
.brasa-summary-card__head { margin-bottom: 12px; }
.brasa-summary-card__eyebrow {
	display: inline-block; font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--color-ember); font-weight: 800;
}
.brasa-summary-card__title { font-family: var(--brasa-font-display, "Fraunces", serif); font-size: 1.5rem; margin: 2px 0 0; }
.brasa-summary-card__items { margin: 14px 0 0; font-size: 14px; }
.brasa-summary-card__fine { margin: 12px 0 0; font-size: 11px; text-align: center; color: rgba(26, 20, 16, 0.55); }
.brasa-dynamic-lines {
	margin: -4px 0 16px;
	padding: 12px 14px;
	border: 1px solid rgba(184, 54, 45, 0.18);
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255, 246, 237, 0.95), rgba(255, 255, 255, 0.96));
}
.brasa-dynamic-lines[hidden] { display: none; }
.brasa-dynamic-lines__title {
	margin-bottom: 8px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-ember);
}
.brasa-dynamic-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid rgba(26, 20, 16, 0.08);
	font-size: 13px;
}
.brasa-dynamic-line:first-of-type { border-top: 0; }
.brasa-dynamic-line__label { color: rgba(26, 20, 16, 0.78); }
.brasa-dynamic-line__amount {
	white-space: nowrap;
	font-family: var(--brasa-font-display, "Fraunces", serif);
	color: var(--color-ink);
}

.brasa-coupon {
	display: flex; gap: 8px; align-items: stretch; margin: 14px 0 6px;
}
.brasa-coupon__input {
	flex: 1; padding: 12px 16px; font: inherit; font-size: 14px;
	border: 1.5px solid rgba(26, 20, 16, 0.14); border-radius: 999px; background: #fff;
}
.brasa-coupon__input:focus { outline: none; border-color: var(--color-ember); box-shadow: 0 0 0 4px rgba(184,54,45,0.15); }
.brasa-coupon__btn {
	background: var(--color-ink); color: #fff; border: 0;
	padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 13px;
	letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
	transition: background-color 140ms ease;
}
.brasa-coupon__btn:hover { background: var(--color-ember); }
.brasa-coupon__msg { font-size: 13px; margin-bottom: 14px; min-height: 1em; }

.brasa-totals {
	display: grid; grid-template-columns: 1fr auto; gap: 8px 16px;
	margin: 18px 0 0; padding-top: 16px;
	border-top: 1px solid rgba(26, 20, 16, 0.1);
	font-size: 14px;
}
.brasa-totals dt, .brasa-totals dd { margin: 0; }
.brasa-totals dd { text-align: right; font-variant-numeric: tabular-nums; }
.brasa-totals__grand {
	font-family: var(--brasa-font-display, "Fraunces", serif);
	font-size: 1.5rem;
	border-top: 2px solid var(--color-ink);
	padding-top: 10px; margin-top: 4px;
}
.brasa-place-btn { width: 100%; justify-content: center; margin-top: 20px; }

/* =================================================================
 * PAYMENT SECTION
 *
 * Shown above the kitchen-notes textarea on the checkout page.
 * When WooCommerce is wired up, lists the active gateways the
 * customer will be redirected to. When it isn't, surfaces a
 * friendly "pay in person" placeholder so the section never
 * appears broken.
 * ================================================================= */
.brasa-payment-section { }
.brasa-pay-gateways {
	display: grid; gap: 10px;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	margin-bottom: 14px;
}
.brasa-pay-gateway {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px;
	background: #fff;
	border: 1.5px solid rgba( 26, 20, 16, 0.14 );
	border-radius: 14px;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.brasa-pay-gateway:hover {
	border-color: var(--color-ember, #b8362d);
	box-shadow: 0 8px 22px rgba( 26, 20, 16, 0.08 );
	transform: translateY( -1px );
}
.brasa-pay-gateway__icon {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 30px;
	color: var(--color-ember, #b8362d);
}
.brasa-pay-gateway__icon img {
	max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
}
.brasa-pay-gateway__icon--text { background: color-mix( in srgb, var(--color-ember, #b8362d) 12%, transparent ); border-radius: 8px; }
.brasa-pay-gateway__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brasa-pay-gateway__title { font-size: 14px; color: var(--color-ink, #1a1410); }
.brasa-pay-gateway__desc  { font-size: 12.5px; color: rgba( 26, 20, 16, 0.6 ); line-height: 1.4; }

.brasa-pay-fineprint {
	display: inline-flex; align-items: center; gap: 6px;
	color: rgba( 26, 20, 16, 0.55 );
	font-size: 12.5px;
	margin: 4px 0 0;
}

.brasa-pay-inperson {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 16px;
	background: color-mix( in srgb, var(--color-honey, #d4a24c) 14%, #fff );
	border: 1px solid color-mix( in srgb, var(--color-honey, #d4a24c) 45%, transparent );
	border-radius: 14px;
	color: #4a3614;
}
.brasa-pay-inperson svg { color: var(--color-honey, #d4a24c); margin-top: 1px; }
.brasa-pay-inperson strong { display: block; font-size: 14.5px; color: var(--color-ink, #1a1410); margin-bottom: 2px; }
.brasa-pay-inperson small  { font-size: 13px; color: rgba( 26, 20, 16, 0.6 ); display: block; line-height: 1.5; }

.brasa-pay-empty {
	display: flex; flex-direction: column; gap: 4px;
	padding: 14px 16px;
	background: rgba( 184, 54, 45, 0.06 );
	border: 1px dashed color-mix( in srgb, var(--color-ember, #b8362d) 35%, transparent );
	border-radius: 12px;
	color: var(--color-ink, #1a1410);
	font-size: 14px;
}
.brasa-pay-empty strong { color: var(--color-ember, #b8362d); }

@media ( max-width: 768px ) {
	.brasa-checkout-section { padding: 22px 18px; border-radius: 18px; }
	.brasa-summary-card { position: static; padding: 22px 18px; border-radius: 18px; }
}

/* ===================================================================
 * PICKUP CALENDAR
 *
 * Vanilla-JS month picker on the checkout page. The widget paints
 * one month at a time with prev/next arrows, disables closed days
 * (per Settings → Hours of Operation + closed-dates blackouts),
 * and surfaces the chosen day's available time slots as pill chips
 * below the grid. Every surface is themeable via the existing
 * --color-ember / --color-paper / --color-ink palette so admins
 * don't need to touch CSS to rebrand.
 * ================================================================= */
.brasa-cal {
	background: var(--color-paper);
	border-radius: 18px;
	padding: 22px;
	border: 1px solid rgba( 26, 20, 16, 0.08 );
}
.brasa-cal__loading,
.brasa-cal__empty { padding: 28px 10px; text-align: center; color: rgba( 26, 20, 16, 0.55 ); font-size: 14px; }

/* =================================================================
 * PICKUP — TODAY PANEL
 *
 * Premium "right-now availability" card pinned above the calendar.
 * Each time slot is a clickable pill; the active selection picks
 * up the same ember accent as the calendar's slot row so the
 * customer always knows what's locked in.
 * ================================================================= */
.brasa-cal-today {
	background: linear-gradient(135deg, var(--color-bone, #faf6f0) 0%, var(--color-paper, #fff) 100%);
	border: 1px solid color-mix( in srgb, var(--color-ember, #b8362d) 22%, transparent );
	border-radius: 18px;
	padding: 18px 20px;
	margin-bottom: 14px;
	box-shadow: 0 12px 32px rgba( 26, 20, 16, 0.08 );
}
.brasa-cal-today__loading { padding: 8px 4px; text-align: center; color: rgba( 26, 20, 16, 0.55 ); font-size: 14px; }
.brasa-cal-today__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.brasa-cal-today__eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--color-ember, #b8362d);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11.5px;
	font-weight: 700;
}
.brasa-cal-today__title {
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1.35rem;
	color: var(--color-ink, #1a1410);
	line-height: 1.2;
}
.brasa-cal-today__slots {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 4px;
}
.brasa-cal-today__slot {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 80px;
	padding: 9px 14px;
	border: 1.5px solid rgba( 26, 20, 16, 0.16 );
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	color: var(--color-ink, #1a1410);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.brasa-cal-today__slot:hover {
	border-color: var(--color-ember, #b8362d);
	transform: translateY(-1px);
}
.brasa-cal-today__slot.is-selected {
	background: var(--color-ember, #b8362d);
	color: #fff;
	border-color: var(--color-ember, #b8362d);
	box-shadow: 0 6px 16px color-mix( in srgb, var(--color-ember, #b8362d) 35%, transparent );
}
.brasa-cal-today__hint {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: rgba( 26, 20, 16, 0.6 );
}
.brasa-cal-today__closed {
	background: rgba( 184, 54, 45, 0.06 );
	border: 1px dashed color-mix( in srgb, var(--color-ember, #b8362d) 35%, transparent );
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--color-ink, #1a1410);
	line-height: 1.5;
}
.brasa-cal-today__closed strong { color: var(--color-ember, #b8362d); }
.brasa-cal-today__reason {
	display: inline-block;
	color: rgba( 26, 20, 16, 0.6 );
	font-style: italic;
	margin-right: 4px;
}

/* =================================================================
 * PICKUP — SPECIAL NOTES PANEL
 *
 * Admin-managed message (Settings → Pickup special notes). Only
 * rendered when the parent pickup-only section is active, so it
 * automatically disappears for catering orders.
 * ================================================================= */
.brasa-pickup-notes {
	display: block;
	background: color-mix( in srgb, var(--color-honey, #d4a24c) 18%, #fff );
	border: 1px solid color-mix( in srgb, var(--color-honey, #d4a24c) 55%, transparent );
	border-left: 4px solid var(--color-honey, #d4a24c);
	border-radius: 14px;
	padding: 14px 18px;
	margin-bottom: 14px;
}
.brasa-pickup-notes__eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	color: #7a5610;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11.5px;
	font-weight: 700;
	margin-bottom: 4px;
}
.brasa-pickup-notes__body { color: #4a3614; font-size: 14.5px; line-height: 1.55; }
.brasa-pickup-notes__body p { margin: 0 0 8px; }
.brasa-pickup-notes__body p:last-child { margin: 0; }
.brasa-pickup-notes__body a { color: var(--color-ember, #b8362d); text-decoration: underline; }

.brasa-cal__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 14px;
}
.brasa-cal__title {
	font-family: var( --brasa-font-display, "Fraunces", serif );
	font-size: 1.3rem; margin: 0; color: var( --color-ink );
}
.brasa-cal__nav {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%; border: 0;
	background: #fff; color: var( --color-ink ); cursor: pointer;
	font-size: 18px; line-height: 1; transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
	box-shadow: 0 1px 3px rgba( 26, 20, 16, 0.1 );
}
.brasa-cal__nav:hover:not(:disabled) { background: var( --color-ember ); color: #fff; transform: scale( 1.05 ); }
.brasa-cal__nav:disabled { opacity: 0.35; cursor: not-allowed; }

.brasa-cal__weekdays {
	display: grid; grid-template-columns: repeat( 7, 1fr ); gap: 6px;
	margin-bottom: 8px;
}
.brasa-cal__weekday {
	text-align: center; font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase; color: rgba( 26, 20, 16, 0.5 );
	font-weight: 700;
}

.brasa-cal__grid {
	display: grid; grid-template-columns: repeat( 7, 1fr ); gap: 6px;
}
.brasa-cal__day {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	border: 1.5px solid transparent;
	border-radius: 12px;
	font-weight: 600; font-size: 15px;
	color: var( --color-ink );
	cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 100ms ease;
	font-variant-numeric: tabular-nums;
}
.brasa-cal__day:hover:not(.is-disabled):not(.is-selected) {
	background: var( --color-bone );
	border-color: var( --color-ember );
	transform: translateY( -1px );
}
.brasa-cal__day.is-outside { background: transparent; color: rgba( 26, 20, 16, 0.2 ); pointer-events: none; }
.brasa-cal__day.is-disabled {
	background: rgba( 26, 20, 16, 0.04 );
	color: rgba( 26, 20, 16, 0.28 );
	cursor: not-allowed;
	text-decoration: line-through;
}
.brasa-cal__day.is-today { box-shadow: inset 0 0 0 1.5px rgba( 184, 54, 45, 0.45 ); }
.brasa-cal__day.is-selected {
	background: var( --color-ember );
	color: #fff;
	border-color: var( --color-ember );
	box-shadow: 0 6px 18px -8px rgba( 184, 54, 45, 0.55 );
}

/* Selected-day caret */
.brasa-cal__day::after {
	content: ""; position: absolute; bottom: 4px; left: 50%;
	transform: translateX( -50% );
	width: 4px; height: 4px; border-radius: 50%;
	background: var( --color-ember ); opacity: 0;
	transition: opacity 140ms ease;
}
.brasa-cal__day.is-open:not(.is-selected)::after { opacity: 0.5; }

/* Time slots strip */
.brasa-cal__slots-wrap {
	margin-top: 18px; padding-top: 18px;
	border-top: 1px solid rgba( 26, 20, 16, 0.1 );
}
.brasa-cal__slots-eyebrow {
	font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var( --color-ember ); font-weight: 800;
	margin-bottom: 10px; display: block;
}
.brasa-cal__slots {
	display: flex; flex-wrap: wrap; gap: 8px;
}
.brasa-cal__slot {
	background: #fff; color: var( --color-ink );
	border: 1.5px solid rgba( 26, 20, 16, 0.14 );
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 13px; font-weight: 600;
	cursor: pointer; font-family: inherit;
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 100ms ease;
	font-variant-numeric: tabular-nums;
}
.brasa-cal__slot:hover { border-color: var( --color-ember ); color: var( --color-ember ); transform: translateY( -1px ); }
.brasa-cal__slot.is-selected {
	background: var( --color-ink );
	color: var( --color-bone );
	border-color: var( --color-ink );
}

.brasa-cal__hint { font-size: 13px; color: rgba( 26, 20, 16, 0.55 ); margin-top: 8px; }
.brasa-cal__nopick {
	background: rgba( 184, 54, 45, 0.08 );
	color: var( --color-ember );
	padding: 14px 16px;
	border-radius: 12px;
	border-left: 4px solid var( --color-ember );
	font-size: 14px;
	margin-top: 12px;
	font-weight: 500;
}

/* Confirmation summary */
.brasa-cal__summary {
	margin-top: 16px;
	padding: 14px 18px;
	background: var( --color-ink );
	color: var( --color-bone );
	border-radius: 14px;
	font-size: 14px;
	font-weight: 500;
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px;
}
.brasa-cal__summary strong { font-family: var( --brasa-font-display, "Fraunces", serif ); font-weight: 600; font-size: 1.1rem; }
.brasa-cal__summary[hidden] { display: none; }

/* Error state painted by the validator */
.brasa-cal.has-error { box-shadow: 0 0 0 3px rgba( 192, 57, 43, 0.18 ); border-color: #c0392b; }
.brasa-cal__error {
	display: none;
	font-size: 12px; color: #c0392b; font-weight: 700;
	margin-top: 10px; letter-spacing: 0.02em;
}
.brasa-cal.has-error .brasa-cal__error { display: block; }

@media ( max-width: 560px ) {
	.brasa-cal { padding: 16px; }
	.brasa-cal__day { font-size: 13px; }
}

/* ===================================================================
 * CATERING CONTRACT + SIGNATURE
 *
 * Catering orders carry a contract that the customer must read and
 * sign before submitting. The contract scroll-box surfaces the full
 * agreement; the signature widget below offers two equally-binding
 * input modes — draw with finger / mouse, OR type your full name —
 * plus a consent checkbox. Both signature input and consent must be
 * filled for the order to be accepted (server re-verifies).
 * ================================================================= */
.brasa-contract {
	border: 1.5px solid rgba( 26, 20, 16, 0.12 );
	border-radius: 16px;
	background: var( --color-paper );
	overflow: hidden;
	margin-bottom: 22px;
}
.brasa-contract__scroll {
	max-height: 320px;
	overflow-y: auto;
	padding: 22px 24px;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba( 26, 20, 16, 0.85 );
	scrollbar-width: thin;
	scrollbar-color: var( --color-ember ) transparent;
}
.brasa-contract__scroll::-webkit-scrollbar { width: 8px; }
.brasa-contract__scroll::-webkit-scrollbar-thumb { background: var( --color-ember ); border-radius: 999px; }
.brasa-contract__scroll p { margin: 0 0 12px; }
.brasa-contract__scroll p:last-child { margin: 0; }
.brasa-contract__scroll strong { color: var( --color-ember ); }
.brasa-contract__scroll:focus { outline: none; box-shadow: inset 0 0 0 3px rgba( 184, 54, 45, 0.2 ); }

/* Signature widget */
.brasa-sign {
	background: #fff;
	border: 1.5px solid rgba( 26, 20, 16, 0.1 );
	border-radius: 18px;
	padding: 20px;
	transition: box-shadow 140ms ease, border-color 140ms ease;
}
.brasa-sign.has-error { border-color: #c0392b; box-shadow: 0 0 0 4px rgba( 192, 57, 43, 0.18 ); }

.brasa-sign__tabs {
	display: flex; gap: 6px; padding: 4px;
	background: var( --color-paper );
	border-radius: 999px;
	margin-bottom: 18px;
	width: 100%;
}
.brasa-sign__tab {
	flex: 1; min-width: 0;
	padding: 11px 14px;
	border: 0; background: transparent;
	border-radius: 999px;
	font: inherit; font-weight: 700; font-size: 13px;
	color: rgba( 26, 20, 16, 0.7 );
	cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease;
	white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.brasa-sign__tab:hover { color: var( --color-ink ); }
.brasa-sign__tab.is-active {
	background: var( --color-ink );
	color: #fff;
	box-shadow: 0 4px 12px -6px rgba( 26, 20, 16, 0.5 );
}

.brasa-sign__panel[hidden] { display: none; }

/* Draw pad */
.brasa-sign__pad-wrap {
	position: relative;
	background: linear-gradient( 180deg, #fafafa 0%, #fff 100% );
	border: 2px dashed rgba( 26, 20, 16, 0.18 );
	border-radius: 14px;
	overflow: hidden;
	height: 200px;
	touch-action: none; /* let the canvas own pointer events */
}
.brasa-sign__pad { display: block; width: 100%; height: 100%; cursor: crosshair; }
.brasa-sign__pad-baseline {
	position: absolute; left: 24px; right: 24px; bottom: 36px;
	border-top: 1.5px solid rgba( 26, 20, 16, 0.18 );
	pointer-events: none;
}
.brasa-sign__pad-placeholder {
	position: absolute; left: 50%; bottom: 14px; transform: translateX( -50% );
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	color: rgba( 26, 20, 16, 0.32 ); font-weight: 700;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.brasa-sign__pad-wrap.is-dirty .brasa-sign__pad-placeholder { opacity: 0; }

.brasa-sign__pad-actions {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: 10px; gap: 16px; flex-wrap: wrap;
}
.brasa-sign__clear {
	background: transparent;
	border: 1.5px solid rgba( 26, 20, 16, 0.16 );
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; cursor: pointer;
	color: var( --color-ink );
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.brasa-sign__clear:hover { background: var( --color-ember ); color: #fff; border-color: var( --color-ember ); }
.brasa-sign__pad-hint { font-size: 12px; color: rgba( 26, 20, 16, 0.55 ); }

/* Typed-signature preview */
.brasa-sign__preview {
	margin-top: 14px;
	min-height: 90px;
	padding: 18px 22px;
	background: linear-gradient( 180deg, #fafafa 0%, #fff 100% );
	border: 2px dashed rgba( 26, 20, 16, 0.18 );
	border-radius: 14px;
	font-family: "Dancing Script", "Brush Script MT", "Lucida Handwriting", cursive;
	font-size: 2.3rem;
	color: var( --color-ink );
	display: flex; align-items: center; justify-content: center;
	line-height: 1.2;
	text-align: center;
}
.brasa-sign__preview:empty::before {
	content: attr( data-placeholder, 'Your typed signature will appear here' );
	color: rgba( 26, 20, 16, 0.28 );
	font-family: var( --brasa-font-sans, "Inter", sans-serif );
	font-size: 13px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
}

/* Consent checkbox */
.brasa-sign__consent {
	display: flex; align-items: flex-start; gap: 12px;
	margin-top: 18px;
	padding: 14px 16px;
	background: var( --color-bone );
	border: 1.5px solid rgba( 26, 20, 16, 0.1 );
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba( 26, 20, 16, 0.85 );
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease;
}
.brasa-sign__consent:hover { border-color: var( --color-ember ); }
.brasa-sign__consent input[type="checkbox"] {
	width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
	accent-color: var( --color-ember );
	cursor: pointer;
}
.brasa-sign__consent.has-error { border-color: #c0392b; background: #fdecea; }

@media ( max-width: 560px ) {
	.brasa-sign__tab { font-size: 11px; padding: 10px 8px; }
	.brasa-sign__pad-wrap { height: 160px; }
	.brasa-sign__preview { font-size: 1.8rem; }
}

/* Notice/feedback for CRUD/AJAX */
.brasa-toast {
	position: fixed;
	top: 75px;
	left: 18px;
	background: var(--brasa-cart-notice-bg, var(--color-ink));
	color: var(--brasa-cart-notice-fg, var(--color-bone));
	padding: 15px 20px 15px 52px;
	border-radius: var(--brasa-cart-notice-radius, 18px);
	border: 1px solid color-mix(in srgb, var(--brasa-cart-notice-border, var(--color-honey)) 70%, transparent);
	z-index: 10000;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.01em;
	transform: translateX(-120%);
	opacity: 0;
	transition: transform .42s cubic-bezier(.2,.9,.22,1.14), opacity .22s ease;
	max-width: min(380px, calc(100vw - 36px));
	min-height: 54px;
	display: flex;
	align-items: center;
	box-shadow: 0 18px 44px color-mix(in srgb, var(--brasa-cart-notice-shadow, #1a1410) 24%, transparent);
}
.brasa-toast.is-visible { transform: none; opacity: 1; }
.brasa-toast::before {
	content: "✓";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 25px;
	height: 25px;
	border-radius: 999px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	background: var(--brasa-cart-notice-accent, var(--color-sage));
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	box-shadow: 0 7px 18px rgba(0,0,0,.18);
}
.brasa-toast.is-error {
	background: var(--color-ember);
	color: #fff;
	border-color: rgba(255,255,255,.28);
}
.brasa-toast.is-error::before {
	content: "!";
	background: rgba(255,255,255,.18);
	color: #fff;
}

/* Page chrome buttons */
.brasa-btn-primary {
	background: var(--color-ember); color: #fff; padding: 14px 26px;
	border-radius: 999px; font-weight: 700; font-size: 13px;
	letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid var(--color-ember);
	cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
	transition: background .2s, transform .15s;
	font-family: inherit;
}
.brasa-btn-primary:hover { background: var(--color-ink); border-color: var(--color-ink); transform: translateY(-1px); }
.brasa-btn-ghost {
	background: transparent; color: var(--color-ink); padding: 14px 26px;
	border-radius: 999px; font-weight: 700; font-size: 13px;
	letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid var(--color-ink);
	cursor: pointer;
}
.brasa-btn-ghost:hover { background: var(--color-ink); color: var(--color-bone); }

/* =====================================================
   MOBILE-MENU enhancements (overlay was restored from
   the bundled html_templates header pattern). The base
   slide-in animation and burger styles come from
   html_templates/assets/css/style.css — these rules
   layer on the BRASA-only additions: in-drawer service
   toggle (uses .brasa-mode-toggle--drawer variant above),
   cart badge, control-panel CTA.
   ===================================================== */

/* Cart-count badge next to "Your Bag" link in mobile menu. */
.mobile-menu .mobile-menu-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	margin-left: 10px;
	border-radius: 999px;
	background: var(--color-ember);
	color: #fff;
	font-family: var(--brasa-font-sans, "Inter", sans-serif);
	font-size: 12px;
	font-weight: 700;
	vertical-align: middle;
	transform: scale(0);
	transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.mobile-menu .mobile-menu-badge.is-visible { transform: scale(1); }

/* Control-Panel CTA inside the drawer foot. */
.mobile-menu-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 16px;
	margin-right: 12px;
	background: rgba(184,54,45,0.15);
	border: 1.5px solid rgba(184,54,45,0.5);
	border-radius: 999px;
	color: var(--color-bone);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
}
.mobile-menu-cta:hover {
	background: var(--color-ember);
	border-color: var(--color-ember);
	color: #fff;
}

/* Body lock-scroll while the drawer is open. */
body.brasa-mobile-open { overflow: hidden; }

/* =====================================================
   ORDER-MODE TOGGLE — premium segmented control that
   sits in its own row in the top-right corner BELOW the
   Control Panel zone on every page. This is the SOLE
   surface that lets the customer flip between Pickup
   and Catering once a selection is saved.

   Every colour is driven by a CSS variable injected by
   Brasa_Public::inject_theme() so it can be edited from
   the private dashboard's Theme & Branding settings.
   Sensible defaults (derived from the global palette)
   are baked in here as fallbacks.
   ===================================================== */
:root {
	--brasa-toggle-bg:         var(--brasa-toggle-bg-color,         #ffffff);
	--brasa-toggle-fg:         var(--brasa-toggle-fg-color,         var(--color-ink, #1a1410));
	--brasa-toggle-border:     var(--brasa-toggle-border-color,     rgba(26, 20, 16, 0.08));
	--brasa-toggle-shadow:     var(--brasa-toggle-shadow-color,     0 18px 42px rgba(26, 20, 16, 0.18));
	--brasa-toggle-eyebrow:    var(--brasa-toggle-eyebrow-color,    rgba(26, 20, 16, 0.55));
	--brasa-toggle-track-bg:   var(--brasa-toggle-track-bg-color,   var(--color-paper, #f3ece1));
	--brasa-toggle-pill-bg:    var(--brasa-toggle-pill-bg-color,    var(--color-ember, #b8362d));
	--brasa-toggle-pill-fg:    var(--brasa-toggle-pill-fg-color,    #ffffff);
	--brasa-toggle-pill-shadow:var(--brasa-toggle-pill-shadow-color,0 6px 16px rgba(184, 54, 45, 0.32));
	--brasa-toggle-inactive:   var(--brasa-toggle-inactive-color,   rgba(26, 20, 16, 0.62));
	--brasa-toggle-hover:      var(--brasa-toggle-hover-color,      var(--color-ink, #1a1410));
}

/* =====================================================
   FIXED TAB POSITIONING (desktop + tablet only)

   The order-mode toggle docks itself to the right edge of
   the viewport 120px down from the top and STAYS there as
   the customer scrolls — like a persistent "you're in
   pickup / catering mode" tab. Right side is flush with
   the edge of the viewport (flat corners + shadow only on
   the left) so it reads as a true side-tab and not a
   floating chip. On mobile (≤900px) this row is hidden
   entirely and the in-drawer .brasa-mode-toggle--drawer
   variant inside the burger menu takes over.
   ===================================================== */
.brasa-mode-row {
	position: fixed;
	top: 80px;
	right: 0;
	z-index: 90;
	pointer-events: none;
	transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}
.brasa-header-search-open .brasa-mode-row {
	opacity: 0;
	visibility: hidden;
	transform: translateX(18px);
	pointer-events: none;
}
.brasa-mode-row-inner {
	display: flex;
	justify-content: flex-end;
	padding: 0;
	margin: 0;
}
.brasa-mode-row .brasa-mode-toggle { pointer-events: auto; }

/* Right side of the toggle sits flush against the viewport
   edge — flat corners, no right border, and the drop shadow
   is biased to the left so the tab reads as docked. */
.brasa-mode-row .brasa-mode-toggle {
	border-radius: 22px 0 0 22px;
	border-right: 0;
	box-shadow: -14px 18px 42px rgba(26, 20, 16, 0.18);
	transform-origin: top right;
	animation: brasaToggleSlideIn .55s cubic-bezier(.2,.8,.2,1.05) both;
}

@keyframes brasaToggleSlideIn {
	0%   { opacity: 0; transform: translateX(24px); }
	100% { opacity: 1; transform: translateX(0);    }
}

/* =====================================================
   The toggle card itself
   ===================================================== */
.brasa-mode-toggle {
	--seg-pad-x: 22px;
	--seg-pad-y: 10px;
	--seg-min-w: 124px;

	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 14px;
	border-radius: 22px;
	background: var(--brasa-toggle-bg);
	color: var(--brasa-toggle-fg);
	border: 1.5px solid var(--brasa-toggle-border);
	box-shadow: var(--brasa-toggle-shadow);
	font-family: var(--brasa-font-sans, "Inter", system-ui, sans-serif);
	transform-origin: top right;
	animation: brasaToggleIn .55s cubic-bezier(.2,.8,.2,1.05) both;
}
.brasa-mode-toggle[hidden] { display: none; }

@keyframes brasaToggleIn {
	0%   { opacity: 0; transform: translateY(-8px) scale(.96); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: translateY(0)    scale(1);  }
}

/* Eyebrow line above the toggle */
.brasa-mode-toggle-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 8px;
	color: var(--brasa-toggle-eyebrow);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.brasa-mode-toggle-eyebrow svg {
	flex-shrink: 0;
	color: var(--brasa-toggle-pill-bg);
}

/* Segmented track with the sliding pill */
.brasa-mode-toggle-track {
	position: relative;
	display: inline-flex;
	background: var(--brasa-toggle-track-bg);
	border-radius: 999px;
	padding: 4px;
	isolation: isolate;
}

.brasa-mode-toggle-pill {
	position: absolute;
	top: 4px;
	left: 4px;
	bottom: 4px;
	width: calc(50% - 4px);
	border-radius: 999px;
	background: var(--brasa-toggle-pill-bg);
	box-shadow: var(--brasa-toggle-pill-shadow);
	transition: transform .42s cubic-bezier(.4, 1.4, .55, 1), background .25s;
	z-index: 1;
	transform: translateX(0%);
	opacity: 0;
	pointer-events: none;
}
/* =====================================================================
 * CART + CHECKOUT ROW THUMBNAILS
 *
 * Both the cart page (full editable rows) and the checkout summary
 * (right-rail mini rows) render the product's hero image so the
 * customer can confirm at a glance what they're paying for. The image
 * itself is captured at add-to-bag time and stored on the bag line so
 * we never re-fetch it on subsequent renders.
 * ===================================================================== */

/* ----- Cart-page row ----- */
.brasa-cart-row {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: 18px;
	align-items: center;
	background: #fff;
	border-radius: 18px;
	padding: 18px;
	margin-bottom: 14px;
	border: 1px solid rgba(26,20,16,0.1);
}
.brasa-cart-row__thumb {
	width: 120px;
	height: 100px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--color-paper);
	flex-shrink: 0;
}
.brasa-cart-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.brasa-cart-row__thumb.is-placeholder {
	background: linear-gradient(135deg, var(--color-paper) 0%, #ece4d6 100%);
}
.brasa-cart-row__body { min-width: 0; }
.brasa-cart-row__name {
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1.2rem;
	display: block;
}
.brasa-cart-row__meta {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.4;
}
.brasa-cart-row__controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.brasa-cart-row__price {
	text-align: right;
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1.3rem;
}
@media ( max-width: 600px ) {
	.brasa-cart-row {
		grid-template-columns: 84px 1fr;
		grid-template-rows: auto auto;
		row-gap: 10px;
	}
	.brasa-cart-row__thumb {
		width: 84px;
		height: 84px;
	}
	.brasa-cart-row__price {
		grid-column: 1 / -1;
		text-align: left;
		padding-left: 96px;
	}
}

/* ----- Checkout summary mini-row ----- */
.brasa-summary-row {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(26,20,16,0.06);
	font-size: 13px;
}
.brasa-summary-row:last-child { border-bottom: none; }
.brasa-summary-row__thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--color-paper);
	flex-shrink: 0;
}
.brasa-summary-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.brasa-summary-row__body { min-width: 0; }
.brasa-summary-row__name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}
.brasa-summary-row__qty {
	font-weight: 500;
	color: var(--color-mute, #6e6258);
}
.brasa-summary-row__meta {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--color-mute, #6e6258);
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.brasa-summary-row__price {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 500;
}

/*
 * Pill position per active mode. The chip itself is hidden when the
 * customer is on the Food to Go menu (only one mode → no toggle), so
 * "pickup" and "catering_pickup" both lay the pill on the LEFT segment
 * for completeness even though only catering_pickup is visible.
 */
.brasa-mode-toggle[data-mode="pickup"]           .brasa-mode-toggle-pill { transform: translateX(0%);   opacity: 1; }
.brasa-mode-toggle[data-mode="catering_pickup"]  .brasa-mode-toggle-pill { transform: translateX(0%);   opacity: 1; }
.brasa-mode-toggle[data-mode="catering_onsite"]  .brasa-mode-toggle-pill { transform: translateX(100%); opacity: 1; }

/* Each segment */
.brasa-mode-toggle-seg {
	position: relative;
	z-index: 2;
	min-width: var(--seg-min-w);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: var(--seg-pad-y) var(--seg-pad-x);
	border: 0;
	background: transparent;
	color: var(--brasa-toggle-inactive);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 999px;
	cursor: pointer;
	transition: color .22s ease, transform .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.brasa-mode-toggle-seg-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	transition: transform .25s ease;
}
.brasa-mode-toggle-seg-label { line-height: 1; white-space: nowrap; }

/* Hover on a non-active segment */
.brasa-mode-toggle-seg:not(.is-active):hover,
.brasa-mode-toggle-seg:not(.is-active):focus-visible {
	color: var(--brasa-toggle-hover);
	outline: none;
}
.brasa-mode-toggle-seg:not(.is-active):hover .brasa-mode-toggle-seg-icon {
	transform: scale(1.08);
}

/* Active segment text */
.brasa-mode-toggle-seg.is-active {
	color: var(--brasa-toggle-pill-fg);
	font-weight: 800;
}
.brasa-mode-toggle-seg.is-active .brasa-mode-toggle-seg-icon { transform: scale(1.04); }

/* Crisp focus ring for keyboard users */
.brasa-mode-toggle-seg:focus-visible {
	outline: 2px solid var(--brasa-toggle-pill-bg);
	outline-offset: 3px;
}

/* =====================================================
   In-drawer variant (mobile menu): dark background,
   slightly tighter padding, full-width track.
   ===================================================== */
.brasa-mode-toggle--drawer {
	--brasa-toggle-bg:         rgba(255, 255, 255, 0.04);
	--brasa-toggle-fg:         var(--color-bone, #faf6f0);
	--brasa-toggle-border:     rgba(255, 255, 255, 0.12);
	--brasa-toggle-shadow:     none;
	--brasa-toggle-eyebrow:    rgba(255, 255, 255, 0.6);
	--brasa-toggle-track-bg:   rgba(255, 255, 255, 0.08);
	--brasa-toggle-inactive:   rgba(255, 255, 255, 0.75);
	--brasa-toggle-hover:      #ffffff;

	width: 100%;
	max-width: 460px;
	margin: 0 0 28px;
	padding: 14px 14px 16px;
	border-radius: 18px;
}
.brasa-mode-toggle--drawer .brasa-mode-toggle-track {
	display: flex;
	width: 100%;
}
.brasa-mode-toggle--drawer .brasa-mode-toggle-seg {
	flex: 1 1 50%;
	min-width: 0;
}
.brasa-mode-toggle--drawer .brasa-mode-toggle-eyebrow {
	color: var(--brasa-toggle-eyebrow);
}
.brasa-mode-toggle--drawer .brasa-mode-toggle-eyebrow svg {
	color: var(--brasa-toggle-pill-bg);
}

/* =====================================================
   Mobile only: hide the desktop fixed-tab row entirely
   so it doesn't fight with the burger menu. The in-drawer
   toggle inside .mobile-menu takes over.

   Breakpoint mirrors the bundled template's burger-visible
   media query (max-width: 768px) — that way the fixed
   right-edge tab appears on desktop AND tablet (≥769px),
   and only mobile users (≤768px) rely on the in-drawer
   variant.
   ===================================================== */
@media (max-width: 768px) {
	.brasa-mode-row { display: none; }
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
	.brasa-mode-toggle { animation: none; }
	.brasa-mode-toggle-pill { transition: none; }
	.brasa-mode-toggle-seg { transition: none; }
	.brasa-mode-toggle-seg-icon { transition: none; }
}

/* =====================================================
   SUBSTITUTIONS — premium card + chip selector.

   Replaces the old `<select>` dropdowns with a chip-based
   UI that matches the option-group chips elsewhere on the
   product page. Each ingredient is its own card with a
   header (icon + name + eyebrow) and a wrapping row of
   chip buttons. "Keep original" is rendered with a sage
   accent + checkmark, "Omit" with a muted ember accent +
   slash circle so the destructive action is visually
   distinct from a simple swap.

   Every colour is themeable via CSS variables injected by
   Brasa_Public::inject_theme(). Safe fallbacks derived
   from the global palette are baked in.
   ===================================================== */
:root {
	--brasa-sub-card-bg:           var(--brasa-sub-card-bg-color,           #ffffff);
	--brasa-sub-card-border:       var(--brasa-sub-card-border-color,       rgba(26, 20, 16, 0.08));
	--brasa-sub-card-shadow:       var(--brasa-sub-card-shadow-color,       0 12px 32px rgba(26, 20, 16, 0.06));
	--brasa-sub-card-hover-shadow: var(--brasa-sub-card-hover-shadow-color, 0 22px 48px rgba(26, 20, 16, 0.12));
	--brasa-sub-eyebrow:           var(--brasa-sub-eyebrow-color,           var(--color-ember, #b8362d));
	--brasa-sub-ingredient:        var(--brasa-sub-ingredient-color,        var(--color-ink,   #1a1410));
	--brasa-sub-action:            var(--brasa-sub-action-color,            rgba(26, 20, 16, 0.5));
	--brasa-sub-dot-bg:            var(--brasa-sub-dot-bg-color,            var(--color-paper, #f3ece1));
	--brasa-sub-dot-fg:            var(--brasa-sub-dot-fg-color,            var(--color-ember, #b8362d));

	--brasa-sub-chip-bg:           var(--brasa-sub-chip-bg-color,           #ffffff);
	--brasa-sub-chip-fg:           var(--brasa-sub-chip-fg-color,           var(--color-ink, #1a1410));
	--brasa-sub-chip-border:       var(--brasa-sub-chip-border-color,       rgba(26, 20, 16, 0.14));
	--brasa-sub-chip-hover-bg:     var(--brasa-sub-chip-hover-bg-color,     var(--color-paper, #f3ece1));
	--brasa-sub-chip-hover-border: var(--brasa-sub-chip-hover-border-color, rgba(26, 20, 16, 0.28));

	--brasa-sub-chip-active-bg:    var(--brasa-sub-chip-active-bg-color,    var(--color-ink, #1a1410));
	--brasa-sub-chip-active-fg:    var(--brasa-sub-chip-active-fg-color,    var(--color-bone, #faf6f0));
	--brasa-sub-chip-active-shadow:var(--brasa-sub-chip-active-shadow-color,0 8px 18px rgba(26, 20, 16, 0.18));

	--brasa-sub-chip-keep:         var(--brasa-sub-chip-keep-color,         var(--color-sage,  #5b6f47));
	--brasa-sub-chip-omit:         var(--brasa-sub-chip-omit-color,         var(--color-ember, #b8362d));
}

.brasa-subs { margin-top: 36px; }

.brasa-subs-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 18px;
}
.brasa-subs-eyebrow {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--brasa-sub-eyebrow) 12%, transparent);
	color: var(--brasa-sub-eyebrow);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.brasa-subs-title {
	margin: 6px 0 0;
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--brasa-sub-ingredient);
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
}
.brasa-subs-lead {
	margin: 4px 0 0;
	color: rgba(26, 20, 16, 0.62);
	font-size: 14.5px;
	max-width: 56ch;
}

.brasa-subs-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

/* ---- Card ---- */
.brasa-sub-card {
	background: var(--brasa-sub-card-bg);
	border: 1.5px solid var(--brasa-sub-card-border);
	border-radius: 20px;
	padding: 20px 22px;
	box-shadow: var(--brasa-sub-card-shadow);
	transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.brasa-sub-card:hover {
	box-shadow: var(--brasa-sub-card-hover-shadow);
	border-color: color-mix(in srgb, var(--brasa-sub-eyebrow) 28%, var(--brasa-sub-card-border));
	transform: translateY(-1px);
}

.brasa-sub-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.brasa-sub-card-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--brasa-sub-dot-bg);
	color: var(--brasa-sub-dot-fg);
	flex-shrink: 0;
}
.brasa-sub-card-ingredient {
	font-family: var(--brasa-font-display, "Fraunces", Georgia, serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--brasa-sub-ingredient);
	line-height: 1.1;
	margin-right: auto;
}
.brasa-sub-card-action {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brasa-sub-action);
	white-space: nowrap;
}

/* ---- Chips ---- */
.brasa-sub-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.brasa-sub-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--brasa-sub-chip-bg);
	color: var(--brasa-sub-chip-fg);
	border: 1.5px solid var(--brasa-sub-chip-border);
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.brasa-sub-chip:hover,
.brasa-sub-chip:focus-visible {
	background: var(--brasa-sub-chip-hover-bg);
	border-color: var(--brasa-sub-chip-hover-border);
	outline: none;
	transform: translateY(-1px);
}
.brasa-sub-chip:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brasa-sub-eyebrow) 30%, transparent);
}
.brasa-sub-chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.brasa-sub-chip-label { white-space: nowrap; }

/* Active (selected) state — radio-style */
.brasa-sub-chip.is-active {
	background: var(--brasa-sub-chip-active-bg);
	color: var(--brasa-sub-chip-active-fg);
	border-color: var(--brasa-sub-chip-active-bg);
	box-shadow: var(--brasa-sub-chip-active-shadow);
	font-weight: 700;
}

/* "Keep original" chip — sage tint when active so it
   reads as the safe / default choice. */
.brasa-sub-chip--keep .brasa-sub-chip-icon { color: var(--brasa-sub-chip-keep); }
.brasa-sub-chip--keep.is-active {
	background: var(--brasa-sub-chip-keep);
	border-color: var(--brasa-sub-chip-keep);
	color: #fff;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--brasa-sub-chip-keep) 38%, transparent);
}
.brasa-sub-chip--keep.is-active .brasa-sub-chip-icon { color: #fff; }
.brasa-sub-chip--keep:not(.is-active) {
	border-color: color-mix(in srgb, var(--brasa-sub-chip-keep) 35%, var(--brasa-sub-chip-border));
}

/* "Omit" chip — danger / ember tint when active so the
   destructive action is visually distinct. */
.brasa-sub-chip--omit {
	color: var(--brasa-sub-chip-omit);
	border-color: color-mix(in srgb, var(--brasa-sub-chip-omit) 30%, var(--brasa-sub-chip-border));
}
.brasa-sub-chip--omit .brasa-sub-chip-icon { color: var(--brasa-sub-chip-omit); }
.brasa-sub-chip--omit:hover {
	background: color-mix(in srgb, var(--brasa-sub-chip-omit) 10%, var(--brasa-sub-chip-bg));
	border-color: color-mix(in srgb, var(--brasa-sub-chip-omit) 55%, var(--brasa-sub-chip-border));
	color: var(--brasa-sub-chip-omit);
}
.brasa-sub-chip--omit.is-active {
	background: var(--brasa-sub-chip-omit);
	border-color: var(--brasa-sub-chip-omit);
	color: #fff;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--brasa-sub-chip-omit) 38%, transparent);
}
.brasa-sub-chip--omit.is-active .brasa-sub-chip-icon { color: #fff; }

/* Small-screen tweaks */
@media (max-width: 600px) {
	.brasa-sub-card { padding: 16px 18px; }
	.brasa-sub-card-action { display: none; }
	.brasa-sub-card-ingredient { font-size: 1.1rem; }
	.brasa-sub-chip { padding: 9px 14px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.brasa-sub-card { transition: none; }
	.brasa-sub-chip { transition: none; }
}

/* =====================================================
   GENERAL SETTINGS — FRONT-END SURFACING
   Every saved setting on the General Settings page lands
   somewhere visible. The styles below polish the new
   surfaces (per-menu disclosures, free-delivery progress
   strip, catering policy card, public hours table).
   ===================================================== */

/* Per-menu disclosure banner — renders the food_to_go_message
   on /menu/, and both catering messages on /catering/. */
.brasa-menu-msg {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: color-mix(in srgb, var(--color-honey) 12%, #fff);
	border: 1px solid color-mix(in srgb, var(--color-honey) 35%, transparent);
	border-radius: 14px;
	padding: 16px 20px;
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-ink);
}
.brasa-menu-msg svg { color: var(--color-ember); flex-shrink: 0; margin-top: 2px; }
.brasa-menu-msg__body :first-child { margin-top: 0; }
.brasa-menu-msg__body :last-child  { margin-bottom: 0; }
.brasa-menu-msg--catering { display: grid; gap: 14px; }
.brasa-menu-msg__svc { padding-left: 0; border-left: 3px solid var(--color-ember); padding-left: 14px; }
.brasa-menu-msg__eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 11px;
	font-weight: 700;
	color: var(--color-ember);
	margin-bottom: 4px;
}

/* Service-specific message under the product detail page's
   Pickup ↔ On-Site toggle. */
.brasa-svc-msgs {
	margin: 14px 0 0;
	padding: 14px 18px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--color-paper) 60%, #fff);
	border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
	font-size: 13.5px;
	line-height: 1.55;
}
.brasa-svc-msg :first-child { margin-top: 0; }
.brasa-svc-msg :last-child  { margin-bottom: 0; }

/* Cart — free-delivery progress strip. Threshold + fee come
   straight from General Settings. */
.brasa-free-delivery {
	margin: 12px 0 18px;
	padding: 14px 16px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--color-sage) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--color-sage) 25%, transparent);
}
.brasa-free-delivery.is-unlocked {
	background: color-mix(in srgb, var(--color-sage) 16%, #fff);
	border-color: color-mix(in srgb, var(--color-sage) 50%, transparent);
}
.brasa-free-delivery__copy { font-size: 13px; font-weight: 600; color: var(--color-ink); margin-bottom: 8px; }
.brasa-free-delivery__track {
	width: 100%;
	height: 8px;
	background: color-mix(in srgb, var(--color-ink) 8%, #fff);
	border-radius: 999px;
	overflow: hidden;
}
.brasa-free-delivery__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--color-honey), var(--color-sage));
	border-radius: 999px;
	transition: width 280ms ease;
	width: 0%;
}
.brasa-free-delivery.is-unlocked .brasa-free-delivery__fill { background: var(--color-sage); }

/* Checkout — catering policy disclosure card. Shows the
   non-refundable, extra-mile rate, and delivery thresholds
   straight from General Settings. */
.brasa-policy-card {
	margin: 14px 0 18px;
	padding: 14px 18px;
	border-radius: 14px;
	background: #fff;
	border: 1px dashed color-mix(in srgb, var(--color-honey) 60%, transparent);
}
.brasa-policy-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-ember);
	margin-bottom: 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.brasa-policy-card__head strong { color: var(--color-ink); font-size: 13px; letter-spacing: 0.04em; text-transform: none; font-weight: 700; }
.brasa-policy-card__list {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 14px;
	margin: 0;
	font-size: 13px;
}
.brasa-policy-card__list dt { color: color-mix(in srgb, var(--color-ink) 65%, transparent); font-weight: 500; }
.brasa-policy-card__list dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; }

/* Contact page — hours-of-operation table + service badges. */
.brasa-public-hours {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.brasa-public-hours th,
.brasa-public-hours td {
	padding: 8px 0;
	text-align: left;
	border-bottom: 1px dashed color-mix(in srgb, var(--color-ink) 10%, transparent);
}
.brasa-public-hours td { text-align: right; font-variant-numeric: tabular-nums; }
.brasa-public-hours tr:last-child th,
.brasa-public-hours tr:last-child td { border-bottom: 0; }
.brasa-public-hours tr.is-today th,
.brasa-public-hours tr.is-today td { color: var(--color-ember); font-weight: 700; }
.brasa-public-hours tr.is-closed td { color: color-mix(in srgb, var(--color-ink) 55%, transparent); }
.brasa-public-hours__closed { font-style: italic; }

.brasa-public-svc-list { display: flex; gap: 6px; flex-wrap: wrap; }
.brasa-public-svc {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-sage) 14%, #fff);
	color: color-mix(in srgb, var(--color-sage) 70%, var(--color-ink));
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* =====================================================
   Cart / Checkout inline catering-service toggle.
   Lets the customer flip Pickup ↔ On-Site directly from
   the summary card. The click reprices every catering
   line server-side and refreshes the displayed numbers
   so the customer never sees Pickup pricing while
   booking the higher-priced On-Site service.
   ===================================================== */
.brasa-cart-svc-toggle {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
	row-gap: 6px;
	align-items: center;
	margin: 4px 0 18px;
	padding: 12px 14px;
	background: color-mix(in srgb, var(--color-paper) 60%, #fff);
	border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
	border-radius: 14px;
}
.brasa-cart-svc-toggle__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-ink) 60%, transparent);
}
.brasa-cart-svc-toggle__pills {
	display: inline-flex;
	background: color-mix(in srgb, var(--color-ink) 6%, #fff);
	padding: 3px;
	border-radius: 999px;
	gap: 2px;
	justify-self: end;
}
.brasa-cart-svc-toggle__pill {
	border: 0;
	background: transparent;
	color: color-mix(in srgb, var(--color-ink) 65%, transparent);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.brasa-cart-svc-toggle__pill:hover {
	color: var(--color-ink);
}
.brasa-cart-svc-toggle__pill.is-active {
	background: var(--color-ember);
	color: #fff;
	box-shadow: 0 4px 10px color-mix(in srgb, var(--color-ember) 35%, transparent);
}
.brasa-cart-svc-toggle__hint {
	grid-column: 1 / -1;
	font-size: 12px;
	line-height: 1.4;
}
.brasa-cart-svc-toggle--checkout {
	margin-top: 0;
}