/* Витрина заказа — РЕДИЗАЙН «Umami» (тёплая чистота Wolt + аппетит Dodo).
   Прототип. Мобайл-first. Бренд-токены (--sf-primary/--sf-accent) задаёт JS из site_settings. */
:root{
  /* ===== БРЕНД (переопределяются JS — НЕ переименовывать) ===== */
  --sf-primary:#1F2430;
  --sf-accent:#FF5A1F;
  --sf-accent-press:#E64A12;
  --sf-accent-tint:#FFF1EA;
  --sf-accent-ring:rgba(255,90,31,.28);
  --sf-on-accent:#FFFFFF;

  /* ===== НЕЙТРАЛЬ (светлая тема) ===== */
  --sf-bg:#FBF7F2;
  --sf-surface:#FFFFFF;
  --sf-surface-2:#F4F0EA;
  --sf-surface-3:#ECE7DF;

  --sf-text:#1F2430;
  --sf-text-2:#4A4F5C;
  --sf-muted:#7A7E8A;
  --sf-faint:#B4B7C0;
  --sf-on-dark:#FFFFFF;

  --sf-line:#EBE6DE;
  --sf-line-strong:#DED8CE;

  --sf-success:#1FA463; --sf-success-tint:#E8F6EF;
  --sf-warn:#B57314;    --sf-warn-tint:#FBF1E0;
  --sf-danger:#DC3A2B;  --sf-danger-tint:#FCECEA;
  --sf-gold:#F5A623;
  --sf-badge-hit:#FF5A1F;   --sf-badge-hit-tint:#FFF1EA;
  --sf-badge-spicy:#DC3A2B; --sf-badge-spicy-tint:#FCECEA;
  --sf-badge-new:#2563EB;   --sf-badge-new-tint:#EAF0FE;

  /* ===== ТИПОГРАФИКА ===== */
  --sf-font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sf-fs-hero:26px; --sf-fs-h2:20px; --sf-fs-sheet-title:22px;
  --sf-fs-lg:17px; --sf-fs-body:15px; --sf-fs-sm:14px; --sf-fs-xs:13px; --sf-fs-2xs:11px;
  --sf-lh:1.4; --sf-lh-tight:1.18;

  /* ===== РАДИУСЫ ===== */
  --sf-r-xs:8px; --sf-r-sm:12px; --sf-r-md:16px; --sf-r-lg:20px; --sf-r-xl:24px; --sf-r-pill:999px;
  --sf-radius:16px;

  /* ===== ТЕНИ ===== */
  --sf-shadow-xs:0 1px 2px rgba(31,36,48,.06);
  --sf-shadow-sm:0 2px 8px rgba(31,36,48,.08);
  --sf-shadow-md:0 6px 20px rgba(31,36,48,.10);
  --sf-shadow-lg:0 -6px 28px rgba(31,36,48,.14);
  --sf-shadow-cart:0 10px 30px var(--sf-accent-ring);
  --sf-shadow:var(--sf-shadow-md);

  /* ===== ОТСТУПЫ ===== */
  --sf-gutter:16px; --sf-maxw:720px;
  --sf-safe-b:env(safe-area-inset-bottom,0px);
  --sf-dur:.16s; --sf-ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:var(--sf-font);
  background:var(--sf-bg);color:var(--sf-text);
  font-size:var(--sf-fs-body);line-height:var(--sf-lh);
  padding-bottom:calc(88px + var(--sf-safe-b));
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ======================= ШАПКА (hero + cover + инфо) ======================= */
.sf-header{position:relative;background:var(--sf-surface);max-width:var(--sf-maxw);margin:0 auto;padding:0 0 4px;overflow:hidden}
.sf-cover{position:relative;height:172px;background:#e9e2d8 center/cover no-repeat}
.sf-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,36,48,.18) 0%,rgba(31,36,48,0) 42%,var(--sf-surface) 100%)}
.sf-brand{display:flex;align-items:flex-end;gap:12px;padding:0 var(--sf-gutter);position:relative;z-index:1}
.sf-header.has-cover .sf-brand{margin-top:-38px}
.sf-logo{width:60px;height:60px;border-radius:var(--sf-r-md);object-fit:cover;background:var(--sf-surface-2);border:3px solid #fff;box-shadow:var(--sf-shadow-md);flex:0 0 auto}
.sf-brand-txt{padding-bottom:2px;min-width:0}
.sf-title{font-weight:800;font-size:var(--sf-fs-hero);line-height:var(--sf-lh-tight);letter-spacing:-.4px;color:var(--sf-text)}
.sf-context{font-size:var(--sf-fs-sm);font-weight:600;color:var(--sf-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:11px var(--sf-gutter) 2px;font-size:var(--sf-fs-sm);font-weight:600;color:var(--sf-muted)}
.sf-info-item{display:inline-flex;align-items:center;gap:5px}
.sf-info-rating{color:var(--sf-text);font-weight:700}
.sf-info-rating .st{color:var(--sf-gold)}
.sf-info-cnt{color:var(--sf-muted);font-weight:500}
.sf-info-free{color:var(--sf-success);font-weight:700}
.sf-info-dot{color:var(--sf-faint)}

/* ======================= БАННЕР ======================= */
.sf-banner{max-width:var(--sf-maxw);margin:14px auto 0;padding:0 var(--sf-gutter);display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sf-banner::-webkit-scrollbar{display:none}
.sf-slide{scroll-snap-align:start;flex:0 0 86%;height:150px;border-radius:var(--sf-r-lg);background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent-press));color:#fff;display:flex;align-items:flex-end;padding:16px;font-weight:800;position:relative;overflow:hidden;box-shadow:var(--sf-shadow-xs)}
.sf-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(31,36,48,.72) 0%,rgba(31,36,48,0) 58%)}
.sf-slide span{position:relative;z-index:1;font-size:18px;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.45)}

