/* 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); }
/* 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] .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] .fm-card: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; position: relative; z-index: 2; }
[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); }
[data-sf-template] .fm-skeleton-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
[data-sf-template] .fm-skeleton-card { display: grid; gap: 10px; padding-bottom: 20px; border-radius: var(--fm-radius-xl);
  border: 1px solid var(--fm-line); overflow: hidden; }
[data-sf-template] .fm-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--fm-surface-2) 25%,
  var(--fm-surface-3) 50%, var(--fm-surface-2) 75%); background-size: 200% 100%;
  animation: fm-shimmer 1.4s ease-in-out infinite; }
[data-sf-template] .fm-skel-media { aspect-ratio: 4 / 3; border-radius: 0; }
[data-sf-template] .fm-skel-line { height: 14px; margin: 0 20px; }
[data-sf-template] .fm-skel-short { width: 50%; }
[data-sf-template] .fm-skel-price { height: 32px; width: 40%; margin: 8px 20px 0; }
[data-sf-template] .fm-skeleton-lines { display: grid; gap: 16px; }
[data-sf-template] .fm-skeleton-line { display: flex; gap: 16px; align-items: center; }
[data-sf-template] .fm-skel-thumb { width: 80px; height: 60px; border-radius: var(--fm-radius); }
[data-sf-template] .fm-skel-bar { flex: 1; height: 60px; }
@media (prefers-reduced-motion: reduce) { [data-sf-template] .fm-skel { animation: none; } [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-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [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 { 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 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; }
@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; the map of the
   reference is not drawn (no map service yet). Below 900 px a sheet. Owner remark 06.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] .d-address { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-height: 0;
  overflow: hidden; border-radius: inherit; }
[data-sf-template] .d-address-form { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto;
  padding: 28px 28px 24px; overscroll-behavior: contain; }
[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; margin-top: auto; padding-top: 8px; }
[data-sf-template] .d-combo { position: relative; display: grid; }
[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] .d-address { display: flex; flex-direction: column; overflow: auto; }
  [data-sf-template] .d-address-form { overflow: visible; padding: 20px 20px calc(20px + 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 panel is fixed to the right edge for the full window height (references 02/03): the page beside it
   (demo bar, header, category row, catalog, footer) is narrowed by the panel width, so the pinned total and the
   pay button are on screen at any scroll position and any window height. */
[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 { display: 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; }
/* Right column of the catalog (place `catalog-aside`, U9): exists only when a widget is assigned and the panel
   is closed; the grid narrows. Below the mobile threshold the place is not shown (U90). */
[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: 900px) {
  [data-sf-template] .d-root[data-panel='shown'] { padding-right: var(--d-panel); }
}
@media (min-width: 1200px) {
  [data-sf-template] .d-root[data-panel='shown'] .d-catalog .fm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-sf-template] .d-root[data-panel='hidden'] .d-catalog .fm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-sf-template] .d-root[data-nav='left'][data-panel='shown'] .d-catalog .fm-grid { grid-template-columns: repeat(2, 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); }
  [data-sf-template] .d-root[data-panel='shown'] .fm-header-row { flex-wrap: wrap; }
}
/* 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); }
@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, [data-sf-template] .d-root[data-panel='hidden'] .d-panel { display: none; }
  [data-sf-template] .d-root[data-sheet='open'] .d-panel { position: fixed; inset: 0; z-index: 45; display: flex; height: auto;
    min-height: 0; border-radius: 0; box-shadow: none; animation: d-sheet-in .22s ease-out; }
  [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)); }
}
@media (prefers-reduced-motion: reduce) { [data-sf-template] .d-root[data-sheet='open'] .d-panel { animation: 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-loading { color: var(--wc-muted); }
[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;
}
[data-sf-template] .wc-line-name:hover { text-decoration: underline; }
[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 {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 6px 0;
}
[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-filter-button {
  position: relative; width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--wc-line); border-radius: var(--wc-radius-control); background: var(--wc-surface);
}
[data-sf-template] .wc-filter-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 9px; color: #fff; background: var(--wc-accent); font-size: 11px; font-weight: 600;
}
[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 { min-width: 0; display: flex; flex-direction: column; }
[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] button.wc-card-media:hover 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; 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-card-skeleton .wc-card-media, [data-sf-template] .wc-skeleton-line, [data-sf-template] .wc-skeleton-title {
  background: linear-gradient(90deg, #ececec 0%, #f6f6f6 50%, #ececec 100%) 0 0 / 200% 100%;
  animation: wc-shimmer 1.4s linear infinite;
}
[data-sf-template] .wc-skeleton-line { display: block; height: 14px; margin-top: 10px; border-radius: 6px; }
[data-sf-template] .wc-skeleton-short { width: 60%; margin-top: 6px; }
[data-sf-template] .wc-skeleton-title { display: block; width: 120px; height: 24px; margin-bottom: 16px; border-radius: 8px; }

[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-loading .wc-state-mark { border-top-color: var(--wc-ink); animation: wc-spin 1s linear infinite; }
[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; }
[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; }
}

/* 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 2385:57479: colour photo, brand centered, round menu button, island overlap -64. */
[data-sf-template] .wc-hero { min-height: 420px; padding: 24px 16px 88px; border-radius: 0; justify-content: flex-start; gap: 16px; }
[data-sf-template] .wc-hero-photo { filter: none; }
[data-sf-template] .wc-hero::after { background: linear-gradient(180deg, rgb(17 17 17 / 55%) 0%, rgb(17 17 17 / 5%) 45%,
  rgb(17 17 17 / 35%) 100%); }
