/* WS Food Ordering: menu page, built to the Snappy Bite mockup. Scoped to .wsfo so it sits inside any theme. */
.wsfo {
	--wsfo-accent: #9B1111;
	--wsfo-accent-soft: color-mix(in srgb, var(--wsfo-accent) 13%, #fff);
	--wsfo-ink: #1D1A17;
	--wsfo-muted: #6B635A;
	--wsfo-line: #ECDCC6;
	--wsfo-sunk: #F7EDDF;
	--wsfo-bg: #FFFFFF;
	--wsfo-palm: #F8B30F;
	--wsfo-leaf: #1E7A4C;
	--wsfo-leaf-soft: #DDF0E5;
	--wsfo-display: "Bricolage Grotesque", Montserrat, system-ui, sans-serif;
	--wsfo-body: Montserrat, -apple-system, "Segoe UI", system-ui, sans-serif;
	color: var(--wsfo-ink); font-family: var(--wsfo-body); font-size: 15px; line-height: 1.45;
	max-width: 1240px; margin: 0 auto; background: var(--wsfo-bg);
}
.wsfo *, .wsfo *::before, .wsfo *::after { box-sizing: border-box; }
.wsfo button { font: inherit; cursor: pointer; }
/* WoodMart capitalises buttons and adds letter-spacing; the mockup uses normal case. */
.wsfo button, .wsfo .wsfo-btn, .wsfo-sheet button, .wsfo-drawer button { text-transform: none !important; letter-spacing: normal !important; }
.wsfo .wsfo-tabs:not(:has(a)) { display: none; }
.wsfo-nomenu { margin: 24px 0; padding: 28px 22px; border: 1px dashed var(--wsfo-line); border-radius: 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.wsfo-nomenu b { font: 700 18px var(--wsfo-display); }
.wsfo-nomenu p { color: var(--wsfo-muted); }
.wsfo-nomenu .wsfo-nomenu-admin { margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--wsfo-accent-soft); color: var(--wsfo-ink); font-size: 14px; text-align: left; }
.wsfo-nomenu-admin a { color: var(--wsfo-accent); font-weight: 700; }
.wsfo [hidden] { display: none !important; }
.wsfo h1, .wsfo h2, .wsfo h3 { margin: 0; line-height: 1.15; font-family: var(--wsfo-display); color: inherit; letter-spacing: -.01em; text-wrap: balance; }
.wsfo p { margin: 0; }
html.wsfo-lock { overflow: hidden; }

/* ---------- app header (mobile) ---------- */
.wsfo-head { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 12px; }
.wsfo-logo, .wsfo-links, .wsfo-side-label, .wsfo-side-box { display: none; }
.wsfo-where { order: 1; position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 0; cursor: pointer; margin: 0; }
.wsfo-where-pin { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; background: var(--wsfo-accent-soft); color: var(--wsfo-accent); }
.wsfo-where-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wsfo-where-text b { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsfo-where-text small { color: var(--wsfo-muted); font-size: 12.5px; line-height: 1.35; }
.wsfo-where-chev { color: var(--wsfo-muted); font-size: 14px; }
.wsfo .wsfo-where { border: 0; background: none; font: inherit; color: inherit; text-align: left; width: auto; min-height: 0; text-transform: none; letter-spacing: 0; box-shadow: none; }
.wsfo .wsfo-where:hover, .wsfo .wsfo-where:focus { background: none; color: inherit; }
.wsfo-where:focus-visible .wsfo-where-pin { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wsfo-accent) 35%, transparent); }
.wsfo.is-pickup .wsfo-where { cursor: default; }
.wsfo.is-pickup .wsfo-where-chev { visibility: hidden; }