/* ======================= ПОИСК ======================= */
.sf-searchbar{position:relative;max-width:var(--sf-maxw);margin:14px auto 0;padding:0 var(--sf-gutter)}
.sf-searchbar::before{content:"";position:absolute;left:calc(var(--sf-gutter) + 15px);top:50%;width:17px;height:17px;transform:translateY(-50%);opacity:.5;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7E8A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E")}
.sf-search{width:100%;padding:13px 16px 13px 44px;border-radius:var(--sf-r-md);border:none;background:var(--sf-surface-2);font-size:var(--sf-fs-body);color:var(--sf-text);outline:none;transition:box-shadow var(--sf-dur),background var(--sf-dur)}
.sf-search::placeholder{color:var(--sf-faint)}
.sf-search:focus{background:var(--sf-surface);box-shadow:0 0 0 2px var(--sf-accent-ring)}

/* ======================= КАТЕГОРИИ (липкие табы-подчёркивание, стиль Яндекс.Еда) ======================= */
.sf-cats{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--sf-bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--sf-line);display:flex;gap:22px;overflow-x:auto;padding:6px var(--sf-gutter) 0;scrollbar-width:none;margin-top:14px}
.sf-cats::-webkit-scrollbar{display:none}
.sf-cat{flex:0 0 auto;background:none;padding:9px 0 11px;color:var(--sf-muted);font-weight:700;font-size:15px;white-space:nowrap;border-bottom:2.5px solid transparent;transition:color var(--sf-dur),border-color var(--sf-dur)}
.sf-cat:active{color:var(--sf-text-2)}
.sf-cat.active{color:var(--sf-text);border-bottom-color:var(--sf-accent)}

