/* Mario Pizzaldo — светлая минималистичная тема */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#fff;
  --card:#fff;          /* поверхность карточек: ночью темнеет */
  --glass:rgba(255,255,255,.92);
  --surface:#f5f4f1;
  --surface2:#eceae5;
  --text:#111110;
  --muted:#7d7a73;
  --line:#e8e6e0;
  --ink:#111110;          /* кнопки */
  --pop:#ffce1f;          /* жёлтый акцент */
  --cream:#F2EDC7;        /* бумага фирменного знака: на ней он и нарисован */
  --hot:#e0402c;
  --ok:#1f9254;
  --r:20px; --rs:12px;
  --head:64px;
  --shadow:0 1px 2px rgba(17,17,16,.05), 0 8px 24px rgba(17,17,16,.06);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.45 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;font-weight:800;line-height:1.08}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
@media(min-width:900px){.wrap{padding:0 28px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- шапка ---------- */
.head{position:sticky;top:0;z-index:60;background:var(--glass);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.head__in{display:flex;align-items:center;gap:16px;height:var(--head)}
/* Знак в шапке строкой: значок и название, набранное вручную. Шрифта такого
   нет, поэтому название — та же печать логотипа картинкой. */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;
  min-width:0}
.logo__mark{height:42px;width:auto;display:block;flex:none}
.logo__word{height:32px;width:auto;display:block;flex:none}
@media(max-width:900px){.logo__mark{height:36px}.logo__word{height:27px}}
@media(max-width:559px){.logo__mark{height:32px}.logo__word{height:24px}}
.logo b{font-weight:800}
.logo__dot{width:9px;height:9px;border-radius:50%;background:var(--pop);flex:none;margin-top:3px}
.head__loc{display:none;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.head__sp{flex:1}
.head__nav{display:none;gap:22px;font-size:14px;color:var(--muted)}
.head__nav a:hover{color:var(--text)}
.head__phone{display:none;text-align:right;line-height:1.15}
.head__phone b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.head__phone span{display:block;font-size:11px;color:var(--muted)}
.cartbtn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 8px 0 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;white-space:nowrap;transition:transform .12s,opacity .12s}
.cartbtn:active{transform:scale(.97)}
.cartbtn__c{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--pop);color:#111;display:grid;place-items:center;font-size:12px;font-weight:700}
.cartbtn.is-empty{background:var(--surface);color:var(--text)}
.cartbtn.is-empty .cartbtn__c{display:none}
@media(min-width:820px){.head__loc{display:flex}.head__phone{display:block}}
@media(min-width:1080px){.head__nav{display:flex}}

/* ---------- табы ---------- */
.tabs{position:sticky;top:var(--head);z-index:55;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tabs__in{max-width:1240px;margin:0 auto;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:11px 16px}
.tabs__in::-webkit-scrollbar{display:none}
.tab{flex:none;height:38px;padding:0 16px;border-radius:999px;background:var(--surface);font-size:14px;font-weight:600;white-space:nowrap;color:#3d3b37;transition:.15s}
.tab:hover{background:var(--surface2)}
.tab.is-active{background:var(--ink);color:#fff}

/* ---------- герой ---------- */
.hero{padding:24px 0 8px}
.hero__grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:860px){.hero__grid{grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto}}
.promo{border-radius:var(--r);padding:26px;position:relative;overflow:hidden;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end}
.promo h2{font-size:clamp(22px,4.4vw,34px);margin-bottom:8px}
.promo p{margin:0;font-size:14px;line-height:1.4;max-width:38ch;color:#4a473f}
.promo--main{background:var(--cream);min-height:260px}
@media(min-width:860px){.promo--main{grid-row:span 2;min-height:340px}}
.promo--main h2{font-size:clamp(26px,3.6vw,44px)}
.promo--a{background:var(--surface)}
/* Кэшбек в цвете фирменной бумаги, как была прежняя главная плитка и как
   верх нового баннера. Кот тут подбрасывает бонусы: монетки взлетают из-под
   лапы и тают, кот качается от азарта. */
.promo--b{background:var(--cream);color:var(--ink);overflow:hidden}
.promo--b p{color:#4a473f;max-width:62%}
.promo--b h2,.promo--b .promo__k,.promo--b .promo__cta{position:relative;z-index:1}

/* ---- о пиццерии ----
   Раньше эти два текста стояли в плитках промо, а те стали двухколоночными
   под снимок — заголовок и абзац разъезжались по разным колонкам. */
.infos{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.infos{grid-template-columns:1fr 1fr}}
.info{background:var(--surface);border-radius:var(--r);padding:26px}
.info h3{margin:0 0 10px;font-size:20px;line-height:1.2}
.info p{margin:0;font-size:15px;line-height:1.55;color:#4a473f;max-width:52ch}

/* ---- карточки промо ----
   Один вид с карточками «О пиццерии»: то же поле, тот же размер заголовка и
   текста. Раньше они наследовали плитки первого экрана, у тех поле снято под
   снимок — и текст упирался в край. */
.pcard{border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px}
.pcard h3{margin:0;font-size:20px;line-height:1.2}
.pcard p{margin:0;font-size:15px;line-height:1.55;max-width:52ch}
.pcard--pop{background:var(--pop)}
.pcard--pop p{color:#4a473f}
.pcard--soft{background:var(--surface)}
.pcard--soft p{color:#4a473f}
.pcard--ink{background:var(--ink);color:#fff}
.pcard--ink p{color:#b6b3ac}
/* Цвета главной плитки: кремовое поле макета и красный угол от него же.
   Красное держим в дальнем углу, чтобы текст всегда лежал на кремовом. */
.pcard--legend{color:#2b1a12;
  background:#FCF3E0 radial-gradient(250px 230px at calc(100% + 85px) calc(100% + 70px),
    #C50403 0%, rgba(197,4,3,.8) 38%, rgba(197,4,3,0) 78%)}
.pcard--legend h3{color:#B01008}
.pcard--legend p{color:#5b4a3e}
@media(max-width:559px){.pcard{padding:20px}}

/* ---- первый экран ----
   Три плитки: слева большая с фирменным знаком, справа промо и кэшбек.
   Правая колонка задаёт высоту всей строки, поэтому её плитки держим
   компактными — иначе слева образуется дыра в пол-экрана. */
.promo--a{padding:0;position:relative;display:block;min-height:210px}
.promo__txt{position:relative;z-index:1;padding:26px;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:230px;gap:8px;max-width:56%}
.promo__txt .promo__k{margin-bottom:auto}
/* Снимок лежит поверх плитки справа и слегка заходит под текст — колонка с
   ровной границей резала блок пополам и смотрелась как две карточки. */
/* Снимок держим правее текста: цифры на корке не читались. Заходит за край
   плитки, но не под строку с ценой. */
.promo__shot{position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:50%;margin:0;display:flex;align-items:center;justify-content:flex-end;
  pointer-events:none}
/* Снимок вписан в свою колонку и не заезжает на текст: раньше он был шире
   колонки и накрывал кнопку. */
/* Без тени: на светлой плитке она читалась серым пятном вокруг корки,
   а не объёмом. Пицца просто лежит на цвете. */
.promo__shot img{width:115%;max-width:none;height:auto;display:block;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.promo--a:hover .promo__shot img{transform:scale(1.04) rotate(-2deg)}
@media(max-width:559px){
  .promo__txt{padding:20px;max-width:56%;min-height:200px}
  .promo__shot{width:54%;right:-10%}
  /* На телефоне три штампа вставали столбиком. Первые два ужимаем так, чтобы
     они держались в одной строке, а третьему отдаём свою — он самый длинный. */
  .promo__tags{gap:6px}
  .promo__tags span{font-size:10.5px;padding:5px 9px;border-width:1.5px;letter-spacing:0}
  /* Перенос делаем распоркой перед третьим, а не растяжкой самого штампа:
     иначе его рамка тянулась пустой до края карточки. */
  .promo__tags::before{content:"";flex-basis:100%;order:2;height:0}
  .promo__tags span:nth-child(3){order:3;align-self:flex-start;
    transform:translateY(1px) rotate(1deg)}
  .promo__tags span:nth-child(1),
  .promo__tags span:nth-child(2){order:1}
}
@media(max-width:340px){
  .promo__tags span{font-size:9.5px;padding:4px 8px}
}

/* ---- главная плитка: живой фирменный знак ----
   Кот и надпись стоят рядом, как в знаке, и кот в нём бежит. Держим их одной
   группой по центру: высоту строки задаёт правая колонка, и запас должен
   распределяться сверху и снизу, а не проваливаться дырой посередине. */
.promo--main{padding:26px;display:flex;flex-direction:column;justify-content:center;
  gap:22px;overflow:hidden}
.mark{display:flex;align-items:center;gap:14px;flex:0 0 auto;max-height:180px}
.mark__cat{position:relative;display:block;height:180px;flex:0 0 auto;
  transform-origin:50% 100%;animation:catHop 1.15s cubic-bezier(.3,.05,.4,1) infinite}
.mark__cat img{height:100%;width:auto;display:block;transform-origin:50% 88%;
  animation:catTilt 2.3s ease-in-out infinite}
.mark__shadow{position:absolute;left:50%;bottom:-4px;width:62%;height:11px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(120,60,0,.26), rgba(120,60,0,0) 72%);
  animation:catShadow 1.15s cubic-bezier(.3,.05,.4,1) infinite}
.mark__word{height:132px;width:auto;display:block;min-width:0}
/* Штампы про начинку: короткие фразы вместо пустого поля. Набраны как
   печати — контурная пилюля в цвет знака, слегка вразнобой по вертикали,
   чтобы строка не выглядела казённым списком тегов. */
.promo__tags{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto}
.promo__tags span{font-size:13px;font-weight:700;letter-spacing:.01em;color:#C42B12;
  border:2px solid rgba(196,43,18,.30);border-radius:999px;padding:6px 14px;
  background:rgba(255,255,255,.46);white-space:nowrap}
.promo__tags span:nth-child(2){transform:translateY(-3px) rotate(-1.5deg)}
.promo__tags span:nth-child(3){transform:translateY(2px) rotate(1deg)}
.promo__foot{display:flex;flex-direction:column;gap:14px;align-items:flex-start;flex:0 0 auto}
.promo--main h2{margin:0;font-size:clamp(21px,2.7vw,32px);line-height:1.12}
.promo--main .promo__cta{margin:0}

@keyframes catHop{
  0%,100%{transform:translateY(0) scaleY(1)}
  18%{transform:translateY(2px) scaleY(.97)}
  48%{transform:translateY(-15px) scaleY(1.02)}
  72%{transform:translateY(0) scaleY(.99)}
}
@keyframes catTilt{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(3deg)}
}
@keyframes catShadow{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.8}
  48%{transform:translateX(-50%) scale(.68);opacity:.4}
  72%{transform:translateX(-50%) scale(1.04);opacity:.85}
}
@media(max-width:900px){
  .mark__cat{height:132px} .mark__word{height:96px}
}
@media(max-width:559px){
  .promo--main{padding:20px;gap:16px}
  .mark{gap:10px} .mark__cat{height:104px} .mark__word{height:76px}
}
@media(prefers-reduced-motion:reduce){
  .mark__cat,.mark__cat img,.mark__shadow{animation:none}
}

/* Пирог выглядывает из-за правого края: 60% видно, 40% уходит за край плитки.
   Текст и знак лежат поверх, чтобы пирог никогда не закрыл надпись. */
.promo--main{position:relative;--pie:min(56%,470px)}
.promo__pie{position:absolute;top:50%;right:calc(var(--pie) * -.4);width:var(--pie);height:auto;
  transform:translateY(-50%);pointer-events:none;z-index:0;max-width:none}
.promo--main > .mark,.promo--main > .promo__title,.promo--main > .promo__tags,.promo--main > .promo__foot{position:relative;z-index:1}
/* Порядок: маленький знак как значок, крупный заголовок, штампы, кнопка.
   Главное в плитке теперь пироги, знак только подписывает, чья это пицца. */
.promo--main{justify-content:center;gap:0}
.promo--main .mark{max-height:none;gap:8px;margin-bottom:18px}
.promo--main .mark__cat{height:64px}
.promo--main .mark__word{height:46px}
.promo--main .mark__shadow{height:6px;bottom:-3px}
.promo--main h2.promo__title{margin:0 0 20px;font-size:clamp(34px,4.2vw,54px);line-height:1.02;
  letter-spacing:-.02em;max-width:58%}
.promo--main .promo__tags{max-width:58%;margin-bottom:24px}
/* На компьютере третий штамп тоже уходит на вторую строку: справа теперь пирог. */
.promo__tags::before{content:"";flex-basis:100%;order:2;height:0}
.promo__tags span:nth-child(1),.promo__tags span:nth-child(2){order:1}
.promo__tags span:nth-child(3){order:3;align-self:flex-start}
@media(max-width:559px){
  /* Телефонный размер штампов повторяем здесь: общее правило стоит ниже
     прежнего телефонного и перебивало его, первые два не влезали в строку. */
  .promo__tags span{font-size:10.5px;padding:5px 9px;border-width:1.5px;letter-spacing:0}
  /* На телефоне пирог крупный и выглядывает снизу справа, рядом с кнопкой.
     Под него отведён нижний ряд: заголовок и штампы на пирог не заезжают. */
  .promo--main{--pie:min(58vw,250px);--cut:.28}
  .promo__pie{top:auto;bottom:calc(var(--pie) * -.18);right:calc(var(--pie) * var(--cut) * -1);transform:none}
  .promo--main .promo__foot{min-height:calc(var(--pie) * .74);justify-content:center}
  .promo--main .mark__cat{height:48px}
  .promo--main .mark__word{height:34px}
  .promo--main .mark{margin-bottom:14px}
  .promo--main h2.promo__title{font-size:clamp(30px,9vw,38px);max-width:none;margin-bottom:16px}
  .promo--main .promo__tags{max-width:none;margin-bottom:18px}
}
/* Когда плитки стоят столбиком, у сета фото слева, текст справа:
   пирог выше справа, сет ниже слева, картинки идут по диагонали. */
@media(max-width:859px){
  .promo--a .promo__shot{right:auto;left:-22%;justify-content:flex-start}
  .promo--a .promo__txt{margin-left:auto}
}
@media(min-width:560px) and (max-width:859px){
  .promo--a .promo__shot{left:-12%}
  .promo--a .promo__txt{max-width:50%}
}
.promo__cta{white-space:nowrap}
@media(max-width:380px){
  .promo__tags span{font-size:10px;padding:4px 8px}
  .promo--main{--cut:.34}
}
@media(max-width:340px){
  .promo__tags span{font-size:9px;padding:4px 7px}
  .promo--main{--pie:50vw}
}

/* заголовок страницы нужен поиску, но на экране он лишний */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

}
}
}

}
.promo__k{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-bottom:auto;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:rgba(17,17,16,.1);padding:6px 12px;border-radius:999px}

/* кикер в первом экране — он же h1 страницы: сбрасываем отступы заголовка */
h1.promo__k{margin:0 0 auto;line-height:1.35}
.promo--b .promo__k{background:rgba(17,17,16,.1);align-self:flex-start;width:fit-content}
.promo__cta{margin-top:16px;align-self:flex-start;height:44px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px}
.promo--b .promo__cta{background:var(--ink);color:#fff}

/* ---------- инфо-строка ---------- */
.strip{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin:16px 0 4px}
@media(min-width:760px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip div{background:var(--surface);border-radius:var(--rs);padding:14px 16px}
.strip b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.strip span{font-size:12.5px;color:var(--muted)}

/* ---------- каталог ---------- */
.cat{padding:34px 0 0;scroll-margin-top:120px}
.cat__h{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.cat__h h2{font-size:clamp(24px,4vw,34px)}
.cat__h span{font-size:14px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1060px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{background:var(--surface);border-radius:var(--r);padding:10px 14px 16px;display:flex;flex-direction:column;text-align:left;transition:background .15s,transform .15s;position:relative}
.card:hover{background:var(--surface2)}
.card:active{transform:scale(.99)}
.card__ph{position:relative;aspect-ratio:1.14;border-radius:14px;overflow:hidden;background:var(--card);margin-bottom:12px}
/* Снимки сняты в разные дни: у одних фон белый, у других сероватый, и в ряду
   это бросается в глаза. Умножение сажает любой светлый фон на фон карточки —
   получается одна подложка у всех позиций. */
.card__ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s;
  mix-blend-mode:multiply}
.card:hover .card__ph img{transform:scale(1.04)}
/* метки на фото: матовое стекло, микрошрифт вразрядку.
   «Хит» — тёмная, её мало и она должна ловить взгляд;
   «Новинка» — светлая с жёлтой точкой; острое и вегетарианское — значком. */
.badges{position:absolute;top:9px;left:9px;display:flex;gap:5px;flex-wrap:wrap;max-width:88%;z-index:2}
.badge{display:inline-flex;align-items:center;justify-content:center;height:23px;padding:0 9px;
  border-radius:7px;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:#221f1a;white-space:nowrap;background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);
  box-shadow:0 1px 3px rgba(24,22,19,.13)}
.badge svg{display:block}
.badge--hit{background:rgba(17,17,16,.9);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.badge--new::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pop);
  margin-right:6px;box-shadow:0 0 0 2.5px rgba(255,206,31,.3)}
.badge--ic{width:23px;padding:0}
.badge--hot{color:var(--hot)}
.badge--veg{color:#1f8a4d}
/* выгода сета: чип того же роста, что и метки */
.save{position:absolute;top:9px;right:9px;z-index:2;display:inline-flex;align-items:center;height:23px;
  padding:0 9px;border-radius:7px;background:var(--hot);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;box-shadow:0 1px 4px rgba(224,64,44,.34)}
/* старая цена: линия идёт по диагонали и тает к краям — не жирная черта поперёк */
.card__old{position:relative;display:inline-block;margin-left:8px;font-size:12.5px;font-weight:500;
  color:#a5a29a;text-decoration:none}
.card__old::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:1.6px;border-radius:2px;
  transform:translateY(-50%) rotate(-11deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(224,64,44,0),var(--hot) 20%,var(--hot) 80%,rgba(224,64,44,0))}
/* рейтинг в шапке: снимает вопрос «не ошибаюсь ли я» ещё до выбора */
.head__rate{display:inline-flex;align-items:center;gap:5px;color:#4b4842;font-size:13px;
  text-decoration:none;white-space:nowrap}
.head__rate svg{color:#f0a500;flex:none}
.head__rate b{font-weight:700}
.head__rate span{color:#8b877f}
@media (max-width:900px){.head__rate span{display:none}}
.card__n{font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-bottom:5px}
.card__w{font-size:12px;color:var(--muted);margin-bottom:6px}
.card__d{font-size:13px;color:var(--muted);line-height:1.35;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card__p{font-size:18px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.card__p s{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.card__b{height:38px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;transition:.15s}
.card__b:hover{background:#000}
@media(min-width:700px){.card__n{font-size:17px}}

/* ---------- подвал ---------- */
.foot{margin-top:64px;border-top:1px solid var(--line);padding:44px 0 56px;background:var(--surface)}
.foot__g{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:760px){.foot__g{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h4{font-size:14px;margin-bottom:12px;letter-spacing:0;font-weight:700}
.foot p,.foot li{margin:0 0 7px;font-size:14px;color:var(--muted);line-height:1.45}
.foot ul{list-style:none;margin:0;padding:0}
.foot__note{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:#a5a29a;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- оверлей и панели ---------- */
.ov{position:fixed;inset:0;z-index:100;background:rgba(17,17,16,.42);opacity:0;pointer-events:none;transition:opacity .22s}
.ov.is-open{opacity:1;pointer-events:auto}
.panel{position:fixed;z-index:110;background:var(--card);display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,.14);
  visibility:hidden;pointer-events:none}
.panel.is-open{visibility:visible;pointer-events:auto}
.panel__x{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:50%;background:var(--surface);display:grid;place-items:center;transition:.15s}
.panel__x:hover{background:var(--surface2)}
.panel__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.panel__foot{padding:14px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}

/* товар — снизу на мобиле, по центру на десктопе */
#sheetProduct{inset:auto 0 0 0;height:94dvh;border-radius:22px 22px 0 0;transform:translateY(101%);
  transition:transform .3s cubic-bezier(.22,.72,.3,1),visibility 0s .3s}
#sheetProduct.is-open{transition:transform .3s cubic-bezier(.22,.72,.3,1),visibility 0s 0s}
#sheetProduct.is-open{transform:none}
@media(min-width:900px){
  #sheetProduct{inset:50% auto auto 50%;width:min(940px,94vw);height:min(86vh,760px);border-radius:24px;
    transform:translate(-50%,-47%);opacity:0;transition:transform .22s,opacity .22s,visibility 0s .22s}
  #sheetProduct.is-open{transform:translate(-50%,-50%);opacity:1}
}
/* корзина — справа */
#sheetCart{inset:0 0 0 auto;width:min(460px,100vw);transform:translateX(101%);
  transition:transform .28s cubic-bezier(.22,.72,.3,1),visibility 0s .28s}
#sheetCart.is-open{transition:transform .28s cubic-bezier(.22,.72,.3,1),visibility 0s 0s}
#sheetCart.is-open{transform:none}

.prod{display:flex;flex-direction:column;height:100%}
@media(min-width:900px){.prod{flex-direction:row}}
.prod__img{background:var(--surface);display:grid;place-items:center;padding:16px}
.prod__img img{border-radius:16px;width:100%;max-width:380px;aspect-ratio:1.14;object-fit:cover}
@media(min-width:900px){.prod__img{flex:0 0 44%;padding:28px;align-content:center}}
.prod__side{flex:1;padding:20px 20px 8px;overflow-y:auto}
@media(min-width:900px){.prod__side{padding:34px 34px 12px}}
.prod__n{font-size:clamp(24px,5vw,32px);margin-bottom:6px}
.prod__w{font-size:13px;color:var(--muted);margin-bottom:12px}
.prod__d{font-size:15px;color:#4b4842;line-height:1.45;margin:0 0 22px}
.opt{margin-bottom:22px}
.opt__t{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.seg{display:flex;background:var(--surface);border-radius:999px;padding:4px;gap:4px}
.seg button{flex:1;height:40px;border-radius:999px;font-size:13.5px;font-weight:600;color:#605d57;transition:.15s;padding:0 8px}
.seg button.is-on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.opts{display:grid;gap:8px}
.orow{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;background:var(--surface);border:1.5px solid transparent;transition:.15s;text-align:left;width:100%}
.orow:hover{background:var(--surface2)}
.orow.is-on{border-color:var(--ink);background:var(--card)}
.orow__r{width:19px;height:19px;border-radius:50%;border:2px solid #c9c6be;flex:none;display:grid;place-items:center}
.orow.is-on .orow__r{border-color:var(--ink)}
.orow.is-on .orow__r::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink)}
.orow__n{flex:1;font-size:14.5px}
.orow__p{font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:16px;transition:.15s}
.btn:hover{background:#000}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.35;pointer-events:none}
.btn--ghost{background:var(--surface);color:var(--text)}
.btn--ghost:hover{background:var(--surface2)}
.btn--pop{background:var(--pop);color:#111}
.btn--pop:hover{background:#f5c40f}

/* корзина */
.cart__h{padding:22px 20px 12px;border-bottom:1px solid var(--line)}
.cart__h h3{font-size:22px}
.citem{display:flex;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.citem__i{width:74px;height:66px;flex:none;border-radius:10px;overflow:hidden;background:var(--surface)}
.citem__i img{width:100%;height:100%;object-fit:cover}
.citem__b{flex:1;min-width:0}
.citem__n{font-size:14.5px;font-weight:700;line-height:1.25}
.citem__o{font-size:12.5px;color:var(--muted);margin:3px 0 9px;line-height:1.3}
.citem__r{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qty{display:inline-flex;align-items:center;background:var(--surface);border-radius:999px}
.qty button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#5f5c56;font-size:17px;line-height:1}
.qty button:hover{color:#111}
.qty span{min-width:26px;text-align:center;font-size:14px;font-weight:700}
.citem__p{font-weight:700;font-size:15px;white-space:nowrap}
.sums{padding:16px 20px 4px}
.sumrow{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:8px}
.sumrow b{color:var(--text);font-weight:600}
.sumrow--tot{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.02em;padding-top:12px;border-top:1px solid var(--line);margin-top:4px}
.empty{padding:80px 30px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--text);font-size:19px;font-weight:700;margin-bottom:8px}

/* оформление */
.co{padding:22px 20px 10px}
.co h3{font-size:24px;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600}
.field input,.field textarea,.field select{width:100%;height:50px;padding:0 15px;border-radius:12px;background:var(--surface);border:1.5px solid transparent;outline:none;font-size:16px;transition:.15s;-webkit-appearance:none}
.field textarea{height:84px;padding:13px 15px;resize:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);background:var(--card)}
.field.err input,.field.err select{border-color:var(--hot)}
.field .msg{display:none;color:var(--hot);font-size:12px;margin-top:5px}
.field.err .msg{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.note{font-size:12.5px;color:var(--muted);margin:-6px 0 16px;line-height:1.4}
.done{padding:56px 26px;text-align:center}
/* кот радуется вместе с гостем: подпрыгивает один раз и замирает */
.done__cat{display:block;width:118px;height:auto;margin:0 auto 6px;
  animation:doneJump .75s cubic-bezier(.2,1.5,.4,1) both}
@keyframes doneJump{0%{opacity:0;transform:translateY(22px) scale(.9)}
                    60%{opacity:1;transform:translateY(-8px) scale(1.03)}
                    100%{opacity:1;transform:translateY(0) scale(1)}}
/* в пустой корзине он летит за пиццей — покачивается, пока ждём */
.empty__cat{display:block;width:132px;height:auto;margin:0 auto 10px;opacity:.9;
  animation:emptyFloat 3.4s ease-in-out infinite}
@keyframes emptyFloat{0%,100%{transform:translateY(0) rotate(-2deg)}
                      50%{transform:translateY(-9px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){
  .done__cat,.empty__cat{animation:none}
}
.done__i{width:76px;height:76px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin:0 auto 20px}
.done h3{font-size:26px;margin-bottom:10px}
.done p{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 8px}
.done__id{display:inline-block;margin:14px 0 22px;padding:10px 20px;border-radius:999px;background:var(--surface);font-weight:700;letter-spacing:.02em}
.toast{position:fixed;left:50%;bottom:24px;z-index:200;transform:translate(-50%,26px);background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:13px 22px;border-radius:999px;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 8px 30px rgba(0,0,0,.2);max-width:88vw;text-align:center}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.skel{background:linear-gradient(90deg,var(--surface),var(--surface2),var(--surface));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r);height:300px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- карточка товара: состав и допы ---------- */
.prod__side{padding-bottom:0}
.ings{display:flex;flex-wrap:wrap;gap:8px}
.ing{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--surface);font-size:13.5px;border:1.5px solid transparent;transition:.15s;line-height:1.2}
.ing:hover{background:var(--surface2)}
.ing svg{opacity:.4;flex:none}
.ing.is-off{background:var(--card);border-color:var(--line);color:#a8a59d;text-decoration:line-through}
.ing.is-off svg{opacity:1;color:var(--hot)}
.opt__hint{font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}
.grp{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:18px 0 9px}
.grp:first-child{margin-top:0}
.adds{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media(min-width:900px){.adds{grid-template-columns:repeat(4,1fr)}}
.add{position:relative;background:var(--surface);border:2px solid transparent;border-radius:14px;padding:6px 6px 9px;text-align:center;transition:.15s}
.add:hover{background:var(--surface2)}
.add.is-on{border-color:var(--ink);background:var(--card)}
.add img{width:100%;aspect-ratio:1.33;object-fit:contain;pointer-events:none}
.add__n{font-size:11.5px;line-height:1.2;margin:2px 0 3px;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.add__p{font-size:13px;font-weight:700}
.add__c{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:var(--ink);display:none;place-items:center}
.add.is-on .add__c{display:grid}
.prod__bar{position:sticky;bottom:0;background:linear-gradient(to top,#fff 74%,rgba(255,255,255,0));padding:16px 0 18px;margin-top:8px}
.prod__bar small{display:block;text-align:center;color:var(--muted);font-size:12px;margin-bottom:9px}
.citem__o b{color:#5f5c56;font-weight:600}
.citem__o em{font-style:normal;color:var(--hot)}

/* карточка товара: на мобиле прокручивается целиком, на десктопе — только правая колонка */
@media(max-width:899px){
  .prod{display:block}
  .prod__img{padding:14px 16px 0}
  .prod__img img{max-width:none}
  .prod__side{overflow:visible;padding:18px 20px 0}
}
@media(min-width:900px){
  #sheetProduct .panel__body{overflow:hidden}
}
.prod__bar{background:var(--card);box-shadow:0 -14px 16px -8px #fff}

/* ---------- подарки, допродажа, бонусы в корзине ---------- */
.gift{margin:6px 20px 4px;padding:14px 16px;border-radius:16px;background:var(--surface)}
.gift--on{background:#fff8de;border:1.5px solid var(--pop)}
.gift__h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:4px}
.gift__t{font-size:13px;color:var(--muted);line-height:1.35}
.gift__t b{color:var(--text)}
.bar{height:7px;border-radius:99px;background:var(--surface2);overflow:hidden;margin:11px 0 8px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--pop);transition:width .3s}
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.gcard{background:var(--card);border:2px solid transparent;border-radius:13px;padding:6px 6px 9px;text-align:center;transition:.15s}
.gcard.is-on{border-color:var(--ink)}
.gcard img{width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:9px}
.gcard span{display:block;font-size:11.5px;line-height:1.2;margin-top:5px}
.gcard small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.gcard.is-lock{opacity:.45}
.ups{margin:14px 0 4px;padding:0 20px}
.ups__h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.ups__row{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin:0 -20px;padding-left:20px;padding-right:20px}
.ups__row::-webkit-scrollbar{display:none}
.ucard{flex:none;width:118px;background:var(--surface);border-radius:14px;padding:7px 8px 10px;text-align:center;transition:.15s}
.ucard:hover{background:var(--surface2)}
.ucard img{width:100%;aspect-ratio:1.15;object-fit:cover;border-radius:10px}
.ucard b{display:block;font-size:11.5px;font-weight:600;line-height:1.2;margin:6px 0 4px;min-height:2.4em}
.ucard span{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700}
.ucard span::before{content:"+";display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;line-height:1}
.sumrow--bonus b{color:#1f9254}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#4b4842;line-height:1.35;cursor:pointer;margin:2px 0 16px}
.check input{width:19px;height:19px;flex:none;margin:1px 0 0;accent-color:var(--ink)}

/* ---------- установка приложения и пуши ---------- */
.pwa{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;background:var(--ink);color:#fff;border-radius:16px;padding:14px 16px;display:none;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.pwa.on{display:flex}
.pwa img{width:40px;height:40px;border-radius:10px;flex:none}
.pwa__t{flex:1;font-size:13.5px;line-height:1.3}
.pwa__t b{display:block;font-size:14.5px;margin-bottom:2px}
.pwa button{height:36px;padding:0 15px;border-radius:999px;background:var(--pop);color:#111;font-weight:700;font-size:13px;white-space:nowrap}
.pwa .skip{background:transparent;color:#b6b3ac;padding:0 6px;font-weight:500}
@media(min-width:760px){.pwa{left:auto;right:20px;bottom:20px;max-width:400px}}
.excl{background:#fff8de;border:1px solid var(--pop);border-radius:13px;padding:11px 14px;font-size:13px;line-height:1.4;margin:2px 0 14px;color:#5b5220}
.excl b{color:#111}

/* ---------- вход в кабинет с любого экрана ---------- */
.head__lk{width:40px;height:40px;border-radius:50%;background:var(--surface);display:grid;place-items:center;flex:none;transition:.15s;color:var(--text)}
.head__lk:hover{background:var(--surface2)}
.head__lk.is-in{background:var(--pop)}
.pwa__ios{display:block;font-size:12.5px;color:#b6b3ac;margin-top:6px;line-height:1.35}
.pwa__ios b{color:#fff}
.hello{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:14px;padding:11px 14px;margin:14px 0 0;font-size:13.5px}
.hello b{font-weight:700}
.hello a{margin-left:auto;font-weight:600;white-space:nowrap;color:var(--text);text-decoration:underline}

/* ---------- карта зон доставки ---------- */
.mapbox{border-radius:var(--r);overflow:hidden;background:var(--surface);min-height:64px;display:flex;align-items:center;justify-content:center}
.mapbox__btn{height:52px;padding:0 26px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;margin:6px}
.mapbox__btn:hover{background:#000}
.mapbox iframe,.mapbox ymaps{width:100%!important;border:0}
.mapbox.is-on{min-height:340px;display:block}

/* ---------- оплата бонусами ---------- */
.bonusbox{background:#fffbe9;border-radius:var(--r);padding:14px 16px;margin:14px 0}
.bonusbox__h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.bonusbox__h b{font-size:15px}
.bonusbox__h span{font-size:12.5px;color:var(--muted)}
.bonusbox__r{display:flex;align-items:center;gap:12px;margin-top:10px}
.bonusbox__r input[type=range]{flex:1;accent-color:var(--ink)}
.bonusbox__v{font-weight:800;font-size:15px;color:#1f9254;white-space:nowrap}
.bonusbox__b{display:flex;gap:8px;margin-top:10px}
.chip2{height:34px;padding:0 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:600}
.chip2:hover{border-color:var(--ink)}
/* подпись у иконки кабинета: вход виден до оформления заказа */
.head__lk{width:auto;height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;border-radius:999px}
.head__lk svg{width:17px;height:17px}
.head__lk b{font-size:13px;font-weight:600}
@media(max-width:820px){.head__lk b{display:none}
  .head__lk{width:38px;padding:0;justify-content:center;gap:0}}

/* строки промо-пицц в предупреждении «1+1» */
.setrows{display:grid;gap:8px;margin-top:12px}
.setrow{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:8px 10px}
.setrow img{width:40px;height:36px;object-fit:cover;border-radius:9px;flex:none}
.setrow b{flex:1;font-size:13.5px;font-weight:600}

/* ---------- адреса в кабинете ---------- */
.addrs{display:grid;gap:10px}
.addr{background:var(--surface);border-radius:14px;padding:12px 14px;border:1.5px solid transparent}
.addr.is-main{border-color:var(--pop);background:#fffbe9}
.addr__t{display:flex;align-items:center;gap:8px}
.addr__t b{font-size:14.5px}
.tagm{font-size:11px;font-weight:700;background:var(--pop);color:#111;border-radius:999px;padding:2px 8px}
.addr__s{font-size:13.5px;color:#4b4842;margin-top:3px}
.addr__n{font-size:12.5px;color:var(--muted);margin-top:3px}
.addr__b{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.mini--x{color:#c0392b}
.found{background:#eaf6ee;border-radius:14px;padding:12px 14px;font-size:14px;margin:0 0 14px;line-height:1.45}
/* выбор сохранённого адреса при заказе */
.pickaddr{display:grid;gap:8px;margin-bottom:12px}
.pa{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:12px;padding:10px 12px;
  border:1.5px solid transparent;text-align:left;width:100%}
.pa.is-on{border-color:var(--ink);background:var(--card)}
.pa b{font-size:13.5px;font-weight:700;white-space:nowrap}
.pa span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* «мы вас узнали» под полем телефона */
.known{background:#eaf6ee;border-radius:12px;padding:10px 13px;font-size:13.5px;margin:-6px 0 14px;line-height:1.4}
.known a{font-weight:700;text-decoration:underline;margin-left:4px}
.pwa__ios{display:block;font-size:12.5px;opacity:.85;margin-top:6px;line-height:1.35}

/* ---------- плавность на длинной странице ----------
   Браузер не тратит силы на разделы меню за пределами экрана:
   при 84 карточках это убирает рывки прокрутки на слабых телефонах.
   Заранее заданная высота нужна, чтобы полоса прокрутки не прыгала. */
.cat{content-visibility:auto;contain-intrinsic-size:auto 1200px}
#promos,#delivery,#about{content-visibility:auto;contain-intrinsic-size:auto 600px}
/* картинка карточки: место под неё известно заранее — нет скачков вёрстки */
.card__ph{aspect-ratio:4/3}
.card__ph img{width:100%;height:100%;object-fit:cover}

/* ---------- состав в карточке товара ---------- */
.prod__ing{font-size:15px;line-height:1.6;color:#4b4842;margin:0 0 22px}
.prod__ing span{color:#4b4842}
.ing2{display:inline;font:inherit;color:var(--text);text-decoration:underline;
  text-decoration-color:#c9c6be;text-underline-offset:3px;padding:0;cursor:pointer}
.ing2 svg{display:inline-block;vertical-align:-3px;margin-left:3px;color:var(--muted)}
.ing2:hover{text-decoration-color:var(--ink)}
.ing2.is-off{color:#a5a29a;text-decoration:line-through;text-decoration-color:#a5a29a}
.ing2.is-off svg{opacity:.5}

/* ---------- подсказки адреса и зона доставки ---------- */
.field--sug{position:relative}
.sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;background:var(--card);
  border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.16);overflow:hidden;max-height:260px;overflow-y:auto}
.sug__i{display:block;width:100%;text-align:left;padding:11px 15px;font-size:14px;border-bottom:1px solid var(--line)}
.sug__i:last-child{border-bottom:0}
.sug__i:hover{background:var(--surface)}
.zone{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border-radius:12px;
  padding:10px 13px;font-size:13.5px;margin:-4px 0 14px;line-height:1.4}
.zone__dot{width:10px;height:10px;border-radius:50%;flex:none}
.zone--no{background:#fff2f0;color:#b3392b}

/* ---------- вход через Telegram и приглашения ---------- */
.btn--tg{background:#2aabee;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px}
.btn--tg:hover{background:#1f97d6}
.orline{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted);font-size:13px}
.orline:before,.orline:after{content:"";flex:1;height:1px;background:var(--line)}
.refcode{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fffbe9;border-radius:14px;padding:12px 16px;margin-top:12px}
.refcode b{font-size:24px;font-weight:800;letter-spacing:.12em}

/* ---------- правила бонусов в кабинете ---------- */
.mini--light{background:rgba(255,255,255,.16);color:#fff;margin-top:14px}
.mini--light:hover{background:rgba(255,255,255,.26)}
.modal2{position:fixed;inset:0;z-index:200;background:rgba(17,17,16,.5);display:grid;place-items:center;padding:18px;overflow-y:auto}
.modal2__b{background:var(--card);border-radius:20px;padding:26px;max-width:520px;width:100%;position:relative}
.modal2__b h2{font-size:22px;margin-bottom:10px}
.modal2__b h3{font-size:15px;margin:18px 0 8px}
.modal2__b p{font-size:14px;color:#4b4842;line-height:1.5;margin:0 0 8px}
.modal2__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--surface)}
ul.rules{margin:0;padding-left:18px;font-size:14px;line-height:1.6;color:#4b4842}
ul.rules li{margin-bottom:4px}
.btn--max{background:#6d3fff;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:10px}

/* обязательная галочка согласия */
.check.err{background:#fff2f0;border-radius:10px;padding:8px 10px;margin-left:-10px;margin-right:-10px}
.check.err span{color:#b3392b}
.docs{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 16px 29px}
.docs a{color:#7a746a;text-decoration:underline;text-underline-offset:2px}
.docs a:active{color:var(--ink)}
/* ссылки на документы — это кнопки: панель открывается поверх корзины */
.docs button{background:none;border:none;padding:0;font:inherit;color:#7a746a;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.docs button:hover{color:var(--ink)}
.docs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* согласие даётся оформлением заказа — строкой, без галочки */
.consent{margin:2px 0 16px;font-size:13px;line-height:1.45;color:#7a746a}
.consent button{background:none;border:none;padding:0;font:inherit;color:#7a746a;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.consent button:hover{color:var(--ink)}
.consent button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.doctext{font-size:14.5px;line-height:1.6;color:#3d3a35}
.doctext h1,.doctext h2,.doctext h3{font-size:16px;margin:16px 0 6px}
.doctext p,.doctext li{margin:0 0 8px}
.doctext ul,.doctext ol{padding-left:20px}
/* вопрос «откуда узнали» на экране после заказа: тихий блок, не кнопка действия */
.heard{margin:18px 0 14px;padding:14px 15px;border-radius:14px;background:var(--surface);text-align:left}
.heard__q{margin:0 0 10px;font-size:14px;color:#4b4842;line-height:1.4}
.heard__w{display:flex;flex-wrap:wrap;gap:7px}
.heard__c{padding:8px 13px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);
  font-size:13px;color:#3d3a35;line-height:1.2;cursor:pointer}
.heard__c:hover{border-color:var(--ink)}
.heard__c:active{background:var(--ink);color:#fff;border-color:var(--ink)}
.heard__c:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* приглашение в приложение для пришедших из бота */
.appcall{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fffbe9;
  border-radius:var(--r);padding:18px 20px;margin:18px 0 0}
.appcall b{display:block;font-size:17px;margin-bottom:3px}
.appcall span{font-size:14px;color:#4b4842}
.appcall .btn{width:auto;padding:0 24px;flex:none}
.steps--mine{background:#eaf6ee;border:1.5px solid #9fd6ae}

/* ---------- адрес в оформлении ---------- */
.three{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px}
/* дом, корпус, квартира, этаж — четыре коротких поля в строку */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:420px){.four{grid-template-columns:repeat(2,1fr)}}
.addrpick{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:14px;padding:12px 14px}
.addrpick div{flex:1;min-width:0}
.addrpick b{display:block;font-size:14.5px}
.addrpick span{display:block;font-size:13.5px;color:var(--muted)}
/* предложение приложения в корзине */
.applink{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--soft,#f6f5f2);border:1px solid var(--line,#e7e4dd);border-radius:14px;
  padding:12px 14px;margin:4px 0 2px;color:inherit;cursor:pointer}
.applink:hover{background:#f1efe9}
.applink img{border-radius:9px;flex:none}
.applink span{flex:1;font-size:13px;line-height:1.35;color:var(--muted,#6e6b65)}
.applink b{display:block;font-size:14.5px;color:var(--ink,#1a1a18);margin-bottom:1px}
.applink svg{flex:none;color:var(--muted,#8a8781)}
.appmini{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fffbe9;
  border-radius:14px;padding:14px 16px;margin:0 0 18px}
.appmini div{flex:1;min-width:180px}
.appmini b{display:block;font-size:15px;margin-bottom:2px}
.appmini span{font-size:13px;color:#4b4842;line-height:1.4}
.appmini .btn{width:auto;padding:0 22px;height:44px;flex:none}
/* выбор телефона перед инструкцией */
.pfrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.pf{display:grid;gap:8px;place-items:center;background:var(--surface);border-radius:16px;padding:20px 10px;color:var(--ink)}
.pf b{font-size:15px;font-weight:700}
.pf:hover{background:var(--surface2)}

/* подпись в подвале */
.since{font-size:13px;letter-spacing:.04em}
.since b{font-weight:800;letter-spacing:.08em}
.since--dim{opacity:.45;font-size:11.5px}
.since--dim a{text-decoration:underline}

/* правка позиции прямо из корзины */
.citem__edit{margin-left:8px;font-size:12.5px;color:var(--muted);text-decoration:underline;
  text-underline-offset:2px;font-weight:500}
.citem__edit:hover{color:var(--ink)}
.wipebtn{font:inherit;color:inherit;text-decoration:underline;padding:0}

/* конструктор: своя пицца и половинки */
.card--bld{background:linear-gradient(180deg,#fffaf1,var(--bg))}
.card--bld .card__ph{background:var(--card)}
.seg--mode{margin-bottom:14px}
.seg--mode button{height:44px;font-size:14.5px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
  background:var(--surface2);font-size:13px;font-weight:600;transition:.15s}
.chip:hover{background:#e2dfd8;color:var(--hot)}
.chip svg{opacity:.55}
.halves{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.half{display:grid;gap:3px;padding:14px 12px;border-radius:16px;background:var(--surface);
  border:1.5px solid transparent;text-align:left;transition:.15s}
.half:hover{background:var(--surface2)}
.half.is-pick{border-color:var(--ink);background:var(--card)}
.half__t{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.half__n{font-size:15px;font-weight:600;line-height:1.25}
.half__p{font-size:13.5px;font-weight:700;color:var(--muted)}
.orow__n small{display:block;font-size:11.5px;color:var(--muted);line-height:1.3;margin-top:2px}
.orow.is-dim{opacity:.42}

/* круглая вырезка пиццы из кадра: у всех снимков центр и радиус одинаковые */
.pz{position:relative;display:block;border-radius:50%;overflow:hidden;background:var(--surface);flex:none}
.pz img{position:absolute;width:166.67%;left:-34.17%;top:-5.1%;display:block}
.pz__h{position:absolute;inset:0;overflow:hidden}
.pz__h--l{clip-path:inset(0 50% 0 0)}
.pz__h--r{clip-path:inset(0 0 0 50%)}
.pz--seam::after{content:"";position:absolute;left:calc(50% - .75px);top:0;bottom:0;width:1.5px;
  background:var(--bg);opacity:.9}
.pz--40{width:40px;height:40px}
.pz--44{width:44px;height:44px}
.pz--cart{width:100%;height:100%}
.pz--big{width:min(78%,340px);height:auto;aspect-ratio:1;margin:0 auto}
.pz--empty{display:grid;place-items:center;font-size:22px;color:var(--muted);
  border:1.5px dashed var(--line);background:transparent}
.orow--pz{gap:11px}
.half{grid-template-columns:auto 1fr;align-items:center;gap:10px;column-gap:11px}
.half__b{display:grid;gap:2px;min-width:0}
.half__p{grid-column:1/-1;padding-left:51px}
/* внутри склейки картинка позиционируется сама — общие правила карточки ей мешают */
.prod__img .pz img,.citem__i .pz img,.orow .pz img,.half .pz img{
  border-radius:0;width:166.67%;max-width:none;aspect-ratio:auto;object-fit:fill}
/* готовая круглая вырезка: пицца уже вписана в квадрат */
.pz img.pz__r,.prod__img .pz img.pz__r,.citem__i .pz img.pz__r,.orow .pz img.pz__r,.half .pz img.pz__r{
  width:100%;height:100%;left:0;top:0}
/* половина ещё не выбрана — оставляем пустой сектор, а не прячем всю картинку */
.pz__h--none{background:repeating-linear-gradient(-45deg,var(--surface),var(--surface) 7px,
  var(--surface2) 7px,var(--surface2) 14px)}

/* пояснение под заголовком списка половинок */
.hint2{font-size:12.5px;color:var(--muted);line-height:1.4;margin:-4px 0 10px}
/* конструктор: счётчик в заголовке категории и квадратный маркер множественного выбора */
.grp__c{float:right;font-size:11.5px;font-weight:600;color:var(--muted);
  text-transform:none;letter-spacing:0}
.grp__c.is-full{color:var(--hot)}
.orow__r--sq{border-radius:6px}
.orow.is-on .orow__r--sq::after{border-radius:2px}
.orow[disabled]{opacity:.4;pointer-events:none}
/* плитки конструктора: недоступное гасим, но оставляем видимым */
.add[disabled]{opacity:.35;pointer-events:none;filter:grayscale(.5)}
.add__p{color:var(--muted)}
.add.is-on .add__p{color:var(--text)}

/* частые вопросы: открываются по клику, текст доступен поиску и без клика */
/* Вопросы стояли колонкой слева, и справа зияла пустота. Раскладываем
   в две колонки по ширине контента — блок читается как единое целое. */
.faq__l{display:grid;gap:10px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.faq__l{grid-template-columns:1fr 1fr;gap:12px}}
.faq__i{background:var(--card,#fff);border:1px solid var(--line,#e8e6e1);border-radius:14px;
  padding:14px 18px}
.faq__i summary{cursor:pointer;font-weight:600;font-size:16px;line-height:1.4;
  list-style:none;display:flex;align-items:flex-start;gap:10px}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"+";margin-left:auto;font-weight:400;font-size:20px;
  line-height:1;color:var(--muted,#8a867f);transition:transform .15s}
.faq__i[open] summary::after{transform:rotate(45deg)}
.faq__i p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--muted,#6f6b64)}
.faq__i[open]{border-color:var(--line)}
.faq{margin-bottom:8px}

/* ---------- графики аналитики ---------- */
.cv{width:100%;height:200px;display:block;overflow:visible}
.kpis--4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dl{font-style:normal;font-size:12px;margin-left:6px;padding:1px 6px;border-radius:6px;
  background:#f0f0f3;color:#6b6b70}
.dl.up{background:#e6f6ee;color:#1f7a4d}
.dl.down{background:#fdecea;color:#a8362a}

/* столбики: подпись под каждым, высота от максимума */
.bars2{display:flex;align-items:flex-end;gap:4px;padding-top:8px}
.bar2{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;gap:5px}
.bar2 b{display:block;width:100%;background:linear-gradient(180deg,#5b8def,#8fb4f5);
  border-radius:5px 5px 2px 2px;min-height:2px}
.bar2 i{font-style:normal;font-size:10.5px;color:#8a8a8e;white-space:nowrap}

/* кольцо и легенда рядом */
.donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px}
.lg li{display:flex;align-items:center;gap:8px;font-size:13.5px}
.lg i{width:10px;height:10px;border-radius:3px;flex:none}
.lg span{flex:1;color:#3a3a3c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg b{font-variant-numeric:tabular-nums;color:#1c1c1e}

@media(max-width:900px){
  .kpis--4{grid-template-columns:repeat(2,1fr)}
  .bar2 i{display:none}
}

/* ---------- доступы: разделы и полномочия ----------
   Строка = раздел, справа переключатель уровня. Одинаковая сетка у всех
   строк, поэтому глазу не нужно искать, где что: всё на одной вертикали. */
.acl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;
  overflow:hidden}
.acr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;
  background:var(--card);padding:11px 14px}
.acr__n b{display:block;font-size:14px;font-weight:600}
.acr__n small{color:var(--muted);font-size:12.5px}
.lv{display:flex;gap:2px;background:var(--surface);border-radius:10px;padding:3px;flex:none}
.lv button{height:30px;padding:0 13px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:var(--muted);white-space:nowrap}
.lv button.is-on{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.lv button.is-on[data-lv="none"]{color:#a8362a}
.lv button.is-on[data-lv="edit"]{color:#1f7a4d}

.fls{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:760px){.fls{grid-template-columns:1fr 1fr}}
.fl{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;cursor:pointer}
.fl input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--ink)}
.fl b{display:block;font-size:14px;font-weight:600}
.fl small{color:var(--muted);font-size:12.5px}

.ugrid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:820px){.ugrid{grid-template-columns:repeat(4,1fr)}}
.fld{display:flex;flex-direction:column;gap:5px}
.fld span{font-size:12.5px;color:var(--muted)}
.fld input,.fld select{height:40px;border-radius:11px;background:var(--surface);
  border:1.5px solid transparent;padding:0 12px;font-size:14.5px;outline:none;width:100%}
.fld input:focus,.fld select:focus{border-color:var(--ink);background:var(--card)}
.rep--ed{border:1px solid var(--line);margin-top:18px}
.on{font-size:11px;font-weight:700;color:#1f7a4d;background:#e6f6ee;border-radius:999px;padding:2px 8px}
table td small{display:block;color:var(--muted);font-size:12px}

/* ---------- аналитика: одна сетка на все карточки ----------
   Жалоба была честная: цифры висели в воздухе. Теперь у каждой карточки
   рамка и одинаковые отступы, числа — табличными цифрами по одной линии,
   а карточки в ряду одной высоты. */
.rep{border:1px solid var(--line)}
.rep h3{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;
  border-bottom:1px solid var(--line);margin-bottom:14px}
.kpi{border:1px solid var(--line)}
.kpi b{font-variant-numeric:tabular-nums}
.kpi--big{display:flex;flex-direction:column;justify-content:space-between;min-height:96px}
.kpi--big b{font-size:27px;line-height:1.1}
.kpi--big span{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.two2{align-items:stretch}
.two2 > div{display:flex;flex-direction:column;gap:14px}
.two2 > div > .rep{margin-bottom:0}
.two2 > .rep{height:100%;display:flex;flex-direction:column}
.two2 > .rep .cv,.two2 > .rep .bars2{margin-top:auto}
.rt{font-variant-numeric:tabular-nums}
.rt td:not(:first-child),.rt th:not(:first-child){text-align:right}
.rt tr.tot td{font-weight:700;border-top:1px solid var(--line);background:var(--surface)}

/* ---------- мелочи разделов ---------- */
.pill{font-size:12.5px;font-weight:700;border-radius:999px;padding:6px 12px;background:var(--surface)}
.pill--ok{background:#e6f6ee;color:#1f7a4d}
.pill--bad{background:#fdecea;color:#a8362a}
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600;text-align:right}
.kv dd.good{color:#1f7a4d}
.kv dd.bad{color:#a8362a}
.steps{margin:0;padding-left:20px;font-size:13.5px;line-height:1.75;color:var(--muted)}
.steps b{color:var(--text)}
.navsep{width:1px;height:20px;background:var(--line);margin:0 6px;flex:none;align-self:center}
.lnk{display:inline-flex;align-items:center;height:32px;padding:0 11px;border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;text-decoration:none}
.lnk:hover{background:var(--surface);color:var(--text)}
.btn--auto{width:auto;padding:0 20px;height:40px}
/* «Ещё» — отдельные экраны: смена, курьеры, кухня, склад, деньги */
.more{position:relative;flex:none}
.more summary{list-style:none;cursor:pointer;height:32px;padding:0 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--muted)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"▾";font-size:11px}
.more[open] summary{background:var(--surface);color:var(--text)}
.more__m{position:absolute;top:38px;right:0;z-index:40;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:6px;min-width:190px;box-shadow:0 12px 30px rgba(0,0,0,.11);
  display:flex;flex-direction:column}
.more__m a{padding:9px 12px;border-radius:9px;font-size:14px;color:var(--text);text-decoration:none}
.more__m a:hover{background:var(--surface)}
.utbl td,.utbl th{text-align:left}
.utbl td:last-child,.utbl th:last-child{text-align:right}
.utbl code{font-size:13px;background:var(--surface);border-radius:6px;padding:2px 7px}
/* столбик не должен превращаться в плиту, когда значение одно */
.bars2{justify-content:flex-start;border-bottom:1px solid var(--line);padding-bottom:6px}
.bar2{max-width:64px}
.bar2 b{max-width:44px;margin:0 auto}
.sts{display:flex;flex-wrap:wrap;gap:8px}
.st2{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;font-size:13.5px;cursor:pointer}
.st2 input{width:17px;height:17px;accent-color:var(--ink)}
#ued{scroll-margin-top:124px}
.seg3__gear{width:34px;padding:0;font-size:15px}
.lnk{border:1px solid transparent}
.lnk:hover{border-color:var(--line)}

/* ---------- страница модуля ---------- */
.hub{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.hub{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.hub{grid-template-columns:repeat(3,1fr)}}
.hub__c{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  min-height:112px;position:relative;transition:transform .12s,border-color .15s}
.hub__c:hover{transform:translateY(-2px);border-color:var(--ink)}
.hub__c b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.hub__c span{font-size:13.5px;color:var(--muted);line-height:1.45;max-width:34ch}
.hub__c i{position:absolute;right:18px;top:18px;font-style:normal;font-size:16px;color:var(--muted)}
.hub__c:hover i{color:var(--text)}
/* мягкая смена разделов: короткое проявление вместо рывка */
#app.swap{animation:swapIn .18s cubic-bezier(.32,.72,0,1)}
@keyframes swapIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tabs2 button,.seg3 button{transition:background .16s ease,color .16s ease}
.hub{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important}
@media(prefers-reduced-motion:reduce){#app.swap{animation:none}}

/* соусы к собранной пицце: строкой-чипсами, цена рядом */
.gh2{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 8px}
.chips--sauce{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.chip3{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;
  background:var(--surface);border:1.5px solid transparent;font-size:13.5px;font-weight:600}
.chip3 i{font-style:normal;font-weight:600;color:var(--muted)}
.chip3.is-on{border-color:var(--ink);background:var(--card)}
.chip3.is-on i{color:var(--text)}

/* соус под начинку — списком: строка, фото, название, отметка */
.saucelist{display:flex;flex-direction:column;gap:6px}
.srow{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border-radius:14px;
  background:var(--surface);border:1.5px solid transparent;text-align:left}
.srow img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--card);mix-blend-mode:multiply}
.srow__n{flex:1;font-size:15px;font-weight:600}
.srow__p{font-size:13.5px;color:var(--muted)}
.srow__c{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);flex:none;
  position:relative}
.srow.is-on{border-color:var(--ink);background:var(--card)}
.srow.is-on .srow__c{background:var(--ink);border-color:var(--ink)}
.srow.is-on .srow__c::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* «Свернуть список» не должна липнуть к последней пицце */
.bld__hide{margin-top:12px}
/* счётчик на плитке добавки: сколько порций берём */
.add{position:relative}
.add__q{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:2px;
  background:var(--card);border-radius:999px;padding:2px;box-shadow:0 1px 4px rgba(0,0,0,.14)}
.add__q button{width:26px;height:26px;border-radius:50%;background:var(--surface);font-size:15px;
  font-weight:700;line-height:1}
.add__q b{min-width:18px;text-align:center;font-size:13.5px;font-variant-numeric:tabular-nums}

/* товар положили в корзину — она подпрыгивает, чтобы это было видно */
@keyframes cartHit{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.cartbtn.is-hit{animation:cartHit .38s ease}
@media(prefers-reduced-motion:reduce){.cartbtn.is-hit{animation:none}}

/* ---- главная плитка с макетом дизайнера ----
   Заголовок и фон нарисованы в самой картинке, от вёрстки остаётся только
   живая кнопка: её текст и переход мы меняем сами, без новой отрисовки. */
/* Пропорция макета закреплена: иначе на узких окнах плитка становится выше
   и уже картинки, а та обрезается по краям - у заголовка пропадали первые
   буквы. Высоту плитки теперь задаёт сама картинка. */
.promo--art{padding:0;overflow:hidden;aspect-ratio:1442/1100}
.promo--art .mark,.promo--art .promo__title,.promo--art .promo__tags,.promo--art .promo__pie{display:none}
.promo__art{position:absolute;inset:0;display:block}
.promo__art img{width:100%;height:100%;object-fit:cover;display:block}
.promo--art .promo__foot{position:absolute;left:26px;bottom:26px;min-height:0;z-index:1}
/* На компьютере правая колонка (сет плюс кэшбек) чуть выше главной плашки,
   и кэшбек выпирал вниз. Пусть главная тянется до их высоты: рисунок на ней
   и так обрезается по месту. */
@media(min-width:860px){.promo--main.promo--art{min-height:0;grid-row:span 2;
  aspect-ratio:auto;height:100%}}
@media(max-width:859px){
  .promo--art{aspect-ratio:3/4}
  .promo--art .promo__foot{left:20px;bottom:20px}
}

/* ---- бегущая строка со штампами ----
   На телефоне идёт над линией сгиба пирога, там где крышка открывает начинку.
   На компьютере линия сгиба занята заголовком, поэтому лента живёт слева на
   красном поле над кнопкой и гаснет, не доезжая до пиццы. Лента
   склеена из двух одинаковых групп и сдвигается ровно на половину: на стыке
   не видно, что она началась заново. */
.promo__run{position:absolute;overflow:hidden;z-index:1;
  left:26px;right:48%;bottom:86px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
/* Отступ между группами убран в саму группу: тогда ширина ленты ровно вдвое
   больше группы, сдвиг на -50% совпадает пиксель в пиксель и на стыке нет
   рывка. Слой поднимаем на видеокарту, иначе в мобильных браузерах лента
   перерисовывается и мигает. */
.run__in{display:flex;width:max-content;animation:runline 10.2s linear infinite;
  will-change:transform;backface-visibility:hidden}
.run__g{display:flex;gap:10px;padding-right:10px}
.promo__run span span{font-size:13px;font-weight:700;letter-spacing:.01em;color:#C42B12;
  border:2px solid rgba(196,43,18,.34);border-radius:999px;padding:6px 14px;
  background:var(--cream);white-space:nowrap;line-height:1.15}
@keyframes runline{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.promo--main:hover .run__in{animation-play-state:paused}
/* Отдельная строка между главной плиткой и сетом: на телефоне лента живёт
   там, а не на самой пицце. На компьютере такого промежутка нет, плитки
   стоят рядом, поэтому там лента остаётся на красном поле над кнопкой. */
.promo__run--band{display:none}
@media(max-width:859px){
  .promo--art .promo__run{display:none}
  .promo__run--band{display:block;position:static;padding:3px 0}
  .promo__run span span{font-size:11.5px;padding:5px 11px;border-width:1.5px}
}
@media(prefers-reduced-motion:reduce){.run__in{animation:none}}

/* ---- кот с бонусами в плитке кэшбека ----
   Кот ловит падающие бонусы: монетки сыплются сверху ему в лапы и тают,
   сам он подпрыгивает от радости. */
.bonus{position:absolute;inset:0;pointer-events:none}
/* Низ картинки - это тень-пол под котом. Ставим его на ту же линию, что и
   нижний край кнопки «Всё промо»: кнопка стоит на поле плитки, кот рядом. */
.bonus__cat{position:absolute;right:var(--cat-r);bottom:26px;height:var(--cat-h);width:auto;
  transform-origin:50% 100%;animation:bonusCat 1.5s cubic-bezier(.3,.05,.4,1) infinite}
.promo--b{--cat-h:200px;--cat-r:34px}
/* Тень мягкая и тёплая, как была у кота на главной плитке. В самой картинке
   её рисовали сплошным красным овалом - он спорил с котом, овал стёрт.
   Когда кот подпрыгивает, тень сжимается и бледнеет. */
.bonus__shadow{position:absolute;bottom:21px;height:calc(var(--cat-h) * .06);
  width:calc(var(--cat-h) * .38);right:calc(var(--cat-r) + var(--cat-h) * .16);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(120,60,0,.42),rgba(120,60,0,0) 72%);
  animation:bonusShadow 1.5s cubic-bezier(.3,.05,.4,1) infinite}
@keyframes bonusShadow{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(.7);opacity:.45}
  76%{transform:scale(1.04);opacity:.95}
}
.bonus__coin{position:absolute;top:10px;right:calc(var(--cat-r) + var(--cat-h) * .12);display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;font-size:14px;font-weight:800;color:#8a5a00;
  background:radial-gradient(circle at 34% 30%,#ffe07a,#ffc61a 62%,#e0a100);
  box-shadow:0 2px 0 rgba(140,90,0,.35);opacity:0;
  animation:bonusFall 2.4s ease-in infinite}
.bonus__coin--2{right:calc(var(--cat-r) + var(--cat-h) * .56);width:22px;height:22px;font-size:12px;animation-delay:.8s}
.bonus__coin--3{right:calc(var(--cat-r) + var(--cat-h) * .34);width:18px;height:18px;font-size:10px;animation-delay:1.6s}
@keyframes bonusCat{
  0%,100%{transform:translateY(0) scaleY(1)}
  20%{transform:translateY(2px) scaleY(.96)}
  50%{transform:translateY(-10px) scaleY(1.03)}
  76%{transform:translateY(0) scaleY(.99)}
}
@keyframes bonusFall{
  0%{opacity:0;transform:translateY(-26px) scale(.7) rotate(-18deg)}
  22%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
  70%{opacity:1;transform:translateY(34px) scale(1) rotate(16deg)}
  100%{opacity:0;transform:translateY(52px) scale(.85) rotate(26deg)}
}
@media(min-width:860px){.promo--b h2{font-size:clamp(24px,2.1vw,29px)}}
/* компьютер: плитке кэшбека чуть больше высоты за счёт сета, чтобы крупный
   кот помещался целиком вместе с прыжком */
@media(min-width:1280px){
  .promo--b{min-height:252px}
  .promo--b h2{font-size:26px}
  /* высоту для кота отдал сет: его заголовок встаёт в одну строку */
  .promo--a h2{font-size:30px;white-space:nowrap}
  .promo--a .promo__txt{max-width:62%}
  .promo--a .promo__txt p{max-width:205px}
  .promo--b p{max-width:54%}
}
@media(min-width:860px) and (max-width:1279px){
  .promo--b{--cat-h:158px;--cat-r:16px}
  .promo--b p{max-width:54%}
}
@media(min-width:560px) and (max-width:859px){
  .promo--b{--cat-h:180px;--cat-r:60px}
}
@media(max-width:559px){
  .promo--b{--cat-h:176px;--cat-r:30px}
  .promo--b h2,.promo--b p{max-width:52%}
}
@media(prefers-reduced-motion:reduce){
  .bonus__cat,.bonus__shadow{animation:none}
  .bonus__coin{animation:none;opacity:1}
}

/* ---- плитка «Пицца-сет» на макете дизайнера ----
   Название и пиццы нарисованы в самой картинке, она занимает левую часть
   плитки. Справа текстом остаётся то, чего в картинке нет: цена, условие
   про самовывоз и кнопка. Поверх рисунка ничего не лежит. */
/* Текст стоит на свободном красном поле слева внизу: надпись нарисована
   выше, пиццы лежат справа. Плашка держит пропорции самой картинки, поэтому
   рисунок не обрезается, а строки внизу набраны компактно, чтобы уместиться
   под надписью. */
.promo--art2{padding:0;overflow:hidden;aspect-ratio:1442/1020;min-height:200px}
.promo--art2 .promo__k,.promo--art2 h2,.promo--art2 .promo__shot{display:none}
.promo--art2 .promo__art img{object-position:left center}
/* Подложка идёт во всю ширину плашки, иначе её край виден прямоугольником
   поверх пиццы. Текст при этом занимает только левую часть. */
.promo--art2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(to top, rgba(110,8,4,.8), rgba(110,8,4,.45) 55%, rgba(110,8,4,0));
  pointer-events:none}
.promo--art2 .promo__txt{position:absolute;left:0;bottom:0;z-index:2;max-width:76%;
  min-height:0;padding:16px 16px 12px;justify-content:flex-end;gap:0}
/* у соседней плашки текст ограничен 205 пикселями, здесь ширину держит сам блок */
.promo--art2 .promo__txt p{max-width:none}
.promo--art2 .promo__price{color:#fff;font-size:15px;line-height:1.25;margin:0 0 9px;
  text-shadow:0 1px 8px rgba(80,5,2,.65)}
.promo--art2 .promo__price b{color:#fff;font-size:19px}
.promo--art2 .promo__price span{display:block;margin-top:4px;font-size:11.5px;line-height:1.25;
  color:rgba(255,255,255,.96)}
.promo--art2 .promo__cta{margin:0;align-self:flex-start;height:34px;padding:0 16px;
  font-size:12.5px}
@media(max-width:859px){
  .promo--art2{aspect-ratio:860/645}
  /* на телефоне строку про самовывоз переносим, чтобы хвост не лез на пиццу */
  .promo--art2 .promo__txt{max-width:66%;padding:14px 14px 11px}
  .promo--art2 .promo__price{font-size:13.5px;margin-bottom:8px}
  .promo--art2 .promo__price b{font-size:16px}
  .promo--art2 .promo__price span{font-size:10.5px}
}
@media(max-width:430px){
  .promo--art2{aspect-ratio:.98}
  .promo--art2 .promo__txt{max-width:58%;padding:0 12px 10px}
  .promo--art2 .promo__price{font-size:11.5px;margin-bottom:6px}
  .promo--art2 .promo__price b{font-size:13px}
  .promo--art2 .promo__price span{font-size:9px}
  .promo--art2 .promo__cta{height:31px;padding:0 13px;font-size:11.5px}
}
@media(max-width:345px){
  .promo--art2{aspect-ratio:.88}
}

/* ---- табличка «сейчас закрыто» в корзине ----
   Ставится над полями, чтобы человек увидел часы до того, как заполнит
   всё и упрётся в отказ на последнем шаге. */
.closed{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:14px 16px;margin:0 0 14px;border-radius:var(--rs);
  background:var(--cream);color:var(--ink)}
.closed b{font-size:15px}
.closed p{margin:0;font-size:13.5px;line-height:1.4;color:#5b5247;max-width:46ch}
.closed .btn{margin:2px 0 0}
.btn--sm{height:38px;padding:0 16px;font-size:13.5px}

/* ---- оценка в шапке ----
   Одна звёздочка с цифрой читалась как значок, а не как рейтинг. Пять звёзд
   с закрашенной долей понятны без подписи, цифра и слово «отзывов» рядом. */
.stars{position:relative;display:inline-block;width:72px;height:13px;flex:0 0 auto;
  /* пустая часть звёзд серая, а не прозрачная: прозрачность на родителе
     погасила бы и золотую заливку внутри */
  background:rgba(17,17,16,.2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='13' viewBox='0 0 72 13'%3E%3Cg fill='%23000'%3E%3Cpath d='M6.5 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6L1.3 4.8l3.6-.5z'/%3E%3Cpath d='M21.1 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3Cpath d='M35.7 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3Cpath d='M50.3 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3Cpath d='M64.9 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='13' viewBox='0 0 72 13'%3E%3Cg fill='%23000'%3E%3Cpath d='M6.5 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6L1.3 4.8l3.6-.5z'/%3E%3Cpath d='M21.1 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3Cpath d='M35.7 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3Cpath d='M50.3 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3Cpath d='M64.9 1l1.6 3.3 3.6.5-2.6 2.5.6 3.6-3.2-1.7-3.2 1.7.6-3.6-2.6-2.5 3.6-.5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat}
.stars i{position:absolute;inset:0;background:#f5a623;opacity:1;display:block}
.head__rate{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit}
.head__rate b{font-weight:700}
.head__rate span{color:var(--muted);font-size:12.5px}
.head__rev2{display:none}
/* на телефоне длинная подпись не влезает, но слово «2ГИС» оставляем:
   без него пять звёзд читаются как наша собственная самооценка */
@media(max-width:700px){
  .head__rev{display:none} .head__rev2{display:inline} .stars{width:62px}
}