/* Desktop homepage category hero layout. Mobile/PWA styles are intentionally not included. */
@media (min-width: 1024px) {
    .categories-hero .categories-cloud--static {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: stretch;
        gap: 16px;
        width: 100%;
    }

    .categories-hero .categories-slider {
        --category-card-gap: 10px;
        --category-card-width: calc((100% - (var(--category-card-gap) * 4)) / 4.5);
        --category-peek-width: calc(var(--category-card-width) / 2);
        position: relative;
        min-width: 0;
    }

    .categories-hero .categories-cloud__items {
        position: relative;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-template-rows: repeat(2, 90px);
        grid-auto-columns: var(--category-card-width);
        gap: 10px 20px;
        width: 100%;
        min-width: 0;
        max-height: 190px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 2px 4px;
        box-sizing: border-box;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-snap-type: none;
        scroll-behavior: smooth;
        touch-action: pan-x;
        will-change: scroll-position;
    }

    /*
     * The fade is a mask of the viewport itself, not an overlay pseudo-element.
     * Therefore the content scrolls underneath a fixed transparent edge and the
     * fade never moves together with the category cards.
     */
    .categories-hero .categories-cloud__items.is-scrollable {
        -webkit-mask-image: linear-gradient(
            90deg,
            #000000 0%,
            #000000 calc(100% - 180px),
            rgb(0 0 0 / 88%) calc(100% - 132px),
            rgb(0 0 0 / 52%) calc(100% - 64px),
            transparent 100%
        );
        mask-image: linear-gradient(
            90deg,
            #000000 0%,
            #000000 calc(100% - 180px),
            rgb(0 0 0 / 88%) calc(100% - 132px),
            rgb(0 0 0 / 52%) calc(100% - 64px),
            transparent 100%
        );
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

    .categories-hero .categories-cloud__items.is-scrollable.has-previous {
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0%,
            rgb(0 0 0 / 52%) 64px,
            rgb(0 0 0 / 88%) 132px,
            #000000 180px,
            #000000 calc(100% - 180px),
            rgb(0 0 0 / 88%) calc(100% - 132px),
            rgb(0 0 0 / 52%) calc(100% - 64px),
            transparent 100%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 0%,
            rgb(0 0 0 / 52%) 64px,
            rgb(0 0 0 / 88%) 132px,
            #000000 180px,
            #000000 calc(100% - 180px),
            rgb(0 0 0 / 88%) calc(100% - 132px),
            rgb(0 0 0 / 52%) calc(100% - 64px),
            transparent 100%
        );
    }

    .categories-hero .categories-cloud__items.is-scrollable.is-at-end {
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0%,
            rgb(0 0 0 / 52%) 64px,
            rgb(0 0 0 / 88%) 132px,
            #000000 180px,
            #000000 100%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 0%,
            rgb(0 0 0 / 52%) 64px,
            rgb(0 0 0 / 88%) 132px,
            #000000 180px,
            #000000 100%
        );
    }

    .categories-hero .categories-cloud__items::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .categories-hero .categories-cloud__items.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
        user-select: none;
    }

    .categories-hero .categories-cloud__items.is-momentum {
        scroll-behavior: auto;
    }

    .categories-hero .categories-slider__arrow {
        position: absolute;
        z-index: 4;
        top: 50%;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        color: #4f46e5;
        background: #ffffff;
        box-shadow: 0 3px 12px rgb(15 23 42 / 18%);
        transform: translateY(-50%);
        cursor: pointer;
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .categories-hero .categories-slider__arrow:hover {
        transform: translateY(-50%) scale(1.05);
    }

    .categories-hero .categories-slider__arrow--prev {
        left: 8px;
        opacity: 0;
        pointer-events: none;
    }

    .categories-hero .categories-slider.is-scrolled .categories-slider__arrow--prev {
        opacity: 1;
        pointer-events: auto;
    }

    .categories-hero .categories-slider__arrow--next {
        right: 8px;
    }

    .categories-hero .categories-slider.is-at-end .categories-slider__arrow--next {
        opacity: 0;
        pointer-events: none;
    }

    .categories-hero .category-tag {
        position: relative;
        z-index: 1;
        padding: 0;
        height: 90px;
        min-height: 90px;
        -webkit-user-drag: none;
    }

    .categories-hero .category-tag__name {
        display: -webkit-box;
        padding: 0;
        min-width: 0;
        overflow: hidden;
        line-height: 1.25;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .categories-hero .category-tag__image {
        display: grid;
        flex: 0 0 84px;
        place-items: center;
        width: 84px;
        height: 84px;
        margin: 0;
        overflow: hidden;
        border-radius: 18px;
        background: #ffffff;
    }

    .categories-hero .category-tag__img {
        display: block;
        width: 84px;
        height: 84px;
        object-fit: contain;
        border-radius: 18px;
    }

    .categories-hero__banner {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 180px;
        overflow: hidden;
        box-sizing: border-box;
        /* Padding lives on the slides: they are stacked absolutely and each one
           controls its own inner spacing (wide slides do not reserve image space). */
        padding: 0;
        border-radius: 18px;
        color: #111827;
        background: #edecff;
    }

    .categories-hero__banner-content {
        position: relative;
        z-index: 1;
    }

    .categories-hero__banner-eyebrow,
    .categories-hero__banner-title,
    .categories-hero__banner-text {
        margin: 0;
    }

    .categories-hero__banner-eyebrow {
        color: #2563eb;
        font-size: 12px;
        font-weight: 700;
    }

    .categories-hero__banner-title {
        margin-top: 4px;
        font-size: 18px;
        line-height: 1.15;
    }

    .categories-hero__banner-text {
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.3;
    }

    .categories-hero__banner-button {
        display: inline-block;
        margin-top: 24px;
        padding: 9px 14px;
        border-radius: 50px;
        color: #ffffff;
        background: #4f46e5;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
    }

    .categories-hero__banner-button:hover {
        background: #6057f5;
        border-color: #6057f5;
        color: #ffffff;
    }

    .categories-hero__banner-image {
        position: absolute;
        right: -8px;
        bottom: -18px;
        width: 132px;
        height: 160px;
        object-fit: contain;
        object-position: bottom right;
    }

    .categories-hero .latest-publication {
        margin-top: 10px;
    }

    .home-sidebar-column .homepage-statistics {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        min-width: 0;
        min-height: 66px;
        box-sizing: border-box;
        margin-top: 16px;
        padding: 18px 16px;
        border-radius: 18px;
        color: #6b7280;
        background: #F8FAFC;
        overflow: hidden;
        position: relative;
    }

    .home-sidebar-column .homepage-statistics__content {
        min-width: 0;
        width: 100%;
    }

    /* Recently viewed: the same free native-scroll interaction as categories. */
    .recently-viewed .slider-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        touch-action: pan-x;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }

    .recently-viewed .slider-wrapper::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .recently-viewed .slider-wrapper.is-dragging,
    .recently-viewed .slider-wrapper.is-momentum {
        cursor: grabbing;
        scroll-behavior: auto;
    }

    .recently-viewed .slider-wrapper.is-scrollable {
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 180px), rgb(0 0 0 / 88%) calc(100% - 132px), rgb(0 0 0 / 52%) calc(100% - 64px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 180px), rgb(0 0 0 / 88%) calc(100% - 132px), rgb(0 0 0 / 52%) calc(100% - 64px), transparent 100%);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

    .recently-viewed .slider-wrapper.is-scrollable.has-previous {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 52%) 64px, rgb(0 0 0 / 88%) 132px, #000 180px, #000 calc(100% - 180px), rgb(0 0 0 / 88%) calc(100% - 132px), rgb(0 0 0 / 52%) calc(100% - 64px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 52%) 64px, rgb(0 0 0 / 88%) 132px, #000 180px, #000 calc(100% - 180px), rgb(0 0 0 / 88%) calc(100% - 132px), rgb(0 0 0 / 52%) calc(100% - 64px), transparent 100%);
    }

    .recently-viewed .slider-wrapper.is-scrollable.is-finished {
        /* At the end keep only the left fade; the right edge is fully opaque. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 52%) 64px, rgb(0 0 0 / 88%) 132px, #000 180px, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 52%) 64px, rgb(0 0 0 / 88%) 132px, #000 180px, #000 100%);
    }

    .recently-viewed .slider-track {
        transform: none !important;
        transition: none !important;
        cursor: inherit;
    }

    .recently-viewed .slider-nav-container {
        position: relative;
        z-index: 3;
    }

    .recently-viewed .slider-nav--prev:disabled {
        opacity: 0.3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .categories-hero .categories-cloud__items {
        scroll-behavior: auto;
    }
}

@media (max-width: 1279px) and (min-width: 1024px) {
    .categories-hero .categories-slider {
        --category-card-gap: 8px;
        --category-card-width: calc((100% - (var(--category-card-gap) * 4)) / 4.5);
    }

    .categories-hero .categories-cloud--static {
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

/*
 * Homepage hero banner slider: «А вы знали?» / «Статистика» / «Оцените работу сайта».
 * Slides are absolutely stacked so the banner keeps a stable height and the first
 * slide keeps the exact layout it had before (image offsets included).
 */
@media (min-width: 1024px) {
    .categories-hero__banner-slides {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
    }

    .categories-hero__banner-slide {
        position: absolute;
        inset: 0;
        box-sizing: border-box;
        padding: 18px 118px 18px 20px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .categories-hero__banner-slide.is-active {
        opacity: 1;
        visibility: visible;
    }

    /*
     * Every slide mirrors slide 1: identical heading typography and the same
     * spacing contract (heading → text 5px, text → action 24px — see
     * .categories-hero__banner-text / .categories-hero__banner-button).
     * The image occupies the right padding on all slides, so all of them use
     * the default slide padding.
     */
    .categories-hero__banner-slide .site-feedback-card__title {
        margin: 4px 0 0;
        color: inherit;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.15;
    }

    .categories-hero__banner-slide .hero-banner-stats,
    .categories-hero__banner-slide .site-feedback-card__stats,
    .categories-hero__banner-slide .site-feedback-card__text {
        margin-top: 5px;
    }

    .categories-hero__banner-slide .site-feedback-card__stats,
    .categories-hero__banner-slide .site-feedback-card__text {
        margin-bottom: 0;
    }

    .categories-hero__banner-slide .site-feedback-card__btn {
        margin-top: 24px;
    }

    .categories-hero__banner-dots {
        position: absolute;
        top: 12px;
        right: 14px;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /*
     * Small dots. The button box is larger than the visual dot so it can host
     * the countdown ring around the active slide marker.
     */
    .categories-hero__banner-dot {
        position: relative;
        display: grid;
        place-items: center;
        width: 16px;
        height: 16px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
    }

    .categories-hero__banner-dot::after {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(79, 70, 229, 0.3);
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .categories-hero__banner-dot:hover::after {
        background: rgba(79, 70, 229, 0.6);
    }

    .categories-hero__banner-dot.is-active::after {
        background: #4f46e5;
        transform: scale(1.15);
    }

    .categories-hero__banner-dot:focus-visible {
        outline: 2px solid #4f46e5;
        outline-offset: 2px;
    }

    /* Countdown ring: the arc empties during one autoplay cycle. */
    .categories-hero__banner-dot__ring {
        position: absolute;
        inset: 0;
        width: 16px;
        height: 16px;
        pointer-events: none;
    }

    .categories-hero__banner-dot__ring-track,
    .categories-hero__banner-dot__ring-progress {
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .categories-hero__banner-dot__ring-track {
        stroke: rgba(79, 70, 229, 0.22);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .categories-hero__banner-dot__ring-progress {
        stroke: #4f46e5;
        /* r=6.5 → circumference ≈ 40.84; 41 avoids a hairline gap at full sweep.
           Negative offsets make the arc unwind in the opposite direction. */
        stroke-dasharray: 41;
        stroke-dashoffset: -41;
        transform: rotate(-90deg);
        transform-box: view-box;
        transform-origin: 50% 50%;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .categories-hero__banner-dot.is-active .categories-hero__banner-dot__ring-track,
    .categories-hero__banner-dot.is-active .categories-hero__banner-dot__ring-progress {
        opacity: 1;
    }

    .categories-hero__banner-dot.is-active .categories-hero__banner-dot__ring-progress {
        animation: hb-banner-dot-countdown var(--hb-autoplay-duration, 5000ms) linear forwards;
    }

    /* Hover/focus/hidden tab: freeze the ring together with the autoplay timer. */
    [data-hero-banner].is-autoplay-paused .categories-hero__banner-dot.is-active .categories-hero__banner-dot__ring-progress {
        animation-play-state: paused;
    }

    /* The feedback card is reused inside the banner, which already provides the surface. */
    .categories-hero__banner-slide .site-feedback-card {
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    /*
     * Compact statistics typography: all three indicators must fit the narrow
     * banner column (≈162px of content width) without clipping.
     */
    .hero-banner-stats .homepage-statistics__line {
        grid-template-columns: 18px minmax(0, 1fr);
        column-gap: 6px;
        margin-bottom: 6px;
        font-size: 11px;
        line-height: 1.25;
    }

    .hero-banner-stats .homepage-statistics__line:last-child {
        margin-bottom: 0;
    }

    .hero-banner-stats .homepage-statistics__line-icon {
        font-size: 16px;
    }

    .hero-banner-stats .homepage-statistics__line strong {
        margin-bottom: 0;
        font-size: 13px;
        font-weight: 600;
    }

    .hero-banner-stats .homepage-statistics__line .stat-value {
        font-size: 15px;
    }
}

/*
 * Full-width homepage feed on desktop (content box of .container = 1318px).
 * The sidebar column is gone, so the recently viewed strip, auctions and the
 * latest listings fill the whole row.
 *
 * The homepage layout is reset to plain block flow: style.css historically
 * forced `.home-layout` to `280px 1fr !important` (two-column model with the
 * sidebar), which would otherwise push the whole feed into the 280px track.
 */
@media (min-width: 1024px) {
    .home-page .home-layout {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        min-height: 0 !important;
    }

    .home-page .home-layout .main-content {
        width: 100%;
        max-width: 100%;
    }

    .home-page .recently-viewed {
        max-width: 100%;
    }

    /* Six full cards plus a half-faded seventh card. */
    .home-page .recently-viewed .slider-item {
        flex: 0 0 calc((100% - 96px) / 6.5);
    }

    .home-page .home-auctions .listings-grid,
    .home-page .home-latest-listings-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/*
 * Mobile web keeps the four auction cards it rendered before the desktop
 * five-per-row change (the controller now loads five lots for the desktop row).
 */
@media (max-width: 1023px) {
    .home-page .home-auctions .listings-grid > *:nth-child(5) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .categories-hero__banner-slide {
        transition: none;
    }
}

/* Countdown ring around the active slide dot: full circle → empty arc.
   Negative offsets reverse the unwinding direction. */
@keyframes hb-banner-dot-countdown {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -41;
    }
}