/* ==========================================================================
   facefood — стилове
   ========================================================================== */

:root {
  /* база — светъл фон навсякъде, с надраскани хиксчета */
  --cream: #f7f4ef;
  --cream-deep: #ece5d9;
  --paper: #ffffff;
  --ink: #201a14;
  /* ⚠️ Потъмнено от #6b6255 заедно с вдигането на текстурата на 0.34
     (2026-07-29). Дребният вторичен текст стои директно върху хиксчетата и е
     тясното място: при стария цвят контрастът под плътна четка беше 3.11:1, а
     при по-плътна текстура падаше на 2.55:1. С този цвят е 3.43:1 под четка и
     7.35:1 върху чисто кремаво — тоест по-четимо, отколкото беше ПРЕДИ
     потъмняването на фона. Йерархията се пази: пак е 7.3× по-светъл от --ink.
     Ползва се само върху светли фонове (eyebrow, section-head p, milestone,
     delivery-note, contact-info) — проверено, няма употреба върху тъмно. */
  --ink-soft: #574f43;
  /* ⚠️ ОТДЕЛЕН от --ink-soft нарочно (одит по WCAG 2.1 AA, 31.08.2026).
     Ползва се САМО от .eyebrow — петте надписа на секциите. Те са единственият
     дребен текст, който стои директно върху хиксчетата: --ink-soft мереше там
     3.43:1 при изискване 4.5:1 (0.95rem = 15.2px/700, тоест не е "large text",
     чийто праг е 18.5px bold). Всички останали употреби на --ink-soft са върху
     плътна повърхност и минават без промяна — .milestone span и .delivery-note p
     върху бяло са 8.06:1, .contact-info h3 върху .glass-panel е 5.85:1,
     .rate-menu-title върху бяло също. Затова --ink-soft НЕ е пипан: щеше да
     потъмни четири места, които и без това са наред.
     Сметката: фонът под плътен щрих е кремавото, смесено с #171715 при 0.34,
     тоест rgb(170.8, 168.9, 164.9); contrast = (L(фон)+0.05)/(L(текст)+0.05).
     #443d34 дава 4.55:1 — първата стойност над прага със запас.
     ⚠️ Цената е йерархията: надписът пада от 7.32x на 4.39x по-светъл от --ink.
     По-тъмно оттук нататък започва да спори с --ink и надписът спира да е
     "бледият надпис", какъвто клиентът го иска. Не го дърпай надолу без нужда.
     ⚠️ Тази стойност и opacity: 0.34 на текстурата пак са двойка — ако някой ден
     хиксчетата се сгъстят, преизчисли и двете. */
  --ink-label: #443d34;
  --line: rgba(32, 26, 20, 0.13);

  /* burger shop — жълто/черно */
  --burger-yellow: #f0b429;
  --burger-yellow-deep: #d99a1e;
  --burger-black: #1b1815;

  /* pizza shop — червено/бяло */
  --pizza-red: #c8393f;
  --pizza-red-deep: #8f1d22;
  --pizza-cream: #fffaf1;

  /* bunting: жълто → зелено → черно → червено */
  --flag-1: #f0b429;
  --flag-2: #4f8a3d;
  --flag-3: #1b1815;
  --flag-4: #b3272d;

  --shadow-sm: 0 2px 10px rgba(32, 26, 20, 0.09);
  --shadow-md: 0 10px 30px rgba(32, 26, 20, 0.14);
  --shadow-lg: 0 20px 50px rgba(32, 26, 20, 0.22);

  --radius: 18px;
  --radius-sm: 10px;

  --font-head: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;
  --font-hand: "Caveat", cursive;

  --container: 1180px;

  /* Височината на флагчетата. Стои тук, а не само в .bunting .flag, защото от
     нея зависи и къде спират котвите: лентата е position: fixed точно под
     хедъра и закрива толкова от кадъра — виж scroll-margin-top по-долу. */
  --bunting-h: 38px;
}

/* ---- reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
html.nav-lock { overflow: hidden; }
/* ⚠️ ОТДЕЛЕН клас от .nav-lock, макар правилото да е същото. Двата компонента
   се заключват независимо: setupNav() вдига и сваля .nav-lock, а setupConsent()
   — този. Ако делят един клас, затварянето на единия отключва скрола, докато
   другият още стои отворен. */
html.consent-lock { overflow: hidden; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  /* ⚠️ Гаси плътния син правоъгълник, който Chrome/Android рисува върху всеки
     кликаем елемент при допир (клиентът, 31.08.2026 — забеляза го чак след
     .gallery-bubble, но всъщност е стоял на всеки бутон/връзка от самото
     начало, защото никъде не е бил изключен). Наследява се от body, значи
     покрива всичко наведнъж — .btn, .plat, навигацията, футъра, социалните
     иконки. Всеки от тях вече има собствена :active реакция (потъмняване,
     лек скок, сянка); синьото просто временно я покриваше.
     .gallery-cell по-долу пази СВОЕ отделно правило само за cursor: pointer
     (не за това свойство) — закачено е за медия заявка (hover: none)/
     (pointer: coarse), защото .float-item носи cursor: default и трябва
     изрично да бъде надвит там, където реално каца пръстът. */
  -webkit-tap-highlight-color: transparent;
}
/* бял фон + топло сияние — фиксиран слой зад цялото съдържание, еднакъв
   навсякъде при скрол. Хиксчетата (реалната снимка) са отделен слой,
   body::after, с независим opacity — виж по-долу. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 16% 88%, rgba(233, 146, 58, 0.05), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(196, 52, 45, 0.04), transparent 45%);
}
/* хиксчетата — реалната снимка на клиента (images/brand/x-texture.webp),
   вградена като повтаряща се текстура, само с намален opacity, вместо
   пресъздадена като SVG апроксимация. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../images/brand/x-texture.webp");
  background-repeat: repeat;
  /* Размерът се смята от JS (fitTexture в js/script.js), за да се побира цял
     брой хиксчета в кадъра — при фиксирани 90px екранът почти никога не се
     дели точно и отдясно оставаше отрязано хиксче. 90px auto е резервата,
     ако JS не се изпълни: изглежда както преди, тоест работи. */
  background-size: var(--x-tile-w, 90px) var(--x-tile-h, auto);
  /* ⚠️ Вдигнато от 0.26 на 0.34 (клиентът поиска по-черни хиксчета, 2026-07-29).
     Плътността е ЕДИНСТВЕНИЯТ лост тук: плътните пиксели на знака са #171715,
     тоест той вече е практически черен и по-тъмен цвят няма откъде да дойде.
     ⚠️ Това е и таванът. Ограничението не са заглавията (--ink държи 7.3:1 дори
     под плътна четка), а дребният текст в --ink-soft. Затова 0.34 върви В ЧИФТ
     с потъмняването на --ink-soft — виж бележката при него. Ако вдигаш още,
     смятай и двете: contrast = (L(фон)+0.05)/(L(текст)+0.05), където фонът е
     кремавото, смесено със знака при тази плътност. */
  opacity: 0.34;
}
/* ⚠️ `height: auto` тук е ЗАДЪЛЖИТЕЛНО и върви в комплект с width/height
   атрибутите по <img>-ите в index.html — не махай нито едното, нито другото.
   Атрибутите дават на браузъра съотношението на снимката ПРЕДИ да я е заредил,
   за да ѝ запази мястото; без тях всяка мързеливо заредена снимка изниква от
   нулева височина и избутва страницата надолу. Точно това чупеше котвите:
   кликаш "свържи се с нас", браузърът тръгва към мястото, където "контакти" е
   В ТОЯ МОМЕНТ, по пътя снимките се зареждат и секцията се мести — измерено
   веднъж, разминаването беше 2252px, тоест попадаш някъде по средата. Втория
   път работи, защото снимките вече са заредени (клиентът, 2026-07-30).
   А `height: auto` е нужно, защото атрибутът height иначе се брои за твърда
   височина в пиксели и щом `max-width: 100%` свие ширината, снимката се
   деформира. Правилата по класове, които задават своя височина (.inline-icon,
   .flag-sign, .brand-mark, .menu-board-icon, .loc-group-title img) са с
   по-висока специфичност и продължават да важат. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
/* ---- фокус от клавиатурата ----
   Сайтът вече си има речник за това: плътен пръстен 3px с отстъп 3px — виж
   .btn, .loc-trust, .rate-menu a (жълт) и .plat (мастилен). Дотук обаче го
   носеха само пет компонента, а марката, връзките в навигацията, хамбургерът,
   футърът, телефоните, имейлът и социалните иконки разчитаха на подразбирането
   на браузъра. Никъде няма outline: none, тоест 2.4.7 формално беше покрито —
   но подразбирането е различно във всеки браузър и върху черния хедър и
   черния футър някои рисуват тъмен пръстен върху тъмно.
   ⚠️ Двата цвята НЕ са по вкус, а по повърхност — същата двойка, която сайтът
   вече ползва: мастилено върху светло (--ink върху крем е 12.6:1), жълто върху
   тъмно (--burger-yellow върху #000 е 11.27:1). Обратното не става: жълто
   върху крем е 1.9:1 и пръстенът изчезва.
   ⚠️ Специфичността е 0,1,0 нарочно, за да не бие правилата по класове —
   .btn:focus-visible, .plat:focus-visible и .lang-switch a:focus-visible са
   0,2,0 и нагоре и продължават да важат както преди. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--burger-yellow); }
/* ⚠️ scrollToTarget() слага tabindex="-1" на секцията, до която е скочило, и я
   фокусира, за да тръгне табването оттам, а не от върха на страницата. Тя обаче
   не е бутон — пръстен около цяла секция се чете като дефект, не като фокус.
   Специфичността (0,2,0) е над тази на правилото отгоре нарочно. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }
/* ---- връзка "към съдържанието" ----
   ⚠️ НЕ ползва .sr-only и не бива да ползва display/visibility: hidden — всяко
   от тях изважда връзката от реда на табване, а тя съществува само заради него.
   Скрита е с изнасяне НАД кадъра и се връща при фокус.
   Дрехата е тази на хедъра, защото връзката се появява точно върху него: черно
   поле, кремав текст, жълт пръстен — същата двойка, с която е и целият хедър.
   ⚠️ z-index над .site-header (60) и над чекмеджето (55), иначе изскача ЗАД
   лепкавата шапка и се фокусира невидимо. */
.skip-link {
  position: fixed;
  top: 0;
  left: clamp(1.1rem, 4vw, 2.5rem);
  z-index: 70;
  transform: translateY(-120%);
  background: #000;
  color: #f5ead9;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: transform 0.18s ease;
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--burger-yellow);
  outline-offset: -6px;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ⚠️ Котвата трябва да разчисти ДВЕ неща, не едно: хедъра И гирляндата под него.
   Тук стоеше фиксирано 76px, което покриваше само хедъра (66px) — гирляндата е
   position: fixed на top: var(--header-h) и закрива още 38px, затова заглавието
   на всяка секция падаше ПОД нея. Измерено преди поправката: "обекти" и "меню"
   спираха на 76px, а лентата свършва на 104px, тоест 28px от заглавието бяха
   закрити (клиентът, 2026-07-30).
   Изведено от променливи, а не с ново фиксирано число: --header-h се пише от JS
   (виж syncHeaderHeight) и се мени, щом марката в хедъра смени размера си.
   Същата сметка ползва и .menu-board по-долу — двете трябва да си останат равни. */
section { scroll-margin-top: calc(var(--header-h, 66px) + var(--bunting-h, 38px) + 32px); }
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
/* ⚠️ 0.95rem, а не 0.78rem (клиентът, 2026-07-30). Вдигнат е за ВСИЧКИ секции
   наведнъж нарочно: в "доставка" този надпис остана сам, без h2 под себе си, и
   при 0.78rem (12.5px) се четеше твърде дребен за заглавие на секция. Да се
   уголеми само там обаче щеше да го различи от "обекти" / "за нас" / "контакти",
   а клиентът иска точно обратното — да не се различават. Затова числото е едно
   и същото на четирите места; ако пак се пипа, пипа се тук, не по секции. */
/* Дребният блед надпис с ИМЕТО на секцията. Стои на всичките пет секции и
   изглежда еднакво навсякъде — това е "заглавието" на секцията в езика на
   клиента, а голямото <h2> под него е подзаглавие и го има само на три от тях.

   ⚠️ Носи се от ДВА различни елемента и това е нарочно:
     • <span class="eyebrow"> — в "обекти" / "за нас" / "контакти", където под
       него стои истинско <h2> с подзаглавие; надписът там е етикет, не заглавие.
     • <h2 class="eyebrow"> — в "меню" и "доставка", където подзаглавие НЯМА и
       ако надписът беше <span>, секцията щеше да остане изобщо без заглавие в
       структурата на страницата (а <h4>-тата на артикулите в менюто щяха да
       увиснат под заглавието на предишната секция).
   display + line-height са изрични точно затова: <h2> и <span> иначе се
   разминават (h2 наследява line-height: 1.15 от правилото за заглавия,
   span-ът — 1.55 от body) и петте надписа спират да са пиксел в пиксел. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  /* ⚠️ 0.95rem, а не 0.78rem (клиентът, 2026-07-30). Вдигнат е за ВСИЧКИ секции
     наведнъж: в "меню" и "доставка" този надпис остава сам, без h2 под себе си,
     и при 0.78rem (12.5px) се четеше твърде дребен за заглавие на секция. Да се
     уголеми само там обаче щеше да го различи от останалите, а клиентът иска
     точно обратното — да не се различават. Пипа се тук, не по секции. */
  font-size: 0.95rem;
  line-height: 1.4;
  display: block;
  /* ⚠️ --ink-label, НЕ --ink-soft. Виж бележката при променливата: това е
     единственият дребен текст върху голите хиксчета и единственото място,
     където --ink-soft не стигаше до 4.5:1. */
  color: var(--ink-label);
}
.section-head { max-width: 640px; margin: 0 auto 2.6rem; text-align: center; }
/* :not(.eyebrow) — иначе този правилник (специфичност 0,1,1) бие .eyebrow (0,1,0)
   по font-size и надписите в "меню" и "доставка", които са <h2>, скачат на 32px */