/* ======================= МЕНЮ (сетка 2 колонки, фото сверху) ======================= */
.sf-menu{max-width:var(--sf-maxw);margin:0 auto;padding:4px var(--sf-gutter) 24px}
.sf-section{scroll-margin-top:60px;padding-top:6px;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.sf-section h2{grid-column:1 / -1;font-size:var(--sf-fs-h2);font-weight:800;letter-spacing:-.3px;margin:20px 2px 0}

.sf-card{display:flex;flex-direction:column;position:relative;transition:transform .12s ease-out}
.sf-card:not(.disabled):active{transform:scale(.98)}
.sf-card-media{width:100%;aspect-ratio:1 / 1;border-radius:var(--sf-r-md);overflow:hidden;background:var(--sf-surface-2) center/cover no-repeat;position:relative}
.sf-card-media .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--sf-faint)}
.sf-media-plus{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--sf-accent);font-size:25px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(31,36,48,.24);transition:transform .1s ease-out}
.sf-media-plus:active{transform:scale(.88)}
.sf-badges{position:absolute;left:8px;top:8px;display:flex;gap:5px;flex-wrap:wrap;max-width:calc(100% - 54px)}
.sf-badge{font-size:11px;font-weight:800;letter-spacing:.2px;padding:4px 8px;border-radius:var(--sf-r-pill);background:rgba(255,255,255,.94);color:var(--sf-badge-hit);box-shadow:0 1px 5px rgba(31,36,48,.16)}
.sf-badge.spicy{color:var(--sf-badge-spicy)}
.sf-badge.new{color:var(--sf-badge-new)}
.sf-card-body{padding:9px 2px 0;display:flex;flex-direction:column;gap:3px;min-width:0}
.sf-price{font-weight:800;font-size:17px;color:var(--sf-text);line-height:1.1}
.sf-card-name{font-weight:600;font-size:14px;color:var(--sf-text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-card-desc{color:var(--sf-muted);font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* вес + рейтинг блюда (соц-доказательство, стиль Яндекс.Еда) */
.sf-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:3px}
.sf-card-weight{font-size:12px;color:var(--sf-faint);font-weight:600}
.sf-card-rate{font-size:12px;font-weight:700;color:var(--sf-success)}
.sf-sheet-weight{font-size:15px;font-weight:600;color:var(--sf-faint);letter-spacing:0}
.sf-sheet-meta{margin:-2px 0 8px}

/* обёртка меню+корзины (на мобайле корзина скрыта) */
.sf-body{display:block}
.sf-cartcol{display:none}

/* кнопка «+ Добавить» / степпер внизу карточки (стиль Яндекс.Еда) */
.sf-card-body{flex:1 1 auto}
.sf-card-addwrap{margin-top:auto;padding-top:10px}
.sf-card-add{width:100%;height:40px;border-radius:var(--sf-r-sm);background:var(--sf-surface-2);color:var(--sf-text);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;transition:background var(--sf-dur),color var(--sf-dur)}
.sf-card-add:active{background:var(--sf-surface-3)}
.sf-card-add[disabled]{color:var(--sf-faint);cursor:default}
.sf-card-add-ic{font-size:19px;font-weight:800;line-height:1;color:var(--sf-accent)}
.sf-card-stepper{width:100%;height:40px;border-radius:var(--sf-r-sm);background:var(--sf-accent-tint);display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.sf-card-step{width:36px;height:36px;border-radius:var(--sf-r-xs);color:var(--sf-accent);font-size:21px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center}
.sf-card-step:active{background:var(--sf-accent-ring)}
.sf-card-qty{font-weight:800;font-size:15px;color:var(--sf-text);min-width:24px;text-align:center}

/* стоп-лист / недоступно */
.sf-card.disabled{cursor:default}
.sf-card.disabled .sf-card-media{filter:grayscale(.72) brightness(.97)}
.sf-card.disabled .sf-price,.sf-card.disabled .sf-card-name,.sf-card.disabled .sf-card-desc{color:var(--sf-faint)}
.sf-soldout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(31,36,48,.86);color:#fff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:var(--sf-r-pill);white-space:nowrap}

/* ======================= ПРОГРЕСС ДО БЕСПЛАТНОЙ ДОСТАВКИ ======================= */
.sf-freebar{position:fixed;left:var(--sf-gutter);right:var(--sf-gutter);bottom:calc(80px + var(--sf-safe-b));max-width:688px;margin:0 auto;z-index:34;background:var(--sf-surface);border-radius:var(--sf-r-md);box-shadow:var(--sf-shadow-md);padding:10px 14px;animation:sf-pop-in .22s var(--sf-ease)}
.sf-freebar-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--sf-text);margin-bottom:7px}
.sf-freebar-accent{color:var(--sf-accent);font-weight:800}
.sf-freebar.done .sf-freebar-top{margin-bottom:0;color:var(--sf-success)}
.sf-freebar-track{height:6px;border-radius:var(--sf-r-pill);background:var(--sf-surface-3);overflow:hidden}
.sf-freebar-fill{height:100%;border-radius:var(--sf-r-pill);background:linear-gradient(90deg,var(--sf-accent),var(--sf-accent-press));transition:width .35s var(--sf-ease)}

/* ======================= ПЛАВАЮЩАЯ КОРЗИНА ======================= */
.sf-cartbar{position:fixed;left:var(--sf-gutter);right:var(--sf-gutter);bottom:calc(16px + var(--sf-safe-b));max-width:688px;margin:0 auto;z-index:35;background:var(--sf-accent);color:#fff;border-radius:var(--sf-r-lg);height:56px;padding:0 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--sf-shadow-cart);font-weight:700;animation:sf-pop-in .22s var(--sf-ease)}
.sf-cartbar:active{background:var(--sf-accent-press)}
.sf-cartbar-count{background:rgba(255,255,255,.22);border-radius:var(--sf-r-pill);min-width:26px;height:26px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--sf-fs-sm);font-weight:800}
.sf-cartbar-label{flex:1;text-align:left;font-size:var(--sf-fs-body)}
.sf-cartbar-sum{font-size:16px;font-weight:800}
@keyframes sf-pop-in{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ======================= ОВЕРЛЕЙ + НИЖНИЙ ЛИСТ ======================= */
.sf-overlay{position:fixed;inset:0;background:rgba(31,36,48,.5);z-index:40;animation:sf-fade .18s ease}
.sf-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--sf-surface);border-radius:var(--sf-r-xl) var(--sf-r-xl) 0 0;max-width:var(--sf-maxw);margin:0 auto;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--sf-shadow-lg);animation:sf-slide-up .26s var(--sf-ease)}
.sf-sheet::before{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:40px;height:4px;border-radius:var(--sf-r-pill);background:var(--sf-surface-3);z-index:3}
@keyframes sf-fade{from{opacity:0}to{opacity:1}}
@keyframes sf-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sf-sheet-hero{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--sf-surface-2);border-radius:var(--sf-r-xl) var(--sf-r-xl) 0 0;flex:0 0 auto}
.sf-sheet-hero.ph{display:flex;align-items:center;justify-content:center;font-size:56px;color:var(--sf-faint)}
.sf-sheet-scroll{overflow-y:auto;padding:18px 18px 8px;flex:1}
.sf-sheet-close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--sf-text);font-size:19px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:var(--sf-shadow-sm)}
.sf-sheet h3{font-size:var(--sf-fs-sheet-title);font-weight:800;letter-spacing:-.3px;margin:2px 0 4px}
.sf-sheet .sf-sheet-desc{color:var(--sf-muted);font-size:var(--sf-fs-sm);margin-bottom:12px;line-height:1.4}

