/* Start:/local/components/custom/guide.list/templates/.default/style.css?17849325135005*/
/* Ювелирный гид: алфавитный указатель /guide/.
   Токены — из local/templates/box/style/constructor.css (палитра mercury-монохром):
   заголовки/навигация — var(--font-family-display) (Manrope), текст списка —
   var(--font-family-serif) (Inter). Жёстких имён шрифтов не оставляем — Jost
   подключён глобально (footer.php, шапка/меню), но в токены шаблона не входит.
   Никаких новых hex — только --color/--text-color/--border-color/--accent из
   боевого шаблона. */

/* Своей сетки не заводим: родитель (.main-container) уже держит max-width 1320
   и боковой padding. Вторая рамка поверх сдвигала указатель на 80px правее H1
   и крошек — заметный перекос, особенно с полем поиска. */
.guide-index {
    padding-bottom: 64px;
}

.guide-index__columns {
    columns: 4;
    column-gap: 48px;
}

.guide-index__group {
    break-inside: avoid;
    margin-bottom: 28px;
}

/* h2 по умолчанию — Manrope 200 (см. template_styles.css), но буква указателя —
   навигационный элемент, а не заголовок раздела: набираем var(--font-family-display)
   (Manrope) весом 500, тем же токеном, что и заголовки статьи гида. */
.guide-index__letter {
    font-family: var(--font-family-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-color);
    margin: 0 0 10px;
}

.guide-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guide-index__list li {
    margin: 0 0 8px;
}

.guide-index__link {
    font-family: var(--font-family-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-color-2);
    text-decoration: none;
    transition: color .2s ease;
}

.guide-index__link:hover {
    color: var(--accent);
}

.guide-index__empty {
    font-family: var(--font-family-serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color-4);
    padding: 48px 0;
}

@media (max-width: 1024px) {
    .guide-index__columns { columns: 2; }
}

@media (max-width: 640px) {
    .guide-index__columns { columns: 1; }
}

/* Поиск по указателю. Поле вставляет script.js — без JS оно не появляется вовсе,
   чтобы не показывать мёртвый инпут, который ничего не фильтрует. */
.guide-index__search {
    margin-bottom: 32px;
}

.guide-index__search-field {
    position: relative;
    max-width: 420px;
    border-bottom: 1px solid var(--border-color);
}

.guide-index__search-input {
    width: 100%;
    padding: 10px 28px 10px 26px;
    border: 0;
    background: transparent;
    font-family: var(--font-family-serif);
    font-size: 15px;
    color: var(--text-color);
    outline: none;
}

.guide-index__search-input::placeholder {
    color: var(--text-color-4);
}

/* У type="search" WebKit рисует собственный крестик очистки — рядом с нашим он
   выглядел как дубль. Тип оставляем search (на мобиле даёт нужную клавиатуру),
   а нативную кнопку убираем. */
.guide-index__search-input::-webkit-search-cancel-button,
.guide-index__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.guide-index__search-field::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -8px;
    border: 1.5px solid var(--text-color-4);
    border-radius: 50%;
}

.guide-index__search-field::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    width: 6px;
    height: 1.5px;
    margin-top: 4px;
    background: var(--text-color-4);
    transform: rotate(45deg);
}

/* Тач-таргет 40×40: пальцем в 20px не попасть. Визуально крестик прежнего
   размера — растёт только область нажатия. */
.guide-index__search-clear {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-family-display);
    font-size: 16px;
    line-height: 1;
    color: var(--text-color-4);
    cursor: pointer;
}

.guide-index__search-clear:hover {
    color: var(--accent);
}

.guide-index__nothing {
    font-family: var(--font-family-serif);
    font-size: 15px;
    color: var(--text-color-4);
    padding: 24px 0;
}

/* End */
/* /local/components/custom/guide.list/templates/.default/style.css?17849325135005 */