/* TASK-0810: подсветка текущего раздела в строке категорий шапки.
   li.active ставит pdoMenu (hereClass) на разделе и на всех страницах внутри него
   (подразделы, товары, лендинги); на самой странице раздела вместо ссылки — span.active. */
header .topnav .menu .products-nav .header-category-links li.active > a,
header .topnav .menu .products-nav .header-category-links li.active > span,
header .topnav.heavytop-header-task0132 .menu .products-nav .header-category-links li.active > a,
header .topnav.heavytop-header-task0132 .menu .products-nav .header-category-links li.active > span {
    color: #ff5b0a;
    text-decoration: underline;
    text-decoration-color: #ff5b0a;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

header .topnav .menu .products-nav .header-category-links li.active > span {
    cursor: default;
}

/* «Барные стулья» — первое название из двух слов: на 1024 px переносилось на две строки. */
header .topnav .menu .products-nav .header-category-links li > a,
header .topnav .menu .products-nav .header-category-links li > span {
    white-space: nowrap;
}

header .topnav .menu .products-nav .header-category-links li.active > a:hover {
    color: #dd4a00;
}

/* На узком экране строка — горизонтальная прокрутка с overflow-y:hidden:
   подчёркивание на 5px срезается по нижнему краю, поэтому ближе к тексту. */
@media (max-width: 1023px) {
    header .topnav .menu .products-nav .header-category-links li.active > a,
    header .topnav .menu .products-nav .header-category-links li.active > span,
    header .topnav.heavytop-header-task0132 .menu .products-nav .header-category-links li.active > a,
    header .topnav.heavytop-header-task0132 .menu .products-nav .header-category-links li.active > span {
        text-underline-offset: 2px;
    }
}

/* Обрезанный край строки гаснет градиентом — видно, что её можно прокрутить
   (как строка подкатегорий в каталоге, catalog-2026.css). Правый край гаснет,
   пока не домотали до конца (.is-end), левый — когда строка уже прокручена (.has-left). */
@media (max-width: 1023px) {
    header .topnav .header-category-links {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    }
    header .topnav .header-category-links.has-left {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
    }
    header .topnav .header-category-links.is-end {
        -webkit-mask-image: none;
        mask-image: none;
    }
    header .topnav .header-category-links.has-left.is-end {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px);
        mask-image: linear-gradient(to right, transparent 0, #000 34px);
    }
}