/*
Theme Name: Citymarket
Description: Лека тема за сайта-визитка на Ситимаркет.
Version: 0.3.0
Requires PHP: 8.3
Text Domain: citymarket
*/

/* ---------------------------------------------------------------------------------------------
   Токени. Цветовете, шрифтовете, размерите и ширините са в theme.json; тук са само къси имена.
   Hex стойности в този файл няма (tests/ThemeJsonTest.php го пази).
   --------------------------------------------------------------------------------------------- */
:root {
  --red: var(--wp--preset--color--red);
  --red-deep: var(--wp--preset--color--red-deep);
  --yellow: var(--wp--preset--color--yellow);
  --ink: var(--wp--preset--color--ink);
  --paper: var(--wp--preset--color--paper);
  --mist: var(--wp--preset--color--mist);
  --line: var(--wp--preset--color--line);
  --muted: var(--wp--preset--color--muted);
  --eu-white: var(--wp--preset--color--eu-white);
  --font-text: var(--wp--preset--font-family--text);
  --font-display: var(--wp--preset--font-family--display);
  --fs-14: var(--wp--preset--font-size--14);
  --fs-17: var(--wp--preset--font-size--17);
  --fs-21: var(--wp--preset--font-size--21);
  --fs-28: var(--wp--preset--font-size--28);
  --fs-40: var(--wp--preset--font-size--40);
  --fs-56: var(--wp--preset--font-size--56);
  --fs-hero: var(--wp--preset--font-size--hero);
  --s-4: var(--wp--preset--spacing--4);
  --s-8: var(--wp--preset--spacing--8);
  --s-12: var(--wp--preset--spacing--12);
  --s-16: var(--wp--preset--spacing--16);
  --s-24: var(--wp--preset--spacing--24);
  --s-32: var(--wp--preset--spacing--32);
  --s-48: var(--wp--preset--spacing--48);
  --s-64: var(--wp--preset--spacing--64);
  --s-96: var(--wp--preset--spacing--96);
  --wide: var(--wp--style--global--wide-size);
  --text: var(--wp--style--global--content-size);
  --radius: var(--wp--custom--radius); /* theme.json settings.custom.radius */
  --target: 44px; /* най-малката допирна цел */
  --header-h: 73px; /* лепкавият хедър: ред 72 px и линия */
}
@media (max-width: 820px) { :root { --header-h: 57px; } }

/* ---------------------------------------------------------------------------------------------
   Основа и текст
   --------------------------------------------------------------------------------------------- */
/* Резервни шрифтове със същата ширина като заглавния (Fira Sans Extra Condensed 800). Докато той се
   зареди, или ако не се зареди, редовете се пренасят на същите места и нищо не прелива. Мерено на
   05.10.2026 с един и същ текст: Arial Narrow Bold е с 3,5% по-широк, Arial Bold с 25,8%. Където няма
   Arial (Android), следващият в реда е системният сбит шрифт, sans-serif-condensed (виж theme.json). */
@font-face { font-family: "Fira Condensed Fallback Narrow"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"); font-weight: 800; size-adjust: 96.5%; }
@font-face { font-family: "Fira Condensed Fallback Arial"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 800; size-adjust: 79.5%; }

*, *::before, *::after { box-sizing: border-box; }
/* котва (вкл. „Към съдържанието“) не скрива целта си под лепкавия хедър */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-8)); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-17);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
strong, b { font-weight: 600; }

/* заглавията, часовете, датите и цифрите са в сбития тежък шрифт на ценовите етикети */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: break-word; /* дълга дума в заглавие на тесен екран се пренася, не прелива */
}
h1 { font-size: clamp(var(--fs-40), 6vw, var(--fs-56)); margin: var(--s-32) 0 var(--s-16); }
h2 { font-size: clamp(var(--fs-28), 4.5vw, var(--fs-40)); margin: var(--s-48) 0 var(--s-16); }
h3 { font-size: clamp(var(--fs-21), 3vw, var(--fs-28)); margin: var(--s-24) 0 var(--s-8); }
.lede { margin-block: var(--s-16); font-size: var(--fs-21); line-height: 1.4; }

/* подравняване вляво; мрежата е до 1200 px, текстовите колони до 680 px (до 68 знака на ред) */
.wrap {
  max-width: calc(var(--wide) + 2 * var(--s-16));
  margin-inline: auto;
  padding-inline: var(--s-16);
}
.prose, .page-intro, .wpcf7 { max-width: var(--text); }
.page-content > * { max-width: var(--text); }
.page-content > .alignwide, .page-content > .map, .page-content > .eu-project__logo { max-width: none; }
.page-content--legal h2 { font-size: var(--fs-28); } /* правните: раздели на дълъг текст, не заглавия на страници */

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s-16); top: var(--s-16); z-index: 99; padding: var(--s-8) var(--s-16); background: var(--paper); }

