/* WS Food Ordering: Elementor homepage widgets, in the Snappy Bite blueprint's design language.
   Colours come from per-widget controls via CSS variables. */
.wsfo-h {
	--h-bg: #FFFFFF; --h-fg: #1D1A17; --h-accent: #9B1111;
	--h-soft: color-mix(in srgb, var(--h-accent) 13%, #fff);
	--h-card: #FFFFFF; --h-sunk: #F7EDDF; --h-line: #ECDCC6; --h-palm: #F8B30F; --h-leaf: #1E7A4C; --h-leaf-soft: #DDF0E5;
	--h-muted: color-mix(in srgb, var(--h-fg) 64%, var(--h-bg));
	--h-display: "Bricolage Grotesque", Montserrat, system-ui, sans-serif;
	--h-body: Montserrat, -apple-system, "Segoe UI", system-ui, sans-serif;
	background: var(--h-bg); color: var(--h-fg); font-family: var(--h-body); font-size: 16px; line-height: 1.6;
	padding: clamp(48px, 7vw, 88px) max(16px, env(safe-area-inset-right, 0px)) clamp(48px, 7vw, 88px) max(16px, env(safe-area-inset-left, 0px));
	position: relative; overflow: hidden;
}
.wsfo-h *, .wsfo-h *::before, .wsfo-h *::after { box-sizing: border-box; }
.wsfo-h-in { max-width: 1080px; margin: 0 auto; }
.wsfo-h h1, .wsfo-h h2, .wsfo-h h3 { font-family: var(--h-display); color: inherit; margin: 0; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.wsfo-h p { margin: 0; }
.wsfo-h a { text-decoration: none; }
.wsfo-h-head { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-bottom: clamp(24px, 3.5vw, 36px); }
.wsfo-h-head.is-center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.wsfo-h-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--h-accent); }
.wsfo-h-title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
.wsfo-h-sub { color: var(--h-muted); font-size: clamp(15.5px, 1.5vw, 17.5px); max-width: 62ch; }

/* buttons */
.wsfo-h-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wsfo-h-btns.is-center { justify-content: center; margin-top: clamp(24px, 3.5vw, 36px); }
.wsfo-h-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 12px; font-weight: 700; font-size: 16px; white-space: nowrap; transition: filter .15s, background .15s; }
.wsfo-h-btn span { transition: transform .15s; }
.wsfo-h-btn:hover span { transform: translateX(3px); }
.wsfo-h-btn.is-main { background: var(--h-accent); color: #fff; }
.wsfo-h-btn.is-main:hover { filter: brightness(1.06); color: #fff; }
.wsfo-h-btn.is-ghost { color: var(--h-fg); background: var(--h-card); border: 1px solid var(--h-line); }
.wsfo-h-btn.is-ghost:hover { border-color: var(--h-fg); color: var(--h-fg); }
.wsfo-h-btn.is-dark { background: var(--h-fg); color: var(--h-bg); }
.wsfo-h-btn.is-dark:hover { color: var(--h-bg); filter: brightness(1.15); }
.wsfo-h-btn.is-light { background: #fff; color: var(--h-accent); }
.wsfo-h-btn.is-light:hover { color: var(--h-accent); }
.wsfo-h-btn:focus-visible { outline: 3px solid var(--h-palm); outline-offset: 3px; }

/* ---------- hero ---------- */
.wsfo-hh .wsfo-h-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.wsfo-hh-text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wsfo-hh-title { font-size: clamp(40px, 6.4vw, 68px); font-weight: 800; letter-spacing: -.025em; line-height: 1.02; }
.wsfo-hh-title em { font-style: normal; color: var(--h-accent); }
.wsfo-live-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--h-sunk); }
.wsfo-live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--h-accent); }
.wsfo-live-pill.is-open { background: var(--h-leaf-soft); color: var(--h-leaf); }
.wsfo-live-pill.is-open i { background: var(--h-leaf); }
.wsfo-hh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 6px 0 0; background: var(--h-line); border: 1px solid var(--h-line); border-radius: 14px; overflow: hidden; }
.wsfo-hh-stats div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 14px 16px; background: var(--h-card); min-width: 0; }
.wsfo-hh-stats dd { margin: 0; font: 700 clamp(18px, 2vw, 22px) var(--h-display); }
.wsfo-hh-stats dt { color: var(--h-muted); font-size: 13px; line-height: 1.35; }