/* группы модификаторов */
.sf-group{border-top:1px solid var(--sf-line);padding:16px 0}
.sf-group-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;gap:8px}
.sf-group-name{font-weight:700;font-size:var(--sf-fs-body)}
.sf-group-hint{font-size:var(--sf-fs-xs);color:var(--sf-muted);white-space:nowrap;background:var(--sf-surface-2);padding:2px 9px;border-radius:var(--sf-r-pill)}
.sf-group-hint.req{color:var(--sf-accent);font-weight:700;background:var(--sf-accent-tint)}
.sf-opt{display:flex;align-items:center;gap:12px;padding:11px 0}
.sf-opt.out{opacity:.5}
.sf-opt.out .sf-opt-name{text-decoration:line-through}
.sf-opt-name{flex:1;font-size:var(--sf-fs-body)}
.sf-opt-price{color:var(--sf-muted);font-size:var(--sf-fs-sm);font-weight:600}
.sf-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--sf-line-strong);flex:0 0 auto;position:relative;transition:border-color var(--sf-dur)}
.sf-opt.sel .sf-radio{border-color:var(--sf-accent)}
.sf-opt.sel .sf-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--sf-accent)}
.sf-stepper{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.sf-step{width:32px;height:32px;border-radius:var(--sf-r-xs);border:1.5px solid var(--sf-line);font-size:18px;font-weight:700;color:var(--sf-text);display:flex;align-items:center;justify-content:center;background:var(--sf-surface);transition:background var(--sf-dur)}
.sf-step:active{background:var(--sf-surface-2)}
.sf-step.zero{color:var(--sf-faint);border-color:var(--sf-line)}
.sf-step-val{min-width:16px;text-align:center;font-weight:700}

/* кол-во + коммент + CTA */
.sf-qtyrow{display:flex;align-items:center;justify-content:space-between;padding:16px 0 6px;border-top:1px solid var(--sf-line)}
.sf-qtyrow b{font-weight:700}
.sf-qty{display:flex;align-items:center;gap:16px}
.sf-qty .sf-step{width:36px;height:36px}
.sf-qty-val{font-weight:800;font-size:18px;min-width:22px;text-align:center}
.sf-note{width:100%;padding:12px 13px;border-radius:var(--sf-r-sm);border:none;background:var(--sf-surface-2);font-size:var(--sf-fs-sm);margin:8px 0 4px;resize:none;outline:none;font-family:inherit;transition:box-shadow var(--sf-dur),background var(--sf-dur)}
.sf-note::placeholder{color:var(--sf-faint)}
.sf-note:focus{background:var(--sf-surface);box-shadow:0 0 0 2px var(--sf-accent-ring)}
.sf-sheet-foot{flex:0 0 auto;padding:12px 18px calc(16px + var(--sf-safe-b));border-top:1px solid var(--sf-line);background:var(--sf-surface)}
.sf-cta{width:100%;background:var(--sf-accent);color:#fff;border-radius:var(--sf-r-lg);height:54px;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:var(--sf-shadow-sm);transition:background var(--sf-dur),transform .1s ease-out}
.sf-cta:active{transform:scale(.99);background:var(--sf-accent-press)}
.sf-cta[disabled]{background:var(--sf-surface-3);color:var(--sf-faint);box-shadow:none;transform:none}

/* корзина */
.sf-cart-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--sf-line)}
.sf-cart-line-body{flex:1;min-width:0}
.sf-cart-line-name{font-weight:700}
.sf-cart-line-mods{color:var(--sf-muted);font-size:var(--sf-fs-xs);margin-top:3px;line-height:1.35}
.sf-cart-line-note{color:var(--sf-muted);font-size:12px;font-style:italic;margin-top:3px}
.sf-cart-line-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.sf-cart-empty{text-align:center;color:var(--sf-muted);padding:44px 0;font-size:var(--sf-fs-sm)}
.sf-cart-total{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:18px;padding:16px 0 4px}
.sf-minhint{color:var(--sf-accent);font-size:var(--sf-fs-xs);font-weight:600;text-align:center;margin-bottom:8px}

