/* TOK burger — виджет меню. Все стили внутри .tok-menu; цвета меняются переменными. */
.tok-menu {
  --tok-accent: #f66001;          /* оранжевый из фирменного меню */
  --tok-accent-ink: #ffffff;
  --tok-text: #1c1a18;
  --tok-muted: #6b655f;
  --tok-line: #ebe5de;
  --tok-surface: #ffffff;
  --tok-page: #faf7f3;
  --tok-danger: #c62828;
  --tok-radius: 18px;
  --tok-sticky-top: 0px;          /* высота шапки сайта, если она закреплена */
  color: var(--tok-text);
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}
.tok-menu *, .tok-menu *::before, .tok-menu *::after { box-sizing: border-box; }

/* Категории */
.tok-menu__tabs {
  position: sticky; top: var(--tok-sticky-top); z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 -16px; padding: 10px 16px; background: var(--tok-page);
  scrollbar-width: none;
}
.tok-menu__tabs::-webkit-scrollbar { display: none; }
.tok-menu__tab {
  flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 18px; border-radius: 999px; border: 1px solid var(--tok-line);
  background: var(--tok-surface); color: var(--tok-text); text-decoration: none;
  font-weight: 700; font-size: 15px; white-space: nowrap;
}
.tok-menu__tab[aria-current="true"] { background: var(--tok-accent); border-color: var(--tok-accent); color: var(--tok-accent-ink); }
.tok-menu__tab:focus-visible { outline: 3px solid var(--tok-accent); outline-offset: 2px; }
.tok-menu__count { font-weight: 600; opacity: .65; font-size: 13px; }

.tok-menu__section { scroll-margin-top: calc(var(--tok-sticky-top) + 72px); }
.tok-menu__h { font-size: clamp(22px, 5vw, 30px); line-height: 1.15; margin: 22px 0 12px; font-weight: 800; letter-spacing: -.01em; }

/* Карточки */
.tok-menu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .tok-menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 960px) { .tok-menu__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tok-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--tok-surface); border: 1px solid var(--tok-line); border-radius: var(--tok-radius); overflow: hidden;
}
/* Кнопка — название позиции; её ::after растянут на всю карточку, поэтому кликабельна вся карточка */
.tok-card__hit {
  appearance: none; border: 0; margin: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; line-height: inherit;
}
.tok-card__hit::after { content: ""; position: absolute; inset: 0; border-radius: var(--tok-radius); }
.tok-card__hit:focus { outline: none; }
.tok-card__hit:focus-visible::after { outline: 3px solid var(--tok-accent); outline-offset: -3px; }
.tok-card:hover { border-color: #dcd3c9; }
.tok-card__img { aspect-ratio: 1 / 1; background: var(--img-bg, #fff); display: block; }
.tok-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tok-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.tok-card__line { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--tok-accent); text-transform: uppercase; overflow-wrap: anywhere; }
.tok-card__name { font-size: 15px; line-height: 1.25; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.tok-card__desc { font-size: 13px; color: var(--tok-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tok-card__meta { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tok-card__weight { font-size: 12px; color: var(--tok-muted); }
.tok-card__price { font-weight: 800; font-size: 16px; white-space: nowrap; }
.tok-card__price--na { font-weight: 600; font-size: 12px; color: var(--tok-muted); white-space: normal; }
.tok-card--hidden { opacity: .55; }
.tok-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #fff0e6; color: #a34000; }
.tok-badge--bad { background: #fdecea; color: var(--tok-danger); }
.tok-badge--ok { background: #e8f5e9; color: #1b5e20; }

/* Режим проверки (QA) */
.tok-qa { border-top: 1px dashed var(--tok-line); padding: 8px 12px 10px; font-size: 12px; display: grid; gap: 4px; background: #fcfbf9; }
.tok-qa__prices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.tok-qa__prices span { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 6px; min-width: 0; }
.tok-qa__prices b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tok-qa .tok-badge { margin: 2px 0; }
.tok-card--conflict { border-color: var(--tok-danger); box-shadow: 0 0 0 1px var(--tok-danger) inset; }

/* Окно позиции */
.tok-modal {
  border: 0; padding: 0; border-radius: 22px; width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); background: var(--tok-surface); color: var(--tok-text); overflow: hidden;
}
.tok-modal::backdrop { background: rgba(20, 16, 12, .55); }
@media (max-width: 560px) {
  .tok-modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92dvh; }
}
.tok-modal__scroll { overflow-y: auto; max-height: inherit; overscroll-behavior: contain; }
.tok-modal__img { position: relative; background: var(--img-bg, #fff); }
.tok-modal__img img { width: 100%; height: auto; max-height: min(56vh, 520px); object-fit: contain; display: block; margin: 0 auto; }
.tok-modal__close {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .94); box-shadow: 0 1px 6px rgba(0, 0, 0, .15); font-size: 24px; line-height: 1; cursor: pointer; color: var(--tok-text);
}
.tok-modal__close:focus-visible { outline: 3px solid var(--tok-accent); }
.tok-modal__body { padding: 16px 18px 22px; display: grid; gap: 12px; }
.tok-modal__title { font-size: 22px; line-height: 1.2; font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.tok-modal__sub { color: var(--tok-muted); font-size: 14px; margin: 0; }
.tok-modal__desc { margin: 0; font-size: 15px; }
.tok-nutri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tok-nutri div { background: var(--tok-page); border-radius: 12px; padding: 8px 6px; text-align: center; min-width: 0; }
.tok-nutri b { display: block; font-size: 16px; }
.tok-nutri small { display: block; font-size: 10px; color: var(--tok-muted); overflow-wrap: anywhere; }
.tok-nutri__note { font-size: 12px; color: var(--tok-muted); margin: -4px 0 0; }
.tok-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.tok-group legend { font-weight: 800; font-size: 15px; padding: 0; margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tok-group legend small { font-weight: 600; color: var(--tok-muted); font-size: 12px; }
.tok-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--tok-line); cursor: pointer; }
.tok-opt input { width: 20px; height: 20px; accent-color: var(--tok-accent); flex: 0 0 auto; margin: 0; }
.tok-opt__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tok-opt em { font-style: normal; color: var(--tok-muted); white-space: nowrap; }
.tok-opt--off { opacity: .45; cursor: not-allowed; }
.tok-modal__foot { display: grid; gap: 8px; position: sticky; bottom: 0; background: var(--tok-surface); padding-top: 8px; }
.tok-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 18px; }
.tok-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px;
  border-radius: 14px; border: 0; background: var(--tok-accent); color: var(--tok-accent-ink); font: inherit; font-weight: 800; font-size: 16px;
  text-decoration: none; cursor: pointer; width: 100%;
}
.tok-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.tok-btn:focus-visible { outline: 3px solid var(--tok-text); outline-offset: 2px; }
.tok-hint { font-size: 12px; color: var(--tok-muted); margin: 0; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .tok-menu * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}