/* Шрифты Onest и Unbounded (SIL Open Font License 1.1) — со своего сервера, без запросов к Google */
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/onest-cyrillic-ext.11a468877c94.woff2") format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/onest-cyrillic.fe2bd26ae82a.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/onest-latin-ext.3e2cb9888206.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/onest-latin.3db826ed1c5d.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/unbounded-cyrillic-ext.8c0a958b25c9.woff2") format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/unbounded-cyrillic.3a5ed4d11365.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/unbounded-latin-ext.c07fbf1bfefa.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/unbounded-latin.8616dc355070.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* значки из спрайта: цвет и толщина линии задаются здесь, а не в каждом <svg> */
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.ico,.glyph{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round}
.ico{stroke-width:1.5}
.glyph{stroke-width:1.8}

/*
  Волгоград · куда пойти

  Визуальная система — городская навигация: белый фон, тёмно-синий текст,
  жёлтый сигнальный цвет для главных действий и собственный цвет линии
  у каждой категории, как на схеме транспорта. Цвет категории приходит
  из админки в переменной --c.
*/

:root{
  color-scheme:light;
  --ground:#FFFFFF;
  --surface:#F3F5F4;
  --raised:#FFFFFF;
  --line:#E0E4E3;
  --line-strong:#C5CCCB;
  --ink:#14213D;
  --ink-2:#434D63;
  --ink-3:#687086;
  --signal:#FFC61A;
  --signal-hover:#FFB800;
  --signal-ink:#14213D;
  --focus:#1677C7;
  --ok:#2B8049;
  --err:#C23A2B;
  --field-line:#7D8593;
  --shadow:0 10px 24px -18px rgba(20,33,61,.45);

  --f-head:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Onest","Segoe UI",Roboto,system-ui,sans-serif;
  --maxw:1240px;
  --pad:clamp(16px,4vw,40px);
  --r:12px;
  --hdr:64px;
}


/* ── основа ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0; background:var(--ground); color:var(--ink); font:400 16px/1.55 var(--f-body); -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button,input,textarea{font:inherit; color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.ico{flex:none; display:block}
.skip{position:absolute; left:var(--pad); top:-100px; z-index:100; padding:10px 14px; border-radius:10px; background:var(--signal); color:var(--signal-ink); font-weight:600; text-decoration:none}
.skip:focus{top:8px}

/* цвет категории для линий, точек и остановок */
.line,.chip,.stop,.route{--cc:var(--c)}
/* маршруты не относятся к категориям, поэтому их линия нейтральная */
.route{--cc:var(--ink)}

/* ── кнопки ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:10px; border:1.5px solid transparent; font-weight:600; font-size:.95rem; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .15s ease,border-color .15s ease}
.btn--signal{background:var(--signal); color:var(--signal-ink)}
.btn--signal:hover{background:var(--signal-hover)}
.btn--signal:disabled{opacity:.6; cursor:progress}
.btn--line{background:transparent; border-color:var(--line-strong); color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}

/* ── шапка ── */
.hdr{position:sticky; top:0; z-index:50; background:var(--ground); border-bottom:1px solid transparent; transition:border-color .2s ease}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex; align-items:center; gap:24px; height:var(--hdr)}
.logo{display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none}
.logo__mark{display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--signal); color:var(--signal-ink)}
.logo__name{font:700 1.05rem/1 var(--f-head); letter-spacing:-.02em}
.logo__sub{padding-left:10px; border-left:1px solid var(--line-strong); font-size:.88rem; color:var(--ink-3)}
.nav{display:flex; gap:2px}
.nav a{padding:8px 12px; border-radius:10px; font-size:.95rem; color:var(--ink-2); text-decoration:none; white-space:nowrap}
.nav a:hover{background:var(--surface); color:var(--ink)}
@media (max-width:1120px){ .nav{display:none} }
@media (max-width:480px){
  .logo__sub{display:none}
  .hdr .btn{padding:0 12px; font-size:.88rem}
}

/* ── первый экран ── */
.hero{padding-block:clamp(20px,3.5vw,40px) clamp(20px,3vw,32px)}
.hero__in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:end}
@media (max-width:900px){ .hero__in{grid-template-columns:1fr} }
.hero__title{margin:0; max-width:14ch; font:700 clamp(2.05rem,4.8vw,3.7rem)/1.04 var(--f-head); letter-spacing:-.035em; text-wrap:balance; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto}
.hero__in > div:first-child{container-type:inline-size}
/* очень длинное слово в заголовке — кегль по ширине колонки, чтобы слово не рвалось посередине */
.hero__title--long{max-width:none; font-size:max(1.6rem, min(3.7rem, calc(100cqi / (var(--chars) * .78))))}
.hero__lead{margin:18px 0 0; max-width:46ch; text-wrap:pretty; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-2)}
.hero__lead strong{font-weight:600; color:var(--ink)}

.facts{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.fact{display:flex; align-items:baseline; gap:8px; padding:10px 14px; border-radius:10px; border:1.5px solid transparent; background:var(--surface); font-size:.93rem; color:var(--ink-2); text-decoration:none; transition:border-color .15s ease}
.fact:hover{border-color:var(--ink)}
.fact b{font:700 1.2rem/1 var(--f-head); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}

/* схема категорий: длина линии пропорциональна числу идей */
.lines{margin:0; padding:14px 18px; border-radius:16px; background:var(--surface)}
.lines__cap{margin:0 0 6px; font-size:.88rem; color:var(--ink-3)}
.line{display:grid; grid-template-columns:11rem minmax(0,1fr) 2rem 14px; align-items:center; gap:12px; margin-inline:-8px; padding:5px 8px; border-radius:10px; text-decoration:none}
.line:hover{background:var(--raised)}
.line__name{font-size:.95rem; font-weight:500}
.line__track{position:relative; height:12px}
.line__track::before{content:""; position:absolute; left:0; top:1px; width:10px; height:10px; border-radius:50%; background:var(--cc); z-index:1}
.line__bar{position:absolute; left:2px; top:4px; height:4px; width:calc(var(--w) - 2px); border-radius:4px; background:var(--cc); transform-origin:left; animation:grow .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 55ms)}
.line__n{font:600 .95rem/1 var(--f-head); text-align:right; font-variant-numeric:tabular-nums}
@keyframes grow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
/* на телефоне схема превращается в плитки категорий: линии там не читаются, а плитку легко нажать пальцем */
.line__pict{display:none}
@media (max-width:900px){
  .lines{display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:8px; padding:0; background:none}
  .lines__cap{grid-column:1 / -1; margin:0 0 2px}
  .line{position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:10px; min-height:80px; margin:0; padding:9px 8px 10px; border-radius:12px; border:1.5px solid transparent; background:color-mix(in srgb,var(--c) 11%,var(--ground))}
  .line:hover{background:color-mix(in srgb,var(--c) 17%,var(--ground))}
  .line:active{border-color:var(--c)}
  .line__pict{display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--c)}
  .line .line__pict .ico{color:#fff}
  .line__track,.line > .ico{display:none}
  .line__name{font-size:.78rem; font-weight:600; line-height:1.2; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere}
  .line__n{position:absolute; top:12px; right:10px; font-size:.82rem; color:var(--ink-2)}
}

