/* Figma blocks: root, type, buttons, demo shell. The route owns its responsive surface; the lab stays desktop-only. */
[data-sf-template] .fm-root { font: 14px/1.4 var(--fm-font); color: var(--fm-ink); background: var(--fm-surface); min-height: 100vh; }
[data-sf-template] .fm-root *, [data-sf-template] .fm-root *::before, [data-sf-template] .fm-root *::after { box-sizing: border-box; }
/* :where keeps resets at zero specificity, so block classes set their own colours. */
[data-sf-template] :where(.fm-root) :where(button, input, select) { font: inherit; color: inherit; }
[data-sf-template] :where(.fm-root) button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-sf-template] :where(.fm-root) button:disabled { cursor: not-allowed; }
[data-sf-template] .fm-root img { display: block; max-width: 100%; height: auto; }
[data-sf-template] .fm-root h1, [data-sf-template] .fm-root h2, [data-sf-template] .fm-root h3, [data-sf-template] .fm-root h4, [data-sf-template] .fm-root p { margin: 0; }
[data-sf-template] .fm-root ul, [data-sf-template] .fm-root ol { list-style: none; margin: 0; padding: 0; }
/* Focus (owner 06.10): one indicator. Fields show only the Figma Focused border (6945-30636 / 4659-42287);
   buttons, links and cards get a thin ring for the keyboard only; a mouse click leaves no ring. */
[data-sf-template] .fm-root :focus { outline: none; }
[data-sf-template] .fm-root :is(button, a, summary):focus-visible { outline: 2px solid var(--fm-brand); outline-offset: 2px; }
[data-sf-template] .fm-icon { flex: none; display: block; }
[data-sf-template] .fm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-sf-template] .fm-shell { width: min(100%, calc(var(--fm-page) + 2 * var(--fm-gutter))); margin: 0 auto;
  padding: 0 var(--fm-gutter); }
[data-sf-template] .fm-main { min-height: 60vh; padding-bottom: 64px; }
[data-sf-template] .fm-page-title { font-size: var(--fm-text-xxl); font-weight: 600; line-height: 1.2; color: var(--fm-ink);
  margin: 32px 0 24px !important; letter-spacing: -.01em; }
[data-sf-template] .fm-linkish { border: 0; background: none; padding: 0; color: var(--fm-ink); font-size: var(--fm-text-xs);
  text-decoration: none; }
[data-sf-template] .fm-linkish:hover { color: var(--fm-brand); }
[data-sf-template] .fm-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 0 20px; border: 0; border-radius: var(--fm-radius); font-size: var(--fm-text-m); font-weight: 500;
  transition: background .15s ease; }
[data-sf-template] .fm-button-primary { background: var(--fm-brand); color: var(--fm-on-brand) !important; }
[data-sf-template] .fm-button-primary:hover:not(:disabled) { background: var(--fm-brand-hover); }
[data-sf-template] .fm-button-primary:disabled { opacity: .5; }
[data-sf-template] .fm-button-secondary { background: var(--fm-surface-2); color: var(--fm-ink); }
[data-sf-template] .fm-button-secondary:hover { background: var(--fm-surface-3); }
[data-sf-template] .fm-button-wide { width: 100%; }
[data-sf-template] .fm-placeholder { color: var(--fm-muted); }
/* Live demo notice (toast). Figma «Уведомления и сообщения»: dark popover. */
[data-sf-template] .fm-live { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); pointer-events: none; }
[data-sf-template] .fm-live p { background: var(--fm-popover); color: #fff; border-radius: var(--fm-radius); padding: 12px 16px;
  font-size: var(--fm-text-s); box-shadow: var(--fm-shadow-modal); }
/* A dish added from its card (LEGACY toast): dark, bottom right on a desktop, over the bottom bars on a phone. */
[data-sf-template] .fm-added-place { position: fixed; z-index: 70; right: 24px; bottom: var(--sf-added-bottom, 24px);
  width: min(400px, calc(100vw - 24px)); pointer-events: none; }
[data-sf-template] .fm-added { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 12px;
  color: #fff; background: #1f2023; box-shadow: 0 8px 24px rgb(0 0 0 / 24%); pointer-events: auto;
  animation: fm-added-in .16s ease-out; }
[data-sf-template] .fm-added p { display: grid; flex: 1; min-width: 0; margin: 0; }
[data-sf-template] .fm-added strong { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
[data-sf-template] .fm-added p span { color: #b7c0c7; font-size: 13px; }
[data-sf-template] .fm-added-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  color: #2fb75a; box-shadow: inset 0 0 0 2px #2fb75a; }
[data-sf-template] .fm-added button { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0;
  border-radius: 8px; color: #fff; background: rgb(255 255 255 / 10%); cursor: pointer; }
/* The cart panel beside the menu stands on the right: the notice keeps off its button. */
@media (min-width: 900px) { [data-sf-template] .fm-added-place[data-aside] { right: auto; left: 24px; } }
@media (max-width: 899px) {
  [data-sf-template] .fm-added-place { left: 12px; right: 12px; width: auto; bottom: var(--sf-added-bottom-phone, 88px); }
}
/* Demo control: outside the template, marked DEMO. */
[data-sf-template] .fm-demo { position: relative; z-index: 40; background: #1f1f1f; color: #fff; font-size: 12px; }
[data-sf-template] .fm-demo summary { display: flex; align-items: center; gap: 10px; padding: 7px var(--fm-gutter); cursor: pointer;
  list-style: none; font-weight: 600; letter-spacing: .02em; }
[data-sf-template] .fm-demo summary::-webkit-details-marker { display: none; }
[data-sf-template] .fm-demo summary span { font-weight: 400; opacity: .8; }
[data-sf-template] .fm-demo .fm-demo-hint { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
[data-sf-template] .fm-demo-dot { width: 8px; height: 8px; border-radius: 50%; background: #32d47d; }
[data-sf-template] .fm-demo-panel { padding: 12px var(--fm-gutter) 16px; display: grid; gap: 12px; }
[data-sf-template] .fm-demo-inputs, [data-sf-template] .fm-demo-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; }
[data-sf-template] .fm-demo-inputs label { display: grid; gap: 4px; opacity: .9; }
[data-sf-template] .fm-demo select { background: #333; color: #fff; border: 1px solid #555; border-radius: 6px; padding: 5px 8px; }
[data-sf-template] .fm-demo-actions button { background: #fff; color: #1f1f1f; border: 0; border-radius: 8px; padding: 7px 12px;
  font-weight: 500; }
[data-sf-template] .fm-demo small { opacity: .75; line-height: 1.5; }
@media (max-width: 899px) {
  [data-sf-template] .fm-page-title { font-size: var(--fm-text-xl); margin: 20px 0 16px !important; }
  [data-sf-template] .fm-demo .fm-demo-hint { display: none; }
  [data-sf-template] .fm-live { bottom: 96px; }
}

/* Cart 7274-88922 / 7274-89515 / 7284-69045, summary 4827-45427, footer, NavigationBar 7130-54540. */
[data-sf-template] .fm-option > label { position: relative; }
[data-sf-template] .fm-cart-header { border-bottom: 1px solid var(--fm-line); background: var(--fm-surface); }
[data-sf-template] .fm-cart-header .fm-shell { position: relative; display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 16px; }
[data-sf-template] .fm-cart-logo { position: absolute; left: 50%; transform: translateX(-50%); }
[data-sf-template] .fm-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 10px; border: 0;
  border-radius: var(--fm-radius); background: var(--fm-surface-2); color: var(--fm-ink-strong); font-weight: 500; }
[data-sf-template] .fm-back:hover { background: var(--fm-surface-3); }
[data-sf-template] .fm-steps { display: flex; gap: 28px; font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .fm-steps li { display: grid; justify-items: center; gap: 4px; }
[data-sf-template] .fm-steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--fm-surface-2); color: var(--fm-ink); }
[data-sf-template] .fm-steps li[aria-current='step'] { color: var(--fm-brand); }
[data-sf-template] .fm-steps li[aria-current='step'] span { background: var(--fm-surface); border: 2px solid var(--fm-brand); }
[data-sf-template] .fm-lines { display: grid; }
[data-sf-template] .fm-line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--fm-line); }
[data-sf-template] .fm-line img { width: 80px; height: 60px; border-radius: var(--fm-radius); object-fit: cover; }
[data-sf-template] .fm-line-text { display: grid; gap: 2px; min-width: 0; }
[data-sf-template] .fm-line-text h3 { font-size: var(--fm-text-m); font-weight: 500; color: var(--fm-ink-strong); }
[data-sf-template] .fm-line-text p { font-size: var(--fm-text-s); color: var(--fm-muted); }
[data-sf-template] .fm-line-text .fm-linkish { width: max-content; color: var(--fm-brand); font-weight: 500; }
[data-sf-template] .fm-line-price { font-size: var(--fm-text-m); font-weight: 600; color: var(--fm-ink-strong); min-width: 76px;
  text-align: right; }
[data-sf-template] .fm-line-remove { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none;
  border-radius: var(--fm-radius-s); color: var(--fm-muted); }
[data-sf-template] .fm-line-remove:hover { background: var(--fm-surface-2); color: var(--fm-ink); }
/* «Не забудьте добавить» — cards (desktop 7274-89515) or rows (mobile 7284-69045). */
[data-sf-template] .fm-addons { margin-top: 28px; }
[data-sf-template] .fm-addons ul { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
[data-sf-template] .fm-addon { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--fm-radius);
  border: 2px solid var(--fm-line); }
/* Summary card and Р6 panel. */
[data-sf-template] .fm-cart-aside { position: sticky; top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  padding: 28px; border-radius: var(--fm-radius-l);
  background: var(--fm-surface); box-shadow: var(--fm-shadow-2); border: 1px solid var(--fm-line); }
[data-sf-template] .fm-summary { display: grid; gap: 12px; margin: 0; }
[data-sf-template] .fm-summary div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fm-text-m); }
[data-sf-template] .fm-summary dt { color: var(--fm-muted); }
[data-sf-template] .fm-summary dd { margin: 0; color: var(--fm-ink-strong); white-space: nowrap; }
[data-sf-template] .fm-row-discount dd, [data-sf-template] .fm-row-bonus dd { color: var(--fm-green); }
[data-sf-template] .fm-summary .fm-summary-total { align-items: baseline; padding-top: 12px; border-top: 1px solid var(--fm-line); }
[data-sf-template] .fm-summary-total dt { color: var(--fm-ink); }
[data-sf-template] .fm-summary-total dd { font-size: var(--fm-text-xl); font-weight: 600; }
[data-sf-template] .fm-loyalty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
[data-sf-template] .fm-promo { display: flex; padding: 4px; border-radius: var(--fm-radius); background: var(--fm-surface-2); }
[data-sf-template] .fm-promo input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 12px; outline: none;
  font-size: var(--fm-text-m); text-transform: uppercase; }
[data-sf-template] .fm-promo input::placeholder { text-transform: none; color: var(--fm-muted); }
[data-sf-template] .fm-promo:has(input:focus) { box-shadow: inset 0 0 0 1.5px var(--fm-brand); }
[data-sf-template] .fm-promo .fm-button { min-height: 44px; padding: 0 16px; font-size: var(--fm-text-s); }
[data-sf-template] .fm-promo-applied { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: var(--fm-radius);
  background: var(--fm-green-soft); color: #145c34; font-size: var(--fm-text-s); }
[data-sf-template] .fm-promo-applied .fm-linkish { margin-left: auto; font-size: var(--fm-text-s); color: #145c34;
  text-decoration: underline; }
[data-sf-template] .fm-bonus { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--fm-radius);
  background: var(--fm-brand-10); color: var(--fm-brand); }
[data-sf-template] .fm-bonus > div { flex: 1; min-width: 0; display: grid; color: var(--fm-ink); }
[data-sf-template] .fm-bonus small { color: var(--fm-muted); font-size: var(--fm-text-xs); }
[data-sf-template] .fm-switch { position: relative; width: 44px; height: 26px; flex: none; }
[data-sf-template] .fm-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
[data-sf-template] .fm-switch input:disabled { cursor: not-allowed; }
[data-sf-template] .fm-switch span { position: absolute; inset: 0; border-radius: 13px; background: var(--fm-surface-3);
  transition: .15s; }
[data-sf-template] .fm-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--fm-shadow-1); transition: .15s; }
[data-sf-template] .fm-switch input:checked + span { background: var(--fm-brand); }
[data-sf-template] .fm-switch input:checked + span::after { transform: translateX(18px); }
[data-sf-template] .fm-switch input:disabled + span { opacity: .45; }
@media (prefers-reduced-motion: reduce) { [data-sf-template] .fm-switch span, [data-sf-template] .fm-switch span::after { transition: none; } }
[data-sf-template] .fm-switch input:focus-visible + span { outline: 2px solid var(--fm-brand); outline-offset: 2px; }
[data-sf-template] .fm-error { display: flex; gap: 6px; align-items: flex-start; color: var(--fm-red-600); font-size: var(--fm-text-s); }
[data-sf-template] .fm-success { color: var(--fm-green); font-size: var(--fm-text-s); }
[data-sf-template] .fm-aside-note { color: var(--fm-muted); font-size: 11px; line-height: 1.4; }
/* Footer (7274-88922). */
[data-sf-template] .fm-footer { border-top: 1px solid var(--fm-line); padding: 32px 0 40px; background: var(--fm-surface); }
[data-sf-template] .fm-footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; align-items: start; }
[data-sf-template] .fm-footer-brand { display: grid; gap: 8px; }
[data-sf-template] .fm-footer small { color: var(--fm-muted); font-size: var(--fm-text-xs); }
[data-sf-template] .fm-footer-phone { font-size: var(--fm-text-m); font-weight: 500; color: var(--fm-ink-strong); }
[data-sf-template] .fm-footer nav ul { display: grid; gap: 8px; }
[data-sf-template] .fm-footer .fm-linkish { color: var(--fm-muted); }
/* Mobile: bottom navigation and cart pill. */
[data-sf-template] .fm-bottom-nav, [data-sf-template] .fm-cart-pill { display: none; }
@media (max-width: 899px) {
  [data-sf-template] .fm-cart-header .fm-shell { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 12px;
    padding-bottom: 12px; }
  [data-sf-template] .fm-cart-logo { position: static; transform: none; align-self: center; order: -1; }
  [data-sf-template] .fm-back { min-height: 32px; font-size: var(--fm-text-s); }
  [data-sf-template] .fm-cart-logo .fm-logo { width: 140px; height: 30px; }
  [data-sf-template] .fm-steps { display: none; }
  [data-sf-template] .fm-line { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: 'img text remove' 'img price count';
    gap: 4px 12px; }
  [data-sf-template] .fm-line img { grid-area: img; align-self: start; }
  [data-sf-template] .fm-line-text { grid-area: text; }
  [data-sf-template] .fm-line-price { grid-area: price; text-align: left; align-self: center; min-width: 0; }
  [data-sf-template] .fm-line .fm-counter { grid-area: count; justify-self: end; }
  [data-sf-template] .fm-line-remove { grid-area: remove; justify-self: end; align-self: start; }
  [data-sf-template] .fm-addons-cards ul { grid-template-columns: 1fr; gap: 4px; }
  [data-sf-template] .fm-addons .fm-addon { border: 0; padding: 4px 0; }
  [data-sf-template] .fm-cart-aside { position: static; padding: 20px; }
  [data-sf-template] .fm-footer-grid { grid-template-columns: 1fr; }
  [data-sf-template] .fm-footer { padding-bottom: 120px; }
  [data-sf-template] .fm-cart-pill { position: fixed; z-index: 30; left: 16px; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom)); display: flex;
    align-items: center;
    gap: 10px; min-height: 52px; padding: 0 18px; border: 0; border-radius: var(--fm-radius-l);
      background: var(--fm-brand);
    color: #fff; font-weight: 500; box-shadow: 0 8px 24px rgb(97 86 231 / 35%); }
  [data-sf-template] .fm-cart-pill b { margin-left: auto; background: #fff; color: var(--fm-brand); border-radius: var(--fm-radius-s);
    padding: 2px 8px; }
  [data-sf-template] .fm-bottom-nav { display: block; position: fixed; z-index: 30; left: 8px; right: 8px; bottom: 8px;
    border-radius: var(--fm-radius-xl); background: var(--fm-surface-2); box-shadow: var(--fm-shadow-2); }
  [data-sf-template] .fm-bottom-nav ul { display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px; }
  [data-sf-template] .fm-bottom-nav button { width: 100%; display: grid; justify-items: center; gap: 3px; border: 0; background: none;
    padding: 6px 0; font-size: 10px; font-weight: 500; color: var(--fm-muted); }
  [data-sf-template] .fm-bottom-nav button[aria-current='page'] { color: var(--fm-ink-heavy); }
  [data-sf-template] .fm-bottom-nav button { position: relative; }
  [data-sf-template] .fm-nav-badge { position: absolute; top: 0; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--fm-brand); color: #fff; font-size: 11px; line-height: 18px; }
  [data-sf-template] .fm-cart-pill .fm-icon:last-child { margin-left: 4px; }
  /* Room under the last card for the floating cart action (owner 06.10). */
  [data-sf-template] .fm-root:has(.fm-cart-pill) .fm-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Cards 4822-38343 (desktop), 7165-110804 / 4822-38195 (mobile), strips 7274-89515; states — new design. */
[data-sf-template] .fm-sections { display: grid; gap: 40px; }
[data-sf-template] .fm-section { scroll-margin-top: 80px; }
[data-sf-template] .fm-section-title { font-size: var(--fm-text-xl); font-weight: 600; color: var(--fm-ink);
  margin-bottom: 16px !important; }
[data-sf-template] .fm-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
[data-sf-template] .fm-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--fm-radius-xl); background: var(--fm-surface); box-shadow: var(--fm-shadow-2);
  border: 1px solid var(--fm-line); }
[data-sf-template] .fm-card-media { position: relative; aspect-ratio: 4 / 3; background: #f3e7cf; overflow: hidden; }
[data-sf-template] .fm-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
[data-sf-template] .fm-card:hover .fm-card-media img { transform: scale(1.03); }
[data-sf-template] .fm-badges.fm-card-badges { position: absolute; left: 12px; bottom: 12px; }
[data-sf-template] .fm-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; flex: 1; }
[data-sf-template] .fm-card-title { font-size: var(--fm-text-m); font-weight: 500; line-height: 1.3; color: var(--fm-ink); }
[data-sf-template] .fm-card-open { border: 0; background: none; padding: 0; text-align: left; font-weight: inherit; color: inherit; }
[data-sf-template] a.fm-card-open, [data-sf-template] a.fm-section-link { text-decoration: none; color: inherit; }
[data-sf-template] .fm-card-open::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
[data-sf-template] .fm-card-open:focus-visible { outline: none; }
[data-sf-template] :is(.fm-card, .fm-compact):has(.fm-card-open:focus-visible) {
  outline: 2px solid var(--fm-brand); outline-offset: 2px; }
[data-sf-template] .fm-card-meta { color: var(--fm-muted); font-size: var(--fm-text-xs); }
[data-sf-template] .fm-card-text { color: var(--fm-muted); font-size: var(--fm-text-xs); line-height: 1.45; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-sf-template] .fm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto;
  padding-top: 12px; }
[data-sf-template] .fm-card-foot button { position: relative; z-index: 2; }
[data-sf-template] .fm-card .fm-badges { z-index: auto; }
[data-sf-template] .fm-price { font-size: var(--fm-text-l); font-weight: 500; color: var(--fm-ink-strong); white-space: nowrap; }
[data-sf-template] .fm-price small { font-size: var(--fm-text-s); color: var(--fm-muted); font-weight: 400; }
[data-sf-template] .fm-card-large .fm-card-media { aspect-ratio: 300 / 208; }
/* A section without photos (sfv2-5-00026): a list of cards without a picture box. */
[data-sf-template] .fm-grid-plain { gap: 16px; }
[data-sf-template] .fm-card-plain .fm-card-body { padding: 16px 20px; }
[data-sf-template] .fm-card-large .fm-card-title { font-size: var(--fm-text-m); }
[data-sf-template] .fm-card-large .fm-card-text { -webkit-line-clamp: 3; }
/* Badges (Bage 7220-17285). */
[data-sf-template] .fm-badges { display: flex; flex-wrap: wrap; gap: 4px; position: relative; z-index: 2; }
[data-sf-template] .fm-badge { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 7px; border-radius: 6px;
  font-size: var(--fm-text-xs); font-weight: 600; text-transform: uppercase; color: #fff; background: var(--fm-ink); }
[data-sf-template] .fm-badge-new { background: var(--fm-green); }
[data-sf-template] .fm-badge-hit { background: var(--fm-orange); }
[data-sf-template] .fm-card .fm-badge-hit { background: var(--fm-gold); }
[data-sf-template] .fm-badge-sale, [data-sf-template] .fm-badge-spicy { background: var(--fm-red); }
[data-sf-template] .fm-badge-brand { background: var(--fm-brand); }
[data-sf-template] .fm-badge-plain { background: var(--fm-surface); color: var(--fm-ink-strong);
  box-shadow: inset 0 0 0 1px var(--fm-surface-3); }
/* Card action: CartButtonS 7405-81313. */
[data-sf-template] .fm-plus { display: grid; place-items: center; flex: none; border: 0; color: #fff; background: var(--fm-brand);
  box-shadow: 0 8px 11px rgb(32 28 77 / 20%); }
[data-sf-template] .fm-plus:hover:not(:disabled) { background: var(--fm-brand-hover); }
[data-sf-template] .fm-plus:disabled { opacity: .4; box-shadow: none; }
[data-sf-template] .fm-plus-m { width: 48px; height: 48px; border-radius: var(--fm-radius-l); }
[data-sf-template] .fm-plus-s { width: 32px; height: 32px; border-radius: var(--fm-radius-s); box-shadow: none; }
[data-sf-template] .fm-plus-soft { width: 32px; height: 32px; border-radius: var(--fm-radius-s); background: var(--fm-surface-2);
  color: var(--fm-ink); box-shadow: none; }
[data-sf-template] .fm-plus-soft:hover:not(:disabled) { background: var(--fm-surface-3); }
[data-sf-template] .fm-counter { display: inline-flex; align-items: center; gap: 2px; border-radius: var(--fm-radius-s); padding: 2px;
  background: var(--fm-surface-2); color: var(--fm-ink); flex: none; }
[data-sf-template] .fm-counter button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: none;
  border-radius: 6px; color: inherit; }
[data-sf-template] .fm-counter button:disabled { opacity: .35; }
[data-sf-template] .fm-counter output { min-width: 22px; text-align: center; font-weight: 500; }
[data-sf-template] .fm-counter-brand { background: var(--fm-brand); color: #fff; }
[data-sf-template] .fm-counter-brand button:hover:not(:disabled) { background: rgb(255 255 255 / 16%); }
[data-sf-template] .fm-unavailable { color: var(--fm-muted); font-size: var(--fm-text-xs); }
/* Strips: «Будет вкуснее» (compact) and «Рекомендуем попробовать» (mini cards). */
[data-sf-template] .fm-strip { margin-top: 32px; min-width: 0; }
[data-sf-template] .fm-strip-title { font-size: var(--fm-text-l); font-weight: 500; color: var(--fm-ink); margin-bottom: 12px !important; }
[data-sf-template] .fm-strip-track { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 12px; margin: 0 -4px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; }
[data-sf-template] .fm-strip-track > * { scroll-snap-align: start; flex: none; }
[data-sf-template] .fm-strip-cards .fm-card { width: 168px; box-shadow: none; background: var(--fm-surface-2); border: 0; }
[data-sf-template] .fm-card-mini .fm-card-media { aspect-ratio: 1; margin: 4px; border-radius: var(--fm-radius-l); }
[data-sf-template] .fm-card-mini .fm-card-body { padding: 8px 10px 10px; gap: 2px; }
[data-sf-template] .fm-card-mini .fm-card-title { font-size: var(--fm-text-s); }
[data-sf-template] .fm-card-mini .fm-price { font-size: var(--fm-text-m); }
[data-sf-template] .fm-compact { position: relative; display: flex; gap: 12px; width: 290px; padding: 4px;
  border-radius: var(--fm-radius-l);
  background: var(--fm-surface-2); }
[data-sf-template] .fm-compact img { width: 86px; height: 86px; border-radius: var(--fm-radius); object-fit: cover; }
[data-sf-template] .fm-compact > div { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 6px 6px 4px 0; }
[data-sf-template] .fm-compact h4 { font-size: var(--fm-text-s); font-weight: 500; }
[data-sf-template] .fm-compact .fm-price { font-size: var(--fm-text-s); }
[data-sf-template] .fm-compact .fm-card-foot { padding-top: 4px; }
/* States (new screen design in the Figma style). */
[data-sf-template] .fm-state { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 24px; margin: 8px 0;
  border-radius: var(--fm-radius-xl); background: var(--fm-surface-2); }
[data-sf-template] .fm-state h2 { font-size: var(--fm-text-l); font-weight: 600; color: var(--fm-ink); }
[data-sf-template] .fm-state p { max-width: 420px; color: var(--fm-muted); }
[data-sf-template] .fm-state .fm-button { margin-top: 8px; min-height: 44px; background: var(--fm-surface); }
[data-sf-template] .fm-state-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--fm-surface); color: var(--fm-brand); }
[data-sf-template] .fm-state-error .fm-state-icon { color: var(--fm-red-600); }
@media (prefers-reduced-motion: reduce) { [data-sf-template] .fm-card-media img { transition: none; } }
@media (max-width: 899px) {
  [data-sf-template] .fm-grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-sf-template] .fm-grid-large { grid-template-columns: 1fr; gap: 16px; }
  [data-sf-template] .fm-grid-plain { gap: 8px; }
  [data-sf-template] .fm-card-plain .fm-card-body { padding: 12px 16px; }
  [data-sf-template] .fm-card-grid .fm-card-body { padding: 10px 12px 12px; }
  [data-sf-template] .fm-card-grid .fm-card-text { display: none; }
  [data-sf-template] .fm-card-grid .fm-price { font-size: var(--fm-text-m); }
  [data-sf-template] .fm-card-grid .fm-plus-m { width: 36px; height: 36px; border-radius: var(--fm-radius); }
  [data-sf-template] .fm-card-large { background: var(--fm-surface-2); border: 0; box-shadow: none; }
  [data-sf-template] .fm-card-large .fm-card-media { aspect-ratio: 1; margin: 4px; border-radius: var(--fm-radius-l); }
  [data-sf-template] .fm-card-large .fm-card-title { font-size: var(--fm-text-l); }
  [data-sf-template] .fm-card-large .fm-card-text { font-size: var(--fm-text-s); }
  [data-sf-template] .fm-card-large .fm-card-body { padding: 12px 12px 16px; }
  [data-sf-template] .fm-compact { width: 270px; }
}

/* Group 2: receipt (1. Выбор адреса 4262-7776 … 4272-23634, mobile 4151-14643 …), sign-in (ModalDesktop Mini
   6994-20412, ModalMobile 7403-74194), checkout «Подтверждение заказа» 6489-71666 / 6489-72203, payment and
   result (new screen design). Tokens only from tokens.css. */
/* Overlay sizes for group 2: the shared Overlay box is resized by its content, the block stays unchanged. */
[data-sf-template] .fm-overlay-box:has(> .fm-flow-modal) { width: min(440px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px)); }
[data-sf-template] .fm-overlay-box:has(> .fm-flow-map) { width: min(900px, calc(100vw - 48px)); height: min(600px, calc(100vh - 48px)); }
[data-sf-template] .fm-overlay-box:has(> .fm-flow-modal, > .fm-flow-map) .fm-overlay-close { top: 20px; right: 20px; width: 40px;
  height: 40px;
  z-index: 3; box-shadow: var(--fm-shadow-1); }
[data-sf-template] .fm-flow-modal { width: 100%; overflow: auto; padding: 72px 32px 32px; overscroll-behavior: contain; }
[data-sf-template] .fm-flow-map { display: grid; grid-template-columns: 400px minmax(0, 1fr); width: 100%; overflow: hidden;
  border-radius: inherit; }
[data-sf-template] .fm-flow-map-form { overflow: auto; padding: 32px; overscroll-behavior: contain; }
/* Fields (text-field 6962-8812): grey surface, label inside; Focused (4659-42287) — brand border, no ring. */
[data-sf-template] .fm-field { display: grid; gap: 2px; padding: 0 16px; min-height: 48px; align-content: center;
  border-radius: var(--fm-radius);
  background: var(--fm-surface-2); border: 1.5px solid transparent; }
[data-sf-template] .fm-field:has(input:focus) { border-color: var(--fm-brand); background: var(--fm-surface); }
[data-sf-template] .fm-field:has(input[aria-invalid='true']) { border-color: var(--fm-red-600); }
[data-sf-template] .fm-field input { width: 100%; min-width: 0; border: 0; background: transparent; outline: none; padding: 0;
  font-size: var(--fm-text-m); color: var(--fm-ink-heavy); }
[data-sf-template] .fm-field input::placeholder { color: var(--fm-muted); }
[data-sf-template] .fm-field-floating { min-height: 56px; }
[data-sf-template] .fm-field-floating > span:first-child { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .fm-field-floating input::placeholder { color: #b7c0c7; }
[data-sf-template] .fm-field-icon { display: flex; align-items: center; gap: 8px; color: var(--fm-muted); }
[data-sf-template] .fm-code { letter-spacing: .5em; font-weight: 500; }
[data-sf-template] .fm-field-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-sf-template] .fm-combo { position: relative; }
[data-sf-template] .fm-suggest { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); display: grid; padding: 4px;
  border-radius: var(--fm-radius); background: var(--fm-surface); box-shadow: var(--fm-shadow-modal); }
[data-sf-template] .fm-suggest li { display: grid; padding: 8px 12px; border-radius: var(--fm-radius-s); cursor: pointer;
  font-size: var(--fm-text-m); color: var(--fm-ink-strong); }
[data-sf-template] .fm-suggest li small { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .fm-suggest li:hover, [data-sf-template] .fm-suggest li[aria-selected='true'] { background: var(--fm-surface-2); }
/* Receipt form. */
[data-sf-template] .fm-receipt, [data-sf-template] .fm-auth { display: grid; gap: 16px; align-content: start; }
[data-sf-template] .fm-receipt-fields { display: grid; gap: 8px; }
[data-sf-template] .fm-city-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  padding: 4px 12px 4px 16px; border: 0; border-radius: var(--fm-radius); background: var(--fm-surface-2);
  color: var(--fm-ink-strong); font-size: var(--fm-text-m); text-align: left; }
[data-sf-template] .fm-city-row > span { display: grid; }
[data-sf-template] .fm-city-row small { font-size: 11px; color: var(--fm-muted); }
[data-sf-template] .fm-receipt .fm-segment { width: 100%; }
[data-sf-template] .fm-receipt-head { display: grid; gap: 4px; }
[data-sf-template] .fm-receipt-head h2 { font-size: var(--fm-text-xl); font-weight: 500; line-height: 1.25; color: var(--fm-ink); }
[data-sf-template] .fm-receipt-head p { font-size: var(--fm-text-s); color: var(--fm-muted); }
[data-sf-template] .fm-radio-rows { border: 0; margin: 0; padding: 0; display: grid; min-width: 0; }
[data-sf-template] .fm-radio-rows legend { padding: 0; margin-bottom: 12px; font-size: var(--fm-text-l); font-weight: 500;
  color: var(--fm-ink-strong); }
[data-sf-template] .fm-radio-rows label { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 8px 0; border-bottom: 1px solid var(--fm-line); cursor: pointer; }
[data-sf-template] .fm-radio-rows label.fm-disabled { cursor: not-allowed; opacity: .55; }
[data-sf-template] .fm-radio-rows input, [data-sf-template] .fm-slots input { position: absolute; opacity: 0; width: 1px; height: 1px; }
[data-sf-template] .fm-radio-mark { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--fm-surface-2);
  border: 1px solid var(--fm-surface-3); }
