.export-container {
    padding-top: 135px;
}

.breadcrumbs__list {
    color: var(--color-primary);
}

.breadcrumbs__current,
.breadcrumbs__separator {
    color: var(--color-shades-tertiary);
}

.breadcrumbs__link {
    color: var(--color-primary);
}

.export-header {
    margin-top: 32px;
    margin-bottom: 32px;
}


/* ============================================================
   Category buttons — unchanged
   ============================================================ */
.exports-categories {
    margin-bottom: 104px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.exports-categories ul {
    gap: 8px;
    flex-wrap: nowrap;
    width: max-content;
}

.exports-categories .category-item {
    flex-shrink: 0;
    --btn-bg: var(--color-surface-lower);
    --btn-color: var(--color-shades-secondary);
}

.exports-categories .category-item.active {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-on-primary);
}

.exports-categories .category-item:not(.active):hover {
    --btn-color: var(--color-primary);
}

.category-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--btn-color) !important;
    background-color: var(--btn-bg);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.left-shape,
.right-shape {
    display: block;
    width: 19px;
    height: 32px;
    background-color: var(--btn-bg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: background-color 0.2s ease;
}

.right-shape {
    -webkit-mask-image: url('/images/assets/btn-edge-right.svg');
    mask-image: url('/images/assets/btn-edge-right.svg');
}

.left-shape {
    -webkit-mask-image: url('/images/assets/btn-edge-left.svg');
    mask-image: url('/images/assets/btn-edge-left.svg');
}


/* --- Cards grid --------------------------------------------------------- */
.export-section-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 24px;
    row-gap: 120px;
    padding-bottom: 56px;
    padding-top: 56px;
}

/* ==========================================================================
   Animations — exports listing page
   ========================================================================== */

.export-container .breadcrumbs,
.export-container .export-header {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.export-container.is-visible .breadcrumbs {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
}

.export-container.is-visible .export-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 150ms;
}

.export-container .export-header .stick {
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.export-container.is-visible .export-header .stick {
    transform: scaleY(1);
}

.export-container .exports-categories {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 700ms ease 400ms,
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
}

.export-container.is-visible .exports-categories {
    opacity: 1;
    transform: translateY(0);
}

.export-container .exports-categories li {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 500ms ease,
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.export-container.is-visible .exports-categories li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--cat-index, 0) * 50ms + 500ms);
}

.export-container .export-section-grid .export-card {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 600ms ease,
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--card-index, 0) * 70ms + 700ms);
}

.export-container.is-visible .export-section-grid .export-card {
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 768px) {
    .export-section-grid {
        row-gap: 80px;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    .export-container .breadcrumbs,
    .export-container .export-header,
    .export-container .export-header .stick,
    .export-container .exports-categories,
    .export-container .exports-categories li,
    .export-container .export-section-grid .export-card {
        transition: none;
        transform: none;
        opacity: 1;
    }
}