.section-head h2:not(.eyebrow) { font-size: clamp(2rem, 4.2vw, 2.8rem); margin-top: 0.4rem; }
.section-head p { margin-top: 0.8rem; color: var(--ink-soft); font-size: 1.05rem; }
.section-pad { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* ---- разделител между секциите ----
   Същият похват като .craft-x в "за нас" (тънка линия с прекъсване по средата
   и собственият рисуван хикс в прекъсването), само по-едър — клиентът поиска
   секциите да се делят по същия начин. Знакът върши работата на типографски
   орнамент между пасажи, а не на украса: марката на бизнеса е буквално
   бургери ✕ пица, и същият знак вече отделя двата текста в "за нас".

   ⚠️ Линията ЗАТИХВА към външните си краища (градиент, не плътен --line).
   Плътна черта от край до край на 900px чете като таблично каре и натежава
   върху кремавото; затихването я оставя да е дълга, без да тежи. Плътна е
   само около хикса — тоест точно там, където обявява, че той е разделител,
   а не част от фоновата текстура (която е от същия знак). Не я изправяй в
   плътен цвят и не сваляй плътността до хикса.

   ⚠️ Височината на лентата се неутрализира с отрицателен margin, за да НЕ
   расте разстоянието между секциите — .section-pad вече дава по 3.5–6.5rem
   от двете страни, разделителят просто застава в средата на този въздух. */
.section-x {
  --sx-mark: clamp(46px, 4.6vw, 58px);   /* самият хикс — по-едър от .craft-x */
  --sx-band: clamp(56px, 6vw, 70px);     /* височина на лентата */
  /* ⚠️ по-плътна от --line (0.13). Онази стойност е мерена за .craft-x, който
     лежи върху .glass-panel — чист матиран фон. Тук линията минава направо
     по кремавото с хиксчетата и при 0.13 просто изчезва в текстурата. */
  --sx-line: rgba(32, 26, 20, 0.22);
  --sx-gap: calc(50% + var(--sx-mark) / 2 + 15px);  /* прекъсването в линията */
  display: block;
  position: relative;
  width: min(900px, 100% - 2 * clamp(1.1rem, 4vw, 2.5rem));
  height: var(--sx-band);
  margin: -1.2rem auto;
  background: url("../images/brand/x-texture-source.webp") center / var(--sx-mark) auto no-repeat;
  /* ⚠️ Тук НЯМА opacity, за разлика от .craft-x (0.92), и това не е пропуск:
     елементът е цел на .fade-in, а .fade-in.visible { opacity: 1 } е с две
     класови селектора и бие всяко opacity с един. Стойността просто щеше да
     се игнорира. Плътността на знака се мери с окото при opacity 1 — ако
     трябва да олекне, това става с по-блед PNG, не с opacity тук. */
}
.section-x::before,
.section-x::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.section-x::before {
  left: 0;
  right: var(--sx-gap);
  background: linear-gradient(to right, transparent, var(--sx-line) 22%);
}
.section-x::after {
  left: var(--sx-gap);
  right: 0;
  background: linear-gradient(to left, transparent, var(--sx-line) 22%);
}

/* ---- стъклен панел — носи текста в секции, които стоят направо върху
   общия кремав фон с хиксчета (за нас / обекти / контакти), вместо плътно
   бяло. Матово стъкло с blur, през което хиксчетата леко прозират. ---- */
.glass-panel {
  position: relative;
  background: rgba(255, 253, 248, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  /* --panel-pad е custom property, не само стойност — .craft-bg по-долу я
     чете, за да пресметне точно доколко трябва да "изтече" навън, за да
     стигне истинския ръб на панела. Дръж двете в синхрон. */
  --panel-pad: clamp(1.8rem, 4.5vw, 3.2rem);
  padding: var(--panel-pad);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- bunting flags ---- */
.bunting {
  display: flex;
  width: 100%;
  overflow: visible;
  line-height: 0;
  /* ⚠️ ВЕЕНЕТО Е ТУК, НА ЦЯЛАТА ЛЕНТА — НЕ на всяко флагче поотделно, и това
     не е разкрасяване на кода, а поправка на истински проблем с плавността
     (докладван от посетител на 02.09.2026: флагчетата "трепереха и лагваха",
     само на неговия телефон).
     Причината: всяко флагче носеше СОБСТВЕНА безкрайна анимация плюс
     will-change: transform, тоест браузърът държеше по един отделен графичен
     слой за всяко — 13 на телефон и до ~47 на широк екран, всеки с маска
     (clip-path) и опресняван на всеки кадър. На устройство с малко видео
     памет това е точно рецептата за накъсване, и обяснява защо се вижда на
     един телефон, а на друг не.
     ⚠️ Замяната е ДОКАЗАНО еднаква на око, не приблизително: всичките флагчета
     се вееха В ТАКТ (измерено — една-единствена стойност на трансформацията и
     едно и също време на анимацията за всичките 13). А skewX зависи само от
     ВЕРТИКАЛНАТА точка на въртене, която при един ред флагчета е обща.
     Проверено чрез сравняване на координатите на всичките 13 флагчета в двата
     края на вълната (+7deg и -6deg), при 338px и при 1440px: съвпадат до
     стотната от пиксела.
     ⚠️ Затова transform-origin ТУК е задължителен — без него въртенето е около
     центъра на лентата и флагчетата тръгват настрани. */
  transform-origin: top center;
  will-change: transform;
  animation: flutter 2.8s ease-in-out infinite;
}
.bunting .flag-wrap {
  flex: 0 0 32px;
  width: 32px;
  display: block;
}
/* ⚠️ Флагчето само НЕ носи анимация, will-change или transform-origin — веенето
   се прави веднъж, на .bunting по-горе (виж бележката там). Ако някой ден
   потрябва всяко флагче да се вее ОТДЕЛНО (напр. със закъснение, като вълна),
   това вече е истинска промяна във вида, не оптимизация — и си връща цената от
   по един графичен слой на флагче. */
.bunting .flag {
  display: block;
  width: 100%;
  height: var(--bunting-h);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  margin-right: -1px;
}
.bunting .flag-wrap:nth-child(4n+1) .flag { background: var(--flag-1); }
.bunting .flag-wrap:nth-child(4n+2) .flag { background: var(--flag-2); }
.bunting .flag-wrap:nth-child(4n+3) .flag { background: var(--flag-3); }
.bunting .flag-wrap:nth-child(4n)   .flag { background: var(--flag-4); }
.bunting--thin .flag-wrap { flex-basis: 22px; width: 22px; }
.bunting--thin .flag { height: 22px; }
/* закачени за горния ръб (кол/връв) — веят се само отдолу, най-тесната част */
@keyframes flutter {
  0%   { transform: skewX(-6deg); }
  50%  { transform: skewX(7deg); }
  100% { transform: skewX(-6deg); }
}

/* ---- гирлянда, закачена за header-а: остава на едно и също място спрямо
   header-а през целия скрол (position: fixed, top синхронизиран с реалната
   височина на header-а през --header-h) ---- */
.bunting--fixed {
  position: fixed;
  top: var(--header-h, 66px);
  left: 0;
  right: 0;
  z-index: 45;
  pointer-events: none;
}

/* ==========================================================================
   header
   ========================================================================== */
/* хедърът остава тъмен (както футъра) — логото ни е бяло, нужен му е тъмен фон.
   Без backdrop-filter нарочно: то превръща хедъра в containing block за всеки
   position:fixed елемент вътре в него (мобилното меню, backdrop-а зад него),
   което ги "затваря" в рамките на 66-те пиксела на хедъра, вместо в целия
   екран — а фонът и без друго е 92% плътен, blur-ът зад него почти не личеше. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #000;
  color: #f5ead9;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem clamp(1.1rem, 4vw, 2.5rem);
}
.brand {
  display: flex;
  align-items: center;
  color: #f5ead9;
}
/* Само height, width: auto — вж. правилото за иконите по-долу: фиксиране и на
   двете размерности разтяга неквадратен източник.
   Височината е на самите букви, а не на платно с кант: logo-white.png е
   изрязано плътно (3.9:1), докато старото logo-mark.png носеше ~65% празен
   прозрачен кант, заради който при 26px буквите излизаха ~9px и не се
   виждаха. Ако някой ден се върне логo с кант, тази стойност пак ще лъже. */
.brand .brand-mark {
  height: 22px;
  width: auto;
  display: block;
}

.main-nav ul { display: flex; gap: 1.8rem; }
.main-nav a {
  font-weight: 600;
  font-size: 0.96rem;
  position: relative;
  padding: 0.3rem 0;
}
.main-nav a::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--burger-yellow);
  transition: width 0.25s ease;
}
/* ⚠️ В @media (hover: hover), както .btn, .plat и .lang-switch: на тъч браузърът
   лепва :hover при докосване и го ЗАДЪРЖА, тоест жълтата черта оставаше под
   последно докоснатата връзка и се четеше като "тук си". */
@media (hover: hover) {
  .main-nav a:hover::after { width: 100%; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
}
.nav-toggle span { width: 26px; height: 2.5px; background: #f5ead9; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.nav-backdrop { display: none; }

/* ---- езиков превключвател ----------------------------------------------

   ⚠️ .header-end е ОБВИВКА, а не нов ред в оформлението, и точно затова
   съществува: .header-inner е justify-content: space-between. С две деца
   (.brand и това) навигацията си остава прилепена вдясно, точно както беше.
   Ако превключвателят се сложеше като ТРЕТО пряко дете, space-between щеше да
   го разпръсне и да избута навигацията към средата на хедъра.
   На ≤860px .main-nav излиза от потока (position: fixed за чекмеджето) и тук
   остават само превключвателят и хамбургерът — измерено: хедърът остава точно
   66px, а на 375px екран отдясно на логото пак има 112px свободни (57px при
   320px). Логото не се измества на нито една ширина.

   ⚠️ Жестът НЕ е нов. .main-nav a::after е жълта черта 2px, която расте от 0
   до 100% при посочване; активният език носи същата черта, но постоянно —
   тоест "ти си на този". Не въвеждай отделна украса (капсула, рамка, флагче)
   — тя ще е единственият елемент в хедъра със собствен речник.
   ⚠️ Без флагчета по изрично искане: на шева долу вече висят анимирани
   триъгълни флагчета и две знамена. */
.header-end {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2.2vw, 1.6rem);
}

.lang-switch { display: flex; align-items: center; }
.lang-switch a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ⚠️ 44×44 е зоната за ДОКОСВАНЕ, не размерът на буквите. Не я смалявай,
     за да "стегнеш" хедъра — под 44px пръстът бърка BG с EN. Хедърът е 66px
     висок, тъй че 44-те се побират, без да го разтеглят. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;              /* компенсира letter-spacing-а вдясно */
  color: rgba(245, 234, 217, 0.5);
  transition: color 0.2s ease, background-color 0.2s ease;
}
/* чертата между двата: същата плътност като канта на връзките в чекмеджето */
.lang-switch a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(245, 234, 217, 0.22);
}
.lang-switch a::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: 0;
  height: 2px;
  background: var(--burger-yellow);
  transition: width 0.25s ease;
}
/* ⚠️ Активният се разпознава по aria-current="page", а НЕ по .active клас:
   така достъпността и външният вид не могат да се разминат — няма как да
   пожълтиш единия, а екранният четец да чете другия. */
.lang-switch a[aria-current="page"] { color: var(--burger-yellow); }
.lang-switch a[aria-current="page"]::after { width: 1.55em; }

/* ⚠️ :hover ЗАДЪЛЖИТЕЛНО вътре в @media (hover: hover) — правилото на целия
   сайт. На тъч браузърът лепва :hover при докосване и го задържа, тъй че
   неактивният език оставаше светнал след превключване. */
@media (hover: hover) {
  .lang-switch a:hover { color: #f5ead9; }
  .lang-switch a:not([aria-current="page"]):hover::after {
    width: 1.55em;
    background: rgba(245, 234, 217, 0.45);
  }
}
.lang-switch a:active { background: rgba(245, 234, 217, 0.1); }
.lang-switch a:focus-visible {
  outline: 2px solid var(--burger-yellow);
  outline-offset: -4px;
  border-radius: 4px;
}

@media (max-width: 860px) {
  .main-nav {
    position: fixed;
    top: var(--header-h, 66px);
    right: 0;
    width: min(80vw, 320px);
    height: calc(100vh - var(--header-h, 66px));
    background: #18130f;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .3s ease, visibility .3s;
    padding: 1.5rem;
    z-index: 55;
    overflow-y: auto;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
  }
  .main-nav.open { visibility: visible; transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 0.3rem; }
  .main-nav a { display: block; padding: 0.9rem 0.4rem; font-size: 1.15rem; border-bottom: 1px solid rgba(245, 234, 217, 0.14); }
  .nav-toggle { display: flex; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--header-h, 66px);
    background: rgba(10, 8, 6, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    z-index: 54;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative;
  /* ⚠️ Точно колкото остава от първия екран под хедъра — не 92vh, както беше.
     При 92vh под героя оставаше видима лента с височина 0.08·vh − хедъра, тоест
     нула на нисък прозорец, но 20px при 1080p и 49px при 1440p — и точно там се
     подаваше дървената летва при скрол 0, което клиентът отчете като дразнещо
     (2026-07-29). Оттук долният ръб на героя пада точно на дъното на първия
     екран при ВСЯКА височина, така че под него не се вижда нищо, докато не
     скролнеш. Хедърът е sticky, тоест заема място в потока — затова се вади.
     ⚠️ 100dvh е избран нарочно въпреки известния компромис: на телефон heroто
     се преоразмерява леко, докато адресната лента се скрива/появява при скрол
     (2026-09-01, клиентско решение). Алтернативата (100vh) е стабилна при
     скрол, но оставя видима ивица от следващия блок под героя на телефон,
     защото 100vh смята спрямо БЕЗ адресната лента. Клиентът предпочете
     идеално прилепналия ръб пред лекото "подскачане". `100vh` остава като
     fallback ред отдолу за браузъри без поддръжка на `dvh`. */
  min-height: calc(100vh - var(--header-h, 66px));
  min-height: calc(100dvh - var(--header-h, 66px));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  /* Долният ръб (2026-07-29). Героят е най-голямата снимка на страницата и
     свършва като предмет, положен ВЪРХУ нея — заоблени долни ъгли + сянка,
     същият език като снимките в "обекти" и "за нас" (бяла рамка, сянка,
     лек наклон). Преди беше рязан на права хоризонтална линия и се четеше
     като недовършено, защото там съвпадаха ДВА ръба: краят на снимката и
     стартът на X-текстурата (body::after е фиксиран слой, който героят
     покрива, така че текстурата "светва" точно на долния му ръб).
     Заоблянето обединява двата в един нарочен ръб. */
  /* Долният ръб е ПРАВ и от край до край — нарочно, без border-radius.
     ⚠️ Не връщай заобляне тук. Героят опира до двата ръба на екрана, затова
     всяко заобляне изрязва фона и в двата долни ъгъла се показва кремавото —
     клиентът го отчете като дефект (2026-07-29). Единственият начин да се
     скрият ъглите е секцията да излезе отвъд екрана с поне радиуса си, но
     тогава кривата пада извън видимото и ръбът пак изглежда прав — същата
     картина, срещу 24px хоризонтално преливане на документа (scrollWidth
     399 при 375), а точно този проект вече е имал проблеми с преливане
     надясно на телефон. Затова: без заобляне, без разширяване.
     Разделението от страницата го носи изцяло сянката.
     Ако някога поискат ВИДИМА мека крива без фон в ъглите, единственият
     вариант е ИЗПЪКНАЛ ръб (издуване надолу в средата) през clip-path —
     border-radius може само вдлъбнато и винаги ще оголва ъглите. */
  box-shadow: 0 16px 34px -10px rgba(18, 15, 12, 0.40);
}
/* ---- диагонално разделеният фон -------------------------------------- */
.hero-split { position: absolute; inset: 0; z-index: -2; }
/* Всяка половина е 56% широка (двете се припокриват в средата), за да има
   запас за наклона; clip-path реже наклонения ръб. Понеже прозорецът е
   висок и тесен, cover се държи добре с портретните снимки на клиента. */
.hero-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56%;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Процентите в clip-path са спрямо СОБСТВЕНАТА ширина на елемента (56% от
   героя), не спрямо екрана: линията минава през 54% от героя горе и 46%
   долу, което вътре в 56%-овия елемент дава 96.4% / 82.1% отляво и
   17.9% / 3.6% отдясно. Ако сменяш наклона, преизчисли и четирите. */
.hero-half--burger {
  left: 0;
  background-image: url("../images/hero/hero-burger.webp");
  /* Хоризонталният 60% е по README-то на клиента. Вертикалният беше 50%, но
     клиентът поиска бургерът да се вдигне (2026-07-29) и измерването му дава
     право: цветната маса на ястието е между 40% и 82% от височината на
     снимката, с център ~61% — тоест 50% центрира СНИМКАТА, а ястието остава
     под средата на прозореца. 80% изтегля кадъра надолу по снимката и качва
     ястието към центъра.
     ⚠️ Действа само когато има вертикален запас, а той зависи от формата на
     прозореца: запас има само ако (0.56·vw)/(0.92·vh) > 0.80, тоест при
     широки екрани. На висок и тесен прозорец cover мащабира по височина,
     запас няма и вертикалната стойност просто не прави нищо — това е
     нормално, не е счупено. */
  background-position: 60% 80%;
  clip-path: polygon(0 0, 96.4% 0, 82.1% 100%, 0 100%);
}
.hero-half--pizza {
  right: 0;
  background-image: url("../images/hero/hero-pizza.webp");
  background-position: 60% 55%;
  clip-path: polygon(17.9% 0, 100% 0, 100% 100%, 3.6% 100%);
  /* Клиентът каза, че пицата изглежда бледа (2026-07-29) и измерването го
     потвърждава: средната ѝ наситеност е 0.244 срещу 0.466 на бургера, при
     почти еднаква яркост (0.461 срещу 0.442) — тоест не е бледа сама по
     себе си, а до топлата снимка до нея. Този филтър я вдига до 0.417,
     почти наравно с бургера. Стойностите са премерени на canvas, не на око;
     ако пак се пипат, мери, вместо да гадаеш — 1.30 дава 0.340, 1.90 дава
     0.505 (вече над бургера).
     Нарочно е CSS филтър, а не преработен JPEG: оригиналът на клиента
     остава непокътнат и силата се сменя с едно число. */
  filter: saturate(1.55) contrast(1.07);
}
/* Самата разделителна линия е отделен елемент, а не border — border не следва
   clip-path. Стои под затъмняването (.hero::before), за да е мек шев, а не
   ярка ивица точно зад логото. */
.hero-split-line {
  position: absolute;
  inset: 0;
  background: rgba(247, 244, 239, 0.85);
  clip-path: polygon(
    calc(54% - 1.5px) 0, calc(54% + 1.5px) 0,
    calc(46% + 1.5px) 100%, calc(46% - 1.5px) 100%);
}
/* лекото затъмняване: по-плътно в центъра зад логото, по-леко към ръбовете,
   за да си останат и двете ястия разпознаваеми */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 64% 54% at 50% 46%,
                    rgba(18, 15, 12, 0.6), rgba(18, 15, 12, 0.1) 74%),
    linear-gradient(180deg, rgba(18, 15, 12, 0.42),
                    rgba(18, 15, 12, 0.08) 38%, rgba(18, 15, 12, 0.34));
}
.hero-content {
  position: relative;
  color: var(--ink);
  /* ширината на логото е и ширината на реда под него. Няма ограничение по
     височина както преди — новото лого е широко и ниско (3.9:1), височината
     му никога не е тясното място. */
  width: min(820px, 88vw);
  padding: 5.5rem 0 4rem;
}
/* логото на клиента е целият герой — надписът facefood е в него, затова
   няма отделен <h1> на екрана (само за екранни четци). */
.hero-mark img {
  width: 100%;
  height: auto;
  /* сянката отделя белия надпис от светлите петна по снимките (кората на
     пицата, моцарелата) — затъмняването само не стига навсякъде */
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.45));
  animation: heroRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s backwards;
}
/* редът под логото е "закачен" за краищата на неговата рамка — текстът
   отляво, действието отдясно — за да не е всичко в една централна колона */
/* Слоганът е центриран под логото, бутонът — центриран под него, на всички
   ширини (клиентът поиска това изрично на 2026-07-28). Преди беше един ред,
   "закачен" за краищата на логото: слоганът вляво, бутонът вдясно. Ако
   срещнеш тази подредба в стар код — беше нарочна, но е отменена. */
.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.1rem, 2.4vw, 1.7rem);
  margin-top: clamp(1.2rem, 3vw, 2rem);
}
/* текстът на клиента, дума по дума — не се пренаписва */
.hero-tagline {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  letter-spacing: 0.03em;
  /* беше кафяво (#8a5c14) върху кремав фон; сега стои върху снимки */
  color: #f7f4ef;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
  animation: heroRise 0.7s ease 0.3s backwards;
}
/* heroRise мести и проявява; heroAppear само проявява — бутонът ползва
   втория, защото анимация с fill-mode: forwards бие :hover правилото и
   иначе би убила повдигането при посочване */