/* ── панель фильтров ── */
/* лёгкая серая подложка, как у схемы категорий в хиро — иначе панель поиска
   выглядит незаконченной, просто висящей в пустоте между цветными блоками */
.fbar{position:sticky; top:var(--hdr); z-index:40; background:var(--surface); border-block:1px solid var(--line); transition:box-shadow .2s ease}
.fbar.is-stuck{background:var(--ground)}
.fbar.is-stuck{box-shadow:var(--shadow)}
.fbar__in{display:flex; flex-direction:column; gap:10px; padding-block:12px}
.fbar__row{display:flex; flex-wrap:wrap; align-items:center; gap:8px}

.search{position:relative; display:flex; align-items:center; flex:1 1 260px; max-width:460px}
.search .ico{position:absolute; left:13px; color:var(--ink-3); pointer-events:none}
.search input{width:100%; height:44px; padding:0 40px; border-radius:10px; border:1.5px solid var(--field-line); background:var(--raised); font-size:1rem; transition:border-color .15s ease}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none; border-color:var(--ink)}
.search__key{position:absolute; right:10px; display:grid; place-items:center; min-width:22px; height:22px; border:1px solid var(--line-strong); border-radius:6px; font:500 .78rem/1 var(--f-body); color:var(--ink-3)}
.search input:focus ~ .search__key,
.search input:not(:placeholder-shown) ~ .search__key{display:none}
@media (hover:none){ .search__key{display:none} }

.scroller{display:flex; align-items:center; gap:6px; margin-inline:calc(var(--pad) * -1); padding:0 var(--pad) 2px; overflow-x:auto; scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller__sep{flex:none; width:1px; height:22px; margin-inline:6px; background:var(--line-strong)}
.toggles,.chips{flex:none; display:flex; gap:6px}
.toggle{display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 13px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--raised); font-size:.92rem; font-weight:500; white-space:nowrap; cursor:pointer}
.toggle .ico{display:none}
.toggle:hover{border-color:var(--ink)}
.toggle[aria-pressed="true"]{background:var(--signal); border-color:var(--signal); color:var(--signal-ink)}
.toggle[aria-pressed="true"] .ico{display:block}

.chip{flex:none; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:999px; border:1.5px solid var(--line); background:var(--raised); font-size:.92rem; color:var(--ink-2); white-space:nowrap; text-decoration:none}
.chip i{width:9px; height:9px; border-radius:50%; background:var(--cc)}
.chip b{font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--line-strong); color:var(--ink)}
.chip[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:var(--ground)}
.chip[aria-current="page"] b{color:inherit; opacity:.7}
.chip[aria-current="page"] i{box-shadow:0 0 0 2px var(--ground)}

@media (max-width:620px){
  .fbar__in{gap:8px; padding-block:8px}
  .search input{height:42px}
}