[data-sf-template] .fm-radio-rows input:checked + .fm-radio-mark { background: var(--fm-surface); border: 6px solid var(--fm-brand); }
[data-sf-template] .fm-radio-rows input:focus-visible + .fm-radio-mark { outline: 2px solid var(--fm-brand); outline-offset: 2px; }
[data-sf-template] .fm-radio-text { display: grid; min-width: 0; }
[data-sf-template] .fm-radio-text span { font-size: var(--fm-text-m); color: var(--fm-ink-strong); }
[data-sf-template] .fm-radio-text small { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .fm-slots { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
[data-sf-template] .fm-slots legend { display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 8px;
  font-size: var(--fm-text-s); font-weight: 500; color: var(--fm-ink-strong); }
[data-sf-template] .fm-slots label { position: relative; cursor: pointer; }
[data-sf-template] .fm-slots label > span { display: grid; min-height: 44px; align-content: center; padding: 4px 14px;
  border-radius: var(--fm-radius); background: var(--fm-surface-2); border: 1px solid transparent;
  font-size: var(--fm-text-s); color: var(--fm-ink-strong); }
[data-sf-template] .fm-slots label small { font-size: 11px; color: var(--fm-muted); }
[data-sf-template] .fm-slots input:checked + span { background: var(--fm-brand-10); border-color: var(--fm-brand);
  color: var(--fm-brand); }
[data-sf-template] .fm-slots input:focus-visible + span { border-color: var(--fm-brand); box-shadow: inset 0 0 0 1px var(--fm-brand); }
[data-sf-template] .fm-slots label.fm-disabled { cursor: not-allowed; }
[data-sf-template] .fm-slots label.fm-disabled > span { color: #b7c0c7; text-decoration: line-through; }
[data-sf-template] .fm-conditions { display: flex; gap: 10px; padding: 12px; border-radius: var(--fm-radius);
  background: var(--fm-brand-10);
  color: var(--fm-brand); }
[data-sf-template] .fm-conditions div { display: grid; color: var(--fm-ink); font-size: var(--fm-text-s); }
[data-sf-template] .fm-conditions small { color: var(--fm-muted); font-size: var(--fm-text-xs); }
[data-sf-template] .fm-flow-error { padding: 10px 12px; border-radius: var(--fm-radius); background: #fdecea; }
[data-sf-template] .fm-flow-note { padding: 12px 14px; border-radius: var(--fm-radius); background: var(--fm-surface-2);
  font-size: var(--fm-text-s); color: var(--fm-ink); }
[data-sf-template] .fm-flow-hint { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .fm-button[data-blocked] { background: var(--fm-surface-2); color: #b7c0c7 !important; cursor: not-allowed; }
[data-sf-template] .fm-flow-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
[data-sf-template] .fm-flow-buttons .fm-button { flex: 1 1 160px; }
[data-sf-template] .fm-resend { justify-self: start; color: var(--fm-brand); font-size: var(--fm-text-s); }
[data-sf-template] .fm-resend:disabled { color: var(--fm-muted); }
[data-sf-template] .fm-legal { font-size: 11px; color: var(--fm-muted); }
[data-sf-template] .fm-icon-button { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0;
  border-radius: var(--fm-radius); background: var(--fm-surface-2); color: var(--fm-ink); }
[data-sf-template] .fm-city-list { display: grid; gap: 16px; align-content: start; }
[data-sf-template] .fm-city-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; }
[data-sf-template] .fm-city-head h2 { text-align: center; font-size: var(--fm-text-m); font-weight: 500; color: var(--fm-ink); }
[data-sf-template] .fm-auth-done { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--fm-radius);
  background: var(--fm-green-soft); color: #145c34; }
[data-sf-template] .fm-auth-done span { display: grid; }
[data-sf-template] .fm-auth-done small { color: var(--fm-ink); }
/* Demo map: drawn placeholder with Figma pins (Atoms/mapPin) and the dark toast (4249-6940). */
[data-sf-template] .fm-map { position: relative; min-height: 100%; overflow: hidden; background: #f4f1e8; }
[data-sf-template] .fm-map-streets { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-sf-template] .fm-pin { position: absolute; transform: translate(-50%, -100%); color: var(--fm-brand);
  filter: drop-shadow(0 4px 6px rgb(97 86 231 / 30%)); }
[data-sf-template] .fm-pin svg { display: block; }
[data-sf-template] .fm-pin:not(.fm-pin-active) { opacity: .75; }
[data-sf-template] .fm-pin:not(.fm-pin-active) svg { width: 32px; height: 42px; }
[data-sf-template] .fm-map-badge { position: absolute; left: 16px; top: 16px; padding: 4px 8px; border-radius: var(--fm-radius-s);
  background: rgb(255 255 255 / 90%); font-size: 11px; color: var(--fm-muted); }
[data-sf-template] .fm-map-toast { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center;
  gap: 12px;
  padding: 12px 16px; border-radius: var(--fm-radius-l); background: var(--fm-popover); color: var(--fm-red); }
[data-sf-template] .fm-map-toast span { display: grid; color: #fff; }
[data-sf-template] .fm-map-toast small { color: #b7c0c7; }
[data-sf-template] .fm-receipt-summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: var(--fm-radius);
  background: var(--fm-surface-2); color: var(--fm-brand); }
[data-sf-template] .fm-receipt-summary span { flex: 1; min-width: 0; color: var(--fm-ink-strong); font-size: var(--fm-text-s); }
[data-sf-template] .fm-receipt-summary .fm-linkish { color: var(--fm-brand); font-size: var(--fm-text-s); font-weight: 500; }
/* Checkout page (6489-71666): header with back, logo and progress; card left, total right. */
[data-sf-template] .fm-flow-page { outline: none; }
[data-sf-template] .fm-confirm-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  min-height: 100px; }
[data-sf-template] .fm-confirm-header .fm-back { justify-self: start; background: transparent; padding-left: 0; }
[data-sf-template] .fm-confirm-header .fm-progress { justify-self: end; }
[data-sf-template] .fm-progress { display: flex; font-size: var(--fm-text-xs); color: var(--fm-ink-strong); }
[data-sf-template] .fm-progress li { position: relative; display: grid; justify-items: center; gap: 6px; width: 128px;
  text-align: center; }
[data-sf-template] .fm-progress li + li::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px;
  background: var(--fm-surface-2); z-index: 0; }
[data-sf-template] .fm-progress li.fm-done + li::before, [data-sf-template] .fm-progress li.fm-done + li.fm-done::before { background: var(--fm-brand); }
[data-sf-template] .fm-progress span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--fm-surface-2); border: 1px solid var(--fm-brand); color: var(--fm-ink);
  font-size: 12px; }
[data-sf-template] .fm-progress .fm-done { color: var(--fm-brand); }
[data-sf-template] .fm-progress .fm-done span { background: var(--fm-brand); color: #fff; }
[data-sf-template] .fm-progress li[aria-current='step'] span { background: var(--fm-surface); border-width: 2px; }
[data-sf-template] .fm-flow-title { font-size: var(--fm-text-xxl); font-weight: 600; color: var(--fm-ink); margin: 24px 0 !important; }
[data-sf-template] .fm-flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 40px; align-items: start; }
[data-sf-template] .fm-flow-main { display: grid; gap: 24px; min-width: 0; }
[data-sf-template] .fm-flow-card { display: grid; gap: 24px; padding: 40px; border-radius: var(--fm-radius-l);
  background: var(--fm-surface);
  box-shadow: 4px 8px 40px rgb(0 0 0 / 8%); min-width: 0; }
[data-sf-template] .fm-flow-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-sf-template] .fm-flow-card-head h2 { font-size: var(--fm-text-l); font-weight: 600; color: var(--fm-ink); }
[data-sf-template] .fm-flow-card-head .fm-linkish { color: var(--fm-brand); font-size: var(--fm-text-s); font-weight: 500; }
[data-sf-template] .fm-order-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; margin: 0;
  padding: 28px 32px; border: 1.5px dashed #a6aeb6; border-radius: var(--fm-radius); }
[data-sf-template] .fm-order-info .fm-wide { grid-column: span 2; }
[data-sf-template] .fm-order-info dt { font-size: var(--fm-text-s); color: var(--fm-muted); }
[data-sf-template] .fm-order-info dd { margin: 4px 0 0; font-size: var(--fm-text-m); color: var(--fm-ink-heavy); overflow-wrap: anywhere; }
[data-sf-template] .fm-payments label { border-bottom: 0; min-height: 40px; }
[data-sf-template] .fm-payments legend { font-size: var(--fm-text-l); font-weight: 600; color: var(--fm-ink); }
[data-sf-template] .fm-payments:disabled { opacity: .6; }
[data-sf-template] .fm-checkout-total { position: sticky; top: 24px; display: grid; gap: 20px; padding: 28px;
  border-radius: var(--fm-radius-l);
  background: var(--fm-surface); box-shadow: 4px 8px 40px rgb(0 0 0 / 10%); }
[data-sf-template] .fm-checkout-total dl { display: grid; gap: 10px; margin: 0; }
[data-sf-template] .fm-checkout-total dl div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fm-text-m); }
[data-sf-template] .fm-checkout-total dt { color: var(--fm-muted); }
[data-sf-template] .fm-checkout-total dd { margin: 0; color: var(--fm-ink-strong); white-space: nowrap; }
[data-sf-template] .fm-checkout-total .fm-summary-total { padding-top: 12px; border-top: 1px solid var(--fm-line); align-items: baseline; }
[data-sf-template] .fm-checkout-total .fm-summary-total dt { color: var(--fm-ink); }
[data-sf-template] .fm-checkout-total .fm-summary-total dd { font-size: var(--fm-text-xl); font-weight: 600; }
[data-sf-template] .fm-checkout-total .fm-button { min-height: 56px; border-radius: var(--fm-radius-l); }
[data-sf-template] .fm-checkout-lines { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--fm-line); }
[data-sf-template] .fm-checkout-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fm-text-s); }
[data-sf-template] .fm-checkout-lines li > span:first-child { display: grid; min-width: 0; }
[data-sf-template] .fm-checkout-lines b { font-weight: 500; color: var(--fm-ink-strong); }
[data-sf-template] .fm-checkout-lines small { color: var(--fm-muted); font-size: var(--fm-text-xs); }
[data-sf-template] .fm-checkout-lines li > span:last-child { white-space: nowrap; color: var(--fm-ink-strong); }
/* V2-а keeps the cart step header; finished steps are filled (no change in the shared Steps block). */
[data-sf-template] .fm-steps li:has(~ li[aria-current='step']) { color: var(--fm-brand); }
[data-sf-template] .fm-steps li:has(~ li[aria-current='step']) span { background: var(--fm-brand); color: #fff; }
/* Outcome, payment and result panels (new screen design). */
[data-sf-template] .fm-outcome { display: flex; gap: 14px; padding: 20px; border-radius: var(--fm-radius-l); }
[data-sf-template] .fm-outcome > div { display: grid; gap: 8px; flex: 1; min-width: 0; }
[data-sf-template] .fm-outcome h3 { font-size: var(--fm-text-m); font-weight: 600; color: var(--fm-ink-heavy); }
[data-sf-template] .fm-outcome p { font-size: var(--fm-text-s); color: var(--fm-ink); }
[data-sf-template] .fm-outcome-warning { background: #fff4e5; }
[data-sf-template] .fm-outcome-warning .fm-outcome-icon { color: var(--fm-orange); }
[data-sf-template] .fm-outcome-info { background: var(--fm-green-soft); }
[data-sf-template] .fm-outcome-info .fm-outcome-icon { color: var(--fm-green); }
[data-sf-template] .fm-outcome-error { background: #fdecea; }
[data-sf-template] .fm-outcome-error .fm-outcome-icon { color: var(--fm-red-600); }
[data-sf-template] .fm-gateway { max-width: 560px; margin: 40px auto; border-radius: var(--fm-radius-l); overflow: hidden;
  border: 1px solid var(--fm-surface-3); background: var(--fm-surface); box-shadow: var(--fm-shadow-2); }
[data-sf-template] .fm-gateway-bar { display: flex; align-items: baseline; gap: 10px; padding: 14px 24px; background: var(--fm-surface-2);
  color: var(--fm-ink-heavy); font-size: var(--fm-text-s); }
[data-sf-template] .fm-gateway-bar span { color: var(--fm-muted); font-size: var(--fm-text-xs); }
[data-sf-template] .fm-gateway-body { display: grid; gap: 16px; padding: 28px 24px; }
[data-sf-template] .fm-gateway-body h2 { font-size: var(--fm-text-l); font-weight: 500; color: var(--fm-ink); }
[data-sf-template] .fm-gateway-body p { font-size: var(--fm-text-s); color: var(--fm-ink); }
[data-sf-template] .fm-gateway-sum { font-size: var(--fm-text-xxl) !important; font-weight: 600; color: var(--fm-ink-heavy) !important; }
[data-sf-template] .fm-gateway-actions { flex-direction: column; }
[data-sf-template] .fm-gateway-actions .fm-button { flex: none; }
[data-sf-template] .fm-result, [data-sf-template] .fm-placed { max-width: 620px; margin: 40px auto; display: grid; justify-items: center; gap: 14px;
  padding: 40px 32px; border-radius: var(--fm-radius-l); background: var(--fm-surface); text-align: center;
  box-shadow: 4px 8px 40px rgb(0 0 0 / 8%); }
[data-sf-template] .fm-result h2, [data-sf-template] .fm-placed h2 { font-size: var(--fm-text-xl); font-weight: 600; color: var(--fm-ink); }
[data-sf-template] .fm-result p, [data-sf-template] .fm-placed > p { font-size: var(--fm-text-m); color: var(--fm-ink); max-width: 480px; }
[data-sf-template] .fm-result-meta { color: var(--fm-muted) !important; font-size: var(--fm-text-s) !important; }
[data-sf-template] .fm-result-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--fm-green-soft); color: var(--fm-green); }
[data-sf-template] .fm-result-pending .fm-result-icon { background: var(--fm-brand-10); color: var(--fm-brand); }
[data-sf-template] .fm-result-failed .fm-result-icon { background: #fff4e5; color: var(--fm-orange); }
[data-sf-template] .fm-result .fm-flow-buttons, [data-sf-template] .fm-placed .fm-flow-buttons { width: 100%; justify-content: center; }
[data-sf-template] .fm-placed-info { width: 100%; text-align: left; }
[data-sf-template] .fm-placed .fm-flow-note { text-align: left; }
@media (max-width: 1180px) and (min-width: 900px) {
  [data-sf-template] .fm-flow-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
  [data-sf-template] .fm-flow-card { padding: 28px; }
}
@media (max-width: 899px) {
  [data-sf-template] .fm-overlay-box:has(> .fm-flow-modal), [data-sf-template] .fm-overlay-box:has(> .fm-flow-map) { width: 100%; height: auto;
  max-height: 94vh; }
  [data-sf-template] .fm-flow-modal { padding: 64px 20px calc(20px + env(safe-area-inset-bottom)); }
  [data-sf-template] .fm-flow-map { display: flex; flex-direction: column; overflow: auto; }
  [data-sf-template] .fm-flow-map .fm-map { flex: none; min-height: 0; height: 200px; order: -1; }
  [data-sf-template] .fm-flow-map-form { overflow: visible; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  [data-sf-template] .fm-map-toast { left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; }
  [data-sf-template] .fm-confirm-header { grid-template-columns: 1fr; justify-items: start; gap: 12px; min-height: 0; padding: 12px 0; }
  [data-sf-template] .fm-confirm-header .fm-confirm-logo { display: none; }
  [data-sf-template] .fm-confirm-header .fm-progress { justify-self: stretch; }
  [data-sf-template] .fm-progress li { width: auto; flex: 1; font-size: 11px; }
  [data-sf-template] .fm-flow-title { font-size: var(--fm-text-xl); margin: 12px 0 16px !important; }
  [data-sf-template] .fm-flow-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  [data-sf-template] .fm-flow-card { padding: 24px 20px; gap: 20px; }
  [data-sf-template] .fm-order-info { grid-template-columns: 1fr 1fr; padding: 20px; gap: 16px; }
  [data-sf-template] .fm-order-info .fm-wide { grid-column: 1 / -1; }
  [data-sf-template] .fm-checkout-total { position: static; padding: 20px; }
  [data-sf-template] .fm-gateway, [data-sf-template] .fm-result, [data-sf-template] .fm-placed { margin: 20px 0; }
  [data-sf-template] .fm-result, [data-sf-template] .fm-placed { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) { [data-sf-template] .fm-flow-page * { transition: none !important; } }
/* Other sign-in methods (FRONT-CANON §6.1): Telegram, MAX, Yandex ID — demo buttons in the secondary style. */
[data-sf-template] .fm-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
[data-sf-template] .fm-providers-title { grid-column: 1 / -1; text-align: center; font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .fm-providers .fm-button { min-height: 44px; padding: 0 8px; font-size: var(--fm-text-s); }
/* Address popup (owner 06.10, legacy test80): one window from the header, the cart and the checkout step. */
[data-sf-template] .fm-cart-receipt { margin-bottom: 8px; }
[data-sf-template] .fm-addr { position: relative; }
[data-sf-template] .fm-receipt-segment button { min-height: 36px; }
@media (max-width: 899px) {
  /* Mobile like legacy 03-mobile-delivery / Figma 4151-14643: map on top, close and segment over it, sheet below. */
  [data-sf-template] .fm-addr .fm-map { height: 240px; }
  [data-sf-template] .fm-addr { overflow-x: hidden; }
  [data-sf-template] .fm-addr .fm-receipt-segment { position: absolute; z-index: 2; top: 16px; left: 68px; right: 16px; width: auto;
    background: var(--fm-surface); box-shadow: var(--fm-shadow-1); }
  [data-sf-template] .fm-addr .fm-receipt-segment button[aria-pressed='true'] { background: var(--fm-ink-heavy); color: #fff; }
  [data-sf-template] .fm-overlay-box:has(> .fm-addr) .fm-overlay-close { top: 16px; left: 16px; right: auto; }
  [data-sf-template] .fm-overlay-box:has(> .fm-addr) .fm-grabber { display: none; }
  [data-sf-template] .fm-addr .fm-map-badge { top: auto; bottom: 12px; }
}

/* Header 6913-8000 / 4190-10675, mobile 4170-16710; categories: rail, bar, chips 6967-9513, tiles 6928-9037. */
[data-sf-template] .fm-header { background: var(--fm-surface); border-bottom: 1px solid var(--fm-line); }
[data-sf-template] .fm-toplinks { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; gap: 16px; }
[data-sf-template] .fm-toplinks nav { display: flex; gap: 12px; }
[data-sf-template] .fm-toplinks .fm-linkish { font-size: 13px; }
[data-sf-template] .fm-toplinks p { display: flex; gap: 12px; font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .fm-toplinks b { color: var(--fm-ink); font-weight: 500; }
[data-sf-template] .fm-header-row { display: flex; align-items: center; gap: 8px; padding: 8px 0 12px; }
[data-sf-template] .fm-brand { border: 0; background: none; padding: 0; margin-right: auto; }
[data-sf-template] .fm-logo { display: block; width: 187px; height: 40px; }
[data-sf-template] .fm-header-controls, [data-sf-template] .fm-header-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-sf-template] .fm-segment { display: flex; gap: 4px; padding: 4px; border-radius: var(--fm-radius); background: var(--fm-surface-2); }
[data-sf-template] .fm-segment button { flex: 1; border: 0; background: transparent; border-radius: var(--fm-radius-s); padding: 6px 12px;
  color: var(--fm-muted); font-size: var(--fm-text-s); font-weight: 500; white-space: nowrap; min-height: 32px; }
[data-sf-template] .fm-segment button[aria-pressed='true'], [data-sf-template] .fm-segment button[aria-checked='true'] { background: var(--fm-surface);
  color: var(--fm-ink-strong); box-shadow: var(--fm-shadow-1); }
[data-sf-template] .fm-segment button:disabled { color: #b7c0c7; text-decoration: line-through; }
[data-sf-template] .fm-address { display: flex; align-items: center; gap: 8px; height: 40px; min-width: 0; width: 280px; padding: 0 12px;
  border: 0; border-radius: var(--fm-radius); background: var(--fm-surface-2); color: var(--fm-ink); text-align: left; }
[data-sf-template] .fm-address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fm-text-s); }
[data-sf-template] .fm-login { min-height: 40px; padding: 0 16px; font-size: var(--fm-text-s); }
[data-sf-template] .fm-cart-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0;
  border-radius: var(--fm-radius); background: var(--fm-brand); color: #fff; font-weight: 500; white-space: nowrap; }
[data-sf-template] .fm-cart-button:hover { background: var(--fm-brand-hover); }
[data-sf-template] .fm-cart-sum { background: #fff; color: var(--fm-brand); border-radius: var(--fm-radius-s); padding: 2px 8px;
  font-weight: 500; }
[data-sf-template] .fm-address-notice { display: none; align-items: center; gap: 8px; margin: 12px var(--fm-gutter) 0; padding: 12px;
  border-radius: var(--fm-radius); background: var(--fm-warning-bg); color: var(--fm-warning-ink);
  font-size: var(--fm-text-s); font-weight: 500; }
/* Category column with icons (6913-8000). */
[data-sf-template] .fm-rail ul { display: grid; gap: 4px; margin-top: 12px; }
[data-sf-template] .fm-rail button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px;
  border: 0; border-radius: var(--fm-radius-s); background: transparent; color: var(--fm-ink-strong);
  font-size: var(--fm-text-m); text-align: left; }
[data-sf-template] .fm-rail button:hover { background: var(--fm-surface-2); }
[data-sf-template] .fm-rail button[aria-current='true'] { background: var(--fm-brand-10); color: var(--fm-brand); }
[data-sf-template] .fm-cat-thumb { width: 32px; height: 32px; flex: none; border-radius: var(--fm-radius-s); overflow: hidden; }
[data-sf-template] .fm-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Category row (4190-10675) and chips (6967-9513). */
[data-sf-template] .fm-cat-row ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
[data-sf-template] .fm-cat-row button { display: inline-flex; align-items: center; gap: 4px; border: 0; white-space: nowrap;
  border-radius: var(--fm-radius-s); padding: 6px 10px; font-size: var(--fm-text-m); color: var(--fm-ink-strong);
  background: transparent; min-height: 36px; }
[data-sf-template] .fm-cat-row button[aria-current='true'] { background: var(--fm-brand-10); color: var(--fm-brand); }
[data-sf-template] .fm-cat-row li:first-child button .fm-icon { color: var(--fm-brand); }
[data-sf-template] .fm-cat-chips button { background: var(--fm-surface-2); font-weight: 500; }
/* Tiles with images (6928-9037). */
[data-sf-template] .fm-tiles ul { display: flex; gap: 16px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
[data-sf-template] .fm-tiles button { display: grid; justify-items: center; gap: 6px; width: 64px; border: 0; background: none; padding: 0;
  font-size: var(--fm-text-xs); color: var(--fm-ink); text-align: center; }
[data-sf-template] .fm-tile-image { width: 64px; height: 64px; border-radius: var(--fm-radius-l); overflow: hidden;
  outline: 2px solid transparent; outline-offset: 2px; }
[data-sf-template] .fm-tile-image img { width: 100%; height: 100%; object-fit: cover; }
[data-sf-template] .fm-tiles button[aria-current='true'] .fm-tile-image { outline-color: var(--fm-brand); }
[data-sf-template] .fm-tiles button[aria-current='true'] { color: var(--fm-brand); font-weight: 500; }
/* Search (new screen design in the Figma input style). */
[data-sf-template] .fm-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border-radius: var(--fm-radius);
  background: var(--fm-surface-2); color: var(--fm-muted); min-width: 0; }
[data-sf-template] .fm-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fm-ink); outline: none;
  font-size: var(--fm-text-s); }
[data-sf-template] .fm-search input::placeholder { color: var(--fm-muted); }
[data-sf-template] .fm-search input::-webkit-search-cancel-button { display: none; }
[data-sf-template] .fm-search:has(input:focus) { box-shadow: inset 0 0 0 1.5px var(--fm-brand); }
[data-sf-template] .fm-search button { border: 0; background: none; padding: 4px; color: var(--fm-muted); }
@media (max-width: 1180px) and (min-width: 900px) {
  [data-sf-template] .fm-address { width: 200px; }
  [data-sf-template] .fm-segment button { padding: 6px 8px; }
}
@media (max-width: 899px) {
  [data-sf-template] .fm-toplinks, [data-sf-template] .fm-header-actions { display: none; }
  [data-sf-template] .fm-header-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 0 16px; }
  [data-sf-template] .fm-brand { margin: 0 auto; }
  [data-sf-template] .fm-header-controls { flex-direction: column; align-items: stretch; }
  [data-sf-template] .fm-header-controls .fm-segment button { min-height: 32px; }
  [data-sf-template] .fm-address { width: auto; }
  [data-sf-template] .fm-address-notice { display: flex; }
  /* Owner remark 06.10: after a receipt is chosen the header has no divider (the hint is not shown either). */
  [data-sf-template] .fm-header:not(:has(.fm-address .fm-placeholder)) { border-bottom-color: transparent; }
}

/* Product surface: 6339-16148 / 6339-16155 (page), 6433-36499 (modal), 6433-36506 (sheet). */
[data-sf-template] .fm-product-body { display: grid; gap: 20px; }
[data-sf-template] .fm-info { display: grid; gap: 8px; }
[data-sf-template] .fm-product-title { font-size: var(--fm-text-xxl); font-weight: 500; line-height: 1.15; color: var(--fm-ink);
  margin-top: 4px !important; }
[data-sf-template] .fm-product-meta { color: var(--fm-muted); font-size: var(--fm-text-xs); }
[data-sf-template] .fm-product-text { color: var(--fm-ink); font-size: var(--fm-text-s); line-height: 1.45; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-sf-template] .fm-product-text.fm-open { display: block; }
[data-sf-template] .fm-more { display: inline-flex; align-items: center; gap: 4px; width: max-content; border: 0; background: none;
  padding: 0; font-size: var(--fm-text-xs); font-weight: 500; color: var(--fm-ink-strong); }
[data-sf-template] .fm-more[aria-expanded='true'] .fm-icon { transform: rotate(180deg); }
[data-sf-template] .fm-segments { display: grid; gap: 4px; }
[data-sf-template] .fm-option-segment button { padding: 8px 12px; font-size: var(--fm-text-s); }
[data-sf-template] .fm-group { border: 0; margin: 0; padding: 0; min-width: 0; }
[data-sf-template] .fm-group-head { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 0; margin-bottom: 8px; }
[data-sf-template] .fm-group-head span { flex: 1 1 auto; font-size: var(--fm-text-m); font-weight: 500; color: var(--fm-ink-strong); }
[data-sf-template] .fm-group-head small { font-size: var(--fm-text-s); color: var(--fm-muted); white-space: nowrap; }
[data-sf-template] .fm-group-head:has(.fm-group-missing) { flex-wrap: wrap; }
[data-sf-template] .fm-group-missing { font-size: var(--fm-text-s); font-style: normal; color: var(--fm-red-600); white-space: nowrap; }
[data-sf-template] .fm-group ul { display: grid; gap: 4px; }
[data-sf-template] .fm-option { display: flex; align-items: center; gap: 12px; min-height: 48px; }
[data-sf-template] .fm-option > label { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
[data-sf-template] .fm-option > label.fm-disabled { cursor: not-allowed; opacity: .5; }
[data-sf-template] .fm-option-thumb { width: 40px; height: 40px; flex: none; border-radius: var(--fm-radius); background:
  radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 19%), var(--fm-surface-3); }
[data-sf-template] .fm-option-text { flex: 1; display: grid; min-width: 0; }
[data-sf-template] .fm-option-text span { font-size: var(--fm-text-s); color: var(--fm-ink-strong); }
[data-sf-template] .fm-option-text small { font-size: var(--fm-text-s); color: var(--fm-muted); }
[data-sf-template] .fm-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
[data-sf-template] .fm-check { display: grid; place-items: center; width: 28px; height: 28px; flex: none; color: transparent;
  border-radius: var(--fm-radius-s); background: var(--fm-surface-2); border: 1px solid var(--fm-surface-3); }
[data-sf-template] .fm-group-radio .fm-check { border-radius: 50%; }
[data-sf-template] .fm-option input:checked + .fm-check { background: var(--fm-brand); border-color: var(--fm-brand); color: #fff; }
[data-sf-template] .fm-option input:focus-visible + .fm-check { outline: 2px solid var(--fm-brand); outline-offset: 2px; }
[data-sf-template] .fm-price-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px;
  border-top: 2px solid var(--fm-line); background: var(--fm-surface); }
[data-sf-template] .fm-price-big { display: grid; font-size: var(--fm-text-xl); font-weight: 500; color: var(--fm-ink-strong); }
[data-sf-template] .fm-price-big small { font-size: 11px; font-weight: 400; color: var(--fm-muted); }
[data-sf-template] .fm-price-bar .fm-button { min-width: 140px; }
/* Breadcrumbs (6339-16151). */
[data-sf-template] .fm-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 !important; font-size: var(--fm-text-xs); }
[data-sf-template] .fm-crumbs li { display: flex; align-items: center; gap: 6px; color: var(--fm-muted); }
[data-sf-template] .fm-crumbs li + li::before { content: '·'; }
[data-sf-template] .fm-crumbs .fm-linkish { color: var(--fm-ink-strong); font-weight: 500; }
/* Overlay: modal on wide screens, bottom sheet below 900 px. Same markup, CSS only. The overlay is a contained box
   that never scrolls itself (the box fits the viewport), so wheel, touch and keys do not scroll the page behind it
   (no script lock of the page). */
[data-sf-template] .fm-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  background: var(--fm-overlay); overflow: hidden; overscroll-behavior: contain; }
[data-sf-template] .fm-overlay-box { position: relative; width: min(924px, calc(100vw - 160px));
  max-height: min(640px, calc(100vh - 48px));
  display: flex; border-radius: 24px; background: var(--fm-surface); box-shadow: var(--fm-shadow-modal); }
[data-sf-template] .fm-overlay-close { position: absolute; top: 0; right: -56px; width: 48px; height: 48px; display: grid;
  place-items: center;
  border: 0; border-radius: var(--fm-radius); background: var(--fm-surface); color: var(--fm-ink); }
[data-sf-template] .fm-grabber { display: none; }
[data-sf-template] .st-nutrition { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; }
[data-sf-template] .st-nutrition dt { color: var(--fm-text-secondary); font-size: 13px; }
[data-sf-template] .st-nutrition dd { margin: 4px 0 0; font-weight: 600; }
/* One-of group with many options (`choice.tsx`, sfv2-5-00148): the field and its list below it in the window. */
[data-sf-template] .fm-choice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
[data-sf-template] .fm-choice-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
[data-sf-template] .fm-choice-title strong { font-size: var(--fm-text-m); font-weight: 500; color: var(--fm-ink-strong); }
[data-sf-template] .fm-choice-field { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px 8px 16px; border: 1px solid var(--fm-surface-3); border-radius: var(--fm-radius);
  background: var(--fm-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
[data-sf-template] .fm-choice-field[aria-expanded='true'] { border-color: var(--fm-brand); }
[data-sf-template] .fm-choice-field[aria-invalid='true'] { border-color: var(--fm-red-600); }
[data-sf-template] .fm-choice-field .fm-icon { flex: none; color: var(--fm-muted); transition: transform .15s ease; }
[data-sf-template] .fm-choice-field[aria-expanded='true'] .fm-icon { transform: rotate(180deg); }
[data-sf-template] .fm-choice-value { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
[data-sf-template] .fm-choice-value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fm-ink-strong); }
[data-sf-template] .fm-choice-value small, [data-sf-template] .fm-choice-list small { flex: none; font-size: var(--fm-text-s); color: var(--fm-muted); }
[data-sf-template] .fm-choice-empty { color: var(--fm-muted); }
[data-sf-template] .fm-group .fm-choice-list { display: grid; gap: 0; margin: 0; padding: 6px; list-style: none;
  border-radius: var(--fm-radius); background: var(--fm-surface); box-shadow: var(--fm-shadow-2); }
[data-sf-template] .fm-choice-list li { min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center;
  gap: 12px; padding: 8px 10px; border-radius: var(--fm-radius-s); font-size: var(--fm-text-s); color: var(--fm-ink-strong);
  cursor: pointer; }
[data-sf-template] .fm-choice-list li:hover, [data-sf-template] .fm-choice-list li:focus-visible { background: var(--fm-surface-2); }
[data-sf-template] .fm-choice-list li:focus-visible { outline: 2px solid var(--fm-brand); outline-offset: -2px; }
[data-sf-template] .fm-choice-list li[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
/* The mark of the chosen row is the radio of the window's own rows (`.fm-group-radio .fm-check`). */
[data-sf-template] .fm-choice-radio { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--fm-surface-2);
  border: 1px solid var(--fm-surface-3); }
[data-sf-template] .fm-choice-list li[aria-selected='true'] .fm-choice-radio { border-color: var(--fm-brand); background: var(--fm-brand); }
[data-sf-template] .fm-choice-list li[aria-selected='true'] .fm-choice-radio::after { content: ''; position: absolute; left: 9px; top: 5px;
  width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 899px) {
  [data-sf-template] .fm-product-title { font-size: var(--fm-text-xl); }
  [data-sf-template] .fm-overlay { place-items: end stretch; padding: 0; }
  [data-sf-template] .fm-overlay-box { width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; flex-direction: column; }
  [data-sf-template] .fm-overlay-close { top: 12px; right: 12px; width: 40px; height: 40px; z-index: 3; background: rgb(255 255 255 / 92%);
    box-shadow: var(--fm-shadow-1); }
  [data-sf-template] .fm-grabber { display: block; position: absolute; top: 6px; left: 50%; z-index: 3; width: 36px; height: 4px;
    border-radius: 2px; background: var(--fm-surface-3); transform: translateX(-50%); }
  [data-sf-template] .fm-price-bar { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  [data-sf-template] .fm-price-bar .fm-button { flex: 1; max-width: 200px; }
}

/* Group 4 visuals of Figma Master (12.2). Banners: MainBanner 4270-17854 (wide, 1272×500, radius 16) and
   banner 4808-32348 (narrow, 358×150). Dialogs: ModalDesktop Mini 6994-20412 (340 px, radius 24) and ModalMobile
   7403-74194 (bottom sheet, two stacked buttons), «4. Уведомления и сообщения» 6015-7627 / 6011-16621. Pages,
   promotions, 18+, cookies and the site state have no Figma frame: fm tokens only. Width by CSS (U90). */
[data-sf-template] .fm-banners { position: relative; margin: 24px 0 8px; }
[data-sf-template] .fm-banner-row { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--fm-radius-l); }
[data-sf-template] .fm-banner-row::-webkit-scrollbar { display: none; }
[data-sf-template] .fm-banner { scroll-snap-align: start; min-width: 0; }
[data-sf-template] .fm-banner > a, [data-sf-template] .fm-banner > div { position: relative; display: block; aspect-ratio: 1272 / 500; overflow: hidden;
  border-radius: var(--fm-radius-l); background: var(--fm-surface-2); color: var(--fm-ink-heavy);
  text-decoration: none; }
[data-sf-template] .fm-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-sf-template] .fm-banner-text { position: absolute; inset: auto 0 0; display: grid; gap: 4px; padding: 32px 40px;
  font-size: var(--fm-text-l); }