[data-sf-template] .wc-hero-top { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: start; gap: 8px; }
[data-sf-template] .wc-hero-copy { grid-column: 2; }
[data-sf-template] .wc-hero-title { font-size: 24px; line-height: 30px; letter-spacing: .06em; }
[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: rgb(255 255 255 / 92%);
}
[data-sf-template] .wc-hero-menu:hover { background: #fff; }
[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: -64px; }
[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: 3px solid var(--wc-accent); padding: 4px; }
[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 with the round filter button inside, 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 60px 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-filter-button {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  color: var(--wc-muted); background: var(--wc-soft);
}
[data-sf-template] .wc-chip { height: 40px; padding: 0 16px 0 12px; border-radius: var(--wc-radius-control); font-weight: 500; }
[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 · 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; }
[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-faint); }
[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; }

/* 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 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 { min-height: 420px; padding: 32px; border-radius: var(--wc-radius-hero); }
  [data-sf-template] .wc-hero::after { background: linear-gradient(180deg, rgb(17 17 17 / 45%) 0%, rgb(17 17 17 / 5%) 40%,
    rgb(17 17 17 / 40%) 100%); }
  [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-layout { margin-top: 16px; }
  [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); }

/* 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; }
[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; isolation: isolate; min-height: 400px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 24px; padding: 56px 16px 16px; overflow: hidden;
  border-radius: 0 0 var(--wc-radius-panel) var(--wc-radius-panel); color: #fff; background: #000;
}
[data-sf-template] .wc-hero-photo {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.62);
}
[data-sf-template] .wc-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 45%) 50%, #000 100%);
}
[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: rgb(255 255 255 / 80%); 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-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 {
    min-height: 420px; padding: 32px; border-radius: var(--wc-radius-hero);
  }
  [data-sf-template] .wc-hero-photo { filter: brightness(.82); }
  [data-sf-template] .wc-hero::after {
    background: linear-gradient(180deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 10%) 40%, rgb(0 0 0 / 70%) 100%);
  }
  [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; }
}

/* 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%); }
[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; }
}

/* 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: #eeeff2;              /* bg/body */
  --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-radius-hero: 32px;
  --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-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; }

/* 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; }

[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; }
/* A cart change in flight is plain loading, as in legacy: the last answer stays in place and pulses, no wording. */
[data-sf-template] .d-footer[aria-busy='true'] .d-totals dd, [data-sf-template] .d-footer[aria-busy='true'] .d-pay-row b, [data-sf-template] .d-footer[aria-busy='true'] .fm-button, [data-sf-template] .fm-line[aria-busy='true'] .fm-line-price, [data-sf-template] .d-product[aria-busy='true'] .fm-price-bar .fm-button { animation: st-pulse 1.2s ease infinite; }
@media (prefers-reduced-motion: reduce) { [data-sf-template] .d-footer[aria-busy='true'] *, [data-sf-template] .fm-line[aria-busy='true'] *, [data-sf-template] .d-product[aria-busy='true'] .fm-button { animation: none; } }

/* 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); }

/* 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); }