/* ---------------------------------------------------------------------------------------------
   Връзки и фокус
   --------------------------------------------------------------------------------------------- */
a { color: var(--red-deep); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
/* връзка в текста е поне 24 px висока (отстоянието не мести реда); телефон и връзка, която стои сама,
   са цяла допирна цел. Бутон с телефон си остава бутон; връзка около снимка не получава отстояние. */
main :is(p, li, dd, td, figcaption) > a:not([class]) { padding-block: 2px; }
a[href^="tel:"]:not(.btn), .back-link, .store-row__address a, .store__area a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding-block: 0;
}

/* фокусът от клавиатурата: черно очертание върху бяло, бяло върху червено */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.on-red :focus-visible, .hero :focus-visible { outline-color: var(--paper); }

/* ---------------------------------------------------------------------------------------------
   Бутони
   .btn червен; --yellow за действието с дата (брошурата); --outline очертан върху бяло;
   върху червено: --paper (бял) и --outline-paper (бяло очертание); --small за редове.
   --------------------------------------------------------------------------------------------- */
.btn, .wpcf7 [type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s-8) var(--s-24);
  border: 2px solid var(--red);
  border-radius: var(--radius);
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .wpcf7 [type="submit"]:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn--yellow:hover { background: var(--yellow); border-color: var(--ink); }
.btn--outline { background: transparent; color: var(--red-deep); }
.btn--outline:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn--paper { background: var(--paper); border-color: var(--paper); color: var(--red-deep); }
.btn--paper:hover { background: var(--mist); border-color: var(--mist); }
.btn--outline-paper { background: transparent; border-color: var(--paper); color: var(--paper); }
.btn--outline-paper:hover { background: var(--paper); border-color: var(--paper); color: var(--red-deep); }
.btn--small { min-height: var(--target); padding-inline: var(--s-16); font-size: var(--fs-14); }

/* ---------------------------------------------------------------------------------------------
   Стикер: жълтото отбелязва само нещо с дата или час (валидност, „отворено сега“, „денонощно“)
   --------------------------------------------------------------------------------------------- */
.sticker, .store-status--sticker.store-status--open .store-status__text {
  display: inline-block;
  padding: 5px var(--s-12) 4px;
  border-radius: 4px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-21);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------------
   Полета на форми (и формите на Contact Form 7)
   Рамката е в цвета на вторичния текст: линията `line` върху бяло е под 3:1 и не се вижда като ръб.
   --------------------------------------------------------------------------------------------- */