/* Допродажи «Добавьте к заказу» (кросс-сейл в корзине) */
.sf-upsell{margin:6px 0 2px;border-top:1px solid var(--sf-line);padding-top:14px}
.sf-upsell-title{font-weight:800;font-size:16px;margin:0 0 10px;letter-spacing:-.2px}
.sf-upsell-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px 4px}
.sf-upsell-row::-webkit-scrollbar{display:none}
.sf-up-card{flex:0 0 120px;width:120px}
.sf-up-media{width:120px;height:98px;border-radius:var(--sf-r-sm);overflow:hidden;background:var(--sf-surface-2) center/cover no-repeat;position:relative}
.sf-up-media .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--sf-faint)}
.sf-up-add{position:absolute;right:6px;bottom:6px;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--sf-accent);font-size:22px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(31,36,48,.22);transition:transform .1s ease-out}
.sf-up-add:active{transform:scale(.9)}
.sf-up-name{font-size:13px;font-weight:600;color:var(--sf-text);margin-top:7px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-up-price{font-size:14px;font-weight:800;color:var(--sf-text);margin-top:3px}

/* ======================= ЧЕК-АУТ ======================= */
.co-ctx{background:var(--sf-surface);border-radius:var(--sf-r-md);box-shadow:var(--sf-shadow-xs);padding:12px 14px;font-weight:700;font-size:var(--sf-fs-sm);margin:6px 0 10px}
.co-who{font-size:var(--sf-fs-xs);color:var(--sf-muted);margin:-4px 0 10px}
.co-closed{background:var(--sf-danger-tint);color:var(--sf-danger);border-radius:var(--sf-r-md);padding:11px 14px;font-size:var(--sf-fs-sm);font-weight:600;margin:0 0 10px}
.co-seg{display:flex;gap:8px;margin:6px 0 10px}
.co-seg-btn{flex:1;padding:12px 10px;border-radius:var(--sf-r-sm);border:1.5px solid var(--sf-line);background:var(--sf-surface);font-weight:700;font-size:var(--sf-fs-sm);color:var(--sf-muted);transition:all var(--sf-dur)}
.co-seg-btn.active{border-color:var(--sf-accent);color:var(--sf-accent);background:var(--sf-accent-tint)}
.co-label{font-weight:700;font-size:var(--sf-fs-sm);margin:12px 0 6px}
.co-input{width:100%;padding:12px 13px;border-radius:var(--sf-r-sm);border:1px solid var(--sf-line);font:inherit;font-size:var(--sf-fs-body);outline:none;margin-bottom:8px;background:var(--sf-surface);transition:box-shadow var(--sf-dur),border-color var(--sf-dur)}
.co-input:focus{border-color:var(--sf-accent);box-shadow:0 0 0 2px var(--sf-accent-ring)}
.co-addr{border-top:1px solid var(--sf-line);margin-top:4px;padding-top:8px}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.co-pickup-addr{background:var(--sf-surface-2);border-radius:var(--sf-r-md);padding:12px 14px;font-size:var(--sf-fs-sm);font-weight:600;line-height:1.4}
.co-pay{background:var(--sf-surface-2);border-radius:var(--sf-r-md);padding:12px 14px;font-size:var(--sf-fs-sm);font-weight:600;margin:10px 0 2px;color:var(--sf-muted)}
.co-pay-wrap{margin:10px 0 2px}
.co-pay-seg{display:flex;flex-wrap:wrap;gap:8px}
.co-pay-btn{flex:1 1 auto;min-width:100px;padding:12px;border-radius:var(--sf-r-sm);border:1.5px solid var(--sf-line);background:var(--sf-surface);font-weight:700;font-size:var(--sf-fs-sm);color:var(--sf-muted);transition:all var(--sf-dur)}
.co-pay-btn.active{border-color:var(--sf-accent);color:var(--sf-accent);background:var(--sf-accent-tint)}
.co-nudge{font-size:12px;color:var(--sf-muted);text-align:center;margin:8px 0 0}
.co-done{text-align:center;padding-top:28px}
.co-done-mark{width:72px;height:72px;border-radius:50%;background:var(--sf-success-tint);color:var(--sf-success);font-size:38px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;animation:sf-mark-pop .5s var(--sf-ease)}
@keyframes sf-mark-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.co-done-status{display:inline-block;background:var(--sf-warn-tint);color:var(--sf-warn);font-size:12px;font-weight:800;padding:5px 14px;border-radius:var(--sf-r-pill);margin:4px 0 10px}
.co-done-status.ok{background:var(--sf-success-tint);color:var(--sf-success)}
.co-done-status.bad{background:var(--sf-danger-tint);color:var(--sf-danger)}
.co-done-line{color:var(--sf-muted);font-size:var(--sf-fs-sm);margin-bottom:16px}
.co-done-sum{text-align:left;background:var(--sf-surface-2);border-radius:var(--sf-r-md);padding:6px 14px}
.co-done-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:var(--sf-fs-sm);color:var(--sf-text)}
.co-done-row.total{border-top:1px solid var(--sf-line-strong);font-weight:800;font-size:16px;margin-top:2px}

