/* ==========================================================================
   BETTERY · общее ядро оформления
   Три бренд-темы: [data-brand="hub" | "restaurant" | "meals" | "lunch"]
   ========================================================================== */

:root{
  /* фирменная палитра (гайдбук) */
  --green:#205030; --green-d:#14311f; --green-dd:#0e2416; --green-l:#3fa34d; --green-soft:#e6efe4;
  --cream:#f4efe3; --cream-2:#ece4d2; --cream-3:#e2d8c2;
  --ink:#19271a; --muted:#5d6b58; --line:rgba(25,39,26,.13); --white:#fff;
  --terra:#d9532b; --gold:#e0a93f; --berry:#8e2f4c; --steel:#33608f;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --r-xl:32px; --r-lg:24px; --r-md:17px; --r-sm:12px;
  --pad:clamp(16px,4vw,42px);
  --ease:cubic-bezier(.22,1,.36,1);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --maxw:1180px;

  /* переопределяются темой */
  --page:var(--cream); --surface:#fff; --accent:var(--green); --display:var(--serif);
}

/* --- ТЕМЫ --- */
[data-brand="restaurant"]{           /* премиум: тёмная зелень + крем + серифы */
  --page:#f4efe3; --surface:#fff; --accent:#205030; --display:var(--serif);
  --hair:rgba(25,39,26,.14);
}
[data-brand="meals"]{                /* рационы: светло, функционально, воздушно */
  --page:#fbfaf6; --surface:#fff; --accent:#205030; --display:var(--sans);
  --hair:rgba(25,39,26,.11);
}
[data-brand="lunch"]{                /* ланчи: бодрее, тёплый акцент */
  --page:#fbfaf6; --surface:#fff; --accent:#205030; --spark:var(--gold); --display:var(--sans);
  --hair:rgba(25,39,26,.11);
}
[data-brand="hub"]{ --page:var(--green-d); --surface:rgba(255,255,255,.06); --accent:var(--cream); }

/* --- БАЗА --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
body.lock{overflow:hidden}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.018em; margin:0}
[data-brand="meals"] h1,[data-brand="meals"] h2,[data-brand="meals"] h3,
[data-brand="lunch"] h1,[data-brand="lunch"] h2,[data-brand="lunch"] h3{font-weight:700; letter-spacing:-.028em}
p{margin:0}
:focus-visible{outline:2.5px solid var(--green-l); outline-offset:3px; border-radius:6px}
::selection{background:var(--green); color:var(--cream)}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.wrap-wide{max-width:1340px; margin:0 auto; padding-inline:var(--pad)}
.sec{padding:clamp(46px,7vw,86px) 0}
.hidden{display:none!important}

/* --- ШАПКА --- */
.hd{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--page) 88%,transparent);
    backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
    border-bottom:1px solid var(--hair,var(--line)); padding-top:var(--sat)}
.hd__in{max-width:1340px; margin:0 auto; padding:11px var(--pad); display:flex; align-items:center; gap:12px}
.hd__logo{display:flex; align-items:center; gap:9px; margin-right:auto; min-width:0}
.hd__logo img{height:21px; width:auto}
.hd__logo b{font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding-left:9px; margin-left:2px;
  border-left:1px solid var(--line); white-space:nowrap}
.hd__nav{display:flex; gap:2px}
.hd__nav a{font-size:13.5px; font-weight:500; padding:8px 13px; border-radius:999px; opacity:.75; transition:.2s var(--ease); white-space:nowrap}
.hd__nav a:hover{opacity:1; background:rgba(32,80,48,.08)}
.hd__nav a.on{opacity:1; background:var(--green-soft); color:var(--green); font-weight:600}
.burger{display:none; width:42px;height:42px;flex:0 0 42px; border-radius:999px; background:var(--green); color:var(--cream); place-items:center}
.burger span{display:block;width:16px;height:1.8px;background:currentColor;border-radius:2px;transition:.3s var(--ease)}
.burger span+span{margin-top:4.2px}
body.mnu .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.mnu .burger span:nth-child(2){opacity:0}
body.mnu .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.back{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--muted); padding:8px 12px; border-radius:999px; transition:.2s}
.back:hover{background:var(--green-soft); color:var(--green)}

/* переключатель языка */
.langsw{position:relative; flex:0 0 auto}
.langsw__b{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  background:var(--surface); border-radius:999px; padding:9px 13px; font-size:12.5px; font-weight:700;
  color:var(--green-d); min-height:40px; letter-spacing:.03em; transition:.2s var(--ease)}