.field,
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 select,
.wpcf7 textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--s-12) var(--s-16);
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
textarea.field, .wpcf7 textarea { min-height: 144px; resize: vertical; }
.field::placeholder, .wpcf7 ::placeholder { color: var(--muted); opacity: 1; }
.field:focus-visible, .wpcf7 input:focus-visible, .wpcf7 select:focus-visible, .wpcf7 textarea:focus-visible { border-color: var(--ink); }
.field-label, .wpcf7 label { display: block; margin-block: var(--s-16); font-weight: 600; }
.field-label .field { margin-top: var(--s-4); font-weight: 400; }
.wpcf7 { margin-block: var(--s-24); }
.wpcf7 [type="submit"] { margin-top: var(--s-8); }
.wpcf7-acceptance label { display: flex; align-items: center; gap: var(--s-12); min-height: var(--target); margin: 0; font-weight: 400; } /* целият ред е целта */
.wpcf7-acceptance input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--red); }
.wpcf7-not-valid-tip { display: block; margin-top: var(--s-4); color: var(--red-deep); font-size: var(--fs-14); font-weight: 600; }
/* стиловете на Contact Form 7 са изключени (plugin/citymarket-core/forms.php): състоянията на формата са тук, с токените */
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.wpcf7 form .wpcf7-response-output { margin: var(--s-16) 0 0; padding: var(--s-12) var(--s-16); border: 2px solid var(--ink); border-radius: var(--radius); }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--ink); background: var(--mist); }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--red); color: var(--red-deep); }
.wpcf7-list-item { display: block; margin: 0; }
.wpcf7-list-item-label a { padding-block: 2px; } /* връзката в текста на съгласието е поне 24 px висока */
.wpcf7-spinner { display: none; }
form.submitting .wpcf7-spinner { display: inline-block; width: 24px; height: 24px; margin-left: var(--s-12); vertical-align: middle; border: 3px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: cm-spin 1s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { form.submitting .wpcf7-spinner { animation: none; } }
/* формите (HTML от tools/seed-forms.php): по един ред на поле, незадължителните с „(по избор)“; скритото поле срещу ботове не се вижда */
.form-section { max-width: var(--text); margin-block: var(--s-48); }
.form-section h2 { margin-top: 0; }
.form-section__lede { margin: 0 0 var(--s-16); }
.form-section__after { margin-block: var(--s-24) var(--s-48); }
.form-row { margin: 0 0 var(--s-16); }
.form-row > label { display: block; margin: 0 0 var(--s-4); font-weight: 600; }
.form-optional { color: var(--muted); font-weight: 400; }
.form-note { display: block; margin-top: var(--s-4); color: var(--muted); font-size: var(--fs-14); }
.form-row--consent, .form-row--submit { margin-top: var(--s-24); }
.cm-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------------------------------------
   Хедър и меню: логото вляво, пет точки вдясно; текущата страница е с червена черта.
   До 820 px менюто е панел под хедъра, който се отваря с бутона (assets/js/nav.js). Без JavaScript
   (класът .js на <html> го слага ред в header.php) панелът стои отворен и бутонът не се показва.
   --------------------------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
/* Лентата на WordPress за вписан потребител е залепена отгоре (32 px; 46 px до 782 px): хедърът стои под нея.
   Под 600 px лентата се превърта със страницата и хедърът се връща най-горе. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); min-height: 72px; }
/* логото: вектор, 44 px високо, 32 px на телефон (ширината следва съотношението 4,645:1) */
.site-logo { display: inline-flex; align-items: center; min-height: var(--target); line-height: 0; }
.site-logo img { display: block; height: 44px; width: auto; }
.site-nav__list { display: flex; gap: var(--s-8); list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding-inline: var(--s-12);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.site-nav__list a:hover { color: var(--red-deep); }
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a { box-shadow: inset 0 -3px 0 var(--red); }
.nav-toggle { display: none; }
@media (max-width: 820px) {
  .site-header__row { flex-wrap: wrap; min-height: 56px; }
  .site-logo img { height: 32px; }
  .js .nav-toggle { display: inline-flex; }
  .nav-toggle {
    align-items: center;
    justify-content: center;
    width: var(--target);
    height: var(--target);
    padding: 0;
    border: 1px solid var(--muted);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
  }
  .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { display: block; width: 20px; height: 2px; background: var(--ink); }
  .nav-toggle__bar { position: relative; }
  .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bar::before { top: -6px; }
  .nav-toggle__bar::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }
  /* без JavaScript отвореното меню е високо: хедърът не се лепи, за да не покрива екрана при превъртане */
  html:not(.js) .site-header { position: static; }
  .site-nav { flex-basis: 100%; border-top: 1px solid var(--line); }
  .js .site-nav { display: none; }
  /* с JavaScript панелът ляга върху съдържанието, не го избутва: при затваряне с докосване отвън нищо не
     се мести под пръста (иначе натиснатото после попада върху изместен бутон); при 400% мащаб се превърта */
  .js .site-nav.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .site-nav__list { flex-direction: column; gap: 0; padding-block: var(--s-8); }
  .site-nav__list a { display: flex; min-height: 48px; padding-inline: var(--s-12); }
  .site-nav__list .current-menu-item > a,
  .site-nav__list .current-menu-parent > a { box-shadow: inset 3px 0 0 var(--red); }
}

/* ---------------------------------------------------------------------------------------------
   Футър: черен, с контактите (когато ги има) и правните връзки. Без емблема на ЕС и без повторено меню.
   --------------------------------------------------------------------------------------------- */
.site-footer { margin-top: var(--s-64); padding-block: var(--s-48) var(--s-24); background: var(--ink); color: var(--paper); }
.site-footer a { color: var(--paper); }
.site-footer :focus-visible { outline-color: var(--paper); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-32); }
.site-footer__about p { max-width: 40ch; margin: 0; }
.site-footer__about .site-footer__brand { margin-bottom: var(--s-8); font-family: var(--font-display); font-size: var(--fs-28); font-weight: 800; line-height: 1.05; }
.site-footer__contacts { display: grid; gap: var(--s-12); margin: 0; }
.site-footer__contacts dt { font-size: var(--fs-14); }
.site-footer__contacts dd { margin: 0; font-weight: 600; }
.site-footer__contacts a { display: inline-flex; align-items: center; min-height: var(--target); }
/* работното време от записите: най-честите три реда с броя магазини */
.site-footer__hours p { margin: 0; }
.site-footer__title { font-size: var(--fs-14); }
.site-footer__hours dl { display: grid; gap: var(--s-4); margin: var(--s-8) 0 var(--s-12); }
.site-footer__hours dl div { display: flex; flex-wrap: wrap; gap: 0 var(--s-12); }
.site-footer__hours dt { font-weight: 600; }
.site-footer__hours dd { margin: 0; color: color-mix(in srgb, var(--paper) 75%, var(--ink)); }
.site-footer__hours a { display: inline-flex; align-items: center; min-height: var(--target); }
/* линията над правните връзки е вътре в колоната (елементът е в .wrap, не е самият .wrap) */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-24);
  margin-top: var(--s-32);
  padding-top: var(--s-12);
  border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
  font-size: var(--fs-14);
}
.site-footer__legal a { display: inline-flex; align-items: center; min-height: var(--target); min-width: var(--target); }
.site-footer__copy { margin-left: auto; }
@media (max-width: 820px) {
  .site-footer { margin-top: var(--s-48); padding-block: var(--s-32) var(--s-16); }
  .site-footer__grid { gap: var(--s-24); }
  .site-footer__legal { margin-top: var(--s-24); }
  .site-footer__copy { flex-basis: 100%; margin-left: 0; padding-block: var(--s-8); }
}

