@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/golos-regular.woff2) format('woff2'); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/golos-500.woff2) format('woff2'); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/golos-600.woff2) format('woff2'); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/golos-700.woff2) format('woff2'); }
[data-sf-template] { font-family: 'Golos Text', sans-serif; background: #fff; }
[data-sf-template] .d-root[data-sheet='open'] .d-panel { overflow: hidden; overscroll-behavior: contain; }
/* figma-master/tokens.css */
/* 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; }
}

/* figma-master/base.css */
/* 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; }
}

/* figma-master/header.css */
/* 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; }
}

/* figma-master/catalog.css */
/* 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; }
[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-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; }
}

/* figma-master/product.css */
/* 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; }
}

/* figma-master/cart.css */
/* 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)); }
}

/* figma-master/site.css */
/* 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; }
}

/* mlp-d/d.css */
/* 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-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)); }
}

/* mlp-d/panel.css */
/* 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-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; } }

/* mlp-d/controls.css */
/* 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; }
}

/* mlp-d/address.css */
/* Address popup (legacy structure, Figma 4262-7776 / 4262-8057 / 4659-42287 / 4260-7314): form left, demo map
   right; below 900 px a sheet with the map on top. Owner remark 06.10. */
[data-sf-template] .fm-overlay-box:has(.d-address) { width: min(940px, calc(100vw - 160px)); max-height: min(660px, calc(100vh - 48px)); }
[data-sf-template] .d-address { display: grid; grid-template-columns: minmax(0, 400px) 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); }
[data-sf-template] .d-map { position: relative; min-height: 320px; overflow: hidden; background: #f4f1e8; }
[data-sf-template] .d-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-sf-template] .d-map-pin { position: absolute; left: 50%; top: 46%; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50% 50% 50% 4px; transform: translate(-50%, -50%) rotate(-45deg); background: var(--fm-brand);
  color: #fff; box-shadow: var(--fm-shadow-2); }
[data-sf-template] .d-map-pin .fm-icon { transform: rotate(45deg); }
[data-sf-template] .d-map-badge { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--fm-radius-s);
  background: rgb(255 255 255 / 92%); 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-map { order: -1; flex: none; min-height: 0; height: min(240px, 30vh); }
  [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; }

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

/* standard-template/src/item-status.css */
[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; }