@keyframes heroRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroAppear { to { opacity: 1; } }
.btn-order {
  display: inline-block;
  flex: none;
  padding: 0.95rem 2.6rem;
  background: var(--burger-yellow);
  color: var(--burger-black);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: lowercase;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  animation: heroAppear 0.6s ease 0.45s forwards;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
@media (hover: hover) {
  .btn-order:hover { transform: translateY(-2px); background: var(--burger-yellow-deep); box-shadow: var(--shadow-lg); }
}

/* На тесен екран отвесният диагонал би дал на всяка снимка лента ~200px
   широка и цял екран висока (съотношение ~0.3) — портретните снимки на
   клиента (0.8 и 0.75) се режат до неузнаваемост в такъв прозорец. Затова
   тук същата диагонална линия става почти хоризонтална: бургерът отгоре,
   пицата отдолу, всяко ястие в почти квадратен прозорец. Линията пак минава
   през 54% отляво и 46% отдясно — само осите са разменени. */
@media (max-width: 700px) {
  .hero-half {
    top: auto;
    bottom: auto;
    width: 100%;
    height: 56%;
  }
  .hero-half--burger {
    top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 82.1%, 0 96.4%);
  }
  .hero-half--pizza {
    bottom: 0;
    clip-path: polygon(0 17.9%, 100% 3.6%, 100% 100%, 0 100%);
  }
  .hero-split-line {
    clip-path: polygon(
      0 calc(54% - 1.5px), 100% calc(46% - 1.5px),
      100% calc(46% + 1.5px), 0 calc(54% + 1.5px));
  }
}

@media (max-width: 620px) {
  .hero-content { padding-top: 4.5rem; }
}


/* ==========================================================================
   знамената на шева между героя и "обекти"
   ==========================================================================
   Възпроизвеждат истинското знаме на клиента (images/... — снимката
   "знаме за шеф начална секция.jpg"): черен плат, кремав надпис, изрез
   лястовича опашка, халки в горните ъгли. На снимката знамето виси
   хоризонтално на прът и текстът е завъртян на 90°; тук е изправено
   вертикално, за да се чете нормално — съдържанието и редът му са същите
   (знак → OPEN / дни / часове → SINCE 2017 → facefood в рамка).

   Позициониране: контейнерът стои веднага след </section> на героя, тоест
   горният му ръб Е долният ръб на героя. Знамената са absolute с bottom: 0,
   затова изпъкват НАГОРЕ върху снимката, а височината на контейнера е точно
   колкото се показват НАДОЛУ върху кремавото. Така припокриването няма
   отделно магическо число — мени се само височината на контейнера. */
.shop-flags {
  /* по-ниски и мъничко по-широки от първата версия (2026-07-29, клиентът):
     знамената трябва да седят НА шева, а не да закриват нито снимките в
     героя, нито секцията отдолу */
  --flag-w: clamp(134px, 14vw, 188px);
  --notch: clamp(20px, 2.3vw, 30px);
  --rail: clamp(11px, 1.15vw, 16px);
  /* платът се качва до средата на летвата и се заковава там — тази стойност е
     и височината на застъпването, и мястото, в което влизат пирончетата */
  --lap: calc(var(--rail) / 2);
  --nail: calc(var(--rail) * 0.46);
  --flag-cream: #f2e8d8;

  position: relative;
  z-index: 10;                   /* над героя, под гирляндата (45) и хедъра (60) */
  /* Височината на контейнера = колко от знамето виси ПОД шева; останалото
     стърчи нагоре върху снимката. Тук тя е нагласена да Е РАВНА на височината
     на плата, тоест знамената висят ИЗЦЯЛО под шева и не покриват снимката.
     ⚠️ Два пъти беше друго и двата пъти клиентът го върна: първо 1/3 отдолу,
     после 1/2. Причината да не работи наполовина е, че шевът пада почти точно
     на долния ръб на първия екран (героят е 92vh + хедъра), затова всичко над
     шева се вижда още при скрол 0 — но отрязано от ръба на екрана. Виждаше се
     парче знаме, а на телефон то закриваше и пицата. Сега при скрол 0 не се
     показва нищо, а знамето влиза в кадър цяло.
     Правата е нагласена по измерена височина на плата при 320/375/760/1280px
     (платът расте с vw, затова и тя е линейна по vw). Ако смениш нещо, което
     мени височината му (шрифт, --sign, --notch, padding), премери наново:
     `wrapH` трябва да остане равна на `clothH` с точност до няколко пиксела.
     Малък излишък е безопасен (знамето просто увисва няколко px под шева);
     недостиг е този, който връща отрязаното парче на първия екран.
     Летвата добавя своята дебелина, минус застъпването на плата върху нея. */
  /* ⚠️ Преизмерено на 2026-07-30, след като под знака се добави името на обекта
     (.flag-shop) — платът порасна с ~20px и старата права (176px + 5vw, таван
     244px) остана КЪСА, тоест на първия екран пак се подаваше парче знаме.
     Измерени височини на плата: 320→210.4, 375→210.4, 500→210.4, 700→210.4,
     760→226.7, 1280→255.9, 1600→270.8, 2000→270.8. Тоест има три участъка:
     плато до 700px (там clamp-овете на --flag-w и шрифтовете опират в пода си),
     линеен ръст нататък и второ плато над ~1550px, където опират в тавана си.
     Правата 189px + 5.25vw минава през 760 и 1600; подът 212px покрива долното
     плато, таванът 274px — горното. На всяка от осемте мерени ширини стойността
     излиза 0.3–15px НАД височината на плата, тоест винаги с малък излишък —
     излишъкът е само няколко пиксела кремаво преди "обекти", а недостигът връща
     отрязаното знаме на първия екран. */
  height: calc(clamp(212px, calc(189px + 5.25vw), 274px) + var(--lap));
  pointer-events: none;
}
/* Летвата: реалната дървесина на клиента, изрязана на тънка ивица. Стои
   плътно ПОД долния ръб на героя (top: 0 в контейнера, чийто горен ръб Е
   шевът), а не яхнала го — така при скрол 0 на телефон не се подава нищо, а
   героят придобива видим долен кант, върху който има на какво да се закачи.
   Трите сенки правят дебелината: осветен горен кант, заоблен тъмен долен ръб
   и сянката, която летвата хвърля върху кремавото. */
.flag-rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--rail);
  background-image: url("../images/brand/texture-boards-brown.jpg");
  background-size: cover;
  /* 43% от височината на снимката пада в средата на една дъска, а не върху
     фугата между две — при cover вертикалният процент не зависи от мащаба */
  background-position: center 43%;
  /* Суровата ламперия е ярко оранжева (#bf7e3b, наситеност 0.527) и върху
     кремавия фон изпъкваше като залепен стикер (клиентът, 2026-07-29).
     Този филтър я сваля до #8b6a48 — практически тонът на дървената дъска под
     пицата в героя, която е #9b704c при наситеност 0.341, само малко по-тъмно.
     Числата са мерени на canvas (средно RGB → HSL) и на двете места, не на око;
     ако пак се пипа, мери по същия начин: saturate(0.7)/brightness(0.88) дава
     наситеност 0.362, saturate(0.5)/brightness(0.72) — 0.254.
     Нарочно е CSS филтър, а не преработен JPEG — оригиналът на клиента остава
     непокътнат и силата е едно число (същият подход като .hero-half--pizza). */
  filter: saturate(0.62) brightness(0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 200, 0.32),
    inset 0 -2px 3px rgba(24, 14, 6, 0.5),
    0 4px 9px rgba(18, 15, 12, 0.34);
}

.shop-flag {
  position: absolute;
  /* ⚠️ Платът се качва ВЪРХУ летвата до средата ѝ и е закован там — не виси
     на халки под нея (клиентът, 2026-07-29). Горният му ръб пада точно на
     осевата линия на дъската, на всяка ширина, без изчисления. Преди беше
     bottom: 0 и височината на контейнера трябваше да се нагажда към височината
     на плата, което оставяше 0–4px фуга. */
  top: var(--lap);
  width: var(--flag-w);
  pointer-events: auto;
  /* ⚠️ БЕЗ наклон. Знамето стои отвесно, за да е горният му ръб успореден на
     шева. Тук имаше rotate(±1.6deg) — при наклон единият горен ъгъл опира в
     шева, а другият се отваря, и се получава клиновидна фуга, която клиентът
     отчете веднага (2026-07-29). Живото го дава единствено анимацията.
     Ако някога пак се сложи постоянна трансформация, тя е на ТОЗИ елемент, а
     анимацията остава на .shop-flag-cloth вътре — двете на един елемент се
     отменят взаимно (същият капан като .fade-in + rotate другаде в този файл). */
  filter: drop-shadow(0 14px 18px rgba(18, 15, 12, 0.42));
}
/* симетрично отляво и отдясно, без да опират ръба на екрана */
.shop-flag--burger { left: clamp(1.1rem, 9vw, 10rem); }
.shop-flag--pizza  { right: clamp(1.1rem, 9vw, 10rem); }

.shop-flag-cloth {
  position: relative;
  padding: 0.75rem 0.7rem calc(var(--notch) + 0.55rem);
  text-align: center;
  color: var(--flag-cream);
  /* плътно черно + два диагонални отблясъка — платът на знамето е найлон и
     лови светлината на гънките */
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.10) 0 9%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(256deg, rgba(255, 255, 255, 0.06) 0 8%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #241f1a, #100e0c);
  /* лястовичата опашка — изрезът е в пиксели, а не в проценти, за да не
     мърда спрямо долния padding, когато знамето смени височината си */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--notch)), 0 100%);
  transform-origin: top center;
  will-change: transform;
  animation: flagCloth 5.2s ease-in-out infinite;
}
/* отрицателното закъснение стартира второто знаме по средата на цикъла —
   двете не се люлеят в такт, както не биха и в реалността */
.shop-flag--pizza .shop-flag-cloth { animation-delay: -2.1s; }

/* ⚠️ Спряно, докато знамената са извън екрана — класът се слага от
   setupFlagIdle() в js/script.js (виж бележката там защо е точно този клас и
   защо СПИРА, вместо да пуска). Продължава от същото място при връщане. */
.shop-flags.flags-idle .shop-flag-cloth { animation-play-state: paused; }

/* Пирончетата, с които платът е закован за летвата — по едно във всеки горен
   ъгъл. Стоят в .shop-flag, а НЕ в .shop-flag-cloth: платът се вее, пироните
   не мърдат. (Двата елемента се застъпват, затова координатите са едни и същи.)
   Вертикално са в лентата на застъпването: между горния ръб на плата (0) и
   долния ръб на дъската (--lap) — тоест забити са в дървото, през плата.
   Главичката е сферична: светло петно горе вляво, тъмен ръб и къса сянка
   долу вдясно, за да стърчи над повърхността. */
.flag-nail {
  position: absolute;
  top: calc(var(--rail) * 0.02);
  width: var(--nail);
  height: var(--nail);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    #fdf4de 0 16%, #d3c096 44%, #8a7551 76%, #4c3f2a 100%);
  box-shadow:
    0 0 0 0.5px rgba(28, 20, 12, 0.65),
    0 1px 1.5px rgba(18, 12, 6, 0.5);
}
/* лявото е с половин пиксел по-високо от дясното — заковано е на ръка, не с
   машина, и абсолютната симетрия тук изглежда печатно */
.flag-nail--l { left: 9px; }
.flag-nail--r { right: 10px; top: calc(var(--rail) * 0.02 + 0.5px); }
.shop-flag--pizza .flag-nail--l { left: 10px; top: calc(var(--rail) * 0.02 + 0.5px); }
.shop-flag--pizza .flag-nail--r { right: 9px; top: calc(var(--rail) * 0.02); }

/* Платът се рисува ВЪРХУ летвата само по ред в DOM-а (.flag-rail стои преди
   <article>-ите), затова нито на него, нито на пирончетата им трябва z-index —
   а и не биха могли да ползват такъв: .shop-flag носи filter, което му прави
   собствен стекинг контекст. */

/* Двата знака са един и същ пътен знак: бургерският е готовият PNG на клиента
   (1599px, тоест остър и при най-големия размер тук), пицарският е негово SVG
   копие с надпис PIZZA — виж коментара при svg-то в index.html. */
.flag-sign {
  --sign: clamp(40px, 4.1vw, 54px);
  width: var(--sign);
  height: var(--sign);
  object-fit: contain;
  margin: 0 auto 0.5rem;
}
/* SVG-то няма собствено съотношение като <img>, затова му държим кутията */
.flag-sign--pizza { display: block; }
/* Името на обекта под знака (клиентът, 2026-07-30). ⚠️ Такива надписи имаше и
   преди и клиентът ги махна на 2026-07-29 — но тогава бяха в цветовете на
   подмарките (жълто/червено) и се четяха като чужд елемент, залепен на плата.
   Сега са в СЪЩОТО кремаво като всичко останало по знамето, тоест са част от
   щампата. Ако пак се пипат, това е разликата — не им връщай подмарковия цвят. */
.flag-shop {
  margin-top: -0.15rem;
  margin-bottom: 0.45rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.6rem, 0.82vw, 0.74rem);
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-indent: 0.1em;               /* компенсира letter-spacing-а вдясно */
  text-transform: lowercase;
  color: rgba(242, 232, 216, 0.82);
  white-space: nowrap;
}
.flag-open {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.32rem);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-indent: 0.14em;            /* компенсира letter-spacing-а вдясно */
}
/* ⚠️ Дребните редове тук са с ПОДА нарочно вдигнат (2026-07-29): при
   clamp(0.44rem…) те падаха до ~7px и клиентът ги отчете като размазани.
   Под ~0.5rem разреденият главен шрифт спира да се чете на обикновен екран —
   не смалявай тези три правила, за да "смъкнеш" знамето; за височина има
   padding и --notch. */