[data-sf-template] .fm-banner-text b { font-size: var(--fm-text-xxl); font-weight: 600; line-height: 1.15; }
[data-sf-template] .fm-banner[data-image='true'] .fm-banner-text { color: #fff;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 55%)); }
[data-sf-template] .fm-banner[data-width='narrow'] { display: none; }
[data-sf-template] .fm-banner-nav { position: absolute; top: 50%; left: -20px; right: -20px; display: flex;
  justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
[data-sf-template] .fm-banner-nav button { pointer-events: auto; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: var(--fm-pill); background: var(--fm-surface); color: var(--fm-ink);
  box-shadow: var(--fm-shadow-2); }
/* Site dialogs: centred card on wide screens, bottom sheet below 900 px. */
[data-sf-template] .fm-site-layer { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 24px;
  background: var(--fm-overlay); overflow: hidden; overscroll-behavior: contain; }
[data-sf-template] .fm-site-dialog { position: relative; display: grid; gap: 12px; width: min(340px, calc(100vw - 48px));
  max-height: calc(100vh - 48px); overflow: auto; padding: 20px; border-radius: calc(24px * var(--fm-round));
  background: var(--fm-surface); box-shadow: var(--fm-shadow-modal); text-align: center; }
/* 18+ as legacy warning-18: the page behind is blurred. */
[data-sf-template] .fm-site-layer:has(> .fm-site-age) { backdrop-filter: blur(8px); }
[data-sf-template] .fm-site-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid;
  place-items: center; border: 0; border-radius: var(--fm-radius); background: rgb(255 255 255 / 92%);
  color: var(--fm-ink); }
[data-sf-template] .fm-site-grabber { display: none; }
[data-sf-template] .fm-site-media { width: 100%; height: 160px; object-fit: cover; border-radius: var(--fm-radius-l); }
[data-sf-template] .fm-site-title { font-size: var(--fm-text-l); font-weight: 600; line-height: 1.25; color: var(--fm-ink-heavy); }
[data-sf-template] .fm-site-text { color: var(--fm-muted); font-size: var(--fm-text-s); }
[data-sf-template] .fm-site-actions { display: grid; gap: 8px; margin-top: 8px; }
[data-sf-template] .fm-site-actions .fm-button { width: 100%; text-decoration: none; }
[data-sf-template] .fm-site-popup:not(:has(.fm-site-media)) .fm-site-title { padding-right: 32px; text-align: left; }
[data-sf-template] .fm-site-popup:not(:has(.fm-site-media)) .fm-site-text { text-align: left; }
[data-sf-template] .fm-site-badge { justify-self: center; width: 72px; height: 72px; display: grid; place-items: center;
  border-radius: 50%; background: var(--fm-brand-10); color: var(--fm-brand); font-size: var(--fm-text-xl);
  font-weight: 600; }
/* Cookie consent: a card at the bottom left (desktop) or across the bottom (mobile); never modal. */
[data-sf-template] .fm-cookies { position: fixed; z-index: 45; left: 24px; bottom: 24px; display: grid; gap: 8px;
  width: min(420px, calc(100vw - 48px)); padding: 20px; border-radius: var(--fm-radius-l);
  background: var(--fm-surface); box-shadow: var(--fm-shadow-modal); }
[data-sf-template] .fm-cookies-title { font-size: var(--fm-text-m); font-weight: 600; color: var(--fm-ink-heavy); }
[data-sf-template] .fm-cookies-text { color: var(--fm-ink); font-size: var(--fm-text-s); }
[data-sf-template] .fm-cookies-text a { margin-left: 4px; color: var(--fm-brand); }
[data-sf-template] .fm-cookies-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
[data-sf-template] .fm-cookies-actions .fm-button { min-height: 40px; font-size: var(--fm-text-s); }
[data-sf-template] .fm-cookies-reject { font-size: var(--fm-text-s); text-decoration: underline; text-underline-offset: 3px; }
/* Site state: a strip under the header (as the address notice) and the maintenance screen. */
[data-sf-template] .fm-site-notice { display: flex; align-items: center; gap: 8px;
  width: min(calc(100% - 2 * var(--fm-gutter)), var(--fm-page));
  margin: 12px auto 0; padding: 12px 16px; border-radius: var(--fm-radius); background: var(--fm-warning-bg);
  color: var(--fm-warning-ink); font-size: var(--fm-text-s); }
[data-sf-template] .fm-site-down { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 80vh;
  padding: 48px 20px; text-align: center; }
[data-sf-template] .fm-site-down h1 { font-size: var(--fm-text-xxl); font-weight: 600; color: var(--fm-ink-heavy); }
[data-sf-template] .fm-site-down p { max-width: 420px; color: var(--fm-muted); font-size: var(--fm-text-m); }
/* Pages of content: a readable column; legal pages read as a document. */
[data-sf-template] .fm-page { max-width: 760px; padding-bottom: 32px; }
[data-sf-template] .fm-page-lead { margin: -8px 0 24px !important; color: var(--fm-muted); font-size: var(--fm-text-m); }
[data-sf-template] .fm-page-body { display: grid; gap: 16px; color: var(--fm-ink); font-size: var(--fm-text-m); line-height: 1.55; }
[data-sf-template] .fm-page-body h2 { margin-top: 12px; font-size: var(--fm-text-xl); font-weight: 600; color: var(--fm-ink-heavy); }
[data-sf-template] .fm-page-body h3 { font-size: var(--fm-text-l); font-weight: 600; color: var(--fm-ink-heavy); }
[data-sf-template] .fm-page-html { display: grid; gap: 12px; }
[data-sf-template] .fm-page-html ul, [data-sf-template] .fm-page-html ol { display: grid; gap: 6px; padding-left: 24px; }
[data-sf-template] .fm-page-html ul { list-style: disc; }
[data-sf-template] .fm-page-html ol { list-style: decimal; }
[data-sf-template] .fm-page-html a { color: var(--fm-brand); }
[data-sf-template] .fm-page-html table { width: 100%; border-collapse: collapse; font-size: var(--fm-text-s); }
[data-sf-template] .fm-page-html caption { padding-bottom: 8px; text-align: left; color: var(--fm-muted); }
[data-sf-template] .fm-page-html th, [data-sf-template] .fm-page-html td { padding: 10px 12px; border-bottom: 1px solid var(--fm-line); text-align: left; }
[data-sf-template] .fm-page-html th { background: var(--fm-surface-2); font-weight: 500; }
[data-sf-template] .fm-page-html img { border-radius: var(--fm-radius-l); }
[data-sf-template] .fm-page-html figcaption { margin-top: 8px; color: var(--fm-muted); font-size: var(--fm-text-s); }
[data-sf-template] .fm-page-html iframe { width: 100%; max-width: 100%; border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius); }
[data-sf-template] .fm-page-fallback { padding: 12px 16px; border-radius: var(--fm-radius); background: var(--fm-surface-2);
  color: var(--fm-muted); font-size: var(--fm-text-s); }
[data-sf-template] .fm-page-legal .fm-page-body { font-size: var(--fm-text-s); }
[data-sf-template] .fm-page-legal .fm-page-body h2 { font-size: var(--fm-text-l); }
[data-sf-template] .fm-page-legal .fm-page-body h3 { font-size: var(--fm-text-m); }
/* Promotions: cards in the MainBanner proportion. */
[data-sf-template] .fm-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
[data-sf-template] .fm-promo-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--fm-radius-l);
  background: var(--fm-surface); box-shadow: var(--fm-shadow-2); }
[data-sf-template] .fm-promo-card img, [data-sf-template] .fm-promo-blank { width: 100%; aspect-ratio: 1272 / 500; object-fit: cover; }
[data-sf-template] .fm-promo-blank { display: block; background: linear-gradient(135deg, var(--fm-brand-20), var(--fm-surface-2)); }
[data-sf-template] .fm-promo-copy { display: grid; align-content: start; gap: 8px; padding: 16px 20px 20px; }
[data-sf-template] .fm-promo-copy h2 { font-size: var(--fm-text-l); font-weight: 600; color: var(--fm-ink-heavy); }
[data-sf-template] .fm-promo-copy p { color: var(--fm-muted); }
[data-sf-template] .fm-promo-copy .fm-button { justify-self: start; min-height: 40px; margin-top: 4px; text-decoration: none; }
[data-sf-template] .d-site-hint { color: var(--fm-muted); }
[data-sf-template] .d-site-hint a { color: var(--fm-brand); }
@media (max-width: 899px) {
  [data-sf-template] .fm-banners { margin: 16px 0 4px; }
  [data-sf-template] .fm-banner-row { grid-auto-columns: 92%; gap: 8px; }
  [data-sf-template] .fm-banner > a, [data-sf-template] .fm-banner > div { aspect-ratio: 358 / 150; }
  [data-sf-template] .fm-banner[data-width='wide'] { display: none; }
  [data-sf-template] .fm-banner[data-width='narrow'] { display: block; }
  [data-sf-template] .fm-banner-text { padding: 12px 16px; font-size: var(--fm-text-xs); }
  [data-sf-template] .fm-banner-text b { font-size: var(--fm-text-m); }
  [data-sf-template] .fm-banner-nav { display: none; }
  [data-sf-template] .fm-site-layer { place-items: end stretch; padding: 0; }
  [data-sf-template] .fm-site-dialog { width: 100%; max-height: 92vh; padding: 28px 20px calc(20px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0; }
  [data-sf-template] .fm-site-grabber { display: block; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px;
    border-radius: 2px; background: var(--fm-surface-3); transform: translateX(-50%); }
  [data-sf-template] .fm-site-media { height: 180px; }
  [data-sf-template] .fm-cookies { left: 12px; right: 12px; bottom: 12px; width: auto; }
  [data-sf-template] .fm-site-notice { margin: 12px var(--fm-gutter) 0; width: auto; }
  [data-sf-template] .fm-page-body { font-size: var(--fm-text-s); }
  /* A wide table of the restaurant text scrolls inside the page, the page itself never scrolls sideways. */
  [data-sf-template] .fm-page-html table { display: block; max-width: 100%; overflow-x: auto; }
  [data-sf-template] .fm-promo-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Smartfood Master · Light. Source: atlas «20 - Дизайн-токены · Цвета» (01. Base palette),
   «21 - … Типографика и размеры», «25 - Токен-мост» (radius, shadow). Portable: no lab shell, no SDK. */
[data-sf-template] [data-fm] {
  /* Palette/Brand */
  --fm-brand: #6156e7;
  --fm-brand-hover: #5248d9; /* authored hover: brand-600 darkened, no Figma token */
  --fm-brand-10: rgb(97 86 231 / 10%);
  --fm-brand-20: rgb(97 86 231 / 20%);
  --fm-on-brand: #fff;
  /* Palette/GreyBlue */
  --fm-surface: #fff;
  --fm-surface-2: #f0f4f6;
  --fm-surface-3: #e5ebef;
  --fm-line: #ebeff1;
  --fm-muted: #7e8a95;
  --fm-ink: #4a465c;
  --fm-ink-strong: #3b384a;
  --fm-ink-heavy: #2a2835;
  /* Palette/Green, Orange, Red, Gold */
  --fm-green: #1b9a54;
  --fm-green-soft: #d4e8d5;
  --fm-orange: #ff7c3a;
  --fm-red: #fd3d01;
  --fm-red-600: #db2c1d;
  --fm-gold: #c5934b;
  /* Notice «От адреса зависит наличие позиций» (4170-16710): sampled from the render */
  --fm-warning-bg: #fdf1dc;
  --fm-warning-ink: #b5730e;
  --fm-overlay: rgb(0 0 0 / 40%); /* Colors/Opacity/black-40 */
  --fm-popover: #1f1f1f; /* control/popover/bgInv */
  /* Radius: base module 4px; project setting multiplies it (group 4 shows two presets) */
  --fm-round: 1;
  --fm-radius-s: calc(8px * var(--fm-round));
  --fm-radius: calc(12px * var(--fm-round));
  --fm-radius-l: calc(16px * var(--fm-round));
  --fm-radius-xl: calc(20px * var(--fm-round));
  --fm-pill: calc(999px * var(--fm-round));
  /* shadow/Shadow 1 and Shadow 2 */
  --fm-shadow-1: 0 2px 8px rgb(74 80 94 / 5%);
  --fm-shadow-2: 0 8px 24px rgb(60 83 135 / 9%);
  --fm-shadow-modal: 6px 13px 42px rgb(0 0 0 / 10%);
  /* Typography: Golos Text 400/500/600, 12–32 */
  --fm-font: 'Golos Text', system-ui, sans-serif;
  --fm-text-xs: 12px;
  --fm-text-s: 14px;
  --fm-text-m: 16px;
  --fm-text-l: 20px;
  --fm-text-xl: 24px;
  --fm-text-xxl: 32px;
  /* Layout */
  --fm-page: 1272px;
  --fm-gutter: 47px;
}
@media (max-width: 800px) {
  [data-sf-template] [data-fm] { --fm-gutter: 20px; }
}

/* Address popup (legacy structure, Figma 4262-7776 / 4262-8057 / 4659-42287 / 4260-7314): the form and the map of the
   venues. As in legacy test80: on desktop the map fills the right half of a 900×600 window, below 900 px the window
   takes the screen with the map above the form. The fields scroll; the submit button stays at the bottom in view
   (owner remarks 06.10, 19.10). */
[data-sf-template] .fm-overlay-box:has(.d-address) { width: min(480px, calc(100vw - 32px)); max-height: min(660px, calc(100vh - 48px)); }
[data-sf-template] .fm-overlay-box:has(.d-address > .d-map) { width: min(900px, calc(100vw - 160px)); height: min(600px, calc(100vh - 48px));
  max-height: none; }
[data-sf-template] .d-address { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; min-height: 0;
  overflow: hidden; border-radius: inherit; }
[data-sf-template] .d-address:has(> .d-map) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
[data-sf-template] .d-address-form { display: flex; flex-direction: column; min-height: 0; padding: 28px 28px 24px; }
[data-sf-template] .d-address-fields { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: auto;
  overscroll-behavior: contain; margin: -4px; padding: 4px; }
[data-sf-template] .d-address-head h2 { font-size: var(--fm-text-l); font-weight: 600; color: var(--fm-ink); }
[data-sf-template] .d-address-head p { font-size: var(--fm-text-s); color: var(--fm-muted); }
[data-sf-template] .d-address .d-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-sf-template] .d-address-submit { display: grid; gap: 8px; padding-top: 16px; }
[data-sf-template] .d-combo { position: relative; display: grid; }
/* The map provider's panes have their own z-index; the close button stays over them. The SDK map sets its own height,
   the window gives it the whole column. */
[data-sf-template] .d-map { position: relative; isolation: isolate; min-height: 0; overflow: hidden; background: var(--fm-surface-2); }
[data-sf-template] .d-address > .d-map > div:first-child { height: 100% !important; }
[data-sf-template] .d-map > p[role='status'] { position: absolute; inset: auto 16px 16px; }
[data-sf-template] .d-suggest { position: absolute; z-index: 3; top: calc(100% + 4px); left: 0; right: 0; display: grid;
  padding: 6px !important; border-radius: var(--fm-radius); background: var(--fm-surface);
  box-shadow: var(--fm-shadow-modal); border: 1px solid var(--fm-line); }
[data-sf-template] .d-suggest li { display: grid; padding: 8px 10px; border-radius: var(--fm-radius-s); cursor: pointer; }
[data-sf-template] .d-suggest li:hover, [data-sf-template] .d-suggest li[aria-selected='true'] { background: var(--fm-surface-2); }
[data-sf-template] .d-suggest small { font-size: var(--fm-text-xs); color: var(--fm-muted); }
@media (max-width: 899px) {
  [data-sf-template] .fm-overlay-box:has(.d-address) { width: 100%; max-height: 96vh; }
  [data-sf-template] .fm-overlay-box:has(.d-address > .d-map) { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  [data-sf-template] .fm-overlay-box:has(.d-address > .d-map) .fm-grabber { display: none; }
  [data-sf-template] .d-address, [data-sf-template] .d-address:has(> .d-map) { display: flex; flex: 1; flex-direction: column; }
  [data-sf-template] .d-address > .d-map { order: -1; flex: 0 0 38%; }
  /* While the guest types the street the keyboard covers the lower half: the map steps aside for the suggestions. */
  [data-sf-template] .d-address:has(.d-combo input:focus) > .d-map { display: none; }
  [data-sf-template] .d-address:has(.d-combo input:focus) > .d-address-form { padding-top: 64px; }
  [data-sf-template] .d-address-form { flex: 1; padding: 20px 20px calc(16px + env(safe-area-inset-bottom)); }
}
/* Payment mode `redirect` (11.3): the demo page of the provider covers the whole window — the guest has left the
   shop for the bank; the close button returns without an answer. */
[data-sf-template] .fm-overlay:has(.d-payredirect) { padding: 0; background: var(--fm-surface-2); }
[data-sf-template] .fm-overlay-box:has(.d-payredirect) { width: 100vw; height: 100vh; max-height: none; border-radius: 0;
  display: grid; place-items: center; box-shadow: none; background: var(--fm-surface-2); }
[data-sf-template] .d-payredirect { max-width: 480px; padding: 40px 24px; border-radius: var(--fm-radius-xl);
  background: var(--fm-surface); box-shadow: var(--fm-shadow-2); }
[data-sf-template] .fm-overlay-box:has(.d-payredirect) .fm-overlay-close { top: 16px; right: 16px; }
[data-sf-template] .fm-overlay-box:has(.d-payredirect) .fm-grabber { display: none; }

/* D controls after the owner remark 06.10: no browser lists, one tidy focus mark. Overrides stay in mlp-d;
   figma-master is unchanged. Fields: the Focused state of text-field 6962-8812 / 4659-42287 — a 2px border on the
   grey field, no outline (brand colour as asked by the curator; the Figma render uses a GreyBlue border).
   Keyboard ring: 2px brand, only on buttons, links, cards and choice marks, only for :focus-visible. */
[data-sf-template] .d-root :focus-visible { outline: 2px solid var(--fm-brand); outline-offset: 2px; }
[data-sf-template] .d-root :is(input, textarea, select):focus-visible { outline: none; }
[data-sf-template] .d-root :is(.fm-search, .fm-promo) { border: 2px solid transparent; }
[data-sf-template] .d-root :is(.fm-search, .fm-promo):focus-within { box-shadow: none; border-color: var(--fm-brand); }
[data-sf-template] .d-root .fm-card:has(.fm-card-open:focus-visible) { outline-width: 2px; }
[data-sf-template] .d-root .fm-option input:focus-visible + .fm-check { outline-width: 2px; }
[data-sf-template] .d-root .fm-switch input:focus-visible + span { outline-width: 2px; }
/* City list in place (Header-City 4272-23634). */
[data-sf-template] .d-city { position: relative; display: grid; }
[data-sf-template] .d-row-chevron.d-open-down { transform: rotate(180deg); }
[data-sf-template] .d-city-list { display: grid; margin-top: 6px !important; padding: 6px !important; border-radius: var(--fm-radius);
  background: var(--fm-surface); box-shadow: var(--fm-shadow-2); border: 1px solid var(--fm-line); }
[data-sf-template] .d-city-list:focus { outline: none; }
[data-sf-template] .d-city-list:focus-visible { box-shadow: var(--fm-shadow-2), 0 0 0 2px var(--fm-brand); }
[data-sf-template] .d-city-list li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px;
  border-radius: var(--fm-radius-s); cursor: pointer; }
[data-sf-template] .d-city-list li.d-active { background: var(--fm-surface-2); }
[data-sf-template] .d-city-list li[aria-selected='true'] .d-radio { border: 6px solid var(--fm-brand); }
[data-sf-template] .d-city-list li[aria-disabled='true'] { cursor: not-allowed; opacity: .5; }
/* Slot tiles. */
[data-sf-template] .d-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; min-width: 0;
  margin: 0; padding: 0; border: 0; }
[data-sf-template] .d-slot { position: relative; display: grid; gap: 2px; min-height: 60px; padding: 10px 12px; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--fm-radius); background: var(--fm-surface-2); }
[data-sf-template] .d-slot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
[data-sf-template] .d-slot-label { font-size: var(--fm-text-s); font-weight: 500; color: var(--fm-ink-strong); }
[data-sf-template] .d-slot small { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .d-slot:has(input:checked) { border-color: var(--fm-brand); background: var(--fm-brand-10); }
[data-sf-template] .d-slot:has(input:focus-visible) { outline: 2px solid var(--fm-brand); outline-offset: 2px; }
[data-sf-template] .d-slot.fm-disabled { cursor: not-allowed; opacity: .5; }
/* Header: receiving row with the method icon; mobile: the floating bottom button is the only way into the order. */
[data-sf-template] .d-receipt-button > .fm-icon { color: var(--fm-ink); }
[data-sf-template] .d-sheet-bar .d-sheet-arrow { display: grid; margin-left: 4px; }
[data-sf-template] .d-sheet-bar b:not(:empty) + .d-sheet-arrow { margin-left: 8px; }
[data-sf-template] .d-sheet-bar > span:first-of-type { white-space: nowrap; }
[data-sf-template] .d-sheet-bar b { margin-left: auto; }
[data-sf-template] .d-sheet-bar:not(:has(b)) .d-sheet-arrow { margin-left: auto; }
/* Look of D (lane 10): the shared V2-a rule `.fm-cart-pill .fm-icon:last-child` (lane 06) does not move the arrow. */
[data-sf-template] .d-sheet-bar .d-sheet-arrow .fm-icon { margin-left: 0; }
@media (max-width: 899px) {
  [data-sf-template] .d-root .d-receipt-button { width: 100%; }
  [data-sf-template] .d-root[data-receipt='set'] .fm-header { border-bottom: 0; }
}
@media (max-width: 899px) {
  /* The floating button never covers the last card: room below the page content while it is shown. */
  [data-sf-template] .d-root[data-panel='shown'] .fm-main { padding-bottom: 96px; }
}

/* Macro D: catalog and the full-height side panel on one page. Layout only; blocks keep figma-master styles.
   Category row on top (4190-10675) by default, rail on the left with ?nav=left (6913-8000). */
/* The fixed panel covers the right edge. Opening it never changes the catalog's width or row count. */
[data-sf-template] .d-root { --d-panel: 400px; }
[data-sf-template] .d-bar { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 96%); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fm-line); }
[data-sf-template] .d-bar-row { display: flex; align-items: center; gap: 16px; min-height: 68px; }
[data-sf-template] .d-bar-row .fm-cat-row { flex: 1; min-width: 0; }
[data-sf-template] .d-bar-row .fm-search { width: 220px; flex: none; }
[data-sf-template] .d-bar-row .fm-cart-button { min-height: 48px; padding: 0 12px 0 16px; }
[data-sf-template] .d-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 8px; }
[data-sf-template] .d-root[data-nav='left'] .d-layout { grid-template-columns: 220px minmax(0, 1fr); padding-top: 24px; }
[data-sf-template] .d-root[data-panel='hidden'] .d-panel { visibility: hidden; transform: translateX(100%); opacity: 0;
  pointer-events: none; }
[data-sf-template] .d-catalog { min-width: 0; }
[data-sf-template] .d-catalog .fm-page-title { margin-top: 24px !important; }
[data-sf-template] .d-catalog .fm-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
[data-sf-template] .d-side { position: sticky; top: 16px; align-self: start; padding: 12px; border-radius: var(--fm-radius-l);
  border: 1px solid var(--fm-line); background: var(--fm-surface); }
[data-sf-template] .d-mobile-nav { display: none; }
/* An assigned catalog-aside keeps its space while the panel covers it. Hidden below the mobile threshold. */
[data-sf-template] .d-aside { min-width: 0; position: sticky; top: 84px; }
[data-sf-template] .d-layout:has(> .d-aside) { grid-template-columns: minmax(0, 1fr) 280px; }
[data-sf-template] .d-root[data-nav='left'] .d-layout:has(> .d-aside) { grid-template-columns: 220px minmax(0, 1fr) 280px; }
[data-sf-template] .d-root .fm-login { white-space: nowrap; }
@media (min-width: 1200px) {
  [data-sf-template] .d-root .d-catalog .fm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1180px) and (min-width: 900px) {
  [data-sf-template] .d-root { --d-panel: 360px; }
  [data-sf-template] .d-bar-row .fm-search { width: 160px; }
  [data-sf-template] .d-root[data-nav='left'] .d-layout { grid-template-columns: 180px minmax(0, 1fr); }
}
/* Product over the main page: modal 6433-36499, picture left, scrolling panel with fixed price bar right. */
[data-sf-template] .d-product { display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 0; overflow: hidden;
  border-radius: inherit; }
[data-sf-template] .d-product-media { display: grid; place-items: center; padding: 24px; border-right: 1px solid var(--fm-line); }
[data-sf-template] .d-product-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--fm-radius-xl); }
[data-sf-template] .d-product-panel { display: flex; flex-direction: column; min-height: 0; max-height: min(640px, calc(100vh - 48px)); }
[data-sf-template] .d-product-scroll { flex: 1; overflow: auto; padding: 28px 24px 20px; overscroll-behavior: contain; }
/* Best2Pay demo frame over the main page (ModalDesktop 6994-20412 frame, new content). */
[data-sf-template] .fm-overlay-box:has(.d-payframe) { width: min(480px, calc(100vw - 160px)); }
[data-sf-template] .d-payframe { display: grid; gap: 12px; width: 100%; padding: 32px; overflow: auto; }
[data-sf-template] .d-payframe-brand { font-size: var(--fm-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fm-muted); }
[data-sf-template] .d-payframe h2 { font-size: var(--fm-text-xl); font-weight: 600; color: var(--fm-ink); }
[data-sf-template] .d-payframe-sum { font-size: var(--fm-text-xxl); font-weight: 600; color: var(--fm-brand); }
[data-sf-template] .d-payframe-actions { display: grid; gap: 8px; margin-top: 8px; }
[data-sf-template] .fm-demo-actions a { background: #fff; color: #1f1f1f; border-radius: 8px; padding: 7px 12px; font-weight: 500;
  text-decoration: none; }
@media (max-width: 899px) {
  [data-sf-template] .d-bar, [data-sf-template] .d-side, [data-sf-template] .d-aside { display: none; }
  [data-sf-template] .d-root[data-nav] .d-layout:has(> .d-aside) { grid-template-columns: minmax(0, 1fr); }
  [data-sf-template] .d-root .d-layout, [data-sf-template] .d-root[data-nav='left'] .d-layout { grid-template-columns: minmax(0, 1fr); gap: 0;
    padding-top: 0; }
  [data-sf-template] .d-mobile-nav { display: grid; gap: 12px; padding-top: 4px; min-width: 0; }
  [data-sf-template] .d-mobile-nav > * { min-width: 0; }
  [data-sf-template] .d-mobile-nav .fm-address-notice { margin: 0; }
  [data-sf-template] .d-catalog .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-sf-template] .d-product { grid-template-columns: 1fr; display: flex; flex-direction: column; overflow: auto; }
  [data-sf-template] .d-product-media { padding: 0; border: 0; }
  [data-sf-template] .d-product-media img { height: min(300px, 36vh); aspect-ratio: auto; border-radius: 24px 24px 0 0; }
  [data-sf-template] .d-product-media img[src^='data:image/svg'] { object-fit: contain; background: #f5f5f4; }
  [data-sf-template] .d-product-panel { max-height: none; }
  [data-sf-template] .d-product-scroll { overflow: visible; padding: 20px; }
  [data-sf-template] .d-product-panel .fm-price-bar { position: sticky; bottom: 0; }
  [data-sf-template] .fm-overlay-box:has(.d-payframe) { width: 100%; }
  [data-sf-template] .d-payframe { padding: 32px 20px calc(24px + env(safe-area-inset-bottom)); }
}

/* D panel: full-height column with its own scroll and the pay button pinned at the bottom (references 02/03);
   below 900 px the same panel is a full-screen sheet. Figma tokens: GreyBlue surfaces, Brand, radius, shadow. */
[data-sf-template] .d-panel { display: flex; flex-direction: column; overflow: clip; background: var(--fm-surface-2);
  transition: transform .2s ease, opacity .2s ease, visibility .2s; }
@media (min-width: 900px) {
  /* Full window height from the very top; only the middle (blocks) scrolls, the total stays pinned. */
  [data-sf-template] .d-panel { position: fixed; z-index: 25; top: 0; right: 0; bottom: 0; width: var(--d-panel);
    border-left: 1px solid var(--fm-line); box-shadow: var(--fm-shadow-2); animation: d-panel-in .22s ease-out; }
}
[data-sf-template] .d-root[data-cart-panel='always'] .d-panel { animation: none; }
@media (prefers-reduced-motion: reduce) { [data-sf-template] .d-panel { animation: none; } [data-sf-template] .d-row-chevron { transition: none; } }
[data-sf-template] .d-panel-head { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 16px 12px 20px;
  background: var(--fm-surface); border-bottom: 1px solid var(--fm-line); }
[data-sf-template] .d-panel-head h2 { font-size: var(--fm-text-l); font-weight: 600; color: var(--fm-ink); }
[data-sf-template] .d-panel-head h2:focus { outline: none; }
[data-sf-template] .d-tag { padding: 2px 8px; border-radius: var(--fm-radius-s); background: var(--fm-brand-10); color: var(--fm-brand);
  font-size: var(--fm-text-xs); font-weight: 600; }
[data-sf-template] .d-panel-close { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0;
  border-radius: var(--fm-radius); background: var(--fm-surface-2); color: var(--fm-ink); }
[data-sf-template] .d-panel-close:hover { background: var(--fm-surface-3); }
[data-sf-template] .d-sheet-back { display: none; }
[data-sf-template] .d-panel-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 8px;
  align-content: start; padding: 8px; }
/* Blocks: white cards on the grey panel. */
[data-sf-template] .d-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px;
  border-radius: var(--fm-radius-l); background: var(--fm-surface); scroll-margin: 8px; }
[data-sf-template] .d-block:focus { outline: none; }
[data-sf-template] .d-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
[data-sf-template] .d-block-title { font-size: var(--fm-text-m); font-weight: 600; color: var(--fm-ink-strong); }
[data-sf-template] .d-segment button { display: grid; gap: 0; padding: 6px 10px; }
[data-sf-template] .d-segment small { font-size: 11px; font-weight: 400; color: var(--fm-muted); }
[data-sf-template] .d-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px;
  border: 0; border-radius: var(--fm-radius); background: var(--fm-surface-2); color: var(--fm-ink-strong);
  text-align: left; }
[data-sf-template] .d-row:hover { background: var(--fm-surface-3); }
[data-sf-template] .d-row > .fm-icon { color: var(--fm-brand); }
[data-sf-template] .d-row-text { flex: 1; display: grid; min-width: 0; }
[data-sf-template] .d-row-text small { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .d-row-text span { overflow: hidden; font-size: var(--fm-text-s); text-overflow: ellipsis; white-space: nowrap; }
[data-sf-template] .d-row-chevron { display: grid; color: var(--fm-muted); transition: transform .15s; }
[data-sf-template] .d-row-chevron.d-open { transform: rotate(90deg); }
[data-sf-template] .d-conditions { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .d-conditions b { color: var(--fm-green); font-weight: 500; }
[data-sf-template] .d-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
[data-sf-template] .d-field { display: grid; gap: 4px; min-width: 0; font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .d-field input, [data-sf-template] .d-field textarea { width: 100%; min-height: 44px; padding: 10px 12px;
  border: 2px solid transparent; border-radius: var(--fm-radius); background: var(--fm-surface-2);
  color: var(--fm-ink);
  font-size: var(--fm-text-m); }
[data-sf-template] .d-field textarea { min-height: 80px; resize: vertical; }
[data-sf-template] .d-field :is(input, textarea):focus { outline: none; border-color: var(--fm-brand); }
[data-sf-template] .d-field [aria-invalid='true'] { border-color: var(--fm-red-600); }
[data-sf-template] .d-flat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
[data-sf-template] .d-radios { min-width: 0; margin: 0; padding: 0; border: 0; }
[data-sf-template] .d-legend { margin-bottom: 4px; padding: 0; font-size: var(--fm-text-s); font-weight: 500;
  color: var(--fm-ink-strong); }
[data-sf-template] .d-radios ul { display: grid; }
[data-sf-template] .d-radio-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0;
  border-bottom: 1px solid var(--fm-line); cursor: pointer; }
[data-sf-template] .d-radios li:last-child .d-radio-row { border-bottom: 0; }
[data-sf-template] .d-radio-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
[data-sf-template] .d-radio { flex: none; width: 20px; height: 20px; border: 2px solid var(--fm-surface-3); border-radius: 50%;
  background: var(--fm-surface); }
[data-sf-template] .d-radio-row input:checked + .d-radio { border: 6px solid var(--fm-brand); }
[data-sf-template] .d-radio-row input:focus-visible + .d-radio { outline: 2px solid var(--fm-brand); outline-offset: 2px; }
[data-sf-template] .d-radio-row.fm-disabled, [data-sf-template] .d-radios:disabled .d-radio-row { cursor: not-allowed; opacity: .5; }
[data-sf-template] .d-radio-text { display: grid; min-width: 0; }
[data-sf-template] .d-radio-text span { font-size: var(--fm-text-s); color: var(--fm-ink-strong); }
[data-sf-template] .d-radio-text small { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .d-inline-state { display: grid; justify-items: start; gap: 8px; padding: 14px; border-radius: var(--fm-radius);
  background: var(--fm-surface-2); }
[data-sf-template] .d-inline-state p { display: grid; gap: 2px; }
[data-sf-template] .d-inline-state b { color: var(--fm-ink); font-weight: 600; }
[data-sf-template] .d-inline-state span { font-size: var(--fm-text-s); color: var(--fm-muted); }
[data-sf-template] .d-inline-state .fm-button { min-height: 40px; background: var(--fm-surface); }
[data-sf-template] .d-inline-empty { justify-items: center; padding: 24px 16px; text-align: center; }
[data-sf-template] .d-hint { font-size: var(--fm-text-xs); line-height: 1.4; color: var(--fm-muted); }
[data-sf-template] .d-consents { display: grid; gap: 8px; }
[data-sf-template] .d-consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fm-text-xs); line-height: 1.4; }
[data-sf-template] .d-link { font-size: var(--fm-text-s); font-weight: 500; color: var(--fm-brand); }
[data-sf-template] .d-link:disabled { color: var(--fm-muted); }
[data-sf-template] .d-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
[data-sf-template] .d-providers { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--fm-line); }
[data-sf-template] .d-providers > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
[data-sf-template] .d-providers .fm-button { min-height: 44px; padding: 0 8px; font-size: var(--fm-text-s); }
[data-sf-template] .d-providers .fm-button[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--fm-brand); }
[data-sf-template] .d-provider-confirm { display: grid; gap: 10px; padding: 14px; border-radius: var(--fm-radius);
  background: var(--fm-brand-10); }
[data-sf-template] .d-provider-confirm p { display: grid; gap: 2px; }
[data-sf-template] .d-provider-confirm b { color: var(--fm-ink); }
[data-sf-template] .d-provider-confirm span { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .d-signed { display: flex; align-items: center; gap: 12px; color: var(--fm-brand); }
[data-sf-template] .d-signed p { display: grid; flex: 1; color: var(--fm-ink-strong); }
[data-sf-template] .d-signed small { font-size: var(--fm-text-xs); color: var(--fm-muted); }
/* Cart lines in the narrow panel: the mobile line layout of 7284-69045. */
[data-sf-template] .d-panel .fm-line { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: 'img text remove'
  'img price count'; gap: 4px 12px; padding: 12px 0; }
[data-sf-template] .d-panel .fm-line img { grid-area: img; align-self: start; width: 64px; height: 48px; }
[data-sf-template] .d-panel .fm-line-text { grid-area: text; }
[data-sf-template] .d-panel .fm-line-price { grid-area: price; align-self: center; min-width: 0; text-align: left; }
[data-sf-template] .d-panel .fm-line .fm-counter { grid-area: count; justify-self: end; }
[data-sf-template] .d-panel .fm-line-remove { grid-area: remove; align-self: start; justify-self: end; }
[data-sf-template] .d-panel .fm-addons { margin-top: 4px; }
[data-sf-template] .d-panel .fm-addons ul { grid-template-columns: 1fr; gap: 4px; }
[data-sf-template] .d-panel .fm-addon { padding: 4px 0; border: 0; }
[data-sf-template] .d-panel .fm-strip { margin-top: 4px; }
[data-sf-template] .d-panel .fm-strip-title { font-size: var(--fm-text-m); }
[data-sf-template] .d-panel .fm-compact { width: 270px; }
/* Pinned total and pay button (6497-51748 summary card). */
[data-sf-template] .d-footer { display: grid; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--fm-line);
  background: var(--fm-surface); box-shadow: 0 -8px 24px rgb(60 83 135 / 6%); }