/* на широких экранах панель в одну строку: поиск, переключатели и список категорий */
.catsel{display:none; position:relative}
.catsel select{height:44px; min-width:230px; padding:0 40px 0 14px; border-radius:10px; border:1.5px solid var(--field-line); background:var(--raised); font:500 .95rem/1 var(--f-body); color:var(--ink); appearance:none; -webkit-appearance:none; cursor:pointer}
.catsel .ico{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
@media (min-width:1024px){
  .fbar__in{flex-direction:row; align-items:center; gap:8px}
  .fbar__row{flex:1 1 auto; min-width:0}
  .search{max-width:none}
  .scroller{display:contents}
  .scroller__sep,.chips{display:none}
  .toggle{height:44px; padding:0 16px; border-radius:10px}
  .catsel{display:block}
}
/* на узких экранах строка категорий листается вбок: затухание у края подсказывает, что там есть ещё */
@media (max-width:1023px){
  /* до этой ширины поиск один в своей строке — без ограничения он просто пустует справа */
  .search{max-width:none}
  .scroller{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
  .scroller.at-end{-webkit-mask-image:none; mask-image:none}
}

/* ── витрина ── */
/* отступ сверху — чтобы поисковая панель не липла прямо к предыдущему блоку */
.catalog{padding-top:clamp(20px,3vw,32px); padding-bottom:clamp(48px,8vw,96px)}
.results{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding-block:16px 22px}
.results__count{margin:0; font-size:.93rem; color:var(--ink-3)}
.results__count em{font-style:normal; font-weight:600; color:var(--ink)}
.reset{min-height:44px; padding:0; border:0; background:none; font-weight:500; color:var(--ink-2); text-decoration:none; text-underline-offset:3px; cursor:pointer}
.reset:hover{color:var(--focus); text-decoration:underline}

/* каждая категория — своя полоса во всю ширину окна: полки не сливаются, а поля по бокам не пустуют */
.group{position:relative; padding-block:28px 32px; background:var(--surface); box-shadow:0 0 0 100vmax var(--surface); clip-path:inset(0 -100vmax)}
@supports (background:color-mix(in srgb, red 7%, white)){
  .group{background:color-mix(in srgb, var(--c) 7%, var(--ground)); box-shadow:0 0 0 100vmax color-mix(in srgb, var(--c) 7%, var(--ground))}
}
.group__head{display:grid; row-gap:2px; margin-bottom:16px}
.group__link{display:inline-flex; align-items:center; gap:12px; justify-self:start; min-height:44px; border-radius:10px; color:inherit; text-decoration:none}
.group__link > .ico{color:var(--ink-2); transition:transform .15s ease}
.group__link:hover .group__title{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.group__link:hover > .ico{transform:translateX(3px)}
.pict{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--c); color:#fff}
.group__title{margin:0; font:600 1.4rem/1.1 var(--f-head); letter-spacing:-.025em}
/* серый --ink-3 на подкрашенной полосе опускается ниже 4.5:1, поэтому здесь текст темнее */
.group__n{font-size:.92rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.group__tag{margin:0; padding-left:52px; font-size:.93rem; color:var(--ink-2)}

.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media (max-width:1000px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .grid{grid-template-columns:1fr} }

.card{display:flex; flex-direction:column; gap:14px; padding:18px 18px 16px; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--raised)}
.card__img{width:calc(100% + 36px); max-width:none; margin:-18px -18px 0; aspect-ratio:16/10; object-fit:cover}
.card__body{flex:1}
.card__t{margin:0; font:600 1.14rem/1.25 var(--f-body); letter-spacing:-.01em; text-wrap:balance}
.card__d{margin:8px 0 0; font-size:.95rem; line-height:1.5; color:var(--ink-2)}
.card__meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin:0; padding:12px 0 0; border-top:1px solid var(--line); list-style:none; font-size:.86rem; color:var(--ink-3)}
.card__meta li{display:inline-flex; align-items:center; gap:5px}
.card__meta .is-free{font-weight:500; color:var(--ok)}
.card__meta .is-kids{padding:1px 8px; border-radius:999px; background:var(--surface); color:var(--ink-2)}
.card__link{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:.92rem; font-weight:500; color:var(--focus); text-underline-offset:3px}

/* место скоро открывается или работает в тестовом режиме — предупреждаем заранее, чтобы не разочаровались на месте */
.status-badge{display:inline-block; margin-bottom:8px; padding:3px 10px; border-radius:999px; background:var(--signal); color:var(--signal-ink); font-size:.78rem; font-weight:700; letter-spacing:.01em}
.status-badge--lg{margin-top:14px; padding:5px 14px; font-size:.85rem}
.map-item__status{margin-bottom:3px; padding:1px 8px; font-size:.72rem}
.map-popup__cat + .status-badge{margin:2px 0 0; display:block; width:fit-content}
.card.is-entering{animation:enter .26s ease both; animation-delay:calc(min(var(--i,0),12) * 16ms)}
@keyframes enter{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.empty{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:16px; padding:56px 16px; border:1.5px dashed var(--line-strong); border-radius:var(--r); text-align:center; color:var(--ink-3)}
.empty b{font:600 1.2rem/1.2 var(--f-head); letter-spacing:-.02em; color:var(--ink)}

/* ── разделы ── */
.section{padding-block:clamp(48px,8vw,96px); border-top:1px solid var(--line)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px}
.sec-title{margin:0; font:700 clamp(1.55rem,3vw,2.4rem)/1.08 var(--f-head); letter-spacing:-.03em; text-wrap:balance}
.sec-lead{margin:10px 0 0; max-width:56ch; font-size:1.02rem; color:var(--ink-2)}

/* ── один день: остановки на одной линии ── */
.day__nav{display:flex; gap:8px}
@media (hover:none){ .day__nav{display:none} }
.iconbtn{display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1.5px solid var(--line-strong); background:transparent; cursor:pointer}
.iconbtn:hover:not(:disabled){border-color:var(--ink)}
.iconbtn:disabled{opacity:.35; cursor:default}

.stops{
  --edge:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(250px,26vw,300px);
  margin:0; padding:0 var(--edge) 12px; list-style:none;
  overflow-x:auto; scrollbar-width:none;
}
/* полоса прокрутки под лентами раздражала: листают стрелками, мышью и пальцем, а полоса только занимала место */
.stops::-webkit-scrollbar,.srow::-webkit-scrollbar{display:none}
.stop{position:relative; padding-right:24px}
.stop::before{content:""; position:absolute; left:17px; right:0; top:16px; height:3px; background:var(--line-strong)}
.stop:last-child::before{display:none}
.stop__dot{position:relative; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:3px solid var(--cc); background:var(--ground); color:var(--ink); font:600 .85rem/1 var(--f-head); box-shadow:0 0 0 4px var(--ground)}
.stop__img{width:100%; margin-top:16px; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover}
.stop__place{margin:16px 0 0; font-size:.86rem; color:var(--ink-3)}
.stop__t{margin:4px 0 0; font:600 1.15rem/1.2 var(--f-head); letter-spacing:-.025em}
.stop__d{margin:8px 0 0; font-size:.95rem; color:var(--ink-2)}
.stop__meta{display:flex; align-items:center; gap:5px; margin:10px 0 0; font-size:.86rem; color:var(--ink-3)}

/* ── маршруты: как линия транспорта — номер маршрута и остановки по времени ── */
.routes{display:grid}
.route{padding-block:28px; border-top:1px solid var(--line)}
.route:first-child{padding-top:4px; border-top:0}
.route__head{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; margin-bottom:22px}
.route__plate{display:grid; place-items:center; width:60px; height:60px; border-radius:14px; background:var(--ink); color:#fff; font:700 1.35rem/1 var(--f-head); letter-spacing:-.02em; font-variant-numeric:tabular-nums; box-shadow:inset 0 -6px 0 var(--signal)}
.route__t{margin:0; font:700 clamp(1.25rem,2.2vw,1.6rem)/1.15 var(--f-head); letter-spacing:-.025em; text-wrap:balance}
.route__s{margin:6px 0 0; color:var(--ink-2)}
.route__facts{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 16px; margin:0; padding:0; list-style:none; font-size:.93rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.route__facts li{display:inline-flex; align-items:center; gap:6px}
.route__line{--dot:18px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(124px,1fr); margin:0; padding:0 0 6px; list-style:none; overflow-x:auto}
.route__stop{position:relative; display:grid; grid-template-rows:20px var(--dot) auto; row-gap:10px; padding-right:14px}
.route__stop::before{content:""; position:absolute; left:0; right:0; top:calc(20px + 10px + var(--dot) / 2 - 3px); height:6px; background:var(--signal)}
.route__stop:first-child::before{left:calc(var(--dot) / 2)}
.route__stop:last-child::before{right:auto; width:calc(var(--dot) / 2)}
.route__stop time{font:600 .95rem/20px var(--f-body); color:var(--ink); font-variant-numeric:tabular-nums}
.route__dot{position:relative; z-index:1; width:var(--dot); height:var(--dot); border-radius:50%; border:4px solid var(--ink); background:var(--ground)}
.route__stop:first-child .route__dot,.route__stop:last-child .route__dot{background:var(--ink)}
.route__name{font-size:.93rem; line-height:1.35; color:var(--ink-2)}
@media (max-width:760px){
  .route__head{grid-template-columns:auto minmax(0,1fr)}
  .route__facts{grid-column:1 / -1; justify-content:flex-start}
  .route__line{grid-auto-flow:row; grid-auto-columns:auto; overflow:visible}
  .route__stop{grid-template-columns:48px var(--dot) minmax(0,1fr); grid-template-rows:auto; column-gap:14px; align-items:center; padding:9px 0}
  .route__stop::before{left:calc(48px + 14px + var(--dot) / 2 - 3px); right:auto; top:0; bottom:0; width:6px; height:auto}
  .route__stop:first-child::before{left:calc(48px + 14px + var(--dot) / 2 - 3px); top:50%}
  .route__stop:last-child::before{width:6px; top:0; bottom:50%}
}

/* ── сезоны ── */
.seasons{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
@media (max-width:960px){ .seasons{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .seasons{grid-template-columns:1fr} }
.season{padding-top:16px; border-top:3px solid var(--ink)}
.season__m{margin:0; font-size:.88rem; color:var(--ink-3)}
.season__t{margin:6px 0 0; font:600 1.12rem/1.2 var(--f-head); letter-spacing:-.02em}
.season__d{margin:8px 0 0; font-size:.95rem; color:var(--ink-2)}

/* ── заявка ── */
.add{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:860px){ .add{grid-template-columns:1fr} }

.form{display:grid; gap:16px; padding:clamp(20px,3vw,32px); border-radius:16px; background:var(--surface)}
.field{display:grid; gap:6px}
.field label{font-size:.95rem; font-weight:500}
.field label span{margin-left:6px; font-weight:400; color:var(--ink-3)}
.field input,.field textarea{width:100%; min-height:48px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--field-line); background:var(--raised); font-size:1rem}
.field textarea{min-height:112px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:var(--err)}
.form__foot{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px}
.form__note{margin:0; font-size:.88rem; color:var(--ink-3)}
.form__msg{display:none; margin:0; padding:12px 14px; border-radius:10px; font-size:.95rem}
.form__msg.ok{display:block; background:color-mix(in srgb,var(--ok) 14%,var(--raised))}
.form__msg.err{display:block; background:color-mix(in srgb,var(--err) 12%,var(--raised))}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* ── подвал ── */
.foot{padding-block:28px 36px; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-3)}
.foot__in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 40px}
.foot p{margin:0}
.foot .foot__brand{font:600 .98rem/1.3 var(--f-head); letter-spacing:-.02em; color:var(--ink)}
.foot .foot__note{max-width:56ch; margin-top:6px}
.foot__meta{display:grid; gap:6px; text-align:right}
@media (max-width:640px){ .foot__meta{text-align:left} }

/* ── ссылки и значки ── */
.card__actions{display:flex; flex-wrap:wrap; gap:6px 18px}
.card__link,.stop__link{display:inline-flex; align-items:center; gap:6px; padding-block:5px; margin-block:-5px; font-size:.9rem; font-weight:500; color:var(--ink-2); text-decoration:none}
.card__link:hover,.stop__link:hover{color:var(--focus); text-decoration:underline; text-underline-offset:3px}
.stop__link{margin-top:5px}
.iconlink{display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1.5px solid var(--line-strong); color:var(--ink); text-decoration:none; transition:border-color .15s ease}
.iconlink:hover{border-color:var(--ink)}
.fact{align-items:center}
.fact .ico{color:var(--ink-3)}
.foot__icons{display:flex; gap:8px; justify-content:flex-end}
.foot__line{display:flex; align-items:center; justify-content:flex-end; gap:6px}
@media (max-width:640px){ .foot__icons,.foot__line{justify-content:flex-start} }
@media (max-width:1120px){ .hdr .iconlink,.hdr .btn{display:none} }

/* ── сворачивание групп, меню, стрелки ── */
/* сворачиваем только когда есть скрипт: без него видны все карточки, а кнопка скрыта */
.js .group:not(.is-open) .card.is-extra{display:none}
.catalog.is-filtered .group .card.is-extra{display:flex}
.catalog.is-filtered .group__more{display:none}
.group__more{display:none; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; margin-top:12px; padding:0 16px; border-radius:10px; border:1.5px solid var(--line-strong); background:var(--raised); font-weight:600; font-size:.95rem; cursor:pointer; transition:border-color .15s ease}
.group__more:hover{border-color:var(--ink)}
.js .group__more{display:inline-flex}
.group__more .ico{transition:transform .2s ease}
.group.is-open .group__more .ico{transform:rotate(180deg)}

/* ленты с карточками тянутся мышью, как пальцем на телефоне */
/* у мыши/трекпада привязку к карточкам отключаем совсем — иначе после отпускания
   ленту дёргает обратно к ближайшей карточке; на телефоне свайп её не задевает */
@media (hover:hover) and (pointer:fine){ .stops,.srow{cursor:grab} }
.stops.is-dragging,.srow.is-dragging{cursor:grabbing; user-select:none}

.fact .ico:last-child{margin-left:2px}
.line .ico{color:var(--ink-3)}
.line:hover .ico{color:var(--ink)}

.menu{display:none; position:relative}
.menu__btn{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; border-radius:10px; border:1.5px solid var(--line-strong); font-weight:600; font-size:.95rem; cursor:pointer; list-style:none}
.menu__btn::-webkit-details-marker{display:none}
.menu[open] .menu__btn{border-color:var(--ink)}
.menu__panel{position:absolute; right:0; top:calc(100% + 8px); z-index:60; display:grid; min-width:230px; padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--raised); box-shadow:var(--shadow)}
.menu__panel a{display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:10px; font-weight:500; text-decoration:none}
.menu__panel a:hover{background:var(--surface)}
@media (max-width:1120px){ .menu{display:block} }

/* ── сезонные темы: акцент меняется вместе с сезоном, фон остаётся белым ── */
:root{--season-tint:#FFF6D6}
html[data-season="spring"]{--signal:#D6334A; --signal-hover:#BF2A40; --signal-ink:#FFFFFF; --season-tint:#FEF3F5}
html[data-season="summer"]{--signal:#FFC61A; --signal-hover:#FFB800; --signal-ink:#14213D; --season-tint:#FFF7DC}
html[data-season="autumn"]{--signal:#E8792E; --signal-hover:#D96A1F; --signal-ink:#14213D; --season-tint:#FEF3EA}
html[data-season="winter"]{--signal:#2563C9; --signal-hover:#1D52A8; --signal-ink:#FFFFFF; --season-tint:#F2F6FD}

.season-pill{display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; padding:6px 13px; border-radius:999px; border:1.5px solid transparent; background:var(--season-tint); color:var(--ink); font-size:.9rem; font-weight:500; text-decoration:none; transition:border-color .15s ease}
.season-pill i{width:9px; height:9px; border-radius:50%; background:var(--signal)}
.season-pill:hover{border-color:var(--signal)}

.seasonal{padding-block:clamp(32px,5vw,56px); border-top:1px solid var(--line); background:var(--season-tint); transition:background-color .3s ease}
.season-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px}
.season-tab{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--raised); color:var(--ink-2); font-weight:500; text-decoration:none; transition:border-color .15s ease,background-color .15s ease}
.season-tab:hover{border-color:var(--ink); color:var(--ink)}
.season-tab[aria-current="true"]{background:var(--signal); border-color:var(--signal); color:var(--signal-ink)}
.season-tab small{padding:1px 7px; border-radius:999px; background:var(--surface); color:var(--ink-2); font-size:.74rem; font-weight:600}
/* на телефоне четыре сезона в одну строку: бейдж «сейчас» становится точкой, текст остаётся для чтения с экрана */
@media (max-width:560px){
  .season-tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
  .season-tab{justify-content:center; gap:5px; padding:0 4px; font-size:.95rem}
  .season-tab small{width:7px; height:7px; padding:0; overflow:hidden; font-size:0; background:currentColor}
}
.seasonal .sec-head{margin-bottom:20px}
.seasonal__eyebrow{display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:.9rem; font-weight:500; color:var(--ink-2)}
.seasonal__eyebrow::before{content:""; width:22px; height:6px; border-radius:3px; background:var(--signal)}
.srow{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px,23vw,284px); gap:12px; margin:0 calc(var(--pad) * -1); padding:2px var(--pad) 14px; list-style:none; overflow-x:auto; scrollbar-width:none}
.scard{display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--r); border:1px solid var(--line); background:var(--raised)}
.scard__cat{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--ink-3)}
.scard__cat i{width:8px; height:8px; border-radius:50%; background:var(--c)}
.scard__t{margin:0; font:600 1.08rem/1.25 var(--f-body); text-wrap:balance}
.scard__d{flex:1; margin:0; font-size:.9rem; line-height:1.45; color:var(--ink-2)}
.scard__meta{display:flex; flex-wrap:wrap; gap:4px 12px; margin:0; padding:0; list-style:none; font-size:.84rem; color:var(--ink-3)}
.scard__meta li{display:inline-flex; align-items:center; gap:5px}
.scard__meta .is-free{font-weight:500; color:var(--ok)}

a.season{display:block; color:inherit; text-decoration:none; transition:border-color .15s ease}
a.season:hover,.season.is-now{border-top-color:var(--signal)}
.season__m b{margin-left:8px; padding:1px 8px; border-radius:999px; background:var(--signal); color:var(--signal-ink); font-size:.74rem; font-weight:600}

/* ── согласие на обработку данных и cookie ── */
.consent-check{display:flex; align-items:flex-start; gap:10px; font-size:.93rem; line-height:1.45; color:var(--ink-2); cursor:pointer}
.consent-check input{flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--ink); cursor:pointer}
.consent-check input[aria-invalid="true"]{outline:2px solid var(--err); outline-offset:2px}
.consent-check a{color:var(--ink); text-underline-offset:3px}
.cookies{position:fixed; left:50%; bottom:16px; z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; width:min(760px, calc(100% - 24px)); padding:14px 16px; transform:translateX(-50%); border:1px solid var(--line); border-radius:14px; background:var(--raised); box-shadow:0 18px 40px -20px rgba(20,33,61,.45)}
.cookies p{flex:1 1 280px; margin:0; font-size:.93rem; color:var(--ink-2)}
.cookies a{color:var(--ink); text-underline-offset:3px}
.cookies__btns{display:flex; flex-wrap:wrap; gap:8px}
.linkbtn{padding:0; border:0; background:none; font:inherit; color:var(--focus); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.foot a{color:inherit; text-underline-offset:3px}

/* ── текстовые страницы ── */
.doc__in{max-width:780px}
.doc h2{margin:36px 0 10px; font:600 1.2rem/1.25 var(--f-head); letter-spacing:-.02em}
.doc p{color:var(--ink-2)}
.doc a{color:var(--ink); text-underline-offset:3px}
.doc .muted{margin-top:36px; font-size:.9rem; color:var(--ink-3)}
.doc__warn{padding:12px 14px; border-radius:10px; background:var(--season-tint); color:var(--ink)}

/* ── 404: линия маршрута обрывается — «такой остановки нет» ── */
.nf{border-top:0; padding-block:clamp(40px,8vw,104px)}
.nf__in{max-width:720px}
.nf__line{display:flex; align-items:center; max-width:360px; margin-bottom:28px}
.nf__stop{flex:none; width:18px; height:18px; border-radius:50%; border:3px solid var(--ink); background:var(--ground)}
.nf__stop--lost{border-style:dashed; border-color:var(--line-strong)}
.nf__track{flex:1; height:4px; background:var(--ink)}
.nf__track--lost{background:repeating-linear-gradient(90deg,var(--line-strong) 0 8px,transparent 8px 14px)}
.nf__plate{flex:none; width:auto; height:64px; padding:0 16px; font-size:1.5rem}
.nf__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.nf__cap{margin:40px 0 12px; font-size:.93rem; color:var(--ink-3)}
.nf__cats{display:flex; flex-wrap:wrap; gap:8px}

/* ── страница места и ссылки на неё ── */
.card__t a,.scard__t a,.stop__t a{color:inherit; text-decoration:none}
.card__t a:hover,.scard__t a:hover,.stop__t a:hover{text-decoration:underline; text-underline-offset:3px}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 20px; font-size:.9rem; color:var(--ink-3)}
.crumbs a{color:var(--ink-2); text-underline-offset:3px}
.place__in{max-width:880px}
.place__cat{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-weight:500; color:var(--ink-2)}
.place__cat .pict{width:34px; height:34px; border-radius:9px}
.place__title{margin:0}
.place__lead{margin:14px 0 0; max-width:62ch; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-2)}
.place__img{width:100%; margin-top:24px; border-radius:16px; aspect-ratio:16/9; object-fit:cover}
.place__facts{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none}
.place__facts li{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; background:var(--surface); font-size:.93rem; color:var(--ink-2)}
.place__facts .is-free{font-weight:500; color:var(--ok)}
.place__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.place__more{margin-top:48px; padding-top:32px; border-top:1px solid var(--line)}
.place__h2{margin:0 0 16px; font:600 1.3rem/1.2 var(--f-head); letter-spacing:-.02em}
.rel{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin:0; padding:0; list-style:none}
.place__all{display:inline-flex; margin-top:16px; font-weight:500; color:var(--ink); text-underline-offset:3px}
.place__cta{margin-top:40px; padding:18px 20px; border-radius:14px; background:var(--season-tint); color:var(--ink-2)}
.place__cta a{font-weight:600; color:var(--ink)}
.foot .foot__links{margin-top:10px}

/* ── телефоны: зоны нажатия не меньше 44px и шапка, которая уступает экран витрине ── */
@media (pointer:coarse){
  .card__link,.stop__link{padding-block:11px; margin-block:-11px}
  .toggle,.chip{height:40px}
  .logo{padding-block:6px}
  .season-pill{padding-block:10px}
  .foot__meta p a{display:inline-block; padding-block:11px; margin-block:-11px}
}
.season__m b{font-size:.8rem}
@media (max-width:880px){
  .hdr{transition:transform .25s ease,border-color .2s ease}
  .hdr.is-hidden{transform:translateY(-100%)}
  .fbar{transition:top .25s ease,box-shadow .2s ease}
  html.hdr-hidden .fbar{top:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important}
}

/* ── карта мест: список рядом с Leaflet, на телефоне — переключатель ── */
.map-page .sec-lead{max-width:62ch}
.map-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:28px}
/* min-width настоящий, а не 0 — иначе на телефоне лента категорий на узкий телефон
   сжимается до одного скрытого чипа вместо того, чтобы уступить кнопке свою строку */
