/* 1rem = 1 пиксель макета (макет 720px шириной). На узких экранах всё масштабируется пропорционально. */
html { font-size: calc(min(100vw, 720px) / 720); background: var(--yellow); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; min-height: 100vh; color: #231F20; font-family: "CyGrotesk", Arial, sans-serif; font-weight: 500; }
* { box-sizing: border-box; }
img { display: block; }

@font-face { font-family: "TTTrailers"; src: url(fonts/TTTrailers-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "TTTrailers"; src: url(fonts/TTTrailers-Black.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "CyGrotesk"; src: url(fonts/CyGroteskKey-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "CyGrotesk"; src: url(fonts/CyGroteskKey-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "CyGrotesk"; src: url(fonts/CyGroteskKey-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "RocGrotesk"; src: url(fonts/RocGrotesk-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "RocGrotesk"; src: url(fonts/RocGrotesk-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "RocGrotesk"; src: url(fonts/RocGrotesk-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "RocGrotesk"; src: url(fonts/RocGrotesk-Black.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "RocGroteskCond"; src: url(fonts/RocGrotesk-CondensedBold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root { --black: #231F20; --red: #F15B48; --purple: #BB6BFF; --yellow: #FFD800; --gray: #9a9a9a; }

.page { width: 720rem; margin: 0 auto; position: relative; }
.page img { max-width: 100%; }
.view > img { display: block; width: 720rem; height: auto; }
body { overflow-x: hidden; }

/* Шапка — закреплена, звонит */
.head { display: block; position: sticky; top: 0; z-index: 20; background: var(--yellow); }
.head img { width: 720rem; height: auto; }
.head-call { display: block; }
.head-home { position: absolute; left: 0; top: 0; width: 232rem; height: 100%; }
.backlink { display: block; position: relative; z-index: 2; padding: 24rem 40rem 0; font: 700 24rem/30rem "CyGrotesk", Arial, sans-serif; color: var(--purple); text-decoration: underline; text-underline-offset: 3rem; }
.cart-head { margin-top: 40rem !important; }
.cart-head h1 { pointer-events: none; }
.f.pre2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20rem; }
.f.pre2 .hint { grid-column: 1 / -1; }

.map { position: relative; width: 720rem; height: 443rem; overflow: hidden; }
.map-frame { position: absolute; left: 20rem; top: 10rem; width: 680rem; height: 424rem; border: 0; display: block; }
.map-overlay { position: absolute; left: 0; top: 0; width: 720rem; height: 443rem; pointer-events: none; }
.map-open { position: absolute; left: 508rem; top: 264rem; width: 212rem; height: 179rem; }

/* ---------- Раздел меню ---------- */
.section { position: relative; padding-top: 50rem; }
.section-head { position: relative; height: 130rem; }
.section-head .emoji { position: absolute; left: 20rem; top: -6rem; width: 119rem; height: auto; }
.section-head .emoji.fire { left: 33rem; top: -13rem; width: 99rem; }
.section-head .emoji.sheep_big { left: 9rem; width: 125rem; } .section-head .emoji.hotdog_big { width: 120rem; } .section-head .emoji.leaf_big { left: 14rem; width: 127rem; }
.section-head .emoji2 { position: absolute; left: 142rem; top: -11rem; width: 126rem; height: auto; }
.section-head h2 { position: absolute; left: 163rem; top: -20rem; margin: 0; font: 800 126.4rem/1 "TTTrailers", Impact, sans-serif; letter-spacing: 0; white-space: nowrap; }
.section-head.wide h2 { left: 290rem; }

.item { position: relative; padding: 0 0 0 61rem; margin-bottom: 35rem; min-height: 120rem; }
.item .num { position: absolute; left: 20rem; top: 2rem; width: 25rem; height: 62rem; font: 700 36rem/25rem "RocGroteskCond", "RocGrotesk", Arial, sans-serif; color: var(--red);
  writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); text-align: right; letter-spacing: -0.5rem; }
.item::after { content: ""; display: block; clear: both; }
.item .name { font-size: 40rem; line-height: 37.5rem; font-weight: 500; letter-spacing: -0.2rem; padding-top: 0; }
.item .name .latin { font: 800 50rem/37.5rem "TTTrailers", Impact, sans-serif; margin-right: 8rem; }
.item .name .ico { display: inline-block; width: 45rem; height: 45rem; vertical-align: -8rem; margin: 0 6rem 0 -1rem; }
.item .name .inl { display: inline-block; width: 39rem; height: 39rem; vertical-align: -6rem; margin: 0 8rem 0 4rem; }
.item .buy { position: relative; float: right; width: 175rem; height: 118rem; margin: -8rem 0 8rem 0; overflow: visible; }
.item .price { position: absolute; right: 30rem; top: 0; font: 900 50rem/42rem "RocGrotesk", Arial, sans-serif; color: var(--red); letter-spacing: -0.5rem; white-space: nowrap; }
.item .weight { position: absolute; right: 15rem; top: 0; height: 40rem; font-size: 13rem; line-height: 12rem; writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); white-space: nowrap; overflow: visible; }
.item .comp { font-size: 20rem; line-height: 24rem; margin-top: 6rem; letter-spacing: -0.1rem; padding-right: 30rem; }

/* Кнопка «Купить» — 151×77, касается запятой цены сверху, 24rem от правого края макета */
.btn { position: absolute; right: 24rem; top: 41rem; width: 151rem; height: 77rem; border: 0; border-radius: 39rem; padding: 0; cursor: pointer;
  background: var(--yellow); color: var(--purple); font: 800 50rem/77rem "TTTrailers", Impact, sans-serif; -webkit-tap-highlight-color: transparent; }
.btn.in-cart { background: var(--purple); color: #fff; font: 700 20rem/20rem "CyGrotesk", Arial, sans-serif; text-decoration: underline; text-underline-offset: 3rem; }
.btn:active { transform: scale(.97); }

/* ---------- Прайс (закуски, напитки, соусы, десерты) ---------- */
.price-list { padding: 30rem 0 20rem; }
.price-list table { width: 100%; border-collapse: collapse; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 20rem; }
.price-list th { text-align: left; font: 700 24rem/44rem Helvetica, Arial, sans-serif; padding: 0 10rem; background: #f3f3f3; }
.price-list td { border-bottom: 1rem solid #e5e5e5; height: 46rem; padding: 0 10rem; vertical-align: middle; }
.price-list td.n { font-weight: 400; }
.price-list td.p { text-align: right; width: 90rem; white-space: nowrap; }
.price-list td.w { width: 90rem; background: #fff7d6; font-weight: 400; color: #444; }
.price-list td.b { width: 150rem; text-align: center; }
.btn-sm { display: inline-block; border: 0; border-radius: 18rem; height: 36rem; padding: 0 22rem; cursor: pointer; vertical-align: middle;
  background: var(--yellow); color: var(--purple); font: 800 26rem/36rem "TTTrailers", Impact, sans-serif; -webkit-tap-highlight-color: transparent; }
.btn-sm.in-cart { background: none; color: var(--purple); font: 700 16rem/16rem "CyGrotesk", Arial, sans-serif; text-decoration: underline; text-underline-offset: 2rem; height: auto; padding: 0; }

/* ---------- Нижняя плашка «Оформить заказ» ---------- */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; background: var(--purple); padding-bottom: env(safe-area-inset-bottom); }
.cartbar.show { display: block; }
.cartbar .in { width: 720rem; margin: 0 auto; height: 110rem; background: var(--purple); color: #fff; text-align: center; border: 0; cursor: pointer; display: block; padding: 0; position: relative; }
.cartbar .in .t { display: block; font: 500 62rem/110rem "CyGrotesk", Arial, sans-serif; text-decoration: underline; text-underline-offset: 6rem; text-decoration-thickness: 3rem; padding-top: 10rem; line-height: 90rem; }
.cartbar .in .sum { position: absolute; left: 0; right: 0; top: 4rem; font: 700 20rem/20rem Helvetica, Arial, sans-serif; color: var(--black); }
body.has-cart .page { padding-bottom: calc(110rem + env(safe-area-inset-bottom)); }

/* ---------- Корзина ---------- */
.view { display: none; }
.view.active { display: block; }
.cart-head { position: relative; height: 140rem; margin-top: 50rem; }
.cart-head .emoji { position: absolute; left: 33rem; top: -22rem; width: 99rem; }
.cart-head h1 { position: absolute; left: 163rem; top: -34rem; margin: 0; font: 800 126.4rem/1 "TTTrailers", Impact, sans-serif; white-space: nowrap; }
.cart-head.ok .emoji { left: 100rem; top: -16rem; width: 110rem; }
.cart-head.ok h1 { left: 250rem; line-height: 110rem; top: -20rem; }

.lines { margin: 0 40rem; border-top: 3rem solid #e6e6e6; }
.line { display: grid; grid-template-columns: 1fr 150rem 120rem; align-items: center; min-height: 70rem; padding: 10rem 0; border-bottom: 3rem solid #e6e6e6; }
.line .nm { font: 700 20rem/24rem "CyGrotesk", Arial, sans-serif; }
.line .qty { display: flex; align-items: center; justify-content: center; gap: 24rem; font: 700 34rem/40rem Helvetica, Arial, sans-serif; }
.line .qty button { background: none; border: 0; font: 700 34rem/40rem Helvetica, Arial, sans-serif; color: var(--black); width: 40rem; cursor: pointer; padding: 0; }
.line .sum { text-align: right; font: 700 30rem/40rem Helvetica, Arial, sans-serif; }
.line.fee .nm { font-weight: 400; }
.total { display: flex; justify-content: flex-end; align-items: baseline; gap: 40rem; margin: 20rem 40rem 20rem; }
.total .l { font: 700 22rem/44rem Helvetica, Arial, sans-serif; }
.total .v { font: 700 44rem/44rem Helvetica, Arial, sans-serif; }

.bar { height: 20rem; background: var(--yellow); color: #fff; text-align: center; font: 500 20rem/20rem "CyGrotesk", Arial, sans-serif; margin: 10rem 0 30rem; }

.form { padding: 0 40rem; }
.f { margin-bottom: 26rem; }
.f label, .f .lbl { display: block; font: 700 30rem/34rem "CyGrotesk", Arial, sans-serif; margin-bottom: 8rem; }
.f select { width: 100%; height: 62rem; border: 4rem solid var(--yellow); border-radius: 6rem; padding: 0 12rem; font: 500 28rem/54rem "CyGrotesk", Arial, sans-serif; color: var(--black); background: #fff; outline: none; -webkit-appearance: none; appearance: none; }
.f select.err { border-color: var(--red); }
.f input, .f textarea { width: 100%; height: 62rem; border: 4rem solid var(--yellow); border-radius: 6rem; padding: 0 16rem; font: 500 28rem/54rem "CyGrotesk", Arial, sans-serif; color: var(--black); background: #fff; outline: none; }
.f input:focus, .f textarea:focus { border-color: var(--purple); }
.f input.err { border-color: var(--red); }
.f textarea { height: 62rem; resize: none; line-height: 30rem; padding-top: 10rem; }
.f .hint { font: 400 20rem/24rem "CyGrotesk", Arial, sans-serif; color: var(--gray); margin-top: 8rem; }
.f .hint a { color: var(--purple); }
.f.phone { display: grid; grid-template-columns: 90rem 1fr 190rem; column-gap: 12rem; align-items: center; }
.f.phone label { grid-column: 1 / -1; }
.f.phone .code { text-align: center; padding: 0; }
.f.phone .hint { margin: 0; font-size: 18rem; line-height: 20rem; }
.f.street { display: grid; grid-template-columns: 1fr 140rem; column-gap: 26rem; }
.f.street .hint { grid-column: 1 / -1; }
.f.flat { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 20rem; }
.f.flat label { font-size: 30rem; }

.pills { display: flex; flex-wrap: wrap; gap: 14rem 10rem; padding: 0 34rem; margin-bottom: 34rem; }
.pill { height: 70rem; border-radius: 35rem; border: 4rem solid var(--purple); background: #fff; color: var(--purple); padding: 0 22rem; cursor: pointer;
  font: 700 28rem/62rem "CyGrotesk", Arial, sans-serif; -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.pill.on { background: var(--purple); color: #fff; }
.pill.small { font-size: 20rem; line-height: 20rem; padding: 10rem 22rem; }
.pretime { padding: 0 40rem 20rem; display: none; }
.pretime.show { display: grid; }

.submit { display: block; width: 660rem; height: 100rem; margin: 20rem auto 30rem; border: 0; border-radius: 50rem; background: var(--purple); color: #fff; cursor: pointer;
  font: 500 62rem/100rem "CyGrotesk", Arial, sans-serif; }
.submit[disabled] { opacity: .5; cursor: default; }
.consent { display: grid; grid-template-columns: 30rem 1fr; column-gap: 12rem; padding: 0 60rem 40rem; font: 400 16rem/20rem "CyGrotesk", Arial, sans-serif; color: var(--gray); }
.consent input { width: 26rem; height: 26rem; margin: 0; accent-color: #2ecc40; }
.consent a { color: var(--gray); }
.msg { padding: 0 40rem 30rem; font: 500 24rem/30rem "CyGrotesk", Arial, sans-serif; color: var(--red); display: none; }
.msg.show { display: block; }

.done-text { text-align: center; padding: 260rem 40rem 300rem; font: 500 24rem/30rem "CyGrotesk", Arial, sans-serif; }
.done-text a { color: var(--black); }
.backbar { display: block; width: 720rem; height: 110rem; box-sizing: content-box; padding-bottom: env(safe-area-inset-bottom); background: var(--purple); color: #fff; text-align: center; border: 0; cursor: pointer; letter-spacing: -1rem;
  font: 500 54rem/110rem "CyGrotesk", Arial, sans-serif; text-decoration: underline; text-underline-offset: 6rem; text-decoration-thickness: 3rem; }