[data-sf-template] .d-totals { display: grid; gap: 4px; margin: 0; }
[data-sf-template] .d-totals div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fm-text-s); }
[data-sf-template] .d-totals dt { color: var(--fm-muted); }
[data-sf-template] .d-totals dd { margin: 0; color: var(--fm-ink-strong); white-space: nowrap; }
[data-sf-template] .d-pay-row { display: flex; align-items: center; gap: 12px; }
[data-sf-template] .d-pay-row p { display: grid; }
[data-sf-template] .d-pay-row small { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .d-pay-row b { font-size: var(--fm-text-xl); font-weight: 600; color: var(--fm-ink); white-space: nowrap; }
[data-sf-template] .d-pay-row .fm-button { flex: 1; padding: 0 12px; font-size: var(--fm-text-s); }
/* Order result in the panel (order page 6569-32383; dashed data box of 6497-51748). */
[data-sf-template] .d-order { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px;
  border-radius: var(--fm-radius-l); background: var(--fm-surface); }
[data-sf-template] .d-order:focus { outline: none; }
[data-sf-template] .d-order-head { display: flex; align-items: center; gap: 12px; }
[data-sf-template] .d-order-head p { display: grid; }
[data-sf-template] .d-order-head small { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .d-order-head b { font-size: var(--fm-text-l); font-weight: 600; color: var(--fm-ink); }
[data-sf-template] .d-order-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--fm-green-soft); color: var(--fm-green); }
[data-sf-template] .d-order-pending .d-order-icon { background: var(--fm-brand-10); color: var(--fm-brand); }
[data-sf-template] .d-order-failed .d-order-icon { background: #fde3df; color: var(--fm-red-600); }
[data-sf-template] .d-order-info .d-order-icon { background: var(--fm-surface-2); color: var(--fm-ink); }
[data-sf-template] .d-order-text { font-size: var(--fm-text-s); color: var(--fm-ink); }
[data-sf-template] .d-order-note { padding: 10px 12px; border-radius: var(--fm-radius); background: var(--fm-warning-bg);
  color: var(--fm-warning-ink); font-size: var(--fm-text-s); font-weight: 500; }
[data-sf-template] .d-order-data { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px dashed var(--fm-muted);
  border-radius: var(--fm-radius); }
[data-sf-template] .d-order-data div { display: grid; }
[data-sf-template] .d-order-data dt { font-size: var(--fm-text-xs); color: var(--fm-muted); }
[data-sf-template] .d-order-data dd { margin: 0; font-size: var(--fm-text-s); color: var(--fm-ink-strong); }
[data-sf-template] .d-order-lines { display: grid; gap: 6px; }
[data-sf-template] .d-order-lines li { display: flex; align-items: center; gap: 8px; font-size: var(--fm-text-s); }
[data-sf-template] .d-order-lines .fm-icon { color: var(--fm-muted); }
@media (max-width: 899px) {
  [data-sf-template] .d-panel { position: fixed; inset: 0; z-index: 45; height: auto;
    min-height: 0; border-radius: 0; box-shadow: none; }
  [data-sf-template] .d-root[data-sheet='closed'] .d-panel { visibility: hidden; transform: translateY(32px); opacity: 0;
    pointer-events: none; }
  [data-sf-template] .d-root[data-sheet='open'] .d-panel { visibility: visible; transform: none; opacity: 1; }
  [data-sf-template] .d-sheet-back { display: inline-flex; min-height: 36px; font-size: var(--fm-text-s); }
  [data-sf-template] .d-panel-close { display: none; }
  [data-sf-template] .d-panel-head h2 { font-size: var(--fm-text-m); }
  [data-sf-template] .d-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-sf-template] .d-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
[data-sf-template] .d-panel-body { transition: opacity .2s ease, transform .2s ease; }
[data-sf-template] .d-panel-body.d-panel-changing { opacity: .5; transform: translateY(8px); transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-sf-template] .d-panel, [data-sf-template] .d-panel-body { transition: none; animation: none; }
  [data-sf-template] .d-panel-body.d-panel-changing { opacity: 1; transform: none; }
}

/* Receiving popup (owner remark 06.10, legacy structure): mobile — map on top, sheet below, close and
   Доставка/Самовывоз over the map; desktop ≥900 — window 880, form left, map right. Map: demo stand-in. */
[data-sf-template] .wc-address {
  width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  overflow: hidden; color: var(--wc-ink); background: var(--wc-surface); font: 400 14px/1.4 var(--wc-font);
}
[data-sf-template] .wc-address[open] { display: grid; grid-template-rows: 36dvh minmax(0, 1fr); animation: wc-fade .18s ease-out; }
[data-sf-template] .wc-address::backdrop { background: rgb(0 0 0 / 45%); }
[data-sf-template] :where(.wc-address) *, [data-sf-template] :where(.wc-address) *::before, [data-sf-template] :where(.wc-address) *::after { box-sizing: border-box; }
[data-sf-template] :where(.wc-address) :where(h2, p, ul, fieldset) { margin: 0; padding: 0; }
[data-sf-template] :where(.wc-address) :where(button, input) { font: inherit; color: inherit; }
[data-sf-template] :where(.wc-address) :where(button) { cursor: pointer; }
[data-sf-template] .wc-address :focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
[data-sf-template] .wc-address-map {
  position: relative; display: grid; place-items: center; align-content: center; gap: 8px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 46%, #fbfbfb 46%, #fbfbfb 49%, transparent 49%) 0 0 / 190px 100%,
    linear-gradient(0deg, transparent 58%, #fbfbfb 58%, #fbfbfb 61%, transparent 61%) 0 0 / 100% 150px,
    linear-gradient(28deg, transparent 49%, #f1f1f1 49%, #f1f1f1 53%, transparent 53%) 0 0 / 100% 100%,
    #e4e4e2;
}
[data-sf-template] .wc-map-pin {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; color: #fff;
  background: var(--wc-accent); box-shadow: var(--wc-shadow-button); transform: rotate(-45deg);
}
[data-sf-template] .wc-map-pin svg { transform: rotate(45deg); }
[data-sf-template] .wc-map-label {
  max-width: 80%; padding: 6px 10px; border-radius: var(--wc-radius-control); background: var(--wc-surface);
  box-shadow: var(--wc-shadow-button); font-size: 13px; font-weight: 600; text-align: center;
}
[data-sf-template] .wc-address-map small {
  position: absolute; right: 12px; bottom: 10px; padding: 2px 8px; border-radius: 6px; color: var(--wc-muted);
  background: rgb(255 255 255 / 85%); font-size: 11px;
}
[data-sf-template] .wc-address-close { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--wc-surface);
  box-shadow: var(--wc-shadow-button); }
[data-sf-template] .wc-address-close:hover { background: var(--wc-soft); }
[data-sf-template] .wc-address-modes {
  position: absolute; top: 16px; left: 68px; right: 16px; z-index: 2; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border: 0; border-radius: 12px;
  background: var(--wc-surface); box-shadow: var(--wc-shadow-button);
}
[data-sf-template] .wc-mode-pill { position: relative; display: block; cursor: pointer; }
[data-sf-template] .wc-mode-pill input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
[data-sf-template] .wc-mode-pill span {
  min-height: 40px; display: grid; place-items: center; border-radius: var(--wc-radius-control);
  font-size: 15px; font-weight: 600;
}
[data-sf-template] .wc-mode-pill input:checked + span { color: var(--wc-on-accent); background: var(--wc-accent); }
[data-sf-template] .wc-mode-pill input:focus-visible + span { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
[data-sf-template] .wc-address-form {
  min-height: 0; display: grid; align-content: start; gap: 12px; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgb(0 0 0 / 8%);
}
[data-sf-template] .wc-address-head h2 { font-size: 22px; line-height: 28px; font-weight: 700; }
[data-sf-template] .wc-address-head h2:focus { outline: none; }
[data-sf-template] .wc-address-head p { margin-top: 2px; color: var(--wc-muted); }
[data-sf-template] .wc-address-input { display: block; }
[data-sf-template] .wc-address-input input {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--wc-radius-control);
  color: var(--wc-ink); background: var(--wc-soft);
}
[data-sf-template] .wc-address-input input::placeholder { color: var(--wc-muted); }
[data-sf-template] .wc-address-input input:focus { border-color: var(--wc-ink); background: var(--wc-surface); outline: none; }
[data-sf-template] .wc-combo { position: relative; }
[data-sf-template] .wc-combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; display: grid; margin: 0; padding: 6px;
  list-style: none; border-radius: var(--wc-radius-card); background: var(--wc-surface);
  box-shadow: 0 12px 32px rgb(17 17 17 / 14%);
}
[data-sf-template] .wc-combo-list li {
  min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 10px;
  cursor: pointer;
}
[data-sf-template] .wc-combo-list li svg { color: var(--wc-muted); }
[data-sf-template] .wc-combo-list li:hover, [data-sf-template] .wc-combo-list .wc-picker-active { background: var(--wc-soft); }
[data-sf-template] .wc-address-zone {
  display: flex; align-items: center; gap: 6px; margin-top: -4px; padding: 0 4px; color: var(--wc-success);
  font-size: 13px; line-height: 18px;
}
[data-sf-template] .wc-address-zone-off { color: var(--wc-danger); }
[data-sf-template] .wc-address-input input[aria-invalid='true'] { border-color: var(--wc-danger-line); }
[data-sf-template] .wc-address-back {
  justify-self: start; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 6px;
  border: 0; border-radius: var(--wc-radius-control); background: var(--wc-soft); font-weight: 600;
}
[data-sf-template] .wc-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-sf-template] .wc-address .wc-picker-button { border-color: transparent; background: var(--wc-soft); }
[data-sf-template] .wc-address .wc-picker-button[aria-expanded='true'], [data-sf-template] .wc-address .wc-picker-button:focus {
  border-color: var(--wc-ink); background: var(--wc-surface);
}
[data-sf-template] .wc-address-submit { margin-top: 4px; }

[data-sf-template] .wc-hero-receiving {
  max-width: 100%; min-height: 48px; display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 6px 14px; border: 0; border-radius: 12px; color: #fff; background: rgb(255 255 255 / 16%);
  text-align: left;
}
[data-sf-template] .wc-hero-receiving:hover { background: rgb(255 255 255 / 24%); }
[data-sf-template] .wc-hero-receiving > span { display: grid; min-width: 0; }
[data-sf-template] .wc-hero-receiving strong { font-size: 14px; font-weight: 600; }
[data-sf-template] .wc-hero-receiving small {
  overflow: hidden; color: rgb(255 255 255 / 78%); font-size: 12px; white-space: nowrap; text-overflow: ellipsis;
}
[data-sf-template] .wc-sheet-body > .wc-row:first-child { margin-bottom: 16px; }

@media (min-width: 900px) {
  [data-sf-template] .wc-address {
    width: min(880px, calc(100% - 48px)); height: min(620px, calc(100dvh - 64px)); margin: auto;
    border-radius: var(--wc-radius-panel); box-shadow: var(--wc-shadow);
  }
  [data-sf-template] .wc-address[open] { grid-template-columns: 420px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  [data-sf-template] .wc-address-map { grid-column: 2; grid-row: 1; }
  [data-sf-template] .wc-address-form { grid-column: 1; grid-row: 1; padding: 24px; box-shadow: none; }
  [data-sf-template] .wc-address-close { left: auto; right: 16px; }
  [data-sf-template] .wc-address-modes { position: static; padding: 4px; background: var(--wc-soft); box-shadow: none; }
  [data-sf-template] .wc-address-modes .wc-mode-pill input:checked + span { color: var(--wc-ink); background: var(--wc-surface); }
}

/* Cart (pickup-api-storefront cart sheet) and loyalty block (new screen design in the waycup style). */
[data-sf-template] .wc-lines { display: grid; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--wc-line-soft); }
[data-sf-template] .wc-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
[data-sf-template] .wc-line img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
[data-sf-template] .wc-line-copy { display: grid; gap: 2px; min-width: 0; }
[data-sf-template] .wc-line-name {
  padding: 0; border: 0; background: none; font-size: 14px; line-height: 18px; font-weight: 600; text-align: left;
}
/* The name is not a link: no underline and no text cursor over it (owner 21.10.2026). */
[data-sf-template] .wc-line-copy { cursor: default; }
[data-sf-template] .wc-line-config { color: var(--wc-muted); font-size: 12px; line-height: 16px; }
[data-sf-template] .wc-line-copy strong { font-size: 14px; font-weight: 500; }
[data-sf-template] .wc-pill {
  height: 36px; display: flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 18px;
  background: var(--wc-soft);
}
[data-sf-template] .wc-pill button {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent;
}
[data-sf-template] .wc-pill button:hover:not(:disabled) { background: var(--wc-line-soft); }
[data-sf-template] .wc-pill button:disabled { opacity: .35; }
[data-sf-template] .wc-pill output { min-width: 20px; text-align: center; font-weight: 500; }

[data-sf-template] .wc-recs { margin-top: 16px; }
[data-sf-template] .wc-recs h3 { margin-bottom: 8px; font-size: 18px; line-height: 22px; font-weight: 700; }
[data-sf-template] .wc-rec {
  position: relative;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 6px 0;
}
[data-sf-template] .wc-rec .wc-round { position: relative; z-index: 2; }
[data-sf-template] .wc-rec img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
[data-sf-template] .wc-rec span { display: grid; gap: 2px; min-width: 0; }
[data-sf-template] .wc-rec strong { font-size: 15px; font-weight: 600; }
[data-sf-template] .wc-rec small { color: var(--wc-muted); font-size: 13px; }

[data-sf-template] .wc-loyalty {
  display: grid; gap: 12px; margin-top: 16px; padding: 16px; border-radius: var(--wc-radius-card);
  background: #f7f7f7;
}
[data-sf-template] .wc-loyalty h3 { font-size: 18px; line-height: 22px; font-weight: 700; }
[data-sf-template] .wc-promo-form { display: grid; gap: 6px; }
[data-sf-template] .wc-label { font-weight: 600; }
[data-sf-template] .wc-promo-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
[data-sf-template] .wc-promo-field input {
  min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-control); background: var(--wc-surface); text-transform: uppercase;
}
[data-sf-template] .wc-promo-field input:focus { border-color: var(--wc-ink); }
[data-sf-template] .wc-promo-field input::placeholder { text-transform: none; color: var(--wc-muted); }
[data-sf-template] .wc-promo-field input[aria-invalid='true'] { border-color: var(--wc-danger); }
[data-sf-template] .wc-promo-applied {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px;
  border-radius: var(--wc-radius-control); color: var(--wc-success); background: var(--wc-surface); font-weight: 600;
}
[data-sf-template] .wc-promo-applied button {
  margin-left: auto; padding: 6px; border: 0; background: none; color: var(--wc-ink); text-decoration: underline;
  font-weight: 400;
}
[data-sf-template] .wc-bonus {
  display: grid; gap: 12px; padding: 12px; border-radius: var(--wc-radius-card); background: var(--wc-surface);
}
[data-sf-template] .wc-bonus-balance { display: flex; align-items: center; gap: 10px; }
[data-sf-template] .wc-bonus-balance > span:last-child { display: grid; }
[data-sf-template] .wc-bonus-balance strong { font-size: 15px; }
[data-sf-template] .wc-bonus-balance small { color: var(--wc-muted); font-size: 12px; }
[data-sf-template] .wc-bonus-mark {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: var(--wc-accent); font-weight: 700;
}
[data-sf-template] .wc-switch { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
[data-sf-template] .wc-switch input { position: absolute; z-index: 1; width: 44px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
[data-sf-template] .wc-switch-track {
  position: relative; width: 44px; height: 26px; flex: none; border-radius: 13px; background: #cfcfcf;
  transition: background .15s;
}
[data-sf-template] .wc-switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform .15s;
}
[data-sf-template] .wc-switch input:checked + .wc-switch-track { background: var(--wc-accent); }
[data-sf-template] .wc-switch input:checked + .wc-switch-track::after { transform: translateX(18px); }
[data-sf-template] .wc-switch input:focus-visible + .wc-switch-track { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
[data-sf-template] .wc-switch input:disabled, [data-sf-template] .wc-switch input:disabled ~ span { opacity: .5; cursor: not-allowed; }
[data-sf-template] .wc-switch-text { display: grid; gap: 2px; font-weight: 500; }
[data-sf-template] .wc-switch-text small { color: var(--wc-muted); font-size: 12px; font-weight: 400; }
[data-sf-template] .wc-totals { display: grid; gap: 6px; }
[data-sf-template] .wc-totals div { display: flex; justify-content: space-between; gap: 12px; }
[data-sf-template] .wc-totals dt { color: var(--wc-muted); }
[data-sf-template] .wc-totals-minus dd { color: var(--wc-success); }
[data-sf-template] .wc-totals .wc-totals-sum {
  padding-top: 8px; border-top: 1px solid var(--wc-line-soft); font-size: 18px; font-weight: 700;
}
[data-sf-template] .wc-totals-sum dt { color: var(--wc-ink); }
[data-sf-template] .wc-notice {
  margin-top: 12px; padding: 12px; border-radius: 10px; color: #4d3a00; background: #fff4d6; font-size: 13px;
}
[data-sf-template] .wc-checkout { justify-content: space-between; }
[data-sf-template] .wc-checkout strong { font-size: 16px; }

[data-sf-template] .wc-venue { display: grid; gap: 12px; }
[data-sf-template] .wc-venue-list { display: grid; gap: 8px; }
[data-sf-template] .wc-venue-list li {
  display: grid; gap: 2px; padding: 12px; border-radius: var(--wc-radius-card); background: var(--wc-soft);
}
[data-sf-template] .wc-venue-list small { color: var(--wc-muted); }
[data-sf-template] .wc-filter-options { display: grid; gap: 4px; border: 0; }
[data-sf-template] .wc-check { min-height: 44px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
[data-sf-template] .wc-check input { width: 20px; height: 20px; accent-color: var(--wc-accent); }

/* Search, chips, promos, sections and cards. Figma 623:32: filter 713:29252, discount 769:1635,
   list 713:29219, card 623:665 / 661:4080 / 661:4153. Desktop card copy: pickup-api-storefront. */
[data-sf-template] .wc-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
[data-sf-template] .wc-search {
  height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-control); color: var(--wc-muted); background: var(--wc-surface);
}
[data-sf-template] .wc-search:focus-within { border-color: var(--wc-ink); color: var(--wc-ink); }
[data-sf-template] .wc-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--wc-ink); font-size: 14px;
}
[data-sf-template] .wc-search input:focus-visible { outline: none; }
[data-sf-template] .wc-search input::placeholder { color: var(--wc-muted); }
[data-sf-template] .wc-chips {
  display: flex; gap: 8px; margin: 12px calc(-1 * var(--wc-pad)) 0; padding: 0 var(--wc-pad);
  overflow-x: auto; scrollbar-width: none; scroll-padding: 0 var(--wc-pad);
}
[data-sf-template] .wc-chips::-webkit-scrollbar { display: none; }
[data-sf-template] .wc-chip {
  height: 36px; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 8px;
  border-radius: var(--wc-radius-control); color: var(--wc-ink); background: var(--wc-chip);
  font-size: 14px; text-decoration: none; white-space: nowrap;
}
[data-sf-template] .wc-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
[data-sf-template] .wc-chip:hover { background: var(--wc-line-soft); }
[data-sf-template] .wc-chip[aria-current='true'] { color: var(--wc-on-accent); background: var(--wc-accent); }

[data-sf-template] .wc-promo-row {
  display: flex; gap: 10px; margin: 0 calc(-1 * var(--wc-pad)); padding: 0 var(--wc-pad) 2px;
  overflow-x: auto; scrollbar-width: none;
}
[data-sf-template] .wc-promo-row::-webkit-scrollbar { display: none; }
[data-sf-template] .wc-promo {
  width: 86px; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none;
}
[data-sf-template] .wc-promo-ring {
  position: relative; width: 84px; height: 84px; display: grid; place-items: center; padding: 3px;
  border: 2px solid var(--wc-ink); border-radius: 50%; background: var(--wc-surface);
}
[data-sf-template] .wc-promo-ring img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(1) brightness(.5);
}
[data-sf-template] .wc-promo-label {
  position: absolute; color: #fff; font-size: 15px; line-height: 18px; font-weight: 800;
  text-shadow: 0 1px 4px rgb(0 0 0 / 60%); transform: rotate(-24deg); white-space: nowrap;
}
[data-sf-template] .wc-promo-caption {
  display: -webkit-box; overflow: hidden; color: var(--wc-ink-soft); font-size: 12px; line-height: 15px;
  text-align: center; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
[data-sf-template] .wc-promo:hover .wc-promo-ring { border-color: #000; transform: scale(1.03); }

[data-sf-template] .wc-section { scroll-margin-top: 148px; }
[data-sf-template] .wc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 16px; }
[data-sf-template] .wc-card { position: relative; min-width: 0; display: flex; flex-direction: column; }
[data-sf-template] .wc-card-open { border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; }
[data-sf-template] a.wc-card-open { text-decoration: none; color: inherit; }
[data-sf-template] .wc-card-open::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
[data-sf-template] .wc-card-open:focus-visible { outline: none; }
[data-sf-template] :is(.wc-card, .wc-rec):has(.wc-card-open:focus-visible) {
  outline: 2px solid var(--wc-ink); outline-offset: 2px; }
[data-sf-template] .wc-card-top { position: relative; }
[data-sf-template] .wc-card-media {
  position: relative; width: 100%; aspect-ratio: 1; display: block; padding: 0; overflow: hidden;
  border: 0; border-radius: var(--wc-radius-card); background: var(--wc-media);
}
[data-sf-template] .wc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
[data-sf-template] .wc-card-available:has(.wc-card-open:hover) .wc-card-media img { transform: scale(1.03); }
[data-sf-template] .wc-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
[data-sf-template] .wc-badge {
  padding: 4px 8px; border-radius: 6px; color: var(--wc-ink-soft); background: rgb(255 255 255 / 94%);
  font-size: 12px; line-height: 15px;
}
[data-sf-template] .wc-card-add {
  position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; color: var(--wc-ink); background: var(--wc-surface);
  box-shadow: var(--wc-shadow-button); font-weight: 600;
}
[data-sf-template] .wc-card-add:hover:not(:disabled) { background: var(--wc-soft); }
[data-sf-template] .wc-card-add-on, [data-sf-template] .wc-card-add-on:hover:not(:disabled) { color: var(--wc-on-accent); background: var(--wc-accent); }
[data-sf-template] .wc-card-add:disabled { opacity: .8; }
[data-sf-template] .wc-card-body { display: grid; gap: 2px; padding-top: 8px; }
[data-sf-template] .wc-card-price { font-size: 16px; line-height: 21px; font-weight: 700; }
[data-sf-template] .wc-card-name { font-size: 14px; line-height: 19.6px; font-weight: 400; overflow-wrap: anywhere; }
[data-sf-template] .wc-card-description { display: none; }
[data-sf-template] .wc-card-weight { color: var(--wc-muted); font-size: 12px; line-height: 15.3px; }
[data-sf-template] .wc-card-later .wc-card-media img { opacity: .5; filter: grayscale(.3); }
[data-sf-template] .wc-card-adult .wc-card-media img { filter: blur(14px) grayscale(.5); transform: scale(1.2); }
[data-sf-template] .wc-card-adult .wc-card-price { color: var(--wc-muted); }
[data-sf-template] .wc-card-gate {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  color: rgb(34 34 34 / 70%); background: rgb(255 255 255 / 35%); font-size: 13px; line-height: 16px;
}

[data-sf-template] .wc-state { display: grid; justify-items: center; gap: 8px; padding: 32px 8px; text-align: center; }
[data-sf-template] .wc-state h3 { font-size: 18px; line-height: 22px; font-weight: 700; }
[data-sf-template] .wc-state p { max-width: 320px; color: var(--wc-muted); }
[data-sf-template] .wc-state .wc-button { margin-top: 8px; }
[data-sf-template] .wc-state-mark {
  width: 48px; height: 48px; border: 2px solid var(--wc-line-soft); border-radius: 50%;
  background: radial-gradient(circle, var(--wc-ink) 0 4px, transparent 5px);
}
[data-sf-template] .wc-state-error .wc-state-mark, [data-sf-template] .wc-state-timeout .wc-state-mark { border-color: var(--wc-ink); }

@media (min-width: 900px) {
  [data-sf-template] .wc-chips { flex-wrap: wrap; margin: 16px 0 0; padding: 0; overflow: visible; }
  [data-sf-template] .wc-promo-row { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  [data-sf-template] .wc-section { scroll-margin-top: 16px; }
  [data-sf-template] .wc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 20px; }
  [data-sf-template] .wc-card { padding: 8px; border-radius: 14px; background: var(--wc-media); }
  [data-sf-template] .wc-card-media { background: var(--wc-surface); }
  [data-sf-template] .wc-card-description {
    display: -webkit-box; overflow: hidden; color: var(--wc-muted); font-size: 13px; line-height: 18px;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  }
  [data-sf-template] .wc-card-body { padding: 10px 2px 2px; }
}
@media (min-width: 1200px) { [data-sf-template] .wc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  [data-sf-template] .wc-root *, [data-sf-template] .wc-root *::before, [data-sf-template] .wc-root *::after { animation: none !important; transition: none !important; }
}

/* Group 2: receiving, sign-in, checkout, payment return, created order. Sources: Figma waycup receipt
   1230:4021 / 2395:77357, additional-item 2102:27069, phone and code sheets 2252:105971, 1466:7097, 1464:4627,
   order block 1271:24508; waycup-prod checkout sheet. Missing screens — new design in the same style. */
[data-sf-template] .wc-sheet-head h2 { flex: 1; min-width: 0; }
[data-sf-template] .wc-sheet-head h2:focus, [data-sf-template] .wc-sheet-head h2:focus-visible { outline: none; }
[data-sf-template] .wc-back { margin-right: -4px; }
[data-sf-template] .wc-sheet-foot .wc-button strong { color: var(--wc-on-accent-muted); font-weight: 500; }
[data-sf-template] .wc-sheet-foot .wc-button-light strong { color: var(--wc-muted); }

[data-sf-template] .wc-flow { display: grid; gap: 12px; }
[data-sf-template] .wc-center { justify-self: center; text-align: center; }
[data-sf-template] .wc-text-button {
  min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--wc-ink); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
[data-sf-template] .wc-field { display: grid; gap: 6px; }
[data-sf-template] .wc-field-label { padding: 0; color: var(--wc-muted); font-size: 14px; line-height: 18px; }
[data-sf-template] .wc-field input, [data-sf-template] .wc-field select, [data-sf-template] .wc-field textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-control); color: var(--wc-ink); background: var(--wc-surface); font: inherit;
}
[data-sf-template] .wc-field textarea { min-height: 76px; padding: 12px 14px; resize: vertical; }
[data-sf-template] .wc-field :is(input, textarea):focus { border-color: var(--wc-ink); }
[data-sf-template] .wc-field :disabled { opacity: .55; }
[data-sf-template] .wc-picker { position: relative; }
[data-sf-template] .wc-picker-button {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 14px; border: 1px solid var(--wc-line); border-radius: var(--wc-radius-control);
  color: var(--wc-ink); background: var(--wc-surface); font: inherit; text-align: left;
}
[data-sf-template] .wc-picker-button[aria-expanded='true'], [data-sf-template] .wc-picker-button:focus { border-color: var(--wc-ink); }
[data-sf-template] .wc-picker-button:focus-visible { outline: none; }
[data-sf-template] .wc-picker-button[aria-expanded='true'] svg { transform: rotate(180deg); }
[data-sf-template] .wc-picker-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; display: grid; padding: 6px;
  border-radius: var(--wc-radius-card); background: var(--wc-surface); box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
}
[data-sf-template] .wc-picker-list[hidden] { display: none; }
[data-sf-template] .wc-picker-list li {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 10px; border-radius: var(--wc-radius-control); cursor: pointer;
}
[data-sf-template] .wc-picker-list li[aria-selected='true'] { font-weight: 600; }
[data-sf-template] .wc-picker-list .wc-picker-active { background: var(--wc-soft); }
[data-sf-template] .wc-picker-list li[aria-disabled='true'] { color: var(--wc-muted); cursor: not-allowed; }
[data-sf-template] .wc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; border: 0; }
[data-sf-template] .wc-tiles legend { margin-bottom: 6px; }
[data-sf-template] .wc-tile { position: relative; display: block; cursor: pointer; }
[data-sf-template] .wc-tile input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
[data-sf-template] .wc-tile > span {
  min-height: 64px; display: grid; align-content: center; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--wc-line-soft); border-radius: var(--wc-radius-card); background: var(--wc-surface);
}
[data-sf-template] .wc-tile strong { font-size: 14px; font-weight: 600; }
[data-sf-template] .wc-tile small { color: var(--wc-muted); font-size: 12px; }
[data-sf-template] .wc-tile input:checked + span { border-color: var(--wc-accent); color: #fff; background: var(--wc-accent); }
[data-sf-template] .wc-tile input:checked + span small { color: var(--wc-on-accent-muted); }
[data-sf-template] .wc-tile input:disabled + span { opacity: .45; }
[data-sf-template] .wc-tile input:disabled { cursor: not-allowed; }
[data-sf-template] .wc-tile input:focus-visible + span { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
[data-sf-template] .wc-flow-error {
  display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-radius: var(--wc-radius-card);
  color: var(--wc-danger); background: #fdecea; font-size: 13px; line-height: 18px;
}
[data-sf-template] .wc-flow-error svg { flex: none; margin-top: 1px; }

[data-sf-template] .wc-intro { display: grid; justify-items: center; gap: 8px; padding: 8px 0 4px; text-align: center; }
[data-sf-template] .wc-intro-tile {
  width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--wc-soft);
}
[data-sf-template] .wc-intro h3 { font-size: 20px; line-height: 24px; font-weight: 700; }
[data-sf-template] .wc-intro p { max-width: 320px; color: var(--wc-muted); font-size: 14px; line-height: 20px; }
[data-sf-template] .wc-intro b { color: var(--wc-ink); font-weight: 600; white-space: nowrap; }
[data-sf-template] .wc-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
[data-sf-template] .wc-providers p {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; color: var(--wc-muted); font-size: 13px;
}
[data-sf-template] .wc-providers p::before, [data-sf-template] .wc-providers p::after { content: ''; flex: 1; height: 1px; background: var(--wc-line-soft); }
[data-sf-template] .wc-provider {
  min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px;
  border: 1px solid var(--wc-line-soft); border-radius: var(--wc-radius-control); background: var(--wc-surface);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
[data-sf-template] .wc-provider:hover { background: var(--wc-soft); }
[data-sf-template] .wc-provider span {
  min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 3px; border-radius: 11px;
  color: #fff; background: var(--wc-ink-soft); font-size: 9px; font-weight: 700;
}
[data-sf-template] .wc-provider-mark { color: #fff; background: var(--wc-ink-soft); font-size: 18px; font-weight: 700; }
[data-sf-template] .wc-consent { color: var(--wc-muted); font-size: 11px; line-height: 15px; text-align: center; }

[data-sf-template] .wc-row, [data-sf-template] .wc-pay-option, [data-sf-template] .wc-zone {
  min-height: 80px; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 12px 8px 8px; border: 1px solid transparent; border-radius: var(--wc-radius-card);
  background: #f7f7f7; text-align: left;
}
[data-sf-template] .wc-row-action { width: 100%; color: var(--wc-ink); font: inherit; }
[data-sf-template] .wc-row-action:hover { background: var(--wc-line-soft); }
[data-sf-template] .wc-row-tile {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--wc-radius-card);
  color: var(--wc-ink); background: var(--wc-surface);
}
[data-sf-template] .wc-row-copy, [data-sf-template] .wc-zone > span:last-child { display: grid; gap: 3px; min-width: 0; }
[data-sf-template] .wc-row-copy strong, [data-sf-template] .wc-zone strong { font-size: 15px; line-height: 20px; font-weight: 600; }
[data-sf-template] .wc-row-copy small, [data-sf-template] .wc-zone small { color: var(--wc-muted); font-size: 12px; line-height: 16px; }
[data-sf-template] .wc-row-link { font-size: 13px; font-weight: 500; text-decoration: underline; }
[data-sf-template] .wc-zone { grid-template-columns: 64px minmax(0, 1fr); }

[data-sf-template] .wc-modes, [data-sf-template] .wc-venue-options, [data-sf-template] .wc-pay-options { display: grid; gap: 8px; min-width: 0; border: 0; }
[data-sf-template] .wc-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-sf-template] .wc-mode, [data-sf-template] .wc-venue-option { position: relative; display: block; cursor: pointer; }
[data-sf-template] .wc-mode input, [data-sf-template] .wc-venue-option input, [data-sf-template] .wc-pay-option input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
[data-sf-template] .wc-mode > span {
  min-height: 96px; display: grid; align-content: start; gap: 4px; padding: 12px; border: 1px solid var(--wc-line-soft);
  border-radius: var(--wc-radius-card); background: var(--wc-surface);
}
[data-sf-template] .wc-mode strong { margin-top: 6px; font-size: 15px; }
[data-sf-template] .wc-mode small { color: var(--wc-muted); font-size: 12px; line-height: 15px; }
[data-sf-template] .wc-mode input:checked + span { border-color: var(--wc-accent); color: #fff; background: var(--wc-accent); }
[data-sf-template] .wc-mode input:checked + span small { color: var(--wc-on-accent-muted); }
[data-sf-template] .wc-venue-option > span {
  display: grid; gap: 2px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--wc-radius-card);
  background: #f7f7f7;
}
[data-sf-template] .wc-venue-option > span > span { color: var(--wc-ink-soft); }
[data-sf-template] .wc-venue-option small { color: var(--wc-muted); font-size: 12px; }
[data-sf-template] .wc-venue-option input:checked + span, [data-sf-template] .wc-pay-option:has(input:checked) {
  border-color: var(--wc-accent); background: var(--wc-surface);
}
[data-sf-template] .wc-venue-option input:disabled + span { opacity: .5; }
[data-sf-template] .wc-venue-option input:disabled { cursor: not-allowed; }
[data-sf-template] .wc-mode input:focus-visible + span, [data-sf-template] .wc-venue-option input:focus-visible + span, [data-sf-template] .wc-pay-option:has(input:focus-visible) { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
[data-sf-template] .wc-pay-option { position: relative; cursor: pointer; }
[data-sf-template] .wc-pay-option:has(input:disabled) { opacity: .6; cursor: not-allowed; }
[data-sf-template] .wc-pay-mark {
  width: 22px; height: 22px; border: 2px solid #c8c8c8; border-radius: 50%; background: var(--wc-surface);
}
[data-sf-template] .wc-pay-option:has(input:checked) .wc-pay-mark { border: 7px solid var(--wc-accent); }

[data-sf-template] .wc-phone {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-card); background: var(--wc-surface);
}
[data-sf-template] .wc-phone:focus-within { border-color: var(--wc-ink); }
[data-sf-template] .wc-phone-prefix { font-size: 16px; font-weight: 500; }
[data-sf-template] .wc-phone input {
  flex: 1; min-width: 0; height: 50px; padding: 0; border: 0; outline: 0; background: none; font-size: 16px;
}
[data-sf-template] .wc-phone:has(input[aria-invalid='true']), [data-sf-template] .wc-code:has(input[aria-invalid='true']) .wc-code-cells span {
  border-color: var(--wc-danger);
}
[data-sf-template] .wc-code { position: relative; justify-self: center; display: block; width: min(100%, 300px); }
[data-sf-template] .wc-code input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; font-size: 16px;
  caret-color: transparent;
}
[data-sf-template] .wc-code-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
[data-sf-template] .wc-code-cells span {
  height: 56px; display: grid; place-items: center; border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-card);
  background: var(--wc-surface); font-size: 22px; font-weight: 600;
}
[data-sf-template] .wc-code:focus-within .wc-code-current { border: 2px solid var(--wc-ink); }