.map-toolbar .scroller{flex:1 1 220px; min-width:180px; margin-block:0}
.map-near{flex:none}
.map-near[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--ground)}

.map-tabs{display:none; gap:8px; margin-bottom:14px}
.map-tab{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:10px; border:1.5px solid var(--line-strong); background:transparent; font-weight:600; font-size:.92rem; color:var(--ink-2); cursor:pointer}
.map-tab[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--ground)}

:root{--map-h:600px}
.map-layout{display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:16px; margin-top:18px; align-items:start}
.map-list{display:grid; gap:8px; align-content:start; max-height:var(--map-h); overflow-y:auto; padding-right:4px; scrollbar-width:thin}
.map-canvas-wrap{position:sticky; top:calc(var(--hdr) + 16px)}
.map-canvas{height:var(--map-h); border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--surface)}

.map-item{display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); background:var(--raised); text-decoration:none; color:inherit; transition:border-color .15s ease}
.map-item:hover,.map-item:focus-visible{border-color:var(--ink)}
.map-item.is-active{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.map-item__dot{flex:none; width:12px; height:12px; margin-top:5px; border-radius:50%; background:var(--c)}
.map-item__body{flex:1; min-width:0}
.map-item__t{display:block; font:600 .98rem/1.3 var(--f-body)}
.map-item__meta{display:block; margin-top:3px; font-size:.85rem; color:var(--ink-3)}
.map-item__dist{flex:none; padding:3px 9px; border-radius:999px; background:var(--surface); font-size:.8rem; font-weight:600; color:var(--ink-2); white-space:nowrap}
.map-item__dist:empty{display:none}

.map-empty{padding:32px 16px; text-align:center; color:var(--ink-3)}
.map-attr{margin-top:14px; font-size:.82rem; color:var(--ink-3)}
.map-attr a{color:inherit}

/* балун Яндекс Карт: категория, название-ссылка, адрес или расстояние */
.map-popup__cat{display:block; margin-bottom:2px; font:400 .78rem/1.3 var(--f-body); color:var(--ink-3)}
.map-popup__t{display:block; font:600 .95rem/1.3 var(--f-body); color:var(--focus); text-decoration:none}
.map-popup__t:hover{text-decoration:underline; text-underline-offset:3px}
.map-popup__addr{display:block; margin-top:3px; font:400 .85rem/1.35 var(--f-body); color:var(--ink-2)}
.map-fail{display:grid; place-items:center; height:100%; margin:0; padding:24px; text-align:center; color:var(--ink-3)}
/* ключ карт не задан — на странице остаётся один список во всю ширину */
.map-layout.is-list-only{grid-template-columns:1fr}
.map-layout.is-list-only .map-list{max-height:none}

@media (max-width:880px){
  .map-tabs{display:flex}
  .map-layout{grid-template-columns:1fr}
  .map-canvas-wrap{position:static}
  :root{--map-h:min(65vh,520px)}
}

/* ── карточки: обложка категории, сердечко «в план», вся карточка — ссылка ── */
:root{--love:#D6334A}
.card{position:relative; transition:border-color .15s ease,box-shadow .15s ease}
/* пока у мест нет фото, обложку рисуют цвет и знак категории — сетка одинаковых текстовых плиток читается хуже */
.card__top{position:relative; height:92px; margin:-18px -18px 0; overflow:hidden; background:color-mix(in srgb,var(--c) 14%,var(--raised))}
.card__top--photo{height:auto}
.card__top .card__img{width:100%; margin:0}
.card__glyph{position:absolute; right:-6px; bottom:-24px; color:var(--c); opacity:.3; stroke-width:1.5; transition:transform .3s ease}
.card:hover .card__glyph{transform:rotate(-6deg) scale(1.05)}
.card__badges{position:absolute; left:14px; top:12px; right:60px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px}
.card__badges .status-badge{margin:0}
.card__cat,.card__dist{display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:999px; background:var(--raised); font-size:.78rem; font-weight:600; color:var(--ink); white-space:nowrap}
.card__cat::before{content:""; width:8px; height:8px; margin-right:6px; border-radius:50%; background:var(--c)}
.card__dist{background:var(--ink); color:var(--ground); font-variant-numeric:tabular-nums}

.card__t a::after,.scard__t a::after{content:""; position:absolute; inset:0; border-radius:inherit}
.card__actions,.scard .card__link{position:relative; z-index:1}
.scard{position:relative; transition:border-color .15s ease,box-shadow .15s ease}
.card:hover,.scard:hover{border-color:var(--line-strong); box-shadow:var(--shadow)}
.card:hover .card__t a,.scard:hover .scard__t a{text-decoration:underline; text-underline-offset:3px}

.save{position:absolute; top:10px; right:10px; z-index:2; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:var(--raised); color:var(--ink-2); box-shadow:0 1px 3px rgba(20,33,61,.2); cursor:pointer; transition:color .15s ease,transform .15s ease}
.save:hover,.save[aria-pressed="true"]{color:var(--love)}
.save:active{transform:scale(.9)}
.save[aria-pressed="true"] svg,.save-btn[aria-pressed="true"] svg,.plan-link svg{fill:currentColor}
.save-btn[aria-pressed="true"]{border-color:var(--love); color:#B0243C}
/* без скрипта сердечко, «Поделиться» и геопозиция не работают — не показываем их вовсе */
html:not(.js) .save,html:not(.js) .save-btn,html:not(.js) [data-share],html:not(.js) [data-near],html:not(.js) .search-open{display:none}

.scard__cat{display:flex}
.scard__dist{display:inline-flex; align-items:center; gap:3px; margin-left:auto; padding:1px 8px; border-radius:999px; background:var(--surface); font-weight:600; color:var(--ink-2); white-space:nowrap}

/* ── шапка: ссылка на «Мой план», появляется с первым сердечком ── */
.plan-link{display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 12px; border-radius:10px; border:1.5px solid var(--line-strong); color:var(--love); text-decoration:none}
.plan-link:hover{border-color:var(--ink)}
.plan-link b{font:600 .95rem/1 var(--f-body); color:var(--ink); font-variant-numeric:tabular-nums}

/* ── панель фильтров: на узких экранах поиск свёрнут в кнопку, остаются быстрые фильтры ── */
.search-open{display:none; flex:none; place-items:center; width:40px; height:40px; padding:0; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--raised); color:var(--ink); cursor:pointer}
.toggle--near .ico{display:block}
.toggle.is-busy{opacity:.6; cursor:progress}
@media (max-width:1023px){
  .js .search-open{display:grid}
  .js .fbar:not(.is-searching) .fbar__row{display:none}
  .fbar.is-searching .search-open{background:var(--ink); border-color:var(--ink); color:var(--ground)}
}

/* ── витрина на телефоне: каждая категория — полка, листается вбок, вместо ленты из сотни карточек ── */
@media (max-width:620px){
  .catalog:not(.is-filtered) .grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(84%,320px); margin-inline:calc(var(--pad) * -1); padding:2px var(--pad) 10px; overflow-x:auto; scroll-padding-inline:var(--pad); scrollbar-width:none; overscroll-behavior-x:contain}
  .catalog:not(.is-filtered) .grid::-webkit-scrollbar{display:none}
  .js .catalog:not(.is-filtered) .group .card.is-extra{display:flex}
  .js .catalog:not(.is-filtered) .group__more{display:none}
}
@media (max-width:620px) and (pointer:coarse){
  .catalog:not(.is-filtered) .grid{scroll-snap-type:x mandatory}
  .catalog:not(.is-filtered) .card{scroll-snap-align:start}
}

/* ── подборки под повод ── */
.moods{padding-block:clamp(28px,4vw,44px); border-top:1px solid var(--line)}
.moods__title{margin:0 0 14px; font:600 1.15rem/1.2 var(--f-head); letter-spacing:-.02em}
.moods__list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none}
@media (max-width:760px){ .moods__list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.mood{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:12px; min-height:72px; height:100%; padding:12px 14px; border-radius:var(--r); border:1.5px solid transparent; background:color-mix(in srgb,var(--c) 10%,var(--ground)); color:var(--ink); text-decoration:none; transition:border-color .15s ease}
.mood:hover{border-color:var(--c)}
.mood__pict{grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--c); color:#fff}
.mood__t{align-self:end; font:600 1rem/1.2 var(--f-head); letter-spacing:-.02em}
.mood__n{align-self:start; font-size:.86rem; color:var(--ink-2)}
@media (max-width:420px){
  .mood{grid-template-columns:1fr; row-gap:8px; align-items:start}
  .mood__pict{grid-row:auto; width:36px; height:36px; border-radius:10px}
}

/* ── шапка страницы места и подборки: полоса в цвет категории ── */
.band{padding-block:clamp(20px,3vw,32px) clamp(28px,4vw,44px); background:color-mix(in srgb,var(--c) 9%,var(--ground)); border-bottom:1px solid color-mix(in srgb,var(--c) 18%,var(--ground))}
.band .crumbs{margin-bottom:16px; color:var(--ink-2)}
.band__eyebrow{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-weight:500; color:var(--ink-2)}
.band__eyebrow .pict{width:34px; height:34px; border-radius:9px}
.band__title{max-width:24ch}
.band__lead{margin:14px 0 0; max-width:62ch; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-2)}
.band__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.band .btn--line{background:var(--raised)}
.band .place__facts li{background:var(--raised)}
.coll__body{padding-block:clamp(24px,4vw,40px) clamp(48px,8vw,96px)}
.coll__more{margin-top:48px}