.wsfo-seg { order: 2; display: grid; grid-template-columns: 1fr 1fr; background: var(--wsfo-sunk); border-radius: 12px; padding: 4px; }
.wsfo .wsfo-seg button { border: 0; background: transparent; padding: 9px 12px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--wsfo-muted); min-height: 40px; }
.wsfo .wsfo-seg button.is-on { background: var(--wsfo-bg); color: var(--wsfo-ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

.wsfo-search-wrap { order: 3; position: relative; display: flex; align-items: center; width: 100%; min-width: 0; color: var(--wsfo-muted); }
.wsfo-search-wrap > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.wsfo .wsfo-search {
	width: 100% !important; min-width: 0; height: 46px !important; margin: 0 !important; border: 1.5px solid transparent !important; border-radius: 12px !important;
	padding: 0 40px 0 42px !important; background: var(--wsfo-sunk) !important; font: 500 16px/1 var(--wsfo-body) !important; color: var(--wsfo-ink) !important;
	box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
.wsfo .wsfo-search::placeholder { color: var(--wsfo-muted); opacity: 1; }
.wsfo .wsfo-search:focus { outline: none; border-color: var(--wsfo-accent) !important; background: #fff !important; }
.wsfo .wsfo-search-clear {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
	border: 0 !important; padding: 0 !important; background: var(--wsfo-line) !important; color: var(--wsfo-ink) !important; font-size: 18px; line-height: 1;
}

/* ---------- category tabs ---------- */
/* On phones the sidebar wrapper disappears so the tabs can stick to the top of the whole page. */
.wsfo-side { display: contents; }
.wsfo-tabs {
	position: sticky; top: 0; z-index: 30; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
	margin: 0 -4px; padding: 10px 4px; background: var(--wsfo-bg); border-bottom: 1px solid var(--wsfo-line);
}
.admin-bar .wsfo-tabs { top: 32px; }
@media (max-width: 782px) { .admin-bar .wsfo-tabs { top: 0; } }
.wsfo-tabs::-webkit-scrollbar { display: none; }
.wsfo-tabs a { flex: 0 0 auto; text-decoration: none !important; color: var(--wsfo-ink); background: var(--wsfo-sunk); padding: 8px 15px; border-radius: 99px; font-weight: 700; font-size: 14px; transition: background .15s, color .15s; }
.wsfo-tabs a.is-on { background: var(--wsfo-accent); color: #fff; }

/* ---------- dishes (mobile list) ---------- */
.wsfo .wsfo-special { display: none; }
.wsfo-cat { padding-top: 14px; scroll-margin-top: 70px; }
.wsfo-cat h2 { font-size: 21px; font-weight: 800; margin-bottom: 4px; }
.wsfo-items { display: flex; flex-direction: column; }
.wsfo-item { display: grid; grid-template-columns: minmax(0, 1fr) 92px; grid-template-areas: "text thumb"; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--wsfo-line); align-items: start; }
.wsfo-item[data-opts="1"] { cursor: pointer; }
.wsfo-item-text { grid-area: text; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wsfo-item h3 { font-size: 16px; font-weight: 700; font-family: var(--wsfo-body); letter-spacing: 0; }
.wsfo-item p { color: var(--wsfo-muted); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wsfo-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.wsfo-price { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.wsfo-item.is-out { opacity: .55; }
.wsfo-item.is-out .wsfo-price { color: var(--wsfo-muted); font-weight: 600; }
.wsfo-thumb { grid-area: thumb; position: relative; width: 92px; aspect-ratio: 1; border-radius: 14px; background: var(--wsfo-sunk); max-width: 100%; }
.wsfo-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.wsfo-ph { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; font: 800 34px var(--wsfo-display); color: rgba(255,255,255,.95); background: linear-gradient(135deg, var(--wsfo-palm), var(--wsfo-accent)); }
.wsfo .wsfo-add-round {
	position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
	background: var(--wsfo-bg); color: var(--wsfo-accent); font-size: 21px; font-weight: 800; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.wsfo .wsfo-pill { display: none; border: 0; border-radius: 99px; padding: 6px 16px; font-weight: 700; font-size: 13.5px; background: var(--wsfo-accent-soft); color: var(--wsfo-accent); min-height: 34px; }
.wsfo .wsfo-pill:hover { background: var(--wsfo-accent); color: #fff; }
.wsfo-empty { color: var(--wsfo-muted); padding: 24px 0; text-align: center; }

/* ---------- cart bar ---------- */
.wsfo-cartbar {
	position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 16px; padding: 15px 18px;
	background: var(--wsfo-accent); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45);
}
.wsfo-cartbar b { font-variant-numeric: tabular-nums; }
/* WoodMart's bottom toolbar sits at the very bottom on phones; keep the bar above it. */
@media (max-width: 1024px) { body:has(.wd-toolbar) .wsfo-cartbar { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- overlay, options sheet, drawer ---------- */
.wsfo-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(20,14,10,.45); opacity: 0; transition: opacity .2s; }
.wsfo-overlay.is-in { opacity: 1; }
.wsfo-sheet, .wsfo-drawer { position: fixed; z-index: 101; background: var(--wsfo-bg); transition: transform .25s ease, opacity .2s; font-family: var(--wsfo-body); color: var(--wsfo-ink); }
.wsfo-sheet {
	left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; border-radius: 22px 22px 0 0;
	padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%);
}
.wsfo-sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--wsfo-line); margin: 10px auto 12px; }
.wsfo-sheet.is-in { transform: none; }
.wsfo .wsfo-x {
	position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; z-index: 2;
	background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: 22px; line-height: 1; color: var(--wsfo-ink);
}
.wsfo-sheet-img { width: 100%; height: 170px; border-radius: 14px; overflow: hidden; margin-bottom: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--wsfo-palm), var(--wsfo-accent)); }
.wsfo-sheet-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wsfo-sheet-img span { font: 800 60px var(--wsfo-display); color: rgba(255,255,255,.9); }
.wsfo-sheet h2 { font-size: 22px; font-weight: 800; }
.wsfo-sheet-desc { color: var(--wsfo-muted); margin-top: 4px !important; }
.wsfo-loading { color: var(--wsfo-muted); padding: 40px 0; text-align: center; }
.wsfo-group { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.wsfo-group legend { width: 100%; padding: 0; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 15px; }
.wsfo-req { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wsfo-accent); background: var(--wsfo-accent-soft); padding: 3px 8px; border-radius: 5px; }
.wsfo-hint { font-size: 12.5px; font-weight: 600; color: var(--wsfo-muted); }
.wsfo-opt { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--wsfo-line); cursor: pointer; margin: 0; }
.wsfo-opt input { width: 20px; height: 20px; accent-color: var(--wsfo-accent); margin: 0; flex: 0 0 20px; }
.wsfo-opt span { flex: 1; font-weight: 500; }
.wsfo-opt em { font-style: normal; color: var(--wsfo-muted); font-variant-numeric: tabular-nums; }
.wsfo-opt:has(input:disabled) { opacity: .45; cursor: default; }
.wsfo-chips { display: flex; gap: 8px; margin-top: 6px; }
.wsfo-chip { flex: 1; position: relative; margin: 0; cursor: pointer; }
.wsfo-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wsfo-chip span { display: block; text-align: center; padding: 10px 6px; border: 1.5px solid var(--wsfo-line); border-radius: 10px; font-weight: 700; font-size: 14px; transition: all .15s; }
.wsfo-chip input:checked + span { border-color: var(--wsfo-accent); background: var(--wsfo-accent-soft); color: var(--wsfo-accent); }
.wsfo-chip input:focus-visible + span { outline: 2px solid var(--wsfo-accent); outline-offset: 2px; }
.wsfo-note { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; font-weight: 800; }
.wsfo .wsfo-note input { border: 1.5px solid var(--wsfo-line); border-radius: 12px; padding: 11px 14px; font: 500 16px var(--wsfo-body); min-height: 46px; width: 100%; }
.wsfo-sheet-foot { display: flex; gap: 10px; margin: 18px -16px 0; padding: 12px 16px 0; position: sticky; bottom: 0; background: var(--wsfo-bg); border-top: 1px solid var(--wsfo-line); }
.wsfo-qty { display: flex; align-items: center; gap: 4px; border: 1px solid var(--wsfo-line); border-radius: 12px; padding: 3px; }
.wsfo .wsfo-qty button { width: 38px; height: 38px; border: 0; padding: 0; background: transparent; font-size: 20px; font-weight: 700; color: var(--wsfo-ink); border-radius: 9px; }
.wsfo .wsfo-qty button:hover { background: var(--wsfo-sunk); }
.wsfo-qty span { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.wsfo-qty.sm { padding: 2px; border-radius: 10px; align-self: flex-start; margin-top: 6px; }
.wsfo .wsfo-qty.sm button { width: 28px; height: 28px; font-size: 16px; }
.wsfo .wsfo-btn {
	flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; border: 0; border-radius: 12px; padding: 14px 16px;
	text-decoration: none !important; background: var(--wsfo-accent); color: #fff !important; font-weight: 700; font-size: 15.5px; min-height: 50px;
}
.wsfo .wsfo-btn:disabled, .wsfo .wsfo-btn.is-off { background: var(--wsfo-line); color: var(--wsfo-muted) !important; cursor: not-allowed; }

.wsfo-drawer {
	top: 0; right: 0; bottom: 0; width: min(400px, 100%); display: flex; flex-direction: column; gap: 12px;
	padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(100%);
}
.wsfo-drawer.is-in { transform: none; }
.wsfo-drawer .wsfo-btn { flex: 0 0 auto; }
.wsfo-drawer-head { display: flex; justify-content: space-between; align-items: center; position: relative; min-height: 36px; }
.wsfo-drawer-head h2 { font-size: 20px; font-weight: 800; }
.wsfo .wsfo-drawer-head .wsfo-x { top: 0; right: 0; background: var(--wsfo-sunk); box-shadow: none; }
.wsfo-lines { flex: 1; overflow-y: auto; min-height: 50px; }
.wsfo-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wsfo-line); }
.wsfo-line-text { display: flex; flex-direction: column; min-width: 0; }
.wsfo-line small { color: var(--wsfo-muted); font-size: 12.5px; margin-top: 2px; }
.wsfo-line-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wsfo-sum { display: flex; flex-direction: column; gap: 10px; }
.wsfo-sum-box { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--wsfo-line); border-radius: 14px; padding: 14px; background: var(--wsfo-bg); }
.wsfo-row { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; font-size: 14px; }
.wsfo-row.tot { font-weight: 800; font-size: 17px; border-top: 1px dashed var(--wsfo-line); padding-top: 8px; margin-top: 2px; }
.wsfo-warn { color: var(--wsfo-accent); font-weight: 600; font-size: 14px; }
.wsfo-ok-pill { align-self: flex-start; font-size: 12.5px; font-weight: 700; background: var(--wsfo-leaf-soft); color: var(--wsfo-leaf); padding: 4px 10px; border-radius: 99px; }

/* Order panel shown on the page on phones and tablets (desktop docks it on the right, below). */
@media (max-width: 1023px) {
	.wsfo.is-inline-cart > .wsfo-drawer {
		position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; z-index: 1; width: auto; transform: none; opacity: 1; transition: none;
		margin: 24px 0 8px; padding: 18px; border-radius: 18px; background: var(--wsfo-sunk); border: 1px solid var(--wsfo-line);
	}
	.wsfo.is-inline-cart .wsfo-drawer .wsfo-x { display: none; }
	.wsfo.is-inline-cart .wsfo-lines { flex: 0 0 auto; overflow: visible; }
	.wsfo.is-inline-cart.is-panel-visible .wsfo-cartbar { display: none; }
}

/* toast */
.wsfo-toast {
	position: fixed; z-index: 200; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -20px);
	background: #1D1A17; color: #fff; padding: 11px 16px; border-radius: 12px; font: 600 14px Montserrat, system-ui, sans-serif;
	opacity: 0; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px);
}
.wsfo-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.wsfo-toast.is-bad { background: #B42318; }

/* ---------- tablet: cards and today's special ---------- */
@media (min-width: 720px) {
	.wsfo .wsfo-special.wsfo-item {
		display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; padding: 22px 26px; border-radius: 18px;
		background: var(--wsfo-accent); color: #fff; border: 0; cursor: pointer;
	}
	.wsfo-special > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
	.wsfo-special-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
	.wsfo-special h2 { font-size: 26px; font-weight: 800; color: #fff; }
	.wsfo .wsfo-special p { color: rgba(255,255,255,.9); font-size: 14px; }
	.wsfo .wsfo-special .wsfo-pill { display: inline-flex; margin-top: 6px; background: #fff; color: var(--wsfo-accent); }
	.wsfo-special-img { width: 108px; height: 108px; flex: 0 0 108px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.2); font: 800 44px var(--wsfo-display); }
	.wsfo-special-img img { width: 100%; height: 100%; object-fit: cover; }

	.wsfo-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
	.wsfo-item { grid-template-columns: 1fr; grid-template-areas: "thumb" "text"; gap: 8px; padding: 10px; border: 1px solid var(--wsfo-line); border-radius: 16px; }
	.wsfo-thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 11px; }
	.wsfo .wsfo-add-round { display: none; }
	.wsfo .wsfo-pill { display: inline-flex; align-items: center; }
	.wsfo-item-text { padding: 0 4px 2px; }
	.wsfo-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, calc(100% - 32px)); border-radius: 22px; transform: translate(-50%, -46%); opacity: 0; padding-top: 16px; }
	.wsfo-sheet::before { display: none; }
	.wsfo-sheet.is-in { transform: translate(-50%, -50%); opacity: 1; }
}