/* ======================= СЛУЖЕБНОЕ ======================= */
.sf-state{max-width:var(--sf-maxw);margin:0 auto;padding:64px 24px;text-align:center;color:var(--sf-muted);font-size:var(--sf-fs-sm)}
.sf-toast{position:fixed;left:50%;bottom:calc(92px + var(--sf-safe-b));transform:translateX(-50%);background:var(--sf-primary);color:#fff;padding:11px 18px;border-radius:var(--sf-r-md);font-size:var(--sf-fs-sm);font-weight:600;z-index:60;box-shadow:var(--sf-shadow-md);max-width:88%}
.sf-link{background:none;color:var(--sf-muted);font-size:var(--sf-fs-xs);font-weight:600;text-decoration:none;padding:0 0 8px;display:inline-block}
.sf-link:active{color:var(--sf-text)}

/* skeleton загрузки */
.sf-skel-wrap{max-width:var(--sf-maxw);margin:0 auto;padding:16px}
.sf-skel{display:flex;gap:14px;background:var(--sf-surface);border-radius:var(--sf-r-md);padding:12px;margin-bottom:10px;box-shadow:var(--sf-shadow-xs)}
.sf-skel-media{width:124px;height:104px;flex:0 0 124px;border-radius:var(--sf-r-sm)}
.sf-skel-body{flex:1;display:flex;flex-direction:column;gap:9px;padding:4px 0}
.sf-skel-line{height:13px;border-radius:6px}
.sf-skel-line.w70{width:70%}.sf-skel-line.w90{width:90%}.sf-skel-line.w40{width:40%}
.sf-skel-media,.sf-skel-line{background:linear-gradient(90deg,var(--sf-surface-2) 25%,var(--sf-surface-3) 37%,var(--sf-surface-2) 63%);background-size:400% 100%;animation:sf-shimmer 1.4s ease infinite}
@keyframes sf-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ============================================================
   НАДСТРОЙКИ (конверсионный пакет)
   ============================================================ */

/* — Скидка на карточке: старая цена + зелёная экономия — */
.sf-priceline{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.sf-price.disc{color:var(--sf-success)}
.sf-oldprice{font-size:13px;font-weight:600;color:var(--sf-faint);text-decoration:line-through}
.sf-badge.save{background:var(--sf-success);color:#fff;box-shadow:0 1px 6px rgba(31,164,99,.4)}

/* — Инлайн +/− прямо на карточке (простые блюда) — */
.sf-inline{position:absolute;right:6px;bottom:6px;z-index:2}
.sf-inline-add{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--sf-accent);font-size:25px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(31,36,48,.24);transition:transform .1s ease-out}
.sf-inline-add:active{transform:scale(.9)}
.sf-inline-stepper{display:flex;align-items:center;gap:2px;background:#fff;border-radius:var(--sf-r-pill);box-shadow:0 3px 12px rgba(31,36,48,.24);padding:3px}
.sf-inline-btn{width:30px;height:30px;border-radius:50%;color:var(--sf-accent);font-size:20px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center}
.sf-inline-btn:active{background:var(--sf-surface-2)}
.sf-inline-val{min-width:20px;text-align:center;font-weight:800;font-size:15px;color:var(--sf-text)}

/* — Промо-попап при открытии — */
.sf-promo{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(31,36,48,.55);animation:sf-fade .2s ease}
.sf-promo-card{width:100%;max-width:400px;background:var(--sf-surface);border-radius:var(--sf-r-xl);overflow:hidden;box-shadow:var(--sf-shadow-md);animation:sf-pop-in .28s var(--sf-ease);position:relative}
.sf-promo-img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--sf-surface-2);display:block}
.sf-promo-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--sf-text);font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sf-shadow-sm)}
.sf-promo-body{padding:18px}
.sf-promo-title{font-size:22px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px}
.sf-promo-text{font-size:14px;color:var(--sf-muted);line-height:1.4;margin-bottom:16px}
.sf-promo-cta{width:100%;height:52px;background:var(--sf-accent);color:#fff;border-radius:var(--sf-r-lg);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sf-shadow-sm)}
.sf-promo-cta:active{background:var(--sf-accent-press)}

/* — Повтор прошлого заказа — */
.sf-repeat{max-width:var(--sf-maxw);margin:12px auto 0;padding:0 var(--sf-gutter)}
.sf-repeat-btn{width:100%;display:flex;align-items:center;gap:12px;background:var(--sf-accent-tint);border:1px solid var(--sf-accent-ring);border-radius:var(--sf-r-md);padding:12px 14px;text-align:left}
.sf-repeat-ic{font-size:20px}
.sf-repeat-tx{flex:1;min-width:0}
.sf-repeat-t{font-weight:700;font-size:14px;color:var(--sf-text)}
.sf-repeat-s{font-size:12px;color:var(--sf-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-repeat-go{color:var(--sf-accent);font-weight:800;font-size:14px;flex:0 0 auto}

/* — Чек-аут: тумблеры, приборы, разбивка, промокод — */
.co-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--sf-line)}
.co-row-l{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--sf-text)}
.co-row-l .ic{font-size:18px}
.co-switch{width:46px;height:28px;border-radius:999px;background:var(--sf-surface-3);position:relative;flex:0 0 auto;transition:background var(--sf-dur);cursor:pointer}
.co-switch::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--sf-shadow-sm);transition:transform var(--sf-dur)}
.co-switch.on{background:var(--sf-accent)}
.co-switch.on::after{transform:translateX(18px)}
.co-cutlery{display:flex;align-items:center;gap:12px}
.co-cutlery .sf-step{width:32px;height:32px}
.co-cutlery-val{font-weight:800;min-width:18px;text-align:center;font-size:16px}
.co-promo{margin:12px 0 2px}
.co-promo-row{display:flex;gap:8px}
.co-promo-input{flex:1;padding:12px 13px;border-radius:var(--sf-r-sm);border:1px solid var(--sf-line);font:inherit;font-size:15px;outline:none;text-transform:uppercase;background:var(--sf-surface)}
.co-promo-input::placeholder{text-transform:none;color:var(--sf-faint)}
.co-promo-input:focus{border-color:var(--sf-accent);box-shadow:0 0 0 2px var(--sf-accent-ring)}
.co-promo-apply{flex:0 0 auto;padding:0 18px;border-radius:var(--sf-r-sm);background:var(--sf-surface-2);font-weight:700;font-size:14px;color:var(--sf-text)}
.co-promo-applied{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--sf-success-tint);color:var(--sf-success);border-radius:var(--sf-r-sm);padding:11px 13px;font-size:14px;font-weight:700}
.co-promo-applied button{color:var(--sf-success);font-size:13px;text-decoration:underline}
.co-breakdown{margin-top:6px}
.co-brk{display:flex;justify-content:space-between;font-size:14px;color:var(--sf-muted);padding:5px 0}
.co-brk.pos{color:var(--sf-success);font-weight:700}
.co-total2{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:18px;padding:10px 0 4px;border-top:1px solid var(--sf-line);margin-top:6px}

