/* ==========================================================================
   Бегущая строка новинок. Идёт на всех страницах, где сверху есть полоса
   с условиями доставки, — сразу под ней.

   Отдельный префикс cticker — чтобы ничего не пересекалось с полосой условий
   доставки (.info-marquee) и с содержимым страниц. Цвета берутся из переменных
   темы, поэтому лента читается и в светлой, и в тёмной.

   Лента едет собственной прокруткой окна (overflow-x), а не CSS-анимацией:
   так её можно листать пальцем и тянуть мышью, инерция после отпускания
   достаётся от браузера. Само движение считает static/js/catalog_ticker.js —
   он плавно двигает scrollLeft и возвращает дорожку на копию назад, когда та
   доезжает до конца, поэтому лента бесконечная.
   ========================================================================== */

/* Полоса под ленту на главной. Там нет <main> с отступом под шапку, а классы
   вёрстки на сайте раздаёт скрипт (tailwindcss.js) уже после загрузки страницы —
   если считать отступ ими, лента на миг оказывается под шапкой и потом
   прыгает на место. Обычный CSS применяется сразу, поэтому лента стоит там,
   где надо, с первой же отрисовки. */
.cticker-slot {
    padding-top: 9.5rem;
}

/* Порог тот же, что у полосы условий доставки (info_marquee.css): до 768 px
   шапка ниже, поэтому и отступ меньше. Раньше здесь стояло 640 px и в полосе
   экранов 640-767 px лента отходила от полосы доставки на лишние 16 px. */
@media (min-width: 768px) {
    .cticker-slot {
        padding-top: 10.5rem;
    }
}

.cticker {
    --cticker-card-width: 300px;
    --cticker-thumb: 104px;
    --cticker-fade: 3rem;

    display: flex;
    align-items: stretch;
    margin: 0 0 2rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-dim);
    border-bottom: 1px solid var(--border-dim);
    overflow: hidden;
    position: relative;
    /* На главной фоновое видео обложки растянуто на весь экран (position: fixed,
       z-index 0) и без этого перекрывает ленту. Ниже шапки и полосы доставки
       (у них z-index 40), поэтому им лента не мешает. */
    z-index: 10;
}

/* Подпись слева («НОВИНКИ» / «NEW IN» / «新品») — стоит на месте, лента едет за ней. */
.cticker__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-dim);
    color: var(--text-primary);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}

/* Окно, в котором видно дорожку. Оно же — обычная горизонтальная прокрутка:
   пальцем и мышью лента листается сама собой, с инерцией от браузера.
   Полоса прокрутки спрятана, но прокрутка работает.
   Края растворяются, чтобы карточки не обрубались по границе экрана. */
.cticker__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* Горизонталь ловит лента, вертикаль отдаётся странице — значит палец
       по ленте вверх-вниз листает страницу как обычно. Второй строкой ещё и
       щипок для увеличения: браузеры без pinch-zoom её просто не поймут и
       останутся на первой. */
    touch-action: pan-x pan-y;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    /* Прокрутка не перетекает на страницу и не вызывает жест «назад». */
    overscroll-behavior-x: contain;
    /* Плавную прокрутку выключаем: позицию каждый кадр ставит скрипт. */
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--cticker-fade), #000 calc(100% - var(--cticker-fade)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--cticker-fade), #000 calc(100% - var(--cticker-fade)), transparent);
}

.cticker__viewport::-webkit-scrollbar {
    display: none;
}

/* Пока ленту тянут мышью — курсор «зажатая рука», и текст не выделяется,
   иначе вместо перетаскивания получится выделение названий. */
.cticker__viewport--grabbing {
    cursor: grabbing;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.cticker__track {
    display: flex;
    width: max-content;
}

.cticker__group {
    display: flex;
    align-items: stretch;
}

.cticker__card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    width: var(--cticker-card-width);
    padding: 0.625rem 1rem;
    border-right: 1px solid var(--border-dim);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease;
    /* Курсор берём от окна ленты: над карточкой тоже «рука», а не палец. */
    cursor: inherit;
}

.cticker__card:hover {
    background: rgba(127, 127, 127, 0.14);
}

.cticker__card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Фиксированный бокс под фото: размер известен до загрузки картинки,
   поэтому вёрстка не прыгает. */
.cticker__thumb {
    flex: 0 0 auto;
    width: var(--cticker-thumb);
    height: var(--cticker-thumb);
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border-dim);
}

.cticker__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Иначе браузер начинает перетаскивать саму картинку вместо ленты. */
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.cticker__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cticker__badge {
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 6px;
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cticker__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.25;
}

.cticker__price {
    color: var(--text-dim);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .cticker {
        --cticker-card-width: 250px;
        --cticker-thumb: 96px;
        --cticker-fade: 1.25rem;
        margin-bottom: 1.25rem;
        /* Общие стили сайта на узких экранах дают каждому <section> отступы
           сверху и снизу (style.css: 5.5rem/2.5rem с !important). Лента —
           не обычный блок страницы, а полоса во всю ширину: от чужих отступов
           внутри неё появлялась пустая полоса высотой почти в 90 px, и карточки
           уезжали вниз. Возвращаем ленте её собственные нулевые отступы. */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .cticker__label {
        padding: 0 0.625rem;
        font-size: 10px;
        letter-spacing: 0.12em;
    }

    .cticker__card {
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .cticker__title {
        font-size: 12px;
    }

    .cticker__price {
        font-size: 11px;
    }
}

/* Пользователь попросил систему убрать анимации — сама лента не едет совсем,
   лишние копии убираем, листать руками по-прежнему можно. */
@media (prefers-reduced-motion: reduce) {
    .cticker__track {
        width: auto;
    }

    .cticker__group[aria-hidden="true"] {
        display: none;
    }

    .cticker__viewport {
        -webkit-mask-image: none;
        mask-image: none;
    }
}