.wsfo-hh-art { position: relative; justify-self: center; width: 100%; max-width: 330px; }
.wsfo-hh-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; display: block; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.wsfo-hh-chip { position: absolute; z-index: 2; padding: 10px 14px; border-radius: 14px; font-weight: 700; font-size: 13.5px; color: #1D1A17; background: #fff; box-shadow: 0 14px 30px -14px rgba(0,0,0,.4); white-space: nowrap; }
.wsfo-hh-chip.c1 { left: -34px; top: 38%; }
.wsfo-hh-chip.c2 { right: -30px; bottom: 18%; background: var(--h-palm); }

/* phone (blueprint style) */
.wsfo-phone { background: #1D1A17; border-radius: 40px; padding: 11px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.5); }
.wsfo-phone-scr { background: #fff; color: #1D1A17; border-radius: 30px; height: 600px; max-height: 70vh; min-height: 520px; overflow: hidden; position: relative; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.4; }
.wsfo-phone-sb { display: flex; justify-content: space-between; padding: 10px 22px 4px; font-weight: 600; font-size: 11.5px; }
.wsfo-phone-head { padding: 6px 16px 12px; display: flex; flex-direction: column; gap: 9px; }
.wsfo-phone-addr { display: flex; align-items: center; gap: 8px; }
.wsfo-phone-addr i { width: 28px; height: 28px; border-radius: 9px; flex: 0 0 28px; background: var(--h-soft); position: relative; }
.wsfo-phone-addr i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -6px 0 0 -4.5px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--h-accent); }
.wsfo-phone-addr b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.wsfo-phone-addr small { color: #6B635A; font-size: 11px; }
.wsfo-phone-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--h-sunk); border-radius: 10px; padding: 3px; font-weight: 700; font-size: 12px; text-align: center; color: #6B635A; }
.wsfo-phone-seg span { padding: 6px; border-radius: 8px; }
.wsfo-phone-seg .on { background: #fff; color: #1D1A17; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wsfo-phone-search { background: var(--h-sunk); border-radius: 10px; padding: 9px 12px; color: #6B635A; font-size: 12px; }
.wsfo-phone-tabs { display: flex; gap: 6px; padding: 0 16px 10px; overflow: hidden; font-weight: 700; font-size: 12px; white-space: nowrap; border-bottom: 1px solid var(--h-line); }
.wsfo-phone-tabs span { padding: 6px 12px; border-radius: 99px; background: var(--h-sunk); }
.wsfo-phone-tabs .on { background: var(--h-accent); color: #fff; }
.wsfo-phone-items { padding: 4px 16px; flex: 1; overflow: hidden; }
.wsfo-phone-item { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--h-line); }
.wsfo-phone-item b { display: block; font-size: 13.5px; }
.wsfo-phone-item small { display: block; color: #6B635A; font-size: 11.5px; }
.wsfo-phone-item em { display: block; font-style: normal; font-weight: 700; font-size: 13px; margin-top: 3px; }
.wsfo-phone-thumb { position: relative; width: 64px; height: 64px; border-radius: 13px; display: grid; place-items: center; font: 800 24px var(--h-display); color: #fff; background: linear-gradient(135deg, var(--h-palm), var(--h-accent)); }
.wsfo-phone-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.wsfo-phone-thumb i { position: absolute; right: -5px; bottom: -5px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--h-accent); display: grid; place-items: center; font: 800 16px var(--h-body); font-style: normal; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.wsfo-phone-empty { color: #6B635A; padding: 24px 0; text-align: center; }
.wsfo-phone-bar { margin: 8px 12px 14px; background: var(--h-accent); color: #fff; border-radius: 14px; padding: 13px 16px; display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; }

/* ---------- categories ---------- */
.wsfo-hc { padding-top: 0; }
.wsfo-hc-ticker { margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) clamp(36px, 5vw, 56px); background: var(--h-accent); color: #fff; overflow: hidden; padding: 14px 0; }
.wsfo-hc-track { display: flex; gap: 26px; width: max-content; animation: wsfo-h-marquee 40s linear infinite; font: 700 clamp(17px, 2vw, 22px) var(--h-display); white-space: nowrap; }
.wsfo-hc-track i { font-style: normal; color: var(--h-palm); }
@keyframes wsfo-h-marquee { to { transform: translateX(-50%); } }
.wsfo-hc-title { font-size: clamp(24px, 3vw, 32px); margin-bottom: 18px; }
.wsfo-hc-pills { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; }
.wsfo-hc-pills::-webkit-scrollbar { display: none; }
.wsfo-hc-pills a { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 16px; background: var(--h-card); border: 1px solid var(--h-line); color: var(--h-fg); transition: border-color .15s, background .15s; }
.wsfo-hc-pills a:hover { border-color: var(--h-accent); background: var(--h-soft); color: var(--h-fg); }
.wsfo-hc-pills img, .wsfo-hc-pills b { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: 0 0 48px; }
.wsfo-hc-pills b { display: grid; place-items: center; font: 800 20px var(--h-display); color: #fff; background: linear-gradient(135deg, var(--h-palm), var(--h-accent)); }
.wsfo-hc-pills span { display: flex; flex-direction: column; font-weight: 700; line-height: 1.25; }
.wsfo-hc-pills small { color: var(--h-muted); font-weight: 500; font-size: 12.5px; }

/* ---------- dishes (same cards as the desktop menu) ---------- */
.wsfo-hd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wsfo-hd-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--h-card); border: 1px solid var(--h-line); color: var(--h-fg); transition: border-color .15s, box-shadow .15s; }
.wsfo-hd-card:hover { border-color: color-mix(in srgb, var(--h-accent) 40%, var(--h-line)); box-shadow: 0 14px 30px -22px rgba(29,26,23,.4); color: var(--h-fg); }
.wsfo-hd-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 11px; background: linear-gradient(135deg, var(--h-palm), var(--h-accent)); max-width: 100%; }
.wsfo-hd-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wsfo-hd-img b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 54px var(--h-display); color: rgba(255,255,255,.92); }
.wsfo-hd-img em { position: absolute; left: 10px; top: 10px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #fff; color: #1D1A17; padding: 4px 9px; border-radius: 6px; }
.wsfo-hd-body { display: flex; flex-direction: column; gap: 3px; padding: 0 4px 4px; flex: 1; }
.wsfo-hd-body strong { font-size: 16.5px; font-weight: 700; }
.wsfo-hd-body small { color: var(--h-muted); font-size: 13.5px; }
.wsfo-hd-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.wsfo-hd-price { font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.wsfo-hd-add { font-weight: 700; font-size: 13.5px; padding: 6px 16px; border-radius: 99px; background: var(--h-soft); color: var(--h-accent); transition: background .15s, color .15s; }
.wsfo-hd-card:hover .wsfo-hd-add { background: var(--h-accent); color: #fff; }
.wsfo-hd-card.is-out { opacity: .6; }

/* ---------- how it works (blueprint journey steps) ---------- */
.wsfo-hs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.wsfo-hs-list li { position: relative; padding: 22px; border-radius: 16px; background: var(--h-card); border: 1px solid var(--h-line); display: flex; flex-direction: column; gap: 8px; }
.wsfo-hs-n { font: 700 30px var(--h-display); color: var(--h-accent); line-height: 1; }
.wsfo-hs-ic { position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--h-sunk); color: var(--h-fg); font-size: 17px; }
.wsfo-hs-ic svg { width: 18px; height: 18px; fill: currentColor; }
.wsfo-hs-list h3 { font-size: 19px; font-weight: 700; margin-top: 4px; }
.wsfo-hs-list p { color: var(--h-muted); font-size: 15px; }

/* ---------- delivery zones (blueprint zone cards) ---------- */
.wsfo-hz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.wsfo-hz-card { border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--h-card); border: 1px solid var(--h-line); }
.wsfo-hz-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wsfo-hz-card h3 { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.wsfo-hz-card h3 i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.wsfo-hz-card header b { font: 800 26px var(--h-display); font-variant-numeric: tabular-nums; }
.wsfo-hz-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.wsfo-hz-card dt { color: var(--h-muted); }
.wsfo-hz-card dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.wsfo-hz-areas { color: var(--h-muted); font-size: 14px; }
.wsfo-hz-note { margin-top: 18px !important; font-size: 14.5px; color: var(--h-muted); background: var(--h-sunk); border-radius: 12px; padding: 12px 16px; }

/* ---------- reviews ---------- */
.wsfo-hr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.wsfo-hr-card { margin: 0; padding: 22px; border-radius: 16px; background: var(--h-card); border: 1px solid var(--h-line); display: flex; flex-direction: column; gap: 14px; }
.wsfo-hr-stars { color: var(--h-palm); letter-spacing: 2px; font-size: 17px; }
.wsfo-hr-card blockquote { margin: 0; padding: 0; border: 0; font: 500 16px/1.55 var(--h-body); color: inherit; quotes: none; }
.wsfo-hr-card blockquote::before, .wsfo-hr-card blockquote::after { display: none; }
.wsfo-hr-card figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.wsfo-hr-card figcaption b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--h-palm); color: #1D1A17; font-weight: 800; }
.wsfo-hr-card figcaption span { display: flex; flex-direction: column; font-weight: 700; line-height: 1.25; }
.wsfo-hr-card figcaption small { color: var(--h-muted); font-weight: 500; }

/* ---------- order banner (like the menu's Today's special) ---------- */
.wsfo-hb-box { border-radius: 18px; padding: clamp(26px, 4vw, 44px); color: #fff; background: var(--h-accent); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.wsfo-hb-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wsfo-hb .wsfo-h-title { color: #fff; }
.wsfo-hb .wsfo-h-sub { color: rgba(255,255,255,.9); }
.wsfo-hb-code { padding: 0 16px; min-height: 52px; display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; border: 2px dashed rgba(255,255,255,.6); font-weight: 600; }
.wsfo-hb-code b { font: 800 17px var(--h-display); letter-spacing: .08em; }
.wsfo-hb-phone { color: rgba(255,255,255,.9); }
.wsfo-hb-art { width: clamp(120px, 16vw, 180px); aspect-ratio: 1; }
.wsfo-hb-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.wsfo-hb-mark { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); font: 800 clamp(48px, 6vw, 72px) var(--h-display); }

/* ---------- reveal on scroll (only once the script marks an element as waiting) ---------- */
.wsfo-reveal .wsfo-h-in > * { transition: opacity .6s ease, transform .6s ease; }
.wsfo-reveal.is-waiting .wsfo-h-in > * { opacity: 0; transform: translateY(18px); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) { .wsfo-hd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.wsfo-hh .wsfo-h-in { grid-template-columns: minmax(0, 1fr); }
	.wsfo-hh-art { max-width: 300px; }
	.wsfo-hh-chip.c1 { left: -12px; }
	.wsfo-hh-chip.c2 { right: -12px; }
	.wsfo-hb-box { grid-template-columns: minmax(0, 1fr); }
	.wsfo-hb-art { display: none; }
}
@media (max-width: 600px) {
	.wsfo-hd-grid { grid-template-columns: minmax(0, 1fr); }
	.wsfo-hh-stats { grid-template-columns: 1fr 1fr; }
	.wsfo-hh-stats div:nth-child(3) { grid-column: 1 / -1; }
	.wsfo-hh-chip { font-size: 12.5px; padding: 8px 12px; white-space: normal; max-width: 60%; }
	.wsfo-h-btns .wsfo-h-btn { flex: 1 1 auto; justify-content: center; white-space: normal; }
	.wsfo-phone-scr { min-height: 480px; }
}
@media (prefers-reduced-motion: reduce) {
	.wsfo-h *, .wsfo-h *::before { animation: none !important; transition: none !important; }
	.wsfo-reveal.is-waiting .wsfo-h-in > * { opacity: 1; transform: none; }
}

/* Logo in the phone preview and the order banner */
.wsfo-phone-brand { display: flex; align-items: center; gap: 8px; }
.wsfo-phone-brand img { width: 30px; height: 30px; object-fit: contain; }
.wsfo-phone-brand b { font: 800 14px var(--h-display); color: var(--h-accent); }
.wsfo-hb-mark.has-logo { background: #fff; padding: 12%; box-shadow: 0 0 0 6px var(--h-palm); }
.wsfo-hb-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
/* The highlighted word gets a gold underline, like the flame under the logo's lettering. */
.wsfo-hh-title em { background: linear-gradient(transparent 78%, color-mix(in srgb, var(--h-palm) 55%, transparent) 78%); }

/* Full-width sections from the first paint. Elementor stretches "full width" sections with a script,
   and LiteSpeed delays scripts until the visitor scrolls or taps, so without this the homepage first
   shows boxed (white strips at the sides) and then jumps. Overrides the script's inline width/left. */
.elementor-section.elementor-section-stretched { width: 100vw !important; max-width: 100vw !important; left: 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }