/* ═══ AZBI v3 — раздел «Карта». Собирается из design-handoff/parts/06-locations.css,
   правки вносить туда. Фундамент — azbi-v3.css. ═══ */

/* ══════════════════════════════════════════════════════════════════════════
   Раздел «Карта» — locations.html. Оверлей поверх живой Яндекс.Карты.

   Значения из design-handoff/README.md, раздел «Раздел «Карта» — locations.html».
   Холст, шапка, кнопка .az-btn, .az-kicker и токены приходят из azbi-v3.css —
   здесь они не переобъявляются.

   Карта светлая, поэтому тема шапки на этой странице — светлая, а грунт под
   картой белый. Ни одной тени и ни одного чёрного канта: и то и другое —
   наследие Mr Pops, редизайн его как раз убирает.
   ══════════════════════════════════════════════════════════════════════════ */

/* Полупрозрачные оттенки выведены из токена крема через color-mix, а не
   набраны каналами: так их нельзя рассинхронизировать с палитрой. */
.loc__root {
    --loc-soft:  color-mix(in srgb, var(--az-cream) 14%, transparent);
    --loc-pick:  color-mix(in srgb, var(--az-cream) 12%, transparent);
    --loc-hair:  color-mix(in srgb, var(--az-cream) 20%, transparent);
    --loc-rule:  color-mix(in srgb, var(--az-cream) 30%, transparent);
    --loc-sep:   color-mix(in srgb, var(--az-cream) 40%, transparent);
    --loc-ghost: color-mix(in srgb, var(--az-cream) 50%, transparent);
    --loc-mute:  color-mix(in srgb, var(--az-cream) 55%, transparent);

    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--az-white);
}

/* Подложка карты. Пустая по построению: ymaps рисует внутрь сама. */
.loc__map {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Символы знака «a» лежат в разметке, но занимать место не должны. */
.loc__defs {
    position: absolute;
    width: 0;
    height: 0;
}

/* Служебная подпись: нужна экранному диктору и переключателю языка,
   глазами не видна. Кнопки с одним глифом иначе остаются безымянными,
   а aria-label переключатель не переводит — он умеет только текст,
   placeholder и alt. */
.loc__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ─── Слой пинов ─────────────────────────────────────────────────────────
   Слой сквозной: карту под ним надо тянуть и крутить. Кликабельны только
   сами пины. */
.loc__pins {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Обёртка 0x0 стоит ровно в точке координат, круг поднимается над ней
   через translate(-50%,-100%) — острие приходится на саму точку. */
.loc__pin {
    position: relative;
    width: 0;
    height: 0;
    pointer-events: auto;
}

.loc__pin-body {
    --loc-pin-scale: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--az-green);
    color: var(--az-cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -100%) scale(var(--loc-pin-scale));
    transition: transform .3s var(--az-ease-out),
                width .3s var(--az-ease-out),
                height .3s var(--az-ease-out),
                background-color .3s ease;
}

/* Внутри пина знак занимает 90% высоты. Пропорция — из его собственного
   viewBox, иначе буква поедет от центра круга. */
.loc__pin-mark {
    display: block;
    width: auto;
    height: 90%;
    aspect-ratio: 749.5 / 1029.53;
}

/* «Скоро открытие». На оранжевом брендбук допускает только rich black —
   и буква, и пламя. Поэтому глиф здесь другой символ, а не перекраска. */
.loc__pin--soon .loc__pin-body {
    background: var(--az-orange);
    color: var(--az-ink);
}

.loc__pin--active .loc__pin-body {
    width: 46px;
    height: 46px;
}

/* Отфильтрованные из списка пины не гаснут и не исчезают: точка на карте
   есть, просто сейчас не в выдаче. */
.loc__pin--dim .loc__pin-body { --loc-pin-scale: .55; }

/* Наведение работает только там, где пин лежит в нашей разметке. Внутри живой
   Яндекс.Карты поверх слоя меток лежит её собственный слой событий, и до
   кнопки мышь не доходит вовсе — попадания карта разбирает сама по iconShape.
   Правило оставлено намеренно: оно верное, просто в проде молчит. */
.loc__pin:hover .loc__pin-body { --loc-pin-scale: 1.12; }

/* Ореол выбранного пина — тот же приём, что у пина Ташкента на главной. */
.loc__pin-halo {
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    width: 38px;
    height: 38px;
    margin: -38px 0 0 -19px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--az-green) 45%, transparent);
    animation: locPinPulse 2.4s ease-out infinite;
    pointer-events: none;
}