[data-sf-template] .wc-receipt {
  position: relative; padding: 20px 16px 26px; border-radius: var(--wc-radius-panel) var(--wc-radius-panel) 0 0;
  background: #f7f7f7;
}
[data-sf-template] .wc-receipt-head { display: grid; justify-items: center; gap: 4px; text-align: center; }
[data-sf-template] .wc-receipt-icon {
  width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 50%;
  color: #8c7bb5; background: var(--wc-surface);
}
[data-sf-template] .wc-receipt-head small { color: var(--wc-muted); font-size: 13px; }
[data-sf-template] .wc-receipt-sum { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px; }
[data-sf-template] .wc-receipt-sum strong { font-size: 24px; line-height: 30px; font-weight: 700; }
[data-sf-template] .wc-receipt-sum s { color: #bdbdbd; font-size: 20px; font-weight: 600; }
[data-sf-template] .wc-receipt-rows { margin-top: 14px; border-top: 1px dashed #d6d6d6; }
[data-sf-template] .wc-receipt-rows li {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed #d6d6d6;
}
[data-sf-template] .wc-receipt-rows span { display: grid; gap: 3px; min-width: 0; }
[data-sf-template] .wc-receipt-rows strong { font-size: 15px; font-weight: 600; }
[data-sf-template] .wc-receipt-rows small { color: var(--wc-muted); font-size: 12px; line-height: 16px; }
[data-sf-template] .wc-receipt-rows b { font-size: 15px; font-weight: 600; white-space: nowrap; }
[data-sf-template] .wc-receipt-minus b { color: var(--wc-success); }
[data-sf-template] .wc-receipt-teeth {
  position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: radial-gradient(circle at 50% 100%, var(--wc-surface) 6px, transparent 6.5px) 4px 0 / 20px 12px repeat-x;
}

[data-sf-template] .wc-flow-panel {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px 8px 8px;
  border-radius: var(--wc-radius-card); background: #f7f7f7;
}
[data-sf-template] .wc-flow-panel h3 { font-size: 15px; line-height: 20px; font-weight: 700; }
[data-sf-template] .wc-flow-panel p { color: var(--wc-ink-soft); font-size: 13px; line-height: 18px; }
[data-sf-template] .wc-flow-panel-warning { background: #fff4d6; }
[data-sf-template] .wc-flow-panel-warning .wc-row-tile { color: #8a6100; }
[data-sf-template] .wc-flow-panel-success .wc-row-tile { color: var(--wc-success); }

[data-sf-template] .wc-pay-summary {
  display: grid; justify-items: center; gap: 2px; padding: 16px; border-radius: var(--wc-radius-card);
  background: #f7f7f7; text-align: center;
}
[data-sf-template] .wc-pay-summary strong { font-size: 24px; line-height: 30px; }
[data-sf-template] .wc-pay-summary span, [data-sf-template] .wc-pay-summary small { color: var(--wc-muted); }
[data-sf-template] .wc-pay-demo {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px;
  border: 1px dashed #c9c9c9; border-radius: var(--wc-radius-card);
}
[data-sf-template] .wc-pay-demo legend { padding: 0 6px; color: var(--wc-muted); font-size: 12px; font-weight: 600; }
[data-sf-template] .wc-pay-demo .wc-button { min-height: 44px; padding: 0 8px; font-size: 13px; }

[data-sf-template] .wc-order-panel { order: 0; }
[data-sf-template] .wc-order-lines {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--wc-radius-card); background: #f7f7f7;
}
[data-sf-template] .wc-order-lines ul { display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
[data-sf-template] .wc-order-lines dl { display: grid; gap: 6px; padding-top: 10px; border-top: 1px dashed #d6d6d6; }
[data-sf-template] .wc-order-lines dl div { display: flex; justify-content: space-between; gap: 12px; }
[data-sf-template] .wc-order-lines dt { color: var(--wc-muted); }
[data-sf-template] .wc-order-lines dd { text-align: right; }
[data-sf-template] .wc-order-total { font-size: 17px; font-weight: 700; }
[data-sf-template] .wc-order-total dt { color: var(--wc-ink); }

[data-sf-template] .wc-flow-demo {
  display: grid; gap: 6px; margin-top: 16px; padding: 10px 12px; border: 1px dashed #c9c9c9;
  border-radius: var(--wc-radius-control); color: var(--wc-muted); font-size: 12px; line-height: 16px;
}
[data-sf-template] .wc-flow-demo label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
[data-sf-template] .wc-flow-demo select {
  height: 32px; padding: 0 6px; border: 1px solid var(--wc-line); border-radius: 6px; background: var(--wc-surface);
}
@media (min-width: 900px) {
  [data-sf-template] .wc-order-panel { padding: 20px 16px; }
}

/* Product card from Figma waycup «PAGE: FOOD» 2387:16138, light theme of «03. theme» (atlas:
   artifacts/prototypes/00048-three-versions/waycup-figma-atlas, «24 - Theme light-dark.md»).
   Mobile — bottom sheet as in Figma (389 frame); desktop ≥900 — window of the same blocks (new screen design). */
[data-sf-template] .wc-food {
  --wc-food-body: #eeeff2;           /* bg/body, bg/weight-options/container, bg/button/secondary */
  --wc-food-island: #fff;            /* bg/island, bg/dish-page_footer */
  --wc-food-text: #1e2023;           /* text/primary */
  --wc-food-muted: #767e8a;          /* text/secondary */
  --wc-food-faint: #bbbec4;          /* text/old price, border/input/checkbox */
  --wc-food-primary: #319036;        /* bg/button/primary, border/weight-options/selected option */
  --wc-food-check: #5aa65e;          /* bg/check-button/check-mark */
  --wc-food-error: #ff3220;          /* text/error */
  --wc-food-radius: 24px;
  width: 100%; max-width: 100%; max-height: 94dvh; margin: auto 0 0; padding: 0; overflow: hidden; border: 0;
  border-radius: var(--wc-food-radius) var(--wc-food-radius) 0 0; color: var(--wc-food-text);
  background: var(--wc-food-island); font: 400 14px/1.4 var(--wc-font);
}
[data-sf-template] .wc-food[open] { display: flex; flex-direction: column; animation: wc-rise .22s ease-out; }
[data-sf-template] .wc-food::backdrop { background: rgb(17 17 17 / 80%); }
[data-sf-template] :where(.wc-food) *, [data-sf-template] :where(.wc-food) *::before, [data-sf-template] :where(.wc-food) *::after { box-sizing: border-box; }
[data-sf-template] :where(.wc-food) :where(h2, h3, p, ul, fieldset, legend) { margin: 0; padding: 0; }
[data-sf-template] :where(.wc-food) :where(ul) { list-style: none; }
[data-sf-template] :where(.wc-food) :where(button) { font: inherit; color: inherit; cursor: pointer; }
[data-sf-template] .wc-food :focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
[data-sf-template] .wc-food-close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 56px; height: 56px; display: grid;
  place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--wc-food-muted);
  background: var(--wc-food-island); box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
}
[data-sf-template] .wc-food-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
[data-sf-template] .wc-food-media { position: relative; background: var(--wc-food-body); }
[data-sf-template] .wc-food-media img { display: block; width: 100%; height: auto; aspect-ratio: 389 / 290; object-fit: cover; }
[data-sf-template] .wc-food-badges {
  position: absolute; left: 0; right: 0; bottom: 36px; display: flex; justify-content: center; gap: 4px;
}
[data-sf-template] .wc-food-badges li {
  padding: 3px 8px; border-radius: 4px; color: var(--wc-food-text); background: var(--wc-food-island);
  font-size: 12px; line-height: 16px;
}
[data-sf-template] .wc-food-island {
  position: relative; display: grid; gap: 20px; margin-top: -24px; padding: 20px 16px;
  border-radius: var(--wc-food-radius) var(--wc-food-radius) 0 0; background: var(--wc-food-island);
}
[data-sf-template] .wc-food-title { display: grid; gap: 2px; font-size: 20px; line-height: 24px; font-weight: 700; }
[data-sf-template] .wc-food-title small { color: var(--wc-food-muted); font-size: 14px; line-height: 18px; font-weight: 400; }
[data-sf-template] .wc-food-text { font-size: 14px; line-height: 20px; }
[data-sf-template] .wc-food-more {
  width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0;
  border-radius: 28px; background: var(--wc-food-body); font-weight: 500;
}
[data-sf-template] .wc-food-more[aria-expanded='true'] svg { transform: rotate(180deg); }
[data-sf-template] .wc-food-details { display: grid; gap: 8px; }
[data-sf-template] .wc-food-details h3 { font-size: 16px; font-weight: 600; }
[data-sf-template] .wc-food-params { display: grid; gap: 16px; padding: 8px 16px 24px; }
[data-sf-template] .wc-food-params > h2 { font-size: 20px; line-height: 24px; font-weight: 700; text-align: center; }
[data-sf-template] .wc-food-group { min-width: 0; border: 0; }
[data-sf-template] .wc-food-group legend {
  width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 12px;
}
[data-sf-template] .wc-food-group legend strong { font-size: 16px; line-height: 20px; font-weight: 600; }
[data-sf-template] .wc-food-group legend span { color: var(--wc-food-faint); font-size: 14px; }
[data-sf-template] .wc-food-group legend em { margin-left: auto; color: var(--wc-food-error); font-size: 14px; font-style: normal; }
/* One-of group with many options (sfv2-5-00148): Figma has no dropdown — a field plate and its list below it in the
   sheet, a white plate with the island shadow and the radio of the Figma rows. */
[data-sf-template] .wc-food-choice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
[data-sf-template] .wc-food-choice-title { display: flex; align-items: baseline; gap: 6px; }
[data-sf-template] .wc-food-choice-title strong { font-size: 16px; line-height: 20px; font-weight: 600; }
[data-sf-template] .wc-food-choice-title em { margin-left: auto; color: var(--wc-food-error); font-size: 14px; font-style: normal; }
[data-sf-template] .wc-food-choice-field {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; border: 1px solid var(--wc-line); border-radius: 16px; background: var(--wc-food-island);
  text-align: left;
}
[data-sf-template] .wc-food-choice-field[aria-expanded='true'] { border-color: var(--wc-food-text); }
[data-sf-template] .wc-food-choice-field[aria-invalid='true'] { border-color: var(--wc-food-error); }
[data-sf-template] .wc-food-choice-field svg { flex: none; color: var(--wc-food-muted); transition: transform .15s ease; }
[data-sf-template] .wc-food-choice-field[aria-expanded='true'] svg { transform: rotate(180deg); }
[data-sf-template] .wc-food-choice-value { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
[data-sf-template] .wc-food-choice-value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-sf-template] .wc-food-choice-value small, [data-sf-template] .wc-food-choice-list small { flex: none; color: var(--wc-food-muted); font-size: 14px; }
[data-sf-template] .wc-food-choice-empty { color: var(--wc-food-muted); }
[data-sf-template] .wc-food-group .wc-food-choice-list {
  display: grid; gap: 0; padding: 8px; border-radius: 16px; background: var(--wc-food-island);
  box-shadow: var(--wc-shadow-island); animation: wc-fade .12s ease-out;
}
[data-sf-template] .wc-food-choice-list li {
  min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
}
[data-sf-template] .wc-food-choice-list li:hover, [data-sf-template] .wc-food-choice-list li:focus-visible { background: var(--wc-food-body); }
[data-sf-template] .wc-food-choice-list li:focus-visible { outline-offset: -2px; }
[data-sf-template] .wc-food-choice-list li[aria-disabled='true'] { opacity: .4; cursor: not-allowed; }
[data-sf-template] .wc-food-choice-radio { width: 24px; height: 24px; border: 2px solid var(--wc-food-faint); border-radius: 50%; }
[data-sf-template] .wc-food-choice-list li[aria-selected='true'] .wc-food-choice-radio {
  border-color: var(--wc-food-check);
  background: radial-gradient(circle, var(--wc-food-primary) 0 5px, transparent 5.5px);
}
[data-sf-template] .wc-food-group ul { display: grid; gap: 12px; }
[data-sf-template] .wc-food-option {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
}
[data-sf-template] .wc-food-off { opacity: .4; }
[data-sf-template] .wc-food-tile {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 12px; color: var(--wc-food-faint);
  background: var(--wc-food-body); font-size: 24px; font-weight: 700;
}
[data-sf-template] .wc-food-option-copy { display: grid; gap: 2px; min-width: 0; }
[data-sf-template] .wc-food-option-copy small { color: var(--wc-food-faint); font-size: 12px; }
[data-sf-template] .wc-food-option input[type='radio'] {
  width: 24px; height: 24px; margin: 0 8px 0 0; border: 2px solid var(--wc-food-faint); border-radius: 50%;
  appearance: none; cursor: pointer;
}
[data-sf-template] .wc-food-option input[type='radio']::after { content: ''; display: block; width: 100%; height: 100%; }
[data-sf-template] .wc-food-option input[type='radio']:checked {
  border-color: var(--wc-food-check);
  background: radial-gradient(circle, var(--wc-food-primary) 0 5px, transparent 5.5px);
}
[data-sf-template] .wc-food-option input[type='radio']:disabled { cursor: not-allowed; }
[data-sf-template] .wc-food-group[aria-invalid='true'] input[type='radio'] { border-color: var(--wc-food-error); }
[data-sf-template] .wc-food-plus, [data-sf-template] .wc-food-step button {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  color: var(--wc-food-muted); background: var(--wc-food-body);
}
[data-sf-template] .wc-food-plus:disabled, [data-sf-template] .wc-food-step button:disabled { opacity: .45; cursor: not-allowed; }
[data-sf-template] .wc-food-step { display: flex; align-items: center; gap: 8px; }
[data-sf-template] .wc-food-step output { min-width: 12px; text-align: center; }
[data-sf-template] .wc-food-foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 8px; padding: 12px 16px
  calc(16px + env(safe-area-inset-bottom)); background: var(--wc-food-island); box-shadow: 0 -8px 24px rgb(0 0 0 / 6%);
}
[data-sf-template] .wc-food-foot-name { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; }
[data-sf-template] .wc-food-foot-name strong { font-weight: 600; }
[data-sf-template] .wc-food-foot-name span { color: var(--wc-food-faint); }
[data-sf-template] .wc-food-count {
  width: 120px; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px;
  border-radius: var(--wc-food-radius); background: var(--wc-food-body);
}
[data-sf-template] .wc-food-count button {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  color: var(--wc-food-muted); background: transparent;
}
[data-sf-template] .wc-food-count button:disabled { opacity: .4; cursor: not-allowed; }
[data-sf-template] .wc-food-add {
  grid-column: -2 / -1; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--wc-food-radius); color: #fff; background: var(--wc-food-primary); font-weight: 500;
}
[data-sf-template] .wc-food-foot:not(:has(.wc-food-count)) .wc-food-add { grid-column: 1 / -1; }
[data-sf-template] .wc-food-add:hover:not(:disabled) { background: #287a2c; }
[data-sf-template] .wc-food-add:disabled { opacity: .5; cursor: not-allowed; }
[data-sf-template] .wc-food-amount { color: rgb(255 255 255 / 60%); font-size: 14px; }

@media (min-width: 900px) {
  [data-sf-template] .wc-food {
    --wc-food-height: min(680px, calc(100dvh - 64px));
    width: min(880px, calc(100% - 48px)); height: var(--wc-food-height); max-height: none; margin: auto;
    border-radius: var(--wc-food-radius); box-shadow: var(--wc-shadow);
  }
  [data-sf-template] .wc-food[open] { animation: wc-fade .18s ease-out; }
  [data-sf-template] .wc-food-scroll { display: grid; grid-template-columns: 400px minmax(0, 1fr); align-content: start; }
  [data-sf-template] .wc-food-media {
    position: sticky; top: 0; grid-column: 1; grid-row: 1 / span 2; height: calc(var(--wc-food-height) - 108px);
  }
  [data-sf-template] .wc-food-media img { height: 100%; aspect-ratio: auto; }
  [data-sf-template] .wc-food-island { grid-column: 2; margin: 0; padding: 24px 24px 20px; }
  [data-sf-template] .wc-food-params { grid-column: 2; padding: 8px 24px 24px; }
  [data-sf-template] .wc-food-params > h2 { text-align: left; }
  [data-sf-template] .wc-food-foot { grid-template-columns: auto minmax(0, 320px); justify-content: end; padding: 16px 24px; }
  [data-sf-template] .wc-food-foot-name { justify-content: flex-start; }
}
/* The part inside the template's popup (V009 §51 п. 5): the popup is the window, the sheet only lays out content. */
[data-sf-template] .wc-food.wc-food-content {
  display: flex; flex-direction: column; width: 100%; height: auto; max-height: none; margin: 0;
  border-radius: 0; box-shadow: none;
}

/* Page frame. Mobile: Figma 623:32 stacked bands (390). Desktop ≥900: pickup-api-storefront (1366):
   wide hero, left column 360 (search + chips + promos), content sections on the right. CSS only. */
[data-sf-template] .wc-root { padding-bottom: 88px; --sf-added-bottom: 96px; }
[data-sf-template] .wc-frame { width: 100%; }
/* Site state strip (pause, ordering off; 12.3): on mobile the hero fills the first screen, so the strip goes above
   it; from 900 px it stays under the hero. The wrapper is empty while the site is open. */
@media (max-width: 899.98px) {
  [data-sf-template] .wc-frame { display: flex; flex-direction: column; }
  [data-sf-template] .wc-site-slot { order: -1; }
}
[data-sf-template] .wc-hero { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 56px 16px 16px; }
[data-sf-template] .wc-hero-copy { display: grid; justify-items: center; gap: 6px; text-align: center; }
[data-sf-template] .wc-hero-title {
  font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
[data-sf-template] .wc-hero-tagline { color: var(--wc-muted); font-size: 14px; line-height: 19.6px; }
[data-sf-template] .wc-hero-chips { display: none; }
[data-sf-template] .wc-hero-actions { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; }
[data-sf-template] .wc-hero-button {
  height: 48px; display: grid; place-items: center; padding: 0 12px; border: 0;
  border-radius: var(--wc-radius-control); color: #fff; background: var(--wc-ink); font-size: 14px;
}
[data-sf-template] .wc-hero-button:hover { background: #3a3a3a; }

[data-sf-template] .wc-layout { display: flex; flex-direction: column; gap: var(--wc-gap); margin-top: var(--wc-gap); }
[data-sf-template] .wc-side { display: contents; }
[data-sf-template] .wc-promos { order: 1; }
[data-sf-template] .wc-search-panel { order: 2; position: sticky; top: 0; z-index: 20; box-shadow: 0 6px 16px rgb(0 0 0 / 4%); }
[data-sf-template] .wc-content { order: 3; display: flex; flex-direction: column; gap: var(--wc-gap); min-width: 0; }
[data-sf-template] .wc-panel { padding: var(--wc-pad); border-radius: var(--wc-radius-panel); background: var(--wc-surface); }
[data-sf-template] .wc-panel-link { color: inherit; text-decoration: none; }
[data-sf-template] .wc-panel-title {
  margin-bottom: 16px; color: var(--wc-ink-soft); font-size: 20px; line-height: 24px; font-weight: 700;
}
[data-sf-template] .wc-footnote { padding: 8px 16px 0; color: var(--wc-muted); font-size: 12px; text-align: center; }

[data-sf-template] .wc-cart-button {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30;
  height: var(--wc-cart-height); display: grid; align-content: center; justify-items: center; padding: 0 16px;
  border: 0; border-radius: 12px; color: var(--wc-on-accent); background: var(--wc-accent);
  box-shadow: var(--wc-shadow); font-size: 14px; line-height: 18px;
}
[data-sf-template] .wc-cart-button small { color: var(--wc-on-accent-muted); font-size: 12px; line-height: 15px; }
[data-sf-template] .wc-cart-button:hover { background: #000; }
[data-sf-template] .wc-toast {
  position: fixed; left: 50%; bottom: 76px; z-index: 40; width: max-content; max-width: min(358px, calc(100% - 32px));
  padding: 10px 14px; border-radius: 10px; color: #fff; background: rgb(36 36 36 / 94%); font-size: 13px;
  line-height: 18px; text-align: center; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
[data-sf-template] .wc-toast-on { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 900px) {
  [data-sf-template] .wc-root { padding-bottom: 96px; }
  [data-sf-template] .wc-frame { max-width: 1280px; margin: 0 auto; padding: 24px; }
  [data-sf-template] .wc-hero-copy { justify-items: start; text-align: left; gap: 10px; }
  [data-sf-template] .wc-hero-title { font-size: 40px; line-height: 44px; }
  [data-sf-template] .wc-hero-tagline { font-size: 16px; }
  [data-sf-template] .wc-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  [data-sf-template] .wc-hero-chips li {
    min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px;
    color: rgb(255 255 255 / 90%); background: rgb(255 255 255 / 14%); font-size: 14px;
  }
  [data-sf-template] .wc-hero-actions { grid-template-columns: 56px auto 56px; width: max-content; }
  [data-sf-template] .wc-hero-button { height: 48px; }
  [data-sf-template] .wc-hero-wide { padding: 0 44px; font-weight: 600; }
  [data-sf-template] .wc-layout {
    display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 16px;
  }
  [data-sf-template] .wc-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
  [data-sf-template] .wc-promos, [data-sf-template] .wc-search-panel, [data-sf-template] .wc-content { order: 0; }
  [data-sf-template] .wc-search-panel { position: static; box-shadow: none; }
  [data-sf-template] .wc-content { gap: 12px; }
  [data-sf-template] .wc-cart-button {
    left: auto; right: 24px; bottom: 24px; width: 360px; height: 56px; font-size: 15px;
  }
  [data-sf-template] .wc-toast { bottom: 96px; }
}

/* Right column of the catalog (place `catalog-aside`, U9): exists only when a widget is assigned; the grid narrows.
   Below the mobile threshold the place is not shown (U90). */
[data-sf-template] .wc-aside { display: none; }
@media (min-width: 900px) {
  [data-sf-template] .wc-layout:has(> .wc-aside) { grid-template-columns: 360px minmax(0, 1fr) 280px; }
  [data-sf-template] .wc-aside { display: block; position: sticky; top: 16px; min-width: 0; }
}
[data-sf-template] .wc-root .fm-overlay {
  --fm-overlay: rgb(0 0 0 / 45%);
  --fm-surface: var(--wc-surface);
  --fm-surface-3: var(--wc-line-soft);
  --fm-ink: var(--wc-ink);
  --fm-radius: var(--wc-radius-card);
  --fm-shadow-modal: var(--wc-shadow);
  --fm-shadow-1: var(--wc-shadow-button);
}

/* Sheets: bottom sheet below 900 px, centered window above (pickup-api-storefront cart sheet).
   The product card has its own Figma layout in food.css. */
[data-sf-template] .wc-sheet {
  width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0; overflow: hidden;
  border: 0; border-radius: var(--wc-radius-panel) var(--wc-radius-panel) 0 0;
  color: var(--wc-ink); background: var(--wc-surface); font: 400 14px/1.4 var(--wc-font);
}
[data-sf-template] .wc-sheet[open] { display: flex; flex-direction: column; animation: wc-rise .22s ease-out; }
[data-sf-template] .wc-sheet::backdrop { background: rgb(0 0 0 / 45%); }
/* A bare modal dialog that lifts a window drawn by another family (the D receiving window) above the sheet. */
[data-sf-template] .wc-layer {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0;
  overflow: visible; background: none;
}
[data-sf-template] .wc-layer::backdrop { background: none; }
/* Visuals of the D family inside waycup (receiving window, sign-in): waycup colours, type and pill buttons instead
   of the D palette (owner 20.10). The structure stays D; only the tokens and the window rounding change. */
[data-sf-template] .wc-root [data-fm] {
  --fm-brand: var(--wc-accent); --fm-brand-hover: var(--wc-accent-hover);
  --fm-brand-10: rgb(49 144 54 / 10%); --fm-brand-20: rgb(49 144 54 / 20%); --fm-on-brand: var(--wc-on-accent);
  --fm-surface: var(--wc-surface); --fm-surface-2: var(--wc-soft); --fm-surface-3: var(--wc-line);
  --fm-line: var(--wc-line); --fm-muted: var(--wc-muted);
  --fm-ink: var(--wc-ink); --fm-ink-strong: var(--wc-ink); --fm-ink-heavy: var(--wc-ink);
  --fm-green-soft: var(--wc-selected); --fm-overlay: rgb(0 0 0 / 45%); --fm-font: var(--wc-font);
  --fm-shadow-modal: var(--wc-shadow);
}
[data-sf-template] .wc-root [data-fm] .fm-button { border-radius: var(--wc-radius-control); }
/* Windows (owner 20.10): the classic scrollbar with arrows stuck to the edge of the dish window and the sheets.
   A rounded thumb inset from the edge, without a track or arrows. Chromium draws arrows for `scrollbar-width: thin`
   and ignores the -webkit- pseudo-elements once it is set, so the standard properties are only for other browsers. */
[data-sf-template] .wc-root::-webkit-scrollbar, [data-sf-template] .wc-root *::-webkit-scrollbar { width: 10px; height: 10px; }
[data-sf-template] .wc-root::-webkit-scrollbar-track, [data-sf-template] .wc-root *::-webkit-scrollbar-track, [data-sf-template] .wc-root::-webkit-scrollbar-corner, [data-sf-template] .wc-root *::-webkit-scrollbar-corner { background: transparent; }
[data-sf-template] .wc-root::-webkit-scrollbar-button, [data-sf-template] .wc-root *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
[data-sf-template] .wc-root::-webkit-scrollbar-thumb, [data-sf-template] .wc-root *::-webkit-scrollbar-thumb { border: 3px solid transparent;
  border-radius: 999px; background: var(--wc-line); background-clip: padding-box; }
[data-sf-template] .wc-root::-webkit-scrollbar-thumb:hover, [data-sf-template] .wc-root *::-webkit-scrollbar-thumb:hover { background-color: var(--wc-muted); }
/* The thumb stays out of the rounded corners of the windows (owner 20.10: it stuck out past the corner). */
[data-sf-template] .wc-root :is(.fm-overlay-box, .wc-layer) *::-webkit-scrollbar-track { margin-block: var(--wc-radius-panel); }
/* The dish scroll ends at its footer, not at a corner: the thumb goes to the very bottom. */
[data-sf-template] .wc-root .d-product-scroll::-webkit-scrollbar-track { margin-block-end: 0; }
@supports not selector(::-webkit-scrollbar) {
  [data-sf-template] .wc-root, [data-sf-template] .wc-root * { scrollbar-width: thin; scrollbar-color: var(--wc-line) transparent; }
}
/* The close button of the windows drawn by D blocks (dish, receiving): a round waycup button, not a square. */
[data-sf-template] .wc-root .fm-overlay-close { border-radius: 50%; color: var(--wc-ink);
  background: var(--wc-surface); box-shadow: var(--wc-shadow-button); }
@media (min-width: 900px) {
  [data-sf-template] .wc-root [data-fm] .fm-overlay-box:not(:has(.d-payredirect)) { border-radius: var(--wc-radius-panel); }
}
[data-sf-template] :where(.wc-sheet) *, [data-sf-template] :where(.wc-sheet) *::before, [data-sf-template] :where(.wc-sheet) *::after { box-sizing: border-box; }
[data-sf-template] :where(.wc-sheet) :where(h2, h3, p, ul, dl, dd, fieldset) { margin: 0; padding: 0; }
[data-sf-template] :where(.wc-sheet) :where(ul) { list-style: none; }
[data-sf-template] :where(.wc-sheet) :where(button, input) { font: inherit; color: inherit; }
[data-sf-template] :where(.wc-sheet) :where(button) { cursor: pointer; }
[data-sf-template] :where(.wc-sheet) :where(img) { display: block; max-width: 100%; }
[data-sf-template] .wc-sheet :focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
[data-sf-template] .wc-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px;
  border-bottom: 1px solid var(--wc-line-soft);
}
[data-sf-template] .wc-sheet-head h2 { font-size: 20px; line-height: 24px; font-weight: 700; }
[data-sf-template] .wc-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
[data-sf-template] .wc-sheet-foot {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--wc-line-soft); background: var(--wc-surface);
}
[data-sf-template] .wc-sheet-foot .wc-button { flex: 1; }

@media (min-width: 900px) {
  [data-sf-template] .wc-sheet {
    width: min(560px, calc(100% - 48px)); max-height: calc(100dvh - 64px); margin: auto;
    border-radius: var(--wc-radius-panel); box-shadow: var(--wc-shadow);
  }
  [data-sf-template] .wc-sheet[open] { animation: wc-fade .18s ease-out; }
  [data-sf-template] .wc-sheet-sm { width: min(480px, calc(100% - 48px)); }
  [data-sf-template] .wc-sheet-head { padding: 20px 20px 14px; }
  [data-sf-template] .wc-sheet-body { padding: 20px; }
  [data-sf-template] .wc-sheet-foot { padding: 16px 20px; }
}
/* The one-of list of the dish window in waycup (sfv2-5-00148): Figma has no dropdown — the field is an input plate
   (border/input/default, border-radius_s), the list a white plate with the island shadow, the mark the radio of the window's rows. */
[data-sf-template] .wc-root .fm-choice { gap: 12px; }
[data-sf-template] .wc-root .fm-choice-field { min-height: 56px; padding: 8px 16px; border-color: var(--wc-line);
  border-radius: var(--wc-radius-field); }
[data-sf-template] .wc-root .fm-choice-field[aria-expanded='true'] { border-color: var(--wc-ink); }
[data-sf-template] .wc-root .fm-choice-field[aria-invalid='true'] { border-color: var(--wc-danger-line); }
[data-sf-template] .wc-root .fm-group .fm-choice-list { padding: 8px; border-radius: var(--wc-radius-field);
  box-shadow: var(--wc-shadow-island); }
[data-sf-template] .wc-root .fm-choice-list li { min-height: 48px; padding: 10px 12px; border-radius: var(--wc-radius-card); }
[data-sf-template] .wc-root .fm-choice-list li:hover, [data-sf-template] .wc-root .fm-choice-list li:focus-visible { background: var(--wc-soft); }
[data-sf-template] .wc-root .fm-choice-list li:focus-visible { outline-color: var(--wc-focus); }

/* Group 4 visuals of waycup (12.2), hi-fi light theme (TOKENS 1629:40841). modal 2386-24273 and modal-18
   1752-13333: 355 px card, round 90 px picture on the badge grey, title 20/700, grey text, stacked pill buttons
   (primary green, secondary outlined); dialog 2395-30455: title and two buttons in a row; banner 2199-24563:
   photo 358×150 with a large white caption. Pages and the site state have no frame: tokens only. */
[data-sf-template] .wc-site-modal { width: min(355px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  overflow: auto; border: 0; border-radius: var(--wc-radius-panel); color: var(--wc-ink);
  background: var(--wc-surface); box-shadow: var(--wc-shadow); font: 400 14px/1.4 var(--wc-font); }
[data-sf-template] .wc-site-modal::backdrop { background: rgb(0 0 0 / 45%); }
[data-sf-template] .wc-site-age-modal::backdrop { backdrop-filter: blur(8px); }
[data-sf-template] .wc-site-modal :focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
[data-sf-template] .wc-site-box { position: relative; display: grid; justify-items: center; gap: 8px; padding: 24px 20px 20px;
  text-align: center; }
[data-sf-template] .wc-site-box h2 { margin: 8px 0 0; font-size: 20px; line-height: 24px; font-weight: 700; }
[data-sf-template] .wc-site-box p { margin: 0; color: var(--wc-muted); }
[data-sf-template] .wc-site-close { position: absolute; top: 12px; right: 12px; }
[data-sf-template] .wc-site-picture { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; background: var(--wc-badge); }
[data-sf-template] .wc-site-icon, [data-sf-template] .wc-site-age { display: grid; place-items: center; color: var(--wc-ink); }
[data-sf-template] .wc-site-age { font-size: 26px; font-weight: 700; }
[data-sf-template] .wc-site-actions { display: grid; gap: 8px; width: 100%; margin-top: 12px; }
[data-sf-template] .wc-site-actions .wc-button { text-decoration: none; }
[data-sf-template] .wc-button-outline { color: var(--wc-ink); background: var(--wc-surface);
  box-shadow: inset 0 0 0 1.5px var(--wc-line); }
[data-sf-template] .wc-button-outline:hover:not(:disabled) { background: var(--wc-line-soft); }
/* Cookies (`dialog`): a card at the bottom, not modal. */
[data-sf-template] .wc-cookies { position: fixed; z-index: 45; left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; gap: 8px; padding: 16px; border-radius: var(--wc-radius-row); color: var(--wc-ink);
  background: var(--wc-surface); box-shadow: var(--wc-shadow); font: 400 14px/1.4 var(--wc-font); }
[data-sf-template] .wc-cookies h2 { margin: 0; font-size: 18px; line-height: 22px; font-weight: 700; text-align: center; }
[data-sf-template] .wc-cookies p { margin: 0; color: var(--wc-muted); text-align: center; }
[data-sf-template] .wc-cookies a { margin-left: 4px; color: var(--wc-ink); }
[data-sf-template] .wc-cookies-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
[data-sf-template] .wc-cookies-reject { justify-self: center; padding: 4px; border: 0; color: var(--wc-muted); background: none;
  font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Site state. */
[data-sf-template] .wc-site-notice { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--wc-ink); }
[data-sf-template] .wc-site-down { display: grid; min-height: 80vh; place-items: center; }
/* Pages of content inside the sheet of the template. */
[data-sf-template] .wc-page { display: grid; gap: 12px; }
[data-sf-template] .wc-page-title { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; }
[data-sf-template] .wc-page-lead { margin: 0; color: var(--wc-muted); }
[data-sf-template] .wc-page-body { display: grid; gap: 12px; line-height: 1.5; }
[data-sf-template] .wc-page-body :where(h2, h3, h4, p, ul, ol, figure) { margin: 0; }
[data-sf-template] .wc-page-body h2 { margin-top: 8px; font-size: 18px; line-height: 22px; font-weight: 700; }
[data-sf-template] .wc-page-body h3 { font-size: 16px; font-weight: 700; }
[data-sf-template] .wc-page-html { display: grid; gap: 10px; }
[data-sf-template] .wc-page-html ul, [data-sf-template] .wc-page-html ol { display: grid; gap: 4px; padding-left: 22px; }
[data-sf-template] .wc-page-html ul { list-style: disc; }
[data-sf-template] .wc-page-html ol { list-style: decimal; }
[data-sf-template] .wc-page-html a { color: var(--wc-ink); }
[data-sf-template] .wc-page-html table { width: 100%; border-collapse: collapse; font-size: 13px; }
[data-sf-template] .wc-page-html caption { padding-bottom: 6px; text-align: left; color: var(--wc-muted); }
[data-sf-template] .wc-page-html th, [data-sf-template] .wc-page-html td { padding: 8px; border-bottom: 1px solid var(--wc-line-soft); text-align: left; }
[data-sf-template] .wc-page-html th { background: var(--wc-badge); font-weight: 600; }
@media (max-width: 899px) { [data-sf-template] .wc-page-html table { display: block; max-width: 100%; overflow-x: auto; } }
[data-sf-template] .wc-page-html img { border-radius: var(--wc-radius-field); }
[data-sf-template] .wc-page-html figcaption { margin-top: 6px; color: var(--wc-muted); font-size: 13px; }
[data-sf-template] .wc-page-html iframe { width: 100%; border: 0; border-radius: var(--wc-radius-field); background: var(--wc-badge); }
[data-sf-template] .wc-page-fallback { margin: 0; padding: 12px 14px; border-radius: var(--wc-radius-field); color: var(--wc-muted);
  background: var(--wc-badge); }
[data-sf-template] .wc-page-legal .wc-page-body { font-size: 13px; }
/* Promotions on the `banner` component. */
[data-sf-template] .wc-promotions { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
[data-sf-template] .wc-promotion { display: grid; gap: 6px; }
[data-sf-template] .wc-promotion h3 { margin: 4px 0 0; font-size: 16px; line-height: 20px; font-weight: 700; }
[data-sf-template] .wc-promotion p { margin: 0; color: var(--wc-muted); }
[data-sf-template] .wc-promotion .wc-button { justify-self: start; min-height: 40px; padding: 0 18px; text-decoration: none; }
[data-sf-template] .wc-promotion-banner { position: relative; display: grid; place-items: center; aspect-ratio: 358 / 150;
  overflow: hidden; border-radius: var(--wc-radius-field); background: var(--wc-dark); }
[data-sf-template] .wc-promotion-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.72); }
[data-sf-template] .wc-promotion-banner b { position: relative; padding: 0 16px; color: #fff; font-size: 26px; line-height: 1.1;
  font-weight: 800; text-align: center; text-transform: uppercase; }
[data-sf-template] .wc-site-links { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
[data-sf-template] .wc-site-links-nav { margin-top: 8px; }
[data-sf-template] .wc-site-links-nav .wc-site-links { margin: 0; }
[data-sf-template] .wc-site-links .wc-button { width: 100%; justify-content: flex-start; }
@media (min-width: 900px) {
  [data-sf-template] .wc-cookies { left: 24px; right: auto; bottom: 24px; width: 400px; }
  [data-sf-template] .wc-site-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* waycup tokens — hi-fi light theme of Figma waycup (SMARTOFOOD): «03. theme / light» colours and
   «02. sizing» from the TOKENS page 1629:40841, resolved in waycup-figma-atlas («24 - Theme light-dark»,
   «25 - Sizing tokens»). Onest is replaced by the self-hosted Golos Text of the lab (no external fonts).
   Text colours that fail 4.5:1 on white at small sizes are darkened (success and error text). */
[data-sf-template] .wc-root {
  --wc-page: #fff;                 /* owner 20.10: white page; Figma bg/body is #EEEFF2 */
  --wc-surface: #fff;              /* bg/island, bg/input */
  --wc-ink: #1e2023;               /* text/primary */
  --wc-ink-soft: #1e2023;
  --wc-muted: #767e8a;             /* text/secondary, icon/substrate-button */
  --wc-faint: #bbbec4;             /* text/old price, border/input/checkbox */
  --wc-line: #d6d9df;              /* border/input/default, border/divider */
  --wc-line-soft: #eeeff2;
  --wc-chip: transparent;          /* navigation button, default */
  --wc-media: #eeeff2;             /* bg/food-card/top */
  --wc-soft: #eeeff2;              /* bg/button/secondary, bg/button/substrate/grey */
  --wc-badge: #f2f3f7;             /* bg/long-badge, bg/badge/additional */
  --wc-accent: #319036;            /* bg/button/primary */
  --wc-accent-hover: #287a2c;
  --wc-on-accent: #fff;            /* icon/button-primary */
  --wc-on-accent-muted: rgb(255 255 255 / 60%);
  --wc-dark: #1e2023;              /* bg/button/navigation-button-active */
  --wc-selected: #d4e8d5;          /* bg/weight-options/selected option */
  --wc-check: #5aa65e;             /* bg/check-button/check-mark */
  --wc-success: #26762a;           /* text on white, darker than #319036 for contrast */
  --wc-danger: #d0261a;            /* text/error #FF3220, darkened for contrast */
  --wc-danger-line: #ff3220;       /* border/input/error */
  --wc-focus: #1e2023;
  --wc-radius-panel: 32px;         /* island/border-radius */
  --wc-radius-row: 24px;           /* additional-item/border radius */
  --wc-radius-card: 12px;          /* food-card/search-results/border-radius */
  --wc-radius-control: 999px;      /* button/border-radius, search-input/border-radius */
  --wc-radius-field: 16px;         /* border-radius_s */
  --wc-gap: 8px;                   /* island/gap */
  --wc-pad: 16px;                  /* body/padding-xy */
  --wc-font: 'Golos Text', Onest, system-ui, sans-serif;
  --wc-shadow: 0 18px 60px rgb(17 17 17 / 12%);
  --wc-shadow-button: 0 4px 16px rgb(17 17 17 / 10%);
  --wc-shadow-island: 0 2px 6px rgb(17 17 17 / 5%), 0 8px 28px rgb(17 17 17 / 8%); /* islands on the white page */
  --wc-cart-height: 56px;          /* button/size/lg */
}

/* Lab shell override: the lab layout is desktop-only; this route is responsive (same as /prototypes/mlp). */

[data-sf-template] .wc-root {
  min-height: 100vh;
  color: var(--wc-ink);
  background: var(--wc-page);
  font: 400 14px/1.4 var(--wc-font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
[data-sf-template] .wc-root *, [data-sf-template] .wc-root *::before, [data-sf-template] .wc-root *::after { box-sizing: border-box; }
[data-sf-template] :where(.wc-root) :where(h1, h2, h3, p, ul, dl, dd, figure, fieldset) { margin: 0; padding: 0; }
[data-sf-template] :where(.wc-root) :where(ul) { list-style: none; }
[data-sf-template] :where(.wc-root) :where(button, input, select) { font: inherit; color: inherit; }
[data-sf-template] :where(.wc-root) :where(button) { cursor: pointer; }
[data-sf-template] :where(.wc-root) :where(button:disabled) { cursor: not-allowed; }
[data-sf-template] :where(.wc-root) :where(img) { display: block; max-width: 100%; }
[data-sf-template] .wc-root :focus-visible { outline: 2px solid var(--wc-focus); outline-offset: 2px; }
/* One focus indicator: text fields show only their dark border (also on mouse focus), never an outline;
   the 2 px ring belongs to buttons, links and cards and appears for the keyboard only (:focus-visible). */
[data-sf-template] .wc-root :focus:not(:focus-visible) { outline: none; }
[data-sf-template] .wc-root :is(input:not([type='radio'], [type='checkbox']), textarea):is(:focus, :focus-visible) { outline: none; }
[data-sf-template] .wc-root [tabindex='-1']:focus { outline: none; }
[data-sf-template] .wc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[data-sf-template] .wc-button {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 24px; border: 0; border-radius: var(--wc-radius-control);
  color: var(--wc-on-accent); background: var(--wc-accent); font-weight: 500;
}
[data-sf-template] .wc-button:hover:not(:disabled) { background: var(--wc-accent-hover); }
[data-sf-template] .wc-button:disabled { opacity: .45; }
[data-sf-template] .wc-button-light { color: var(--wc-ink); background: var(--wc-soft); }
[data-sf-template] .wc-button-light:hover:not(:disabled) { background: var(--wc-line); }
[data-sf-template] .wc-button-wide { width: 100%; }
[data-sf-template] .wc-round {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; color: var(--wc-ink); background: var(--wc-soft);
}
[data-sf-template] .wc-round:hover { background: var(--wc-line-soft); }
[data-sf-template] .wc-hint { display: block; color: var(--wc-muted); font-size: 12px; line-height: 15px; }
[data-sf-template] .wc-error { color: var(--wc-danger); font-size: 13px; line-height: 18px; }
[data-sf-template] .wc-success { color: var(--wc-success); font-size: 13px; line-height: 18px; }
[data-sf-template] .wc-demo-note { color: var(--wc-muted); font-size: 12px; line-height: 16px; }

/* Hi-fi light theme of Figma waycup (owner decision 06.10 «давай»): composition of HOME 2385:57426,
   CART 2387:16139 and PAY 2387:16140 on top of the base blocks. Colours and sizes are the tokens of
   tokens.css; this file only arranges islands, pills and rows the way the hi-fi pages do. Screens that the
   hi-fi pages do not have (1366 layout, states, DEMO bar) use the same rules — new screen design. */

/* HOME · welcome block «Без фона» 2387:119867: the top row of 80 (empty 48, logo 160×80 centred, menu button 48) on
   the page colour. LEGACY has a logo, not a photo of the place, so there is no photo variant. The receiving pill is
   the owner's addition (06.10). */
[data-sf-template] .wc-hero { gap: 16px; padding: 0 16px 16px; color: var(--wc-ink); background: var(--wc-page); }
[data-sf-template] .wc-hero-top {
  min-height: 80px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px;
}
[data-sf-template] .wc-hero-copy { grid-column: 2; min-width: 0; }
[data-sf-template] .wc-hero-title { font-size: 24px; line-height: 30px; letter-spacing: .06em; }
[data-sf-template] .wc-hero-tagline:empty { display: none; }
[data-sf-template] .wc-hero-logo { display: block; max-width: 160px; max-height: 56px; object-fit: contain; }
[data-sf-template] .wc-hero-menu {
  grid-column: 3; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: 50%; color: var(--wc-ink); background: transparent;
}
[data-sf-template] .wc-hero-menu:hover { background: var(--wc-line); }
[data-sf-template] .wc-hero-receiving {
  align-self: center; margin-top: auto; border-radius: var(--wc-radius-control); color: var(--wc-ink);
  background: rgb(255 255 255 / 94%); box-shadow: var(--wc-shadow-button);
}
[data-sf-template] .wc-hero-receiving:hover { background: #fff; }
[data-sf-template] .wc-hero-receiving small { color: var(--wc-muted); }
[data-sf-template] .wc-layout { position: relative; z-index: 1; margin-top: 0; }
[data-sf-template] .wc-panel { border-radius: var(--wc-radius-panel); }
[data-sf-template] .wc-panel-title { color: var(--wc-ink); }

/* HOME · stories: circles with the green ring (border/stories-new-story), colour photos. */
[data-sf-template] .wc-promo-ring { border: 2px solid var(--wc-accent); padding: 2px; }
[data-sf-template] .wc-promo-ring img { filter: none; }
[data-sf-template] .wc-promo-label { display: none; }
[data-sf-template] .wc-promo:hover .wc-promo-ring { border-color: var(--wc-accent-hover); }
[data-sf-template] .wc-promo-caption { color: var(--wc-muted); }

/* HOME · search pill, navigation chips (active — dark pill). */
[data-sf-template] .wc-search-row { position: relative; grid-template-columns: minmax(0, 1fr); }
[data-sf-template] .wc-search {
  height: 56px; padding: 0 16px; border-color: var(--wc-line); border-radius: var(--wc-radius-control);
}
[data-sf-template] .wc-search:focus-within { border-color: var(--wc-accent); }
[data-sf-template] .wc-chip { height: 40px; padding: 0 16px 0 12px; border-radius: var(--wc-radius-control); font-weight: 400; }
[data-sf-template] .wc-chip img { width: 16px; height: 16px; }
[data-sf-template] .wc-chip:hover { background: var(--wc-soft); }
[data-sf-template] .wc-chip[aria-current='true'] { color: #fff; background: var(--wc-dark); }
[data-sf-template] .wc-search-panel { box-shadow: none; }
/* HOME mobile «Light mode» 2385:57661: stories lie on the page colour (title 20 bold, padding 20/16); the catalog is one
   white sheet with the top radius 32 — search and chips in its head (gap 16), sections one after another with 32
   between them, no islands per section. */
@media (max-width: 899.98px) {
  [data-sf-template] .wc-root .wc-layout { gap: 0; }
  [data-sf-template] .wc-layout .wc-promos { padding: 20px 16px; border-radius: var(--wc-radius-panel) var(--wc-radius-panel) 0 0;
    background: var(--wc-page); }
  [data-sf-template] .wc-layout .wc-promos .wc-panel-title { margin-bottom: 16px; font-size: 20px; line-height: 26px; }
  [data-sf-template] .wc-layout .wc-promo-row { gap: 8px; }
  [data-sf-template] .wc-layout .wc-search-panel { padding: 16px; border-radius: var(--wc-radius-panel) var(--wc-radius-panel) 0 0; }
  [data-sf-template] .wc-layout .wc-chips { gap: 0; margin-top: 16px; }
  [data-sf-template] .wc-layout .wc-content { gap: 0; background: var(--wc-surface); }
  [data-sf-template] .wc-layout .wc-content .wc-panel { padding: 16px; border-radius: 0; }
  [data-sf-template] .wc-layout .wc-content .wc-section .wc-panel-title { line-height: 26px; }
  [data-sf-template] .wc-layout .wc-content .wc-section:last-child { padding-bottom: 32px; }
}

/* HOME · cards: photo tile #EEEFF2, white «+», price, name, weight. */
[data-sf-template] .wc-card-media { border-radius: var(--wc-radius-card); background: var(--wc-media); }
[data-sf-template] .wc-badge { border-radius: 4px; color: var(--wc-ink); background: #fff; }
/* A tag as in Legacy (smartofood-front Tag, controls-xs-label): 12 px of weight 500, its icon, its own colours. */
[data-sf-template] .wc-tag { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; letter-spacing: .01em; }
[data-sf-template] .wc-tag svg { flex: none; }
[data-sf-template] .wc-card-add { color: var(--wc-muted); box-shadow: none; }
[data-sf-template] .wc-card-add-on, [data-sf-template] .wc-card-add-on:hover:not(:disabled) { color: #fff; background: var(--wc-accent); }
[data-sf-template] .wc-card-weight { color: var(--wc-muted); font-size: 14px; line-height: 19.6px; }
[data-sf-template] .wc-section .wc-panel-title { font-size: 20px; }
[data-sf-template] .wc-cart-button {
  height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--wc-radius-control); background: var(--wc-accent);
}
[data-sf-template] .wc-cart-button:hover { background: var(--wc-accent-hover); }
[data-sf-template] .wc-cart-button small { font-size: 14px; }
[data-sf-template] .wc-checkout { justify-content: center; }
[data-sf-template] .wc-checkout strong { color: var(--wc-on-accent-muted); font-size: 15px; font-weight: 500; }

/* Sheets: island radius, page background with white islands (CART / PAY), centered head as in hi-fi. */
[data-sf-template] .wc-sheet { border-radius: var(--wc-radius-panel) var(--wc-radius-panel) 0 0; }
[data-sf-template] .wc-sheet-head { border-bottom: 0; }
[data-sf-template] .wc-sheet-head h2 { text-align: center; }
[data-sf-template] .wc-sheet-head:not(:has(.wc-back)) h2 { padding-left: 40px; }
[data-sf-template] .wc-sheet-body { background: var(--wc-page); }
[data-sf-template] .wc-sheet-foot { border-top: 0; box-shadow: 0 -8px 24px rgb(17 17 17 / 6%); }
[data-sf-template] .wc-sheet-foot .wc-button { min-height: 56px; }
/* «Ваш заказ»: one and the same gap between all blocks of the cart sheet (owner 21.10.2026). The D blocks of the
   sheet (time) stand in `.fm-root` with `display: contents`, so they are items of the column too. */
[data-sf-template] .wc-sheet-body:has(.wc-lines, .wc-cart-empty) { display: flex; flex-direction: column; gap: 16px; }
[data-sf-template] :is(.wc-sheet-body:has(.wc-lines, .wc-cart-empty), .wc-sheet-body:has(.wc-lines, .wc-cart-empty) > .fm-root) > * {
  flex-shrink: 0; margin-block: 0;
}
[data-sf-template] .wc-sheet-body:has(.wc-lines, .wc-cart-empty) > .wc-row:first-child { margin-bottom: 0; }
/* The time block of D in the sheet is an island as the others. */
[data-sf-template] .wc-sheet-body .d-block { border-radius: var(--wc-radius-row); background: var(--wc-surface); }

/* CART 2387:136592: lines island, pencil + counter, «Не забудьте добавить» island, action rows. */
[data-sf-template] .wc-lines { padding: 16px; border: 0; border-radius: var(--wc-radius-panel); background: var(--wc-surface); }
[data-sf-template] .wc-line { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: 'img copy' 'img bottom'; row-gap: 8px; }
[data-sf-template] .wc-line + .wc-line { padding-top: 14px; border-top: 1px solid var(--wc-line); }
[data-sf-template] .wc-line img { grid-area: img; align-self: start; border-radius: var(--wc-radius-card); background: var(--wc-media); }
[data-sf-template] .wc-line-copy { grid-area: copy; }
[data-sf-template] .wc-line-name { font-size: 14px; line-height: 18px; font-weight: 500; }
[data-sf-template] .wc-line-config { color: var(--wc-faint); }
[data-sf-template] .wc-line-bottom { grid-area: bottom; display: flex; align-items: center; gap: 8px; }
[data-sf-template] .wc-line-bottom strong { margin-right: auto; font-size: 15px; font-weight: 600; }
[data-sf-template] .wc-line-bottom .wc-round { color: var(--wc-muted); }
[data-sf-template] .wc-pill { height: 40px; padding: 0 6px; border-radius: var(--wc-radius-control); background: var(--wc-soft); }
[data-sf-template] .wc-pill button { color: var(--wc-muted); }
[data-sf-template] .wc-recs {
  margin-top: 8px; padding: 20px 16px 12px; border-radius: var(--wc-radius-panel); background: var(--wc-surface);
}
[data-sf-template] .wc-recs h3 { margin-bottom: 12px; font-size: 20px; text-align: center; }
[data-sf-template] .wc-rec { grid-template-columns: 64px minmax(0, 1fr) 40px; }
[data-sf-template] .wc-rec img { width: 64px; height: 64px; border-radius: var(--wc-radius-card); background: var(--wc-media); }
[data-sf-template] .wc-rec strong { font-size: 14px; font-weight: 500; }
[data-sf-template] .wc-rec small { color: var(--wc-faint); }
[data-sf-template] .wc-rec .wc-round { color: var(--wc-muted); }

[data-sf-template] .wc-loyalty { gap: 8px; margin-top: 8px; padding: 0; background: none; }
[data-sf-template] .wc-loyalty-row {
  position: relative; min-height: 96px; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px;
  align-items: center; padding: 16px; border-radius: var(--wc-radius-row); background: var(--wc-surface);
}
[data-sf-template] .wc-loyalty .wc-row-tile, [data-sf-template] .wc-row-tile { border-radius: 16px; color: var(--wc-muted); background: var(--wc-soft); }
[data-sf-template] .wc-promo-form { grid-column: 2 / -1; gap: 8px; }
[data-sf-template] .wc-label { font-size: 16px; font-weight: 600; }
[data-sf-template] .wc-promo-field input { height: 48px; border-color: var(--wc-line); border-radius: var(--wc-radius-control); }
[data-sf-template] .wc-promo-field input:focus { border-color: var(--wc-accent); }
[data-sf-template] .wc-promo-field .wc-button { padding: 0 18px; }
[data-sf-template] .wc-promo-applied {
  grid-column: 2 / -1; min-height: 0; justify-content: space-between; padding: 0; color: var(--wc-ink);
  background: none;
}
[data-sf-template] .wc-promo-applied > span { display: grid; gap: 2px; }
[data-sf-template] .wc-promo-applied strong { font-size: 16px; }
[data-sf-template] .wc-promo-applied small { color: var(--wc-muted); font-weight: 400; }
[data-sf-template] .wc-promo-applied .wc-round { margin-left: auto; padding: 0; color: var(--wc-muted); text-decoration: none; }
[data-sf-template] .wc-loyalty-hint { padding: 0 16px; }
[data-sf-template] .wc-loyalty-row.wc-switch { cursor: pointer; }
[data-sf-template] .wc-loyalty-row.wc-switch input {
  position: absolute; top: 50%; right: 16px; width: 44px; height: 26px; transform: translateY(-50%);
}
[data-sf-template] .wc-switch-text { font-size: 16px; font-weight: 600; }
[data-sf-template] .wc-switch-text small { font-size: 12px; }
[data-sf-template] #wc-loyalty-feedback:not(:empty) { padding: 0 16px; }
[data-sf-template] .wc-totals { padding: 16px; border-radius: var(--wc-radius-row); background: var(--wc-surface); }
[data-sf-template] .wc-totals .wc-totals-sum { border-top-color: var(--wc-line); }

/* PAY 2395:77357: receipt island on the page background, long badges, action rows, green pay button. */
[data-sf-template] .wc-receipt { border-radius: var(--wc-radius-panel) var(--wc-radius-panel) 0 0; background: var(--wc-surface); }
[data-sf-template] .wc-receipt-icon { color: var(--wc-muted); background: var(--wc-soft); }
[data-sf-template] .wc-receipt-sum s { color: var(--wc-faint); }
[data-sf-template] .wc-receipt-rows, [data-sf-template] .wc-receipt-rows li { border-color: var(--wc-line); }
[data-sf-template] .wc-receipt-badges { display: grid; gap: 8px; margin-top: 16px; }
[data-sf-template] .wc-receipt-badges li {
  min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-radius: var(--wc-radius-card);
  color: var(--wc-ink); background: var(--wc-badge); font-size: 13px;
}
[data-sf-template] .wc-receipt-badges svg { color: var(--wc-muted); }
[data-sf-template] .wc-receipt-badges b { margin-left: auto; color: var(--wc-muted); font-weight: 400; }
[data-sf-template] .wc-receipt-teeth {
  background: radial-gradient(circle at 50% 100%, var(--wc-page) 6px, transparent 6.5px) 4px 0 / 20px 12px repeat-x;
}
[data-sf-template] .wc-row, [data-sf-template] .wc-pay-option, [data-sf-template] .wc-zone, [data-sf-template] .wc-flow-panel {
  min-height: 96px; padding: 16px; border-radius: var(--wc-radius-row); background: var(--wc-surface);
}
[data-sf-template] .wc-row-action:hover { background: #fafafb; }
[data-sf-template] .wc-row-link { color: var(--wc-muted); }
[data-sf-template] .wc-pay-option:has(input:checked) { border-color: var(--wc-accent); background: var(--wc-surface); }
[data-sf-template] .wc-pay-option:has(input:checked) .wc-pay-mark { border-color: var(--wc-accent); }
[data-sf-template] .wc-pay-mark { border-color: var(--wc-faint); }
[data-sf-template] .wc-comment, [data-sf-template] .wc-pay-summary, [data-sf-template] .wc-order-lines, [data-sf-template] .wc-pay-demo, [data-sf-template] .wc-flow-demo {
  padding: 16px; border-radius: var(--wc-radius-row); background: var(--wc-surface);
}
[data-sf-template] .wc-comment { display: grid; gap: 12px; }
[data-sf-template] .wc-comment textarea { border-radius: var(--wc-radius-field); }
[data-sf-template] .wc-flow-panel-warning { background: #fff4d6; }
[data-sf-template] .wc-flow-panel-warning .wc-row-tile { background: #fff; }
[data-sf-template] .wc-flow-panel-success .wc-row-tile { color: var(--wc-accent); background: var(--wc-selected); }
[data-sf-template] .wc-intro-tile { color: var(--wc-muted); background: var(--wc-surface); }
[data-sf-template] .wc-flow { gap: 8px; }
[data-sf-template] .wc-flow > .wc-demo-note, [data-sf-template] .wc-flow > .wc-consent { padding: 0 8px; }

/* Choice controls in the hi-fi palette: selected weight option (green border on #D4E8D5), tabs, check marks. */
[data-sf-template] .wc-tile > span, [data-sf-template] .wc-venue-option > span { border-color: var(--wc-line); border-radius: var(--wc-radius-card);
  background: var(--wc-surface); }
[data-sf-template] .wc-tile input:checked + span, [data-sf-template] .wc-venue-option input:checked + span {
  border: 2px solid var(--wc-accent); color: var(--wc-ink); background: var(--wc-selected);
}
[data-sf-template] .wc-tile input:checked + span small { color: var(--wc-muted); }
[data-sf-template] .wc-picker-button { border-radius: var(--wc-radius-control); }
[data-sf-template] .wc-picker-list .wc-picker-active { background: var(--wc-soft); }
[data-sf-template] .wc-picker-list li[aria-selected='true'] svg { color: var(--wc-accent); }
[data-sf-template] .wc-field input, [data-sf-template] .wc-field select { border-radius: var(--wc-radius-control); }
[data-sf-template] .wc-field :is(input, textarea):focus, [data-sf-template] .wc-picker-button:focus, [data-sf-template] .wc-picker-button[aria-expanded='true'], [data-sf-template] .wc-phone:focus-within { border-color: var(--wc-accent); }
[data-sf-template] .wc-phone { border-color: var(--wc-line); border-radius: var(--wc-radius-control); }
[data-sf-template] .wc-code-cells span { border-color: var(--wc-line); }
[data-sf-template] .wc-code:focus-within .wc-code-current { border-color: var(--wc-accent); }
[data-sf-template] .wc-provider { border-color: var(--wc-line); border-radius: var(--wc-radius-control); }
[data-sf-template] .wc-provider span { background: var(--wc-dark); }
[data-sf-template] .wc-mode-pill input:checked + span { color: #fff; background: var(--wc-dark); }
[data-sf-template] .wc-address-input input { border-radius: var(--wc-radius-control); }
[data-sf-template] .wc-address-input input:focus { border-color: var(--wc-accent); }
[data-sf-template] .wc-map-pin { background: var(--wc-accent); }
[data-sf-template] .wc-check {
  min-height: 56px; padding: 0 14px; border: 1px solid var(--wc-line); border-radius: var(--wc-radius-card);
}
[data-sf-template] .wc-check:has(input:checked) { border: 2px solid var(--wc-accent); background: var(--wc-selected); }
[data-sf-template] .wc-filter-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-sf-template] .wc-filter-options legend, [data-sf-template] .wc-filter-options .wc-demo-note { grid-column: 1 / -1; }

/* HOME · order status 2385:58813: progress ring with the stage icon (display of the server stage). */
[data-sf-template] .wc-order { display: grid; justify-items: center; gap: 6px; text-align: center; }
[data-sf-template] .wc-order-ring {
  --wc-ring: 25%; width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 8px;
  border-radius: 50%; color: var(--wc-ink);
  background: radial-gradient(circle, var(--wc-soft) 0 38px, transparent 39px),
    conic-gradient(var(--wc-accent) var(--wc-ring), var(--wc-selected) 0);
}
[data-sf-template] .wc-order-ring-preparing { --wc-ring: 50%; }
[data-sf-template] .wc-order-ring-completed { --wc-ring: 100%; }
[data-sf-template] .wc-order-ring-cancelled { --wc-ring: 0%; color: var(--wc-muted); }
[data-sf-template] .wc-order-title { font-size: 22px; line-height: 28px; font-weight: 700; }
[data-sf-template] .wc-order-sub { color: var(--wc-muted); font-size: 12px; line-height: 15px; }
[data-sf-template] .wc-order-meta { margin-bottom: 8px; color: var(--wc-muted); font-size: 13px; }

/* Venue info 2385:57561: description, hours, language row. */
[data-sf-template] .wc-venue-hours { display: flex; align-items: center; gap: 8px; color: var(--wc-muted); }
[data-sf-template] .wc-venue-list li { border-radius: var(--wc-radius-card); background: var(--wc-surface); }
[data-sf-template] .wc-venue-row {
  min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 0;
  border-radius: var(--wc-radius-control); color: var(--wc-ink); background: var(--wc-surface); font-weight: 500;
}
[data-sf-template] .wc-venue-row > :last-child { margin-left: auto; color: var(--wc-muted); }
[data-sf-template] .wc-venue-row > span { font-size: 12px; font-weight: 700; }

@media (min-width: 900px) {
  [data-sf-template] .wc-hero { padding: 0 0 16px; }
  [data-sf-template] .wc-hero-logo { max-height: 72px; }
  [data-sf-template] .wc-hero-top { grid-template-columns: minmax(0, 1fr) 48px; }
  [data-sf-template] .wc-hero-copy { grid-column: 1; }
  [data-sf-template] .wc-hero-menu { grid-column: 2; }
  [data-sf-template] .wc-hero-title { font-size: 40px; line-height: 44px; letter-spacing: .12em; }
  [data-sf-template] .wc-hero-receiving { align-self: flex-start; }
  [data-sf-template] .wc-card { background: var(--wc-surface); padding: 0; }
  [data-sf-template] .wc-card-media { background: var(--wc-media); }
  [data-sf-template] .wc-card-body { padding: 10px 2px 2px; }
  [data-sf-template] .wc-sheet { border-radius: var(--wc-radius-panel); }
  [data-sf-template] .wc-cart-button { width: 360px; }
}

/* Compact head of the order screens (12.1): «Статус заказа» 2387:121560 — brand centred, menu on the right. */
[data-sf-template] .wc-hero-compact { position: relative; display: grid; place-items: center; min-height: 72px; padding: 12px 64px; }
[data-sf-template] .wc-hero-compact-brand strong { font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; }
[data-sf-template] .wc-hero-compact-menu { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid;
  place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; color: var(--wc-muted);
  background: transparent; }
[data-sf-template] .wc-hero-compact-menu:hover { background: var(--wc-soft); }

/* White page (owner 20.10: «белый фон, плашки отбрасывают тень»): the islands that lay on the grey bg/body of Figma
   stand out by their shadow. On mobile the catalog stays one sheet: its head casts the shadow upwards, the sections
   inside it and the stories on the page have none. */
[data-sf-template] :is(.wc-panel, .wc-lines, .wc-recs, .wc-loyalty-row, .wc-totals, .wc-receipt, .wc-row, .wc-pay-option, .wc-zone,
  .wc-flow-panel, .wc-comment, .wc-pay-summary, .wc-order-lines, .wc-pay-demo, .wc-flow-demo, .wc-venue-list li,
  .wc-venue-row, .wc-sheet-body .d-block) { box-shadow: var(--wc-shadow-island); }
@media (max-width: 899.98px) {
  [data-sf-template] .wc-layout :is(.wc-promos, .wc-content .wc-panel) { box-shadow: none; }
  [data-sf-template] .wc-layout .wc-search-panel { box-shadow: 0 -10px 16px -6px rgb(17 17 17 / 8%); }
}

/* Telegram Mini App (sfv2-5-00134): waycup in Telegram's sheet. `data-telegram="app"` — inside Telegram, its main
   button stands under the page instead of the floating cart; `web` — the same address in a browser. The insets are
   Telegram's fullscreen bars (zero in the usual sheet). */
[data-sf-template] .wc-root[data-telegram] { padding-top: var(--tg-top, 0px); }
[data-sf-template] .wc-root[data-telegram='app'] { padding-bottom: calc(16px + var(--tg-bottom, 0px)); }
[data-sf-template] .wc-root[data-telegram] .wc-search-panel { top: var(--tg-top, 0px); }
[data-sf-template] .tg-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; }
[data-sf-template] .tg-receipt {
  flex: 1; min-width: 0; min-height: 48px; display: grid; align-content: center; justify-items: start; gap: 2px;
  padding: 6px 16px; border: 0; border-radius: var(--wc-radius-field); color: var(--wc-ink);
  background: var(--wc-surface); text-align: left;
}
[data-sf-template] .tg-receipt span { color: var(--wc-muted); font-size: 12px; line-height: 16px; }
[data-sf-template] .tg-receipt strong {
  max-width: 100%; overflow: hidden; font-weight: 600; line-height: 20px; text-overflow: ellipsis; white-space: nowrap;
}
[data-sf-template] .tg-account {
  flex: none; height: 48px; padding: 0 16px; border: 0; border-radius: var(--wc-radius-field); color: var(--wc-accent);
  background: var(--wc-surface); font-weight: 600;
}

/* Places of the catalog (lab, 11.2). An empty place has no node at all; an occupied place is a plain box.
   Labels of places (`?places=show`) are thin marks for the owner. */
[data-sf-template] .cat-place { display: block; min-width: 0; }
[data-sf-template] .cat-place-mark { display: block; width: fit-content; max-width: 100%; margin: 2px 0; padding: 1px 6px;
  border: 1px dashed #b0279a; border-radius: 4px; color: #b0279a; background: #fff; font: 500 10px/1.4 monospace;
  overflow-wrap: anywhere; }
[data-sf-template] .cat-demo-banner { display: grid; gap: 4px; padding: 16px; border-radius: 16px; color: #3b1a6b;
  background: linear-gradient(135deg, #efe7ff, #ffe7f1); font: 14px/1.4 system-ui, sans-serif; }
[data-sf-template] .cat-demo-note { margin: 0; padding: 10px 12px; border: 1px dashed #8a7cd8; border-radius: 12px; color: #3b1a6b;
  background: #f6f3ff; font: 13px/1.4 system-ui, sans-serif; }
[data-sf-template] .cat-switch { display: grid; gap: 6px; margin: 10px 0; font: 12px/1.4 system-ui, sans-serif; }
[data-sf-template] .cat-switch ul { margin: 0; padding-left: 16px; }
[data-sf-template] .cat-switch nav { display: flex; flex-wrap: wrap; gap: 6px 12px; }
[data-sf-template] .cat-switch a { color: inherit; text-decoration: underline; }
[data-sf-template] .cat-fallback { margin: 0; padding: 12px; color: #6b6b6b; font: 13px/1.4 system-ui, sans-serif; }

/* Outer layers only: the popup and each slot retain their own layout and actions. */
[data-sf-template] .sf-transition-layer { position: relative; z-index: 50; }
[data-sf-template] .sf-transition-layer[data-priority='front'] { z-index: 60; }
[data-sf-template] .sf-transition-layer > * { transition: opacity .2s ease, transform .2s ease; }
[data-sf-template] .sf-transition-layer[data-phase='closing'] > * { opacity: 0; pointer-events: none; }
[data-sf-template] .sf-transition-layer .fm-overlay-box { transition: transform .2s ease; }
[data-sf-template] .sf-transition-layer[data-phase='closing'] .fm-overlay-box { transform: translateY(16px); }
[data-sf-template] .d-catalog, [data-sf-template] .wc-catalog-layout, [data-sf-template] .st-page { transition: opacity .2s ease; }
[data-sf-template] [data-st-page='loading'] .d-catalog, [data-sf-template] [data-st-page='loading'] .wc-catalog-layout, [data-sf-template] [data-st-page='loading'] .st-page { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  [data-sf-template] .sf-transition-layer > *, [data-sf-template] .sf-transition-layer .fm-overlay-box { transition: none; transform: none; }
  [data-sf-template] .sf-transition-layer[data-phase='closing'] .fm-overlay-box { transform: none; }
  [data-sf-template] .d-catalog, [data-sf-template] .wc-catalog-layout, [data-sf-template] .st-page { transition: none; }
}

[data-sf-template] .st-product-options { border: 0; margin: 0; padding: 0; min-width: 0; }
[data-sf-template] .st-add-status { position: fixed; bottom: 84px; right: 16px; z-index: 60; max-width: min(440px, 90vw);
  margin: 0; padding: 12px 18px; border-radius: 12px; background: white; box-shadow: 0 4px 24px #0002;
  pointer-events: auto; }
/* Unknown private state reserves its existing slots; public cards, prices and navigation stay visible. */
[data-sf-template] [data-st-private='pending'] .fm-order-segment,
[data-sf-template] [data-st-private='pending'] .fm-address,
[data-sf-template] [data-st-private='pending'] .fm-cart-button { visibility: hidden; }
/* Real D2 slot exists before the private count; the search never pays for an arriving button's width. */
[data-sf-template] .d-bar-row .d-reopen-slot { display: flex; justify-content: flex-end; align-items: center;
  flex: 0 0 160px; width: 160px; min-height: 48px; }
[data-sf-template] .d-reopen-slot .fm-cart-button { max-width: 100%; min-width: 0; }
[data-sf-template] .d-reopen-slot .fm-cart-button > .fm-icon { flex: none; }
[data-sf-template] .d-reopen-slot .fm-cart-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The guest's profile page of template D (sfv2-5-00006): account menu beside the profile card, on the family tokens. */
[data-sf-template] .st-profile { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 560px); gap: 24px;
  align-items: start; padding: 24px 0 48px; }
@media (max-width: 760px) { [data-sf-template] .st-profile { grid-template-columns: 1fr; } }
[data-sf-template] .fg-menu, [data-sf-template] .fg-card { background: var(--fm-surface); border: 1px solid var(--fm-line); border-radius: var(--fm-radius-l);
  padding: 20px; color: var(--fm-ink); }
[data-sf-template] .fg-menu { display: grid; gap: 16px; }
[data-sf-template] .fg-menu-head { display: flex; gap: 12px; align-items: center; }
[data-sf-template] .fg-menu-head p { display: grid; margin: 0; }
[data-sf-template] .fg-menu-head small, [data-sf-template] .fg-data dt, [data-sf-template] .fg-note { color: var(--fm-muted); }
[data-sf-template] .fg-menu ul { list-style: none; margin: 0; padding: 0; }
[data-sf-template] .fg-menu ul:empty { display: none; }
[data-sf-template] .fg-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--fm-pill);
  background: var(--fm-surface-2); }
[data-sf-template] .fg-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
[data-sf-template] .fg-card-head h2 { margin: 0 0 16px; font-size: 20px; color: var(--fm-ink-strong); }
[data-sf-template] .fg-data { display: grid; gap: 12px; margin: 0; }
[data-sf-template] .fg-data div { display: grid; gap: 2px; }
[data-sf-template] .fg-data dd { margin: 0; color: var(--fm-ink-strong); }
[data-sf-template] .fg-form { display: grid; gap: 12px; }
[data-sf-template] .fg-field { display: grid; gap: 6px; }
[data-sf-template] .fg-field input { min-height: 48px; padding: 0 14px; border: 1px solid var(--fm-line); border-radius: var(--fm-radius);
  background: var(--fm-surface-2); font: inherit; color: inherit; }
[data-sf-template] .fg-error { margin: 0; color: var(--fm-red-600); }
[data-sf-template] .fg-error:empty, [data-sf-template] .fg-note:empty { display: none; }
[data-sf-template] .fg-actions { display: flex; gap: 12px; flex-wrap: wrap; }
[data-sf-template] .fg-link { color: var(--fm-brand); }
[data-sf-template] .st-oauth .fg-card { display: grid; gap: 12px; max-width: 560px; margin: 0 auto; }
[data-sf-template] .st-oauth p { margin: 0; }
[data-sf-template] .st-oauth-scopes { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
[data-sf-template] .st-oauth-scopes label { display: flex; gap: 10px; align-items: center; }
[data-sf-template] .st-connections { display: grid; gap: 12px; grid-column: 2; }
[data-sf-template] .st-connections p { margin: 0; }
[data-sf-template] .st-connections-list { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
[data-sf-template] .st-connections-list > li { display: grid; gap: 10px; }
@media (max-width: 760px) { [data-sf-template] .st-connections { grid-column: auto; } }

/* The page of a placed order of template D (sfv2-5-00008): status card and the lines of the order, on the family
   tokens; the look of the order page SM 6569-32383 (number, status badge, data, lines, total). */
[data-sf-template] .st-order { display: grid; grid-template-columns: minmax(0, 720px); gap: 16px; padding: 24px 0 48px; }
[data-sf-template] .fg-status { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius-l);
  background: var(--fm-surface); color: var(--fm-ink); }
[data-sf-template] .fg-status-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
[data-sf-template] .fg-status-head h1 { margin: 0; font-size: 28px; color: var(--fm-ink-strong); }
[data-sf-template] .fg-status-meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; color: var(--fm-muted); }
[data-sf-template] .fg-status-meta span { display: inline-flex; gap: 6px; align-items: center; }
[data-sf-template] .fg-data-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
[data-sf-template] .fg-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--fm-pill);
  background: var(--fm-surface-2); font-size: var(--fm-text-s); color: var(--fm-ink-strong); }
[data-sf-template] .fg-badge-success { background: #e6f6ec; color: #17733a; }
[data-sf-template] .fg-badge-progress { background: #ecebff; color: var(--fm-brand); }
[data-sf-template] .fg-badge-warning { background: #fff4dc; color: #8a5a00; }
[data-sf-template] .fg-badge-danger { background: #fde8e8; color: var(--fm-red-600); }
[data-sf-template] .fg-lines { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
[data-sf-template] .fg-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
[data-sf-template] .fg-line img { width: 72px; height: 52px; border-radius: var(--fm-radius-s); object-fit: cover; }
[data-sf-template] .fg-line p { display: grid; margin: 0; }
[data-sf-template] .fg-line small, [data-sf-template] .fg-line-qty { color: var(--fm-muted); }
[data-sf-template] .fg-totals { display: grid; gap: 6px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--fm-line); }
[data-sf-template] .fg-totals div { display: flex; justify-content: space-between; gap: 12px; }
[data-sf-template] .fg-totals dd { margin: 0; }
[data-sf-template] .fg-total-discount dd { color: var(--fm-red-600); }
[data-sf-template] .fg-total-final { font-weight: 600; color: var(--fm-ink-strong); }

/* Bonuses, history, repeat and review of template D (sfv2-5-00009), on the family tokens: rows of the history in the
   profile, the repeat button and the review form of the order page (SM «Отзыв о заказе» 4370-10616: stars on the grey
   plate, chips of hints, the text, photos with the limit line). */
[data-sf-template] .st-profile > [data-block="benefits-balance"] { grid-column: 1; }
[data-sf-template] .st-profile > [data-block="order-history"] { grid-column: 2; }
@media (max-width: 760px) { [data-sf-template] .st-profile > [data-block] { grid-column: auto; } }
[data-sf-template] .fg-rows { display: grid; margin: 0; padding: 0; list-style: none; }
[data-sf-template] .fg-rows > li + li { border-top: 1px solid var(--fm-line); }
[data-sf-template] .fg-row { display: grid; gap: 6px; padding: 12px 0; }
[data-sf-template] .fg-row-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
[data-sf-template] .fg-row-head h3 { margin: 0; font-size: 16px; }
[data-sf-template] .fg-row-open { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--fm-ink-strong);
  cursor: pointer; }
[data-sf-template] .fg-row-sum { margin-left: auto; color: var(--fm-ink-strong); }
[data-sf-template] .fg-row-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--fm-muted);
  font-size: var(--fm-text-s); }
[data-sf-template] .fg-row-body { display: flex; gap: 12px; align-items: center; }
[data-sf-template] .fg-row-summary { margin: 0; }
[data-sf-template] .fg-thumbs { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
[data-sf-template] .fg-thumbs:empty { display: none; }
[data-sf-template] .fg-row-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
[data-sf-template] .fg-row-actions .fm-linkish { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
[data-sf-template] .fg-repeat { display: grid; gap: 8px; justify-items: start; }
[data-sf-template] .fg-repeat p { margin: 0; }
[data-sf-template] .fg-problems { margin: 0; padding: 0; list-style: none; color: var(--fm-muted); }
[data-sf-template] .fg-review { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius-l); background: var(--fm-surface); color: var(--fm-ink); }
[data-sf-template] .fg-review h2 { margin: 0; font-size: 20px; color: var(--fm-ink-strong); }
[data-sf-template] .fg-review-head p, [data-sf-template] .fg-review > p { margin: 4px 0 0; color: var(--fm-muted); }
[data-sf-template] .fg-review-done { justify-items: center; text-align: center; }
[data-sf-template] .fg-review-icon { color: var(--fm-brand); }
[data-sf-template] .fg-reason { color: var(--fm-muted); }
[data-sf-template] .fg-stars-plate { padding: 12px; border-radius: var(--fm-radius); background: var(--fm-surface-2); }
[data-sf-template] .fg-stars { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0; }
[data-sf-template] .fg-star { position: relative; display: grid; color: var(--fm-muted); opacity: .35; cursor: pointer; }
[data-sf-template] .fg-star-on { color: var(--fm-brand); opacity: 1; }
[data-sf-template] .fg-star input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
[data-sf-template] .fg-star:has(input:focus-visible) { outline: 2px solid var(--fm-brand); outline-offset: 2px; border-radius: 6px; }
[data-sf-template] .fg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
[data-sf-template] .fg-chips legend { margin-bottom: 8px; padding: 0; font-weight: 600; }
[data-sf-template] .fg-chip { position: relative; display: inline-flex; padding: 8px 14px; border: 1px solid var(--fm-line);
  border-radius: var(--fm-pill); cursor: pointer; }
[data-sf-template] .fg-chip input { position: absolute; opacity: 0; pointer-events: none; }
[data-sf-template] .fg-chip:has(input:checked) { border-color: var(--fm-brand); color: var(--fm-brand); }
[data-sf-template] .fg-chip:has(input:focus-visible) { outline: 2px solid var(--fm-brand); outline-offset: 2px; }
[data-sf-template] .fg-textarea { display: grid; gap: 6px; }
[data-sf-template] .fg-textarea textarea { padding: 10px 14px; border: 1px solid var(--fm-line); border-radius: var(--fm-radius);
  background: var(--fm-surface-2); font: inherit; color: inherit; resize: vertical; }
[data-sf-template] .fg-media { display: grid; gap: 6px; }
[data-sf-template] .fg-media ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
[data-sf-template] .fg-media small { color: var(--fm-muted); }
[data-sf-template] .fg-media-add { display: grid; place-items: center; width: 64px; height: 64px; border: 1px dashed var(--fm-line);
  border-radius: var(--fm-radius); background: var(--fm-surface-2); color: var(--fm-ink); cursor: pointer; }
[data-sf-template] .fg-media-item { display: flex; gap: 6px; align-items: center; min-height: 64px; padding: 0 10px;
  border: 1px solid var(--fm-line); border-radius: var(--fm-radius); }
[data-sf-template] .fg-media-item span { display: flex; gap: 6px; align-items: center; }
[data-sf-template] .fg-media-item button { padding: 4px; border: 0; background: none; color: var(--fm-muted); cursor: pointer; }
[data-sf-template] .fg-media-uploading { opacity: .6; }
[data-sf-template] .fg-media-failed { border-color: var(--fm-red-600); color: var(--fm-red-600); }

[data-sf-template] .fm-overlay-box:has(> .st-product-popup) { display: block; }
[data-sf-template] .st-product-popup { display: flex; flex-direction: column; width: 100%; min-height: 0;
  height: min(640px, calc(100dvh - 48px)); max-height: inherit; }
[data-sf-template] .st-product-popup-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-sf-template] .st-product-popup-content { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: auto;
  overscroll-behavior: contain; border-radius: inherit; }
[data-sf-template] .st-product-detail { flex: 1; min-height: 0; overflow: hidden; }
[data-sf-template] .st-product-detail .d-product-panel { min-height: 0; max-height: none; }
[data-sf-template] .st-product-detail .d-product-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; }
[data-sf-template] .st-product-detail .fm-price-bar { flex-shrink: 0; }
@media (max-width: 899px) {
  [data-sf-template] .st-product-popup { height: min(800px, 94dvh); }
  [data-sf-template] .st-product-detail .d-product-media { flex: none; }
  [data-sf-template] .st-product-detail .d-product-media img { height: min(240px, 30dvh); border-radius: 0; }
  [data-sf-template] .st-product-detail .d-product-panel { flex: 1; }
}

/* The site's own look and parts of the LEGACY storefront (sfv2-5-00089): logo, burger menu, footer, the page instead
   of the site, image fit of the settings. */
/* LEGACY `Logo` (header: 40px high, up to 216px wide) and `SiteLogo` (footer: 144 × 40), left aligned. */
[data-sf-template] .fm-brand .fm-brand-image { display: block; width: auto; height: 40px; max-width: 216px; object-fit: contain;
  object-position: left center; }
[data-sf-template] .fm-footer-brand .fm-footer-logo { display: block; width: 144px; height: 40px; max-width: 100%; object-fit: contain;
  object-position: left center; }
[data-sf-template] .fm-header-lead { display: flex; align-items: center; gap: 12px; margin-right: auto; }
[data-sf-template] .fm-header-lead .fm-brand { margin: 0; }
[data-sf-template] .fm-burger { display: none; align-items: center; gap: 6px; border: 0; background: none; padding: 4px; color: var(--fm-ink);
  font: inherit; font-size: var(--fm-text-s); font-weight: 600; }
[data-sf-template] .fm-burger-menu { display: grid; gap: 24px; padding: 8px 4px 16px; }
[data-sf-template] .fm-burger-menu nav { display: grid; gap: 20px; }
[data-sf-template] .fm-burger-menu ul { display: grid; gap: 16px; }
[data-sf-template] .fm-burger-menu ul + ul { border-top: 1px solid var(--fm-line); padding-top: 20px; }
[data-sf-template] .fm-burger-menu a { color: var(--fm-ink); font-size: var(--fm-text-m); font-weight: 600; text-decoration: none; }
[data-sf-template] .fm-burger-contacts { display: grid; gap: 4px; border-top: 1px solid var(--fm-line); padding-top: 20px; }
[data-sf-template] .fm-burger-contacts small { color: var(--fm-muted); font-size: var(--fm-text-xs); }
[data-sf-template] .fm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-sf-template] .fm-toplinks a, [data-sf-template] .fm-footer nav a { color: inherit; text-decoration: none; }
[data-sf-template] .fm-footer nav a { color: var(--fm-ink); }
[data-sf-template] .fm-footer nav a:hover, [data-sf-template] .fm-toplinks a:hover { color: var(--fm-brand); }
[data-sf-template] .fm-footer-wide { grid-template-columns: 1fr 1fr 1.2fr 1.6fr; }
[data-sf-template] .fm-footer-company { display: block; margin-bottom: 12px; }
[data-sf-template] .fm-footer-apps { display: grid; gap: 12px; justify-items: end; }
[data-sf-template] .fm-footer-apps ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
[data-sf-template] .fm-footer-apps a { display: inline-flex; padding: 8px 16px; border: 1px solid var(--fm-line); border-radius: var(--fm-radius-s);
  color: var(--fm-ink); font-size: var(--fm-text-s); text-decoration: none; }
[data-sf-template] .fm-footer-apps a:hover { border-color: var(--fm-brand); color: var(--fm-brand); }
[data-sf-template] .fm-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 32px; }
[data-sf-template] .fm-footer-bottom .fm-linkish { font-weight: 600; text-decoration: underline; }
[data-sf-template] .fm-footer-credit { display: inline-flex; align-items: center; gap: 8px; color: var(--fm-muted); font-size: var(--fm-text-xs);
  text-decoration: none; }
[data-sf-template] .fm-footer-credit:hover { opacity: .6; }
[data-sf-template] .fm-footer-credit .fm-logo { width: auto; height: 16px; }
[data-sf-template] .fm-footer-socials { display: flex; flex-wrap: wrap; gap: 16px; }
[data-sf-template] .fm-footer-socials a { color: var(--fm-muted); font-size: var(--fm-text-xs); text-decoration: none; }
[data-sf-template] .fm-footer-socials a:hover { color: var(--fm-brand); }
[data-sf-template] .fm-site-page { display: grid; justify-items: center; gap: 24px; max-width: 576px; margin: 0 auto; padding: 96px 20px;
  text-align: center; }
[data-sf-template] .fm-site-page h1 { font-size: var(--fm-text-xxl); font-weight: 400; color: var(--fm-ink-strong); }
[data-sf-template] .fm-site-page-image { display: block; max-height: 200px; max-width: 100%; object-fit: contain; }
[data-sf-template] .fm-site-page-text { color: var(--fm-ink); font-size: var(--fm-text-m); }
[data-sf-template] .d-root[data-st-products-fit='contain'] .fm-card-media img { object-fit: contain; }
[data-sf-template] .d-root[data-st-banners-fit='resize'] .fm-banner > a, [data-sf-template] .d-root[data-st-banners-fit='resize'] .fm-banner > div {
  aspect-ratio: auto; }
[data-sf-template] .d-root[data-st-banners-fit='resize'] .fm-banner img { position: static; height: auto; }
@media (max-width: 899px) {
  [data-sf-template] .fm-header-lead { position: relative; justify-content: center; margin: 0; }
  [data-sf-template] .fm-burger { display: flex; position: absolute; left: 0; }
  [data-sf-template] .fm-burger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-sf-template] .fm-footer-wide { grid-template-columns: 1fr; }
  [data-sf-template] .fm-footer-apps, [data-sf-template] .fm-footer-apps ul { justify-items: start; justify-content: flex-start; }
}

/*
MIT License

Copyright (c) 2026 mmrahmanbappi

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
/* The Green Lamp by mmrahmanbappi (MIT), adapted for Smartofood.
   Original: split hero, forest/peach palette, double rules and two-column menu. */
[data-sf-template].ai-chosen {
  --ai-green: var(--fm-surface, #102e27); --ai-peach: var(--fm-brand, #f2b38b);
  --ai-cream: var(--fm-ink, #f4ead5); --ai-muted: #b9c9c1;
  background: var(--ai-green); color: var(--ai-cream); font-family: Arial, sans-serif; min-height: 100vh;
}
[data-sf-template] .ai-intro * { box-sizing: border-box; }
[data-sf-template] .ai-intro a { color: inherit; text-decoration: none; }
[data-sf-template] .ai-intro button { appearance: none; background: transparent; font-family: inherit; cursor: pointer; }
[data-sf-template] button.ai-menu-link { border: 0; padding: 0; color: inherit; }
[data-sf-template] button.ai-cta { color: var(--ai-peach); }
[data-sf-template] button.ai-cta:hover { background: var(--ai-peach); color: var(--ai-green); }
[data-sf-template] .d-catalog > .fm-page-title { scroll-margin-top: 84px; }
@media (max-width: 760px) {
  [data-sf-template] .d-catalog > .fm-page-title { scroll-margin-top: 20px; }
}
[data-sf-template] .ai-masthead {
  display: flex; justify-content: space-between; align-items: center; padding: 26px 6vw;
  border-bottom: 1px solid #365249; gap: 20px;
}
[data-sf-template] .ai-brand {
  display: flex; align-items: center; gap: 20px; font: 28px/1.2 Georgia, serif;
  color: var(--ai-peach); max-width: 80%; overflow-wrap: anywhere;
}
[data-sf-template] .ai-brand span { font: 38px Georgia, serif; }
[data-sf-template] .ai-menu-link { font-size: 13px; text-transform: uppercase; letter-spacing: .13em; }
[data-sf-template] .ai-menu-link span { margin-left: 12px; font-size: 24px; }
[data-sf-template] .ai-hero { display: grid; grid-template-columns: 1.08fr 1fr; min-height: 640px; }
[data-sf-template] .ai-story { padding: 65px 6vw 35px; display: flex; flex-direction: column; justify-content: center; }
[data-sf-template] .ai-kicker {
  font-size: 11px; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--ai-peach);
  margin: 0 0 36px;
}
[data-sf-template] .ai-story h1 {
  font: normal clamp(46px, 5.4vw, 86px)/1.02 Georgia, serif; letter-spacing: -.045em; margin: 0;
}
[data-sf-template] .ai-story h1 em { font-weight: 400; color: var(--ai-peach); }
[data-sf-template] .ai-description { font-size: 16px; line-height: 1.7; max-width: 350px; margin: 30px 0; color: var(--ai-muted); }
[data-sf-template] .ai-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; width: fit-content;
  border: 1px solid var(--ai-peach); padding: 17px 24px; position: relative;
  text-transform: uppercase; letter-spacing: .09em; font-size: 11px; color: var(--ai-peach);
}
[data-sf-template] .ai-cta::before { content: ''; position: absolute; inset: 4px; border: 1px solid #8a7a5e; pointer-events: none; }
[data-sf-template] .ai-cta:hover { background: var(--ai-peach); color: var(--ai-green); }
[data-sf-template] .ai-cta > span:last-child { font-size: 24px; }
[data-sf-template] .ai-city { display: flex; align-items: center; gap: 14px; margin-top: 48px; font-size: 11px; letter-spacing: .09em; }
[data-sf-template] .ai-rule { flex: 1; height: 1px; background: #365249; }
[data-sf-template] .ai-diamond { width: 7px; height: 7px; border: 1px solid var(--ai-peach); transform: rotate(45deg); }
[data-sf-template] .ai-photo { position: relative; min-width: 0; overflow: hidden; background: #203b31; }
[data-sf-template] .ai-photo > img { position: absolute; width: 100%; height: 100%; object-fit: cover; filter: brightness(.83); }
[data-sf-template] .ai-photo::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #0b201ae6); }
[data-sf-template] .ai-photo-frame { position: absolute; inset: 24px; border: 1px solid #f4ead566; z-index: 1; }
[data-sf-template] .ai-photo-caption { position: absolute; bottom: 52px; left: 52px; right: 38px; display: grid; gap: 10px; z-index: 2; }
[data-sf-template] .ai-photo-caption span { text-transform: uppercase; font-size: 10px; letter-spacing: .2em; }
[data-sf-template] .ai-photo-caption strong { font: 30px/1.2 Georgia, serif; }
[data-sf-template] .ai-photo-empty { display: grid; place-items: center; height: 100%; font: 240px Georgia, serif; color: var(--ai-peach); }
[data-sf-template] .ai-divider {
  display: flex; justify-content: space-around; align-items: center; gap: 30px; overflow: hidden; white-space: nowrap;
  padding: 16px 0; background: var(--ai-peach); color: var(--ai-green); font: 18px/1.4 Georgia, serif;
}
[data-sf-template] #ai-menu { scroll-margin-top: 10px; }
[data-sf-template] .ai-credit { padding: 22px 6vw; border-top: 1px solid #365249; font-size: 11px; color: var(--ai-muted); }
[data-sf-template] .ai-credit a { color: inherit; }
[data-sf-template] .ai-skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: #f2b38b; color: #102e27; padding: 12px; }
[data-sf-template] .ai-skip:focus { top: 16px; }
[data-sf-template] .ai-chosen :focus-visible { outline: 2px solid var(--ai-peach); outline-offset: 4px; }

[data-sf-template].bistro{--b-green:#102e27;--b-paper:#f5efdf;--b-peach:#f2b38b;--b-ink:#203a31;--b-line:#3f574d;--b-muted:#b6c5ba;--fm-brand:#f2b38b;--fm-surface:#f5efdf;--fm-ink:#203a31;--fm-line:#d4d5c4;--fm-muted:#637268;--fm-font:Arial,sans-serif;--fm-font-family:Arial,sans-serif;--fm-radius-l:0px;--fm-radius-m:0px;--fm-radius-s:0px;--fm-round:0;background:var(--b-green);color:var(--b-paper);font-family:Arial,sans-serif;line-height:1.5}
[data-sf-template] .bistro *,[data-sf-template].bistro *{box-sizing:border-box}
[data-sf-template].bistro button,[data-sf-template].bistro input,[data-sf-template].bistro select,[data-sf-template].bistro textarea{font-family:inherit}
[data-sf-template].bistro button{cursor:pointer}[data-sf-template].bistro button:disabled{cursor:default;opacity:.45}
[data-sf-template].bistro button:focus-visible,[data-sf-template].bistro a:focus-visible,[data-sf-template].bistro input:focus-visible,[data-sf-template].bistro select:focus-visible,[data-sf-template].bistro textarea:focus-visible{outline:2px solid #bd7748;outline-offset:5px}
[data-sf-template].bistro .b-kicker{font:10px/1.5 Arial,sans-serif;letter-spacing:.19em;text-transform:uppercase;margin:0 0 14px}
[data-sf-template].bistro .b-muted{font-size:12px;color:#657168;line-height:1.6}
[data-sf-template].bistro .b-action{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:17px 22px;border:1px solid var(--b-ink);border-radius:0;background:var(--b-ink);color:var(--b-paper);font-size:13px;text-decoration:none;text-align:left;transition:background .18s}
[data-sf-template].bistro .b-action:hover{background:#335548}[data-sf-template].bistro .b-action-soft{color:var(--b-ink);background:transparent}
[data-sf-template].bistro .b-action-soft:hover{background:#e8e6d5}[data-sf-template].bistro .b-action span b{display:block;font-size:19px;font-weight:400;margin-top:3px}
[data-sf-template].bistro .b-text-button{background:none;border:0;padding:9px 0;color:inherit;text-decoration:underline;text-underline-offset:4px;font-size:12px}
[data-sf-template].bistro .b-main{max-width:1440px;padding:0 48px 96px;margin:auto}
[data-sf-template].bistro .b-service{background:var(--b-paper);color:var(--b-ink);padding:28px 48px 0}
[data-sf-template].bistro .b-service-main{max-width:1344px;margin:auto;display:grid;grid-template-columns:1fr 1.3fr 1.2fr;gap:36px;align-items:center}
[data-sf-template].bistro .b-service-title>span{font:32px/1.1 Georgia,serif}[data-sf-template].bistro .b-service-title .b-kicker{font-size:9px;margin-bottom:9px}
[data-sf-template].bistro .b-service-receiving{background:none;border:0;border-left:1px solid #ccd0c0;color:inherit;padding:0 0 0 36px;display:grid;gap:4px;text-align:left}
[data-sf-template].bistro .b-service-receiving small{font-size:10px;text-transform:uppercase;letter-spacing:.12em}
[data-sf-template].bistro .b-service-receiving strong{font:28px/1.2 Georgia,serif}
[data-sf-template].bistro .b-service-receiving>span{font-size:12px;display:flex;align-items:center;gap:12px;color:#667266}
[data-sf-template].bistro .b-service-actions{display:flex;align-items:center;justify-content:end;gap:28px}
[data-sf-template].bistro .b-account-link{border:0;background:none;color:inherit;display:flex;align-items:center;gap:10px;font-size:12px}
[data-sf-template].bistro .b-cart-open{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 24px;background:var(--b-green);color:var(--b-paper);border:0;padding:16px 24px;min-width:170px;text-align:left}
[data-sf-template].bistro .b-cart-open>span{font-size:12px}[data-sf-template].bistro .b-cart-open b{grid-row:span 2;font:40px Georgia,serif;color:var(--b-peach)}
[data-sf-template].bistro .b-cart-open small{font-size:10px;color:#bac8bf}
[data-sf-template].bistro .b-service-notes{max-width:1344px;margin:24px auto 0;padding:15px 0;border-top:1px solid #cfd3c3;display:flex;gap:28px;justify-content:space-between;align-items:center;font-size:10px}
[data-sf-template].bistro .b-service-notes nav{display:flex;gap:24px}[data-sf-template].bistro .b-service-notes a{color:inherit;text-decoration:none}
[data-sf-template].bistro .b-service-notes>span{margin-left:auto}[data-sf-template].bistro .b-nav-toggle{display:none}
[data-sf-template].bistro .b-stories{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:42px 0 80px}
[data-sf-template].bistro .b-stories article{min-width:0}[data-sf-template].bistro .b-stories a{color:inherit;text-decoration:none;display:block}
[data-sf-template].bistro .b-stories img{width:100%;aspect-ratio:1.5;object-fit:cover;display:block}
[data-sf-template].bistro .b-stories a>div{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--b-line)}
[data-sf-template].bistro .b-stories a>div>span{color:var(--b-peach);font:12px Georgia,serif}
[data-sf-template].bistro .b-stories strong{font-size:13px;font-weight:400}[data-sf-template].bistro .b-stories b{margin-left:auto;font-size:22px;font-weight:400}
[data-sf-template].bistro .b-catalog{scroll-margin-top:24px}[data-sf-template].bistro .b-menu-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:32px;gap:30px}
[data-sf-template].bistro .b-menu-heading h1{font:86px/.95 Georgia,serif;letter-spacing:-.04em;margin:0}[data-sf-template].bistro .b-menu-heading .b-kicker{color:var(--b-peach)}
[data-sf-template].bistro .b-search{width:300px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#b8c7bd}
[data-sf-template].bistro .b-search>div{display:flex;align-items:center;border-bottom:1px solid #779083;margin-top:8px}
[data-sf-template].bistro .b-search input{width:100%;border:0;background:none;color:var(--b-paper);font-size:14px;padding:12px 0;outline-offset:2px}
[data-sf-template].bistro .b-search input::placeholder{color:#8fa397}[data-sf-template].bistro .b-search>div>span{font-size:24px}
[data-sf-template].bistro .b-categories{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;padding:20px 0;border-block:1px solid var(--b-line);margin:35px 0 55px}
[data-sf-template].bistro .b-categories button{background:none;border:0;color:var(--b-paper);white-space:nowrap;display:flex;gap:10px;padding:4px 0;font-size:13px}
[data-sf-template].bistro .b-categories small{font:11px Georgia,serif;color:var(--b-peach)}[data-sf-template].bistro .b-categories button[aria-current=true]{color:var(--b-peach)}
[data-sf-template].bistro .b-menu-section{margin:0 0 60px;scroll-margin-top:24px}[data-sf-template].bistro .b-menu-section>header{display:flex;align-items:center;gap:22px;margin-bottom:22px}
[data-sf-template].bistro .b-menu-section>header>span:first-child{font:12px Georgia,serif;color:var(--b-peach)}
[data-sf-template].bistro .b-menu-section h2{font:38px/1.15 Georgia,serif;font-weight:400;color:var(--b-peach);margin:0}
[data-sf-template].bistro .b-section-line{height:1px;background:var(--b-line);flex:1;margin-left:10px}
[data-sf-template].bistro .b-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 52px}
[data-sf-template].bistro .b-menu-card{display:grid;grid-template-columns:116px minmax(0,1fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--b-line);align-items:center}
[data-sf-template].bistro .b-menu-photo{border:0;padding:0;background:#214536;aspect-ratio:1;border-radius:50%;overflow:hidden;color:var(--b-peach)}
[data-sf-template].bistro .b-menu-photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s}[data-sf-template].bistro .b-menu-photo:hover img{transform:scale(1.08)}
[data-sf-template].bistro .b-menu-title{display:block;text-align:left;border:0;padding:0;background:none;color:inherit;font:23px/1.2 Georgia,serif}
[data-sf-template].bistro .b-menu-copy>small{display:block;font-size:10px;color:var(--b-muted);margin-top:7px}
[data-sf-template].bistro .b-menu-copy>p{font-size:12px;color:var(--b-muted);line-height:1.6;margin:10px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
[data-sf-template].bistro .b-menu-price{display:flex;justify-content:space-between;align-items:center;margin-top:15px;gap:12px}
[data-sf-template].bistro .b-menu-price>strong{font:22px Georgia,serif;color:var(--b-peach)}
[data-sf-template].bistro .b-menu-add{width:40px;height:40px;border:1px solid #b3a388;border-radius:50%;background:none;color:var(--b-peach);font:25px Georgia,serif}
[data-sf-template].bistro .b-menu-add:hover{background:var(--b-peach);color:var(--b-green)}
[data-sf-template].bistro .b-badges{display:flex;flex-wrap:wrap;gap:6px}[data-sf-template].bistro .b-badges span{padding:3px 8px;border:1px solid currentColor;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
[data-sf-template].bistro .b-quantity{display:inline-flex;align-items:center;border:1px solid currentColor;height:40px;flex:none}
[data-sf-template].bistro .b-quantity button{color:inherit;background:none;border:0;width:34px;height:100%;font-size:21px}
[data-sf-template].bistro .b-quantity output{min-width:30px;text-align:center;font-size:13px}
[data-sf-template].bistro .b-footer{border-top:1px solid var(--b-line);padding:60px 48px 24px}
[data-sf-template].bistro .b-footer-main{display:grid;grid-template-columns:1.5fr 1fr;max-width:1344px;margin:auto;gap:70px}
[data-sf-template].bistro .b-footer-brand{font:58px Georgia,serif;display:flex;gap:25px;align-items:center;margin:20px 0}
[data-sf-template].bistro .b-footer-brand svg{color:var(--b-peach)}[data-sf-template].bistro .b-footer .b-kicker{color:var(--b-peach)}
[data-sf-template].bistro .b-footer-main nav{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;align-content:start}
[data-sf-template].bistro .b-footer-main nav a{display:flex;justify-content:space-between;color:inherit;text-decoration:none;font-size:12px;padding-bottom:12px;border-bottom:1px solid var(--b-line)}
[data-sf-template].bistro .b-footer-phone{color:inherit;font:24px Georgia,serif;text-decoration:none}
[data-sf-template].bistro .b-footer-bottom{max-width:1344px;margin:55px auto 0;padding-top:20px;border-top:1px solid var(--b-line);display:flex;flex-wrap:wrap;gap:24px;font-size:10px;color:var(--b-muted)}
[data-sf-template].bistro .b-footer-bottom a,[data-sf-template].bistro .b-footer-bottom button{color:inherit;background:none;border:0;padding:0;font:inherit}
[data-sf-template].bistro .b-footer-bottom a:last-child{margin-left:auto}[data-sf-template].bistro .b-mobile-order{display:none}
[data-sf-template].bistro .b-state{padding:60px 0}[data-sf-template].bistro .b-state h2{font:40px Georgia,serif}[data-sf-template].bistro .b-state .b-action{max-width:300px;background:var(--b-peach);color:var(--b-green)}
[data-sf-template].bistro .b-skip{position:absolute;left:20px;top:-80px;z-index:100;background:var(--b-paper);color:var(--b-green);padding:12px}[data-sf-template].bistro .b-skip:focus{top:10px}
[data-sf-template].bistro .b-story-page{max-width:880px;margin:75px auto 40px}[data-sf-template].bistro .b-story-page h1{font:64px/1.05 Georgia,serif;margin:0 0 35px}
[data-sf-template].bistro .b-story-page h2{font:35px Georgia,serif;margin:40px 0 20px;color:var(--b-peach)}
[data-sf-template].bistro .b-story-page p{font-size:17px;line-height:1.85;color:#d8dfd2}[data-sf-template].bistro .b-story-page a{color:var(--b-peach)}
[data-sf-template].bistro .b-story-page img{max-width:100%}[data-sf-template].bistro .b-story-page .b-kicker{color:var(--b-peach);font-size:10px}

[data-sf-template].bistro .fm-overlay{z-index:1500;background:#051b15c9;padding:36px;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
[data-sf-template].bistro .fm-overlay-box{width:min(1120px,100%);max-width:1120px;max-height:calc(100dvh - 72px);padding:0;border-radius:0;background:var(--b-paper);color:var(--b-ink);overflow:auto;box-shadow:0 30px 90px #00150e80;border:1px solid #d9d6c5}
[data-sf-template].bistro .fm-overlay-close{position:absolute;top:20px;right:20px;z-index:5;width:40px;height:40px;border:1px solid #6e7e6f;background:var(--b-paper);color:var(--b-ink);border-radius:50%}
[data-sf-template].bistro .fm-grabber{display:none}[data-sf-template].bistro .fm-overlay:has(.b-receiving){z-index:1520}
[data-sf-template].bistro .b-modal-head{padding:40px 52px 30px;border-bottom:1px solid #d1d4c3}[data-sf-template].bistro .b-modal-head h2{font:48px/1.07 Georgia,serif;letter-spacing:-.025em;margin:0;padding-right:36px}
[data-sf-template].bistro .b-modal-head .b-kicker{color:#637568}
[data-sf-template].bistro .b-field{display:grid;gap:9px;font-size:11px;color:#536454;margin:18px 0;letter-spacing:.02em}
[data-sf-template].bistro .b-field input,[data-sf-template].bistro .b-field textarea,[data-sf-template].bistro .b-dish-options select{width:100%;background:#fffaf0;border:1px solid #a6b09f;border-radius:0;padding:14px 15px;font-size:16px;color:var(--b-ink);min-height:49px}
[data-sf-template].bistro .b-field textarea{min-height:90px;resize:vertical}[data-sf-template].bistro .b-field input[aria-invalid=true]{border-color:#b94b35}
[data-sf-template].bistro .b-error{font:13px/1.5 Arial,sans-serif;color:#a0382b;background:#a0382b09;border-left:2px solid #a0382b;padding:10px 12px;margin:14px 0}
[data-sf-template].bistro .b-check{display:flex;gap:10px;align-items:start;font-size:12px;margin:15px 0}[data-sf-template].bistro .b-check input{accent-color:var(--b-green);margin-top:3px}
[data-sf-template].bistro .b-check small{display:block;color:#637268}[data-sf-template].bistro .b-choices{border:0;padding:0;margin:0 0 25px}
[data-sf-template].bistro .b-choices legend{font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:12px}
[data-sf-template].bistro .b-choices>label{display:flex;gap:12px;align-items:center;padding:14px 12px;border:1px solid #c3cbbb;margin-top:-1px;cursor:pointer}
[data-sf-template].bistro .b-choices>label.is-chosen{background:#e2e7d7;border-color:#73866c;position:relative}
[data-sf-template].bistro .b-choices input{accent-color:var(--b-green)}[data-sf-template].bistro .b-choices strong{font-size:13px;font-weight:400}
[data-sf-template].bistro .b-choices small{display:block;font-size:11px;color:#667263;margin-top:4px}[data-sf-template].bistro .b-choices label>span:last-child{margin-left:auto}
[data-sf-template].bistro .st-product-popup{padding:0;width:100%;max-height:none;overflow:visible}[data-sf-template].bistro .st-product-popup-title{display:none}
[data-sf-template].bistro .st-product-popup-content{padding:0;max-height:none;overflow:visible}[data-sf-template].bistro .st-product-popup .cat-place{display:contents}
[data-sf-template].bistro .b-dish{display:grid;grid-template-columns:46% 54%;min-height:620px}
[data-sf-template].bistro .b-dish-portrait{position:relative;background:#213f31;min-height:620px;overflow:hidden}
[data-sf-template].bistro .b-dish-portrait>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
[data-sf-template].bistro .b-dish-portrait:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#102e27b8)}
[data-sf-template].bistro .b-dish-caption{position:absolute;left:28px;right:28px;bottom:26px;z-index:1;color:var(--b-paper);display:flex;justify-content:space-between;font-size:11px}
[data-sf-template].bistro .b-dish-copy{padding:48px 45px 0;display:flex;flex-direction:column;min-width:0}
[data-sf-template].bistro .b-dish-copy>.b-kicker{padding-right:30px;color:#637568}[data-sf-template].bistro .b-dish h2{font:45px/1.06 Georgia,serif;letter-spacing:-.025em;margin:12px 0 24px;padding-right:12px}
[data-sf-template].bistro .b-dish-description{font-size:14px;line-height:1.8;color:#546454;margin:0 0 25px}
[data-sf-template].bistro .b-dish-options{margin-bottom:25px}[data-sf-template].bistro .b-dish-options fieldset{border:0;border-top:1px solid #c6cebc;padding:22px 0 0;margin:0 0 20px}
[data-sf-template].bistro .b-dish-options legend{float:left;width:100%;font:22px Georgia,serif;margin-bottom:12px}[data-sf-template].bistro .b-dish-options legend+.b-muted{clear:both}
[data-sf-template].bistro .b-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;clear:both}
[data-sf-template].bistro .b-option{display:flex;align-items:center;gap:9px;border:1px solid #b6c1aa;padding:12px;cursor:pointer;font-size:13px}
[data-sf-template].bistro .b-option:has(input:checked){background:#dfe7d2;border-color:#667d55}
[data-sf-template].bistro .b-option input{accent-color:var(--b-green)}[data-sf-template].bistro .b-option img{width:35px;height:35px;object-fit:cover}
[data-sf-template].bistro .b-option small,[data-sf-template].bistro .b-option-count small{display:block;font-size:10px;color:#64745e;margin-top:4px}
[data-sf-template].bistro .b-options-counter{display:block}[data-sf-template].bistro .b-option-count{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 0}
[data-sf-template].bistro .b-dish-options fieldset[aria-invalid=true]{border-color:#a0382b}
[data-sf-template].bistro .b-nutrition{display:flex;gap:22px;border-top:1px solid #c6cebc;padding:18px 0;font-size:11px;margin:0 0 18px;flex-wrap:wrap}
[data-sf-template].bistro .b-nutrition dd{font-size:15px;margin:5px 0 0}[data-sf-template].bistro .b-nutrition dt{color:#65745e}
[data-sf-template].bistro .b-dish-order{position:sticky;bottom:0;z-index:2;margin:auto -45px 0;padding:22px 30px;background:var(--b-paper);border-top:1px solid #c6cebc;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:end}
[data-sf-template].bistro .b-dish-order>div>small{display:block;font-size:10px;margin-bottom:7px;color:#65745e}[data-sf-template].bistro .b-dish-order .b-action{min-height:67px}
[data-sf-template].bistro .b-auth{display:grid;grid-template-columns:40% 60%;min-height:460px}
[data-sf-template].bistro .b-auth>aside{background:var(--b-green);color:var(--b-paper);padding:46px 48px;display:flex;flex-direction:column;align-items:start}
[data-sf-template].bistro .b-auth>aside>svg{color:var(--b-peach);width:42px;height:42px}[data-sf-template].bistro .b-auth>aside h3{font:52px/1.05 Georgia,serif;margin:36px 0 20px;letter-spacing:-.03em}
[data-sf-template].bistro .b-auth>aside em{font-weight:400;color:var(--b-peach)}[data-sf-template].bistro .b-auth>aside p{font-size:13px;line-height:1.8;color:#bbc8bd;margin-top:auto}
[data-sf-template].bistro .b-auth-form{padding:42px 60px}[data-sf-template].bistro .b-auth-form h3{font:30px Georgia,serif;margin:0 0 24px}
[data-sf-template].bistro .b-auth-form .b-action{margin-top:24px}[data-sf-template].bistro .b-auth-services{margin-top:26px;border-top:1px solid #c5cebb;padding-top:18px}
[data-sf-template].bistro .b-auth-services>small{color:#65715d}[data-sf-template].bistro .b-auth-services>div{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
[data-sf-template].bistro .b-auth-services button{border:1px solid #b8c0aa;background:none;color:var(--b-ink);padding:11px 16px;display:flex;gap:20px}
[data-sf-template].bistro .b-receiving-body{display:grid;grid-template-columns:38% 62%}[data-sf-template].bistro .b-receiving-body>aside{padding:34px;background:#e9e9d9;border-right:1px solid #c7cebb}
[data-sf-template].bistro .b-receiving-modes{display:grid;gap:14px}[data-sf-template].bistro .b-receiving-modes button{position:relative;text-align:left;display:grid;gap:12px;border:1px solid #a8b59d;background:transparent;color:var(--b-ink);padding:25px}
[data-sf-template].bistro .b-receiving-modes button[aria-pressed=true]{background:var(--b-green);color:var(--b-paper)}
[data-sf-template].bistro .b-receiving-modes button>span{font:12px Georgia,serif;opacity:.7}[data-sf-template].bistro .b-receiving-modes strong{font:30px Georgia,serif;font-weight:400}
[data-sf-template].bistro .b-receiving-modes small{font-size:11px;max-width:150px;opacity:.7}[data-sf-template].bistro .b-receiving-modes b{position:absolute;right:24px;top:24px;font-weight:400}
[data-sf-template].bistro .b-receiving-form{padding:34px 44px}[data-sf-template].bistro .b-receiving-conditions{font-size:12px;line-height:1.7;margin-top:25px}
[data-sf-template].bistro .b-empty-note{font:20px/1.5 Georgia,serif;padding:16px 0;margin:0 0 25px}
[data-sf-template].bistro .b-address-details{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}[data-sf-template].bistro .b-address-chosen{font-size:12px;background:#e1e9d5;padding:12px}
[data-sf-template].bistro .b-suggestions{padding:0;margin:0 0 20px;list-style:none;border:1px solid #bac5af}
[data-sf-template].bistro .b-suggestions button{display:block;width:100%;background:none;border:0;border-bottom:1px solid #d0d6c3;padding:14px;text-align:left;color:inherit}
[data-sf-template].bistro .b-suggestions button:hover{background:#e0e7d2}[data-sf-template].bistro .b-suggestions strong{font-weight:400;font-size:14px}[data-sf-template].bistro .b-suggestions small{display:block;color:#667361;font-size:11px;margin-top:4px}
[data-sf-template].bistro .b-persons{display:flex;justify-content:space-between;align-items:center;margin:20px 0;font-size:12px}
[data-sf-template].bistro .fm-overlay-box{display:block}[data-sf-template].bistro .b-modal{width:100%;min-width:0}
[data-sf-template].bistro .fm-overlay-box:has(.b-order-body.is-empty){width:min(760px,100%)}
[data-sf-template].bistro .b-checkout .b-auth{display:block;min-height:0}[data-sf-template].bistro .b-checkout .b-auth>aside{display:none}[data-sf-template].bistro .b-checkout .b-auth-form{padding:20px 0}[data-sf-template].bistro .b-checkout .b-auth-form h3{font-size:24px}
[data-sf-template].bistro .b-cookies{z-index:1400}

[data-sf-template].bistro .b-order-body{display:grid;grid-template-columns:56% 44%;min-height:430px}[data-sf-template].bistro .b-order-body.is-empty{display:block}
[data-sf-template].bistro .b-order-receipt{padding:30px 36px 45px}[data-sf-template].bistro .b-receipt-heading{display:flex;justify-content:space-between;text-transform:uppercase;font-size:10px;letter-spacing:.14em;padding-bottom:16px;border-bottom:1px solid #bfc8b5}
[data-sf-template].bistro .b-cart-line{display:grid;grid-template-columns:18px 72px 1fr auto;gap:15px;align-items:start;border-bottom:1px solid #c8cfbd;padding:24px 0}
[data-sf-template].bistro .b-line-number{font:10px Georgia,serif;color:#75806c;padding-top:6px}[data-sf-template].bistro .b-cart-line>img{width:72px;height:88px;object-fit:cover}
[data-sf-template].bistro .b-line-name{border:0;background:none;padding:0;text-align:left;color:inherit;font:21px/1.15 Georgia,serif}[data-sf-template].bistro .b-line-copy>p{font-size:11px;line-height:1.6;color:#6b7565;margin:8px 0 14px}
[data-sf-template].bistro .b-line-copy .b-quantity{height:32px;margin-top:10px}[data-sf-template].bistro .b-line-copy .b-quantity button{width:28px}
[data-sf-template].bistro .b-line-total{display:flex;flex-direction:column;align-items:end;gap:8px}[data-sf-template].bistro .b-line-total strong{font:19px Georgia,serif;white-space:nowrap}[data-sf-template].bistro .b-line-total del{font-size:11px;color:#77816e}
[data-sf-template].bistro .b-line-total button{font-size:10px;color:#64715f}[data-sf-template].bistro .b-cart-line.is-banned .b-line-name{text-decoration:line-through}
[data-sf-template].bistro .b-checkout{padding:30px 36px 36px;background:#e7e9d9;border-left:1px solid #c2ccb3}
[data-sf-template].bistro .b-receipt-choice{display:grid;text-align:left;gap:8px;width:100%;border:1px solid #9eaf92;background:transparent;color:inherit;padding:18px 20px;margin:20px 0 26px}
[data-sf-template].bistro .b-receipt-choice small{font-size:10px;text-transform:uppercase;letter-spacing:.09em}
[data-sf-template].bistro .b-receipt-choice strong{font:23px/1.15 Georgia,serif}[data-sf-template].bistro .b-receipt-choice span{font-size:11px;margin-top:4px;text-decoration:underline;text-underline-offset:4px}
[data-sf-template].bistro .b-loyalty{margin:24px 0}[data-sf-template].bistro .b-loyalty details{border-block:1px solid #c1cbb3;padding:15px 0;font-size:13px}
[data-sf-template].bistro .b-loyalty summary{cursor:pointer}[data-sf-template].bistro .b-loyalty form{display:flex;align-items:end;gap:12px}[data-sf-template].bistro .b-loyalty form .b-field{flex:1;margin:15px 0 0}
[data-sf-template].bistro .b-loyalty form>button{border:0;background:none;color:inherit;padding:16px 0;font-size:11px;text-decoration:underline}
[data-sf-template].bistro .b-totals{border-top:1px solid #9cac8f;padding-top:22px;margin-top:25px}[data-sf-template].bistro .b-totals dl{margin:0 0 18px}
[data-sf-template].bistro .b-totals dl>div{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin:10px 0}[data-sf-template].bistro .b-totals dd{margin:0}
[data-sf-template].bistro .b-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed #93a484;margin:18px 0 22px;padding-top:20px}
[data-sf-template].bistro .b-total>span{font:24px Georgia,serif}[data-sf-template].bistro .b-total>strong{font:34px Georgia,serif;font-weight:400}
[data-sf-template].bistro .b-addons{padding:25px 0}[data-sf-template].bistro .b-addons>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;font-size:13px}[data-sf-template].bistro .b-addons small{display:block;font-size:11px;color:#6a7861}
[data-sf-template].bistro .b-recommendations{margin:20px 0}[data-sf-template].bistro .b-recommendations h4{font:24px Georgia,serif;margin-bottom:20px}
[data-sf-template].bistro .b-recommendations button{display:flex;gap:14px;align-items:center;width:100%;color:inherit;border:0;border-top:1px solid #c8cfbd;padding:12px 0;text-align:left;background:none}
[data-sf-template].bistro .b-recommendations img{width:55px;height:55px;object-fit:cover;border-radius:50%}[data-sf-template].bistro .b-recommendations button>span{font:18px Georgia,serif}[data-sf-template].bistro .b-recommendations small{display:block;font:12px Arial,sans-serif;margin-top:5px}[data-sf-template].bistro .b-recommendations button>b{margin-left:auto;font-weight:400;font-size:24px}
[data-sf-template].bistro .b-empty-cart{max-width:520px;text-align:center;margin:auto;padding:30px 40px 48px}
[data-sf-template].bistro .b-empty-cart h3{font:48px/1.05 Georgia,serif;margin:18px 0}[data-sf-template].bistro .b-empty-cart em{font-weight:400;color:#6b7e5b}
[data-sf-template].bistro .b-empty-cart p{font-size:13px;color:#66765c;line-height:1.8}[data-sf-template].bistro .b-empty-cart .b-action{margin:30px auto 0;max-width:260px}
[data-sf-template].bistro .b-empty-plate{width:110px;height:110px;border:1px solid #b4bfa6;border-radius:50%;padding:13px;margin:0 auto 28px;position:relative;display:grid;place-items:center}
[data-sf-template].bistro .b-empty-plate:after{content:'';position:absolute;inset:13px;border:1px solid #b4bfa6;border-radius:50%}[data-sf-template].bistro .b-empty-plate svg{color:#9a9e7c}
[data-sf-template].bistro .b-order-result{padding:50px}[data-sf-template].bistro .b-order-result h3{font:40px Georgia,serif}[data-sf-template].bistro .b-order-result .b-action{margin:15px 0}
[data-sf-template].bistro .b-promotion{display:grid;grid-template-columns:1fr 1fr}[data-sf-template].bistro .b-promotion>img{width:100%;height:100%;object-fit:cover;min-height:360px}
[data-sf-template].bistro .b-promotion>div{padding:40px}[data-sf-template].bistro .b-promotion p{font:23px/1.5 Georgia,serif;margin:0 0 30px}[data-sf-template].bistro .b-promotion small{display:block;margin:20px 0;font-size:11px}[data-sf-template].bistro .b-promotion .b-text-button{margin-top:18px}
[data-sf-template].bistro .b-cookies{position:fixed;z-index:1400;left:24px;right:24px;bottom:20px;max-width:850px;margin:auto;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:#f5efdf;color:#203a31;border:1px solid #819173;padding:20px 26px;box-shadow:0 10px 40px #00190c55}
[data-sf-template].bistro .b-cookies strong{font:20px Georgia,serif;font-weight:400}[data-sf-template].bistro .b-cookies p{font-size:11px;line-height:1.5;margin:5px 0 0;color:#68755e}
[data-sf-template].bistro .b-cookies a{color:inherit}[data-sf-template].bistro .b-cookie-actions{display:grid;gap:6px}[data-sf-template].bistro .b-cookie-actions button{border:0;border-bottom:1px solid #829174;background:none;color:inherit;font-size:12px;padding:8px;white-space:nowrap}
[data-sf-template].bistro .fm-added{background:var(--b-paper);color:var(--b-ink);border-radius:0;border:1px solid #8c9b7d;box-shadow:0 10px 30px #00190c55}
[data-sf-template].bistro .fm-live p{background:var(--b-paper);color:var(--b-ink);border-radius:0}

@media(min-width:761px){[data-sf-template].bistro .b-stories article[data-width=narrow]{display:none}}
@media(max-width:1100px){[data-sf-template].bistro .b-service{padding:28px 32px 0}[data-sf-template].bistro .b-service-main{grid-template-columns:1fr 1.3fr;gap:24px}[data-sf-template].bistro .b-service-title{display:none}[data-sf-template].bistro .b-service-receiving{border:0;padding:0}[data-sf-template].bistro .b-main{padding:0 32px 70px}[data-sf-template].bistro .b-menu-grid{gap:0 30px}[data-sf-template].bistro .b-menu-card{grid-template-columns:90px 1fr;gap:18px}[data-sf-template].bistro .b-menu-title{font-size:21px}[data-sf-template].bistro .b-dish-copy{padding:44px 28px 0}[data-sf-template].bistro .b-dish-order{margin:25px -28px 0;padding:20px;gap:18px}[data-sf-template].bistro .b-dish h2{font-size:36px}[data-sf-template].bistro .b-auth-form{padding:36px}[data-sf-template].bistro .b-auth>aside{padding:36px}[data-sf-template].bistro .b-cart-line{grid-template-columns:54px 1fr auto;gap:12px}[data-sf-template].bistro .b-line-number{display:none}[data-sf-template].bistro .b-cart-line>img{width:54px;height:70px}[data-sf-template].bistro .b-order-receipt,[data-sf-template].bistro .b-checkout{padding:28px}}
@media(max-width:760px){
[data-sf-template].bistro .b-service{padding:22px 24px 0}[data-sf-template].bistro .b-service-main{display:flex;flex-wrap:wrap;gap:24px}
[data-sf-template].bistro .b-service-receiving{flex:1;min-width:180px}[data-sf-template].bistro .b-service-receiving strong{font-size:28px}[data-sf-template].bistro .b-service-receiving>span{max-width:240px}
[data-sf-template].bistro .b-service-actions{width:100%;justify-content:space-between;gap:15px}[data-sf-template].bistro .b-cart-open{min-width:150px;padding:12px 18px}[data-sf-template].bistro .b-cart-open b{font-size:30px}
[data-sf-template].bistro .b-service-notes{flex-wrap:wrap;gap:10px;margin-top:20px;font-size:9px}[data-sf-template].bistro .b-service-notes>span{margin-left:0;flex:1;text-align:right}
[data-sf-template].bistro .b-nav-toggle{display:block;border:0;padding:4px 0;color:inherit;background:none;font-size:12px}
[data-sf-template].bistro .b-service-notes nav{display:none;order:3;width:100%;padding:12px 0;flex-direction:column;gap:16px;font-size:13px}[data-sf-template].bistro .b-service-notes nav.is-open{display:flex}
[data-sf-template].bistro .b-main{padding:0 24px 48px}[data-sf-template].bistro .b-stories{grid-template-columns:1fr;margin:28px 0 50px;gap:24px}[data-sf-template].bistro .b-stories article[data-width=wide]{display:none}
[data-sf-template].bistro .b-stories article:nth-child(n+3){display:none}[data-sf-template].bistro .b-stories a>div{padding:14px 0}[data-sf-template].bistro .b-stories strong{font-size:12px}
[data-sf-template].bistro .b-menu-heading{display:block;margin-bottom:24px}[data-sf-template].bistro .b-menu-heading h1{font-size:66px}
[data-sf-template].bistro .b-search{width:100%;display:block;margin-top:28px}[data-sf-template].bistro .b-search input{font-size:16px;padding:12px 0}
[data-sf-template].bistro .b-categories{margin:20px -24px 35px;padding:18px 24px;gap:24px}[data-sf-template].bistro .b-categories button{font-size:12px}
[data-sf-template].bistro .b-menu-section{margin-bottom:44px}[data-sf-template].bistro .b-menu-section>header{gap:12px}[data-sf-template].bistro .b-menu-section h2{font-size:30px}[data-sf-template].bistro .b-section-line{display:none}
[data-sf-template].bistro .b-menu-grid{grid-template-columns:1fr}[data-sf-template].bistro .b-menu-card{grid-template-columns:86px minmax(0,1fr);gap:18px;padding:24px 0}
[data-sf-template].bistro .b-menu-title{font-size:22px}[data-sf-template].bistro .b-menu-copy>p{font-size:12px;-webkit-line-clamp:2}[data-sf-template].bistro .b-menu-price>strong{font-size:21px}
[data-sf-template].bistro .b-footer{padding:40px 24px 90px}[data-sf-template].bistro .b-footer-main{grid-template-columns:1fr;gap:28px}[data-sf-template].bistro .b-footer-brand{font-size:40px}
[data-sf-template].bistro .b-footer-main nav{gap:15px 25px}[data-sf-template].bistro .b-footer-bottom{margin-top:30px;gap:14px;font-size:9px}[data-sf-template].bistro .b-footer-bottom a:last-child{margin-left:0}
[data-sf-template].bistro .b-mobile-order{display:flex;position:fixed;bottom:14px;left:14px;right:14px;z-index:1200;justify-content:space-between;align-items:center;padding:16px 18px;border:1px solid #b29575;background:var(--b-peach);color:var(--b-green);font-size:13px}
[data-sf-template].bistro .b-mobile-order b{font-size:11px;border:1px solid currentColor;border-radius:50%;padding:3px 7px;margin-left:7px}
[data-sf-template].bistro .fm-overlay{padding:0;align-items:stretch}[data-sf-template].bistro .fm-overlay-box{width:100%;max-width:none;max-height:100dvh;border:0;min-height:100dvh;overscroll-behavior:contain}
[data-sf-template].bistro .fm-overlay-close{position:fixed;top:15px;right:15px;width:36px;height:36px;background:#f5efdfef;z-index:5}
[data-sf-template].bistro .b-modal-head{padding:32px 24px 25px}[data-sf-template].bistro .b-modal-head h2{font-size:35px;padding-right:32px}
[data-sf-template].bistro .b-dish{grid-template-columns:1fr;min-height:0}[data-sf-template].bistro .b-dish-portrait{min-height:300px;aspect-ratio:1.2}
[data-sf-template].bistro .b-dish-caption{left:24px;right:24px;bottom:22px}[data-sf-template].bistro .b-dish-copy{padding:30px 24px 0}
[data-sf-template].bistro .b-dish h2{font-size:39px;margin:8px 0 22px}[data-sf-template].bistro .b-dish-description{font-size:14px}[data-sf-template].bistro .b-dish-options{margin-bottom:15px}
[data-sf-template].bistro .b-dish-order{position:sticky;bottom:0;margin:20px -24px 0;padding:16px 20px calc(16px + env(safe-area-inset-bottom));gap:18px;grid-template-columns:auto 1fr}
[data-sf-template].bistro .b-dish-order .b-action{min-height:63px;padding:12px 16px;font-size:12px}[data-sf-template].bistro .b-dish-order .b-action span b{font-size:19px}
[data-sf-template].bistro .b-dish-order .b-quantity button{width:28px}[data-sf-template].bistro .b-options{grid-template-columns:1fr 1fr}[data-sf-template].bistro .b-option{padding:10px;font-size:12px}
[data-sf-template].bistro .b-auth{grid-template-columns:1fr}[data-sf-template].bistro .b-auth>aside{padding:28px 24px;display:grid;grid-template-columns:1fr auto;gap:16px}
[data-sf-template].bistro .b-auth>aside>svg{grid-column:2;grid-row:1}[data-sf-template].bistro .b-auth>aside h3{font-size:36px;grid-column:1;grid-row:1;margin:0}
[data-sf-template].bistro .b-auth>aside p{grid-column:1/-1;margin:0;max-width:270px;font-size:12px}[data-sf-template].bistro .b-auth-form{padding:30px 24px}
[data-sf-template].bistro .b-auth-form h3{font-size:28px}[data-sf-template].bistro .b-receiving-body{grid-template-columns:1fr}
[data-sf-template].bistro .b-receiving-body>aside{padding:22px 24px;border-right:0;border-bottom:1px solid #bec9b0}[data-sf-template].bistro .b-receiving-modes{grid-template-columns:1fr 1fr;gap:12px}
[data-sf-template].bistro .b-receiving-modes button{padding:18px 16px;gap:10px}[data-sf-template].bistro .b-receiving-modes strong{font-size:24px}[data-sf-template].bistro .b-receiving-modes small{font-size:10px;max-width:120px}
[data-sf-template].bistro .b-receiving-modes b{top:18px;right:14px}[data-sf-template].bistro .b-receiving-form{padding:26px 24px 40px}
[data-sf-template].bistro .b-order-body{grid-template-columns:1fr}[data-sf-template].bistro .b-order-receipt{padding:24px}[data-sf-template].bistro .b-checkout{border-left:0;border-top:1px dashed #9bac8c;padding:30px 24px 45px}
[data-sf-template].bistro .b-line-name{font-size:20px}[data-sf-template].bistro .b-line-total strong{font-size:17px}[data-sf-template].bistro .b-cart-line{grid-template-columns:48px 1fr auto;gap:12px}
[data-sf-template].bistro .b-cart-line>img{width:48px;height:65px}[data-sf-template].bistro .b-line-copy>p{font-size:10px}[data-sf-template].bistro .b-empty-cart{padding:30px 0 45px}[data-sf-template].bistro .b-empty-cart h3{font-size:44px}
[data-sf-template].bistro .b-promotion{grid-template-columns:1fr}[data-sf-template].bistro .b-promotion>img{min-height:0;aspect-ratio:1.5;object-fit:cover}[data-sf-template].bistro .b-promotion>div{padding:28px 24px}
[data-sf-template].bistro .b-cookies{left:12px;right:12px;bottom:12px;grid-template-columns:1fr auto;gap:15px;padding:18px}[data-sf-template].bistro .b-cookies>svg{display:none}
[data-sf-template].bistro .b-cookies strong{font-size:18px}[data-sf-template].bistro .b-cookies p{font-size:10px}[data-sf-template].bistro .b-cookie-actions button{font-size:11px}
[data-sf-template].bistro .b-story-page{margin:40px 0}[data-sf-template].bistro .b-story-page h1{font-size:40px}[data-sf-template].bistro .b-story-page h2{font-size:29px}[data-sf-template].bistro .b-story-page p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){[data-sf-template].bistro *{transition:none!important;animation:none!important}}

@media (max-width: 1100px) {
  [data-sf-template] .ai-story { padding: 45px 5vw 30px; }
  [data-sf-template] .ai-hero { min-height: 570px; }
}
@media (max-width: 760px) {
  [data-sf-template] .ai-masthead { padding: 20px 24px; }
  [data-sf-template] .ai-brand { font-size: 23px; gap: 10px; }
  [data-sf-template] .ai-hero { grid-template-columns: 1fr; }
  [data-sf-template] .ai-story { padding: 42px 24px 30px; }
  [data-sf-template] .ai-story h1 { font-size: clamp(46px, 10.8vw, 68px); max-width: 560px; }
  [data-sf-template] .ai-kicker { margin-bottom: 25px; font-size: 9px; }
  [data-sf-template] .ai-description { margin: 22px 0; font-size: 15px; }
  [data-sf-template] .ai-city { margin-top: 30px; }
  [data-sf-template] .ai-photo { min-height: 320px; }
  [data-sf-template] .ai-photo-caption { bottom: 40px; left: 40px; }
  [data-sf-template] .ai-divider { justify-content: flex-start; padding: 13px 24px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
}

[data-sf-template] .ai-intro .ai-brand { color: var(--ai-peach); }
[data-sf-template] .ai-divider svg { flex: none; width: 18px; height: 18px; }
[data-sf-template].bistro{--ai-green:#102e27;--ai-cream:#f4ead5;--ai-peach:#f2b38b}