/* ============================================================
   ЖАРА ЕДА — ОБЛИК 2.0
   Подключается после style.css и намеренно перекрывает его.

   Что задаёт этот слой и почему так:

   1. ШРИФТ. Заголовки — Unbounded: у него своя пластика, его не спутать
      с системным. Текст — Manrope. Цены и цифры — тоже Unbounded:
      у вывески и у счёта должен быть один голос.
   2. ЦВЕТ. Фон тёплый, сверху два ореола — огонь и карамель. Страница
      перестаёт быть плоской, еда на ней выглядит аппетитнее.
   3. ФОРМА. Радиусы 20–26, тени вместо рамок, фото крупнее: еда главная,
      а интерфейс — рамка вокруг неё.
   4. ЖИЗНЬ. Карточка приподнимается, фото наезжает, «плюс» пружинит,
      фото героя медленно дышит. Движение мягкое и медленное — это еда,
      а не аттракцион.

   Что меняется на будущее: бренд правится в data/branches.json → brand
   (accent, heroTitle с *подсветкой*), вид — здесь.
   ============================================================ */

/* --- 1. фон страницы: тепло и глубина вместо ровной заливки --- */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1150px 540px at 10% -10%, rgba(255,90,60,.16), transparent 62%),
    radial-gradient(900px 480px at 96% -6%, rgba(255,170,70,.15), transparent 64%);
  background-repeat:no-repeat;
}
@media (min-width:720px){body{background-attachment:fixed}}
/* тонкая огневая полоса сверху — фирменная линия */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;
  background:linear-gradient(90deg,#ff9a3c,#ff5a2a 42%,#e5301c)}

/* первый экран выбора точки живёт на том же тёплом фоне */
.picker{background:transparent}

/* --- 2. типографика --- */
.lp__title,.lp__h2,.cat-title,.hero__title--band,.cart__head h2,.promo__title,
.picker__name,.upsell__title,.field__label{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em}
.brand__name,.logo__name{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
/* Unbounded — широкий шрифт: на 44px длинный заголовок ложился в три строки.
   Подобрано под реальную строку «Горячее из ЖАРА — у двери за 60 минут»:
   36px на компьютере и 30px на телефоне дают по две строки. */
.lp__title{font-size:clamp(25px,5.2vw,36px);line-height:1.08}
.lp__h2{font-size:clamp(19px,4.4vw,25px);display:flex;align-items:center;gap:11px;line-height:1.15}
/* акцентная «искра» перед заголовком раздела */
.lp__h2::before,.cat-title::before{content:"";flex:0 0 auto;width:20px;height:7px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.cat-title{font-size:clamp(19px,4.2vw,24px);display:flex;align-items:center;gap:11px}
.lp__h2 span{font-family:var(--font);font-weight:500;font-size:13.5px;letter-spacing:0;line-height:1.3}
/* подсвеченное слово: в heroTitle пишем «… *ЖАРА* — …» */
.hl{background:linear-gradient(120deg,var(--accent-2),var(--accent) 60%,#c8280f);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lp__kicker{font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.2em}

/* --- 3. шапка --- */
.topbar{background:rgba(255,255,255,.9);border-bottom:0;
  box-shadow:0 1px 0 rgba(23,24,28,.06),0 8px 24px rgba(23,24,28,.04)}
.brand__mark,.logo__mark{border-radius:13px;background:linear-gradient(140deg,var(--accent-2),var(--accent));
  box-shadow:0 6px 16px rgba(229,67,42,.34)}
.switch{background:#fff;border-color:#efe7e0;transition:box-shadow .18s,transform .18s,border-color .18s}
.switch:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,24,28,.1);border-color:#e6dbd2}
/* стрелки рисуем svg: текстовый «▾» в разных шрифтах прыгает по базовой линии */
.switch__chev,.band__pick-chev{display:inline-flex;align-items:center;color:var(--accent)}
.chev{width:14px;height:14px;flex:0 0 auto}

/* --- 4. полоса меню: заголовок раздела, а не серая строка --- */
.hero.hero--band{background:linear-gradient(180deg,#fff,rgba(255,255,255,.72));
  border-bottom:1px solid var(--line);padding:2px 0}
.hero--band .hero__inner{padding:16px var(--pad)}
.hero__title--band{font-size:clamp(23px,5.2vw,30px);line-height:1.1}
.hero--band .hero__sub{font-size:13.5px;color:#6e6a66;margin-top:2px}
.hero__facts li,.lp__facts li{background:#fff;border:1px solid #f1e7e0;color:#3c3a37;font-weight:600;
  box-shadow:0 2px 8px rgba(23,24,28,.05);display:inline-flex;align-items:center;gap:7px}
.lp__facts li::before,.hero__facts li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(140deg,var(--accent-2),var(--accent))}
.band__pick{background:#fff;border-color:#eee4dc;padding:12px 18px;transition:box-shadow .18s,transform .18s}
.band__pick:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(23,24,28,.1)}
.band__pick b{font-family:var(--font-display);font-weight:600;font-size:13px}
.band__pick-chev{font-weight:700}

/* --- 5. категории: пилюля с иконкой в цветном круге --- */
.tabs{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);padding:12px var(--pad);gap:9px}
.tab{padding:9px 16px 9px 10px;font-weight:700;border-color:#efe7e0;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s,color .18s,box-shadow .18s}
.tab:hover{transform:translateY(-2px);border-color:#e2d5cb}
.tab .ic{width:17px;height:17px;flex:0 0 auto;padding:6px;box-sizing:content-box;border-radius:50%;
  background:#fdeee9;color:var(--accent)}
.tab.on{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:transparent;color:#fff;
  box-shadow:0 10px 24px rgba(229,67,42,.34)}
.tab.on .ic{background:rgba(255,255,255,.22);color:#fff}

/* --- 6. каталог: карточка приподнимается, фото наезжает --- */
.card{border-color:#f2ebe4;border-radius:20px;box-shadow:0 8px 22px rgba(23,24,28,.07);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(40,25,15,.16);border-color:#eadfd6}
.card__pic{aspect-ratio:4/3}
.card__pic img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__pic img{transform:scale(1.06)}
/* тень внизу кадра: «хит» и «плюс» читаются на любом фото */
.card__pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(28,16,10,.3))}
.card__tag{z-index:2;background:linear-gradient(135deg,#ffa23c,#ff4d2a);letter-spacing:.08em;
  box-shadow:0 6px 14px rgba(255,77,42,.4)}
.card__add{background:linear-gradient(135deg,var(--accent-2),var(--accent));
  box-shadow:0 10px 22px rgba(229,67,42,.42);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .15s}
.card__add:hover{transform:scale(1.1);filter:brightness(1.05)}
.card__name{font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.card__body{padding:13px 14px 15px;gap:6px}
.card__price{font-size:17px;font-weight:600}

/* --- 7. кнопки, корзина, оформление --- */
.btn--primary{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:transparent;
  font-weight:700;box-shadow:0 12px 28px rgba(229,67,42,.3)}
.btn--primary:hover{background:linear-gradient(135deg,#ff7a4a,#d12d0e);box-shadow:0 14px 32px rgba(229,67,42,.38)}
.fab{background:linear-gradient(135deg,var(--accent-2),var(--accent));
  box-shadow:0 18px 40px rgba(229,67,42,.42)}
.fab:hover{background:linear-gradient(135deg,#ff7a4a,#d12d0e)}
.fab b{background:rgba(255,255,255,.24);font-weight:700}
.cart__foot{border-top:0;box-shadow:0 -10px 30px rgba(23,24,28,.07)}
.totals__total dd{font-weight:700}
/* иконки в кнопках: размер задаём здесь, иначе кнопки разной высоты */
.cart__close{transition:background .18s,color .18s;display:grid;place-items:center}
.cart__close:hover{background:#fdeee9;color:var(--accent)}
.cart__close .chev{width:15px;height:15px}
.ci__del{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  width:30px;height:30px;transition:background .18s,color .18s}
.ci__del .ic{width:17px;height:17px}
.ci__del:hover{background:#fdeceb}
.seg__opt:has(input:checked){box-shadow:0 3px 10px rgba(23,24,28,.09)}

/* --- 8. акции и точки: крупнее и дороже --- */
.promo{border-radius:22px;padding:20px 20px 22px;box-shadow:0 18px 40px rgba(40,25,15,.18)}
.promo--accent{background:linear-gradient(140deg,#ff6a3d,#c02a10)}
.promo::after{width:200px;height:200px;right:-56px;top:-64px}
.promo__title{font-size:20px;line-height:1.15}
.promo__price b{font-size:26px;font-weight:700}
.promo__badge{background:rgba(255,255,255,.24);backdrop-filter:blur(6px)}
.picker__card{border-color:#f2ebe4;border-radius:20px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.picker__card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(40,25,15,.16)}
.picker__cta .btn{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:transparent;font-weight:700}
.picker__card:hover .picker__cta .btn{background:linear-gradient(135deg,#ff7a4a,#d12d0e)}
.specials__list li{border-color:#f2ebe4;border-radius:18px;flex:0 0 188px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.specials__list li:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(40,25,15,.14)}
.howto__list li{border-color:#f2ebe4;border-radius:16px;box-shadow:0 8px 20px rgba(23,24,28,.06)}
.howto__list b{background:linear-gradient(140deg,var(--accent-2),var(--accent));
  box-shadow:0 6px 14px rgba(229,67,42,.32)}

/* --- 9. фото героя: держит взгляд и «дышит» --- */
.lp__pic{border-radius:26px;aspect-ratio:4/3;
  box-shadow:0 34px 64px rgba(60,30,15,.24),0 0 0 1px rgba(255,255,255,.5) inset;
  animation:breathe 11s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.012)}}
.lp__pic-badge{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);color:#2b2320;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--pill)}
.lp__pic-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px rgba(18,160,106,.18);flex:0 0 auto}
/* оценка поверх кадра: доказательство, что везут и везут хорошо */
.lp__pic-chip{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:var(--pill);padding:8px 14px;
  font-size:12.5px;font-weight:700;color:#2b2320;box-shadow:0 6px 16px rgba(23,24,28,.14)}
.lp__pic-chip .ic{width:15px;height:15px;color:#ffb020}
.lp__pic-chip small{font-weight:600;color:#7b7570}

@media (max-width:599px){
  .lp__title{font-size:clamp(23px,7vw,30px)}
  .lp__pic{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .lp__pic{animation:none}
  .card:hover,.picker__card:hover,.tab:hover,.switch:hover,.band__pick:hover{transform:none}
  .card:hover .card__pic img{transform:none}
}