/* ---------------------------------------------------------------------------------------------
   Начална
   --------------------------------------------------------------------------------------------- */
/* „табелата“: червената лента с надписа, живия ред и корицата на брошурата като лист хартия */
.hero { background: var(--red); color: var(--paper); padding-block: clamp(var(--s-48), 6vw, var(--s-64)); }
.hero__grid { display: grid; gap: var(--s-32); align-items: center; }
@media (min-width: 821px) { .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-48); } }
.hero h1 { max-width: 12ch; margin: 0 0 var(--s-16); font-size: var(--fs-hero); }
.hero__live { max-width: 30ch; margin: 0 0 var(--s-24); font-size: clamp(var(--fs-21), 2.2vw, var(--fs-28)); font-weight: 600; line-height: 1.3; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-12); margin: 0; }
/* корицата: бял ръб, лек наклон, който се изправя при посочване; стикерът за валидността е в ъгъла */
.hero-cover, .hero-sheet {
  justify-self: end;
  width: 100%;
  max-width: 520px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 35%, transparent);
}
.hero-cover { position: relative; display: block; padding: 6px; transform: rotate(2deg); transition: transform .2s ease; }
.hero-cover:hover, .hero-cover:focus-visible { transform: rotate(0deg); }
.hero-cover img { display: block; width: 100%; height: auto; }
.hero-cover__until { position: absolute; top: -14px; right: -10px; transform: rotate(-6deg); font-size: var(--fs-28); box-shadow: 0 4px 10px color-mix(in srgb, var(--ink) 30%, transparent); }
.hero-sheet { padding: var(--s-32) var(--s-24); color: var(--ink); }
.hero-sheet__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-40); font-weight: 800; line-height: 1.05; text-wrap: balance; }
.hero-sheet__more { margin: var(--s-16) 0 0; }
@media (prefers-reduced-motion: reduce) { .hero-cover { transition: none; } }
@media (max-width: 820px) {
  .hero-cover, .hero-sheet { justify-self: stretch; max-width: none; }
  .hero-cover { transform: none; }
  .hero-cover__until { top: -10px; right: 8px; }
}
/* заглавие на раздел с връзка до него („Магазини“ и „Всички магазини и карта“) */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-8) var(--s-24); }
.section-head h2 { margin: 0 0 var(--s-16); }
.section-head__link { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 600; }
.home-stores { padding-block: var(--s-48) var(--s-16); }
.home-jobs { padding-block: var(--s-48); }
.home-jobs__grid { display: grid; gap: var(--s-24); align-items: center; }
@media (min-width: 821px) { .home-jobs__grid--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-48); } }
.home-jobs__photo { margin: 0; }
.home-jobs__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.home-jobs h2 { margin-top: 0; }

/* ---------------------------------------------------------------------------------------------
   Магазини
   --------------------------------------------------------------------------------------------- */
