@import url("../fonts/fonts.css?v=20261007-navigation");
@layer xl {

/* ============ RESET ============ */
* { padding: 0; margin: 0; border: 0; }
*, *:before, *:after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:focus, :active { outline: none; }
:focus-visible { outline: 2px solid #055EB7; outline-offset: 2px; }
nav, footer, header, aside { display: block; }
html, body { height: 100%; width: 100%; line-height: 1; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
input, button, textarea { font-family: inherit; }
input::-ms-clear { display: none; }
button { cursor: pointer; background-color: transparent; color: inherit; }
button::-moz-focus-inner { padding: 0; border: 0; }
a, a:visited, a:hover { text-decoration: none; }
ul li { list-style: none; }
img { vertical-align: top; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: 400; }

/* ============ BASE ============ */
html { font-size: 20px; }
@media (max-width: 1880px) { html { font-size: calc(16px + 4 * ((100vw - 1440px) / 440)); } }
@media (max-width: 1440px) { html { font-size: 16px; } }

body { font-family: "Inter", Arial, sans-serif; color: #131414; background: #fff; }
body._lock { overflow: hidden !important; }
a { color: #131414; text-transform: uppercase; transition: all 0.3s ease; }
a:hover { color: #055EB7; }
.active { color: #055EB7; }

.wrapper { display: flex; flex-direction: column; min-height: 100%; overflow-x: clip; }
.content { flex: 1 0 auto; margin-top: 100px; }
._container { max-width: 1880px; padding: 0 40px; margin: 0 auto; }
@media (max-width: 767.98px) { ._container { padding: 0 20px; } }

h1 { font-family: "Oswald", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 5.225rem; line-height: 1.05; }
h2 { font-family: "Oswald", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 5rem; line-height: 1.05; }
@media (max-width: 991.98px) { h2 { font-size: 4rem; } }
@media (max-width: 767.98px) { h1 { font-size: 3.25rem; } h2 { font-size: 3rem; } }
h5 { font-family: "Oswald", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 2.625rem; line-height: 1.1; }
h6 { font-family: "Inter", sans-serif; font-size: 1rem; text-transform: uppercase; font-style: normal; font-weight: 500; line-height: 120%; }

/* scroll-in animations (same timings as the reference) */
/* no-JS / failed-JS fallback: the inline head script removes .js, then nothing stays hidden */
/* clip-path тоже снимается: выезд кадров брендов рисуется шторкой, и без этого
   при отключённом JS они остались бы полностью срезанными. */
html:not(.js) .element-animation, html:not(.js) .element-animation-2 { opacity: 1 !important; transform: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .element-animation, .element-animation-2 { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* ============ HEADER ============ */
/* fixed header, always visible; CSS-only entrance so it never depends on JS */
.header { position: fixed; top: 0; left: 0; width: 100%; color: #fff; z-index: 50; transition: background-color 0.35s ease, box-shadow 0.35s ease; animation: headerIn 0.8s ease both; }
@keyframes headerIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
.header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(180deg, rgba(4, 12, 31, 0.72) 0%, rgba(4, 12, 31, 0.35) 55%, rgba(4, 12, 31, 0) 100%); pointer-events: none; z-index: -1; transition: opacity 0.35s ease; }
.header.dark::before, .header._black::before { opacity: 0; }
.header__container { height: 100px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: relative; z-index: 10; transition: height 0.3s ease; }
.header.compact .header__container { height: 76px; }
html { scroll-padding-top: 110px; }
.header__body { padding: 12px 40px; display: flex; align-items: center; gap: 20px; height: 100%; }
@media (max-width: 767.98px) { .header__body { padding: 12px 20px; } }

.header__logo { flex: 0 1 16.7%; display: flex; align-items: center; color: #fff; }
.header__logo:hover { color: #fff; }
@media (max-width: 991.98px) { .header__logo { flex: 0 1 30%; } }



.header__menu { flex: 1 1 auto; }
@media (max-width: 991.98px) { .header__menu { display: none; } }
.menu__list { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.menu__link { display: block; position: relative; padding: 11px 12px; border-radius: 9px; font-family: "XL Navigation", "Inter", sans-serif; color: #fff; font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap; transition: background-color .2s, color .2s, transform .2s; }
.menu__link::after { content: ''; position: absolute; bottom: 4px; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: #EE1B3C; transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.menu__link:hover, .menu__link:focus-visible { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-1px); }
.menu__link:hover::after, .menu__link:focus-visible::after, .menu__link.current::after { transform: scaleX(1); }
.menu__link:focus-visible { outline: 2px solid #EE1B3C; outline-offset: 2px; }
@media (min-width: 992px) and (max-width: 1199px) { .menu__list { gap: 0; } .menu__link { padding: 10px 8px; font-size: 14px; } .header__body { gap: 12px; } }
@media (min-width: 992px) and (max-width: 1399px) { .header__logo { flex:0 0 110px; } .menu__list { gap:2px; } .menu__link { padding-left:9px; padding-right:9px; } .header:has(.header__input._active) .header__menu { display:none; } }
@media (min-width: 992px) and (max-width: 1199px) { .menu__link { padding-left:6px; padding-right:6px; } .menu__link::after { left:8px; right:8px; } }

.header__block { flex: 0 0 auto; justify-content: flex-end; display: flex; align-items: center; gap: 20px; font-weight: 500; font-size: 14px; line-height: 17px; text-transform: uppercase; margin-left: auto; }

.header__search { position: relative; color: #000; display: flex; align-items: center; }
.header__input { height: 28px; border-radius: 14px; padding: 0 12px; text-transform: uppercase; width: 0; opacity: 0; visibility: hidden; transition: all 0.3s ease; font-size: 12px; background: #fff; color: #131414; }
.header__input._active { opacity: 1; visibility: visible; width: 220px; box-shadow: 0 0 0 1px rgba(19, 20, 20, 0.12); }
@media (max-width: 479.98px) { .header__input._active { width: 150px; } }
.header__btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.header__btn svg path { stroke: #fff; transition: stroke 0.3s ease; }

.search-list-holder { position: absolute; right: 0; top: 36px; z-index: 30; }
.search-list { background-color: #fff; min-width: 280px; max-width: 360px; max-height: 60vh; overflow: auto; border-radius: 14px; padding: 10px 6px; box-shadow: 0 10px 40px rgba(8, 18, 41, 0.18); }
.search-list li { margin: 0; }
.search-list a { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.3; color: #131414; }
.search-list a:hover, .search-list a.hover { background: #F1F2F4; color: #055EB7; }
.search-list small { font-size: 10px; color: #8a8d94; white-space: nowrap; font-weight: 500; }
.search-list__empty { padding: 10px 14px; font-size: 13px; color: #8a8d94; text-transform: none; }

/* Переключатель языков отключён — только русский (см. src/i18n.js)
.header__lang { position: relative; cursor: pointer; padding: 8px 0; }
.header__lang:hover .lang__list, .header__lang:focus-within .lang__list { visibility: visible; opacity: 1; }
.lang { color: #fff; }
.lang__list { position: absolute; visibility: hidden; opacity: 0; transition: all 0.3s ease 0s; top: 100%; left: 0; }
.lang__item { padding: 6px 0 0 0; }
.lang__item a { color: #fff; }
.lang__item a:hover, .lang__item a.active { color: #055EB7; }
*/

.icon-menu { flex: 0 0 30px; width: 30px; height: 24px; position: relative; z-index: 60; }
.icon-menu span { transition: all 0.3s ease 0s; top: 50%; left: 0; position: absolute; width: 100%; height: 2px; background-color: #fff; }
.icon-menu span:first-child { top: 6px; }
.icon-menu span:last-child { top: auto; width: 80%; bottom: 6px; }
.icon-menu:hover span:last-child { width: 100%; }
.icon-menu._active span { background-color: #131414; }
.icon-menu._active span:first-child { transform: rotate(-45deg); top: calc(50% - 1px); }
.icon-menu._active span:last-child { width: 100%; transform: rotate(45deg); bottom: calc(50% - 1px); }

/* dark header (inner pages) + open-menu state */
.header.dark { background: #fff; box-shadow: 0 10px 30px -20px #2e2e2e; }
.header.dark .header__container, .header._black .header__container { border-bottom: 1px solid rgba(128, 128, 128, 0.12); }
.header.dark .header__logo, .header._black .header__logo { color: #0C2157; }
.header.dark .menu__link, .header._black .menu__link,
.header.dark .lang, .header._black .lang,
.header.dark .lang__item a, .header._black .lang__item a { color: #131414; }
.header.dark .menu__link:hover, .header._black .menu__link:hover,
.header.dark .menu__link.current, .header._black .menu__link.current,
.header.dark .lang__item a.active, .header._black .lang__item a.active,
.header.dark .lang__item a:hover, .header._black .lang__item a:hover { color: #055EB7; }
.header.dark .menu__link:hover, .header._black .menu__link:hover,
.header.dark .menu__link:focus-visible, .header._black .menu__link:focus-visible,
.header.dark .menu__link.current, .header._black .menu__link.current { color: #C8163F; background: rgba(200,22,63,.055); }
.header.dark .header__btn svg path, .header._black .header__btn svg path { stroke: #131414; }
.header.dark .icon-menu span, .header._black .icon-menu span { background-color: #131414; }
.header.dark .header__input, .header._black .header__input { background: #F1F2F4; }

/* ============ MEGA MENU (burger) ============ */
.shopmenu { position: fixed; opacity: 0; visibility: hidden; z-index: -1; width: 100%; height: 100vh; top: 0; left: 0; background-color: #fff; transform: translate(0, -100px); transition: all 0.3s ease; overflow: auto; }
.shopmenu._active { opacity: 1; visibility: visible; transform: translate(0, 0); z-index: 5; }
.shopmenu__body { padding: 120px 0 40px 0; display: flex; color: #131414; min-height: 100vh; }
@media (max-width: 991.98px) { .shopmenu__body { flex-direction: column; } }
.shopmenu__block { flex: 0 0 33.33%; padding: 0 40px 0 0; position: relative; }
@media (max-width: 991.98px) { .shopmenu__block { padding: 0; } }
.shopmenu__title { display: block; font-family: "Oswald", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 2.75rem; color: #131414; line-height: 140%; margin-bottom: 20px; }
.shopmenu__title:hover { color: #055EB7; }
@media (max-width: 991.98px) { .shopmenu__title { font-size: 2rem; text-align: center; margin-bottom: 10px; } }
@media (max-width: 991.98px) { .shopmenu__list { display: none; } }
.shopmenu__item { display: flex; font-size: 1.125rem; text-transform: uppercase; line-height: 140%; margin-bottom: 0.75rem; font-weight: 500; gap: 6px; }
.shopmenu__item span { font-size: 0.75rem; line-height: 100%; }
.shopmenu__link { color: #131414; }
.shopmenu__link:hover { color: #055EB7; }
.shopmenu__contacts { position: absolute; left: 0; bottom: 20px; }
@media (max-width: 991.98px) { .shopmenu__contacts { position: relative; margin-top: 50px; display: flex; flex-direction: column; align-items: center; text-align: center; } }
.shopmenu__label { font-size: 1rem; text-transform: uppercase; margin-bottom: 20px; }
.shopmenu__cont { display: block; font-size: 1.5rem; text-transform: uppercase; color: #131414; margin-bottom: 20px; line-height: 1.2; }
.shopmenu__cont:hover { color: #055EB7; }
.mobilemenu { display: none; }
@media (max-width: 991.98px) { .mobilemenu { display: block; margin-bottom: 30px; } }

/* social squares */
.social__list { display: flex; gap: 16px; flex-wrap: wrap; }
.social__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #fff; transition: all 0.3s ease; }
.social__icon svg { width: 22px; height: 22px; fill: currentColor; }
.shopmenu__contacts .social__icon, .links .social__icon, .shopinfo__social a { background-color: #0C2157; }
.shopmenu__contacts .social__icon:hover, .links .social__icon:hover, .shopinfo__social a:hover { background-color: #055EB7; color: #fff; }
.footer .social__icon:hover { color: #B2B4BA; }
.links .social__list { gap: 10px; }
.links .social__icon { width: 36px; height: 36px; }
.links .social__icon svg { width: 18px; height: 18px; }

/* ============ FOOTER ============ */
.footer { background-color: #141414; color: #fff; font-size: 0.8125rem; text-transform: uppercase; }
.footer a { color: #fff; }
.footer .social__icon { width: 28px; height: 28px; }
.footer .social__icon svg { width: 17px; height: 17px; }
.footer .social__list { gap: 8px; }
/* Подвал собран плотнее: раньше он занимал почти весь экран (520 px), а полезных
   строк в нём десяток. Ужат за счёт воздуха и кегля — ни одного блока не убрано. */
.footer__body { padding: 18px 0; display: flex; align-items: flex-start; }
/* На телефоне колонки идут друг под другом и центрируются, поэтому flex-start
   здесь снимается — иначе каждая ужимается по содержимому и уезжает влево. */
@media (max-width: 767.98px) { .footer__body { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px 0; } }
/* Знак и соцсети стоят В СТРОКУ: столбиком их сумма была самой высокой частью
   подвала и задавала его высоту, а справа от знака всё равно пустовало. */
/* колонка знака: логотип, под ним подпись разработчика (19.10) */
.footer__one { flex: 0 0 33.33%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
@media (max-width: 991.98px) { .footer__one { flex: 0 0 50%; flex-direction: column; gap: 18px; align-items: center; } }
.footer__logo { color: #fff; display: inline-flex; }
/* «Сайт разработан в НЕРЕАЛЬНОСТИ» — перенесено с mostovikrt.ru (19.10, владелец):
   две строки, слово мягко переливается лаймовым, по буквам раз в несколько
   секунд проходит светлый блик, под словом «гуляет» светящаяся линия. */
.footer__made { margin: 0; line-height: 1.05; text-transform: none; }
.footer__made span { display: block; font: 600 10px/1.05 "Inter", Arial, sans-serif; letter-spacing: 0.035em; color: #8D9096; }
.footer__made strong { position: relative; display: inline-block; margin-top: 6px; padding-bottom: 5px; font: 800 14px/1.05 "Inter", Arial, sans-serif; letter-spacing: 0.085em; white-space: nowrap; color: #b4e45a;
  background: linear-gradient(90deg, #93cb42 0%, #b4e45a 28%, #9dd24a 52%, #c0ec66 76%, #96ce44 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgb(170 230 80 / 0.26)); animation: xl-made-flow 7s ease-in-out infinite alternate; }
.footer__made strong::before { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0 0 5px; z-index: 1;
  background: linear-gradient(100deg, rgb(250 255 236 / 0) 26%, rgb(236 255 190 / 0.85) 40%, #fdfff4 50%, rgb(236 255 190 / 0.85) 60%, rgb(250 255 236 / 0) 74%);
  background-size: 46% 100%; background-repeat: no-repeat; background-position: -120% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; pointer-events: none;
  animation: xl-made-shine 4.6s cubic-bezier(0.45, 0, 0.25, 1) 1s infinite; }
.footer__made strong::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, rgb(160 214 70 / 0), rgb(212 255 128 / 0.9), rgb(160 214 70 / 0)); transform-origin: center;
  animation: xl-made-line 3.8s ease-in-out infinite alternate; }
@keyframes xl-made-flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes xl-made-shine { 0% { background-position: -120% 0; } 58%, 100% { background-position: 220% 0; } }
@keyframes xl-made-line { from { opacity: 0.3; transform: translateX(-9%) scaleX(0.4); } to { opacity: 0.85; transform: translateX(9%) scaleX(0.82); } }
@media (max-width: 991.98px) { .footer__made { text-align: center; } }
@media (prefers-reduced-motion: reduce) {
  .footer__made strong { animation: none; background-position: 30% 0; }
  .footer__made strong::before { animation: none; opacity: 0; }
  .footer__made strong::after { animation: none; opacity: 0.6; transform: scaleX(0.7); }
}
@media (max-width: 767.98px) { .footer__social { text-align: center; } .footer__social .social__list { justify-content: center; } }
.footer__label { margin-bottom: 6px; font-size: 10px; letter-spacing: 0.06em; color: #8D9096; }
.footer__two { flex: 0 0 33.33%; margin-left: 10px; }
@media (max-width: 991.98px) { .footer__two { display: none; } }
.footer__contacts { margin: 0 0 0 10px; display: flex; flex-direction: column; justify-content: flex-start; gap: 13px; }
@media (max-width: 767.98px) { .footer__contacts { align-items: center; text-align: center; margin: 0; } }
.footer__adress p { font-size: 0.95rem; margin-bottom: 0.35rem; line-height: 1.2; }
.footer__adress a { position: relative; display: flex; gap: 10px; align-items: center; transition: all 0.3s ease-in-out; }
@media (max-width: 767.98px) { .footer__adress a { justify-content: center; } }
.footer__adress a::after { content: ""; width: 22px; height: 10px; background: url("../img/icons/arrow.svg") no-repeat center / contain; }
.footer__adress a:hover { gap: 20px; color: #B2B4BA; }
.footer__phone a { font-size: 0.95rem; }
.footer__phone a:hover { color: #B2B4BA; }
.footer__hours { margin-top: 4px; color: #B2B4BA; line-height: 1.35; font-size: 11px; }
.footer__bot { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.063); }
/* копирайт — в правый край (19.10, владелец) */
.footer__niz { display: flex; justify-content: flex-end; gap: 20px; flex-wrap: wrap; text-align: right; }
.footer__text { line-height: 1.4; }
.footer__text a { color: #B2B4BA; }
.footer__text a:hover { color: #fff; }
/* раздел «Документы» (data/documents.json) — колонка между меню и контактами;
   меню ужато до своей ширины, контакты остались на месте */
.footer__two { flex-basis: calc(16.665% - 5px); }
.footer__docs { flex: 0 0 calc(16.665% - 5px); margin-left: 10px; }
.fdocs { display: grid; gap: 0.25rem; }
.fdocs__link { font-size: 0.85rem; transition: color 0.2s; }
.fdocs__link:hover { color: #B2B4BA; }
@media (max-width: 991.98px) { .footer__docs { flex-basis: 24%; } }
.fmenu__item { margin-bottom: 0.25rem; }
.fmenu__link { font-size: 0.85rem; }
.fmenu__link:hover { color: #B2B4BA; }

/* ============ HOME: HERO ============ */
.main { background-color: #0a1020; color: #fff; height: 100vh; min-height: 560px; width: 100%; position: relative; overflow: hidden; isolation: isolate; }
.main__title { font-family: "Oswald", sans-serif; font-weight: 300; text-transform: uppercase; font-size: 6.25rem; line-height: 1.05; margin-bottom: 5vh; }
@media (max-width: 479.98px) { .main__title { font-size: 3.25rem; } }
.main__label.element-animation, .main__label3.element-animation { opacity: 0; transform: translate(20px, 0); }
.main__label2.element-animation { opacity: 0; transform: translate(-20px, 0); }
.main__text.element-animation { opacity: 0; transform: translate(50px, 0); }
/* ---------- logo (client's variant 01) ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: inherit; }
.logo__markwrap { position: relative; display: block; }
.logo__mark { display: block; width: 88px; height: auto; aspect-ratio: 915 / 508; overflow: visible; transition: width 0.3s ease; }
.logo__l { fill: currentColor; }
.logo__name { font-family: "Inter", sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: 0.2em; margin: 5px -0.2em 0 0; white-space: nowrap; text-transform: uppercase; }
.logo__city { display: flex; align-items: center; gap: 6px; font-family: "Inter", sans-serif; font-weight: 500; font-size: 6.5px; letter-spacing: 0.45em; margin: 3px -0.45em 0 0; text-transform: uppercase; white-space: nowrap; }
.logo__city::before, .logo__city::after { content: ""; width: 16px; height: 1px; background: currentColor; opacity: 0.8; }
.logo__city::after { margin-left: -0.45em; }
.logo__tags { position: absolute; left: 74%; top: 8%; font-family: "Inter", sans-serif; font-size: 8.5px; font-weight: 500; letter-spacing: 0.22em; line-height: 1.55; text-transform: uppercase; white-space: nowrap; opacity: 0.8; }
.header.compact .logo__mark { width: 70px; }
.header.compact .logo__city { display: none; }
.header__logo, .header__logo:hover { color: #fff; }
.header.dark .header__logo, .header._black .header__logo { color: #1C1C22; }
.footer__logo .logo__mark { width: 90px; }
.footer__logo .logo__name { font-size: 8px; margin-top: 4px; }
.footer__logo .logo__city { font-size: 6px; gap: 5px; }
.footer__logo .logo__city::before, .footer__logo .logo__city::after { width: 14px; }
.footer__logo .logo--tags { padding-right: 36px; }
.footer__logo .logo__tags { left: 73%; top: 0; font-size: 6px; line-height: 1.26; }
/* Ниже, а не в блоке подвала выше: правило про ширину знака идёт по файлу
   позже и при равной специфичности перебило бы медиазапрос. */
@media (max-width: 767.98px) { .footer__logo .logo__mark { width: 96px; } }

/* ---------- hero background: вечерний кадр + анимация «включение света» ---------- */
.main__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
.main__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; }
html.hero-ready .main__canvas { opacity: 1; }
/* текстуры догрузились позже картинки (мобильный интернет) — живой кадр проявляется поверх неё плавно */
html.hero-late .main__canvas { transition: opacity 1s ease; }
/* возврат на главную без заставки (hero-return, 15.10): живой кадр мягко
   проявляется поверх картинки, когда люди уже стоят на своих местах */
html.hero-return .main__canvas { transition: opacity 0.45s ease; }
/* пока интро не готово — тёмный экран, чтобы светлый кадр не мелькнул */
html.hero-intro:not(.hero-ready) .main__bg { opacity: 0; }
html.hero-intro:not(.hero-ready) .main { background-color: #05070d; }

/* интерфейс въезжает в финальной фазе: шапка, затем заголовок, затем полоса */
html.hero-intro .header { animation: none; opacity: 0; transform: translateY(-110%); }
html.hero-intro .main__body, html.hero-intro .main__info { opacity: 0; transform: translateY(18px); }
html.hero-intro.hero-ui .header { animation: heroHeaderIn 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) both; }
html.hero-intro.hero-ui .main__body { opacity: 1; transform: none; transition: opacity 0.55s ease 0.25s, transform 0.55s ease 0.25s; }
html.hero-intro.hero-ui .main__info { opacity: 1; transform: none; transition: opacity 0.45s ease 0.5s, transform 0.45s ease 0.5s; }
@keyframes heroHeaderIn { from { opacity: 0; transform: translateY(-110%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.hero-intro .header, html.hero-intro .main__body, html.hero-intro .main__info { opacity: 1; transform: none; animation: none; }
}

/* ---------- hero layout: title + text in the right half, info strip along the bottom ---------- */
.main__container { position: relative; height: 100%; }
.main__body { margin-left: 0; max-width: 46%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 100px 0 160px; position: relative; }
.main__title span { display: block; margin-left: 0; }
.main__text { max-width: 560px; text-transform: uppercase; line-height: 1.5; padding-left: 20px; border-left: 3px solid #EE1B3C; font-size: 1rem; }
.main__xl { display: inline-block; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; background: linear-gradient(90deg, #FF3B5C 0%, #EE1B3C 30%, #B0144A 60%, #FF7A93 85%, #FF3B5C 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: xlShine 7s linear infinite; filter: drop-shadow(0 10px 34px rgba(238, 27, 60, 0.35)); }
.main__xl.bump { animation: xlShine 7s linear infinite, xlBump 0.22s ease-out; }
.main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 280px; background: linear-gradient(180deg, rgba(4, 12, 31, 0) 0%, rgba(4, 12, 31, 0.55) 60%, rgba(4, 12, 31, 0.75) 100%); pointer-events: none; z-index: 0; }
.main__container { z-index: 1; }
.main__info { position: absolute; left: 40px; right: 40px; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.22); }
.main__info.element-animation { opacity: 0; transform: translate(0, 20px); }
.main__infoitem { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 24px 30px; border-left: 1px solid rgba(255, 255, 255, 0.14); min-width: 0; }
.main__infoitem:first-child { border-left: 0; padding-left: 0; }
.main__infolabel { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.main__infovalue { font-family: "Oswald", sans-serif; font-weight: 400; font-size: 1.45rem; line-height: 1.15; text-transform: uppercase; color: #fff; }
a.main__infovalue:hover { color: #FF7A93; }
.main__infolink, .main__infonote { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.main__infolink:hover { color: #fff; }
.main__status { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8CF5BD; background: rgba(61, 220, 132, 0.14); border: 1px solid rgba(61, 220, 132, 0.45); border-radius: 20px; padding: 5px 11px 5px 9px; }
.main__status i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7); animation: livePulse 2s ease-out infinite; }
.main__status.is-closed { color: #FF9AAA; background: rgba(238, 27, 60, 0.14); border-color: rgba(238, 27, 60, 0.5); }
.main__status.is-closed i { background: #EE1B3C; animation: none; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
@media (max-width: 1279.98px) { .main__infovalue { font-size: 1.2rem; } .main__infoitem { padding: 18px 16px 24px; } }
@media (max-width: 991.98px) {
  .main__body { margin-left: 0; }
  .main__title { font-size: 4rem; }
  .main__info { grid-template-columns: repeat(2, 1fr); }
  .main__infoitem:nth-child(3) { border-left: 0; padding-left: 0; }
  .main__infoitem:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .main__body { padding-bottom: 250px; }
}
@media (max-width: 767.98px) {
  .main { height: auto; min-height: 100vh; }
  .main__body { height: auto; min-height: 0; padding: 140px 0 36px; }
  .main__title { font-size: 3.4rem; }
  .main__info { position: relative; left: 0; right: 0; margin-bottom: 20px; }
  .main__infoitem { padding: 16px 12px 18px; }
  .main__infovalue { font-size: 1.05rem; }
  .main__text { font-size: 0.85rem; padding-left: 14px; }
}
@media (max-width: 379.98px) { .main__title { font-size: 2.9rem; } }
/* hero slogan: animated gradient XXXXXXXXL + call-to-action buttons */
.main__title { line-height: 1.02; }
@keyframes xlShine { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes xlBump { from { transform: scale(1.06); } to { transform: none; } }

/* ============ HOME: BRANDS ============ */
.brands { padding: 70px 0 120px 0; position: relative; }
.brands__container { position: relative; }
.brands__backtext, .service__backtext { position: absolute; font-family: "Oswald", sans-serif; font-weight: 400; font-size: 13em; line-height: 280px; color: #F2F3F5; text-transform: uppercase; z-index: -1; writing-mode: vertical-rl; right: 10%; top: 0; pointer-events: none; user-select: none; white-space: nowrap; }
.brands__backtext.element-animation, .service__backtext.element-animation { opacity: 0; transform: translate(0, -40px); }
@media (max-width: 767.98px) { .brands__backtext, .service__backtext { font-size: 8em; line-height: 180px; right: 0; } }
.brands__info { display: flex; margin-bottom: 100px; }
@media (max-width: 991.98px) { .brands__info { margin-bottom: 50px; flex-direction: column; } }
.brands__label { flex: 0 0 50%; margin-bottom: 40px; }
.brands__label.element-animation { opacity: 0; transform: translate(0, -20px); }
.brands__text { margin-right: 50px; padding: 0 5vw 0 10px; }
@media (max-width: 991.98px) { .brands__text { margin-right: 10px; padding: 0; } }
.brands__text.element-animation { opacity: 0; transform: translate(40px, 0); }
.brands__list { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: clamp(12px,1.1vw,22px); align-items: start; }
.brands__item { min-width: 0; }
.brands__category { display: block; text-transform: none; }
@media (max-width: 1199.98px) { .brands__list { grid-template-columns: repeat(4,minmax(0,1fr)); row-gap: 24px; } .brands__item:last-child { grid-column: span 2; } }
@media (max-width: 1023.98px) { .brands__list { grid-template-columns: repeat(3,minmax(0,1fr)); } .brands__item:last-child { grid-column: span 3; } }
@media (max-width: 639.98px) { .brands__list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; } .brands__item:last-child { grid-column: span 2; } }
.category__img { overflow: hidden; position: relative; background: #131414; isolation: isolate; }
.category-slider { position: absolute; inset: 0; z-index: -1; }
.category-slider .swiper-slide { background-color: #131414; overflow: hidden; }
.category__bg { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; position: relative; transform:scale(var(--photo-scale,1)); transform-origin:var(--photo-origin,50% 50%); }
.category__img:hover .category__bg { transform: scale(calc(var(--photo-scale,1) * 1.05)); opacity: 0.55; }
.category__logo { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; z-index: 5; color: #fff; font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: 1.6rem; letter-spacing: 0.04em; text-align: center; width: 90%; line-height: 1.1; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); }
.category__img:hover .category__logo { opacity: 1; }
@media (hover: none) { .category__logo { opacity: 1; font-size: 1.2rem; } .category__bg { opacity: 0.7; } }
.category__text { display: flex; justify-content: space-between; gap: 10px; padding: 20px 0; width: 100%; }
.category__name { flex: 0 0 60%; color: #131414; transition: color 0.3s ease; }
.brands__category:hover .category__name { color: #055EB7; }
.category__number { font-family: "Sofia Sans Extra Condensed", sans-serif; font-weight: 500; text-transform: uppercase; font-size: 78px; line-height: 0.8; background: linear-gradient(156.95deg, #1F224B 8.36%, #2D5D85 94.25%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 767.98px) { .category__number { font-size: 56px; } }

/* Высота кадров ПОСТОЯННА, выезд рисуется шторкой (clip-path). Раньше кадры
   росли с height: 0, и на это уходило до 1.8 с: при быстрой прокрутке раздел
   набирал свои 471 px уже под рекламным блоком и вся страница под ним рывком
   уезжала вниз. Шторка даёт тот же кадр, но не трогает раскладку вообще. */
.img1, .img3 { height: 52.4vh; } .img2 { height: 34vh; } .img4 { height: 46vh; } .img5 { height: 33.8vh; } .img6 { height: 42vh; } .img7 { height: 38vh; }
@media (max-width: 767.98px) {
  .img1, .img3 { height: 38vh; }
  .img2, .img5 { height: 28vh; }
  .img4, .img6, .img7 { height: 32vh; }
}
.img1.element-animation-2, .img2.element-animation-2, .img3.element-animation-2, .img4.element-animation-2, .img5.element-animation-2, .img6.element-animation-2, .img7.element-animation-2 { clip-path: inset(0 0 100% 0); }
.img1.element-animation-2.element-show { clip-path: inset(0 0 0 0); transition: clip-path 0.8s ease; }
.img2.element-animation-2.element-show { clip-path: inset(0 0 0 0); transition: clip-path 1s ease; }
.img3.element-animation-2.element-show { clip-path: inset(0 0 0 0); transition: clip-path 1.2s ease; }
.img4.element-animation-2.element-show { clip-path: inset(0 0 0 0); transition: clip-path 1.4s ease; }
.img5.element-animation-2.element-show { clip-path: inset(0 0 0 0); transition: clip-path 1.6s ease; }
.img6.element-animation-2.element-show { clip-path: inset(0 0 0 0); transition: clip-path 1.8s ease; }
.img7.element-animation-2.element-show { clip-path: inset(0 0 0 0); transition: clip-path 2s ease; }

/* ============ HOME: ABOUT ============ */
.about { position: relative; background: #040C1F url("../img/photos/about-night.jpg") no-repeat center bottom / cover; isolation: isolate; }
.about::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #040C1F 0%, rgba(4, 12, 31, 0.85) 30%, rgba(4, 12, 31, 0.35) 75%, rgba(4, 12, 31, 0.6) 100%); z-index: -1; }
.about__body { position: relative; z-index: 5; padding: 100px 0; }
@media (max-width: 991.98px) { .about__body { padding: 50px 0; } }
.about__info { display: flex; }
@media (max-width: 991.98px) { .about__info { flex-direction: column; gap: 40px; } }
.about__label { color: #fff; flex: 0 0 50%; }
.about__text { font-size: 1.5rem; text-transform: uppercase; color: #fff; font-weight: 500; line-height: 140%; margin: 0 0 0 10px; padding: 0 4% 0 0; }
@media (max-width: 991.98px) { .about__text { margin: 0; font-size: 1.25rem; } }
.about__text.element-animation { opacity: 0; transform: translate(10px, 0); }
.about__numbers { padding: 200px 0 0 0; }
@media (max-width: 767.98px) { .about__numbers { padding: 60px 0 0 0; } }
.numbers { color: #fff; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto auto; gap: 20px; }
@media (max-width: 767.98px) { .numbers { display: flex; flex-direction: column; } }
.numbers__item.element-animation { opacity: 0; transform: translate(0, -20px); }
.numbers__item:first-child { grid-column: 1/5; }
.numbers__item:nth-child(2) { grid-column: 3/7; grid-row: 2/3; }
.numbers__item:nth-child(3) { grid-column: 2/4; grid-row: 3/4; align-self: center; }
.numbers__item:nth-child(4) { grid-column: 5/7; grid-row: 3/4; }
@media (max-width: 1279.98px) { .numbers__item:nth-child(3) { grid-column: 1/4; } .numbers__item:nth-child(4) { grid-column: 4/7; } }
.numbers__label { font-weight: 500; font-size: 16px; line-height: 19px; text-transform: uppercase; }
.numbers__n1, .numbers__n2, .numbers__n3 { font-family: "Sofia Sans Extra Condensed", sans-serif; font-weight: 400; line-height: 1; white-space: nowrap; }
.numbers__n1 { font-size: 148px; cursor: default; }
.numbers__area { margin: 40px 0; }
.numbers__n2 { font-size: 124px; }
.numbers__n2 sup { font-size: 0.55em; vertical-align: top; line-height: 1.2; }
.numbers__n3 { font-size: 96px; text-transform: uppercase; }
@media (max-width: 767.98px) { .numbers__n1, .numbers__n2 { font-size: 6.25rem; } .numbers__n3 { font-size: 5rem; } .numbers__area { margin: 0; } }
.numbers__text { padding-right: 10%; line-height: 1.4; }

/* ============ HOME: SERVICE / ENTERTAINMENT ============ */
.service { padding: 70px 0; position: relative; }
.service__container { position: relative; }
.service__backtext { left: 20%; right: auto; }
.service__block { display: flex; position: relative; align-items: center; margin-bottom: 50px; text-transform: none; }
.service__block:hover .service__image::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.35); }
.service__body { z-index: 5; }
.service__floor { color: #B2B4BA; margin-bottom: 0.5rem; transition: all 0.3s ease; }
.service__label { display: inline-block; font-size: clamp(2.6rem, 4.4vw, 5rem); margin-bottom: 2rem; background: linear-gradient(156.95deg, #1F224B 8.36%, #2D5D85 94.25%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease; }
.service__text { color: #131414; transition: all 0.3s ease; }
.service__image { height: 40vh; min-height: 300px; width: 100%; position: relative; transition: all 0.5s ease; overflow: hidden; background: #131414; }
.service__image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; position: relative; }
.ent:hover .service__text, .ent:hover .service__floor { color: #fff; }
.ent:hover .service__label { -webkit-text-fill-color: #fff; }

/* Развлечения: картинка чередуется справа и слева, блоки зеркальны друг другу.
   Порядок в разметке всегда «картинка, подпись», сторону задаёт направление
   флекса. При наведении картинка разворачивается во всю ширину, подпись
   отъезжает в сторону своего края. */
.ent { gap: 0; }
.ent__img { flex: 0 0 58%; transition: flex-basis 0.5s ease; }
.ent__text { flex: 0 0 42%; padding: 0 44px; transition: transform 0.5s ease; }
.ent--r { flex-direction: row-reverse; }
.ent:hover .ent__img { flex-basis: 100%; }
.ent--r:hover .ent__text { transform: translate(44px, 0); }
.ent--l:hover .ent__text { transform: translate(-44px, 0); }
/* Подпись ложится поверх развернувшейся картинки — без этого она вытесняется
   за край и текст пропадает. */
.ent:hover .ent__text { position: absolute; z-index: 2; max-width: 42%; }
.ent--r:hover .ent__text { left: 0; }
.ent--l:hover .ent__text { right: 0; }
@media (max-width: 1279.98px) {
  .ent__img { flex-basis: 52%; }
  .ent__text { flex-basis: 48%; padding: 0 24px; }
  .ent:hover .ent__text { max-width: 52%; }
}

@media (max-width: 767.98px) {
  .service { padding: 50px 0 0 0; }
  /* на телефоне блоки складываются в колонку, чередование сторон теряет смысл */
  .ent, .ent--r { flex-direction: column; }
  .ent__img, .ent__text { flex: 0 0 auto; width: 100%; max-width: none; padding: 0; }
  .ent__text { padding: 18px 0 0; }
  .ent:hover .ent__img { flex-basis: auto; }
  .ent:hover .ent__text { position: static; transform: none; max-width: none; }
  .service__image { height: 60vh; }
  .service__image::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); }
  .service__text, .service__floor { color: #fff; font-size: 0.8rem; }
  .service__label { -webkit-text-fill-color: #fff; }
  .ent .service__image { height:auto; min-height:0; aspect-ratio:16 / 9; }
  .ent .service__image::after { display:none; }
  .ent .service__label, .ent:hover .service__label { -webkit-text-fill-color:transparent; }
  .ent .service__text, .ent:hover .service__text { color:#131414; font-size:14px; line-height:1.5; }
  .ent .service__floor, .ent:hover .service__floor { color:#B2B4BA; }
}

/* ============ HOME: FOODCOURT ============ */
.foodcort { margin: 50px 0; position: relative; }
.foodcort__container { position: relative; }
.foodcort__floor { text-align: center; color: #B2B4BA; margin-bottom: 0.8rem; }
.foodcort__label { text-align: center; margin-bottom: 50px; }
.foodcort__label.element-animation { opacity: 0; transform: translate(0, -20px); }
@media (max-width: 1279.98px) { .foodcort__label { margin-bottom: 20px; } }
.foodcort__body { display: flex; align-items: flex-end; padding: 50px 0; }
@media (max-width: 1279.98px) { .foodcort__body { display: block; padding: 20px 0; } }
.foodcort__list { flex: 0 0 66.66%; display: flex; gap: 20px; }
@media (max-width: 1279.98px) { .foodcort__list { margin-bottom: 50px; } }
@media (max-width: 991.98px) { .foodcort__list { flex-direction: column; } }
.foodcort__item { flex: 0 0 40%; position: relative; }
@media (max-width: 991.98px) { .foodcort__item { flex: auto; } }
/* Карточки съезжаются НА ОДИН УРОВЕНЬ: первая приходит сверху, вторая снизу,
   а в конце обе встают ровно. Раньше конечное состояние само было со сдвигом
   (-60 и +60), и они расходились «лесенкой». */
.foodcort__item.element-animation { opacity: 0; }
.foodcort__item:first-child.element-animation { transform: translate(0, -70px); }
.foodcort__item:nth-child(2).element-animation { transform: translate(0, 70px); }
/* Конечное состояние нужно прописать здесь же: общее правило
   «.element-animation.element-show { transform: none }» слабее по
   специфичности, чем стартовые строки выше, и само их не перебивает. */
.foodcort__item.element-animation.element-show { transform: none; }
@media (max-width: 1279.98px) { .foodcort__item:first-child.element-animation.element-show, .foodcort__item:nth-child(2).element-animation.element-show { transform: translate(0, 0); } }
.foodcort__block { display: block; }
.foodcort__image { height: 60vh; position: relative; background: #131414; overflow: hidden; }
@media (max-width: 1279.98px) { .foodcort__image { height: 40vh; } }
@media (max-width: 991.98px) { .foodcort__image { height: 28vh; } }
.foodcort__image img { position: absolute; object-fit: cover; width: 100%; height: 100%; opacity: 0.7; transition: all 0.3s ease; }
.foodcort__category { position: absolute; left: 20px; bottom: 20px; color: #fff; transition: all 0.3s ease; }
.foodcort__block:hover .foodcort__image img { opacity: 0.6; transform: scale(1.05); }
.foodcort__block:hover .foodcort__category { left: 25px; }
.foodcort__text { flex: 0 0 33.33%; padding: 0 60px 60px 10px; line-height: 1.4; }
@media (max-width: 1279.98px) { .foodcort__text { margin-left: 50%; padding: 0 20px 20px 0; } }
@media (max-width: 767.98px) { .foodcort__text { margin-left: 0; padding: 20px 0; } }
.foodcort__text.element-animation { opacity: 0; transform: translate(20px, 0); }

/* ============ HOME: NEWS ============ */
.news { margin: 80px 0 100px; }
@media (max-width: 991.98px) { .news { margin: 40px 0 60px; } }
.news__top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 20px; flex-wrap: wrap; }
.news__all { font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; }
.news__all::after { content: "→"; transition: transform 0.3s; }
.news__all:hover::after { transform: translateX(6px); }
.news__list { display: flex; margin: 0 -20px; flex-wrap: wrap; }
.news__item { flex: 0 0 33.33%; padding: 0 20px; }
@media (max-width: 991.98px) { .news__item { flex: 0 0 50%; margin-bottom: 30px; } }
@media (max-width: 767.98px) { .news__item { flex: 0 0 100%; } }
.news__img { height: 30vh; min-height: 220px; position: relative; background: #131414; overflow: hidden; margin-bottom: 20px; display: block; }
.news__img img { position: absolute; object-fit: cover; width: 100%; height: 100%; transition: all 0.5s ease; }
.news__item:hover .news__img img { transform: scale(1.05); opacity: 0.85; }
.news__tag { position: absolute; left: 16px; top: 16px; background: #055EB7; color: #fff; font-size: 11px; font-weight: 600; padding: 6px 10px; text-transform: uppercase; letter-spacing: 0.04em; z-index: 2; }
.news__text { display: flex; gap: 10px; }
.news__date { flex: 0 0 30%; color: #B2B4BA; font-size: 14px; line-height: 1.4; }
.news__name { color: #0C2157; font-size: 1.125rem; line-height: 120%; font-weight: 500; text-transform: uppercase; }
.news__name:hover { color: #055EB7; }

/* ============ HOME: MAP ============ */
/* Карточка: карта во всю ширину, под ней светлая полоса с адресом и кнопками
   маршрута. Полоса ВНЕ рамки карты, иначе её перекрывают контролы виджета. */
.gmap { margin: 0 0 100px; }
@media (max-width: 991.98px) { .gmap { margin-bottom: 60px; } }
.gmap__label { margin-bottom: 40px; }
.gmap__label.element-animation { opacity: 0; transform: translate(0, -20px); }
.gmap__card { border-radius: 14px; overflow: hidden; background: #F1F2F4; box-shadow: 0 18px 44px rgba(12, 33, 87, 0.1); }
.gmap__card.element-animation { opacity: 0; transform: translate(0, 20px); }
.gmap__frame { position: relative; height: 52vh; min-height: 460px; background: #E8EAEE; }
.gmap__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.gmap__bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px 24px; padding: 18px 26px; background: #fff;
}
.gmap__address { color: #0C2157; font-size: 15px; line-height: 1.3; }
.gmap__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.gmap__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(12, 33, 87, 0.22);
  color: #0C2157; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.gmap__btn:hover { color: #fff; background: #055EB7; border-color: #055EB7; }
@media (max-width: 767.98px) {
  .gmap__frame { height: 60vh; min-height: 420px; }
  .gmap__bar { padding: 14px 16px; }
  .gmap__actions { width: 100%; }
  .gmap__btn { flex: 1 1 auto; padding: 11px 14px; font-size: 11px; letter-spacing: 0.05em; }
}

/* ============ INNER PAGES ============ */
.inner { padding: 60px 0; }
.inner__title { text-align: center; margin-bottom: 60px; padding: 0 20px; }
@media (max-width: 767.98px) { .inner__title { margin-bottom: 40px; } }
.inner__title.element-animation { opacity: 0; transform: translate(0, -20px); }
.inner__body { display: flex; }
@media (max-width: 767.98px) { .inner__body { flex-direction: column; } }
.aboutus { background: url("../img/bg-xl.svg") no-repeat top center / 60% auto; }
.inner__left { flex: 0 0 16.67%; }
.inner__left.element-animation { opacity: 0; transform: translate(-20px, 0); }
.inner__contant { width: 100%; margin-left: 33.33%; padding: 0 10px; }
@media (max-width: 991.98px) { .inner__contant { margin-left: 16.67%; } }
@media (max-width: 767.98px) { .inner__contant { margin-left: 0; padding: 0; } }
.inner__text { font-size: 1.25rem; line-height: 140%; margin-bottom: 60px; padding-right: 40px; }
@media (max-width: 767.98px) { .inner__text { padding-right: 0; margin-bottom: 30px; font-size: 1.1rem; } }
.inner__text p { margin-bottom: 2rem; }
.inner__text ul { margin: 0 0 2rem 1.2em; }
.inner__text ul li { list-style: disc; margin-bottom: 0.6rem; }
.inner__text a { text-transform: none; color: #055EB7; }
.inner__text.element-animation { opacity: 0; transform: translate(-10px, 0); }
.inner__img { width: 116.67%; height: auto; position: relative; margin-bottom: 60px; margin-left: -33.33%; overflow: hidden; }
@media (max-width: 767.98px) { .inner__img { margin-left: 0; width: 100%; margin-bottom: 30px; } }
.inner__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.inner__img figcaption { font-size: 12px; color: #8a8d94; margin-top: 8px; line-height: 1.4; }

.submenu { margin-bottom: 40px; }
@media (max-width: 767.98px) { .submenu__list { display: flex; flex-wrap: wrap; gap: 6px 16px; } }
.submenu__item { font-family: "Oswald", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 2.25rem; line-height: 120%; }
@media (max-width: 767.98px) { .submenu__item { font-size: 1.25rem; } }
.submenu__link { color: #131414; }
.submenu__link:hover, .submenu__link.here { color: #055EB7; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 60px; padding-right: 40px; }
@media (max-width: 991.98px) { .facts { grid-template-columns: 1fr 1fr; padding-right: 0; } }
.facts__item { border-top: 1px solid #131414; padding-top: 14px; }
.facts__num { font-family: "Sofia Sans Extra Condensed", sans-serif; font-size: 64px; line-height: 1; background: linear-gradient(156.95deg, #1F224B 8.36%, #2D5D85 94.25%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.facts__label { font-size: 13px; font-weight: 500; text-transform: uppercase; margin-top: 6px; line-height: 1.3; }

/* spoilers */
.spoiler { width: 100%; }
.spoiler__item { width: 100%; border-bottom: 1px solid #B2B4BA; }
.spoiler__text { padding: 0 0 24px; font-size: 1.05rem; line-height: 1.5; }
.spoiler__text p { margin-bottom: 1rem; }
.spoiler__label { font-size: 1.5rem; text-transform: uppercase; position: relative; width: 100%; text-align: left; padding: 20px 0; transition: all 0.3s ease; display: flex; align-items: center; justify-content: space-between; line-height: 1.2; }
@media (max-width: 767.98px) { .spoiler__label { font-size: 1.1rem; } }
.spoiler__label:hover, .spoiler__label._active { color: #055EB7; }
.spoiler__label span { display: block; flex: 0 0 24px; width: 24px; height: 24px; position: relative; transition: all 0.3s ease; margin-left: 20px; }
.spoiler__label span::after, .spoiler__label span::before { content: ""; width: 24px; height: 2px; background-color: currentColor; position: absolute; top: 50%; left: 0; transition: all 0.3s ease; }
.spoiler__label span::before { transform: rotate(90deg); }
.spoiler__label._active span::before { transform: rotate(0); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-transform: uppercase; font-size: 0.875rem; border: 2px solid #055EB7; padding: 0.85rem 1.4rem; color: #055EB7; font-weight: 600; transition: all 0.3s ease; letter-spacing: 0.02em; }
.btn:hover { background-color: #055EB7; color: #fff; }
.btn--fill { background: #055EB7; color: #fff; }
.btn--fill:hover { background: #0C2157; border-color: #0C2157; }

/* forms */
.form { display: grid; gap: 14px; max-width: 640px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 767.98px) { .form__row { grid-template-columns: 1fr; } }
.form input, .form textarea, .form select { width: 100%; border: 1px solid #B2B4BA; padding: 14px 16px; font-size: 1rem; background: #fff; color: #131414; transition: border-color 0.3s; font-family: inherit; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: #055EB7; }
.form textarea { min-height: 120px; resize: vertical; }
.form__note { font-size: 12px; color: #8a8d94; line-height: 1.4; }
.form__ok { display: none; padding: 16px; background: #EAF3FF; color: #0C2157; line-height: 1.4; }
.form.sent .form__ok { display: block; }

/* ============ SERVICES DETAIL (entertainment / food detail) ============ */
.services__bgimg { width: 100%; height: 70vh; position: relative; overflow: hidden; background: #131414; }
.services__bgimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.services__bgimg.element-animation { opacity: 0; }
.services__title { margin: 40px 0; }
@media (max-width: 991.98px) { .services__title { font-size: 3.5rem; } }
.services__title.element-animation { opacity: 0; transform: translate(20px, 0); }
.services__content { display: flex; margin-bottom: 100px; }
@media (max-width: 767.98px) { .services__content { flex-direction: column; margin-bottom: 50px; } }
.services__text { font-size: 1.25rem; line-height: 140%; flex: 0 0 66.67%; padding: 0 100px 0 0; }
.services__text p { margin-bottom: 1.4rem; }
@media (max-width: 991.98px) { .services__text { padding: 0 30px 0 0; } }
@media (max-width: 767.98px) { .services__text { padding: 0; margin-bottom: 30px; font-size: 1.1rem; } }
.services__links { flex: 0 0 33.33%; }
.links { text-transform: uppercase; font-weight: 500; padding: 10px 0; margin-left: 10px; }
@media (max-width: 767.98px) { .links { margin-left: 0; } }
.links__body { margin-bottom: 40px; }
.links__item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; line-height: 130%; }
.links__item svg { flex: 0 0 22px; width: 22px; height: 22px; stroke: #055EB7; fill: none; stroke-width: 1.6; margin-top: -2px; }
.links__item a { color: #131414; }
.links__item a:hover { color: #055EB7; }

.services__slider { width:100%; max-width:1120px; margin:0 auto 80px; position:relative; }
.slider__title { position:static; color:#202d49; font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.2; margin:0 0 24px; }
.slider__body { display:block; }
.slider__slide { position:relative; min-width:0; width:100%; }
.slider__img { position:relative; width:100%; aspect-ratio:16 / 9; max-height:60svh; overflow:hidden; background:#f1f2f4; }
.slider__img img { display:block; width:100%; height:100%; object-fit:contain; }
.slider__footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; }
.slider__number .swiper-pagination { position:static; width:auto; color:#202d49; text-align:left; font-size:16px; font-variant-numeric:tabular-nums; }
.slider__number .swiper-pagination span { color:#77808e; }
.slider__nav { display:flex; align-items:center; gap:10px; position:relative; }
.slider__nav .swiper-button-next, .slider__nav .swiper-button-prev, .slider__autoplay { position:static; width:44px; height:44px; margin:0; display:flex; align-items:center; justify-content:center; border:1px solid #d8dde5; border-radius:50%; color:#202d49; background:#fff; cursor:pointer; }
.slider__nav button:hover { color:#ee1b3c; border-color:#ee1b3c; }
.slider__nav button:focus-visible { outline:2px solid #055eb7; outline-offset:3px; }
.slider__nav .swiper-button-next::after, .slider__nav .swiper-button-prev::after { font-size:16px; }
.slider__autoplay svg { width:18px; height:18px; fill:currentColor; }
.slider__autoplay .play-icon, .slider__autoplay[aria-pressed="true"] .pause-icon { display:none; }
.slider__autoplay[aria-pressed="true"] .play-icon { display:block; }
.gallery-swiper { width: 100%; overflow: hidden; }

/* ============ LISTINGS (entertainment index) ============ */
.service--list .service__block { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,72px); margin-bottom:70px; }
.service--list .service__body { min-width:0; }
.service--list .service__image { height:auto; min-height:0; aspect-ratio:16 / 9; }
.service--list .service__block:hover .service__image img { transform:scale(1.025); }
.service--list .service__block:focus-visible { outline:2px solid #055eb7; outline-offset:8px; }
@media (max-width:767.98px) { .service--list .service__block { grid-template-columns:1fr; gap:24px; margin-bottom:48px; } .slider__title { margin-bottom:16px; } .slider__footer { padding-top:12px; } }

/* ============ NEWS LIST / ARTICLE ============ */
.allnews { margin: 0 16.67% 5rem 16.67%; }
@media (max-width: 1279.98px) { .allnews { margin: 0 0 3rem 0; } }
.allnews__filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }
.chip { font-size: 13px; font-weight: 600; text-transform: uppercase; border: 1px solid #B2B4BA; padding: 9px 16px; color: #131414; transition: all 0.3s; cursor: pointer; background: #fff; }
.chip:hover { border-color: #055EB7; color: #055EB7; }
.chip.pick { background: #055EB7; border-color: #055EB7; color: #fff; }
.allnews__items.element-animation { opacity: 0; transform: translate(0, 10px); }
.allnews__item { display: flex; margin-bottom: 40px; }
@media (max-width: 767.98px) { .allnews__item { flex-direction: column; } }
.allnews__img { flex: 1 0 50%; height: 30vh; min-height: 240px; position: relative; overflow: hidden; display: block; }
@media (max-width: 767.98px) { .allnews__img { margin-bottom: 14px; } }
.allnews__img img { position: absolute; object-fit: cover; width: 92%; height: 100%; transition: all 0.5s ease; }
@media (max-width: 767.98px) { .allnews__img img { width: 100%; } }
.allnews__item:hover .allnews__img img { transform: scale(1.03); }
.allnews__body { flex: 0 1 50%; display: flex; flex-direction: column; gap: 20px; padding: 1rem 0; }
.allnews__date { color: #B2B4BA; }
.allnews__label { font-size: 2rem; line-height: 110%; font-weight: 500; text-transform: uppercase; }
@media (max-width: 767.98px) { .allnews__label { font-size: 1.4rem; } }
.allnews__excerpt { line-height: 1.5; color: #444; }

.newsone { margin-bottom: 100px; }
.newsone__title { margin: 0 16.67%; padding: 40px 0 0 0; text-align: center; }
@media (max-width: 767.98px) { .newsone__title { margin: 0; font-size: 2.4rem; } }
.newsone__title.element-animation { opacity: 0; transform: translate(0, -20px); }
.newsone__date { margin: 1.5rem 16.67%; text-align: center; color: #B2B4BA; }
.newsone__body { display: flex; }
@media (max-width: 991.98px) { .newsone__body { flex-direction: column; margin-bottom: 40px; } }
.newsone__left { flex: 0 0 50%; margin-bottom: 40px; }
.newsone__left.element-animation { opacity: 0; transform: translate(-10px, 0); }
.newsone__img { width: 100%; height: 400px; position: relative; overflow: hidden; }
.newsone__img img { position: absolute; object-fit: cover; width: 92%; height: 100%; }
@media (max-width: 991.98px) { .newsone__img img { width: 100%; } }
.newsone__text { flex: 0 0 50%; font-size: 1.125rem; line-height: 140%; padding: 0 10% 0 10px; }
.newsone__text p { margin-bottom: 2rem; }
.newsone__text.element-animation { opacity: 0; transform: translate(0, -10px); }
.newsone__back { margin-top: 20px; display: inline-flex; gap: 10px; font-weight: 500; font-size: 14px; }

/* ============ CONTACTS ============ */
.contacts__top { display: flex; margin-bottom: 40px; gap: 20px; }
@media (max-width: 991.98px) { .contacts__top { flex-direction: column; } }
.contacts__map { width: 50%; min-height: 440px; position: relative; margin-bottom: 40px; background: #F1F2F4; }
@media (max-width: 991.98px) { .contacts__map { width: 100%; min-height: 360px; } }
.contacts__map iframe { position: absolute; inset: 0; width: 92%; height: 100%; border: 0; }
@media (max-width: 991.98px) { .contacts__map iframe { width: 100%; } }
.contacts__map.element-animation { opacity: 0; transform: translate(-10px, 0); }
.contacts__links { flex: 0 0 50%; }
.contacts__links.element-animation { opacity: 0; transform: translate(10px, 0); }
.contacts__route { margin-top: 30px; line-height: 1.5; text-transform: none; font-weight: 400; }
.contacts__route h6 { margin-bottom: 10px; }
.contacts__route li { margin-bottom: 8px; padding-left: 18px; position: relative; }
.contacts__route li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: #055EB7; }
.contacts__bot { font-weight: 500; text-transform: uppercase; margin: 0 16.67% 60px; }
@media (max-width: 991.98px) { .contacts__bot { margin: 0 0 40px; } }
.contacts__label { margin-bottom: 2rem; }
.contacts__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 767.98px) { .contacts__list { grid-template-columns: 1fr; } }
.contacts__item { display: flex; flex-direction: column; }
.contacts__icon { margin-bottom: 20px; }
.contacts__icon svg { width: 28px; height: 28px; stroke: #055EB7; fill: none; stroke-width: 1.6; }
.contacts__link { margin-bottom: 2rem; line-height: 1.4; }
.contacts__text { margin-bottom: 2rem; line-height: 140%; }

/* ============ SHOPS LIST ============ */
.shops { background-color: #F1F2F4; min-height: calc(100vh - 100px); padding-bottom: 100px; }
.shops__top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.shops__title { padding: 40px 0; }
.shops__tools { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.shops__filter { height: 40px; border: 1px solid #d5d7dc; background: #fff; padding: 0 14px; font-size: 13px; text-transform: uppercase; min-width: 240px; color: #131414; }
.shops__filter:focus { border-color: #055EB7; }
.shops__floors { display: flex; gap: 6px; }
.shops__floors button { width: 40px; height: 40px; border: 1px solid #d5d7dc; background: #fff; font-family: "Oswald", sans-serif; font-size: 16px; transition: all 0.3s; }
.shops__floors button:hover { border-color: #055EB7; color: #055EB7; }
.shops__floors button.pick { background: #055EB7; border-color: #055EB7; color: #fff; }
.shops__icons { display: flex; gap: 10px; padding: 0 0 0 10px; }
.shops__icon, .shops__icon2 { width: 24px; height: 24px; margin: 4px; position: relative; }
.shops__icon span { transition: all 0.3s ease 0s; left: 0; position: absolute; width: 100%; top: 2px; height: 2px; background-color: #131414; }
.shops__icon span:nth-child(2) { width: 80%; top: 8px; }
.shops__icon span:nth-child(3) { top: auto; bottom: 8px; }
.shops__icon span:last-child { top: auto; width: 50%; bottom: 2px; }
.shops__icon:hover span, .shops__icon.pick span { background-color: #055EB7; }
.shops__icon2 span { transition: all 0.3s ease 0s; position: absolute; width: 6px; height: 6px; border: 2px solid #131414; }
.shops__icon2 span:nth-child(1) { left: 2px; top: 2px; } .shops__icon2 span:nth-child(2) { left: 9px; top: 2px; } .shops__icon2 span:nth-child(3) { left: 16px; top: 2px; }
.shops__icon2 span:nth-child(4) { left: 2px; top: 9px; } .shops__icon2 span:nth-child(5) { left: 9px; top: 9px; } .shops__icon2 span:nth-child(6) { left: 16px; top: 9px; }
.shops__icon2 span:nth-child(7) { left: 2px; top: 16px; } .shops__icon2 span:nth-child(8) { left: 9px; top: 16px; } .shops__icon2 span:nth-child(9) { left: 16px; top: 16px; }
.shops__icon2:hover span, .shops__icon2.pick span { border-color: #055EB7; }
.shops__icon.pick, .shops__icon2.pick { pointer-events: none; }
.shops__body { display: flex; }
@media (max-width: 991.98px) { .shops__body { flex-direction: column; } }
.shops__categories { flex: 0 0 20%; margin-bottom: 40px; padding: 20px 20px 20px 0; }
.shops__list { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 120px; }
@media (max-width: 991.98px) { .shops__list { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; position: static; } }
.shops__item { font-size: 0.875rem; text-transform: uppercase; font-weight: 500; line-height: 130%; position: relative; }
.shops__item span { display: inline-block; font-size: 0.75em; margin-left: 5px; transform: translate(0, -7px); }
.shops__link.here { color: #055EB7; }
.shops__brand { flex: 0 0 80%; min-width: 0; }
.brand__continer { margin-left: 10px; }
@media (max-width: 991.98px) { .brand__continer { margin-left: 0; } }
.brand__list { display: none; }
.brand__list._active { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; animation: fadeIn 0.4s ease; }
@media (max-width: 479.98px) { .brand__list._active { grid-template-columns: 1fr 1fr; gap: 10px; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.brand__item { width: 100%; height: 30vh; min-height: 200px; max-height: 300px; background-color: #fff; overflow: hidden; position: relative; }
@media (max-width: 479.98px) { .brand__item { height: 160px; min-height: 0; } }
.brand__link { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; transition: all 0.3s ease; padding: 20px; text-align: center; }
.brand__link:hover { transform: scale(1.06); }
.brand__floor { position: absolute; left: 14px; bottom: 12px; font-size: 11px; font-weight: 600; color: #8a8d94; letter-spacing: 0.04em; }
.brand__cat { position: absolute; right: 14px; top: 12px; font-size: 10px; color: #8a8d94; font-weight: 500; max-width: 60%; text-align: right; line-height: 1.2; }
.brand__item.hidden, .brands__textitem.hidden { display: none; }

/* text wordmarks (instead of raster logos); size = base per style × length factor × screen factor */
.wordmark { --wm: 1.9rem; --k: 1; --s: 1; font-family: "Oswald", sans-serif; font-size: calc(var(--wm) * var(--k) * var(--s)); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; color: var(--c, #131414); overflow-wrap: normal; word-break: normal; hyphens: none; max-width: 100%; }
.wordmark--sans { font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: -0.03em; text-transform: none; --wm: 1.75rem; }
.wordmark--light { font-weight: 300; letter-spacing: 0.16em; --wm: 1.45rem; }
.wordmark--cond { font-family: "Sofia Sans Extra Condensed", sans-serif; font-weight: 500; --wm: 2.6rem; letter-spacing: 0; }
.wordmark--serif { font-family: Georgia, "Times New Roman", serif; text-transform: none; letter-spacing: 0; --wm: 1.9rem; font-style: italic; }
.wordmark--box { background: var(--c, #131414); color: #fff; padding: 0.3em 0.55em; --wm: 1.5rem; display: inline-block; }
.wordmark--long { --k: 0.8; }
.wordmark--xlong { --k: 0.66; }
.wordmark small { display: block; font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.2em; margin-top: 6px; font-weight: 500; font-style: normal; text-transform: uppercase; }
@media (max-width: 479.98px) { .brand__item .wordmark { --s: 0.62; } .brand__item .wordmark small { font-size: 8px; } }
.shopinfo__img .wordmark { --s: 1.25; }
.brands__textlist { display: none; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 0 0 20px; align-items:start; }
.brands__textlist._active { display: grid; animation: fadeIn 0.4s ease; }
.brands__letter-group { min-width:0; padding:18px; border:1px solid #e0e4eb; background:#fff; }
.brands__letter-group.hidden { display:none; }
.brands__textitem { font-size: 16px; padding:12px 0; border-bottom:1px solid #edf0f4; line-height:1.4; overflow-wrap:anywhere; }
.brands__textitem a { text-transform:none; }
.brands__textitem:last-child { border-bottom:0; padding-bottom:0; }
.brands__textitem small { display: block; font-size: 12px; line-height:1.5; color: #758397; margin-top: 4px; font-weight: 400; }
.brands__letter { font-family: "Oswald", sans-serif; font-size: 28px; line-height:1.1; color: #055EB7; margin-bottom:8px; }
@media (max-width:1199px) { .brands__textlist { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media (max-width:599.98px) { .brands__textlist { grid-template-columns:1fr; gap:14px; } }
.shops__empty { padding: 60px 0; text-align: center; font-size: 1.1rem; color: #8a8d94; display: none; }
.shops__empty.show { display: block; }

/* ============ CREDITS ============ */
.credits { max-width: 1100px; margin: 0 auto 80px; }
.credits__intro { line-height: 1.5; margin-bottom: 30px; color: #444; }
.credits__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.credits__item { font-size: 13px; line-height: 1.4; }
.credits__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 8px; background: #F1F2F4; }
.credits__item a { text-transform: none; color: #055EB7; word-break: break-word; }

/* ============ 404 ============ */
.notfound { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; padding: 60px 20px; }
.notfound__code { font-family: "Sofia Sans Extra Condensed", sans-serif; font-size: 220px; line-height: 0.8; background: linear-gradient(156.95deg, #1F224B 8.36%, #2D5D85 94.25%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============ SHOP MODAL (used on map + shop tiles) ============ */
.map__info { display: block; position: fixed; inset: 0; padding-top: 100px; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 40; background: rgba(8, 18, 41, 0.12); }
.map__info.open { opacity: 1; visibility: visible; }
.map__shopinfo { position: absolute; top: 120px; right: 40px; background-color: #fff; border-radius: 10px; width: 500px; max-height: calc(100vh - 150px); overflow: auto; box-shadow: 0 4px 30px rgba(8, 18, 41, 0.1); transform: translateY(20px); transition: transform 0.4s ease; }
.map__info.open .map__shopinfo { transform: none; }
@media (max-width: 1279.98px) { .map__shopinfo { margin-left: auto; margin-right: auto; left: 0; right: 0; } }
@media (max-width: 767.98px) { .map__shopinfo { width: calc(100% - 32px); top: 110px; } }
.shopinfo__close { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; z-index: 2; }
.shopinfo__close span { display: block; width: 100%; height: 2px; background-color: #131414; position: absolute; top: 11px; left: 0; }
.shopinfo__close span:first-child { transform: rotate(-45deg); }
.shopinfo__close span:last-child { transform: rotate(45deg); }
.shopinfo__body { position: relative; text-align: center; padding: 40px; }
@media (max-width: 479.98px) { .shopinfo__body { padding: 40px 20px 30px; } }
.shopinfo__img { margin-bottom: 20px; min-height: 90px; display: flex; align-items: center; justify-content: center; }

.shopinfo__title { margin-bottom: 14px; line-height: 100%; }
/* Название в карточке — только для экранного диктора: на виду логотип, а где
   его нет — название, набранное на месте логотипа (19.10, владелец: «название
   показывается дважды»). */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.shopinfo__desc { font-size: 14px; line-height: 1.5; margin-bottom: 30px; color: #444; }
.shopinfo__location, .shopinfo__links { text-transform: uppercase; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 30px; gap: 10px; font-size: 14px; line-height: 1.4; }
.shopinfo__label { font-weight: 500; text-transform: uppercase; margin-bottom: 10px; font-size: 12px; color: #8a8d94; }
.shopinfo__links > a { text-transform: uppercase; }
.shopinfo__social { display: flex; margin-bottom: 20px; align-items: center; justify-content: center; gap: 10px; }
.shopinfo__social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: #fff; }
.shopinfo__social svg { width: 18px; height: 18px; fill: currentColor; }
.shopinfo__list { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.shopinfo__btn { text-transform: uppercase; font-size: 0.8rem; border: 2px solid #055EB7; padding: 0.5rem 0.8rem; border-radius: 4px; color: #055EB7; font-weight: 500; transition: all 0.3s ease; }
.shopinfo__btn:hover { background-color: #055EB7; color: #fff; }
.shopinfo__cta { margin-top: 24px; }

/* Tenant-supplied marks keep their proportions and original colours. */
.tenant-logo { display:inline-flex; align-items:center; justify-content:center; width:220px; height:120px; max-width:100%; padding:10px; border-radius:10px; background:#fff; }
.tenant-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.tenant-logo--dark { background:#1b2029; }
.shopinfo__img .tenant-logo { width:240px; height:100px; }
.category__logo .tenant-logo { max-width:100%; width:160px; height:58px; padding:6px; box-shadow:0 4px 20px #10182726; }
.shop-gallery { margin:20px 0 26px; width:100%; min-width:0; }
.shop-gallery__stage { height:clamp(230px,32vh,330px); background:#f3f4f6; border-radius:12px; overflow:hidden; }
.shop-gallery__stage img { display:block; width:100%; height:100%; object-fit:contain; }
.shop-gallery__stage img[hidden] { display:none; }
.shop-gallery__caption { margin:8px 0 0; color:#7a8290; font:11px/1.5 Inter,Arial,sans-serif; letter-spacing:0; text-transform:none; }
.shop-gallery__bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0; color:#717988; font-family:Inter,Arial,sans-serif; font-size:12px; }
.shop-gallery__bar button { width:38px; height:32px; border:1px solid #e2e5ea; border-radius:8px; color:#263147; font-size:20px; }
.shop-gallery__bar button:hover { background:#f1f3f6; }
.shop-gallery__thumbs { display:flex; gap:7px; overflow-x:auto; padding:3px 1px 7px; scrollbar-width:thin; }
.shop-gallery__thumbs button { flex:0 0 54px; width:54px; height:54px; padding:3px; border:2px solid transparent; border-radius:8px; background:#f3f4f6; }
.shop-gallery__thumbs button[aria-current="true"] { border-color:#ee1b3c; }
.shop-gallery__thumbs img { width:100%; height:100%; object-fit:cover; border-radius:4px; }
.shop-gallery button:focus-visible { outline:2px solid #055eb7; outline-offset:2px; }
@media (max-width:479.98px) {
  .brand__item .tenant-logo { height:88px; padding:7px; }
  .category__logo .tenant-logo { width:132px; height:50px; }
}

/* ============ FLOOR MAP ============ */
body.page-map { overflow: hidden; }
.content--map { margin-top: 100px; }
/* Карта занимает весь раздел, интерфейс лежит ПОВЕРХ неё. Боковая колонка,
   отнимавшая у плана треть ширины, убрана: на картах ТЦ так не делают.
   Палитра вынесена в переменные: тема переключается на одном узле. */
.map {
  --m-bg: #10141F; --m-plate: #161B28; --m-plate-edge: #3B4765;
  --m-corr: #222A3D; --m-atrium: #2B3449; --m-atrium-edge: #445273;
  --m-icon-bg: #38445F; --m-icon-edge: #6D7C9E; --m-icon-ink: #D7E0F2;
  --m-label: #EEF2F9; --m-label-strong: #fff;
  --m-panel: rgba(20, 26, 40, 0.93); --m-panel-edge: rgba(255, 255, 255, 0.08);
  --m-panel-title: #fff; --m-panel-text: #D5DDEC; --m-panel-mute: #8A97B2;
  --m-field: rgba(255, 255, 255, 0.06); --m-field-edge: rgba(255, 255, 255, 0.14);
  --m-chip: rgba(255, 255, 255, 0.07); --m-chip-text: #A9B5CC; --m-chip-on: #3C4A68;
  --m-rail: rgba(32, 40, 58, 0.94); --m-rail-text: #C7D1E5;
  --m-hint: #6E7A95; --m-tip: rgba(18, 24, 38, 0.97);
  --z-shopping-a: #2D5590; --z-shopping-b: #1A3358; --z-shopping-s: #5C87C6; --z-shopping-h: #A8C8F2;
  --z-food-a: #6B3E1C; --z-food-b: #3F240F; --z-food-s: #C08A4A; --z-food-h: #F0BC83;
  --z-fun-a: #452B66; --z-fun-b: #2A1940; --z-fun-s: #9268D4; --z-fun-h: #C9A8F5;
  --z-services-a: #1A5347; --z-services-b: #0F352D; --z-services-s: #4CAE93; --z-services-h: #8BDCC4;
  --z-other-a: #333B52; --z-other-b: #232A3C; --z-other-s: #626D85; --z-other-h: #A3AEC4;
  background-color: var(--m-bg);
  position: relative; height: calc(100vh - 100px); min-height: 420px; overflow: hidden;
}
.map[data-theme="light"] {
  --m-bg: #E8EDF5; --m-plate: #FFFFFF; --m-plate-edge: #AFBDD4;
  --m-corr: #F1F4FA; --m-atrium: #E3E9F4; --m-atrium-edge: #B6C3D9;
  --m-icon-bg: #FFFFFF; --m-icon-edge: #94A5C0; --m-icon-ink: #2A3550;
  --m-label: #1B2743; --m-label-strong: #0C2157;
  --m-panel: rgba(255, 255, 255, 0.95); --m-panel-edge: rgba(12, 33, 87, 0.12);
  --m-panel-title: #0C2157; --m-panel-text: #27324A; --m-panel-mute: #6B7891;
  --m-field: #fff; --m-field-edge: rgba(12, 33, 87, 0.18);
  --m-chip: #EDF1F7; --m-chip-text: #4A5468; --m-chip-on: #0C2157;
  --m-rail: rgba(255, 255, 255, 0.96); --m-rail-text: #27324A;
  --m-hint: #7B869C; --m-tip: rgba(255, 255, 255, 0.98);
  --z-shopping-a: #D3E4FA; --z-shopping-b: #AFCDF2; --z-shopping-s: #6E9BD6; --z-shopping-h: #2F6FD0;
  --z-food-a: #FBE0C4; --z-food-b: #F2C796; --z-food-s: #D9933F; --z-food-h: #C2721A;
  --z-fun-a: #E6D9F8; --z-fun-b: #CDB5EE; --z-fun-s: #9873D4; --z-fun-h: #7A45C7;
  --z-services-a: #CFEDE2; --z-services-b: #A8DCC8; --z-services-s: #52AE8F; --z-services-h: #138A6E;
  --z-other-a: #E6EAF1; --z-other-b: #D2D9E5; --z-other-s: #9AA5B9; --z-other-h: #65718A;
}
#map-content .s-shopping-a { stop-color: var(--z-shopping-a); }
#map-content .s-shopping-b { stop-color: var(--z-shopping-b); }
#map-content .s-food-a { stop-color: var(--z-food-a); }
#map-content .s-food-b { stop-color: var(--z-food-b); }
#map-content .s-fun-a { stop-color: var(--z-fun-a); }
#map-content .s-fun-b { stop-color: var(--z-fun-b); }
#map-content .s-services-a { stop-color: var(--z-services-a); }
#map-content .s-services-b { stop-color: var(--z-services-b); }
#map-content .s-other-a { stop-color: var(--z-other-a); }
#map-content .s-other-b { stop-color: var(--z-other-b); }
#map-content { position: absolute; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
#map-content svg { cursor: grab; display: block; }
#map-content svg:active { cursor: grabbing; }
/* Настоящий план: стены — контур здания из плана эвакуации, помещения —
   полигоны, обведённые по закраске. Цвет заливки НЕ маркерный: он кодирует род
   занятия (магазины / еда / развлечения / сервисы), так и читается с одного
   взгляда, что где находится. */
:root {
  --mp-shopping: #2F6FD0;
  --mp-food: #E0761B;
  --mp-fun: #7A45C7;
  --mp-services: #189C7E;
  --mp-other: #94A0B8;
}
/* Тёмная схема по образцу карты «Авиапарка»: плита темнее фона, блоки —
   насыщенные пятна по роду занятий, тонкая светлая обводка помещений. */
#map-content { background: transparent; }
#map-content .mp-plate { fill: var(--m-plate); }
#map-content .mp-plate-edge { fill: none; stroke: var(--m-plate-edge); stroke-width: 3px; stroke-linejoin: round; }
/* Галерея и атриум — проходимое пространство, светлее помещений. */
#map-content .mp-corridor { fill: var(--m-corr); }
#map-content .mp-atrium { fill: var(--m-atrium); stroke: var(--m-atrium-edge); stroke-width: 1.5px; }
#map-content .mp-icon circle { fill: var(--m-icon-bg); stroke: var(--m-icon-edge); stroke-width: 1.2px; }
#map-content .mp-icon path { fill: none; stroke: var(--m-icon-ink); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
#map-content .mp-icon { pointer-events: all; cursor: help; }
/* Блок помещения: градиент, светлая кромка сверху, при наведении свечение
   своего цвета. Пока курсор на блоке, остальные приглушаются — иначе карта
   остаётся ровным ковром и глазу не за что зацепиться. */
#map-content .mp-zone {
  cursor: pointer; stroke-width: 1.2px; stroke-linejoin: round;
  transition: opacity 0.2s ease, stroke 0.2s ease, filter 0.2s ease;
}
#map-content .mp-zone.g-shopping { stroke: var(--z-shopping-s); }
#map-content .mp-zone.g-food { stroke: var(--z-food-s); }
#map-content .mp-zone.g-fun { stroke: var(--z-fun-s); }
#map-content .mp-zone.g-services { stroke: var(--z-services-s); }
#map-content .mp-zone.g-other, #map-content .mp-zone.is-free { stroke: var(--z-other-s); }
#map-content.is-focused .mp-zone { opacity: 0.4; }
#map-content.is-focused .mp-zone.focus { opacity: 1; }
#map-content .mp-zone.focus, #map-content .mp-zone.active { stroke-width: 2.6px; }
#map-content .mp-zone.g-shopping.focus { stroke: var(--z-shopping-h); filter: drop-shadow(0 0 10px var(--z-shopping-s)); }
#map-content .mp-zone.g-food.focus { stroke: var(--z-food-h); filter: drop-shadow(0 0 10px var(--z-food-s)); }
#map-content .mp-zone.g-fun.focus { stroke: var(--z-fun-h); filter: drop-shadow(0 0 10px var(--z-fun-s)); }
#map-content .mp-zone.g-services.focus { stroke: var(--z-services-h); filter: drop-shadow(0 0 10px var(--z-services-s)); }
#map-content .mp-zone.g-other.focus { stroke: var(--z-other-h); filter: drop-shadow(0 0 10px var(--z-other-s)); }
#map-content .mp-zone.selected { stroke: #FF3B5C; stroke-width: 3px; filter: drop-shadow(0 0 14px #EE1B3C); }
#map-content.is-focused .mp-zone.selected { opacity: 1; }
#map-content .mp-zone.dim { opacity: 0.16; }
#map-content .mp-label {
  font-family: "Inter", Arial, sans-serif; font-weight: 600; fill: var(--m-label);
  letter-spacing: 0.01em; cursor: pointer; pointer-events: auto;
  transition: opacity 0.18s ease;
}
/* Якорь набирается с разрядкой и в верхнем регистре — так на карте сразу
   видно крупных арендаторов, как на эталоне. */
#map-content .mp-label.is-anchor { letter-spacing: 0.07em; text-transform: uppercase; fill: var(--m-label-strong); }
#map-content.is-focused .mp-label { opacity: 0.45; }
#map-content.is-focused .mp-label.active { opacity: 1; }
#map-content .mp-label.is-hidden, #map-content .mp-label.no-fit { opacity: 0; pointer-events: none; }
#map-content .mp-label.active { fill: var(--m-label-strong); }

/* Правый борт: зум и столбик этажей — как на карте «Авиапарка». */
.mapside { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.map__theme {
  width: 42px; height: 42px; border-radius: 12px; background: var(--m-rail);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center;
}
.map__theme span {
  width: 17px; height: 17px; border-radius: 50%; display: block;
  background: var(--m-rail-text); box-shadow: inset -5px -3px 0 0 var(--m-rail);
}
.map[data-theme="light"] .map__theme span { box-shadow: inset 0 0 0 2px var(--m-rail); }
.map__controls { display: flex; flex-direction: column; gap: 1px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.map__controls button {
  width: 42px; height: 42px; background: var(--m-rail); color: var(--m-rail-text);
  font-size: 20px; transition: background-color 0.2s ease, color 0.2s ease;
}
.map__controls button:hover { background: #2E5894; color: #fff; }
.mapf {
  display: flex; flex-direction: column; gap: 1px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.mapf__label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-panel-mute); background: var(--m-rail); padding: 7px 0 5px; text-align: center; }
.mapf__link {
  width: 42px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--m-rail); color: var(--m-rail-text); font-size: 16px; font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mapf__link:hover { background: #2E5894; color: #fff; }
.mapf__link.active { background: #EE1B3C; color: #fff; }
.map__hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 12px; color: var(--m-hint); z-index: 2; white-space: nowrap; pointer-events: none; }
@media (max-width: 767.98px) { .map__hint { display: none; } }

/* Плавающая панель поиска и списка — поверх карты, а не рядом с ней. */
.mapl {
  position: absolute; left: 22px; top: 22px; bottom: 22px; width: 318px; z-index: 5;
  background: var(--m-panel); backdrop-filter: blur(14px);
  border: 1px solid var(--m-panel-edge); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; text-align: left; transition: transform 0.25s ease;
}
.mapl__head { padding: 18px 18px 14px; border-bottom: 1px solid var(--m-panel-edge); }
.mapl__title { font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: 1.3rem; color: var(--m-panel-title); }
.mapl__desc { font-size: 12.5px; line-height: 1.4; color: var(--m-panel-mute); margin: 5px 0 12px; }
.mapl__filter {
  width: 100%; height: 38px; padding: 0 12px; font-size: 14px; color: var(--m-panel-text);
  border: 1px solid var(--m-field-edge); border-radius: 9px; background: var(--m-field);
}
.mapl__filter::placeholder { color: var(--m-panel-mute); }
.mapl__filter:focus { outline: none; border-color: #4C78B8; background: rgba(255, 255, 255, 0.1); }
.mapl__toggle { display: none; }
.mapl__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mapl__chip {
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--m-chip-text); background: var(--m-chip);
  border: 1px solid transparent; transition: all 0.15s ease;
}
.mapl__chip:hover { color: #fff; background: rgba(255, 255, 255, 0.13); }
.mapl__chip.is-on { color: #fff; background: var(--m-chip-on); }
.mapl__chip.g-shopping.is-on { background: #2F6FD0; }
.mapl__chip.g-food.is-on { background: #D96F12; }
.mapl__chip.g-fun.is-on { background: #7A45C7; }
.mapl__chip.g-services.is-on { background: #138A6E; }
.mapl__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 18px 8px; font-size: 11.5px; color: var(--m-panel-mute);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mapl__count b { color: var(--m-panel-title); font-size: 13px; }
.mapl__reset { font-size: 11px; color: var(--m-chip-text); letter-spacing: 0.04em; text-transform: none; }
.mapl__reset:hover { color: #fff; }
.mapl__list { flex: 1; overflow-y: auto; padding: 2px 10px 16px; }
.mapl__item.active .mapl__btn, .mapl__btn:hover { background: rgba(255, 255, 255, 0.09); }
.mapl__btn {
  width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 8px 10px; border-radius: 10px; color: var(--m-panel-text);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mapl__btn:hover { color: #fff; }
/* Аватарка с буквой вместо точки: строка списка начинает читаться как карточка
   каталога, а не как пункт меню. */
.mapl__ava {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; background: #4A5468;
}
.mapl__btn.g-shopping .mapl__ava { background: linear-gradient(160deg, #3C74C4, #22406E); }
.mapl__btn.g-food .mapl__ava { background: linear-gradient(160deg, #C57A2E, #6B3E1C); }
.mapl__btn.g-fun .mapl__ava { background: linear-gradient(160deg, #8257C9, #452B66); }
.mapl__btn.g-services .mapl__ava { background: linear-gradient(160deg, #27907A, #14453A); }
.mapl__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mapl__name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapl__cat { font-size: 10.5px; color: var(--m-panel-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.mapl__go { width: 6px; height: 6px; border-right: 1.6px solid #5C6882; border-top: 1.6px solid #5C6882; transform: rotate(45deg); flex: 0 0 6px; opacity: 0; transition: opacity 0.15s ease; }
.mapl__btn:hover .mapl__go { opacity: 1; }

/* Телефон: панель сворачивается к нижней кромке, карта остаётся во весь экран. */
@media (max-width: 767.98px) {
  .mapl {
    left: 10px; right: 10px; width: auto; top: auto; bottom: 10px;
    max-height: 56%; border-radius: 16px;
  }
  .mapl.is-collapsed { transform: translateY(calc(100% - 52px)); }
  .mapl__toggle {
    display: block; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
    width: 54px; height: 20px; background: transparent;
  }
  .mapl__toggle::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); margin: 6px auto 0; }
  .mapl__head { padding-top: 24px; }
  .mapside { right: 10px; top: 16px; transform: none; }
}
#shop-name {
  position: fixed; background: var(--m-tip); color: var(--m-panel-title); padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px;
  white-space: nowrap; opacity: 0; transition: opacity 0.16s;
  pointer-events: none; z-index: 30; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; gap: 2px; line-height: 1.25;
}
#shop-name b { font-size: 13.5px; font-weight: 600; }
#shop-name span { font-size: 10.5px; color: var(--m-panel-mute); text-transform: uppercase; letter-spacing: 0.06em; }
#shop-name.show { opacity: 1; }
body.page-map .map__info { background: transparent; pointer-events: none; }
body.page-map .map__info .map__shopinfo { pointer-events: auto; }

.timeline p { margin-bottom: 1rem; padding-left: 22px; position: relative; }
.timeline p::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: #055EB7; }
.map__legend span[hidden] { display: none; }

/* food court cards (reference layout) + list of XL venues under the category name */
.foodcort__category { z-index: 2; right: 20px; }
.foodcort__category h5 { color: #fff; line-height: 1.05; }
.foodcort__venues { font-family: "Inter", sans-serif; font-size: 0.9rem; font-weight: 500; line-height: 1.4; margin-top: 10px; color: rgba(255, 255, 255, 0.9); text-transform: none; }
.foodcort__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 12, 31, 0) 50%, rgba(4, 12, 31, 0.75) 100%); pointer-events: none; }
.foodcort__text h6 { line-height: 1.45; margin-bottom: 22px; }

/* ---------- home hero ---------- */
.main__title { font-size: clamp(3.2rem, 5.4vw, 6.25rem); }
.main__label, .main__label2, .main__label3 { text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45); }
.main__text { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
@media (max-width: 991.98px) {
  .main__body { max-width: none; }
}
@media (max-width: 767.98px) { .main__body { padding: 120px 0 0; justify-content: flex-start; min-height: 62vh; } }

@media (max-width: 767.98px) {
  .main { height: auto; min-height: 0; }
  .main__body { min-height: 100svh; padding: 108px 0 0; justify-content: flex-start; }
  .main__info { position: relative; left: 0; right: 0; margin: 0 -20px; padding: 6px 20px 18px; background: #05070f; border-top: 0; }
}

/* ---------- Advertising, design 05 «XL в фокусе»: heading left, billboard right ----------
   Весь раздел умещается в один экран. Ширина афиши берётся по меньшему из двух:
   сколько осталось по ширине колонки и сколько осталось по высоте экрана
   (--ads-chrome — всё, что стоит над и под афишей: шапка сайта, отступы раздела,
   строка «Афиша XL» и подпись под баннером). */
.ads { --ads-chrome:382px; position:relative; isolation:isolate; background:radial-gradient(ellipse at 15% 0,#293e5f,transparent 58%),#101a2b; color:#f5f6f8; padding:40px 0 30px; border-top:1px solid #45536b; overflow:hidden; }
.ads::after { content:''; position:absolute; left:0; right:0; bottom:0; height:7px; background:linear-gradient(90deg,#ee1b3c 0 22%,#334a6b 22% 42%,#192943 42%); }
.ads__graphic { position:absolute; left:-130px; bottom:-50px; width:720px; opacity:.15; transform:rotate(-12deg); pointer-events:none; }
.ads__graphic svg { display:block; width:100%; height:auto; fill:none; stroke:#859bbd; stroke-width:1; }
.ads__container { position:relative; z-index:1; display:grid; grid-template-columns:minmax(200px,.3fr) minmax(0,1fr); gap:clamp(40px,4.5vw,76px); align-items:start; width:100%; max-width:1600px; margin:0 auto; padding:0 40px; }
.ads__intro { display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.ads__eyebrow { display:block; font-size:10px; font-weight:400; line-height:1.8; letter-spacing:.09em; text-transform:uppercase; color:#b0bdd0; margin-bottom:32px; max-width:180px; }
.ads__title { font-family:Oswald,sans-serif; text-transform:uppercase; font-weight:400; font-size:clamp(44px,4.6vw,78px); line-height:1.02; letter-spacing:-.02em; color:#f5f6f8; }
.ads a { text-transform:none; }
.ads__cta { display:inline-flex; align-items:center; gap:13px; font-size:12px; font-weight:500; color:#f5f6f8; white-space:nowrap; }
.ads__cta svg,.ads__caplink svg { width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; }
.ads__cta:hover,.ads__caplink:hover { color:#ff6682; }
.ads a:focus-visible { outline:2px solid #f5f6f8; outline-offset:4px; }
.ads__main { min-width:0; }
.ads__board { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#b8c6db; padding-bottom:20px; }
.ads__board>span:first-child { display:flex; align-items:center; gap:10px; color:#fff; }
.ads__board>span:first-child::before { content:''; width:28px; height:1px; background:#ee1b3c; }
.ads__mount { position:relative; width:min(100%,calc((100svh - var(--ads-chrome)) * 1.777778)); min-width:0; padding:14px; border:1px solid #63738a; background:linear-gradient(140deg,#364660,#222c3e); box-shadow:0 22px 50px #0007; }
.ads__mount::before { content:''; position:absolute; z-index:-1; top:-14px; left:25px; right:-14px; bottom:25px; background:#30415b; border:1px solid #596b84; }
.ads__stage { position:relative; aspect-ratio:16/9; overflow:hidden; background:#172131; touch-action:pan-y; }
.ads__track { position:absolute; inset:0; display:flex; height:100%; will-change:transform; }
.ads__slide { flex:0 0 100%; min-width:0; height:100%; }
.ads__creative { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.ads__creative img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 0 0 1px rgba(220,229,242,.18),0 8px 28px #0005; user-select:none; -webkit-user-drag:none; }
.ads__frame { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; width:100%; height:100%; padding:20px; text-align:center; border:1px solid #424d5d; background:radial-gradient(ellipse at 50% 115%,#354158,transparent 75%),#1c222c; }
.ads__frame::before { content:''; position:absolute; width:260px; height:260px; border:1px solid rgba(180,190,210,.08); transform:rotate(45deg); pointer-events:none; }
.ads__frame>* { position:relative; }
.ads__plus { display:grid; place-items:center; width:48px; height:48px; border:1px solid #596373; border-radius:50%; font-size:32px; line-height:1; color:#ff5574; font-weight:300; }
.ads__slogan { font-family:Oswald,sans-serif; font-weight:400; font-size:clamp(30px,3.8vw,56px); line-height:1.12; text-transform:uppercase; color:#f5f6f8; }
/* Подпись под афишей: слайды разные, высота строки фиксирована, чтобы при смене не прыгало */
.ads__caption { display:grid; grid-template-columns:1fr auto; gap:14px 24px; align-items:center; padding:24px 0 22px; border-bottom:1px solid #45536b; }
.ads__capname>span { display:block; font-size:10px; line-height:1.4; color:#b0bdd0; margin-bottom:7px; }
.ads__capname h3 { font-family:Oswald,sans-serif; font-weight:400; font-size:26px; text-transform:uppercase; line-height:1.15; min-height:1.15em; color:#f5f6f8; }
.ads__captext { grid-column:1; grid-row:2; font-size:12px; line-height:1.65; color:#b0bdd0; max-width:460px; min-height:3.3em; }
.ads__caplink { grid-column:2; grid-row:1/3; display:inline-flex; align-items:center; gap:20px; padding:10px 0; border-bottom:1px solid #8491a5; color:#f5f6f8; font-size:12px; font-weight:500; white-space:nowrap; }
/* Added by JS only. A single entrance, without changing document height. */
.ads--reveal-ready .ads__intro { transition:opacity .6s ease,transform .75s cubic-bezier(.22,1,.36,1); }
.ads--reveal-ready .ads__mount { transition:opacity .7s ease .08s,transform .9s cubic-bezier(.22,1,.36,1) .08s; }
.ads--reveal-ready .ads__board,.ads--reveal-ready .ads__caption { transition:opacity .6s ease .2s,transform .7s cubic-bezier(.22,1,.36,1) .2s; }
.ads--reveal-ready:not(.ads--revealed) .ads__intro { opacity:0; transform:translateY(18px); }
.ads--reveal-ready:not(.ads--banner-revealed) .ads__mount { opacity:0; transform:translateY(25px) rotate(.8deg); }
.ads--reveal-ready:not(.ads--banner-revealed) .ads__board,.ads--reveal-ready:not(.ads--banner-revealed) .ads__caption { opacity:0; transform:translateY(10px); }
@media(min-width:1700px) { .ads__container { padding-left:64px; padding-right:64px; } }
/* Низкий экран: подпись и отступы ужимаются, чтобы афиша осталась крупной */
@media(min-width:768px) and (max-height:860px) {
 .ads { --ads-chrome:324px; padding:28px 0 22px; }
 .ads__eyebrow { margin-bottom:20px; }
 .ads__intro { gap:22px; }
 .ads__board { padding-bottom:14px; }
 .ads__caption { padding:16px 0 14px; gap:10px 20px; }
 .ads__capname h3 { font-size:22px; }
 .ads__captext { font-size:11px; min-height:0; }
 .ads__frame { gap:12px; }
 .ads__plus { width:36px; height:36px; font-size:26px; }
}
@media(min-width:768px) and (max-height:700px) {
 .ads { --ads-chrome:278px; padding:20px 0 16px; }
 .ads__title { font-size:clamp(34px,3.4vw,48px); }
 .ads__eyebrow { margin-bottom:14px; }
 .ads__intro { gap:16px; }
 .ads__mount { padding:9px; }
 .ads__mount::before { top:-9px; right:-9px; left:18px; bottom:18px; }
 .ads__caption { padding:12px 0 10px; }
 .ads__capname h3 { font-size:19px; }
 .ads__captext { display:none; }
 .ads__frame { gap:10px; padding:12px; }
 .ads__slogan { font-size:28px; }
 .ads__plus { width:28px; height:28px; font-size:22px; }
}
@media(max-width:1100px) and (min-width:768px) {
 .ads__container { grid-template-columns:200px minmax(0,1fr); gap:30px; }
 .ads__title { font-size:46px; }
}
@media(max-width:767.98px) {
 .ads { padding:32px 0 28px; }
 .ads__container { display:block; padding-left:20px; padding-right:20px; }
 .ads__intro { gap:20px; margin-bottom:26px; }
 .ads__title { font-size:39px; }
 .ads__eyebrow { font-size:9px; letter-spacing:.08em; margin-bottom:14px; max-width:none; }
 .ads__cta { font-size:11px; }
 .ads__board { font-size:8px; gap:12px; padding-bottom:17px; }
 .ads__board>span:last-child { max-width:160px; text-align:right; line-height:1.5; }
 .ads__mount { width:100%; padding:9px; }
 .ads__mount::before { top:-8px; right:-8px; left:18px; bottom:18px; }
 .ads__graphic { width:460px; left:-170px; bottom:-25px; opacity:.1; }
 .ads__frame { gap:12px; padding:12px; }
 .ads__slogan { font-size:28px; }
 .ads__plus { width:28px; height:28px; font-size:22px; }
 .ads__caption { grid-template-columns:1fr; padding:20px 0 18px; gap:12px; }
 .ads__captext { grid-column:auto; grid-row:auto; min-height:0; font-size:11px; }
 .ads__caplink { grid-column:auto; grid-row:auto; justify-self:start; font-size:11px; }
 .ads__capname h3 { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
 .ads--reveal-ready .ads__intro,.ads--reveal-ready .ads__mount,.ads--reveal-ready .ads__board,.ads--reveal-ready .ads__caption { opacity:1!important; transform:none!important; transition:none!important; }
}

/* ---------- title and text on the first screen ---------- */
.main { height: 100vh; min-height: 640px; background: #070b16; }
/* Подложка под нижней плашкой: под ней мокрая плитка с бликами, и половина
   строк на ней терялась. Мягкий уход в тёмно-синий, без единой границы, —
   читается как свет, а не как прямоугольник. Фона и его анимации не касается:
   это слой поверх кадра, ниже содержимого. */
.main::after { display: block; height: 42%; background: linear-gradient(180deg, rgba(5, 7, 15, 0) 0%, rgba(5, 7, 15, 0.28) 38%, rgba(5, 7, 15, 0.66) 72%, rgba(5, 7, 15, 0.88) 100%); }
.main__container { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 104px; }
/* Заголовок и текст выровнены ПО ВЕРХУ и опущены ниже: прижатые к нижнему краю
   строки блоки из-за разной высоты стоят на разных уровнях. */
.main__body { margin: 0; max-width: none; height: auto; min-height: 0; padding: 26px 0 0; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 18px 56px; flex-wrap: wrap; }
/* Белая черта под шапкой нужна только когда шапка стала непрозрачной и стоит
   на светлом. Над первым экраном она резала кадр пополам, а сама шапка и без
   неё проявляется при прокрутке. */
.header:not(.dark):not(._black) .header__container { border-bottom-color: transparent; }
/* Кегль пересчитан под новый шрифт: он гораздо шире прежнего, и при старом
   размере заголовок выталкивал описание на следующую строку. Подобран так,
   чтобы заголовок + отбивка + описание умещались в ряд вплоть до 1280 px.
   По ширине блок при этом даже больше прежнего — начертание жирнее. */
.main__title { font-family: "XL Head", sans-serif; font-weight: 400; font-size: clamp(1.9rem, min(3.4vw, 6.2vh), 4.6rem); line-height: 1.06; margin: 0; }
.main__title span { display: inline; margin: 0; }
.main__title .main__label3 { display: block; }
/* Цвет знака номера. Прежний #B60B26 был снят с вывески в её минимуме и на
   вечернем небе давал контраст 2.02 — по яркости он почти совпадал с фоном и
   читался только оттенком. #FF3B5C — первый стоп фирменного градиента, то есть
   цвет сайтовый, а контраст вдвое выше. Насыщенность не наследуем жирность:
   шрифт заголовка и так Black, а синтетическое утолщение его размазывает. */
.main__no1 { font-style: normal; font-weight: inherit; color: #FF3B5C; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45); }
/* Ровняем не рамки блоков, а сами буквы: у заголовка кегль ~60 px при
   межстрочном 1.02, у текста 16 px при 1.5 — верхние отбивки строк разные,
   и при совпадающих рамках текст садится ниже. Замерено по кадру. */
.main__text { font-family: "XL Text", sans-serif; max-width: 500px; margin: -16px 0 0; padding-left: 0; border-left: 0; }
/* Верхняя линия плашки идёт ВО ВСЮ ШИРИНУ страницы, а не по ширине контейнера:
   иначе она обрывается за 60 px до края экрана. Рисуем её отдельным слоем
   шириной с окно — колонки и их отбивки при этом остаются на своих местах.
   Лишнее срезает сама секция (overflow: hidden), поэтому горизонтальной
   прокрутки не появляется даже при видимой полосе прокрутки. */
.main__info { position: relative; left: auto; right: auto; bottom: auto; border-top: 0; }
.main__info::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 1px; background: rgba(255, 255, 255, 0.34);
}
.main__infoitem { border-left-color: rgba(255, 255, 255, 0.22); }
.main__infolabel { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.main__infovalue { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); }
.main__infolink, .main__infonote { color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
@media (max-width: 767.98px) {
  .main { height: auto; min-height: 0; }
  .main__container { height: auto; display: block; padding-top: 0; }
  .main__body { min-height: 0; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; padding: 104px 0 22px; gap: 0; }
  /* Новый шрифт заголовка гораздо шире прежнего: при 3.1rem он разъезжался
     на пять строк и наползал на здание. */
  .main__title { font-size: 2.4rem; margin-bottom: 22px; }
  .main__title span, .main__title .main__label3 { display: block; }
  .main__text { margin: 0; }
  /* на телефоне плашка лежит на сплошном тёмном фоне, растяжка не нужна */
  .main::after { display: none; }
  .main__info { margin: 0 -20px; padding: 6px 20px 18px; background: #05070f; }
  .main__info::before { display: none; }
}
@media (max-width: 379.98px) { .main__title { font-size: 2.05rem; } }

/* ---------- реклама на главной: «Свечение с соседями» (вариант 10 с /design) ----------
   Тёмный раздел между светлыми «Брендами» и «Досугом». Афиша по центру,
   соседние выглядывают по краям и тают в темноте, за ними — размытый свет
   текущей афиши. ВЕСЬ РАЗДЕЛ — РОВНО ОДИН ЭКРАН под шапкой (76 px): ширина
   центральной афиши считается от высоты окна. --adg-chrome — всё, что не
   афиша: шапка, отступы, заголовок и подпись. Отступы и кегль заголовка
   заданы в vh, поэтому и «хром» считается через vh — на низком экране
   ужимается всё вместе, и ничего не уходит за край. */
.adg { --adg-chrome:calc(170px + 21vh); --adg-gap:28px;
  --adg-w:min(62vw,calc((100svh - var(--adg-chrome)) * 1.7778));
  position:relative; overflow:hidden; height:calc(100svh - 76px); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(18px,4.4vh,44px) 0 clamp(14px,3.3vh,32px); background:#080b11; color:#f4f6f9; }
/* Свет заполняет весь раздел — у размытого слоя не бывает видимых краёв. Форму даёт виньетка. */
.adg__glow { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.adg__light { position:absolute; inset:-12%; background-size:cover; background-position:center; filter:blur(70px) saturate(1.55); opacity:0; transition:opacity 1.2s ease; }
.adg__light.is-active { opacity:.72; }
.adg__light--brand { background:radial-gradient(ellipse at 50% 55%,#ee1b3c 0,#8e1230 32%,transparent 66%); filter:blur(30px); }
.adg__glow::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 70% 62% at 50% 54%,transparent 35%,#080b11 92%),linear-gradient(#080b11 0,transparent 22%,transparent 78%,#080b11 100%); }
/* Соседи тают к краям экрана. Наложение на весь раздел (не на высоту ленты — та
   давала бы жёсткие горизонтальные края); над соседями, под центральной афишей. */
.adg::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,#080b11 0,rgba(8,11,17,.7) 3%,rgba(8,11,17,0) 10%,rgba(8,11,17,0) 90%,rgba(8,11,17,.7) 97%,#080b11 100%); }
.adg__head { position:relative; z-index:3; text-align:center; margin-bottom:clamp(12px,2.8vh,28px); }
.adg__eyebrow { display:block; font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:#aeb6c4; margin-bottom:10px; }
.adg__title { font-family:"Oswald",sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(28px,min(3.6vw,6.4vh),60px); line-height:1.12; color:#f4f6f9; }
.adg__viewport { position:relative; flex:0 0 auto; height:calc(var(--adg-w) * .5625); touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.adg__track { position:absolute; inset:0; }
.adg__slide { position:absolute; left:50%; top:0; width:var(--adg-w); height:100%; margin-left:calc(var(--adg-w) / -2); border-radius:16px; overflow:hidden; background:#11151d;
  box-shadow:0 50px 110px -34px #000d,0 0 0 1px #ffffff1c; -webkit-user-drag:none; will-change:transform;
  transition:transform .85s cubic-bezier(.2,.7,.2,1),opacity .85s ease,filter .85s ease,box-shadow .4s ease; }
.adg__slide img { width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; pointer-events:none; }
.adg__slide.is-current { transform:none; opacity:1; z-index:3; }
.adg__slide.is-current:hover { box-shadow:0 60px 130px -30px #000,0 0 0 1px #ffffff38; }
.adg__slide.is-prev,.adg__slide.is-next { z-index:2; opacity:.92; filter:saturate(.8); cursor:pointer; }
.adg__slide.is-prev { transform:translateX(calc(-90% - var(--adg-gap))) scale(.8); }
.adg__slide.is-next { transform:translateX(calc(90% + var(--adg-gap))) scale(.8); }
.adg__slide.is-far-l { transform:translateX(calc(-180% - var(--adg-gap) * 2)) scale(.64); opacity:0; z-index:1; pointer-events:none; }
.adg__slide.is-far-r { transform:translateX(calc(180% + var(--adg-gap) * 2)) scale(.64); opacity:0; z-index:1; pointer-events:none; }
.adg__slide.no-anim { transition:none; }
.adg__slide:focus-visible { outline:2px solid #fff; outline-offset:4px; }
/* соседи притушены шторкой, а не фильтром яркости — подпись на них остаётся яркой */
.adg__slide::after { content:""; position:absolute; inset:0; border-radius:inherit; background:#080b11; opacity:0; transition:opacity .85s ease; pointer-events:none; }
.adg__slide.is-prev::after,.adg__slide.is-next::after { opacity:.52; }
.adg__slide.is-prev:hover::after,.adg__slide.is-next:hover::after { opacity:.25; }
/* подпись соседа — на его внутреннем, видимом крае */
.adg__peek { position:absolute; z-index:2; bottom:8%; display:flex; flex-direction:column; gap:.35em; max-width:34%;
  font-size:calc(var(--adg-w) * .03); line-height:1.05; color:#fff; opacity:0; transform:translateY(8px); transition:opacity .5s ease .2s,transform .5s ease .2s; pointer-events:none; }
.adg__peek small { font-family:Inter,Arial,sans-serif; font-size:.42em; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#ffffffb3; }
.adg__peek b { font-family:"Oswald",sans-serif; font-weight:400; text-transform:uppercase; text-shadow:0 4px 18px #000c; }
.adg__slide.is-next .adg__peek { left:5%; align-items:flex-start; }
.adg__slide.is-prev .adg__peek { right:5%; align-items:flex-end; text-align:right; }
.adg__slide.is-prev .adg__peek,.adg__slide.is-next .adg__peek { opacity:1; transform:none; }
.adg__nav { position:absolute; top:50%; z-index:4; width:46px; height:46px; margin-top:-23px; border-radius:50%; display:grid; place-items:center;
  background:#0b0f18b3; border:1px solid #ffffff33; color:#fff; opacity:.85; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:opacity .25s,background .25s,transform .25s; }
.adg__nav:hover { opacity:1; background:#ffffff26; transform:scale(1.06); }
.adg__nav svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.adg__nav--prev { left:calc(50% - var(--adg-w) / 2 - var(--adg-gap) / 2 - 23px); }
.adg__nav--next { left:calc(50% + var(--adg-w) / 2 + var(--adg-gap) / 2 - 23px); }
.adg__vacancy { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(8px,2vh,16px); text-align:center; padding:24px; background:radial-gradient(ellipse at 50% 40%,#2a1220 0,#14161c 70%); border:1px dashed #ffffff3a; border-radius:16px; }
.adg__plus { flex:0 0 auto; width:clamp(36px,calc(var(--adg-w) * .058),52px); height:clamp(36px,calc(var(--adg-w) * .058),52px); border-radius:50%; display:grid; place-items:center; background:#ee1b3c; color:#fff; font-size:clamp(22px,calc(var(--adg-w) * .034),30px); line-height:1; font-weight:300; box-shadow:0 0 40px #ee1b3c88; }
.adg__vacancy strong { font-family:"Oswald",sans-serif; font-weight:400; text-transform:uppercase; font-size:calc(var(--adg-w) * .054); line-height:1.06; color:#fff; }
.adg__vacancy>span:last-child { font-size:clamp(11px,calc(var(--adg-w) * .015),14px); color:#c7cdd8; text-transform:none; }
/* Подпись — «рубрика · этаж», название и текст; вся она — ссылка в карточку
   магазина (19.10: счётчик, полоски, «О студии» и «Условия размещения» убраны). */
.adg__foot { position:relative; z-index:3; width:min(var(--adg-w),calc(100% - 32px)); margin:clamp(12px,2.6vh,26px) auto 0; }
/* название афиши — всегда одной строкой: колонка растёт под него (в tt/en названия длиннее русских) */
.adg__caption { display:grid; grid-template-columns:minmax(min-content,.55fr) minmax(0,1fr); gap:26px; align-items:center; text-transform:none; letter-spacing:0; color:inherit; }
.adg__name { display:block; min-width:170px; }
.adg__caption.is-swap>* { animation:adgSwap .5s ease both; }
@keyframes adgSwap { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.adg__name span { display:block; font-size:11px; color:#aeb6c4; margin-bottom:6px; letter-spacing:.02em; }
.adg__name b { display:block; font-family:"Oswald",sans-serif; font-weight:400; text-transform:uppercase; font-size:26px; line-height:1.1; color:#fff; white-space:nowrap; transition:color .2s; }
.adg__text { display:block; font-size:13px; line-height:1.6; color:#aeb6c4; max-width:520px; transition:color .2s; }
.adg__caption:hover .adg__name b { color:#ff5a72; }
.adg__caption:hover .adg__text { color:#d6dbe4; }
.adg__caption:focus-visible { outline:2px solid #fff; outline-offset:6px; border-radius:4px; }
/* появление при первом показе; без JS всё видно сразу */
.adg--ready .adg__head,.adg--ready .adg__viewport,.adg--ready .adg__foot { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1); }
.adg--ready .adg__viewport { transition-delay:.12s; }
.adg--ready .adg__foot { transition-delay:.24s; }
.adg--ready.adg--in .adg__head,.adg--ready.adg--in .adg__viewport,.adg--ready.adg--in .adg__foot { opacity:1; transform:none; }
@media (max-width: 1199.98px) {
  .adg { --adg-w:min(74vw,calc((100svh - var(--adg-chrome)) * 1.7778)); }
  /* видимая полоска соседа здесь уже 70–130 px — подпись в неё не помещается */
  .adg__peek { display:none; }
}
@media (max-width: 1023.98px) {
  /* подпись столбиком: название, под ним описание */
  /* планшет: экран высокий, афишу можно сделать шире */
  .adg { --adg-chrome:calc(200px + 21vh); --adg-w:min(84vw,calc((100svh - var(--adg-chrome)) * 1.7778)); }
  .adg__caption { grid-template-columns:minmax(0,1fr); gap:6px; }
  .adg__text { max-width:none; }
}
@media (max-width: 767.98px) {
  .adg { height:auto; padding:52px 0 40px; --adg-w:84vw; --adg-gap:10px; }
  .adg::after { background:linear-gradient(90deg,#080b11 0,rgba(8,11,17,0) 7%,rgba(8,11,17,0) 93%,#080b11 100%); }
  .adg__slide { border-radius:12px; }
  .adg__vacancy { border-radius:12px; padding:14px; }
  .adg__slide.is-prev { transform:translateX(calc(-90% - var(--adg-gap))) scale(.86); }
  .adg__slide.is-next { transform:translateX(calc(90% + var(--adg-gap))) scale(.86); }
  .adg__peek,.adg__nav { display:none; }
  .adg__foot { width:84vw; }
  .adg__caption { grid-template-columns:1fr; gap:10px; }
  .adg__name { min-width:0; }
  .adg__name b { white-space:normal; }
}
@media (prefers-reduced-motion: reduce) {
  .adg__slide,.adg__light,.adg__slide::after,.adg__peek { transition:none; }
  .adg--ready .adg__head,.adg--ready .adg__viewport,.adg--ready .adg__foot { opacity:1; transform:none; transition:none; }
}

/* ================= ТЕЛЕФОН: ГЛАВНАЯ (09.10–12.10.2026) =================
   Только до 767 px — компьютер и планшет не меняются.
   1) Первый экран — ровно экран телефона (100svh). Кадр поднят на 8 % экрана
      (hero.js, LIFT): здание выше, под площадью — тёмный низ, и на нём стоит
      слоган «Семейный аутлет-центр в Казани №1». Слоган появляется, когда набран
      основной свет (html.hero-done ставит hero.js; без анимации — app.js после
      загрузки): прочерчивается красная черта, строки по очереди выезжают из-под
      маски, «№1» один раз вспыхивает красным. «Листайте» убран (12.10).
   2) .hinfo — три факта о центре (год, этажи, площадь), описание, плитки-
      действия со счётчиком магазинов и шторкой маршрута. Статус «открыто» со
      шкалой дня убран (12.10).
   3) «Бренды» — две колонки кирпичиками (раскладку и ровный низ считает app.js),
      фото в плитках сменяются сами, мягким наплывом, по одной плитке за раз. */
.main__mtitle, .hinfo { display: none; }
@media (max-width: 767.98px) {
  .main--hero { height: 100vh; height: 100svh; min-height: 0; background: #131318; }
  .main--hero .main__container { display: none; }
  /* Картинка-заглушка (пока нет холста или без WebGL) — та же удлинённая вниз
     площадь (lit-mx, 1573 строки вместо 1253) и поднята так же, как кадр в
     шейдере: высота 1573/1253 = 125.54 % экрана, сдвиг −lift·79.66 % своей высоты. */
  .main--hero .main__bg { height: 125.54%; object-position: 50% 0; transform: translateY(calc(var(--hero-shift, 0.08) * -79.66%)); }
  /* --mt-b — отступ слогана снизу по раскладке (по нему app.js ставит здание),
     --mt-y — насколько слоган поднят над раскладкой (ближе к зданию; выбор
     владельца 12.10). Заданы на секции: по ним же считается переход ниже. */
  .main--hero { --mt-b: 102px; --mt-y: 46px; }
  /* Мягкий переход к следующему разделу (#131318 — верхний цвет .hinfo):
     площадь идёт до низа экрана и под текстом плавно уходит в этот цвет.
     Начинается ~30–40 px ниже нижней строки слогана — на текст не заходит. */
  .main--hero::after { display: block; top: auto; height: calc(var(--mt-b) + var(--mt-y) + env(safe-area-inset-bottom, 0px) - 36px); background: linear-gradient(180deg, rgba(19, 19, 24, 0) 0%, rgba(19, 19, 24, 0.4) 30%, rgba(19, 19, 24, 0.82) 64%, #131318 100%); }

  .main__mtitle { display: block; position: absolute; left: 20px; right: 20px; bottom: calc(var(--mt-b) + env(safe-area-inset-bottom, 0px)); transform: translateY(calc(-1 * var(--mt-y))); z-index: 2; margin: 0; color: #fff; font-family: "XL Head", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 9.6vw, 2.6rem); line-height: 1.04; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45); }
  .main__mtitle::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: 16px; border-radius: 1px; background: #ee1b3c; transform-origin: left center; }
  /* маска строки: поля сверху и снизу, чтобы не срезать выносные элементы букв */
  .main__mline { display: block; overflow: hidden; padding: 0.2em 0 0.12em; margin: -0.2em 0 -0.12em; }
  .main__mline > span { display: inline-block; }
  /* метка нулевого размера на базовой линии последней строки — по ней app.js
     меряет, где кончаются буквы (рамка строки ниже них на запас под хвосты) */
  .main__mbase { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
  .main__mtitle .main__no1 { display: inline-block; }
  /* С JS — спрятано до сигнала; без JS видно сразу. Скрытый текст ещё и
     ПРОЗРАЧНЫЙ: на телефонах верх заглавных (Й, №) выше строки, и маска их не
     прятала — до появления слогана в низу каждой строки светились белые
     полоски (12.10, владелец). */
  html.js .main__mtitle::before { transform: scaleX(0); opacity: 0; transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease; }
  html.js .main__mline > span { transform: translateY(130%); opacity: 0; transition: transform 1s cubic-bezier(0.16, 0.84, 0.24, 1), opacity 0.45s ease; }
  html.js .main__mline:nth-child(1) > span { transition-delay: 0.25s; }
  html.js .main__mline:nth-child(2) > span { transition-delay: 0.38s; }
  html.js .main__mline:nth-child(3) > span { transition-delay: 0.51s; }
  html.hero-done .main__mtitle::before { transform: scaleX(1); opacity: 1; }
  html.hero-done .main__mline > span { transform: none; opacity: 1; }
  html.hero-done .main__mtitle .main__no1 { animation: heroNo1 1.6s ease-out 1.2s both; }
  @keyframes heroNo1 {
    0%, 100% { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45); }
    35% { text-shadow: 0 0 16px rgba(255, 59, 92, 0.95), 0 0 40px rgba(255, 59, 92, 0.55); }
  }
  /* возврат на главную с другого раздела (hero-return): экран уже «загружен» —
     слоган сразу на месте, без выезда строк и вспышки «№1» */
  html.hero-return .main__mtitle::before, html.hero-return .main__mline > span { transition: none; }
  html.hero-return .main__mtitle .main__no1 { animation: none; }

  /* ---------- экран «о ТЦ» ----------
     Спокойный вариант (владелец: «красиво, но через чур — естественнее»): тёмный
     фон с тёплым отсветом сверху, тонкие разделители вместо карточек. Слоган
     переехал на первый экран (12.10), на его месте — три факта о центре. */
  /* блок начинается сразу под шапкой и идёт по содержимому: при центровке в
     высоту экрана (12.10) над текстом оставалось ~160 px пустоты — «слишком снизу» */
  /* верх (ТЦ «XL» · Казань → факты → описание) стоит почти сразу под слоганом
     первого экрана; плитки ниже остаются на прежнем месте — разницу забирает
     отступ над ними (--hinfo-lift) */
  .hinfo { --hinfo-lift: 34px; display: block; position: relative; overflow: hidden; isolation: isolate; padding: 44px 0 44px; background: #0b0d12; color: #f2f3f5; }
  /* «год открытия» → описание = описание → «Адрес»: одинаковый добавочный отступ */
  .hinfo__grid, .hinfo__lead { margin-top: var(--hinfo-lift); }
  .hinfo__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(110% 34% at 50% 30%, rgba(255, 168, 92, 0.07) 0%, rgba(255, 168, 92, 0) 72%), linear-gradient(180deg, #131318 0%, #0e1015 40%, #0a0b10 100%); }
  .hinfo__inner { display: flex; flex-direction: column; gap: 18px; width: 100%; }
  .hinfo__eyebrow { display: flex; align-items: center; gap: 10px; font: 500 11px/1.2 "Inter", Arial, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(242, 243, 245, 0.5); }
  .hinfo__eyebrow::before { content: ""; width: 18px; height: 1px; background: rgba(242, 243, 245, 0.45); }
  /* три факта в строку: число над подписью, тонкие линии между */
  .hinfo__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .hinfo__facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; min-width: 0; padding: 16px 0 14px; }
  .hinfo__facts > div + div { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .hinfo__facts > div:not(:last-child) { padding-right: 10px; }
  .hinfo__facts dd { margin: 0; font-family: "Sofia Sans Extra Condensed", sans-serif; font-weight: 500; font-size: 46px; line-height: 0.85; color: #f2f3f5; white-space: nowrap; }
  .hinfo__facts dt { font: 500 10.5px/1.3 "Inter", Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(242, 243, 245, 0.5); }
  /* описание — тёплым «шампанским», как свет витрин на первом экране: отличается
     от белых цифр и серых подписей, контраст к фону ~12:1 */
  .hinfo__lead { font: 400 15px/1.6 "Inter", Arial, sans-serif; color: #dccbb4; }

  /* плитки — таблица 2×2 на тонких линиях, без коробок и цветных иконок */
  .hinfo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .hinfo__tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; min-height: 118px; margin: 0; padding: 14px 14px 14px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: none; color: #f2f3f5; font: inherit; text-align: left; text-transform: none; cursor: pointer; transition: background-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
  .hinfo__tile:nth-child(even) { padding: 14px 0 14px 16px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .hinfo__tile:active { background: rgba(255, 255, 255, 0.04); }
  .hinfo__tile svg { width: 20px; height: 20px; fill: none; stroke: rgba(242, 243, 245, 0.55); stroke-width: 1.5; }
  .hinfo__tile small { font: 500 10px/1.2 "Inter", Arial, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 243, 245, 0.48); }
  /* переносим только по пробелам: «+7 (843)» / «212-20-20», а не посреди номера */
  .hinfo__tile b { font-family: "Oswald", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.15; text-transform: uppercase; overflow-wrap: break-word; }
  .hinfo__tile > span { margin-top: auto; padding-top: 4px; font: 400 12px/1.2 "Inter", Arial, sans-serif; letter-spacing: 0; text-transform: none; color: rgba(242, 243, 245, 0.7); }
  .hinfo__tile--count { justify-content: flex-start; }
  .hinfo__num { font-family: "Sofia Sans Extra Condensed", sans-serif !important; font-weight: 500 !important; font-size: 60px !important; line-height: 0.82 !important; letter-spacing: -0.01em; color: #f2f3f5; }

  /* появление: мягко, по очереди, когда экран доехал до глаз (только с JS) */
  html.js .hinfo [data-hi] { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 50ms); }
  html.js .hinfo.is-in [data-hi] { opacity: 1; transform: none; }

  /* шторка маршрута — снизу, как в приложениях карт */
  .hsheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; }
  .hsheet[hidden] { display: none; }
  .hsheet__backdrop { position: absolute; inset: 0; background: rgba(4, 6, 12, 0.6); opacity: 0; transition: opacity 0.3s ease; }
  .hsheet__panel { position: relative; width: 100%; padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #0e1322; color: #f4f6f9; box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.45); transform: translateY(100%); transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .hsheet.is-open .hsheet__backdrop { opacity: 1; }
  .hsheet.is-open .hsheet__panel { transform: translateY(var(--drag, 0px)); }
  .hsheet.is-dragging .hsheet__panel { transition: none; }
  .hsheet__grip { display: block; width: 42px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
  .hsheet__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
  .hsheet__x span { position: absolute; left: 11px; top: 17px; width: 14px; height: 1.6px; background: #fff; transform: rotate(45deg); }
  .hsheet__x span + span { transform: rotate(-45deg); }
  .hsheet__title { font-family: "Oswald", sans-serif; font-weight: 400; font-size: 26px; line-height: 1.1; text-transform: uppercase; }
  .hsheet__addr { margin: 8px 0 18px; font: 400 14px/1.5 "Inter", Arial, sans-serif; color: rgba(244, 246, 249, 0.7); }
  .hsheet__btn { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px; padding: 16px 18px; border-radius: 14px; background: #ee1b3c; color: #fff; font: 600 15px/1.2 "Inter", Arial, sans-serif; text-align: left; text-transform: none; -webkit-tap-highlight-color: transparent; transition: transform 0.18s ease, background-color 0.2s ease; }
  .hsheet__btn:active { transform: scale(0.98); }
  .hsheet__btn i { font-style: normal; opacity: 0.85; }
  .hsheet__btn--alt { background: rgba(255, 255, 255, 0.08); }
  .hsheet__btn.is-done { background: rgba(47, 212, 122, 0.2); }
  .hsheet__more { display: inline-block; margin-top: 6px; font: 600 12px/1.2 "Inter", Arial, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #ff8396; }
  html.hsheet-lock, html.hsheet-lock body { overflow: hidden; }

  /* ---------- «Бренды»: фото в плитке сменяются сами ---------- */
  /* входящий кадр мягко «садится» из лёгкого приближения, уходящий — растворяется */
  .category-slider .category__bg { transition: transform 2.8s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.5s ease; }
  .category-slider .swiper-slide:not(.swiper-slide-active) .category__bg { transform: scale(calc(var(--photo-scale, 1) * 1.06)); }
}
@media (max-width: 639.98px) {
  /* две колонки кирпичиками: нечётные слева, чётные справа, высоты кадров разные,
     строки сетки по 2 px — сколько строк занимает плитка, считает app.js */
  .brands__list--masonry { grid-auto-rows: 2px; row-gap: 0; column-gap: 12px; grid-auto-flow: row dense; align-items: start; }
  .brands__list--masonry .brands__item { padding-bottom: 16px; }
  .brands__list--masonry .brands__item:nth-child(odd) { grid-column: 1; }
  .brands__list--masonry .brands__item:nth-child(even) { grid-column: 2; }
  .brands__list--masonry .category__img { height: auto; aspect-ratio: var(--ar, 4 / 5); }
  .brands__list--masonry .img1 { --ar: 1 / 1.35; } .brands__list--masonry .img2 { --ar: 1 / 1.2; }
  .brands__list--masonry .img3 { --ar: 1 / 0.9; } .brands__list--masonry .img4 { --ar: 1 / 1.85; }
  .brands__list--masonry .img5 { --ar: 1 / 1.15; } .brands__list--masonry .img6 { --ar: 1 / 1.75; }
  .brands__list--masonry .img7 { --ar: 1 / 0.85; }
  .brands__list--masonry .category__text { padding: 14px 0 0; }
}
/* ---------- телефон: кнопка «наверх» (на всех страницах) ----------
   Появляется после первых полутора экранов прокрутки, пружинкой. Кольцо вокруг
   стрелки — сколько страницы уже пролистано (заполняет app.js). По нажатию
   стрелка улетает вверх и возвращается снизу, от кнопки расходится волна, а
   страница плавно едет наверх. Прячется, пока открыто меню, карточка магазина
   или шторка маршрута. */
.totop { display: none; }
@media (max-width: 767.98px) {
  .totop { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: 56px; height: 56px; padding: 0; border-radius: 50%; color: #fff; background: rgba(12, 16, 28, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(8, 10, 20, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08); opacity: 0; transform: translateY(28px) scale(0.6); pointer-events: none; transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; }
  .totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .totop.is-on:active { transform: scale(0.9); transition-duration: 0.15s; }
  body._lock .totop, html.hsheet-lock .totop, #show-modal.open ~ .totop { opacity: 0; transform: translateY(28px) scale(0.6); pointer-events: none; }
  .totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
  .totop__track { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 2.5; }
  .totop__bar { fill: none; stroke: url(#totop-g); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.12s linear; }
  .totop__arrow { position: relative; display: block; width: 22px; height: 22px; overflow: hidden; }
  .totop__arrow svg { display: block; width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .totop.is-launch .totop__arrow svg { animation: totopLaunch 0.8s cubic-bezier(0.5, 0, 0.3, 1); }
  @keyframes totopLaunch { 0% { transform: translateY(0); } 42% { transform: translateY(-28px); } 43% { transform: translateY(28px); } 100% { transform: translateY(0); } }
  .totop::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
  .totop.is-launch::after { animation: totopWave 0.75s ease-out; }
  @keyframes totopWave { from { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.6); } to { box-shadow: 0 0 0 18px rgba(255, 59, 92, 0); } }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .totop { transition: opacity 0.2s ease; transform: none; }
  .totop.is-launch .totop__arrow svg, .totop.is-launch::after { animation: none; }
}

/* ---------- телефон: карточка магазина — панель снизу ----------
   Была почти во весь экран: огромный логотип, огромное название, галерея на
   полэкрана, всё по центру и с разными отступами. Теперь — панель снизу, как
   в приложениях карт: ручка, логотип и название одной строкой, под ними
   разделы, рубрики и факты (этаж, часы, телефон, сайт) ровной сеткой, фото,
   описание (4 строки, «Подробнее» раскрывает), всё по левому краю, отступы
   одинаковые. Закрывается крестиком, нажатием мимо или жестом вниз. На карте
   панель ниже (62 % экрана), чтобы выбранный магазин был виден над ней. */
@media (max-width: 767.98px) {
  .map__info { padding-top: 0; }
  .map__shopinfo { top: auto; bottom: 0; left: 0; right: 0; width: 100%; margin: 0; max-height: 86vh; max-height: 86svh; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px rgba(8, 18, 41, 0.22); transform: translateY(104%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); overscroll-behavior: contain; }
  .map__info.open .map__shopinfo { transform: translateY(var(--sheet-drag, 0px)); }
  .map__shopinfo.is-dragging { transition: none; }
  body.page-map .map__info .map__shopinfo { max-height: 62vh; max-height: 62svh; box-shadow: 0 -14px 40px rgba(8, 18, 41, 0.2); }
  .shopinfo__body { padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: left; }
  .shopinfo__body::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: #d9dde4; }
  .shopinfo__close { top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: #f1f3f6; }
  .shopinfo__close span { width: 14px; height: 1.8px; left: 10px; top: 16px; }
  /* шапка карточки — только логотип (или название на его месте), слева,
     справа место под крестик; названия отдельной строкой нет (19.10) */
  #modal-content { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
  #modal-content > * { grid-column: 1 / -1; min-width: 0; }
  .shopinfo__img { justify-content: flex-start; min-height: 64px; margin: 0; padding-right: 48px; }
  .shopinfo__img .tenant-logo { width: 200px; height: 68px; padding: 6px 10px; box-shadow: none; border: 1px solid #eef0f3; }
  .shopinfo__img .tenant-logo--dark { border-color: transparent; }
  .shopinfo__img .wordmark { --s: 0.9; text-align: left; overflow-wrap: anywhere; }
  .shopinfo__list { order: 1; justify-content: flex-start; gap: 6px; margin: 12px 0 0; }
  .shopinfo__btn { padding: 5px 10px; border: 1px solid #dfe3ea; border-radius: 999px; color: #263147; font-size: 11.5px; font-weight: 500; text-transform: none; }
  .shopinfo__location { order: 2; }
  .shopinfo__links { order: 3; }
  .shopinfo__location, .shopinfo__links { grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eef0f3; font-size: 14px; line-height: 1.35; text-align: left; text-transform: none; }
  .shopinfo__links { margin-top: 10px; padding-top: 10px; }
  .shopinfo__label { margin-bottom: 3px; font-size: 10.5px; letter-spacing: 0.06em; }
  .shopinfo__links a, .shopinfo__links > a { color: #055EB7; text-transform: none; }
  .shop-gallery { order: 4; margin: 16px 0 0; }
  .shop-gallery__stage { height: 200px; border-radius: 14px; }
  .shop-gallery__stage img { object-fit: cover; }
  .shop-gallery__bar { margin: 8px 0 0; }
  .shop-gallery__bar button { width: 34px; height: 30px; font-size: 18px; }
  .shop-gallery__thumbs { display: none; }
  .shop-gallery__caption { margin-top: 6px; }
  .shopinfo__desc { order: 5; margin: 14px 0 0; color: #3d4350; font-size: 14px; line-height: 1.55; text-align: left; }
  .shopinfo__desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .shopinfo__more { order: 6; justify-self: start; margin-top: 6px; padding: 2px 0; color: #055EB7; font: 600 13px/1.3 "Inter", Arial, sans-serif; text-transform: none; }
  .shopinfo__social { order: 7; justify-content: flex-start; gap: 8px; margin: 14px 0 0; }
  .shopinfo__social a { width: 38px; height: 38px; border-radius: 50%; background: #f1f3f6; color: #263147; }
  .shopinfo__cta { order: 8; margin-top: 16px; }
  .shopinfo__cta .btn { display: flex; width: 100%; justify-content: center; }
}

/* ---------- телефон: страница «Развлечения» (список досуга) ----------
   Мобильные правила главной красят подписи в белый — под тёмную подложку на
   фото. В списке подписи стоят на белом фоне, и названия пропадали. Здесь —
   тёмные, как на главной; фото сверху, подпись под ним. */
@media (max-width: 767.98px) {
  .service--list { padding-top: 24px; }
  .service--list .inner__title { margin: 0 0 18px !important; padding: 0; font-size: 32px; line-height: 1.08; text-align: left; }
  .service--list .service__block { gap: 14px; margin-bottom: 40px; }
  .service--list .service__image { order: -1; border-radius: 10px; overflow: hidden; }
  .service--list .service__image::after { display: none; }
  .service--list .service__label { margin-bottom: 8px; font-size: 30px; line-height: 1.08; -webkit-text-fill-color: transparent; }
  .service--list .service__text { color: #131414; font-size: 14px; line-height: 1.5; }
  .service--list .service__floor { color: #8a8d94; font-size: 12px; }
}

/* ---------- телефон: «Магазины» — сразу карточки ----------
   Список рубрик (женская одежда, детские товары…) занимал весь первый экран,
   карточки начинались ниже него. По просьбе владельца на телефоне его нет:
   рубрики остаются в меню сайта, поиск и фильтр по этажам — на месте. */
@media (max-width: 767.98px) {
  .shops--shopping .shops__categories { display: none; }
  /* без списка рубрик кнопки этажей и вида стояли вплотную к карточкам */
  .shops--shopping .shops__top { margin-bottom: 26px; }
}

/* ---------- телефон: подвал ----------
   Было всё по центру столбиком и без меню. Теперь по левому краю, ярусами
   через тонкие линии: логотип; меню сайта в три колонки; адрес и контакты
   рядом в две колонки; внизу копирайт (справа место под кнопку «наверх»). */
@media (max-width: 767.98px) {
  .footer__body { flex-direction: column; align-items: stretch; gap: 0; padding: 26px 0 0; }
  .footer__one { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 14px 0; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  /* подпись разработчика — своей строкой под логотипом, по левому краю */
  .footer__made { flex-basis: 100%; text-align: left; }
  .footer__two { display: block; flex: 0 0 auto; margin: 0; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .fmenu__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
  .fmenu__item { margin: 0; }
  .fmenu__link { font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.3; }
  .footer__contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin: 0; padding: 18px 0 22px; text-align: left; }
  .footer__adress p, .footer__phone a { font-size: 14px; line-height: 1.35; text-transform: none; }
  .footer__adress a { justify-content: flex-start; margin-top: 6px; font-size: 12px; }
  .footer__hours { margin-top: 6px; text-transform: none; font-size: 12px; }
  .footer__bot { padding: 14px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
  /* копирайт в правом краю; пока видна кнопка «наверх» (html.totop-on,
     app.js), снизу место под неё — иначе в конце страницы она ложится на текст */
  html.totop-on .footer__bot { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .footer__niz { flex-direction: row; justify-content: flex-end; align-items: center; text-align: right; }
  .footer__text { color: #8D9096; font-size: 11px; text-transform: none; }
  /* «Документы» — свой ярус между меню и контактами */
  .footer__docs { flex: 0 0 auto; margin: 0; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .fdocs { display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .fdocs__link { font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.3; }
}

/* ---------- плашка о файлах cookie (все страницы и блог) ----------
   Полоса во всю ширину экрана снизу (19.10, владелец: «растяни на весь
   экран»), тёмное стекло, как кнопка «наверх»; текст и кнопка по центру.
   Скрыта атрибутом hidden, пока app.js не убедится, что согласия ещё нет;
   на главной ждёт заставку. Прячется, пока открыто меню, карточка магазина
   или шторка маршрута. */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; justify-content: center; align-items: center; gap: 32px; padding: 16px 40px calc(16px + env(safe-area-inset-bottom, 0px)); color: #fff; background: rgba(14, 17, 27, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -12px 40px rgba(8, 10, 20, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 14px; line-height: 1.5; text-transform: none; opacity: 0; transform: translateY(100%); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cookie[hidden] { display: none; }
.cookie.is-on { opacity: 1; transform: none; }
.cookie__text { margin: 0; color: rgba(255, 255, 255, 0.8); }
.cookie__text a { color: #fff; text-transform: none; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.cookie__text a:hover { text-decoration-color: #fff; }
.cookie__ok { flex: 0 0 auto; padding: 12px 26px; border-radius: 999px; background: linear-gradient(135deg, #EE1B3C, #B0144A); color: #fff; font: 600 14px/1.2 "Inter", Arial, sans-serif; cursor: pointer; transition: filter 0.2s, transform 0.2s; }
.cookie__ok:hover { filter: brightness(1.1); }
.cookie__ok:active { transform: scale(0.97); }
.cookie__ok:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body._lock .cookie, html.hsheet-lock .cookie, #show-modal.open ~ .cookie { opacity: 0; pointer-events: none; }
@media (max-width: 767.98px) {
  .cookie { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 13px; line-height: 1.45; }
  .cookie__ok { padding: 12px 20px; }
  /* высота плашки уже включает безопасную зону снизу */
  html.cookie-on .totop { bottom: calc(var(--cookie-h, 0px) + 14px); }
}
@media (prefers-reduced-motion: reduce) {
  .cookie { transform: none; transition: opacity 0.2s ease; }
}

/* невысокие телефоны (360×740, 375×667): экран «о ТЦ» тоже в один экран */
@media (max-width: 767.98px) and (max-height: 800px) {
  .hinfo { --hinfo-lift: 28px; padding: 36px 0 36px; }
  .hinfo__inner { gap: 13px; }
  .hinfo__lead { font-size: 14px; line-height: 1.5; }
  .hinfo__facts > div { padding: 13px 0 11px; }
  .hinfo__facts dd { font-size: 40px; }
  .hinfo__grid { gap: 8px; }
  .main--hero { --mt-b: 74px; --mt-y: 28px; }
  .main__mtitle { font-size: clamp(1.75rem, 8.8vw, 2.4rem); }
  .hinfo__tile { min-height: 0; gap: 5px; padding-top: 11px; padding-bottom: 11px; }
  .hinfo__tile b { font-size: 16px; }
  .hinfo__tile svg { width: 20px; height: 20px; }
  .hinfo__num { font-size: 54px !important; }
}
@media (max-width: 767.98px) and (max-height: 700px) {
  .hinfo { --hinfo-lift: 24px; padding: 32px 0 32px; }
  .hinfo__inner { gap: 9px; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  html.js .main__mtitle::before, html.js .main__mline > span { transform: none; transition: none; }
  html.hero-done .main__mtitle .main__no1 { animation: none; }
  html.js .hinfo [data-hi] { opacity: 1; transform: none; transition: none; }
  .category-slider .swiper-slide:not(.swiper-slide-active) .category__bg { transform: scale(var(--photo-scale, 1)); }
}

/* scroll-in animation end state. MUST stay last in the file (as in the reference): it has to win over every
   ".block.element-animation { opacity: 0 }" start state declared above. */
.element-animation.element-show { opacity: 1; transform: none; transition: all 2s ease; }




}