/* ==========================================================================
   МЭРИ КВИЗ — «Рождество в августе»
   Язык дизайна взят с самой обложки: толстый чернильный контур,
   жёсткая смещённая тень (стикер/постер), округлый жирный шрифт,
   плотный цвет без градиентной каши.
   ========================================================================== */

@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/rubik-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-007F;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/rubik-currency.woff2') format('woff2');
  unicode-range: U+20AC, U+20BD, U+2116;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/nunito-currency.woff2') format('woff2');
  unicode-range: U+20AC, U+20BD, U+2116;
}

:root {
  /* фирменные цвета */
  --red:       #E1251B;
  --red-deep:  #A81009;
  --green:     #2FA023;
  --green-deep:#1D6B15;
  --yellow:    #FFC629;
  --yellow-deep:#C98D00;
  --blue:      #1F86C9;

  /* нейтральные */
  --ink:       #16120C;   /* тёплый почти-чёрный: контуры и тени */
  --ink-soft:  #5C5347;
  --paper:     #FFFFFF;
  --cream:     #FFF9EC;
  --sand:      #FFEFD0;

  /* семантика */
  --bg:        var(--cream);
  --text:      var(--ink);
  --text-muted:var(--ink-soft);

  /* стикер */
  --edge:      3px;
  --lift:      5px;
  --lift-sm:   3px;
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;

  --wrap: 680px;

  --t-fast: 140ms;
  --t-base: 220ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  /* мягкая «песочная» подложка вместо радужных пятен */
  background-image:
    radial-gradient(circle at 50% -8%, var(--sand) 0%, transparent 58%),
    repeating-linear-gradient(135deg, rgba(22,18,12,.022) 0 2px, transparent 2px 9px);
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: 'Rubik', 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* иконки — SVG, а не эмодзи */
.ic { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2.3; fill: none;
      stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------------------------------------------------------- СТИКЕР */

.sticker {
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
}

/* ------------------------------------------------------------------ ГЕРОЙ */

.hero { padding: 20px 0 6px; }

.hero__cover {
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: 7px 7px 0 var(--ink);
  overflow: hidden;
  background: var(--paper);
  aspect-ratio: 1472 / 959;
}
.hero__cover img { width: 100%; height: 100%; object-fit: cover; }

.hero__title {
  margin: 26px 0 0;
  text-align: center;
  font-size: clamp(38px, 12.5vw, 74px);
  text-transform: uppercase;
  color: var(--red);
  /* чернильная обводка постера */
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
}
.hero__title em { display: block; font-style: normal; color: var(--green); }

.hero__lead {
  margin: 18px auto 0;
  max-width: 30ch;
  text-align: center;
  font-size: clamp(17px, 4.6vw, 20px);
  font-weight: 700;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- ОБРАТНЫЙ ОТСЧЁТ */

.countdown { margin: 24px 0 0; }
.countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.cd {
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--ink);
  padding: 10px 4px 8px;
  text-align: center;
}
.cd:nth-child(1) { background: var(--red);    color: #fff; }
.cd:nth-child(2) { background: var(--green);  color: #fff; }
.cd:nth-child(3) { background: var(--yellow); color: var(--ink); }
.cd:nth-child(4) { background: var(--paper);  color: var(--ink); }

.cd__n {
  font-family: 'Rubik', sans-serif; font-weight: 900;
  font-size: clamp(24px, 8vw, 38px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd__l { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .85; margin-top: 3px; }

.countdown__note { text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-top: 10px; }

/* ------------------------------------------------------------------- ФАКТЫ */

.facts { display: grid; gap: 8px; margin: 20px 0 0; }
.fact {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-weight: 800;
  font-size: 15.5px;
}
.fact .ic { font-size: 21px; }
.fact--red   .ic { color: var(--red); }
.fact--green .ic { color: var(--green-deep); }
.fact--blue  .ic { color: var(--blue); }

/* ---------------------------------------------------------------- КНОПКИ */

.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 16px 24px;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast);
}
.btn .ic { font-size: 20px; stroke-width: 2.6; }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translate(var(--lift), var(--lift)); box-shadow: 0 0 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.btn--red    { background: var(--red);    color: #fff; }
.btn--green  { background: var(--green);  color: #fff; }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--ghost  { background: var(--paper);  color: var(--ink); box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--ink); min-height: 54px; font-size: 15px; }
.btn--ghost:active { transform: translate(var(--lift-sm), var(--lift-sm)); }

.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-row { display: flex; gap: 12px; margin-top: 22px; }
.btn-row .btn { flex: 1 1 auto; width: auto; }
.btn-row .btn--ghost { flex: 0 0 36%; }

.hero__cta { margin: 26px 0 10px; }

/* ------------------------------------------------------------- ПРОГРАММА */

.section { padding: 44px 0 6px; }

.section__title {
  font-size: clamp(27px, 7.5vw, 38px);
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.section__sub { text-align: center; color: var(--ink-soft); font-weight: 700; margin: 10px 0 24px; }

.prog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 400px) { .prog { grid-template-columns: 1fr; } }

.prog__i {
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--ink);
  padding: 18px 16px;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.prog__i:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }

.prog__ic {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  margin-bottom: 12px;
}
.prog__ic .ic { font-size: 24px; color: var(--ink); }
.prog__i:nth-child(1) .prog__ic { background: var(--yellow); }
.prog__i:nth-child(2) .prog__ic { background: var(--red);    }
.prog__i:nth-child(3) .prog__ic { background: var(--green);  }
.prog__i:nth-child(4) .prog__ic { background: var(--blue);   }
.prog__i:nth-child(5) .prog__ic { background: var(--sand);   }
.prog__i:nth-child(6) .prog__ic { background: var(--yellow); }
.prog__i:nth-child(2) .prog__ic .ic,
.prog__i:nth-child(3) .prog__ic .ic,
.prog__i:nth-child(4) .prog__ic .ic { color: #fff; }

.prog__n { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.15; }
.prog__d { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }

/* -------------------------------------------------------------- ПРОГРЕСС */

.progress {
  position: sticky; top: 0; z-index: 40;
  background: var(--cream);
  border-bottom: var(--edge) solid var(--ink);
  padding: 12px 0;
  display: none;
}
.progress.is-on { display: block; }

.steps { display: flex; align-items: center; gap: 0; }
.steps__i { flex: 1; display: flex; align-items: center; gap: 0; min-width: 0; }

.steps__dot {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 15px;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.steps__i.is-done .steps__dot { background: var(--green); color: #fff; }
.steps__i.is-now  .steps__dot { background: var(--red);   color: #fff; box-shadow: 0 0 0 4px rgba(225,37,27,.22); }
.steps__dot .ic { font-size: 17px; stroke-width: 3.4; }

.steps__bar { flex: 1; height: 4px; background: var(--ink); opacity: .18; margin: 0 4px; border-radius: 2px; }
.steps__i.is-done .steps__bar { opacity: 1; background: var(--green); }
.steps__i:last-child .steps__bar { display: none; }

.progress__label {
  margin-top: 9px; text-align: center;
  font-family: 'Rubik', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.progress__label b { color: var(--red); }

/* --------------------------------------------------------------- КАРТОЧКИ */

.step { display: none; padding: 22px 0 44px; }
.step.is-active { display: block; }

.card {
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  padding: 26px 20px;
  margin-bottom: 18px;
}

.card__title { font-size: clamp(23px, 6.2vw, 30px); margin-bottom: 6px; }
.card__hint  { margin: 8px 0 20px; color: var(--ink-soft); font-size: 15px; font-weight: 600; }
.card__hint:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- ПОЛЯ */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.field label {
  display: block; margin-bottom: 7px;
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 13.5px;
  text-transform: uppercase; letter-spacing: .03em;
}
.field label i  { color: var(--red); font-style: normal; }
.field label em { color: var(--ink-soft); font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }

.field input, .field select, .field textarea {
  width: 100%; min-height: 56px;
  padding: 14px 16px;
  background: var(--cream);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  font-weight: 700;
  transition: box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--paper);
  box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--green);
}
.field input::placeholder { color: #B3A996; font-weight: 600; }
.field.has-error input { background: #FFF0EE; box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--red); }

.field__err { display: none; margin-top: 7px; color: var(--red-deep); font-size: 14px; font-weight: 800; }
.field.has-error .field__err { display: flex; align-items: center; gap: 6px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 430px) { .grid-2 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- ВЫБОР */

.opts { display: grid; gap: 12px; }

.opt {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 14px 18px;
  background: var(--cream);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  font-weight: 800;
  cursor: pointer;
  transition: background-color var(--t-fast), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.opt:hover { background: var(--paper); }
.opt:active { transform: translate(2px, 2px); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }

.opt__dot {
  flex: none; width: 26px; height: 26px;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  display: grid; place-items: center;
}
.opt__dot::after {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); transform: scale(0);
  transition: transform var(--t-base) var(--ease-pop);
}
.opt--check .opt__dot { border-radius: 8px; }
.opt--check .opt__dot::after { border-radius: 3px; }

.opt:has(input:checked) { background: var(--paper); box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--green); }
.opt input:checked ~ .opt__dot::after { transform: scale(1); }

.opt__body  { flex: 1; min-width: 0; }
.opt__title { display: block; }
.opt__note  { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }

/* ------------------------------------------------------------ СОГЛАСИЕ */

/* Селектор с типом: `.field label` (0,1,1) иначе перебивает `.consent` (0,1,0)
   и возвращает display:block — чекбокс уезжает на строку выше текста. */
.field label.consent {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0;

  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 16px;
  background: var(--cream);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--t-fast), box-shadow var(--t-fast) var(--ease-out);
}
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }

.consent__box {
  flex: none; width: 26px; height: 26px; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--paper);
  border: var(--edge) solid var(--ink);
  border-radius: 8px;
}
.consent__box .ic { font-size: 17px; stroke-width: 3.6; color: #fff; transform: scale(0); transition: transform var(--t-base) var(--ease-pop); }

.consent:has(input:checked) { background: var(--paper); box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--green); }
.consent:has(input:checked) .consent__box { background: var(--green); }
.consent input:checked ~ .consent__box .ic { transform: scale(1); }
.consent:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }

.consent__text { flex: 1; min-width: 0; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.35; text-transform: none; }

.consent__more { margin-top: 7px; font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.consent__more summary {
  cursor: pointer; font-weight: 800; color: var(--green-deep);
  text-decoration: underline; list-style: none;
  text-transform: none; letter-spacing: 0; font-size: 13.5px;
}
.consent__more summary::-webkit-details-marker { display: none; }
.consent__more[open] summary { margin-bottom: 6px; }

.field.has-error .consent { background: #FFF0EE; box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--red); }

/* -------------------------------------------------------------- ОПЛАТА */

.pay__badge {
  width: 76px; height: 76px; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: var(--yellow); color: var(--ink);
  border: var(--edge) solid var(--ink); border-radius: 50%;
  box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--ink);
}
.pay__badge .ic { font-size: 36px; stroke-width: 2.4; }

.pay__actions { margin-top: 20px; display: grid; gap: 12px; }

/* -------------------------------------------------------------- ПЛАШКИ */

.note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; padding: 14px 16px;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; line-height: 1.45;
}
.note .ic { font-size: 20px; margin-top: 1px; }
.note--green  { background: #E9F8E6; }
.note--red    { background: #FFEDEB; }
.note--yellow { background: #FFF4D6; }

.reveal { display: none; }
.reveal.is-on { display: block; }

/* --------------------------------------------------------------- МЕНЮ */

.menu-cat { margin-bottom: 26px; }
.menu-cat:last-child { margin-bottom: 0; }

.menu-cat__head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 19px;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: var(--edge) solid var(--ink);
}
.menu-cat__head .ic { font-size: 22px; color: var(--red); }
.menu-cat__note { font-size: 13.5px; color: var(--ink-soft); font-weight: 700; margin: 8px 0 12px; }

.dish {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 2px dashed rgba(22,18,12,.16);
}
.dish:last-of-type { border-bottom: none; }
.dish.is-picked { border-bottom-color: transparent; }

.dish__info  { flex: 1; min-width: 0; }
.dish__name  { font-weight: 800; font-size: 16px; line-height: 1.2; }
.dish__desc  { font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-top: 2px; }
.dish__price { font-family: 'Rubik', sans-serif; font-weight: 700; color: var(--red); font-size: 15px; margin-top: 4px; }

/* счётчик */
.stepper { flex: none; display: flex; align-items: center; gap: 6px; }
.stepper button {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--ink);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.stepper button .ic { font-size: 20px; stroke-width: 3.2; }
.stepper button:active { transform: translate(var(--lift-sm), var(--lift-sm)); box-shadow: 0 0 0 var(--ink); }
.stepper button.plus { background: var(--green); color: #fff; }
.stepper button[disabled] { opacity: .35; box-shadow: none; transform: none; }
.stepper output {
  min-width: 30px; text-align: center;
  font-family: 'Rubik', sans-serif; font-weight: 900; font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* гарниры */
.sides {
  display: none;
  margin: 2px 0 16px;
  padding: 14px;
  background: var(--sand);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
}
.sides.is-on { display: block; }
.sides__head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px;
}
.sides__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }

.side {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 6px 5px 16px;
  font-size: 14px; font-weight: 700; line-height: 1.2;
}
.side.is-on { box-shadow: var(--lift-sm) var(--lift-sm) 0 var(--green); }
.side > span:first-child { min-width: 0; }
.side__n { display: flex; align-items: center; gap: 4px; flex: none; }
.side__n button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--cream); cursor: pointer;
}
.side__n button .ic { font-size: 16px; stroke-width: 3.4; }
.side__n button.plus { background: var(--green); color: #fff; }
.side__n button[disabled] { opacity: .3; }
.side__n output { min-width: 20px; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }

.sides__warn { display: none; margin-top: 10px; font-size: 14px; font-weight: 800; color: var(--red-deep); }
.sides.has-warn .sides__warn { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------- КОРЗИНА */

.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--paper);
  border-top: var(--edge) solid var(--ink);
  transform: translateY(110%);
  transition: transform 320ms var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.cart-bar.is-on { transform: none; }

.cart-bar__in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 12px 18px 14px;
  display: flex; align-items: center; gap: 14px;
}
.cart-bar__sum { flex: 1; min-width: 0; }
.cart-bar__label { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.cart-bar__total {
  font-family: 'Rubik', sans-serif; font-weight: 900; font-size: 26px;
  color: var(--red); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.cart-bar__toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 800;
  color: var(--green-deep); text-decoration: underline;
}
.cart-bar .btn { width: auto; flex: none; min-height: 54px; padding: 14px 26px; font-size: 15px; }

.cart-list {
  display: none; max-height: 42vh; overflow-y: auto;
  max-width: var(--wrap); margin: 0 auto;
  padding: 12px 18px;
  border-top: 2px dashed rgba(22,18,12,.2);
}
.cart-list.is-on { display: block; }
.cart-list__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; font-weight: 800; }
.cart-list__row small { display: block; color: var(--ink-soft); font-weight: 600; font-size: 13px; }

body.pad-cart { padding-bottom: 104px; }

/* ---------------------------------------------------------------- ИТОГ */

.sum {
  background: var(--cream);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  padding: 18px;
}
.sum__row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 15.5px; font-weight: 700; }
.sum__row small { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.sum__row--sep { border-top: 2px dashed rgba(22,18,12,.22); margin-top: 8px; padding-top: 13px; }
.sum__row--total {
  border-top: var(--edge) solid var(--ink); margin-top: 12px; padding-top: 14px;
  font-family: 'Rubik', sans-serif; font-weight: 900; font-size: 24px; color: var(--red);
}
.sum__head {
  margin: 18px 0 2px;
  font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
}
.sum__head:first-child { margin-top: 0; }

/* --------------------------------------------------------------- ФИНАЛ */

.done { text-align: center; padding: 26px 0 60px; }

.done__badge {
  width: 92px; height: 92px; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: var(--green); color: #fff;
  border: var(--edge) solid var(--ink); border-radius: 50%;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
}
.done__badge .ic { font-size: 46px; stroke-width: 2.6; }

.done__title {
  font-size: clamp(34px, 11vw, 56px);
  text-transform: uppercase;
  color: var(--red);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
}
.done__sub { font-size: 18px; font-weight: 700; margin: 14px 0 26px; }

.team-code {
  background: var(--green); color: #fff;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  padding: 24px; margin-top: 20px;
}
.team-code__label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.team-code__name  { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: 24px; margin: 3px 0 16px; }
.team-code__code  {
  font-family: 'Rubik', sans-serif; font-weight: 900;
  font-size: clamp(34px, 11vw, 48px); letter-spacing: .05em;
  background: rgba(0, 0, 0, .18);
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-md);
  padding: 12px; margin-bottom: 10px;
}

.footer {
  text-align: center; padding: 34px 18px 44px;
  color: var(--ink-soft); font-size: 14px; font-weight: 700;
}
.footer a { color: var(--green-deep); font-weight: 800; }

/* ---------------------------------------------------------------- ТОСТ */

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 90;
  transform: translate(-50%, 160%);
  display: flex; align-items: center; gap: 9px;
  max-width: calc(100vw - 36px);
  padding: 14px 20px;
  background: var(--ink); color: #fff;
  border-radius: 999px;
  font-weight: 800; font-size: 15px; text-align: left;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .25);
  transition: transform 300ms var(--ease-pop);
}
.toast.is-on { transform: translate(-50%, 0); }
.toast .ic { font-size: 20px; color: var(--yellow); }

/* --------------------------------------------------------- АНИМАЦИИ / A11Y */

/* Первый экран анимируется чистым CSS — не ждёт загрузки Motion.
   Ниже сгиба появлением занимается Motion (подключается асинхронно). */
.js .anim { opacity: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.js .rise {
  opacity: 0;
  animation: rise .6s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 75ms);
}

body.is-filling .hero__cta,
body.is-filling .prog-section { display: none; }

/* На оплате и финале шапка уже не нужна: дата, время и адрес повторяются
   на самом экране, а обложка только отодвигает главное вниз. */
body.is-finishing .hero { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .anim { opacity: 1; }
  .js .rise { opacity: 1; animation: none; }
}