.map { height: 420px; margin-block: var(--s-24); border: 1px solid var(--line); border-radius: var(--radius); }
/* слоевете на Leaflet са с z-index 200–1000: без свой контекст се рисуват над лепкавия хедър и менюто */
.map { isolation: isolate; }
.map.leaflet-container, .map .leaflet-bar a { font-family: var(--font-text); }
/* .leaflet-touch .leaflet-bar a (30 px) идва от по-късен файл: затова селекторът тук е с един клас повече */
.map.leaflet-container .leaflet-bar a { width: var(--target); height: var(--target); line-height: var(--target); }
.map .leaflet-control-attribution a { display: inline-block; padding-block: 5px; }
/* картата с бутон (template-parts/map.php): кутия с едно изречение; плочките идват чак след натискане */
.map-box { margin-block: var(--s-16) var(--s-24); }
html:not(.js) .map-box { display: none; }
.map-box__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12) var(--s-24); padding: var(--s-16) var(--s-24); border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist); }
.map-box__note { margin: 0; max-width: 40ch; }
.map-box .map { margin-block: 0; }
.map[hidden] { display: none; }
.map:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* червен маркер: кутия 44 × 44 px с капка 28 × 40, цветовете от токените; Leaflet слага leaflet-marker-icon */
.map-pin { display: flex; justify-content: center; align-items: flex-end; }
.map-pin svg { width: 28px; height: 40px; overflow: visible; }
.map-pin path { fill: var(--red); stroke: var(--paper); stroke-width: 1.5; }
.map-pin circle { fill: var(--paper); }
.leaflet-container .map-pin:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* изборът на район („Магазини“ и 404) и броят под него */
.store-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); margin-block: var(--s-16) var(--s-8); } /* 16, не 24: „Магазини“ на телефон е под 3000 px */
.store-filter__label { font-weight: 600; }
.store-filter__select { width: auto; min-width: 16rem; }
.store-filter--live .store-filter__submit { display: none; } /* когато скрипт прави избора веднага (stores.js, nav.js), бутонът не трябва */
.store-filter__count { margin: 0 0 var(--s-16); color: var(--muted); }
@media (max-width: 820px) {
  .store-filter { margin-block: var(--s-16) var(--s-8); }
  .store-filter__select { width: 100%; }
  .map-box__ask { padding: var(--s-12) var(--s-16); }
  .map-box__note { font-size: var(--fs-14); }
  /* пълният списък на телефон: двете действия едно под друго вдясно; районът и състоянието на един ред,
     когато се събират; редът е плътен, за да е страницата с 18 магазина колкото се може по-къса */
  .store-list--full .store-row { grid-template-areas: "address action" "meta action"; padding-block: var(--s-4); }
  .store-list--full .store-row__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-12); grid-area: meta; }
  .store-list--full .store-row__area, .store-list--full .store-row .store-status { grid-area: auto; }
  .store-list--full .store-row__actions { flex-direction: column; align-items: stretch; }
}
.area-title { margin-top: var(--s-48); padding-bottom: var(--s-8); border-bottom: 3px solid var(--red); }
/* списък с редове на магазини (template-parts/store-row.php): район, адрес, състояние, действия */
.store-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.store-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr) minmax(0, 1.5fr) auto;
  gap: var(--s-8) var(--s-24);
  align-items: center;
  padding-block: var(--s-12);
  border-bottom: 1px solid var(--line);
}
.store-row[hidden] { display: none; } /* ред извън избрания район: display: grid иначе надписва атрибута hidden */
.store-row__meta { display: contents; } /* районът и състоянието са колони на реда; на телефон стават един ред (по-долу) */
/* редът на колоните е район, адрес, състояние, действия, независимо от реда в HTML-а (адресът е първи там, за телефона) */
.store-row__area { grid-area: 1 / 1; color: var(--muted); font-size: var(--fs-14); }
.store-row__address { grid-area: 1 / 2; font-weight: 600; }
.store-row > .store-status, .store-row__meta > .store-status { grid-area: 1 / 3; }
.store-row__actions { grid-area: 1 / 4; }
.store-row__address a { color: inherit; }
.store-row__name { margin-left: var(--s-8); color: var(--muted); font-weight: 400; }
.store-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-8); }
/* в краткия списък на началната единственото действие е тихо (очертан бутон): 18 червени бутона биха надвикали табелата */
.store-list--compact .store-row__actions .btn { background: transparent; border-color: var(--red); color: var(--red-deep); }
.store-list--compact .store-row__actions .btn:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
/* състоянието сега: текст в списъците (отвореното по-тежко, затвореното тихо); „денонощно“ е стикер */
.store-status { display: block; }
.store-status__text { font-size: var(--fs-14); }
.store-status--open .store-status__text { font-weight: 600; }
.store-status--closed .store-status__text { color: var(--muted); }
@media (max-width: 820px) {
  .store-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "address action" "area action" "status action";
    gap: var(--s-4) var(--s-12);
  }
  .store-row__address { grid-area: address; }
  .store-row__area { grid-area: area; }
  .store-row .store-status { grid-area: status; }
  .store-row__actions { grid-area: action; align-self: center; }
  .store-row__name { display: block; margin-left: 0; }
}