.flag-days {
  margin-top: 0.3rem;
  font-size: clamp(0.52rem, 0.72vw, 0.62rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: rgba(242, 232, 216, 0.66);
}
.flag-hours {
  margin-top: 0.28rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(0.78rem, 1vw, 0.96rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* тънката линия с ромбче в средата — точно както е на плата */
.flag-rule {
  display: block;
  position: relative;
  width: 62%;
  height: 1px;
  margin: 0.65rem auto;
  background: rgba(242, 232, 216, 0.4);
}
.flag-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(242, 232, 216, 0.62);
  transform: translate(-50%, -50%) rotate(45deg);
}
.flag-since {
  font-size: clamp(0.5rem, 0.66vw, 0.58rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(242, 232, 216, 0.62);
  margin-bottom: 0.35rem;
}
/* надписът в рамка — както е на знамето (без усмивката, тя не е там) */
.flag-word {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(0.84rem, 1.13vw, 1.04rem);
  line-height: 1;
  letter-spacing: -0.02em;
  padding: 0.3em 0.5em 0.34em;
  border: 1.5px solid rgba(242, 232, 216, 0.75);
  border-radius: 7px;
}
/* Тук СТОЯХА цветните редове "burger shop" / "pizza shop" — махнати по искане
   на клиента (2026-07-29). Кой обект е кой се вижда от знака горе, точно както
   е и на истинското знаме. Не ги връщай. */

/* ⚠️ Вълна през skewX, не rotate и не rotateY — и двете са изисквания, не вкус.
   1) Горният ръб е закачен за халките и НЕ бива да мърда (клиентът, 2026-07-29).
      Само skew с transform-origin: top center дава точно това: точките при y=0
      стоят абсолютно неподвижно, а отклонението расте пропорционално надолу,
      така че се движи само свободният край. rotate върти и закачения ръб.
   2) Първата версия беше rotate + rotateY(9deg) с perspective и клиентът
      отчете текста като пикселизиран — с право: 3D трансформация растеризира
      слоя веднъж и после го препроектира, а надписите тук са дребни и не
      понасят преизмерването. skewX е равнинна трансформация и текстът остава
      остър. Не връщай 3D тук.
   Пипа само transform — композира се на видеокартата, без layout и без repaint. */
@keyframes flagCloth {
  0%   { transform: skewX(-2.6deg); }
  50%  { transform: skewX(2.8deg); }
  100% { transform: skewX(-2.6deg); }
}

@media (max-width: 700px) {
  .shop-flags {
    /* Най-широкото съдържание е редът с часовете (white-space: nowrap, ~86px
       при 0.8rem). При 118px платът му оставя ~10px запас на 320px екран;
       при 112px запасът пада до ~4px. Ако смениш шрифта или формата на
       часовете, мери ТЕКСТА (Range.getBoundingClientRect), а не кутията на
       <p>-то — то е блоково и винаги връща ширината на плата. */
    --flag-w: clamp(118px, 30vw, 134px);
    --notch: 20px;
    /* height НЕ се пипа тук — правата в основното правило вече покрива и
       телефона; отделна стойност щеше да разсинхронизира дела под шева */
  }
  .shop-flag--burger { left: clamp(0.6rem, 4vw, 1.6rem); }
  .shop-flag--pizza  { right: clamp(0.6rem, 4vw, 1.6rem); }
  /* редовете само се доуплътняват — размерите им НЕ слизат под пода от
     основното правило, иначе се връща размазаният дребен текст */
  .shop-flag-cloth { padding-top: 0.6rem; }
  .flag-sign  { --sign: 34px; margin-bottom: 0.42rem; }
  .flag-open  { font-size: 1rem; }
  .flag-hours { font-size: 0.8rem; }
  .flag-word  { font-size: 0.86rem; }
  .flag-rule  { margin: 0.45rem auto; }
  .flag-since { margin-bottom: 0.28rem; }
}


/* ==========================================================================
   fade-in on scroll
   ========================================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   about
   ========================================================================== */
/* ---- двете кухни ("какво правим", най-отгоре в "за нас") ----
   Три колони: текст ✕ текст. Средната е собственият ръкописен хикс на клиента —
   структурен елемент, не украса: бизнесът е бургери ✕ пица.
   На телефон решетката става една колона и хиксът сам се превръща в
   хоризонтален разделител между двата текста — точно каквото трябва, без
   отделно правило за него. */
/* ⚠️ Блокът носи .glass-panel — СЪЩИЯ носител като в "обекти" и "контакти",
   не собствен фон. Двата абзаца са най-дългата проза на страницата и лежат
   върху тиражираните хиксчета; мастилото им е достатъчно тъмно (7.3:1 дори под
   плътна четка), но четките минават ЗАД буквите и окото трябва да ги отделя.
   Панелът гаси текстурата с истинско матиране (backdrop-filter), вместо да я
   покрива.

   ⚠️ Тук първо стоеше собствено кремаво петно (радиален градиент без ръб) и
   клиентът го върна: при широк нисък блок елипсата се чете като размазано
   петно, а не като повърхност (2026-07-30). Не го връщай — ако трябва още
   успокояване, пипа се .glass-panel, за да се промени навсякъде наведнъж. */
.craft {
  display: grid;
  /* minmax(0, 1fr), не 1fr — иначе дълга дума в текста разширява трака извън
     контейнера (виж бележката при .menu-boards по-долу в този файл) */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  /* start, а не center: двата текста са различно дълги и при center главите им
     ("burger shop" / "pizza shop") увисват на различна височина и се четат като
     разместени. Хиксът се центрира сам чрез align-self долу. */
  align-items: start;
  gap: clamp(1.1rem, 3.4vw, 2.8rem);
  /* 1020, а не 920: .glass-panel добавя свой падинг (до 3.2rem от страна, т.е.
     ~102px общо) и той изяжда точно от мярката на текста — при 920 редът падна
     на ~39 знака, което е под удобното за четене. 1020 връща колоната на ~392px,
     тоест ~47 знака. Ако падингът на панела някога се промени, преизчисли и това. */
  max-width: 1020px;
  margin: 0 auto clamp(2.4rem, 5.5vw, 3.6rem);
}
/* position: relative + isolation: isolate заради .craft-bg по-долу — децата ѝ с
   отрицателен z-index трябва да останат В рамките на тази колона, а не да
   изтекат зад съседен панел на страницата. */
.craft-col {
  max-width: 34em;
  position: relative;
  isolation: isolate;
  /* отстъпът на матираното стъкло — вж. .craft-col::before по-долу. Хоризонталният
     и вертикалният са отделни, защото на телефон вторият трябва да падне. */
  --glass-x: clamp(0.85rem, 2.1vw, 1.45rem);
  --glass-y: clamp(0.85rem, 2.1vw, 1.45rem);
}

/* Матираното стъкло между продуктите и текста. Това е повърхността, която носи
   четимостта, откакто снимките отдолу са на пълна сила. Същият материал като
   .glass-panel наоколо, едно ниво навътре — не нов елемент в речника на сайта.

   ⚠️ Разпъва се НАВЪН с отрицателен inset, а НЕ с padding върху колоната.
   Мерено: падинг от 27px свива мярката от 391px на 337px, добавя шест реда и
   вдига колоната от 503 на 642px. Мярката за четене не се пипа.

   ⚠️ Плътността е сметната, не подбрана на око. За най-лошия случай — тъмна
   маслина точно под реда — композитът пада на ~#A1A098, което срещу --ink дава
   ~7:1, над прага с запас. По-плътно стъкло само крие продукти; ако текстът
   някога стане труден за четене, се пипа ТОВА число, а не opacity на снимките.

   ⚠️ Вертикалният отстъп има свой размер и това не е излишно. На телефон
   решетката пада в една колона и двете стъкла застават едно под друго: при
   390px междуредието е 13px, а стъкло с 26px отстъп горе и долу се застъпва
   със съседното с 38px. Затова --glass-y пада на 0.35rem под 760px. */
.craft-col::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--glass-y)) calc(-1 * var(--glass-x));
  z-index: -1;
  background: rgba(255, 253, 248, 0.56);
  backdrop-filter: blur(3px) saturate(1.06);
  -webkit-backdrop-filter: blur(3px) saturate(1.06);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: calc(var(--radius) * 0.72);
  box-shadow: 0 14px 30px -14px rgba(32, 26, 20, 0.34);
}
.craft-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.craft-icon { height: 30px; width: auto; flex-shrink: 0; }
/* ⚠️ Името на обекта е в --ink, а НЕ в цвета на подмарката, както е в дъските
   на менюто. Там жълтото лежи върху черна табела и се чете; тук фонът е
   кремав и --burger-yellow-deep върху него мери 2.25:1, тоест не се чете.
   Да е червено само пицарското, а бургерското черно, изглежда като недоглеждане.
   Цветът го носят самите пътни знаци отляво — те са и по-силният сигнал. */
.craft-shop {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-indent: 0.1em;              /* компенсира letter-spacing-а вдясно */
  text-transform: lowercase;
  color: var(--ink);
  /* Явно 1.55 (наследеното от body), защото елементът вече е <h3>: глобалното
     h1..h4 иначе би му дало ред 1.15 и надписът щеше да се качи спрямо
     пътния знак до него. font-weight: 700 по-горе вече бие глобалното 800. */
  line-height: 1.55;
}
/* най-дългата проза на страницата — оттук нататък решава четимостта:
   мярка ~34em, ред 1.8, плътното мастило (не --ink-soft) */
.craft-col p {
  font-size: clamp(1.02rem, 1.5vw, 1.12rem);
  /* 1.62, не 1.82 (свалено 2026-08-13 по искане на клиента — "нормален
     спейсинг"). 1.82 разреждаше късите изречения в пицарската колона дотам, че
     всяко изглеждаше като отделен блок. */
  line-height: 1.62;
  /* Poppins е геометричен и при дълъг текст буквите му се слепват; съвсем лека
     разредка отваря думите, без да личи като разреден шрифт */
  letter-spacing: 0.006em;
  color: var(--ink);
  /* по-равен десен ръб — където не се поддържа, просто се пренебрегва */
  text-wrap: pretty;
}
/* И двата текста са на няколко абзаца (клиентът ги преработи 2026-08-12).
   ⚠️ 0.7em, свалено от 0.85em заедно с line-height (2026-08-13). Двете вървят
   заедно и не бива да се движи само едното: при по-стегнат ред същият отстъп
   между абзаците изпъква повече, тъй че ако редът се върне на 1.82, върни и
   този на 0.85em. Няколко от абзаците са само по едно изречение — при по-голям
   отстъп спират да се четат като текст и стават списък. */
.craft-col p + p { margin-top: 0.7em; }

/* ---- фонова галерия от съставки зад текста (2026-08-20, трети проход) ----
   Клиентски снимки на пресни съставки (изрязани от чист бял фон — вж.
   _оригинали/стикери-съставки/cutout-white.ps1), разпръснати по цялата площ на
   всяка колона. Тук влизат и трите бивши обитатели на .craft-scatter/
   .craft-sticker (босилек, чесън, гъби, Caputo) — премахнати оттам по искане на
   клиента, вкарани тук по абсолютно същия начин като другите съставки.

   ⚠️ ЧЕТИМОСТТА ВЕЧЕ НЕ ИДВА ОТ ГАСЕНЕ НА СНИМКИТЕ. Два прохода се опитаха да я
   купят с opacity (първо 0.11-0.20, после 0.30-0.46) и всеки път се плащаше два
   пъти: текстът стоеше върху шарка, а продуктите изглеждаха измити. Сега
   снимките са на ПЪЛНА сила, а между тях и текста стои .craft-col::before —
   матирано стъкло. Четири посоки бяха построени и сравнени на живо (периферия,
   обтичане с shape-outside, обща лента отдолу, стъкло); клиентът избра стъклото.
   Вж. PROGRESS.md 2026-08-20 за мерките и защо другите три отпаднаха.

   ⚠️ РАЗПРЪСКВАНЕТО Е НЕБРЕЖНО НАРОЧНО и не бива да се "подравнява". Предишният
   проход имаше по една снимка в четирите ъгъла на всяка колона, все в диапазона
   13-19% — това четеше като рамка, а не като разпилени продукти, и двете колони
   излизаха еднакви. Сега: без ъглов скелет, размери от 6.5% до 26%, ъгли от 4°
   до 42° без редуване на знака, по два-три предмета в купчинка и нарочни празни
   полета между тях.
   ⚠️ Излизане извън кадъра има само НАВЪН (бургерът вляво, пицата вдясно) —
   натам overflow: hidden реже точно на видимия ръб на картата. Нагоре, надолу и
   към средата НЕ се излиза: там срезът пада насред панела и чете като грешка.

   ⚠️ position: absolute; inset: 0 върху .craft-col (position: relative по-
   горе) — децата тук НЕ добавят височина на колоната. Затова може да влезе
   произволен брой снимки, без да се пипа височината на панела.
   ⚠️ z-index: -2, а НЕ -1. Стъклото (::before) е на -1 и трябва да стои НАД
   снимките; при равен z-index решава редът в DOM, а ::before е първото дете и
   щеше да остане отдолу. Отрицателният z-index ги праща зад целия нормален
   поток на колоната (текст, .craft-head) БЕЗ да им трябва собствен z-index, а
   isolation: isolate на .craft-col не им дава да изтекат зад съседен панел.

   ⚠️ ГРАНИЦИТЕ НЕ СА .craft-col. Клиентът поиска нещата да стигат до ръба
   на самия панел, не да спират там, където спира текстовата колона (391px
   при 1280px, доста по-тясна от видимата карта). .craft-col остава тясната
   мярка за ЧЕТЕНЕ (34em), но .craft-bg вътре в нея излиза навън с отрицателен
   left/right, равен точно на --panel-pad на .glass-panel (виж горе) — тоест
   опира точно във видимия ръб на картата, изчислено, не измерено на око.
   На десктоп изтича само НАВЪН (ляво за бургера, дясно за пицата) — навътре,
   към хикс-разделителя, си остава 0, за да не пресича средата.
   На телефон (≤760px), където решетката пада в една колона, всяка колона е
   с пълна ширина и няма "навътре/навън" — там изтича и от двете страни.
   overflow: hidden на .craft-bg реже точно на тази разширена граница, не на
   .craft-col-ната по-тясна кутия.

   ⚂ История на видимостта, за да не се върти в кръг: 0.11-0.20 (клиентът:
   "почти не се виждат") → 0.30-0.36 → двата "hero" елемента (цял бургер, цяла
   пица) отпаднаха → сега пълна сила и стъкло отгоре. */
.craft-bg {
  position: absolute;
  /* ⚠️ Вертикално също изтича с --panel-pad (2026-08-20, четвърти проход) —
     огледално на left/right по-долу, за да могат логата (Caputo/Heinz) да
     подават над горния ъгъл на стъклото и продукти да "подадат" под долния му
     ръб. Понеже това МЕНЯ височината на .craft-bg, всички --y отдолу са в
     новата координатна система (0% = --panel-pad над старата горна граница,
     не старата горна граница самата). Не ги мери срещу старите проценти. */
  top: calc(-1 * var(--panel-pad));
  bottom: calc(-1 * var(--panel-pad));
  left: 0;
  right: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
@media (max-width: 760px) {
  .craft-bg { left: calc(-1 * var(--panel-pad)); right: calc(-1 * var(--panel-pad)); }
  /* виж бележката при .craft-col::before: тук двете стъкла са едно под друго и
     26px отстъп горе и долу ги застъпва при 13px междуредие */
  .craft-col { --glass-y: 0.35rem; }
}
@media (min-width: 761px) {
  .craft-bg--burger { left: calc(-1 * var(--panel-pad)); right: 0; }
  .craft-bg--pizza  { left: 0; right: calc(-1 * var(--panel-pad)); }
}
.craft-bg img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  /* таванът вече не бива да "стъпва" върху размерите: при 760px кутията е ~699px
     широка и най-едрият елемент (26%) иска 182px. Стар таван от 150px режеше
     точно него и сплескваше йерархията, заради която размерите бяха избрани. */
  max-width: 200px;
  height: auto;
  transform: rotate(var(--r));
  /* без opacity: тези снимки са на пълна сила и мътенето им не е лост тук —
     лостът е плътността на стъклото по-горе */
}
.craft-bg img.craft-bg-caputo { max-width: 140px; }
.craft-bg img.craft-bg-heinz { max-width: 150px; }

/* Брашното е препоръка, затова се чете като марка, а не като удебелена дума.
   --pizza-red-deep, защото обикновеното --pizza-red върху кремаво е на ръба;
   тъмното мери удобно над прага. Без подчертаване — заприличва на връзка. */
.caputo {
  font-weight: 700;
  letter-spacing: 0.045em;
  color: var(--pizza-red-deep);
  white-space: nowrap;
}
/* Хиксът е закотвен на тънка линия с прекъсване по средата — същият похват
   като .flag-rule по знамената (черта с ромбче в средата). Сам по себе си той
   рискува да се чете като част от фоновата текстура, която е от същия знак;
   линията го обявява за разделител. Фоновите хиксчета са едри и бледи (90px,
   opacity 0.34), този е дребен и плътен — не му смъквай плътността. */
.craft-x {
  position: relative;
  align-self: stretch;
  justify-self: center;
  width: clamp(34px, 4vw, 46px);
  background: url("../images/brand/x-texture-source.webp") center / clamp(28px, 3.4vw, 38px) auto no-repeat;
  opacity: 0.92;
}
.craft-x::before,
.craft-x::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
}
.craft-x::before { top: 0; bottom: calc(50% + 24px); }
.craft-x::after  { top: calc(50% + 24px); bottom: 0; }

@media (max-width: 760px) {
  .craft { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .craft-col { max-width: none; }
  /* решетката става една колона и същият разделител ляга хоризонтално */
  .craft-x {
    align-self: center;
    justify-self: stretch;
    width: auto;
    height: 30px;
    background-size: 28px auto;
  }
  .craft-x::before,
  .craft-x::after {
    top: 50%;
    bottom: auto;
    left: auto;
    width: auto;
    height: 1px;
    transform: translateY(-50%);
  }
  .craft-x::before { left: 0; right: calc(50% + 22px); }
  .craft-x::after  { left: calc(50% + 22px); right: 0; }
}

.about-intro { max-width: 640px; margin: 0 auto clamp(2.2rem, 5vw, 3.2rem); text-align: center; }
.about-milestones {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.milestone {
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  box-shadow: var(--shadow-sm);
  min-width: 140px;
}
.milestone b { font-family: var(--font-head); font-size: 1.3rem; color: var(--pizza-red); display: block; }
.milestone span { font-size: 0.82rem; color: var(--ink-soft); }

/* ---- фото-разказ: снимките на семейството на facefood, нанизани на общ
   "конец" надолу по секцията като снимки на семейна връв — всяка снимка е
   реален кадър в естествено съотношение (не изрязан), в рамка като истинско
   отпечатано фото (бял паспарту + дълбока сянка, полу-случаен наклон),
   редуващ се ляво/дясно спрямо конеца, всяка с ръкописен ред от общото
   изречение до нея. Затваря с самостоятелна снимка-печат (табелата с
   "since 2017"), без текст до нея. */
/* ⚠️ 920px, а не 800: всеки такт е решетка от ДВЕ РАВНИ колони (виж .story-beat),
   тоест снимката разполага точно с половината минус половин просвет. При 800px
   тази половина пада на ~373px, а рамката на снимката е до 418px — снимките
   щяха да се смалят с около 11%, без клиентът да го е искал. При 920 половината
   е ~433px и снимките остават в естествения си размер. */
.about-story { max-width: 920px; margin: 0 auto; }
.about-story-beats { position: relative; }
.about-thread {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 7px, transparent 7px 17px);
  z-index: 0;
}
/* ⚠️ Решетка от две РАВНИ колони, а не flex с justify-content: center — и това
   е поправка на истински бъг, не стилово предпочитание (клиентът го докладва
   2026-08-12: "точките влизат в снимките" на десктоп).

   При flex + center се центрира ГРУПАТА снимка+просвет+текст. Снимката обаче е
   до 418px, а редът е до 280px, тоест шевът между тях пада далеч вдясно от
   средата на такта — измерено 442px при среда 400px. Конецът (.about-thread) и
   точката (.story-beat::before) обаче са заковани на точно 50%, защото минават
   през ЦЕЛИЯ разказ и не могат да следват всеки такт поотделно. Резултат:
   точката пада ВЪРХУ снимката, и то и при седемте такта.

   С две равни колони и просвет между тях средата на такта е винаги в средата на
   просвета. Снимката се долепя до вътрешния ръб на своята колона (justify-self),
   тъй че просветът е точно `gap` широк независимо от естествената ширина на
   конкретната снимка — а те са различни. Така вътрешните ръбове на всички
   снимки се подреждат на една отвесна линия, което само подсилва идеята за
   снимки, нанизани на конец. */
.story-beat {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 5vw, 3.4rem);
  margin: clamp(1.4rem, 3vw, 2.4rem) 0;
}
/* ⚠️ grid-row: 1 е задължителен и на четирите правила по-долу, не е излишен.
   Авторазполагането върви само НАПРЕД: при обърнат такт снимката заема колона 2,
   курсорът минава след нея и редът, който иска колона 1, вече не се побира на
   същия ред — браузърът му отваря ВТОРИ ред. Измерено при 1440px: тактове 2, 4
   и 6 бяха високи 580/470/628px при снимка от ~435px, а изречението стоеше под
   снимката вместо до нея. С изричен grid-row: 1 и двете деца остават на един ред. */
.story-beat > .story-photo { grid-column: 1; grid-row: 1; justify-self: end; }
.story-beat > .story-line { grid-column: 2; grid-row: 1; justify-self: start; }
.story-beat::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--burger-yellow);
  box-shadow: 0 0 0 4px var(--cream);
  z-index: 2;
}
/* обърнатият такт разменя колоните — не flex-direction, вече е решетка */
.story-beat--reverse > .story-photo { grid-column: 2; grid-row: 1; justify-self: start; }
.story-beat--reverse > .story-line { grid-column: 1; grid-row: 1; justify-self: end; }
.story-beat--reverse::before { background: var(--pizza-red); }

