/* EMX-18 M5 F2 - Telegram-only adjustments; the ordinary web view is untouched (rules apply under html.tg only).
 * In fullscreen Telegram overlays its controls: the whole page starts below device + content safe area and the sticky
 * nav sticks at the same line (no gap under the promo strip). In the usual mode both insets are 0 = the web layout. */
html.tg { --emx-tg-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
html.tg .nav { top: var(--emx-tg-top); }
html.tg body {
  padding-top: var(--emx-tg-top);
  padding-left: var(--tg-safe-area-inset-left, 0px);
  padding-right: var(--tg-safe-area-inset-right, 0px);
  min-height: var(--tg-viewport-stable-height, 100vh);
}
html.tg .mbar { padding-bottom: calc(12px + var(--tg-safe-area-inset-bottom, 0px)); }
html.tg .cookie { bottom: calc(16px + var(--tg-safe-area-inset-bottom, 0px)); }
html.tg a, html.tg button { -webkit-tap-highlight-color: transparent; }
/* P0 2026-10-18 (Owner: "the button slides off" on a smaller phone): the landing's .btn is nowrap, so a long CTA
 * ("Сообщить, когда появится вкус", 371px) widened the page to ~388px on 320-375px screens and dragged the fixed
 * price bar's "Купить" past the edge. Narrow screens only: CTAs wrap inside the screen; the bar keeps one line. */
@media (max-width: 430px) {
  html body .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; }
  html body .mbar > :first-child { min-width: 0; }
  html body .mbar .btn { white-space: nowrap; flex: 0 0 auto; }
  html body code { overflow-wrap: anywhere; word-break: break-word; }
  html body .grid2 > *, html body .paper > *, html body .paper > * > *, html body .doc > * { min-width: 0; }
  /* the edge-to-edge rails (flavors, years) bleed ~15px past the page on purpose; clip (not hidden) keeps the sticky
     nav working and never creates a second scroll box - the rails still scroll inside themselves */
  html, html body { overflow-x: clip; }
}
/* (html body = wins over the landing's own <style> blocks, which load after this file)
 * 320-360px: the 14-char counter (min 36px, nowrap) plus 28px padding was ~350px wide */
@media (max-width: 360px) {
  html body .counter { padding: 20px 16px; }
  html body .counter__value { font-size: clamp(26px, 8.6vw, 36px); }
  /* the certificate card (.paper: 96px image | 134px text) squeezed "госрегистрации" (168px) past its border:
     stack the image over the text and let long words break */
  html body .paper { grid-template-columns: 1fr; }
  html body .paper__img { max-width: 140px; }
  html body .paper__t, html body .paper__t * { overflow-wrap: anywhere; hyphens: auto; }
}
/* F5 in-app sheet (tg-panel.js) - landing tokens only: --forest, --brand, --card, --ink, --line, --r-m, --f-body */
.emx-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 78vh; display: flex; flex-direction: column;
  background: var(--card, #fff); color: var(--ink, #14241D); border-top: 1px solid var(--line, #D6DED6);
  border-radius: var(--r-m, 18px) var(--r-m, 18px) 0 0; box-shadow: 0 -20px 40px -20px rgba(14,59,43,.45);
  padding-bottom: var(--tg-safe-area-inset-bottom, 0px); transform: translateY(105%); transition: transform .3s ease;
  font-family: var(--f-body, system-ui, sans-serif); }
.emx-sheet.is-open { transform: none; }
.emx-sheet__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line, #D6DED6); }
.emx-sheet__link, .emx-sheet__close { background: none; border: 0; font: inherit; color: var(--forest, #0E3B2B); min-height: 44px; min-width: 44px; cursor: pointer; }
.emx-sheet__link { font-weight: 600; text-decoration: underline; }
.emx-sheet__close { font-size: 26px; line-height: 1; }
.emx-sheet__body { overflow-y: auto; padding: 12px 16px 16px; }
.emx-msg { margin: 0 0 14px; }
.emx-msg__text { margin: 0 0 10px; white-space: pre-line; line-height: 1.5; }
.emx-msg__note { margin: 0 0 10px; color: var(--ink-2, #4A5A52); }
.emx-btn { display: block; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; border: 0;
  background: var(--brand, #21AA57); color: #fff; font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.emx-btn--link { background: var(--forest, #0E3B2B); }