/* ---------------------------------------------------------------------------------------------
   Страница на магазин (template-parts/store.php): районът като връзка, стикер за състоянието,
   двете действия; часовете и телефонът до картата с бутон; одобрените снимки в мрежа, главната
   по-голяма; прегледът на място е <dialog class="viewer"> (assets/js/viewer.js)
   --------------------------------------------------------------------------------------------- */
.store__head { padding-top: var(--s-8); }
.store__area { margin: 0; font-size: var(--fs-14); }
.store__area a { min-width: var(--target); } /* кратко име на район (Бриз) е пак цяла цел */
.store__head h1 { margin: 0 0 var(--s-8); }
.store__address { margin: 0 0 var(--s-12); font-size: var(--fs-21); }
.store__head .store-status { margin-bottom: var(--s-16); }
.store-status--sticker .store-status__text { font-size: var(--fs-17); }
.store__actions { display: flex; flex-wrap: wrap; gap: var(--s-12); margin: 0 0 var(--s-32); }
.store__body { display: grid; gap: var(--s-32) var(--s-48); align-items: start; margin-bottom: var(--s-48); }
@media (min-width: 821px) { .store__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.store__details h2, .store__photos h2 { margin: 0 0 var(--s-12); font-size: var(--fs-28); }
/* часовете са в шрифта на етикетите, дните са тихи; днешният ред е отбелязан с жълта чертичка */
.hours-table { width: 100%; max-width: 32rem; margin: 0 0 var(--s-8); border-collapse: collapse; }
.hours-table th, .hours-table td { padding: var(--s-8) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.hours-table th { width: 11rem; padding-right: var(--s-16); color: var(--muted); font-weight: 400; }
.hours-table td { font-family: var(--font-display); font-size: var(--fs-21); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hours-table .is-today th { color: var(--ink); font-weight: 600; }
.hours-table .is-today th::before { content: ""; display: inline-block; width: 4px; height: .9em; margin-right: var(--s-8); background: var(--yellow); vertical-align: -.1em; }
.store__phone { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: var(--s-16); max-width: 32rem; margin: 0; padding-block: var(--s-4); }
.store__phone-label { color: var(--muted); }
.store__phone a { font-family: var(--font-display); font-size: var(--fs-21); font-weight: 800; }
.store__map .map-box { margin-block: 0; }
.store__photos { margin-bottom: var(--s-48); }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 170px; gap: var(--s-8); list-style: none; margin: 0; padding: 0; }
.photo-grid li:first-child { grid-column: span 2; grid-row: span 2; }
.photo-grid a { display: block; height: 100%; overflow: hidden; border-radius: var(--radius); }
.photo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.store__back { margin: 0 0 var(--s-48); }
@media (max-width: 820px) {
  .store__head { padding-top: var(--s-16); }
  .hours-table th { width: 8rem; }
  .store__phone { grid-template-columns: 8rem minmax(0, 1fr); }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; }
}
/* прегледът на снимка на място: цял екран, черен фон; изображението се побира, с „Увеличи“ се превърта */
.viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--paper); overflow: hidden; }
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: var(--ink); }
.viewer .btn[hidden], .viewer__nav[hidden] { display: none; }
.viewer__bar, .viewer__nav { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-16); }
.viewer__bar { justify-content: space-between; }
.viewer__nav { justify-content: center; padding-bottom: var(--s-16); }
.viewer__count { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.viewer__stage { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.viewer__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.viewer.is-zoomed .viewer__stage { display: block; overflow: auto; }
.viewer.is-zoomed .viewer__img { max-width: none; max-height: none; min-width: 200vw; }
.viewer__caption { margin: 0; padding: var(--s-8) var(--s-16) 0; text-align: center; }
.viewer :focus-visible { outline-color: var(--yellow); }

/* ---------------------------------------------------------------------------------------------
   Брошура: датите и PDF-ът над разтворите; разтворите един под друг в цялата ширина на мрежата
   (прегледът с „Увеличи“ е assets/js/viewer.js); празното състояние с усмивката; предишните като
   мрежа от корици с периода под всяка
   --------------------------------------------------------------------------------------------- */
.brochure-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12) var(--s-24); margin-bottom: var(--s-8); }
.brochure-head__dates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); margin: 0; font-family: var(--font-display); font-size: var(--fs-21); font-weight: 800; font-variant-numeric: tabular-nums; }
.brochure-head__size { font-weight: 400; }
.brochure-hint { display: none; margin: 0 0 var(--s-12); color: var(--muted); }
.js .brochure-hint { display: block; }
.brochure-pages { display: grid; gap: var(--s-16); margin: 0 0 var(--s-48); }
.brochure-pages__page { margin: 0; }
.brochure-pages__link { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.brochure-pages__link img { display: block; width: 100%; height: auto; }
.brochure-expired { max-width: var(--text); margin: 0 0 var(--s-24); padding: var(--s-12) var(--s-16); border-left: 6px solid var(--red); background: var(--mist); }
.brochure-empty { display: grid; justify-items: start; gap: var(--s-16); max-width: var(--text); margin: var(--s-16) 0 var(--s-48); }
.brochure-empty__smiley { width: 96px; height: 96px; }
.brochure-empty__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-40); font-weight: 800; line-height: 1.05; text-wrap: balance; }
.brochure-empty__links { display: flex; flex-wrap: wrap; gap: var(--s-12); margin: 0; }
.brochure-archive { margin-bottom: var(--s-48); }
.brochure-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-24); list-style: none; margin: 0; padding: 0; }
.brochure-archive__item { display: block; color: inherit; text-decoration: none; }
.brochure-archive__cover { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.brochure-archive__period { display: block; margin-top: var(--s-8); font-family: var(--font-display); font-size: var(--fs-21); font-weight: 800; }
.brochure-archive__item:hover .brochure-archive__period { text-decoration: underline; }
.brochure__back { margin: 0 0 var(--s-48); }

/* ---------------------------------------------------------------------------------------------
   „За нас“ (page-za-nas.php): изречението от данните като водещ ред, текстът до 680 px, до три
   одобрени снимки с името на магазина, накрая двете връзки
   --------------------------------------------------------------------------------------------- */
.about__line { max-width: var(--text); margin: 0 0 var(--s-24); font-family: var(--font-display); font-size: var(--fs-28); font-weight: 800; line-height: 1.15; }
.about__text { margin-bottom: var(--s-32); }
.about__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); list-style: none; margin: 0 0 var(--s-32); padding: 0; }
.about__photo { display: block; color: inherit; text-decoration: none; }
.about__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.about__photo-name { display: block; margin-top: var(--s-8); font-weight: 600; }
.about__photo:hover .about__photo-name { text-decoration: underline; }
.about__links { display: flex; flex-wrap: wrap; gap: var(--s-12); margin: 0 0 var(--s-48); }
@media (max-width: 820px) { .about__photos { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------------------------
   Кариери и общи блокове
   --------------------------------------------------------------------------------------------- */
/* позициите са редове (page-karieri.php): текстът вляво, „Кандидатствай“ вдясно; на телефон едно под друго */
.job-list { list-style: none; margin: var(--s-24) 0 0; padding: 0; border-top: 1px solid var(--line); }
.job-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-16) var(--s-32); align-items: start; padding-block: var(--s-24); border-bottom: 1px solid var(--line); }
.job-row__title { margin: 0 0 var(--s-8); font-size: var(--fs-28); }
.job-row__body > :first-child { margin-top: 0; }
.job-row__body > :last-child { margin-bottom: 0; }
.job-row__perks { margin: var(--s-12) 0 0; padding-left: 1.2rem; }
.job-row__action { margin: 0; }
.jobs-none { max-width: var(--text); }
@media (max-width: 820px) { .job-row { grid-template-columns: minmax(0, 1fr); } }
.callout { max-width: var(--text); margin-block: var(--s-24); padding: var(--s-16) var(--s-24); border: 1px solid var(--line); border-left: 6px solid var(--ink); border-radius: var(--radius); background: var(--mist); }
.callout p { margin: var(--s-8) 0; }