.story-photo {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;         /* важи само за .story-stamp, който е flex */
  /* ⚠️ fit-content, а не auto. Като клетка в решетката с justify-self: end
     ширината би трябвало и така да се свие по съдържанието, но снимката вътре
     носи 100% в своя min() и това прави собствения ѝ размер зависим от
     клетката — браузърът разрешава кръга в полза на цялата колона. Рамката
     ставаше 433px около снимка от 400px, тоест бялото паспарту излизаше 9px
     от едната страна и 24px от другата. fit-content къса зависимостта.
     Таванът 100% пак е нужен: под ~1000px половината от такта става по-тясна
     от рамката и снимката отново би пресякла конеца. */
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  background: #fff;
  padding: 9px;
  border-radius: 8px;
  box-shadow: 0 22px 40px rgba(32, 26, 20, 0.22), 0 6px 14px rgba(32, 26, 20, 0.16);
}
/* ⚠️ Ширината е ОПРЕДЕЛЕНА, а не `auto`, и това е поправка на истински бъг —
   не го връщай на `width: auto` заради "снимките да са в естествения си размер",
   защото резултатът е абсолютно същият, само че мястото се пази предварително.

   Измерено: незаредена снимка с width/height атрибути, но `width: auto`, заема
   0×0. Атрибутите дават само СЪОТНОШЕНИЕТО — няма собствена ширина, която то да
   умножи. Същата снимка с определена ширина заема 195×183 още преди файлът да е
   пристигнал, тоест точно колкото ще заеме и после.
   Заради тези 0×0 всяка мързеливо заредена снимка изникваше и избутваше
   страницата надолу, а котвите падаха на празно (виж бележката при `img` горе).

   Формулата дава СЪЩОТО, което даваше `width:auto` + max-width/max-height:
   по-малкото от собствената ширина, тавана по ширина и тавана по височина,
   превърнат в ширина през съотношението. --iw/--ih са пикселите на конкретния
   файл и се пишат инлайн в index.html до width/height атрибутите.
   Двата тавана са променливи, за да може .story-stamp да ги смени само тях. */
.story-photo img {
  --cap-w: min(400px, 52vw);
  --cap-h: 410px;
  display: block;
  width: min(calc(var(--iw, 400) * 1px), var(--cap-w), calc(var(--cap-h) * var(--iw, 4) / var(--ih, 3)));
  /* ⚠️ Таванът спрямо колоната стои в max-width, а НЕ като четвърто условие в
     min() горе. Процент вътре в самата width прави собствения размер на рамката
     зависим от клетката и браузърът разрешава кръга в полза на цялата колона —
     рамката ставаше 433px около снимка от 400px и бялото паспарту излизаше
     различно отляво и отдясно. В max-width процентът се пренебрегва, докато се
     мери съдържанието, тъй че рамката пак се свива по снимката.
     Ширината си остава ОПРЕДЕЛЕНА (виж бележката горе) — max-width само я
     ограничава и мястото продължава да се пази предварително. */
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}
.story-photo--r1 { transform: rotate(-2.4deg); }
.story-photo--r2 { transform: rotate(2.1deg); }
.story-photo--r3 { transform: rotate(-1.6deg); }
.story-photo--r4 { transform: rotate(2.6deg); }
.story-photo--r5 { transform: rotate(-2deg); }
.story-photo--r6 { transform: rotate(1.7deg); }
.story-photo--r7 { transform: rotate(-2.3deg); }

.story-line {
  flex: 1 1 220px;
  max-width: 280px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.3rem);
  line-height: 1.32;
  letter-spacing: 0.015em;
  color: var(--ink);
  text-align: left;
}
.story-beat--reverse .story-line { text-align: right; }

.story-stamp { display: flex; justify-content: center; margin-top: clamp(1.2rem, 4vw, 2.2rem); }
.story-stamp .story-photo { padding: 8px; }
/* печатът долу е по-малък — сменят се само двата тавана, формулата е обща */
.story-stamp .story-photo img { --cap-w: min(200px, 40vw); --cap-h: 210px; }
.story-photo--stamp { transform: rotate(-1.8deg); }