.loc__pin--soon .loc__pin-halo {
    background: color-mix(in srgb, var(--az-orange) 50%, transparent);
}

.loc__pin--active .loc__pin-halo { display: block; }

@keyframes locPinPulse {
    0%   { transform: scale(.7);  opacity: .55; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* ─── Кластер ────────────────────────────────────────────────────────────
   При 215 точках Ташкент на общем плане превращался в кашу из пинов. Близкие
   точки собираются в один знак с числом внутри и расходятся при приближении.

   Устроен как пин: обёртка 0x0 стоит в точке координат, круг центрируется
   поверх неё. Разница в том, что кластер центрируется ПО СЕБЕ (-50%,-50%), а
   не поднимается над точкой: у него нет острия, он и есть скопление. */
.loc__cluster {
    position: relative;
    width: 0;
    height: 0;
    pointer-events: auto;
}

.loc__cluster-body {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--az-green);
    color: var(--az-cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    /* Ни канта, ни тени: кластер — та же плоская фигура, что и пин. */
    transition: width .3s var(--az-ease-out), height .3s var(--az-ease-out);
}

/* Три ступени, а не пропорция от числа: пропорция даёт кляксу в центре города
   и точки-крошки на окраинах. Границы ступеней задаёт JS. */
.loc__cluster--md .loc__cluster-body { width: 50px; height: 50px; }
.loc__cluster--lg .loc__cluster-body { width: 62px; height: 62px; }

.loc__cluster-num {
    font-family: var(--az-head);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .02em;
}

.loc__cluster--md .loc__cluster-num { font-size: 15px; }
.loc__cluster--lg .loc__cluster-num { font-size: 18px; }

/* ─── Карточка точки ─────────────────────────────────────────────────────
   Показывается по клику на пин или по выбору строки в списке: название, тип,
   адрес, часы и маршрут — не уводя человека со страницы.

   Лежит в холсте, а не внутри контейнера карты. Балун ymaps пришлось бы
   переопределять через версионные классы ymaps-2-1-79-*, и он унаследовал бы
   встречный масштаб контейнера — подпись вышла бы мельче, чем в панели рядом.

   Слой 6: выше легенды и панели (5), но JS не даёт карточке заехать на панель,
   поэтому перекрыть она может только легенду и только изредка. */
.loc__card {
    position: absolute;
    z-index: 6;
    width: 300px;
    padding: 16px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: var(--az-green);
    color: var(--az-cream);
    border-radius: var(--az-radius);
}

/* Иначе display:flex перебивает display:none из правила браузера для hidden,
   и закрытая карточка остаётся висеть над картой. */
.loc__card[hidden] { display: none; }

.loc__card--in {
    transform-origin: 50% 100%;
    animation: locCardIn .28s var(--az-ease-in);
}

/* Перевёрнутая карточка растёт от острия, а острие теперь сверху. */
.loc__card--below.loc__card--in { transform-origin: 50% 0; }

@keyframes locCardIn {
    from { opacity: 0; transform: translateY(6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Острие. Треугольник вырезан из сплошной плашки, а не собран из границ:
   границ в этом дизайне нет вовсе, и «кант через border» вернул бы их
   чёрным ходом. Сдвиг по горизонтали ставит JS — острие смотрит на точку
   даже когда карточку прижало к кромке холста. */
.loc__card-tail {
    position: absolute;
    left: var(--loc-card-tail, 50%);
    bottom: -8px;
    width: 18px;
    height: 9px;
    margin-left: -9px;
    background: var(--az-green);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.loc__card--below .loc__card-tail {
    bottom: auto;
    top: -8px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.loc__card-close {
    position: absolute;
    right: 16px;
    top: 14px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--loc-soft);
    color: var(--az-cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease, color .25s ease;
}

.loc__card-close:hover {
    background: var(--az-orange);
    color: var(--az-ink);
}

.loc__card-x {
    width: 12px;
    height: 12px;
}

.loc__card-x path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

/* Верхняя строка не должна подлезать под крестик. */
.loc__card-top { padding-right: 32px; }

.loc__card-name {
    font-family: var(--az-head);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.1;
    letter-spacing: -.015em;
    color: var(--az-cream);
}

/* Подчёркивание здесь раскрыто сразу: наводить не на что, карточка и так
   открыта по выбору точки. */
.loc__card-line { transform: scaleX(1); }

/* В строке списка «Маршрут» прижат вправо к часам работы, а в карточке он
   стоит отдельной строкой слева — margin-left:auto из .loc__route надо снять. */
.loc__card-route {
    margin-left: 0;
    margin-top: 6px;
    align-self: flex-start;
}

/* ─── Стопка аппаратов ───────────────────────────────────────────────────
   Несколько аппаратов в одном здании стоят в ОДНОЙ координате: расстояние
   между ними ноль, и приближением их не развести ни на каком зуме. Такой
   кластер раскрывается не картой, а списком в той же карточке. */
.loc__stack-head {
    display: block;
    padding-right: 32px;
    font-family: var(--az-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--az-cream);
    opacity: .6;
}

/* Стопки бывают и на пять аппаратов, и на пятнадцать — список прокручивается
   внутри карточки, а не растягивает её на весь холст. */
.loc__stack-list {
    max-height: 244px;
    overflow-y: auto;
    margin: 2px -8px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--loc-hair) transparent;
}

.loc__stack-list::-webkit-scrollbar { width: 6px; }
.loc__stack-list::-webkit-scrollbar-track { background: transparent; }
.loc__stack-list::-webkit-scrollbar-thumb {
    background: var(--loc-hair);
    border-radius: 9999px;
}

.loc__stack-row {
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--az-cream);
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Разделитель волосяной линией через inset-тень, а не border-top: граница
       рассекала бы скруглённую подсветку строки при наведении. */
    box-shadow: inset 0 1px 0 var(--loc-hair);
    transition: background-color .25s ease, box-shadow .25s ease;
}

/* Первая строка идёт сразу под заголовком — вторая линия подряд лишняя. */
.loc__stack-row:first-child { box-shadow: none; }

.loc__stack-row:hover {
    background: var(--loc-pick);
    box-shadow: none;
}

.loc__stack-name {
    font-family: var(--az-head);
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.loc__stack-kind {
    font-family: var(--az-head);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .7;
}

/* ─── Легенда ────────────────────────────────────────────────────────────
   Кремовая пилюля, а не зелёная: на зелёном грунте зелёная точка «Работает»
   пропала бы, и легенда перестала бы совпадать с картой. */
.loc__legend {
    position: absolute;
    left: 40px;
    top: 79px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 12px 24px;
    border-radius: 9999px;
    background: var(--az-cream);
}

.loc__legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
}

.loc__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.loc__legend-dot--active { background: var(--az-green); }
.loc__legend-dot--soon   { background: var(--az-orange); }

.loc__legend-label {
    font-family: var(--az-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--az-ink);
}

/* ─── Панель ─────────────────────────────────────────────────────────────
   Сплошная зелёная: ни канта, ни тени, ни размытия. Прежняя «крем 96% +
   blur(8px) + кант 2px» — ровно то наследие, от которого уходим. */
.loc__panel {
    position: absolute;
    right: 40px;
    top: 79px;
    bottom: 32px;
    width: 420px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: var(--az-green);
    color: var(--az-cream);
    border-radius: var(--az-radius);
    overflow: hidden;
    transform: translateX(0);
    transition: transform .45s var(--az-ease-in);
    /* backwards, а не both: с both кадры анимации продолжали бы применяться
       после её конца и перебивали бы transform свёрнутого состояния —
       панель просто не закрывалась бы. */
    animation: locPanelIn .5s var(--az-ease-in) backwards;
}

.loc__panel--closed { transform: translateX(424px); }

@keyframes locPanelIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.loc__collapse {
    position: absolute;
    right: 22px;
    top: 24px;
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--loc-soft);
    color: var(--az-cream);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease, color .25s ease,
                transform .45s var(--az-ease-in);
}

.loc__collapse:hover {
    background: var(--az-orange);
    color: var(--az-ink);
}

/* Свёрнутая панель уезжает на 424px, и кнопка на её правом краю ушла бы за
   кромку холста — развернуть обратно было бы нечем. Поэтому вместе с панелью
   кнопка переезжает к её левому краю: единственное, что остаётся на виду в
   торчащей полоске. Число 424 при этом не тронуто. */
.loc__panel--closed .loc__collapse { transform: translateX(-362px); }

.loc__collapse-chevron {
    width: 14px;
    height: 14px;
    transform: rotate(0deg);
    transition: transform .35s var(--az-ease-in);
}

.loc__collapse-chevron path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.loc__panel--closed .loc__collapse-chevron { transform: rotate(180deg); }

/* ─── Заголовок панели ───────────────────────────────────────────────── */
.loc__head { padding: 30px 28px 0; }

.loc__kicker {
    display: block;
    font-size: 12px;
    color: var(--az-orange);
    margin-bottom: 12px;
}

/* Заголовок намеренно НЕ Galdern, в отличие от .az-h1: у Galdern цифры
   слишком выделяются, и «215» перетягивает на себя весь блок. */
.loc__title {
    margin: 0;
    font-family: var(--az-body);
    font-weight: 700;
    font-size: 2.6rem;
    line-height: .98;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--az-cream);
}

.loc__title-line { display: block; }

.loc__lead {
    margin: 14px 0 0;
    max-width: 32ch;
    font-size: 14px;
    line-height: 1.5;
    opacity: .85;
}

/* ─── Поиск ──────────────────────────────────────────────────────────────
   Рамки и фона нет: одна линия снизу. Фильтрует по названию, адресу и типу. */
.loc__search {
    margin: 22px 28px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--loc-rule);
}

.loc__search-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

.loc__search-icon circle,
.loc__search-icon path {
    fill: none;
    stroke: var(--az-orange);
    stroke-width: 2;
    stroke-linecap: round;
}

.loc__search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0;
    font-family: var(--az-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--az-cream);
}

.loc__search-input::placeholder {
    color: var(--loc-ghost);
    opacity: 1;
}

/* ─── Фильтры-пилюли ─────────────────────────────────────────────────── */
.loc__filters {
    margin: 16px 28px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.loc__pill {
    border: 0;
    border-radius: 9999px;
    padding: 6px 14px;
    cursor: pointer;
    font-family: var(--az-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--loc-soft);
    color: var(--az-cream);
    transition: background-color .25s ease, color .25s ease;
}

.loc__pill:hover {
    background: color-mix(in srgb, var(--az-cream) 24%, transparent);
}

/* На оранжевом читается только rich black — крем на оранжевом даёт 1,66:1
   и запрещён законом контраста. */
.loc__pill--active,
.loc__pill--active:hover {
    background: var(--az-orange);
    color: var(--az-ink);
}

/* ─── Счётчик найденного ─────────────────────────────────────────────── */
.loc__found { margin: 18px 28px 0; }

.loc__count {
    font-family: var(--az-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .6;
}

/* ─── Список ─────────────────────────────────────────────────────────────
   Прокручивается только эта область; min-height:0 обязателен, иначе
   flex-элемент не даст себя ужать и панель вылезет за нижнюю кромку. */
.loc__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 22px 24px;
    margin-top: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--loc-hair) transparent;
}

.loc__scroll::-webkit-scrollbar { width: 6px; }
.loc__scroll::-webkit-scrollbar-track { background: transparent; }
.loc__scroll::-webkit-scrollbar-thumb {
    background: var(--loc-hair);
    border-radius: 9999px;
}

/* ─── Строка списка ──────────────────────────────────────────────────── */
.loc__row {
    padding: 16px 18px;
    margin: 2px 0;
    border-radius: 22px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    /* Разделитель волосяной линией через inset-тень, а не border-top:
       граница рассекала бы скруглённую подсветку выбранной строки. */
    box-shadow: inset 0 1px 0 var(--loc-hair);
    transition: background-color .3s ease, box-shadow .3s ease;
}

.loc__row--active {
    background: var(--loc-pick);
    box-shadow: none;
}

.loc__row-top {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Статус на зелёном грунте кодируется словом: цветовая пара
   зелёный/оранжевый остаётся за картой и легендой. */
.loc__status {
    font-family: var(--az-head);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--az-cream);
}

.loc__status--soon { color: var(--az-orange); }

.loc__row-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--loc-sep);
}