.place__grid{display:grid; gap:24px 40px}
.place__grid.has-map{grid-template-columns:minmax(0,1fr) minmax(280px,400px); align-items:start}
.place__main{min-width:0; max-width:760px}
.place__map{margin-top:38px}
.place-map{height:280px; border-radius:var(--r); overflow:hidden; border:1px solid color-mix(in srgb,var(--c) 22%,var(--line)); background:var(--surface)}
.place__addr{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; margin:10px 2px 0; font-size:.9rem; color:var(--ink-2)}
.place__addr span{display:inline-flex; align-items:center; gap:6px}
.place__addr a{font-weight:500; color:var(--ink); text-underline-offset:3px}
@media (max-width:900px){
  .place__grid.has-map{grid-template-columns:1fr}
  .place__map{margin-top:0}
  .place-map{height:220px}
}
.place__in{padding-bottom:clamp(48px,8vw,96px)}
.place__in > .place__more:first-child,.place__in > .place__img + .place__more{margin-top:40px; padding-top:0; border-top:0}
.place__note{margin:-8px 0 16px; font-size:.9rem; color:var(--ink-3)}

/* ── маршруты: остановки ведут на места, сам маршрут открывается в Яндекс Картах ── */
a.route__name{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px}
a.route__name:hover{text-decoration-color:currentColor}
.route__acts{display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:16px}

