/* Дизайн A4-карточки пивного меню (PT Serif, бежевая бумага).
   Единый вариант разлива: 0,25 / 0,4 / 0,5 (прежний переключатель A/B убран).
   Используется и шаблоном превью (templates/menu_card.html), и живыми превью
   редактора (templates/menu_editor.html) — единый источник стиля. */
.mc-root{
  --paper: #e5cba3;
  --ink:   #1a1a1a;
  --mute:  #8a8580;
  --rule:  0.6pt;
  --mx: 16mm;
  --my: 16mm;
}
.mc-root *{ box-sizing: border-box; margin: 0; padding: 0; }

.page{
  width: 210mm; height: 297mm;
  background: var(--paper);
  padding: var(--my) var(--mx);
  position: relative; overflow: hidden;
  color: var(--ink);
  display: flex; flex-direction: column;
  font-family: "PT Serif", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums lining-nums;
}

.corner{
  position:absolute; width: 11mm; height: 11mm;
  border: var(--rule) solid var(--ink); z-index: 2;
}
.corner.tl{ top:7mm; left:7mm;     border-right:none; border-bottom:none; }
.corner.tr{ top:7mm; right:7mm;    border-left:none;  border-bottom:none; }
.corner.bl{ bottom:7mm; left:7mm;  border-right:none; border-top:none; }
.corner.br{ bottom:7mm; right:7mm; border-left:none;  border-top:none; }

.eyebrow{
  display:flex; justify-content: flex-end; align-items: baseline;
  line-height:1; padding-bottom: 6mm;
  border-bottom: var(--rule) solid var(--ink);
}
.eyebrow .num{ font-weight: 700; font-size: 54pt; letter-spacing: -0.01em; line-height: 1; }

.hero{ padding-top: 12mm; padding-bottom: 12mm; border-bottom: var(--rule) solid var(--ink); }
.trans{
  margin-bottom: 7mm; font-weight: 400; font-size: 20pt;
  letter-spacing: 0.10em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; overflow: hidden;
}
.name{
  font-weight: 700; font-size: 72pt; line-height: 1.05;
  letter-spacing: 0.02em; text-transform: uppercase; margin: 0;
}
.name.len-md { font-size: 50pt; }   /* 12–16 chars */
.name.len-lg { font-size: 46pt; }   /* 17–22 chars */
.name.len-xl { font-size: 38pt; }   /* 23+ chars   */
.origin{
  margin-top: 9mm; font-weight: 400; font-size: 20pt;
  letter-spacing: 0.10em; text-transform: uppercase; line-height: 1;
}
.origin .accent{ font-weight: 700; font-size: 24pt; letter-spacing: 0.04em; }

.facts{
  height: 30mm;
  border-bottom: var(--rule) solid var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8mm; line-height: 1;
}
/* Стиль может быть длинным (напр. «Бельгийский трипель») — даём ему ужиматься в
   доступную ширину (flex-shrink) и скрываем переполнение; точная подгонка размера
   шрифта — fitStyle() в шаблонах. ABV фиксированной ширины справа. */
.facts .style{ font-weight: 700; font-size: 43pt; letter-spacing: -0.005em;
  white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.facts .abv  { font-weight: 700; font-size: 51pt; letter-spacing: -0.005em;
  white-space: nowrap; flex: 0 0 auto; }
.facts .abv .pct{ font-weight: 400; font-size: 39pt; margin-left: 1mm; }

.tags{
  height: 30mm;
  border-bottom: var(--rule) solid var(--ink);
  display: flex; align-items: center;
  font-weight: 700; font-size: 26pt; line-height: 1.1;
  white-space: nowrap; overflow: hidden;
}
.tags .dot{ color: var(--mute); margin: 0 3mm; }

.meters{
  padding-top: 10mm; padding-bottom: 0;
  display: flex; flex-direction: column; gap: 7mm;
}
.meter{
  display: grid; grid-template-columns: 44mm 1fr;
  align-items: center; column-gap: 8mm; min-width: 0;
}
.meter .k{ font-weight: 700; font-size: 26pt; line-height: 1; white-space: nowrap; }
.meter .scale{
  display:flex; gap: 3mm; align-items: center; justify-content: flex-end;
  height: 10mm;
}
.meter .scale .d{
  width: 16mm; height: 8mm;
  border: var(--rule) solid var(--ink); background: transparent; flex: 0 0 auto;
}
.meter .scale .d.on{ background: var(--ink); }

.prices{
  margin-top: auto; padding-top: 8mm;
  border-top: var(--rule) solid var(--ink);
  display: grid; position: relative;
  grid-template-columns: 1fr 1fr 1fr;
}
.prices::before, .prices::after{
  content:""; position:absolute; top: 8mm; bottom: 0;
  border-left: var(--rule) solid var(--ink);
}
.prices::before{ left: 33.3333%; }
.prices::after { left: 66.6666%; }
.prices .price{
  display:flex; flex-direction: row; align-items: baseline; justify-content: center;
  gap: 4mm; padding: 0 3mm;
}
.prices .price .vol{ font-weight: 400; font-size: 26pt; letter-spacing: -0.01em; line-height: 0.95; }
.prices .price .num{ font-weight: 700; font-size: 56pt; line-height: 0.95; letter-spacing: -0.03em; }

@media print{
  @page{ size: A4; margin: 0; }
  html, body{ background: white; }
  .page{ background: white; box-shadow: none; page-break-after: always; break-after: page; }
  /* Заполненные деления шкал (.d.on) — это background-color. Браузеры по умолчанию
     НЕ печатают фоны -> шкалы выходили пустыми. Принудительно печатаем цвета/фоны. */
  .page, .page *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}