.langsw__b:hover{border-color:var(--green); background:var(--green-soft)}
.langsw__b svg{opacity:.5; transition:transform .25s var(--ease)}
.langsw.open .langsw__b svg{transform:rotate(180deg)}
.langsw__m{position:absolute; right:0; top:calc(100% + 7px); background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:5px; min-width:150px; z-index:80;
  box-shadow:0 14px 34px rgba(16,38,22,.18); display:none}
.langsw.open .langsw__m{display:block}
.langsw__m button{display:block; width:100%; text-align:left; padding:10px 13px; border-radius:10px;
  font-size:13.6px; font-weight:500; color:var(--ink); min-height:42px; transition:.16s}
.langsw__m button:hover{background:var(--green-soft)}
.langsw__m button.on{background:var(--green); color:var(--cream); font-weight:600}
[data-brand="hub"] .langsw__b{background:transparent; border-color:rgba(255,255,255,.26); color:var(--cream)}
[data-brand="hub"] .langsw__b:hover{background:rgba(255,255,255,.12)}
[data-brand="hub"] .langsw__m{background:#1b3d27; border-color:rgba(255,255,255,.16)}
[data-brand="hub"] .langsw__m button{color:var(--cream)}
[data-brand="hub"] .langsw__m button:hover{background:rgba(255,255,255,.1)}

/* мобильное меню */
.mnav{position:fixed; inset:0; z-index:55; background:var(--page); clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease); display:flex; flex-direction:column;
  padding:calc(78px + var(--sat)) var(--pad) calc(24px + var(--sab)); overflow-y:auto}
body.mnu .mnav{clip-path:inset(0 0 0 0)}
.mnav a{font-family:var(--display); font-size:clamp(26px,8vw,38px); font-weight:600; padding:12px 0;
  border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:var(--green-d)}
.mnav a span{font-family:var(--sans); font-size:11px; opacity:.4; font-weight:600}
.mnav__f{margin-top:auto; padding-top:24px; display:grid; gap:12px}

/* --- КНОПКИ --- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:999px;
  padding:14px 24px; font-size:14.5px; font-weight:600; min-height:48px; transition:.24s var(--ease); text-align:center}
.btn--fill{background:var(--green); color:var(--cream); box-shadow:0 5px 18px rgba(20,49,31,.24)}
.btn--fill:hover{background:var(--green-d); transform:translateY(-1.5px)}
.btn--out{border:1.5px solid var(--line); background:var(--surface); color:var(--green-d)}
.btn--out:hover{border-color:var(--green); background:var(--green-soft)}
.btn--ghost{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(10px)}
.btn--ghost:hover{background:rgba(255,255,255,.27)}
.btn--lg{padding:16px 30px; font-size:15.5px; min-height:54px}
.btn--sm{padding:9px 15px; font-size:13px; min-height:40px}
.btn--wide{width:100%}

/* --- ТИПОГРАФИКА БЛОКОВ --- */
.tag{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--green-l); margin-bottom:12px}
.tag::before{content:''; width:18px;height:1.5px; background:currentColor; border-radius:2px}
.h-xl{font-size:clamp(30px,5.4vw,54px)}
.h-lg{font-size:clamp(26px,4.4vw,42px)}
.h-md{font-size:clamp(21px,2.9vw,29px)}
.lead{color:var(--muted); font-size:clamp(14.5px,1.7vw,16.5px); line-height:1.62; max-width:58ch; margin-top:14px}
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--green); background:var(--green-soft); padding:7px 13px; border-radius:999px}
.ph-val{font-size:12.5px; font-weight:600; color:var(--terra); background:rgba(217,83,43,.09);
  border:1px dashed rgba(217,83,43,.4); padding:4px 9px; border-radius:8px; display:inline-block}
.note-edit{font-size:11.5px; color:var(--terra); background:rgba(217,83,43,.07);
  border:1px dashed rgba(217,83,43,.32); border-radius:10px; padding:9px 13px;
  display:flex; gap:9px; align-items:flex-start; margin-top:18px; line-height:1.45}