/* ── мой план ── */
.plan-shared{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:24px; padding:14px 16px; border-radius:14px; background:var(--season-tint)}
.plan-shared p{flex:1 1 260px; margin:0; color:var(--ink)}
.plan-bar{display:grid; gap:12px; margin-top:24px; padding-block:16px; border-block:1px solid var(--line)}
.plan-bar__n{margin:0; font:600 1.1rem/1.2 var(--f-head); letter-spacing:-.02em}
.plan-bar__acts{display:flex; flex-wrap:wrap; gap:8px}
.plan-bar__note{margin:0; font-size:.88rem; color:var(--ink-3)}
.plan-grid{margin-top:20px}
.plan-page .empty{margin-top:24px}
.plan-page .empty .btn{margin-top:14px}

/* ── карта: выбранные места по порядку ── */
.map-sel{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:20px}
.map-sel__t{margin:0; font-weight:600}
.map-sel__all{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border-radius:999px; border:1.5px solid var(--line-strong); color:var(--ink); font-size:.92rem; font-weight:500; text-decoration:none}
.map-sel__all:hover{border-color:var(--ink)}
.map-item__dot.is-num{display:grid; place-items:center; width:22px; height:22px; margin-top:0; color:#fff; font:700 .74rem/1 var(--f-body)}

/* ── всплывающее сообщение ── */
.toast{position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); z-index:70; display:flex; align-items:center; gap:16px; max-width:min(560px,calc(100% - 24px)); padding:12px 16px; border-radius:12px; background:var(--ink); color:#fff; font-size:.95rem; box-shadow:0 18px 40px -18px rgba(20,33,61,.6); opacity:0; visibility:hidden; transform:translate(-50%,16px); transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.toast.is-shown{opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .2s ease,transform .2s ease}
.toast__act{flex:none; padding:8px 0; border:0; background:none; font:inherit; font-weight:700; color:#fff; text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap}

/* ── «Открываются»: компактная строка после витрины — первым на экране то, куда можно пойти сегодня ── */
.soon{padding-block:16px; border-top:1px solid var(--line); background:var(--season-tint)}
.soon__in{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.soon__title{flex:none; margin:0; font:600 1rem/1.2 var(--f-head); letter-spacing:-.02em}
.soon__list{display:flex; flex:1 1 280px; gap:8px; min-width:0; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none}
.soon__list::-webkit-scrollbar{display:none}
.soon__item{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 6px 0 14px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--raised); color:var(--ink); font-size:.92rem; font-weight:500; text-decoration:none; white-space:nowrap}
.soon__item:hover{border-color:var(--ink)}
.soon__item i{width:9px; height:9px; border-radius:50%; background:var(--c)}
.soon__item small{padding:3px 9px; border-radius:999px; background:var(--signal); color:var(--signal-ink); font-size:.74rem; font-weight:700}

/* кнопки связи с местом — первыми в ряду и чуть заметнее ссылок на карту и сайт */
.card__link--main{color:var(--ink)}

/* партнёрские ссылки подписаны честно: через какой сервис и что это партнёрка */
.place__via{margin:10px 0 0; font-size:.86rem; color:var(--ink-2)}
.routes__tours{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:14px 0 0}
.routes__tours a{display:inline-flex; align-items:center; gap:6px; min-height:40px; font-weight:600; color:var(--ink); text-underline-offset:3px}
.routes__tours span{font-size:.86rem; color:var(--ink-3)}

/* ── отчёт для владельца места ── */
.report__period{display:flex; flex-wrap:wrap; gap:6px; margin-top:20px}
.report__kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:24px}
.report__kpi{padding:14px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--raised)}
.report__kpi b{display:block; font:700 1.8rem/1.1 var(--f-head); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.report__kpi span{font-size:.9rem; color:var(--ink-2)}
.report__wrap{margin-top:28px; overflow-x:auto}
.report__table{width:100%; border-collapse:collapse; font-size:.95rem}
.report__table th,.report__table td{padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
.report__table .num{text-align:right; font-variant-numeric:tabular-nums}
.report__note{max-width:70ch; margin-top:20px; font-size:.9rem; color:var(--ink-3)}

/* платное размещение: пометка «Реклама» с рекламодателем и erid */
.ad-mark{display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:999px; background:var(--ink); color:var(--ground); font-size:.74rem; font-weight:600; white-space:nowrap}
.card__ad{margin:10px 0 0; font-size:.74rem; color:var(--ink-3)}
.place__ad{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; font-size:.82rem; color:var(--ink-3)}
.report__promo{margin:10px 0 0; font-weight:500}