.loc__kind {
    font-family: var(--az-head);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--az-cream);
    opacity: .7;
}

.loc__dist {
    margin-left: auto;
    font-family: var(--az-head);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--loc-mute);
}

.loc__dist--near { color: var(--az-orange); }

.loc__name {
    font-family: var(--az-head);
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.1;
    letter-spacing: -.015em;
    color: var(--az-cream);
}

/* Брендовое подчёркивание строки. Каркас .az-btn__line сюда не берём: это
   не кнопка, а штрих самой строки, и раскрывается он от наведения на всю
   строку целиком, а не на ссылку внутри неё. */
.loc__row-line {
    display: block;
    width: 200px;
    height: 7px;
    overflow: visible;
    transform: scaleX(.55);
    transform-origin: left center;
    transition: transform .42s var(--az-ease-out);
}

.loc__row-line path {
    fill: none;
    stroke: var(--az-orange);
    stroke-width: 3;
    stroke-linecap: round;
}

.loc__row:hover .loc__row-line,
.loc__row--active .loc__row-line { transform: scaleX(1); }

.loc__address {
    font-size: 13px;
    line-height: 1.45;
    opacity: .75;
}

.loc__row-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 2px;
}

.loc__hours {
    font-size: 12px;
    opacity: .6;
}

/* Кнопка «Маршрут» — та же .az-btn, только мельче: каркас, раскрытие линии
   и перекраска подписи при наведении уже в фундаменте. */