/* ---------------------------------------------------------------------------------------------
   ЕС публичност (BG05SFPR002-1.004-0231-C01), задължителна до 21.02.2027.
   Емблемата само се мащабира пропорционално (размерът идва от width/height и height:auto), без
   фиксирана височина в CSS, за да не се изкриви при max-width. Белият фон е от отделния токен
   eu-white, за да не зависи от палитрата.
   --------------------------------------------------------------------------------------------- */
/* Лентата най-горе: изрязаната емблема 220 × 44 px, на широк екран с името на проекта вляво от нея.
   До 820 px остава само емблемата, 180 × 36 px, в средата. Логото е 44 px високо на широк екран и
   32 px на тесен: емблемата никога не е по-малка от него (tests/tools/checks/header.json го пази). */
.eu-badge { display: inline-flex; align-items: center; gap: var(--s-16); min-height: var(--target); line-height: 0; color: var(--ink); text-decoration: none; }
.eu-badge img { display: block; width: 220px; height: auto; background: var(--eu-white); }
.eu-badge__caption { order: -1; font-size: var(--fs-14); line-height: 1.3; }
.eu-badge:hover .eu-badge__caption { text-decoration: underline; }
.eu-strip { background: var(--eu-white); border-bottom: 1px solid var(--line); }
.eu-strip__row { display: flex; justify-content: flex-end; padding-block: 4px; }
@media (max-width: 820px) {
  .eu-strip__row { justify-content: center; }
  .eu-badge img { width: 180px; }
  .eu-strip .eu-badge__caption { display: none; }
}
.eu-project__logo { width: fit-content; max-width: 100%; padding: var(--s-12) var(--s-16); border: 1px solid var(--line); border-radius: var(--radius); background: var(--eu-white); line-height: 0; }
.eu-project__logo img { display: block; }
.eu-project__footer { margin-top: var(--s-32); padding-top: var(--s-16); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-14); }