@media (max-width: 700px) {
  /* една колона; и двете деца се връщат в нея и се центрират, иначе снимката
     остава закачена за десния ръб (justify-self: end от десктопа) */
  .story-beat, .story-beat--reverse { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .story-beat > .story-photo, .story-beat--reverse > .story-photo,
  .story-beat > .story-line, .story-beat--reverse > .story-line {
    grid-column: 1;
    /* ⚠️ и grid-row обратно на auto — на десктопа и двете деца са заковани на
       ред 1; в една колона това би ги сложило В ЕДНА клетка, върху себе си */
    grid-row: auto;
    justify-self: center;
  }
  /* на мобилен снимката е първа и е най-високият елемент, така че точката
     пада на средата на целия блок (снимка + текст) вместо на конеца между
     тях — вместо това я "закачаме" на горния ръб на снимката */
  .story-beat::before, .story-beat--reverse::before { top: 0; }
  .story-line, .story-beat--reverse .story-line { max-width: 300px; text-align: center; }
}

/* ==========================================================================
   menu
   ========================================================================== */
.menu-photo-block { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* ---- менюта: черна "табела" за бургери, бяла "хартия" за пица ---- */
.menu-boards {
  display: grid;
  /* minmax(0, 1fr), НЕ 1fr: при "1fr" минимумът на трака е min-content на дъската,
     а той е по-широк от колоната на тесен екран (заради двуредовите цени по-долу) —
     тракът се разширява, дъската излиза извън .container и изглежда изместена надясно. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 2.8rem);
  align-items: stretch;
}
@media (max-width: 880px) { .menu-boards { grid-template-columns: minmax(0, 1fr); } }

.menu-board {
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3.2vw, 2.2rem);
  box-shadow: var(--shadow-md);
  /* "виж меню" от обектите скача направо тук (#menu-burger/#menu-pizza) —
     без собствен scroll-margin таблото щеше да излезе точно под фиксирания
     header + гирлянда, а не под тях */
  /* същата сметка като при section по-горе — дъската се сочи директно от
     бутоните "виж меню" в "обекти" и трябва да спира на същата височина */
  scroll-margin-top: calc(var(--header-h, 66px) + var(--bunting-h, 38px) + 32px);
}
.menu-board--burger { background: linear-gradient(165deg, #211a12, #14100b); border: 1px solid rgba(240, 180, 41, 0.28); }
.menu-board--pizza { background: var(--pizza-cream); border: 1.5px solid rgba(179, 39, 45, 0.35); }

.menu-board-head {
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 0.6rem;
  border-bottom: 2px solid;
}
.menu-board--burger .menu-board-head { border-color: rgba(240, 180, 41, 0.35); }
.menu-board--pizza .menu-board-head { border-color: rgba(179, 39, 45, 0.3); }

/* ---- хедър на всяко меню: иконата + името на обекта + адрес/телефон/часове
   на самото него — премести се тук от отделния панел над двете менюта, за
   да е ясно на пръв поглед кое меню на кой обект принадлежи, вместо да се
   гадае от обща информация над двете табла ---- */
/* ⚠️ Хедърът вече е БЛОК, а флексът слезе в .menu-board-brandline. Причината:
   .menu-board-info трябва да е на свой ред и с пълна ширина (виж бележката
   там). Пробвано беше просто flex-wrap на хедъра — тогава при тесен екран
   иконата се откъсва НАД името, защото при пренасяне флексът мести целия
   елемент, вместо да го свие. Обвивката държи иконата и името заедно на всяка
   ширина, точно както изглеждаха досега. */
.menu-board-head--brand {
  display: block;
  text-align: left;
}
.menu-board-brandline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
.menu-board-icon { height: 46px; width: auto; max-width: 56px; flex-shrink: 0; object-fit: contain; }
.menu-board-head-text { display: flex; flex-direction: column; gap: 0.2rem; }
.menu-board-shop {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  /* Явно 1.55 (наследеното от body), защото елементът вече е <h3>: глобалното
     h1..h4 иначе би му дало ред 1.15 и хедърът на таблото щеше да се свие с
     ~8px спрямо 46px-овата иконка до него. */
  line-height: 1.55;
}
/* ⚠️ Редът е СГЛОБЕН ОТ РЕДОВЕ (.mbi-row), не е един непрекъснат текст:
   всеки адрес стои със своя телефон, работното време е отделно (клиентът,
   01.09.2026). Списък от block-ове, а не <br>-ове, защото <br> вътре в
   елемент с data-i18n не оцелява — генераторът подменя ВЪТРЕШНИЯ ТЕКСТ и
   би го изял. Тук всеки ред си е собствен елемент с отделен ключ. */
/* ⚠️ width: 100% + flex-wrap на родителя е това, което сваля блока на СВОЙ ред
   под иконата и името. Без него дели ширината с иконата (46px + 0.9rem луфт) и
   най-дългият адрес не се събира на един ред. Мерено при 375px: 233px налични
   срещу 248px нужни. */
/* ⚠️ РАЗМЕРЪТ 0.8rem Е ТАВАН, НЕ ВКУС. Стегнатият случай е адресът на БУРГЕРИТЕ
   ("ул. Методи Македонски 2 · 0898 444 986") — най-дългият ред на двете табла,
   който клиентът иска на ЕДИН ред (01.09.2026). Мерено: иска ~19.4px ширина на
   всеки 1px от размера на шрифта, при налични (ширина на екрана − 81px), тоест
   при 375px таванът е 15.2px, а при 320px — едва 12.3px. Английската страница е
   също толкова стегната (233px от 238 при 320px), защото латиницата се изписва
   с друг шрифт.
   ⚠️ На 02.09.2026 това беше пробвано като плаващ clamp(0.75rem … 0.9rem) и
   клиентът ГО ВЪРНА: поиска размерът да си остане, а редът да личи чрез
   ПЛЪТНОСТ и чрез цветен телефон (двете правила по-долу). Не вдигай размера
   отново — видимостта вече се носи от другите два лоста. */
.menu-board-info { font-size: 0.8rem; line-height: 1.4; display: block; width: 100%; margin-top: 0.55rem; }
.menu-board-info .mbi-row { display: block; }
/* ⚠️ Само на най-тесните телефони (≤360px). Дори на собствен ред най-дългият
   адрес иска 248px, а таблото дава 238px — тези 10px се вадят оттук. 12px не е
   най-дребният текст на сайта (.menu-item-prices small е 10.24px), а
   контрастът не зависи от размера, тъй че мерените стойности остават. */
@media (max-width: 360px) {
  .menu-board-info { font-size: 0.75rem; }
}
/* ⚠️ Телефонът вътре в този ред Е ВРЪЗКА, а глобалното `a { color: inherit;
   text-decoration: none }` го прави неразличим от адреса и часовете около него —
   нито по цвят, нито по дебелина, нито по нищо. Това е WCAG 1.4.1 (ниво A):
   връзка в текст трябва да се различава и без цвят. Подчертаването е
   най-евтиният нецветен признак и не пипа брандовите цветове.
   Другите телефони на сайта минават и без него, защото вече носят такъв признак:
   .loc-plaque .row a е 600 срещу normal наоколо, .contact-info .row a и
   .delivery-note .phones a са 700 и стоят сами на реда. */
.menu-board-info a { text-decoration: underline; text-underline-offset: 0.18em; }
.menu-board--burger .menu-board-shop { color: var(--burger-yellow); }
/* ⚠️ 0.72, вдигнато от 0.6 на 02.09.2026 (клиентът: редът да "се набива на очи"
   повече). Мерено срещу СВЕТЛИЯ край на градиента на таблото (rgb(33,26,18)),
   който е най-лошият случай за светъл текст: 0.6 даваше 5.96:1, 0.72 дава
   8.01:1. Посоката е безопасна — по-плътен светъл текст върху тъмно само вдига
   контраста. */
.menu-board--burger .menu-board-info { color: rgba(245, 234, 217, 0.72); }
/* ⚠️ Телефонът е в цвета на своята подмарка (клиентът, 02.09.2026: "на бургерите
   номера жълт, на пиците червен"), и е на ПЪЛНА плътност срещу 0.72/0.82 на реда
   около него — това е второто нещо, което го изважда напред.
   Мерено срещу СВЕТЛИЯ край на градиента (най-лошият случай): 9.23:1. Същото
   жълто вече носят името на обекта и цените на това табло, тъй че номерът не
   въвежда нов цвят, а се връзва с тях. */
.menu-board--burger .menu-board-info a { color: var(--burger-yellow); }
.menu-board--pizza .menu-board-shop { color: var(--pizza-red); }
/* ⚠️ Първо беше 0.6, вдигнато на 0.70 при одита (31.08.2026), защото 0.6 върху
   --pizza-cream мереше 4.29:1, тоест под 4.5:1 — а точно тук стоят двата
   телефона на пицариите. От 02.09.2026 е 0.82 по същата причина като отсреща:
   клиентът поиска редът да личи повече. 0.82 дава 8.92:1.
   ⚠️ Двете табла НЕ носят една и съща стойност и не трябва да носят: текстът е
   светъл върху тъмно от едната страна и тъмен върху светло от другата, тъй че
   еднаква плътност дава различен контраст. Мери и двете поотделно. */
.menu-board--pizza .menu-board-info { color: rgba(36, 31, 26, 0.82); }
/* ⚠️ --pizza-red върху --pizza-cream мери 4.91:1 — минава прага 4.5 за нормален
   текст, но с ТЪНЪК запас, за разлика от жълтото отсреща (9.23:1). Избрано е
   пак то, защото е брандовото червено на това табло (същото носят името на
   обекта и цените) и е по-ярко от --pizza-red-deep, тоест "бие" повече, което
   беше целта.
   ⚠️ Ако този ред някога стане по-блед (по-светъл фон, друга плътност, полу-
   прозрачност), лостът е --pizza-red-deep (#8f1d22) → 8.53:1. Не слагай просто
   opacity на връзката — това сваля контраста под прага. */
.menu-board--pizza .menu-board-info a { color: var(--pizza-red); }

.menu-item { padding: 0.85rem 0; border-bottom: 1px dashed; }
.menu-board--burger .menu-item { border-color: rgba(240, 180, 41, 0.16); }
.menu-board--pizza .menu-item { border-color: rgba(179, 39, 45, 0.14); }
.menu-board-items .menu-item:last-child { border-bottom: none; }

.menu-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.9rem; }
/* ⚠️ Обвивка около името + чушката за лют продукт. Съществува, за да остане
   .menu-item-head с точно ДВЕ деца (име и цена) — трето пряко дете разпилява
   space-between-а, същият капан както при .header-inner.
   min-width: 0 позволява на дълго име да се пренася, вместо да изтласква цената. */
.menu-item-name { display: flex; align-items: center; gap: 0.34em; min-width: 0; }
/* ⚠️ ЕДИНСТВЕНОТО число за размера на чушката — променя се само --pep-size.
   ⚠️ ТАВАНЪТ Е 1.45em И Е МЕРЕН, не е на око: редът на артикула е висок 23px
   (толкова са и всички редове без чушка). При 1.45em чушката е точно 23px и още
   се побира; при 1.65em става 26px и РАЗТЯГА реда с 3px, тоест този един ред
   спира да е като другите на таблото. Над 1.45em се пипа само ако някой съзнателно
   иска по-висок ред.
   1.45em е избраното по изрично искане на клиента (02.09.2026): "най-голямата,
   която не разваля нищо". Тоест седи ТОЧНО на тавана — проверено при 320/375/
   desktop и на двата езика, навсякъде редът остава 23px и цената не мърда.
   ⚠️ Точно затова всяко пипане нагоре е чупене: 1.5em вече е 24px.
   flex-shrink: 0 пази чушката да не се смачка, когато името е дълго. */
.spicy-mark { --pep-size: 1.45em; width: var(--pep-size); height: var(--pep-size); flex-shrink: 0; }
/* ⚠️ Дребният вариант — за чушка ВЪТРЕ в изречението на описанието (три меса),
   а не до името на артикула. Мери се спрямо описанието (0.83rem = 13.28px), тоест
   1.15em ≈ 15px: колкото главна буква на реда, за да не разстила редовете.
   vertical-align е задължителен точно тук: в текстов поток SVG-то ляга на
   основната линия и без него виси нависоко спрямо буквите. При голямата чушка
   такъв ред няма — там подравняването се поема от flex контейнера. */
.spicy-mark--sm {
  --pep-size: 1.4em;
  display: inline-block;
  vertical-align: -0.24em;
  /* ⚠️ Отрицателните полета НЕ са трик за нагласяне — те махат ВЪЗДУХА, който
     самата рисунка носи. Чушката заема само ~38% от ширината на своята 24×24
     кутия (пътищата ѝ живеят между x 7.6 и 16.8), тоест от двете ѝ страни остават
     по ~31% празно. Вътре в скоби това се вижда като „(  ⟨чушка⟩  )“ и скобите
     увисват. Стойността е сметната, не налучкана: 0.31 × 1.4em ≈ 0.43em въздух от
     страна, вадим 0.3em и оставяме ~0.13em дъх.
     ⚠️ Ако --pep-size се смени, това число се преизчислява по същата сметка. */
  margin: 0 -0.3em;
}
.menu-item-head h4 { font-size: 1.02rem; text-transform: capitalize; font-weight: 700; letter-spacing: 0.01em; }
.menu-item-head h4.cap-first { text-transform: none; }
.menu-board--burger .menu-item-head h4 { color: #f5ead9; }
.menu-board--pizza .menu-item-head h4 { color: #241f1a; }

.menu-item p { font-size: 0.83rem; margin-top: 0.3rem; line-height: 1.4; max-width: 34ch; }
.menu-board--burger .menu-item p { color: rgba(245, 234, 217, 0.55); }
.menu-board--pizza .menu-item p { color: rgba(36, 31, 26, 0.62); }

.menu-item-prices { text-align: right; flex-shrink: 0; }
.menu-item-prices div { white-space: nowrap; font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; }
.menu-item-prices div + div { margin-top: 0.15rem; }
/* ⚠️ 0.72, а не 0.55 (одит, 31.08.2026). Това е НАЙ-ДРЕБНИЯТ текст на сайта —
   0.64rem = 10.24px — и с него имаше и най-нисък контраст: жълтото при 0.55
   върху тъмното табло мереше 3.77:1. При 0.72 е 5.6:1.
   ⚠️ Правилото е общо за двете табла. Сега единственото двустепенно ястие е
   телешки, тоест се рисува само върху тъмното. Ако някой ден се добави
   двустепенна пица, същата плътност върху --pizza-cream пада на 3.2:1 — там
   ще трябва отделна стойност, не същата. */
.menu-item-prices small { display: block; font-weight: 500; font-size: 0.64rem; text-transform: lowercase; opacity: 0.72; margin-top: -0.1rem; }
.menu-item-prices--split { display: flex; align-items: flex-start; gap: 0.8rem; }
.menu-item-prices--split div { text-align: right; }
.menu-item-prices--split div + div { margin-top: 0; padding-left: 0.8rem; }
.menu-board--burger .menu-item-prices--split div + div { border-left: 1px dashed rgba(245, 234, 217, 0.22); }
.menu-board--pizza .menu-item-prices--split div + div { border-left: 1px dashed rgba(36, 31, 26, 0.18); }
.menu-board--burger .menu-item-prices div { color: var(--burger-yellow); }
.menu-board--pizza .menu-item-prices div { color: var(--pizza-red); }

@media (max-width: 460px) {
  .menu-item-prices--split { gap: 0.5rem; }
  .menu-item-prices--split div + div { padding-left: 0.5rem; }
}

.menu-board-addons { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(240, 180, 41, 0.25); }
.menu-board-addons h5 { font-size: 0.78rem; text-transform: lowercase; letter-spacing: 0.02em; color: var(--burger-yellow); margin: 0.9rem 0 0.5rem; }
.menu-board-addons h5:first-child { margin-top: 0; }
.board-chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  margin: 0 0.4rem 0.4rem 0;
  background: rgba(240, 180, 41, 0.1);
  color: #f5ead9;
  border: 1px solid rgba(240, 180, 41, 0.3);
}
.board-addon-list li {
  display: flex;
  justify-content: space-between;
  font-size: 0.83rem;
  padding: 0.3rem 0;
  color: rgba(245, 234, 217, 0.7);
  border-bottom: 1px dashed rgba(240, 180, 41, 0.12);
}
.board-addon-list li:last-child { border-bottom: none; }

.menu-board-note {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(179, 39, 45, 0.2);
  font-size: 0.82rem;
  font-style: italic;
  /* ⚠️ Плътно, не 0.8 (одит, 31.08.2026): при 0.8 върху --pizza-cream мереше
     4.38:1 на 13.1px — под прага, и то на курсив, който е и без това по-труден.
     Плътното дава 6.22:1. Цветът е същият, движи се само плътността. */
  color: rgb(179, 39, 45);
}
/* втора бележка веднага след първата — без да дублира разделителната линия */
.menu-board-note + .menu-board-note {
  margin-top: 0.4rem;
  padding-top: 0;
  border-top: none;
}

.menu-gallery { margin-top: clamp(3rem, 6vw, 4rem); text-align: center; }

/* ---- hand-scrawled label tag, pinned to the parcel below ---- */
.gallery-tag-wrap { position: relative; z-index: 3; }
.gallery-tag {
  display: inline-block;
  transform: rotate(-2.3deg);
  background: var(--paper);
  padding: 0.5rem 1.6rem 0.9rem;
  margin-bottom: clamp(-26px, -3vw, -16px);
  clip-path: polygon(
    1% 8%, 12% 0%, 34% 4%, 58% 0%, 82% 5%, 100% 1%,
    97% 34%, 100% 62%, 96% 100%, 70% 96%, 42% 100%, 18% 95%, 0% 100%,
    4% 68%, 0% 38%
  );
  box-shadow: 0 10px 20px rgba(32, 26, 20, 0.16);
}
.gallery-tag h3 {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1.05;
  color: var(--ink);
  text-transform: lowercase;
}
/* same override as .menu-item-head h4.cap-first: клиентът иска само първата
   буква главна ("С какво ще се срещнете:"), а text-transform: lowercase
   по-горе би я снижило обратно */
.gallery-tag h3.cap-first { text-transform: none; }
.gallery-tag-tape {
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
}

.gallery-float {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.3rem, 1.5vw, 1rem);
  /* ⚠️ РЕДОВЕТЕ имат собствено, ЗНАЧИТЕЛНО по-голямо разстояние от колоните, и
     това е измерено, не на око (02.09.2026, по сигнал на клиента за застъпени
     снимки). Общото `gap` по-горе дава на редовете 5,6px при 375px и 16px на
     десктоп — твърде малко, защото изрезките са завъртени и разместени по
     вертикала, тъй че съседите по колона се засичат с реални пиксели.
     ⚠️ Колонното разстояние НЕ се пипа: то решава колко снимки се събират на
     ред (2 на телефон, 3 около 560px, 4 на десктоп). Пипне ли се, се мени
     цялата подредба, а с нея и кои снимки стават съседи по вертикала.
     Долната граница 1.6rem е за най-тесните телефони (под ~360px галерията
     пада на ЕДНА колона и всичките 10 снимки се редят една под друга). */
  row-gap: clamp(1.6rem, 2.8vw, 1.9rem);
  /* ⚠️ Горното поле е ЧУВСТВИТЕЛНО по-голямо от другите три и това не е
     разсеяност — то е мястото, в което влизат облачетата с имената на ГОРНИЯ
     ред (.gallery-bubble). Всички останали редове имат къде да изплуват: над
     тях стои предишният ред, вътре в колета. Горният няма нищо над себе си
     освен хартията.
     ⚠️ Сметката има ДВЕ събираеми, не едно. Освен височината на облачето (46px
     + 8px хлабина), трябва да се приспадне и колко навътре хапе скъсаният ръб:
     точките по горния ръб на clip-path долу са в ПРОЦЕНТИ от височината на
     целия колет, тоест при 1109px колет 3% са цели 33px. Мерено, чистото място
     над първия ред беше едва 9px при нужни 56px.
     Ако някой ден се смени броят снимки (колетът става по-висок или по-нисък),
     тези 3% се менят в пиксели — премери наново, вместо да смяташ наум. */
  padding: clamp(7rem, 8.5vw, 7.6rem) clamp(1.2rem, 5vw, 3rem) clamp(1.8rem, 4vw, 2.6rem);
  background-image: url('../images/brand/kraft-paper.webp');
  background-size: cover;
  background-position: center;
  transform: rotate(-0.6deg);
  clip-path: polygon(
    0% 3%, 9% 0%, 19% 2%, 29% 0.5%, 39% 3%, 49% 0%, 59% 2.5%, 69% 0.5%, 79% 3%, 89% 0%, 100% 2%,
    98.5% 12%, 100% 24%, 97.5% 36%, 100% 48%, 98.5% 60%, 100% 72%, 97.5% 84%, 100% 94%,
    91% 98.5%, 81% 100%, 71% 97.5%, 61% 100%, 51% 98%, 41% 100%, 31% 97.5%, 21% 100%, 11% 98%, 0% 99%,
    1.5% 88%, 0% 76%, 2% 64%, 0% 52%, 1.5% 40%, 0% 28%, 2% 16%
  );
  filter: drop-shadow(0 20px 26px rgba(32, 26, 20, 0.3));
}
.paper-tape {
  position: absolute;
  width: clamp(64px, 8vw, 88px);
  height: 30px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(45deg, #ddc9a3 0 6px, #cdb890 6px 12px);
  box-shadow: 0 2px 5px rgba(32, 26, 20, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  opacity: 0.92;
  z-index: 2;
}
.paper-tape--tl { top: -13px; left: 9%; transform: rotate(-10deg); }
.paper-tape--br { bottom: -13px; right: 11%; transform: rotate(7deg); }

.gallery-cell { width: clamp(130px, 19vw, 210px); position: relative; z-index: 1; }

/* На телефон (реално измерено: ≤480px, до 500px вече е 3 на ред) галерията
   сама пада на точно 2 на ред заради клампнатата ширина на клетката — при 10
   снимки (5 бургера редуват се с 5 пици в HTML-а) това дава 5 реда с чиста
   колона бургери вляво и колона пици вдясно, ОСВЕН последния ред: там реалният
   ред в HTML-а свършва с ...капричоза(пица), вентричина(пица), смоуки(бургер) —
   две пици подред разместват последната двойка на пица|бургер вместо бургер|пица.
   ⚠️ Пипнати са само двете последни клетки, само на този breakpoint — order:0
   (подразбиране) стои по-рано от положителен order, затова first 8 клетки
   остават на естествения си ред, а тези две само разменят местата си МЕЖДУ
   СЕБЕ СИ. На desktop/tablet (виждано на 500/600/700px — там реда естествено е
   3 или 4 на ред) този правилник изобщо не важи и подредбата си остава каквато
   е била — заявено е само за мобилния изглед. */
@media (max-width: 480px) {
  .gallery-cell { order: var(--mo, 0); }
}
.float-item {
  display: block;
  width: 100%;
  /* ⚠️ Множителят 0.5 върху --ty е ИЗМЕРЕН и задължителен — не го махай, за да
     "върнеш разпръскването както беше" (02.09.2026). Инлайн стойностите в
     index.html вървят от -13px до +13px и са мислени за свободна подредба, но
     когато две съседни по КОЛОНА снимки са разместени една срещу друга (горната
     бутната надолу +11, долната вдигната -11), те се затварят с 22px наведнъж и
     реалните им пиксели се застъпват. Половинката запазва характера на
     разпръскването, но сваля амплитудата до ±6,5px.
     ⚠️ Стойностите се пипат ТУК, а не в index.html: инлайн числата остават
     единственият източник и остават четими такива, каквито ги е избрал дизайнът. */
  transform: rotate(var(--r, 0deg)) translateY(calc(var(--ty, 0px) * 0.5));
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.5));
  transition: transform 0.35s ease, filter 0.35s ease;
  cursor: default;
  /* ⚠️ При допир/клик transform+filter стартират ЕДНОВРЕМЕННО и браузърът
     повдига елемента в собствен composite слой точно в този момент — за един
     кадър се вижда правоъгълната граница на слоя като сянка "квадратче" зад
     изрязаната снимка, преди filter да оформи сянката по реалните пиксели.
     will-change подготвя слоя предварително, докато нищо не се случва, и
     маха този единичен кадър на "пресвяткане". */
  will-change: transform, filter;
}
.float-item img { width: 100%; height: auto; display: block; }

/* ⚠️ И :hover (0,2,0), и .gallery-cell.bubble-on .float-item (0,3,0) по-долу са
   с ПО-ВИСОКА специфичност от базовото .float-item, тъй че изплуването при
   посочване и при докосване НЕ се влияе от множителя върху --ty по-горе.
   Проверено след промяната: изплулото състояние е matrix(1.12,0,0,1.12,0,-11.2),
   тоест точно както беше. */
@media (hover: hover) {
.float-item:hover {
  transform: rotate(0deg) scale(1.12) translateY(-10px);
  filter: drop-shadow(0 24px 18px rgba(0, 0, 0, 0.6));
  z-index: 2;
  position: relative;
}
}

/* ---- облачето с името на ястието ----------------------------------------
   Показва се при посочване с мишка или при докосване на телефон. Заглавието
   на секцията представя ястията като лица, с които се срещаш — облачето е
   репликата им, тоест жестът вече е обещан от текста отгоре.

   Материалът НЕ е нов: късче скъсана бяла хартия с ръкописния Caveat, точно
   като етикета ".gallery-tag" над колета и като листчетата в разказа. Затова
   тук няма нито заоблена капсула, нито полупрозрачен тъмен tooltip — те щяха
   да са единственият елемент в тази секция със собствен речник.

   ⚠️ Скъсаният ръб И опашчицата са ЕДНА форма, издълбани в един clip-path.
   Опашчица като ::after е невъзможна: clip-path на елемента реже и неговите
   псевдоелементи. (Същият капан като лястовичата опашка на знамената.)
   Тялото свършва на 76% от височината, опашката слиза до 100% — затова долният
   padding е толкова голям, буквите не бива да влизат в нея.

   ⚠️ Сянката е filter: drop-shadow, а НЕ box-shadow. box-shadow се рисува по
   правоъгълната кутия и се реже от clip-path заедно с нея, тоест изчезва.
   Същото решение като при .shop-flag и .gallery-float.

   ⚠️ z-index: 4 бие .float-item:hover (2) в СЪЩИЯ контекст на наслагване —
   .gallery-cell е position: relative + z-index: 1, значи е контекст. Без това
   уголемената снимка би се качила върху надписа.

   ⚠️ pointer-events: none — облачето лежи върху клетката и без това мишката
   минава "през" него, тоест посочването не мига, когато курсорът влезе в него. */
.gallery-bubble {
  position: absolute;
  /* ⚠️ Стои НАД ястието, не върху него (клиентът, 31.08.2026) — иначе закриваше
     до 51% от снимката, а тя е апетитният кадър, заради който галерията
     съществува. Мери се от ДОЛНИЯ ръб нагоре, а не с top, защото клетките са с
     различна височина (снимките са с различни съотношения) и само така долният
     ръб на облачето пада на едно и също място спрямо ястието при всичките 10.
     8-те пиксела са хлабина: при посочване снимката се уголемява 1.12 и се
     вдига с 10px, тоест горният ѝ ръб се качва с ~16px (десктоп ~21px). Затова
     ТЯЛОТО на облачето остава чисто над нея, а само върхът на опашчицата я
     докосва — точно както опашка на балонче трябва да сочи говорещия.
     ⚠️ 14px, а не 8: уголемяването расте с ВИСОКОТО на снимката (0.06·h + 10),
     тъй че на десктоп е ~21px срещу ~16px на телефон. При 8px тялото влизаше
     7px в ястието на широк екран. 14px изравнява двата случая. */
  bottom: calc(100% + 14px);
  left: 50%;
  z-index: 4;
  /* ⚠️ Ограничението е в max-width, не в width. Процент вътре в width кара
     кутията да се мери спрямо цялата клетка, а не спрямо текста — виж бележката
     за .story-photo img. vw е безопасно, то не е процент от родителя.
     ⚠️ Нарочно е ПО-ШИРОКО от клетката (клетката е 131px на тесен телефон).
     Облачето може да излиза странично върху съседите — вдигнатият z-index го
     носи отгоре. Мерено: до скъсания ръб на хартията остават най-малко 65px
     при 320px екран и 147px при 1280px, тоест clip-path няма какво да отреже,
     а scrollWidth остава 320 при 320px екран, тоест няма и преливане настрани.
     Печалбата е, че най-дългият надпис ("вегетариански бургер") се събира на
     ЕДИН ред: два реда правеха облачето по-високо и то закриваше 57% от
     ястието вместо 40%. Не свивай това обратно — ще върне втория ред. */
  width: max-content;
  max-width: min(190px, 56vw);
  padding: 0.42rem 0.85rem 1.15rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-hand);
  /* само 700 е заредено от Google Fonts — 400 тихо пада на резервния шрифт */
  font-weight: 700;
  /* ⚠️ Подът 1.12rem е мерен, не е по вкус. Caveat е ръкописен с ниски букви:
     при 0.98rem излизаше 15.68px, докато ВСЕКИ друг Caveat надпис на сайта е
     28–30px (.story-line, .gallery-tag h3) — четеше се като ~11px нормален
     шрифт. Клиентът вече е връщал точно това оплакване за дребните редове по
     знамената (.flag-days / .flag-since имат вдигнат под по същата причина).
     Не сваляй пода, за да спестиш място върху ястието. */
  font-size: clamp(1.12rem, 2.4vw, 1.34rem);
  line-height: 1.1;
  text-align: center;
  clip-path: polygon(
    1% 11%, 15% 3%, 34% 8%, 52% 2%, 70% 7%, 87% 3%, 99% 10%,
    97% 32%, 100% 54%, 98% 76%,
    80% 79%, 60% 75%,
    54% 100%, 46% 75%,
    27% 79%, 9% 75%,
    2% 52%, 0% 30%
  );
  filter: drop-shadow(0 6px 10px rgba(32, 26, 20, 0.34));
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(7px) scale(0.88) rotate(var(--br, -2deg));
  /* от опашчицата нагоре — изплува от самото ястие, а не от въздуха */
  transform-origin: 50% 100%;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.42, 0.64, 1);
}

/* Показаното състояние. .bubble-on се слага от JS при докосване; посочването с
   мишка кара същото през :hover по-долу. Двете дават ЕДИН И СЪЩИ вид, за да
   няма два различни жеста за едно и също нещо. */
.gallery-cell.bubble-on { z-index: 5; }
.gallery-cell.bubble-on .gallery-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1) rotate(var(--br, -2deg));
}
/* на тъч ястието изплува точно както при посочване с мишка — иначе докосването
   показва надпис, но самата снимка не реагира и жестът се чете като счупен */
.gallery-cell.bubble-on .float-item {
  transform: rotate(0deg) scale(1.12) translateY(-10px);
  filter: drop-shadow(0 24px 18px rgba(0, 0, 0, 0.6));
}