/* ---------- desktop: site header, category sidebar, menu, docked cart ---------- */
@media (min-width: 1024px) {
	.wsfo.is-docked {
		display: grid; grid-template-columns: 190px minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; align-items: start;
		border: 1px solid var(--wsfo-line); border-radius: 18px; overflow: visible;
	}
	.wsfo.is-docked > .wsfo-head {
		grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; padding: 14px 22px; border-bottom: 1px solid var(--wsfo-line);
	}
	.wsfo.is-docked .wsfo-logo { display: inline-flex; align-items: center; gap: 10px; font: 800 19px var(--wsfo-display); color: var(--wsfo-ink); text-decoration: none; white-space: nowrap; order: 0; }
	.wsfo-logo-mark { width: 32px; height: 32px; border-radius: 10px 10px 10px 3px; background: var(--wsfo-accent); color: #fff; display: grid; place-items: center; font-size: 17px; }
	.wsfo.is-docked .wsfo-seg { order: 1; width: 200px; flex: 0 0 200px; }
	.wsfo.is-docked .wsfo-where { order: 2; flex: 1 1 auto; min-width: 0; }
	.wsfo.is-docked .wsfo-where-pin { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
	.wsfo.is-docked .wsfo-where-text b { font-size: 14px; }
	.wsfo.is-docked .wsfo-search-wrap { order: 3; flex: 0 0 260px; width: 260px; }
	.wsfo.is-docked .wsfo-links { order: 4; display: flex; gap: 16px; white-space: nowrap; }
	.wsfo-links a { color: var(--wsfo-muted); font-weight: 600; font-size: 14px; text-decoration: none !important; }
	.wsfo-links a:hover { color: var(--wsfo-ink); }

	.wsfo.is-docked > .wsfo-side {
		grid-column: 1; grid-row: 2; position: sticky; top: 20px; align-self: start; display: flex; flex-direction: column; gap: 4px;
		padding: 18px 12px; min-height: 420px; border-right: 1px solid var(--wsfo-line);
	}
	.admin-bar .wsfo.is-docked > .wsfo-side { top: 52px; }
	.wsfo.is-docked .wsfo-side-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wsfo-muted); padding: 0 10px 6px; }
	.wsfo.is-docked .wsfo-tabs { position: static; flex-direction: column; gap: 2px; overflow: visible; margin: 0; padding: 0; border: 0; background: none; }
	.wsfo.is-docked .wsfo-tabs a { background: none; padding: 9px 10px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--wsfo-ink); }
	.wsfo.is-docked .wsfo-tabs a:hover { background: var(--wsfo-sunk); }
	.wsfo.is-docked .wsfo-tabs a.is-on { background: var(--wsfo-accent-soft); color: var(--wsfo-accent); }
	.wsfo.is-docked .wsfo-side-box { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding: 12px; border-radius: 12px; background: var(--wsfo-sunk); font-size: 12.5px; color: var(--wsfo-muted); }
	.wsfo.is-docked .wsfo-side-box b { color: var(--wsfo-accent); font: 800 15px var(--wsfo-display); }

	.wsfo.is-docked > .wsfo-sections { grid-column: 2; grid-row: 2; padding: 0 24px 28px; min-width: 0; }
	.wsfo.is-docked .wsfo-cat { scroll-margin-top: 24px; }
	.wsfo.is-docked .wsfo-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.wsfo.is-docked > .wsfo-drawer {
		grid-column: 3; grid-row: 2; position: sticky; top: 20px; transform: none; width: auto; opacity: 1; z-index: 5;
		/* Undo the phone slide-in's offsets: as a sticky element, bottom:0 dragged it up over the header and right:0 past the edge. */
		right: auto; bottom: auto; left: auto; align-self: start;
		max-height: calc(100vh - 40px); overflow-y: auto; background: var(--wsfo-sunk); border-left: 1px solid var(--wsfo-line); border-radius: 0 0 18px 0;
	}
	.admin-bar .wsfo.is-docked > .wsfo-drawer { top: 52px; }
	.wsfo.is-docked .wsfo-drawer .wsfo-x { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wsfo-sheet, .wsfo-drawer, .wsfo-overlay, .wsfo-toast { transition: none; }
}