/* ---------------------------------------------------------------------------------------------
   Листът с елементите (/elementi/, само локално): показва токените и основните елементи
   --------------------------------------------------------------------------------------------- */
.el-section { padding-block: var(--s-32); border-top: 1px solid var(--line); }
.el-section > h2 { margin-top: 0; }
.el-note { max-width: var(--text); color: var(--muted); font-size: var(--fs-14); }
.el-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-16); margin: 0; }
.el-swatch { margin: 0; }
.el-swatch__chip { display: block; height: 72px; border: 1px solid var(--line); border-radius: var(--radius); }
.el-swatch figcaption { margin-top: var(--s-8); font-size: var(--fs-14); line-height: 1.35; }
.el-swatch__value { display: block; color: var(--muted); }
.el-type { margin: 0 0 var(--s-16); }
.el-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); }
.el-on-paper, .el-on-red { padding: var(--s-24); border-radius: var(--radius); }
.el-on-paper { border: 1px solid var(--line); }
.el-on-red { margin-top: var(--s-16); background: var(--red); color: var(--paper); }
.el-form { max-width: var(--text); }
.el-compare { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-32); }

/* ---------------------------------------------------------------------------------------------
   404 и търсене: усмивката, изборът на район, най-честите пътища; резултатите са само заглавия
   --------------------------------------------------------------------------------------------- */
.not-found { max-width: var(--text); padding-block: var(--s-32) var(--s-48); }
.not-found__smiley { display: block; width: 96px; height: 96px; }
.not-found h1 { margin-top: var(--s-16); }
.not-found__lede, .search-empty { max-width: var(--text); }
.not-found__links, .search-page__links { display: flex; flex-wrap: wrap; gap: var(--s-12); margin: var(--s-24) 0 0; }
.search-results { max-width: var(--text); margin: var(--s-24) 0; padding: 0; list-style: none; }
.search-results li { border-bottom: 1px solid var(--line); }
.search-results a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 600; }

/* при принудителни цветове (Windows high contrast) фонът изчезва: чертите на бутона за меню са с рамка */
@media (forced-colors: active) {
  .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { height: 0; background: transparent; border-top: 2px solid CanvasText; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { border-color: transparent; }
}

/* печат: тъмен текст върху бяло в героя и футъра; хедърът не е лепкав; менюто, бутонът му и картата не се печатат */
@media print {
  .site-header { position: static; }
  #site-nav, .nav-toggle, .map-box, .skip-link { display: none; }
  .hero, .site-footer { background: var(--paper); color: var(--ink); }
  .hero *, .site-footer * { color: var(--ink); }
  .hero .btn, .site-footer .btn { background: var(--paper); border-color: var(--ink); }
}