/* ⚠️ iOS Safari НЕ поражда click върху елемент, който не смята за кликаем, а
   без click докосването не отваря нищо. Лекът е cursor: pointer — същият, който
   .btn вече носи по същата причина ("частично заради iOS", виж бележката там).
   ⚠️ Трябва да е налице ОЩЕ ПРИ ПЪРВОТО докосване, затова се закача за заявка
   към устройството, а не за класа .is-touch, който JS слага чак СЛЕД първия
   допир — иначе точно първият тап пропада.
   ⚠️ .float-item носи cursor: default и е ОТГОРЕ по дърво, тъй че трябва да се
   пребори изрично; иначе снимката (реалната цел на пръста) пак е "некликаема".

   ⚠️ Синият taп-правоъгълник вече е изгасен ГЛОБАЛНО на body (виж горе в
   reset-а) — тук НЕ се повтаря -webkit-tap-highlight-color, защото е
   наследимо свойство и body го покрива за цялото дърво. Историята: първо
   беше сложено само тук, докато клиентът провери и другите бутони и се
   оказа, че браузърът никога никъде не го е гасил — преместено на body на
   31.08.2026, за да важи навсякъде наведнъж. */
@media (hover: none), (pointer: coarse) {
  .gallery-cell,
  .gallery-cell .float-item { cursor: pointer; }
}

/* ⚠️ ЗАДЪЛЖИТЕЛНО в @media (hover: hover), както .btn, .plat и .main-nav a.
   На тъч браузърът лепва :hover при докосване и го ЗАДЪРЖА — последното
   докоснато ястие щеше да остане с отворено облаче завинаги, а точно затова
   докосването минава през .bubble-on, който JS може да махне.
   ⚠️ html:not(.is-touch) е ВТОРАТА ключалка и не е излишна: заявката за hover
   описва основното посочващо устройство, тъй че тъч лаптоп и хибридните машини
   твърдят hover: hover, макар човекът да пипа с пръст. Там :hover пак залепва
   при допир и повторното докосване не можеше да загаси надписа — .bubble-on се
   махаше, а :hover го държеше отворен. JS слага .is-touch на първия допир. */
@media (hover: hover) {
  html:not(.is-touch) .gallery-cell:hover { z-index: 5; }
  html:not(.is-touch) .gallery-cell:hover .gallery-bubble {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1) rotate(var(--br, -2deg));
  }
}

/* ==========================================================================
   locations
   ========================================================================== */

/* ---- общата оценка в Google ----
   Казва се ВЕДНЪЖ, под заглавието на секцията, и НЕ стои по табелките на
   обектите. Причината е, че двата профила в Google не се покриват с трите
   обекта: "facefood BURGER and PIZZA shop" държи заедно Методи Македонски 2
   и Европа 36А, а "facefood PIZZA shop" е само Козлодуй 18. Сложено по
   табелките, числото на общия профил излизаше два пъти и се четеше като
   двойно броене — точно това клиентът докладва (2026-08-30). Едно число на
   едно място няма този проблем.

   ⚠️ Плътен бял чип, а НЕ гол текст. Дребният ред тук лежи върху тиражираните
   хиксчета и клиентът го видя точно така — "изчезва в бекграунда". Мастилото
   беше достатъчно тъмно (--ink държи 7.3:1 дори под плътна четка); пречеше
   шарката ЗАД буквите. Върху бяло редът мери 17.2:1. Същият похват като
   .milestone в "за нас": плътна хартия върху текстурата, не по-тъмен текст.

   ⚠️ Вдигането на z-index е на #locations .section-head, а НЕ на обвивката
   вътре. .loc-panel е .glass-panel, тоест носи backdrop-filter и си прави
   собствен стекинг контекст; .section-head носи transform от .fade-in и също
   си прави един. И двата са на z-index: auto, значи ги подрежда DOM редът —
   панелът е след главата и печели. z-index върху вътрешната обвивка нарежда
   само ВЪТРЕ в главата: мерено, менюто излизаше зад картите и не се кликаше
   (elementFromPoint връщаше .loc-card, не реда). Селекторът е стеснен до
   #locations нарочно — .section-head е общ за петте секции и няма причина
   другите да мърдат. */
#locations .section-head { position: relative; z-index: 5; }

.loc-trust-wrap { position: relative; display: inline-block; margin-top: 1.15rem; }

.loc-trust {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem; flex-wrap: wrap;
  padding: 0.62rem 1.15rem;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .loc-trust:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.loc-trust:active { transform: translateY(0) scale(0.98); }
.loc-trust:focus-visible { outline: 3px solid var(--burger-yellow); outline-offset: 3px; }
.loc-trust[aria-expanded="true"] { box-shadow: var(--shadow-md); }

.loc-trust-g { width: 1.2em; height: 1.2em; flex-shrink: 0; }
/* ⚠️ НЕ --burger-yellow-deep: върху бяло то мери 2.2:1 и звездите избеляват —
   същият капан, който вече е описан при имената на обектите в "за нас".
   #ad760f мери 3.91:1 и още се чете като злато, не като кафяво. */
.loc-trust-stars { color: #ad760f; letter-spacing: 0.06em; font-size: 0.9em; }
.loc-trust-line { font-weight: 600; }
.loc-trust-rate, .loc-trust-num { font-family: var(--font-head); font-weight: 800; }
/* tabular-nums + ширина, заключена от JS преди отброяването — иначе редът
   трепка, докато числото минава от 1 през 2 към 3 цифри */
.loc-trust-num { display: inline-block; text-align: center; font-variant-numeric: tabular-nums; }
.loc-trust-caret { width: 0.6em; height: 0.6em; flex-shrink: 0; opacity: 0.5; transition: transform 0.2s ease; }
.loc-trust[aria-expanded="true"] .loc-trust-caret { transform: rotate(180deg); }

/* ---- менюто "кой обект да оценя" ---- */
.rate-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: min(360px, 92vw);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  text-align: left;
}
.rate-menu[hidden] { display: none; }
/* човчицата нагоре към чипа */
.rate-menu::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: var(--paper);
}
.rate-menu-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding: 0.45rem 0.7rem 0.55rem;
  margin: 0;
}
.rate-menu a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink);
  min-height: 44px;
}
@media (hover: hover) { .rate-menu a:hover { background: var(--cream-deep); } }
.rate-menu a:active { background: var(--cream-deep); }
.rate-menu a:focus-visible { outline: 3px solid var(--burger-yellow); outline-offset: -2px; }

/* Профилът на Методи Македонски + Европа 36А покрива ДВА обекта, затова носи
   двата знака — застъпени, разкривени и с бургера паднал ВЪРХУ пицата и малко
   по-нагоре. Оттам се чете, че вървят заедно, преди да си стигнал до адресите
   отдолу.

   ⚠️ Кутията е с ФИКСИРАНА ширина и съдържанието ѝ е ЦЕНТРИРАНО, не по левия
   ръб. Точно това държи знака на Козлодуй на отвесната ос на двойката отгоре:
   каквато и да е ширината на съдържанието (два застъпени знака или един),
   центърът му съвпада с центъра на кутията. Мерено: и двата реда центрират на
   54.21px, а визуалните центрове се разминават с 0.25px. При flex-start
   единичният знак се измества и линията се чупи. */
.rate-menu-icons {
  display: flex; flex-shrink: 0; align-items: center;
  justify-content: center; width: 40px;
}
.rate-menu-icons img { width: 22px; height: 22px; object-fit: contain; position: relative; }
.rate-menu-icons img + img { margin-left: -9px; }
/* ⚠️ z-index, защото по DOM ред вторият знак би се рисувал върху първия, а
   искаме бургерът отгоре.
   ⚠️ Нито translateY, нито rotate местят оста: отместването е по Y, а пазената
   линия е по X; завъртането пък е около собствения център на всеки знак. */
.rate-menu-icons img:first-child { transform: translateY(-5px) rotate(-9deg); z-index: 2; }
.rate-menu-icons img:nth-child(2) { transform: translateY(2px) rotate(6deg); z-index: 1; }
/* ⚠️ Еднаква специфичност с :first-child, затова СЛЕД него — иначе единственият
   знак на втория ред би взел вдигането с 5px, предназначено за бургера. */
.rate-menu-icons img:only-child { transform: rotate(-5deg); }

.rate-menu-text b { display: block; font-size: 0.84rem; font-weight: 700; line-height: 1.3; }
.rate-menu-text > span {
  display: block; margin-top: 0.12rem;
  font-size: 0.76rem; font-weight: 500; line-height: 1.4;
  color: var(--ink-soft);
}

.loc-panel { display: block; }
.loc-group { margin-bottom: 3rem; }
.loc-panel .loc-group:last-child { margin-bottom: 0; }
.loc-group-title {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.3rem;
}
.loc-group-title img { height: 38px; width: auto; max-width: 46px; object-fit: contain; }
.loc-group-title h3 { font-size: 1.5rem; text-transform: lowercase; }
.loc-cards { display: grid; grid-template-columns: 1fr; gap: 1.8rem; }

/* each location is one scene: a framed photo of the real shopfront, pinned
   above an enamel/chalk plaque, both sitting on that shop's own real wall
   material (brick / boards) — the texture runs the full height of the card */
.loc-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.35s ease-out, transform 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--cream);
  background-size: cover;
  background-position: center;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.3rem, 3vw, 2rem);
}
@media (hover: hover) {
  .loc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
}
.loc-card--bw { background-image: url('../images/brand/texture-boards-bw.jpg'); }
.loc-card--brick { background-image: url('../images/brand/texture-brick.jpg'); }
.loc-card--wood { background-image: url('../images/brand/texture-boards-brown.jpg'); }

/* photo shown whole, uncropped, like a real print pinned to the wall —
   sized by its own natural ratio, lifted off the texture with a deep
   layered shadow instead of being forced into a cropped box */
.loc-card-photo {
  align-self: flex-start;
  display: inline-flex;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 26px 46px rgba(0, 0, 0, 0.48), 0 8px 16px rgba(0, 0, 0, 0.3);
}
/* определена ширина по същата причина като при .story-photo img — виж бележката
   там; трите снимки на обектите са с различни съотношения (пейзаж / квадрат /
   портрет) и всяка си носи своите --iw/--ih */
.loc-card-photo img {
  --cap-h: clamp(260px, 42vw, 460px);
  display: block;
  width: min(calc(var(--iw, 400) * 1px), calc(var(--cap-h) * var(--iw, 4) / var(--ih, 3)));
  /* ⚠️ Таванът спрямо картата стои в max-width, а НЕ като трето условие в min()
     горе — виж същата бележка при .story-photo img. Тук 100% беше вътре в width
     и понеже .loc-card-photo е inline-flex (свива се по снимката), процентът се
     разрешаваше срещу родител, който сам зависи от детето: кръгът се затваряше
     на нула. Измерено на 2026-08-31: незаредената pizza-signage.jpg заемаше
     0×0 вместо 211×260, картата беше 382px вместо 642px и в момента, в който
     файлът пристигнеше, страницата подскачаше с 260px под пръста на човека.
     В max-width процентът се пренебрегва, докато се мери съдържанието, тъй че
     ширината си остава определена и мястото се пази предварително. */
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}
.loc-card--bw .loc-card-photo { transform: rotate(-1.1deg); }
.loc-card--brick .loc-card-photo { transform: rotate(0.9deg); }
.loc-card--wood .loc-card-photo { transform: rotate(-0.7deg); }