/* Adding feedback (the server can be slow) */
.wsfo .wsfo-add.is-adding { pointer-events: none; color: transparent !important; position: relative; }
.wsfo .wsfo-add.is-adding::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
	border: 2px solid var(--wsfo-accent); border-right-color: transparent; animation: wsfo-spin .7s linear infinite;
}
.wsfo-cartbar.is-busy { opacity: .92; }
.wsfo-cartbar.is-busy #wsfo-cartbar-count::before {
	content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px; border-radius: 50%;
	border: 2px solid #fff; border-right-color: transparent; animation: wsfo-spin .7s linear infinite;
}
@keyframes wsfo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wsfo .wsfo-add.is-adding::after, .wsfo-cartbar.is-busy #wsfo-cartbar-count::before { animation-duration: 2s; } }

/* Logo in the desktop header */
.wsfo-logo-img { width: 40px; height: 40px; object-fit: contain; display: block; }

/* ---------- category pages (2.8) ---------- */
.wsfo-category-page { padding-top: 24px; padding-bottom: 40px; }
.wsfo.is-category .wsfo-cat > h2 { display: none; }
.wsfo.is-category .wsfo-cat { padding-top: 6px; }
.wsfo-cathead {
	display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 14px 0 6px; padding: 22px 24px; border-radius: 18px;
	background: var(--wsfo-accent); color: #fff; overflow: hidden;
}
.wsfo-cathead > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wsfo-cathead .wsfo-cathead-title { margin: 0; font: 800 clamp(26px, 4vw, 34px)/1.1 var(--wsfo-display); color: #fff; letter-spacing: -.02em; }
.wsfo-cathead p { color: rgba(255,255,255,.88); font-size: 14.5px; max-width: 56ch; }
.wsfo-cathead-back { color: rgba(255,255,255,.85) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; }
.wsfo-cathead-back:hover { color: #fff !important; }
.wsfo-cathead-count { align-self: flex-start; margin-top: 4px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--wsfo-gold, #F8B30F); color: #2A0F0B; }
.wsfo-cathead img { width: 120px; height: 120px; flex: 0 0 120px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.25); }
@media (max-width: 600px) { .wsfo-cathead img { width: 80px; height: 80px; flex-basis: 80px; } .wsfo-cathead { padding: 18px; } }

/* ---------- 2.9.1: simpler category pages (the theme's title bar carries the name) ---------- */
.wsfo.is-category { border: 0 !important; }
/* No second app header: area, mode and search live on Order Online and in the bag panel. */
.wsfo.is-category > .wsfo-head { display: none !important; }
.wsfo.is-category .wsfo-side-label, .wsfo.is-category .wsfo-side-box { display: none !important; }
.wsfo-catintro { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; }
.wsfo-catintro img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.wsfo-catintro p { margin: 0; color: var(--wsfo-muted); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wsfo-catintro-count { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--wsfo-gold, #F8B30F); color: #2A0F0B; }
.wsfo-cathead { display: none !important; }
/* The chips sit on one row above the dishes, on every screen size. */
.wsfo.is-category .wsfo-tabs { margin-bottom: 4px; }
@media (min-width: 1024px) {
	.wsfo.is-category.is-docked { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; column-gap: 28px; border-radius: 0; }
	.wsfo.is-category.is-docked > .wsfo-side { grid-column: 1; grid-row: 1; position: static; min-height: 0; padding: 0; border: 0; display: block; }
	.wsfo.is-category.is-docked .wsfo-tabs { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 0 0 14px; border-bottom: 1px solid var(--wsfo-line); }
	.wsfo.is-category.is-docked .wsfo-tabs a { background: var(--wsfo-sunk); padding: 8px 16px; border-radius: 99px; font-weight: 700; font-size: 14px; }
	.wsfo.is-category.is-docked .wsfo-tabs a:hover { background: var(--wsfo-line); }
	.wsfo.is-category.is-docked .wsfo-tabs a.is-on { background: var(--wsfo-accent); color: #fff; }
	.wsfo.is-category.is-docked > .wsfo-sections { grid-column: 1; grid-row: 2; padding: 0; }
	.wsfo.is-category.is-docked > .wsfo-drawer { grid-column: 2; grid-row: 1 / span 2; border: 1px solid var(--wsfo-line); border-radius: 18px; }
}

/* ---------- "Use my location" ---------- */
.wsfo .wsfo-locate {
	order: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 14px !important; min-height: 0 !important;
	border: 1.5px dashed var(--wsfo-accent) !important; border-radius: 99px !important; background: var(--wsfo-accent-soft) !important; color: var(--wsfo-accent) !important;
	font: 700 13.5px var(--wsfo-body) !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; cursor: pointer; box-shadow: none !important; white-space: nowrap;
}
.wsfo .wsfo-locate svg { width: 16px; height: 16px; flex: 0 0 16px; }
.wsfo .wsfo-locate:hover { filter: brightness(.97); }
.wsfo .wsfo-locate.is-busy { opacity: .7; cursor: progress; }
.wsfo .wsfo-locate.is-busy svg { animation: wsfo-locate-pulse 1s ease-in-out infinite; }
.wsfo .wsfo-locate.is-done { border-style: solid !important; border-color: var(--wsfo-leaf) !important; background: var(--wsfo-leaf-soft) !important; color: var(--wsfo-leaf) !important; }
.wsfo.is-pickup .wsfo-locate { display: none !important; }
.wsfo-locate-msg { order: 1; font-size: 13px; font-weight: 600; color: var(--wsfo-leaf); }
.wsfo-locate-msg.is-bad { color: var(--wsfo-accent); }
@keyframes wsfo-locate-pulse { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .wsfo .wsfo-locate.is-busy svg { animation: none; } }
@media (min-width: 1024px) {
	.wsfo.is-docked > .wsfo-head { flex-wrap: wrap; }
	.wsfo.is-docked .wsfo-locate { order: 2; align-self: center; flex: 0 0 auto; }
	.wsfo.is-docked .wsfo-locate-msg { order: 9; flex: 0 0 100%; margin-top: -6px; }
}

/* ---------- bag: no delivery area yet ---------- */
.wsfo-areafix { background: #fff; border: 1.5px dashed var(--wsfo-accent); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.wsfo-areafix-t { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.wsfo-areafix-t b { font-size: 15px; }
.wsfo-areafix-t span { color: var(--wsfo-muted); font-size: 13.5px; }
.wsfo-areafix-t span.is-bad { color: var(--wsfo-accent); font-weight: 600; }
.wsfo-areafix-links { display: flex; flex-wrap: wrap; gap: 6px; }
.wsfo .wsfo-areafix-links button { border: 1px solid var(--wsfo-line) !important; background: var(--wsfo-bg) !important; color: var(--wsfo-ink) !important; border-radius: 99px !important; padding: 7px 14px !important; min-height: 0 !important; font: 600 13.5px var(--wsfo-body) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer; }
.wsfo .wsfo-areafix-links button:hover { border-color: var(--wsfo-ink) !important; }
.wsfo .wsfo-btn.is-find { background: var(--wsfo-accent) !important; color: #fff !important; cursor: pointer; }
.wsfo .wsfo-btn.is-find.is-busy { opacity: .75; cursor: progress; }

/* area list inside the bag */
.wsfo-alist { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.wsfo .wsfo-alist-q { box-sizing: border-box; max-width: 100%; width: 100%; height: 42px !important; border: 1px solid var(--wsfo-line) !important; border-radius: 99px !important; background: var(--wsfo-bg) !important; padding: 0 14px !important; font: 500 14.5px var(--wsfo-body) !important; color: var(--wsfo-ink) !important; box-shadow: none !important; }
.wsfo .wsfo-alist-q:focus { border-color: var(--wsfo-accent) !important; outline: 0; }
.wsfo-alist-groups { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; padding-right: 2px; overscroll-behavior: contain; }
.wsfo-alist-h { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--wsfo-muted); margin-bottom: 6px; }
.wsfo-alist-a { display: flex; flex-wrap: wrap; gap: 6px; }
.wsfo .wsfo-alist-a button { border: 1px solid var(--wsfo-line) !important; background: #fff !important; color: var(--wsfo-ink) !important; border-radius: 99px !important; padding: 7px 12px !important; min-height: 0 !important; font: 600 13.5px var(--wsfo-body) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer; line-height: 1.2 !important; }
.wsfo .wsfo-alist-a button:hover, .wsfo .wsfo-alist-a button:focus-visible { background: var(--wsfo-accent) !important; border-color: var(--wsfo-accent) !important; color: #fff !important; }
.wsfo-alist-none { margin: 0; color: var(--wsfo-muted); font-size: 13.5px; }

/* the theme's Bag icon on this page: the order panel answers with a pulse */
.wsfo-drawer.is-flash { animation: wsfo-flash .9s ease-out; }
@keyframes wsfo-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wsfo-accent) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .wsfo-drawer.is-flash { animation: none; outline: 2px solid var(--wsfo-accent); } }

/* ---------- Menu QR card (desktop sidebar, under the categories) ---------- */
.wsfo-side-qr { display: none; }
.wsfo.is-docked:not(.is-category) .wsfo-side-qr {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: 14px; padding: 14px 12px 12px;
	border-radius: 16px; background: linear-gradient(160deg, #FFF8EE 0%, #FDEBD8 100%); border: 1px solid rgba(155, 17, 17, .12);
}
.wsfo-side-qr img { width: 100%; max-width: 168px; height: auto; aspect-ratio: 1; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(122, 0, 0, .14); margin-bottom: 8px; }
.wsfo-side-qr b { font: 800 16px/1.2 var(--wsfo-display, "Bricolage Grotesque", sans-serif); color: var(--wsfo-accent, #9B1111); letter-spacing: -.01em; }
.wsfo-side-qr > span { font-size: 12.5px; line-height: 1.4; color: var(--wsfo-muted); }
.wsfo-side-qr-row { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 10px; }
.wsfo-side-qr-row a, .wsfo-side-qr-row button {
	width: 100%; min-width: 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px !important; margin: 0 !important; border-radius: 12px; transition: transform .15s, box-shadow .15s;
	font: 700 12.5px var(--wsfo-body, Montserrat, sans-serif); text-decoration: none !important; cursor: pointer; border: 0; line-height: 1;
}
.wsfo-side-qr-row a { background: var(--wsfo-accent, #9B1111); color: #fff !important; box-shadow: 0 6px 14px color-mix(in srgb, var(--wsfo-accent, #9B1111) 25%, transparent); }
.wsfo-side-qr-row span { white-space: nowrap; line-height: 1.1; }
.wsfo-side-qr-row svg { width: 16px; height: 16px; flex: 0 0 16px; }
.wsfo-side-qr-row button { background: #fff; color: var(--wsfo-accent, #9B1111); box-shadow: inset 0 0 0 1px rgba(155, 17, 17, .25); }
.wsfo-side-qr-row a:hover, .wsfo-side-qr-row button:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* A dish just added, until the server confirms it. */
.wsfo-line.is-tmp { opacity: .7; }

/* While the options sheet or the bag is open (html.wsfo-lock): the theme's bottom toolbar, the
   scroll-to-top button and the chat bubble step aside, and the sheet sits above every theme layer,
   so the Add button is never hidden behind the Menu / Bag / My account bar on phones. */
html.wsfo-lock .wd-toolbar, html.wsfo-lock .scrollToTop, html.wsfo-lock #wa-live-chat { display: none !important; }
.wsfo-overlay { z-index: 600; }
.wsfo-sheet { z-index: 601; }

/* ---------- 2.39: store page (cover, stats, dish rows with steppers, two-column dish popup) ---------- */
.wsfo-store { margin: 4px 0 6px; }
.wsfo-store-cover { height: 132px; border-radius: 18px; background: linear-gradient(120deg, var(--wsfo-accent), var(--wsfo-palm)) center / cover no-repeat; }
.wsfo-store-info { display: flex; align-items: flex-start; gap: 12px; margin: -34px 14px 0; position: relative; }
.wsfo-store-logo { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 18px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.14); display: grid; place-items: center; overflow: hidden; font: 800 30px var(--wsfo-display); color: var(--wsfo-accent); }
.wsfo-store-logo img { width: 84%; height: 84%; object-fit: contain; }
.wsfo-store-text { min-width: 0; padding-top: 40px; }
.wsfo .wsfo-store-text h1 { font-size: 24px; font-weight: 800; }
.wsfo-store-text p { color: var(--wsfo-muted); font-size: 13.5px; }
.wsfo-store-stats { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.wsfo-store-stats::-webkit-scrollbar { display: none; }
.wsfo-store-stats li { flex: 0 0 auto; display: flex; flex-direction: column; padding: 8px 14px; border: 1px solid var(--wsfo-line); border-radius: 12px; margin: 0; }
.wsfo-store-stats b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wsfo-store-stats span { font-size: 11.5px; color: var(--wsfo-muted); white-space: nowrap; }
.wsfo-store-stats li.is-open b { color: var(--wsfo-leaf); }
.wsfo-store-stats li.is-closed b { color: var(--wsfo-accent); }
/* The cover carries the name and opening status, so the special card follows it with a gap. */
.wsfo .wsfo-store + .wsfo-special { margin-top: 14px; }

/* Dish stepper: replaces Add once the dish is in the bag. */
.wsfo-step { display: inline-flex; align-items: center; gap: 2px; border-radius: 99px; background: var(--wsfo-accent); color: #fff; padding: 2px; }
.wsfo .wsfo-step button { width: 30px; height: 30px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 18px; font-weight: 800; line-height: 1; display: grid; place-items: center; min-height: 0; }
.wsfo .wsfo-step button:hover { background: rgba(255,255,255,.18); }
.wsfo-step span { min-width: 20px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.wsfo .wsfo-item.is-stepping .wsfo-pill, .wsfo .wsfo-item.is-stepping .wsfo-add-round { display: none !important; }
.wsfo .wsfo-add-round[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wsfo-accent); color: #fff; font-size: 11px; line-height: 18px; }
.wsfo .wsfo-item.is-in-bag { box-shadow: inset 3px 0 0 var(--wsfo-accent); }
@media (max-width: 719px) {
	/* Phones: rows have no border, so mark the dish with its stepper only. */
	.wsfo .wsfo-item.is-in-bag { box-shadow: none; }
}

/* Bag: bin icon, empty state */
.wsfo .wsfo-qty.sm button svg { display: block; margin: auto; }
.wsfo-bag-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 8px; color: var(--wsfo-muted); font-size: 13.5px; }
.wsfo-bag-empty b { color: var(--wsfo-ink); font-size: 15px; margin-top: 6px; }

/* Popup groups: "Choose 1 item" under the name, Required turns green with a tick once chosen. */
.wsfo-gname { display: flex; flex-direction: column; }
.wsfo-gname small { font-size: 12px; font-weight: 600; color: var(--wsfo-muted); }
.wsfo-group.is-met .wsfo-req { background: var(--wsfo-leaf-soft); color: var(--wsfo-leaf); }
.wsfo-group.is-met .wsfo-req::before { content: "✓ "; }
.wsfo-group legend { padding: 10px 12px !important; margin: 0 0 4px; background: var(--wsfo-sunk); border-radius: 10px; }
.wsfo-pop-price { display: block; font-size: 17px; margin-top: 4px; font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
	.wsfo.is-docked .wsfo-store { margin: 18px 0 8px; }
	.wsfo-store-cover { height: 180px; }
	.wsfo-store-info { margin: -40px 22px 0; }
	.wsfo-store-text { padding-top: 46px; }
	.wsfo-store-logo { width: 88px; height: 88px; flex-basis: 88px; }
	.wsfo .wsfo-store-text h1 { font-size: 30px; }
	/* Dish rows like a store page: text left, photo right, two per row. */
	.wsfo.is-docked .wsfo-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wsfo.is-docked .wsfo-item { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "text thumb"; padding: 12px; align-items: stretch; }
	.wsfo.is-docked .wsfo-item .wsfo-thumb { width: 112px; aspect-ratio: 1; }
	.wsfo.is-docked .wsfo-item-text { padding: 2px 0; }
	.wsfo.is-docked .wsfo-item-foot { margin-top: auto; }
	.wsfo.is-docked .wsfo-item:hover { border-color: var(--wsfo-accent); }

	/* Two-column popup: choices on the left, picture, price and Add on the right. */
	.wsfo-sheet:has(.wsfo-pop) { width: min(880px, calc(100% - 48px)); padding: 0; overflow: hidden; display: flex; max-height: 88vh; }
	.wsfo-sheet:has(.wsfo-pop) #wsfo-sheet-body { flex: 1; min-height: 0; display: flex; }
	.wsfo-pop { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: 1fr auto; min-height: 0; }
	.wsfo-pop-opts { grid-column: 1; grid-row: 1 / span 2; overflow-y: auto; padding: 10px 22px 22px; border-right: 1px solid var(--wsfo-line); }
	.wsfo-pop-head { grid-column: 2; grid-row: 1; overflow-y: auto; padding: 18px 18px 0; }
	.wsfo-pop .wsfo-sheet-img { height: 220px; }
	.wsfo-pop .wsfo-sheet-foot { grid-column: 2; grid-row: 2; margin: 0; padding: 14px 18px 18px; flex-direction: column; border-top: 0; }
	.wsfo-pop .wsfo-sheet-foot .wsfo-qty { align-self: center; }
	.wsfo-pop .wsfo-sheet-foot .wsfo-btn { flex: 0 0 auto; }
	.wsfo-sheet:has(.wsfo-pop) .wsfo-x { top: 12px; right: 12px; }
}

/* ---------- 2.40: store-style header (Deliver to ▾, compact Delivery/Pickup, pill search) ---------- */
.wsfo:not(.is-category) > .wsfo-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 8px; padding: 8px 0 12px; }
.wsfo > .wsfo-head > .wsfo-where { grid-column: 1 / -1; }
.wsfo > .wsfo-head > .wsfo-seg { grid-column: 2; grid-row: 2; }
.wsfo:has(.wsfo-seg) > .wsfo-head > .wsfo-search-wrap { grid-column: 1; grid-row: 2; }
.wsfo > .wsfo-head > .wsfo-search-wrap, .wsfo > .wsfo-head > .wsfo-locate-msg { grid-column: 1 / -1; }
.wsfo .wsfo-head .wsfo-where { display: flex !important; justify-content: flex-start !important; text-align: left !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 !important; margin: 0 !important; color: var(--wsfo-ink) !important; min-height: 0 !important; width: auto !important; }
.wsfo .wsfo-where-text { align-items: flex-start; }
.wsfo .wsfo-where-label { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wsfo-accent); line-height: 1.2; }
.wsfo .wsfo-where-text b { font-size: 16px; max-width: 100%; }
.wsfo .wsfo-where-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wsfo .wsfo-where-pin { border-radius: 50%; }
.wsfo .wsfo-where-chev { color: var(--wsfo-accent); }
.wsfo .wsfo-head .wsfo-seg { border-radius: 99px; padding: 3px; gap: 2px; }
.wsfo .wsfo-head .wsfo-seg button { border-radius: 99px !important; padding: 6px 10px !important; min-height: 32px !important; font-size: 12.5px !important; }
.wsfo .wsfo-head .wsfo-seg button.is-on { background: var(--wsfo-accent) !important; color: #fff !important; box-shadow: none !important; }
.wsfo .wsfo-head .wsfo-search { border-radius: 99px !important; height: 44px !important; padding-left: 38px !important; font-size: 15px !important; text-overflow: ellipsis; }
@media (min-width: 1024px) {
	.wsfo.is-docked:not(.is-category) > .wsfo-head { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 12px 22px; }
	.wsfo.is-docked > .wsfo-head > .wsfo-where { order: 1; flex: 0 1 340px; padding: 6px 14px 6px 6px !important; border: 1px solid var(--wsfo-line) !important; border-radius: 99px !important; }
	.wsfo.is-docked > .wsfo-head > .wsfo-where:hover { border-color: var(--wsfo-accent) !important; }
	.wsfo.is-docked .wsfo-where-text b { font-size: 14.5px; }
	.wsfo.is-docked > .wsfo-head > .wsfo-seg { order: 2; width: auto; flex: 0 0 auto; }
	.wsfo.is-docked > .wsfo-head > .wsfo-search-wrap { order: 3; flex: 1 1 auto; width: auto; }
	.wsfo.is-docked > .wsfo-head > .wsfo-links { order: 4; }
}

/* The menu QR card is for desktop only: phones already have the menu open. */
@media (max-width: 1023px) { .wsfo .wsfo-side-qr, .wsfo.is-docked .wsfo-side-qr { display: none !important; } }

/* ---------- 2.48: Delivery / Pickup inside the Your order card, sized to the screen ---------- */
.wsfo .wsfo-drawer .wsfo-seg {
	order: 0; width: 100% !important; flex: none !important; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	padding: clamp(3px, .8vw, 5px); border-radius: 999px; background: var(--wsfo-bg); border: 1px solid var(--wsfo-line);
}
.wsfo .wsfo-drawer .wsfo-seg button {
	min-height: clamp(36px, 9vw, 46px) !important; padding: 0 clamp(8px, 3vw, 18px) !important; border-radius: 999px !important;
	font-size: clamp(13px, 3.6vw, 15.5px) !important; font-weight: 700; color: var(--wsfo-muted); background: transparent; box-shadow: none !important;
}
.wsfo .wsfo-drawer .wsfo-seg button.is-on { background: var(--wsfo-accent) !important; color: #fff !important; }
.wsfo .wsfo-drawer .wsfo-seg button:not(.is-on):hover { background: var(--wsfo-sunk) !important; color: var(--wsfo-ink); }

/* ---------- 2.50: round buttons (the theme forces 42px-tall buttons), × always reachable ---------- */
.wsfo .wsfo-add-round { width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; min-width: 34px !important; padding: 0 !important; display: grid !important; place-items: center; }
.wsfo .wsfo-x, .wsfo-sheet .wsfo-x { width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; min-width: 36px !important; padding: 0 !important; display: grid !important; place-items: center; }
@media (max-width: 1023px) {
	/* Phones: the × sticks to the top of the sheet while the options scroll. */
	.wsfo-sheet > .wsfo-x { position: sticky !important; top: 10px; float: right; margin: 10px 0 -46px auto; z-index: 5; }
}
html.wsfo-lock .wsfo-app { display: none !important; }

/* ---------- 2.52: the category list never leaves the screen while dishes show ---------- */
/* Desktop: the side column runs the full height of the menu and only the category list sticks in it;
   the open-now box and QR card below it scroll away normally. (The whole column used to stick, but it
   was nearly as tall as the dishes, so it scrolled off with them.) */
@media (min-width: 1024px) {
	.wsfo.is-docked:not(.is-category) > .wsfo-side { position: static !important; align-self: stretch !important; }
	.wsfo.is-docked:not(.is-category) .wsfo-tabs {
		position: sticky !important; top: 20px; z-index: 3; background: var(--wsfo-bg) !important;
		padding: 6px 0 !important; margin: 0 -2px !important; max-height: calc(100vh - 40px); overflow-y: auto !important;
	}
	.admin-bar .wsfo.is-docked:not(.is-category) .wsfo-tabs { top: 52px; }
	body.wsfo-has-sh:has(.wsfo-sh-menu) .wsfo.is-docked:not(.is-category) .wsfo-tabs { top: 72px; max-height: calc(100vh - 92px); }
}

/* ---------- 2.53: clear category sections ---------- */
/* Each category starts with a heading band: accent bar, name, dish count and a rule to the edge,
   with clear space between sections so one category never runs into the next. */
.wsfo .wsfo-cat { padding-top: 0; margin-top: 32px; }
.wsfo .wsfo-cat:first-of-type { margin-top: 12px; }
.wsfo .wsfo-cat-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0 0 0 12px; position: relative; }
.wsfo .wsfo-cat-head::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 4px; background: var(--wsfo-accent); }
.wsfo .wsfo-cat-head::after { content: ""; flex: 1; height: 1px; background: var(--wsfo-line); min-width: 16px; }
.wsfo .wsfo-cat-head h2 { margin: 0 !important; font: 800 clamp(20px, 5.4vw, 24px)/1.15 var(--wsfo-display) !important; letter-spacing: -.01em; color: var(--wsfo-ink); }
.wsfo .wsfo-cat-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--wsfo-accent); background: var(--wsfo-accent-soft); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
/* Phones: rows had no top line, so the first dish under a heading gets one. */
@media (max-width: 719px) { .wsfo .wsfo-cat-head + .wsfo-items { border-top: 1px solid var(--wsfo-line); } }
/* Category pages already name the category in the title bar. */
.wsfo.is-category .wsfo-cat-head { display: none; }