/* --- КАРТОЧКИ БЛЮД --- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:clamp(10px,1.6vw,18px)}
.card{background:var(--surface); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--hair,var(--line));
  display:flex; flex-direction:column; transition:.3s var(--ease); width:100%; text-align:left}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(16,38,22,.13)}
.card__ph{aspect-ratio:1/1; background:var(--cream-2); overflow:hidden; position:relative}
.card__ph img{width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease)}
.card:hover .card__ph img{transform:scale(1.055)}
.card__b{padding:13px 14px 15px; display:flex; flex-direction:column; gap:6px; flex:1}
.card__b h4{font-family:var(--display); font-size:16.5px; font-weight:600; line-height:1.2}
[data-brand="meals"] .card__b h4,[data-brand="lunch"] .card__b h4{font-weight:700; font-size:15.5px}
.card__ing{font-size:12.4px; color:var(--muted); line-height:1.44;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card__f{margin-top:auto; padding-top:9px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.price{font-size:14.5px; font-weight:700; color:var(--green-d); white-space:nowrap}
.kcal{position:absolute; top:9px; left:9px; background:rgba(244,239,227,.94); backdrop-filter:blur(6px);
  border-radius:999px; padding:5px 10px; font-size:11px; font-weight:700; color:var(--green-d)}
.noimg{width:100%;height:100%; display:grid; place-items:center; font-family:var(--serif); font-size:34px;
  background:linear-gradient(135deg,var(--cream-2),var(--cream-3)); color:var(--green); opacity:.5}

/* чипсы-фильтры */
.chips{display:flex; gap:8px; overflow-x:auto; padding:4px 0 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:10px 16px; font-size:13.4px; font-weight:500; color:var(--muted); white-space:nowrap; min-height:44px; transition:.2s var(--ease)}
.chip:hover{border-color:var(--green-l); color:var(--green)}
.chip.on{background:var(--green); color:var(--cream); border-color:var(--green)}

/* скелетоны */
.sk{background:linear-gradient(90deg,var(--cream-2) 25%,var(--cream-3) 50%,var(--cream-2) 75%);
  background-size:200% 100%; animation:sh 1.3s infinite; border-radius:var(--r-md)}
@keyframes sh{to{background-position:-200% 0}}
.sk-card{aspect-ratio:.78}

/* --- ФУТЕР --- */
.ft{background:var(--cream-2); padding:clamp(34px,5vw,56px) 0 calc(26px + var(--sab)); margin-top:clamp(44px,7vw,80px)}
[data-brand="meals"] .ft,[data-brand="lunch"] .ft{background:#f1efe8}
.ft__g{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(20px,4vw,42px)}
.ft img.lg{height:24px; margin-bottom:12px}
.ft h5{font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-l); margin-bottom:11px}
.ft a,.ft p{font-size:13.8px; color:var(--muted); line-height:1.95}
.ft a:hover{color:var(--green)}
.ft__b{margin-top:28px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
  gap:12px; justify-content:space-between; font-size:12.4px; color:var(--muted)}
.socials{display:flex; gap:8px; margin-top:12px}
.socials a{width:36px;height:36px;border-radius:50%; background:var(--surface); display:grid; place-items:center;
  color:var(--green); transition:.2s}
.socials a:hover{background:var(--green); color:var(--cream)}

/* --- ЛИПКИЙ CTA (мобильный) --- */
.sticky{position:fixed; left:12px; right:12px; bottom:calc(12px + var(--sab)); z-index:50; display:none; gap:9px}
.sticky::before{content:''; position:absolute; left:-12px; right:-12px; bottom:calc(-12px - var(--sab));
  top:-26px; background:linear-gradient(to top, var(--page) 62%, transparent);
  z-index:-1; pointer-events:none}
.sticky .btn{flex:1; box-shadow:0 8px 26px rgba(8,26,14,.28); min-height:54px; font-size:15px}

/* --- МОДАЛКА --- */
.ov{position:fixed; inset:0; z-index:90; background:rgba(11,26,16,.58); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; padding:0; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease)}
.ov.on{opacity:1; pointer-events:auto}
.sheet{background:var(--page); width:100%; max-width:600px; max-height:92dvh; overflow-y:auto;
  border-radius:24px; padding-bottom:20px; transform:translateY(18px) scale(.99);
  transition:transform .35s var(--ease); -webkit-overflow-scrolling:touch}
.ov.on .sheet{transform:none}
.sheet__hd{position:sticky; top:0; z-index:3; background:var(--page); padding:16px var(--pad) 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line)}
.sheet__hd h3{font-size:19px}
.x{width:38px;height:38px;border-radius:50%; background:var(--cream-2); display:grid; place-items:center; flex:0 0 38px}
.x:hover{background:var(--cream-3)}
.sheet__b{padding:20px var(--pad)}
@media (max-width:640px){
  .ov{align-items:flex-end}
  .sheet{border-radius:24px 24px 0 0; max-height:94dvh; padding-bottom:calc(16px + var(--sab))}
}

/* --- ФОРМЫ --- */
.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px}
.req{color:var(--terra)}
.inp{width:100%; background:var(--surface); border:1.5px solid var(--line); border-radius:14px;
  padding:14px 15px; font-size:16px; min-height:50px; transition:.2s}