.loc__route {
    margin-left: auto;
    gap: 4px;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--az-cream);
}

.loc__route-line {
    width: 70px;
    height: 5px;
    overflow: visible;
}

.loc__route-line path {
    stroke: var(--az-orange);
    stroke-width: 2.6;
}

/* ─── Пустое состояние ───────────────────────────────────────────────── */
.loc__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 34px 0 10px;
}

/* Иначе display:flex перебивает display:none, который атрибут hidden
   ставит правилом браузера, и «Ничего не нашлось» висит поверх выдачи. */
.loc__empty[hidden] { display: none; }

.loc__empty-stamp {
    width: 44px;
    height: 44px;
    opacity: .5;
}

.loc__empty-title {
    font-family: var(--az-head);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--az-cream);
}

.loc__empty-text {
    max-width: 28ch;
    font-size: 13px;
    line-height: 1.5;
    opacity: .75;
}

/* ─── «На главную» ───────────────────────────────────────────────────────
   Ни плашки, ни канта: подпись и одна неровная линия. Модификаторы
   .az-btn--primary/--secondary не подходят — первый даёт 26px, второй
   кремовую линию для зелёного грунта, а здесь светлая карта. */
.loc__home {
    position: absolute;
    left: 40px;
    bottom: 32px;
    z-index: 5;
    gap: 7px;
    font-size: 20px;
    color: var(--az-green);
}

.loc__home-line {
    width: 160px;
    height: 8px;
    overflow: visible;
}

.loc__home-line path {
    stroke: var(--az-orange);
    stroke-width: 3;
}