/* ============================================================
   ВЕБ / ДЕСКТОП  (широкий экран)
   Мобайл-first выше остаётся базой. Ниже — ТОЛЬКО расширения под ширину:
   контейнер шире, сетка карточек в 3–4 колонки, шапка-обложка крупнее,
   табы категорий выровнены по контейнеру, лист = модалка по центру.
   JS не трогаем. Липкая панель категорий держит высоту ~54px
   (в storefront.js завязаны offsetTop-54 при скролле к категории и
   rootMargin '-60px' у скролл-спая — высоту табов НЕ меняем).
   Переменные --sf-maxw(720) оставляем «узкой» для читаемых блоков
   (лист/поиск), для потока задаём широкий контейнер точечно.
   ============================================================ */

/* ── Планшет: 3 колонки, контейнер шире ── */
@media (min-width:760px){
  .sf-header,.sf-banner,.sf-searchbar,.sf-repeat,.sf-cats,.sf-menu,.sf-state,.sf-skel-wrap{
    max-width:940px;margin-left:auto;margin-right:auto;
  }
  .sf-section{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px 18px}
  .sf-cover{height:220px}
}

/* ── Десктоп ── */
@media (min-width:1024px){
  /* Широкий центрированный контейнер для блоков потока */
  .sf-header,.sf-banner,.sf-searchbar,.sf-repeat,.sf-body,.sf-state,.sf-skel-wrap{
    max-width:1240px;margin-left:auto;margin-right:auto;
  }

  /* — 3 колонки: рельс категорий слева + меню + постоянная корзина справа (как Яндекс.Еда) — */
  .sf-body{display:flex;align-items:flex-start;gap:22px;padding:0 var(--sf-gutter)}
  .sf-body .sf-menu{max-width:none;margin:0;flex:1 1 auto;min-width:0;padding-left:0;padding-right:0}
  .sf-cartcol{display:flex;flex-direction:column;flex:0 0 320px;position:sticky;top:66px;
    max-height:calc(100vh - 84px);overflow:hidden;background:var(--sf-surface);
    border-radius:var(--sf-r-lg);box-shadow:var(--sf-shadow-sm);padding:16px 16px 14px;margin-top:6px}
  .sf-cc-scroll{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;margin:0 -4px;padding:0 4px}
  .sf-cc-foot{flex:0 0 auto;border-top:1px solid var(--sf-line);margin-top:8px;padding-top:10px}
  .sf-cc-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
  .sf-cc-title{font-weight:800;font-size:20px;letter-spacing:-.3px}
  .sf-cc-clear{color:var(--sf-muted);font-size:13px;font-weight:600}
  .sf-cc-clear:hover{color:var(--sf-danger)}
  .sf-cc-empty{text-align:center;padding:26px 6px 20px;color:var(--sf-muted)}
  .sf-cc-empty-ic{font-size:40px;margin-bottom:8px;filter:grayscale(.15)}
  .sf-cc-empty-t{font-weight:800;font-size:16px;color:var(--sf-text)}
  .sf-cc-empty-s{font-size:13px;margin-top:3px}
  .sf-cc-list .sf-cart-line{padding:12px 0}
  .sf-cc-list .sf-cart-line:first-child{padding-top:2px}
  .sf-cartcol .sf-upsell{margin-top:12px}
  .sf-cc-free{margin:12px 0 2px}
  .sf-cc-free-top{font-size:13px;font-weight:700;color:var(--sf-text);margin-bottom:6px}
  .sf-cc-free.done .sf-cc-free-top{color:var(--sf-success)}
  .sf-cc-total{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:18px;padding:14px 0 12px}
  .sf-cartcol .sf-cta{height:50px}
  .sf-cartcol .sf-minhint{margin:8px 0}

  /* — HERO: обложка-карточка крупнее, лого/тайтл заметнее — */
  .sf-header{margin-top:32px;border-radius:var(--sf-r-xl);box-shadow:var(--sf-shadow-sm);padding-bottom:14px}
  .sf-cover{height:360px;border-radius:var(--sf-r-xl) var(--sf-r-xl) 0 0}
  .sf-brand{gap:18px;padding:0 26px}
  .sf-header.has-cover .sf-brand{margin-top:-54px}
  .sf-logo{width:96px;height:96px;border-radius:var(--sf-r-lg);border-width:4px}
  .sf-title{font-size:34px}
  .sf-context{font-size:15px;margin-top:5px}
  .sf-info{padding:16px 26px 4px;font-size:15px;gap:10px}

  /* — Поиск: не растягивать на всю ширину (ширина как у «повтора») — */
  .sf-searchbar .sf-search{max-width:560px}

  /* — Баннер: слайды ~2-в-ряд; одиночный баннер — во всю ширину — */
  .sf-slide{flex-basis:calc(50% - 6px);height:170px}
  .sf-slide span{font-size:20px}
  .sf-banner:has(.sf-slide:only-child) .sf-slide{flex-basis:100%}

  /* — Повтор заказа: ограничить ширину — */
  .sf-repeat-btn{max-width:560px}

  /* — Категории = вертикальный рельс слева (как Яндекс.Еда), а не верхние табы — */
  .sf-cats{flex:0 0 200px;flex-direction:column;align-items:stretch;gap:2px;
    position:sticky;top:66px;max-height:calc(100vh - 84px);overflow:auto;
    max-width:none;margin:6px 0 0;padding:0;background:none;border-bottom:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;scrollbar-width:thin}
  .sf-cat{flex:0 0 auto;width:100%;text-align:left;white-space:normal;
    padding:11px 14px;border-radius:var(--sf-r-md);border-bottom:none;
    font-size:15px;font-weight:700;color:var(--sf-text-2)}
  .sf-cat:hover{background:var(--sf-surface-2);color:var(--sf-text)}
  .sf-cat.active{background:var(--sf-surface);color:var(--sf-text);
    border-bottom:none;box-shadow:var(--sf-shadow-xs);font-weight:800}

  /* — Сетка карточек: auto-fit тянет карточки под ширину (рядом с панелью корзины ≈3 колонки) — */
  .sf-section{grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:24px 16px}
  .sf-section h2{font-size:24px;margin-top:32px}

  /* карточки: фото чуть ниже (4:3, как у Wolt/Яндекс), hover-поднятие, курсор */
  .sf-card{cursor:pointer}
  .sf-card-media{aspect-ratio:4/3;transition:transform .16s var(--sf-ease),box-shadow .16s var(--sf-ease)}
  .sf-card:not(.disabled):hover .sf-card-media{transform:translateY(-3px);box-shadow:var(--sf-shadow-md)}
  .sf-card-body{padding-top:11px;gap:4px}
  .sf-price{font-size:18px}
  .sf-card-name{font-size:15px;line-height:1.3}
  .sf-card-desc{font-size:13px;-webkit-line-clamp:2}
  .sf-media-plus,.sf-inline-add{width:42px;height:42px;font-size:27px}
  .sf-media-plus:hover,.sf-inline-add:hover{background:var(--sf-accent);color:#fff}

  /* — Нижний лист → модалка по центру экрана — */
  .sf-overlay{background:rgba(31,36,48,.58)}
  .sf-sheet{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
    max-width:560px;max-height:88vh;border-radius:var(--sf-r-xl);
    box-shadow:var(--sf-shadow-md);animation:sf-modal-in .22s var(--sf-ease)}
  .sf-sheet::before{display:none}         /* убрать «ручку» боттом-листа */
  /* фото в модалке не должно съедать всю высоту на низких окнах — тело всегда скроллится */
  .sf-sheet-hero{border-radius:var(--sf-r-xl) var(--sf-r-xl) 0 0;max-height:38vh;object-fit:cover}

  /* — Плавающую корзину и фрибар прячем: их роль на десктопе берёт постоянная панель справа — */
  .sf-cartbar,.sf-freebar{display:none!important}

  /* — Hover-состояния под указатель — */
  .sf-cta:hover{background:var(--sf-accent-press)}
  .co-seg-btn:hover,.co-pay-btn:hover{border-color:var(--sf-line-strong)}
  .sf-promo-cta:hover{background:var(--sf-accent-press)}
  .sf-repeat-btn:hover{background:#ffe9dd}
}
@keyframes sf-modal-in{from{transform:translate(-50%,-46%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}