.loc-plaque {
  position: relative;
  align-self: flex-start;
  max-width: 380px;
  width: 100%;
  background: var(--pizza-cream);
  border: 2px solid var(--pizza-red-deep);
  border-radius: var(--radius-sm);
  padding: 1.3rem 1.4rem 1.4rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
  color: #241f1a;
}
.loc-plaque--dark { background: var(--burger-black); border-color: var(--burger-yellow); color: #f5ead9; }
.loc-plaque-bolt {
  position: absolute;
  top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), rgba(0, 0, 0, 0.4) 75%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.loc-plaque-bolt--l { left: 9px; }
.loc-plaque-bolt--r { right: 9px; }

.loc-plaque h4 { font-size: 1.15rem; margin-bottom: 0.55rem; }
.loc-plaque .row { display: flex; gap: 0.55rem; align-items: flex-start; margin-bottom: 0.4rem; font-size: 0.9rem; color: rgba(36, 31, 26, 0.68); }
.loc-plaque--dark .row { color: rgba(245, 234, 217, 0.72); }
.loc-plaque .row a { color: inherit; font-weight: 600; }
.row-icon { width: 0.95em; height: 0.95em; flex-shrink: 0; margin-top: 0.2em; }

.loc-card-actions { display: flex; gap: 0.6rem; margin-top: 0.9rem; flex-wrap: wrap; }
/* ---- бутоните в "обекти" ----
   Всяка карта носи три действия и те са СТЪЛБИЦА от три нива на сила, все в
   цвета на своя под-бранд:
     1. "обади се"  — плътен фон        (най-силно)
     2. "виж меню"  — контур
     3. "намери ни" — лек тон           (най-тихо)
   ⚠️ Третото беше неутрално (.btn-outline в --ink, тоест почти черно). Върху
   тъмната табела на бургерите то ставаше кремаво и се връзваше, но върху
   кремавите табели на пицариите два бутона излизаха червени и един черен —
   клиентът го видя точно така ("цветовете нещо са различни", 2026-08-12).
   Черното не е по-тихо от червеното, а просто друго. Затова йерархията вече
   се носи от СИЛАТА (плътно → контур → тон), а не от цвета. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 44px;
  padding: 0.6rem 1.05rem; border-radius: 999px;
  font-weight: 700; font-size: 0.86rem;
  cursor: pointer;                 /* и заради iOS — без него :active не се хваща */
  /* ⚠️ Цветовете ТРЯБВА да са в списъка. Преди тук стояха само transform и
     box-shadow, затова смяната на цвят при hover просто щракваше — това е
     "липсващата анимация". Само тези пет свойства, за да не се анимира всичко. */
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* ⚠️ hover-ът е в @media (hover: hover) нарочно. На тъч устройство браузърът
   пуска :hover при докосване и го ЗАДЪРЖА, докато не се докосне другаде —
   бутонът оставаше "светнат" след натискане и обратната връзка изглеждаше
   счупена. Тъч устройствата вече минават само през :active. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .btn-outline-pizza:hover { background: var(--pizza-red); color: #fff; }
  .btn-outline-burger:hover { background: var(--burger-yellow); color: var(--burger-black); }
  .btn-soft-pizza:hover { background: var(--pizza-red); border-color: var(--pizza-red); color: #fff; }
  .btn-soft-burger:hover { background: var(--burger-yellow); border-color: var(--burger-yellow); color: var(--burger-black); }
}
/* натиснато състояние — това е ЕДИНСТВЕНАТА обратна връзка на телефон, където
   hover няма. Слягане + по-плътен фон, без сянка, за да личи натискането. */
.btn:active { transform: translateY(0) scale(0.96); box-shadow: none; }
.btn-outline-pizza:active,
.btn-soft-pizza:active { background: var(--pizza-red); border-color: var(--pizza-red); color: #fff; }
.btn-outline-burger:active,
.btn-soft-burger:active { background: var(--burger-yellow); border-color: var(--burger-yellow); color: var(--burger-black); }
.btn-burger:active { background: var(--burger-yellow-deep); }
.btn-pizza:active { background: var(--pizza-red-deep); }
/* видим фокус за клавиатура — липсваше напълно */
.btn:focus-visible { outline: 3px solid var(--pizza-red); outline-offset: 3px; }
.loc-plaque--dark .btn:focus-visible { outline-color: var(--burger-yellow); }

/* 1 — плътен */
.btn-burger { background: var(--burger-yellow); color: var(--burger-black); }
.btn-pizza { background: var(--pizza-red); color: #fff; }
/* 2 — контур в цвета на под-бранда, за да личи кое меню на кой обект е */
.btn-outline-burger { background: transparent; border: 1.5px solid var(--burger-yellow); color: var(--burger-yellow); }
.btn-outline-pizza { background: transparent; border: 1.5px solid var(--pizza-red); color: var(--pizza-red); }
/* 3 — лек тон от същия цвят. Текстът е --pizza-red-deep, а не --pizza-red:
   обикновеното червено върху кремаво е на ръба на четимото при дребен надпис. */
.btn-soft-burger { background: rgba(240, 180, 41, 0.14); border: 1.5px solid rgba(240, 180, 41, 0.42); color: var(--burger-yellow); }
.btn-soft-pizza { background: rgba(200, 57, 63, 0.09); border: 1.5px solid rgba(200, 57, 63, 0.38); color: var(--pizza-red-deep); }

/* ==========================================================================
   delivery
   ========================================================================== */
.delivery-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.delivery-note {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
}
.delivery-note h4 { margin-bottom: 0.7rem; font-size: 1.15rem; }
.delivery-note p { color: var(--ink-soft); margin-bottom: 0.8rem; font-size: 0.95rem; }
/* margin-top И margin-bottom еднакви (не само top): текстът над и текстът под
   списъка с телефони са ДВА отделни <p>, а полетата им (0.8rem) се сливат с
   тези тук по правилото за collapsing margins — взима се по-голямото от двете,
   не сборът. Без bottom тук долното "сливане" излизаше 0 и долният текст
   лепнеше за последния ред телефон, докато горният имаше пълен 1rem луфт. */
.delivery-note .phones { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; margin-bottom: 1rem; }
.delivery-note .phones a { font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
/* ⚠️ width, не height, е фиксираният размер тук — за разлика от общото
   .inline-icon правило. burger-sign-new.webp е квадратна (150×150),
   pizza-sign-icon.webp не е (150×134): при еднаква ВИСОЧИНА двете рисуват
   различна ШИРИНА и "burger shop"/"pizza shop" тръгват от различно място по X.
   Еднаква ширина изравнява началото на двата реда; височината пада малко за
   пицата, без изкривяване (auto пази съотношението). Скроено само за тук —
   .contact-info използва същите файлове по друг начин и не е пипано. */
.delivery-note .phones .inline-icon { width: 1.15em; height: auto; }

/* --------------------------------------------------------------------------
   имената на платформите като бутончета вътре в изречението
   .plat стои ВЪТРЕ в текста на .delivery-note — не е самостоятелен бутон, а
   самата дума "Glovo" / "Bolt Food", облечена като бутон.
   -------------------------------------------------------------------------- */
/* ⚠️ ЧУЖДИ БОИ, нарочно — фирмените цветове на двете платформи. Изричен избор на
   клиента (29.08.2026) и ИЗКЛЮЧЕНИЕ от правилото, че чуждите марки на сайта се
   рисуват монохромно (виж иконките на социалните мрежи). Не ги сменяй с
   --burger-yellow / --pizza-red.
   Контрастът е мерен, не е на око: #1b1815 върху #ffc244 = 10.99:1,
   #06301c върху #34d186 = 7.33:1. */
.plat {
  display: inline-block;
  padding: 0.1em 0.62em;
  border-radius: 999px;
  font-weight: 700;
  /* em, а не rem: бутончето расте заедно с изречението, в което седи */
  font-size: 0.95em;
  line-height: 1.45;
  text-decoration: none;
  /* ⚠️ Дръж думата цяла — "Bolt Food" пренесено през реда се разцепва на две
     половинки бутон, всяка със свое заоблено ъгълче. */
  white-space: nowrap;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.plat-glovo { background: #ffc244; color: #1b1815; }
.plat-bolt  { background: #34d186; color: #06301c; }
@media (hover: hover) {
  .plat-glovo:hover { background: #ffcf6b; }
  .plat-bolt:hover  { background: #4bdd97; }
  .plat:hover { transform: translateY(-1px); }
}
.plat-glovo:active { background: #f0ad24; }
.plat-bolt:active  { background: #23bd74; }
.plat:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ⚠️ Тук НЯМА 44px минимум и това не е пропуск: това са думи в изречение, а
   висок бутон би разкъсал междуредието. Вградените връзки в текст са изрично
   изключени от правилото за размер на целта (WCAG 2.5.8). */

/* ==========================================================================
   contact
   ========================================================================== */
.contact-wrap {
  max-width: 460px;
  margin: 0 auto;
}
.contact-info .row { display: flex; gap: 0.8rem; margin-bottom: 1.1rem; align-items: flex-start; }
/* ⚠️ font-weight: 600 изрично, за да ПОБЕДИ глобалното `h1,h2,h3,h4 { 800 }`.
   Тук h4 е ЕТИКЕТ (име на обект, "имейл"), а стойността под него — телефонът и
   имейлът — е 700. Без това правило етикетът излиза по-удебелен от собствената
   си стойност, тоест йерархията е обърната: очите хващат "имейл" преди самия
   адрес. 600 < 700 връща реда — блед лек етикет, тъмна тежка стойност.
   Ако някога тук се добави нов ред, дръж се за същите две тегла и не му слагай
   трето — точно от това секцията изглеждаше разбъркана (клиентът, 2026-07-30). */
.contact-info h3 { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 0.15rem; display: flex; align-items: center; }
.inline-icon { height: 1.15em; width: auto; display: inline-block; vertical-align: -0.2em; flex-shrink: 0; margin-right: 0.4em; }
.contact-info .row a { font-weight: 700; }
/* Имейлът е един дълъг низ без интервали (27 знака). На тесен телефон панелът
   е под 300px и без това правило адресът излиза извън стъкления панел вместо
   да се пренесе. anywhere, а не break-word: break-word пренася само ако редът
   вече е препълнен ПРЕЗ друга дума, а тук думата е една. */
.contact-email { overflow-wrap: anywhere; }
.social-row { display: flex; gap: 0.7rem; margin-top: 1.4rem; }
.social-row a {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(32,26,20,0.05); color: var(--ink);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
@media (hover: hover) {
  .social-row a:hover { background: var(--burger-yellow); color: var(--burger-black); border-color: var(--burger-yellow); }
}

/* ==========================================================================
   footer
   ========================================================================== */
.site-footer { background: var(--burger-black); color: #f2ead9; }
/* ⚠️ LAUNCH.md 3.4 добави трета колона (фирмени данни) — 1.2fr/1fr стана
   1.1fr/1fr/1fr. Точката, на която трите се сгъстяват твърде много, е по-висока
   от старата (780px), затова прагът долу е вдигнат до 900px — измерено, под
   900px третата колона започваше да пренася адресите дума по дума. */
.footer-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 1.5rem;
  padding: 2.4rem 0 2rem;
}
.footer-brand { display: flex; align-items: center; margin-bottom: 1.2rem; color: #f2ead9; }
.footer-brand .brand-mark { height: 20px; width: auto; }
/* ⚠️ И двата тага, защото веригата от заглавия се различава по страница:
   на index.html последното заглавие преди футъра е <h3> (контакти), тук футърът
   продължава на <h4>. На privacy.html последното е <h2> (секциите на
   политиката), тук футърът трябва да е <h3>, иначе прескача ниво. Изгледът е
   един и същ и на двата тага нарочно. */
.footer-col h3, .footer-col h4 { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--burger-yellow); margin-bottom: 0.8rem;
  /* Явно 700 и 1.55, защото елементът вече е заглавие: глобалното h1..h4 иначе
     би му дало 800 и ред 1.15. */
  font-weight: 700; line-height: 1.55;
}
.footer-col p, .footer-col a { display: block; font-size: 0.9rem; color: rgba(242,234,217,0.82); margin-bottom: 0.45rem; }
@media (hover: hover) {
  .footer-col a:hover { color: var(--burger-yellow); }
}
.footer-bottom {
  border-top: 1px solid rgba(242,234,217,0.14);
  text-align: center;
  padding: 1.2rem 0;
  font-size: 0.82rem;
  color: rgba(242,234,217,0.6);
}
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr; } }
/* Връзка към политиката за поверителност, до бутона за бисквитки — визуално
   идентична на .footer-cookies (виж по-долу), но е <a>, не <button>, тъй че не
   ѝ трябват font/border/background нулиранията, които бутонът носи. */
.footer-privacy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.4rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .footer-privacy:hover { color: var(--burger-yellow); }
}
.footer-privacy:active { color: var(--burger-yellow); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1rem;
}
/* Бутон, а не връзка — отваря диалога за бисквитки на същата страница.
   Облечен като редовете във футъра, за да не изпъква като бутон.
   ⚠️ min-height: 44px, макар самият надпис да е висок 20px. Това НЕ е същият
   случай като .plat: там думите стоят вътре в изречение и висока кутия би
   разкъсала реда, тъй че важи изключението на WCAG 2.5.8 за връзки в текст.
   Тук думата стои сама и е контрол — единственият начин съгласието да се
   оттегли. Заради него редът във футъра е с ~24px по-висок; това е цената. */
.footer-cookies {
  font: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.4rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .footer-cookies:hover { color: var(--burger-yellow); }
}
.footer-cookies:active { color: var(--burger-yellow); }

/* ==========================================================================
   съгласие за бисквитки (GDPR)
   ==========================================================================
   Материалът е крафт бележката от галерията: скъсана хартия, тиксо, лек наклон.
   Клиентът я избра пред емайлирана табела, скъсан бял лист и обикновена карта
   (сравнението е в PROGRESS.md, 31.08.2026).

   ⚠️ ТРИТЕ ЦВЯТА ПО-ДОЛУ СА ИЗМЕРЕНИ, НЕ ИЗБРАНИ НА ОКО, и заедно решават един
   истински дефект: суровата kraft-paper.webp е толкова тъмна на петна, че
   растеризирана и премерена по WCAG дава едва 3,76:1 ДОРИ СРЕЩУ ЧИСТО ЧЕРНО.
   Тоест върху нея по принцип не може да стои основен текст.
   Мерено върху всички 564x1002 пиксела на файла, при 1-ви персентил на
   тъмнотата (най-тъмният 1% от хартията — там, където текстът пада):
     сурова хартия  + #2b241b на 85% прозрачност  -> 3,9:1   ПОД прага
     + воал 0.18    + #241d15 плътно              -> 6,0:1
     + воал 0.18    + #332b21 плътно (дребен ред) -> 5,1:1
   Прагът по WCAG 2.1 AA е 4,5:1. --kraft-wash и двете мастила са ЕДНА система:
   ако воалът олекне, и двата цвята трябва да се преизчислят. Начинът: качи
   файла в canvas, композирай воала в sRGB, вземи персентила, после
   contrast = (L(фон)+0.05)/(L(текст)+0.05).
   ⚠️ Не гаси воала "за да е по-топло" — това връща текста под прага. */
.consent {
  --kraft-ink: #241d15;
  --kraft-ink-2: #332b21;
  --kraft-wash: rgba(255, 250, 241, 0.18);

  position: fixed;
  inset: 0;
  /* над хедъра (60) и над връзката "към съдържанието" (70): докато диалогът
     стои, зад него не бива да се стига нищо */
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: clamp(0.8rem, 3vw, 2.2rem);
  /* ⚠️ Скролът е ТУК, а не в самия лист. На нисък кадър (телефон в хоризонтално
     положение) отвореният панел с настройките може да надмине екрана; ако
     скролираше листът, лентата за скрол щеше да се реже от clip-path-а му.
     ⚠️ И затова подравняването надолу е margin-top: auto на бележката, а НЕ
     align-items: flex-end — при flex-end препълването излиза НАД контейнера и
     остава недостижимо. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* [hidden] е с по-висока специфичност (0,2,0) от .consent (0,1,0), тъй че бие
   display: flex — иначе атрибутът нямаше да скрива нищо. */
.consent[hidden] { display: none; }

.consent-scrim {
  position: fixed;
  inset: 0;
  /* ⚠️ Плътно, БЕЗ backdrop-filter — виж бележката в index.html. */
  background: rgba(32, 26, 20, 0.55);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.consent.is-open .consent-scrim { opacity: 1; }

.consent-note {
  position: relative;
  z-index: 2;
  margin-top: auto;
  width: min(430px, 100%);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.consent.is-open .consent-note { opacity: 1; transform: none; }

/* ⚠️ Наклонът стои на ЛИСТА, а влизането — на .consent-note. Едно правило за
   transform би изместило другото: същият капан както при .shop-flag. */
.consent-sheet {
  position: relative;
  /* ⚠️ Воалът е ПЪРВИ в списъка, тоест НАД снимката. Той вдига контраста. */
  background-image: linear-gradient(var(--kraft-wash), var(--kraft-wash)),
                    url('../images/brand/kraft-paper.webp');
  background-size: cover, cover;
  background-position: center, center;
  color: var(--kraft-ink);
  padding: 1.9rem 1.7rem 1.6rem;
  transform: rotate(-0.6deg);
  clip-path: polygon(
    0% 5px, 12% 0px, 25% 4px, 38% 0px, 51% 5px, 64% 0px, 77% 4px, 90% 0px, 100% 4px,
    calc(100% - 4px) 25%, 100% 50%, calc(100% - 5px) 75%, 100% calc(100% - 4px),
    88% 100%, 74% calc(100% - 4px), 60% 100%, 46% calc(100% - 5px), 32% 100%, 16% calc(100% - 4px), 0% 100%,
    5px 74%, 0% 50%, 4px 26%
  );
  /* ⚠️ filter, а не box-shadow: clip-path реже box-shadow заедно с кутията.
     Същото решение като при .shop-flag и .gallery-bubble. */
  filter: drop-shadow(0 18px 28px rgba(32, 26, 20, 0.52));
}

.consent-tape {
  position: absolute;
  z-index: 3;
  top: -11px; left: 50%;
  margin-left: -42px;
  width: 84px; height: 26px;
  transform: rotate(-3deg);
  opacity: 0.92;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 45%),
    repeating-linear-gradient(45deg, #ddc9a3 0 6px, #cdb890 6px 12px);
  box-shadow: 0 2px 5px rgba(32, 26, 20, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ⚠️ Явно font-weight и line-height, защото елементът е <h2>: глобалното
   h1..h4 иначе би му дало 800 и ред 1.15, а Caveat се чупи и на двете. */
.consent-title {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 0.35rem;
}
/* ⚠️ 0.95rem, а не 0.88 — вдигнато заедно с контраста (виж горе). Каквото и да
   е, не го сваляй под 0.9rem: това е основният текст на правно известие. */
.consent-text { font-size: 0.95rem; line-height: 1.62; }
/* Връзка към политиката за поверителност, второто от двете места по LAUNCH.md
   3.3 (другото е .footer-privacy). --kraft-ink-2, не --kraft-ink-soft — това е
   "дребен ред" по системата, измерена горе (5,1:1). */
.consent-privacy { font-size: 0.83rem; line-height: 1.5; margin-top: 0.5rem; }
.consent-privacy a { color: var(--kraft-ink-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .consent-privacy a:hover { color: var(--kraft-ink); }
}

/* ---- панелът "настройки" ---- */
.consent-panel { margin-top: 0.95rem; }
.consent-panel[hidden] { display: none; }
.consent-legend {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--kraft-ink-2);
  margin-bottom: 0.2rem;
}
/* position: relative, за да задържи .sr-only чекбокса вътре в реда */
.consent-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.58rem 0;
  min-height: 44px;
}
.consent-row + .consent-row { border-top: 1px solid rgba(36, 29, 21, 0.26); }
.consent-row-text { min-width: 0; cursor: pointer; }
.consent-row-text b { display: block; font-size: 0.87rem; font-weight: 700; line-height: 1.35; }
.consent-row-text span {
  display: block;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--kraft-ink-2);
  margin-top: 0.1rem;
}
.consent-check:disabled ~ .consent-row-text { cursor: default; }

/* ---- превключвателят ----
   ⚠️ Носещият елемент е истински <input type="checkbox">, скрит със .sr-only.
   Видимото е <label>. Така семантиката, клавиатурата и екранните четци идват
   наготово, вместо да се имитират с role/aria по <div>. */
.consent-sw {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 23px;
  border-radius: 999px;
  margin-top: 0.2rem;
  cursor: pointer;
  background: rgba(36, 29, 21, 0.34);
  transition: background-color 0.2s ease;
}
.consent-sw::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fffdf8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}
/* включено — зеленото на гирляндата, а не чуждо "системно" зелено */
.consent-check:checked + .consent-sw { background: var(--flag-2); }
.consent-check:checked + .consent-sw::after { transform: translateX(17px); }
.consent-check:disabled + .consent-sw { opacity: 0.5; cursor: default; }
/* ⚠️ Пръстенът е върху ВИДИМИЯ елемент — самият input е 1x1px някъде под него,
   тъй че фокус върху него не се вижда никъде. */
.consent-check:focus-visible + .consent-sw {
  outline: 3px solid var(--kraft-ink);
  outline-offset: 3px;
}

/* ---- бутоните ----
   Нарочно НЕ ползват .btn: тя носи :focus-visible в --pizza-red и цяла стълбица
   от под-брандови варианти, а тук фонът е кафява хартия и нито един от тях не
   стои. Конвенциите ѝ обаче се спазват: 44px, hover само в @media (hover:hover),
   :active като единствена обратна връзка на тъч, цветовете изброени в
   transition, за да не щракат. */
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.05rem;
  align-items: center;
}
.consent-btn {
  font: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  transition: transform 0.18s ease, background-color 0.18s ease,
              border-color 0.18s ease, color 0.18s ease;
}
.consent-btn[hidden] { display: none; }
.consent-btn:active { transform: scale(0.96); }
.consent-btn:focus-visible { outline: 3px solid var(--kraft-ink); outline-offset: 3px; }
/* ⚠️ Двата главни бутона са с ЕДНАКЪВ размер и тежест — различават се само по
   запълване. По-дребен или по-блед "само необходимите" е тъмна практика и
   обезсилва съгласието. */
.consent-btn--primary { background: var(--kraft-ink); color: #f6eee0; }
.consent-btn--ghost { border-color: var(--kraft-ink); color: var(--kraft-ink); }
.consent-btn--quiet {
  padding-inline: 0.55rem;
  font-weight: 600;
  color: var(--kraft-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .consent-btn--primary:hover { background: #100c07; }
  .consent-btn--ghost:hover { background: var(--kraft-ink); color: #f6eee0; }
  .consent-btn--quiet:hover { color: var(--kraft-ink); }
}
.consent-btn--primary:active { background: #100c07; }
.consent-btn--ghost:active { background: var(--kraft-ink); color: #f6eee0; }

/* ==========================================================================
   privacy.html (LAUNCH.md 3.3) — единствената страница на сайта, която не е
   секция от началната. Носи се от .glass-panel (същия материал като "за нас" /
   "контакти"), не нов панел — виж бележката там защо .craft-col не се
   преизползва за самата типография: той е решетъчна колона с чужд за тук
   layout, тук трябват само отстъпи между заглавия/абзаци/списъци. */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-back {
  display: inline-block;
  margin-bottom: 1.4rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-decoration: none;
}
@media (hover: hover) {
  .legal-back:hover { color: var(--ink); text-decoration: underline; }
}
.legal-content .eyebrow { margin-bottom: 0.3rem; }
.legal-content h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); margin-bottom: 0.6rem; }
.legal-updated { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 2rem; }
.legal-content h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin: 2.2rem 0 0.8rem; }
.legal-content p { line-height: 1.62; margin-bottom: 0.9em; }
.legal-dl { margin: 0.8rem 0 1.2rem; }
.legal-dl dt { font-weight: 700; margin-top: 0.9em; }
.legal-dl dt:first-child { margin-top: 0; }
.legal-dl dd { margin: 0.2em 0 0; color: var(--ink-soft); line-height: 1.55; }
.legal-ul { margin: 0.8rem 0 1.2rem 1.3rem; }
.legal-ul li { line-height: 1.62; margin-bottom: 0.5em; }