.inp:focus{outline:none; border-color:var(--green-l); box-shadow:0 0 0 3.5px rgba(63,163,77,.14)}
.inp.bad{border-color:var(--terra); box-shadow:0 0 0 3.5px rgba(217,83,43,.12)}
textarea.inp{min-height:86px; resize:vertical; line-height:1.5}
.err{font-size:12px; color:var(--terra); margin-top:5px; display:none}
.err.on{display:block}
.two{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.ctx{background:var(--green-soft); border-radius:14px; padding:13px 15px; margin-bottom:16px; display:flex; gap:12px; align-items:center}
.ctx img{width:50px;height:50px;border-radius:11px;object-fit:cover;flex:0 0 50px}
.ctx .t{font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--green-l)}
.ctx .n{font-size:15px; font-weight:600; line-height:1.25; margin-top:2px}
.ctx .p{font-size:13px; color:var(--muted); margin-top:2px}
.chk{display:flex; gap:11px; align-items:flex-start; margin:16px 0; cursor:pointer}
.chk input{width:21px;height:21px;accent-color:var(--green);margin-top:1px;flex:0 0 21px}
.chk span{font-size:12.6px; color:var(--muted); line-height:1.5}
.chk a{color:var(--green); text-decoration:underline}
.submit{width:100%; background:var(--green); color:var(--cream); border-radius:999px; padding:16px;
  font-size:15.5px; font-weight:600; min-height:56px; transition:.24s var(--ease);
  display:flex; align-items:center; justify-content:center; gap:10px}
.submit:hover:not(:disabled){background:var(--green-d)}
.submit:disabled{opacity:.6; cursor:not-allowed}
.spin{width:17px;height:17px;border:2.2px solid rgba(255,255,255,.32); border-top-color:#fff;
  border-radius:50%; animation:sp .7s linear infinite; display:none}
@keyframes sp{to{transform:rotate(360deg)}}
.submit.load .spin{display:block}
.tgshare{width:100%; border:1.5px solid var(--line); background:var(--surface); border-radius:999px;
  padding:13px; font-size:14px; font-weight:600; color:var(--green-d); margin-bottom:12px;
  display:none; align-items:center; justify-content:center; gap:9px; min-height:50px}
.note{font-size:12.2px; color:var(--muted); text-align:center; margin-top:12px; line-height:1.5}

/* опции квиза */
.opt{text-align:left; border:1.5px solid var(--line); background:var(--surface); border-radius:15px;
  padding:15px 17px; font-size:14.6px; font-weight:500; transition:.2s var(--ease); min-height:52px;
  display:flex; align-items:center; gap:11px; width:100%}
.opt:hover{border-color:var(--green-l); background:var(--green-soft)}
.opt.on{border-color:var(--green); background:var(--green-soft); color:var(--green-d); font-weight:600}
.opt .dot{width:19px;height:19px;border-radius:50%;border:2px solid var(--cream-3); flex:0 0 19px; transition:.2s}
.opt.on .dot{border-color:var(--green); background:var(--green); box-shadow:inset 0 0 0 3.5px var(--green-soft)}

/* успех */
.ok{text-align:center; padding:12px 0 6px}
.ok__ic{width:74px;height:74px;border-radius:50%; background:var(--green-soft); color:var(--green);
  display:grid; place-items:center; margin:0 auto 18px; animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(.5); opacity:0}}
.ok h3{font-size:clamp(22px,5vw,28px); margin-bottom:10px}
.ok p{color:var(--muted); font-size:15px; line-height:1.6; max-width:38ch; margin:0 auto}
.ok__btns{display:grid; gap:9px; margin-top:24px}

/* --- ПОЯВЛЕНИЕ --- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv2{transition-delay:.08s} .rv3{transition-delay:.16s} .rv4{transition-delay:.24s}

/* --- АДАПТИВ --- */
@media (max-width:900px){
  .hd__nav{display:none}
  .burger{display:grid}
  .hd__in > .btn{display:none}
  .sticky{display:flex}
  body{padding-bottom:88px}
  .ft__g{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr); gap:9px}
  .card__f{flex-direction:column; align-items:stretch; gap:9px}
  .card__f .price{font-size:15px}
  .card__f [data-order]{width:100%; white-space:nowrap; padding:10px 8px; font-size:12.4px; min-height:40px}
  .card__b{padding:11px 11px 13px}
  .card__b h4{font-size:14.4px}
  .card__ing{font-size:11.5px}
  .price{font-size:13.4px}
  .two{grid-template-columns:1fr}
  .ft__g{grid-template-columns:1fr; gap:24px}
  .hd__logo b{display:none}
}
@media (max-width:350px){ .grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
}