.product-feed__title {
    margin: 0 0 calc(var(--space-7) + var(--space-2));
    font-family: var(--font-heading);
}

.product-feed__title .accent {
    color: var(--brand);
}

.catalog-grid {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-feed__empty {
    grid-column: 1 / -1;
}

.catalog-loader {
    display: none;
    justify-content: center;
    margin-top: var(--space-5);
    color: var(--text);
}

.product-feed.is-loading .catalog-loader {
    display: flex;
}

.catalog-loader__svg {
    width: min(100%, 9rem);
    height: auto;
}

.catalog-loader__hoof {
    opacity: 0;
    animation-duration: 2000ms;
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.catalog-loader__hoof--1 {
    animation-name: catalog-hoof-1;
}

.catalog-loader__hoof--2 {
    animation-name: catalog-hoof-2;
}

.catalog-loader__hoof--3 {
    animation-name: catalog-hoof-3;
}

.catalog-loader__hoof--4 {
    animation-name: catalog-hoof-4;
}

.catalog-loader__hoof--5 {
    animation-name: catalog-hoof-5;
}

.catalog-loader__hoof--6 {
    animation-name: catalog-hoof-6;
}

.catalog-loader__hoof--7 {
    animation-name: catalog-hoof-7;
}

.catalog-loader__hoof--8 {
    animation-name: catalog-hoof-8;
}

.catalog-loader__hoof--9 {
    animation-name: catalog-hoof-9;
}

.catalog-loader__hoof--10 {
    animation-name: catalog-hoof-10;
}

.catalog-loader__hoof--11 {
    animation-name: catalog-hoof-11;
}

.catalog-loader__hoof--12 {
    animation-name: catalog-hoof-12;
}

.catalog-loader__hoof--13 {
    animation-name: catalog-hoof-13;
}

@keyframes catalog-hoof-1 {
    0% {
        opacity: 0;
    }

    2.7% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-2 {

    0%,
    2.7% {
        opacity: 0;
    }

    4.6% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-3 {

    0%,
    4.6% {
        opacity: 0;
    }

    9.9% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-4 {

    0%,
    9.9% {
        opacity: 0;
    }

    14.5% {
        opacity: 0.96;
    }

    100% {
        opacity: 0.96;
    }
}

@keyframes catalog-hoof-5 {

    0%,
    14.45% {
        opacity: 0;
    }

    20.4% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-6 {

    0%,
    20% {
        opacity: 0;
    }

    27.4% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-7 {

    0%,
    27.6% {
        opacity: 0;
    }

    30.75% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-8 {

    0%,
    32.85% {
        opacity: 0;
    }

    37% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-9 {

    0%,
    37% {
        opacity: 0;
    }

    42.6% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-10 {

    0%,
    42.6% {
        opacity: 0;
    }

    48.05% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-11 {

    0%,
    48.05% {
        opacity: 0;
    }

    53.8% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-12 {

    0%,
    53.8% {
        opacity: 0;
    }

    59.7% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes catalog-hoof-13 {

    0%,
    59.7% {
        opacity: 0;
    }

    65.6% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-loader__hoof {
        animation: none;
        opacity: 1;
    }
}

.product-feed__more {
    margin-top: var(--space-6);
    text-align: center;
}

.product-feed__more[hidden] {
    display: none;
}

.catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.catalog-skeleton {
    border-radius: 2.5rem;
    border: 1px solid var(--20, rgba(0, 0, 0, 0.2));
    background: var(--bg-white-muted, #e9ece8);
    padding: var(--space-5);
    overflow: hidden;
}

.catalog-skeleton__media,
.catalog-skeleton__line {
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
}

.catalog-skeleton__media {
    aspect-ratio: 1;
    margin-bottom: var(--space-4);
    border-radius: 2rem;
}

.catalog-skeleton__line {
    height: 0.9rem;
    margin-bottom: var(--space-3);
}

.catalog-skeleton__line--title {
    width: 78%;
}

.catalog-skeleton__line--price {
    width: 42%;
    margin-bottom: 0;
}

.catalog-skeleton__media::after,
.catalog-skeleton__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 45%, transparent 90%);
    transform: translateX(-100%);
    animation: catalog-skeleton 1.3s ease-in-out infinite;
}

@keyframes catalog-skeleton {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {

    .catalog-skeleton__media::after,
    .catalog-skeleton__line::after {
        animation: none;
    }
}


@media (max-width: 1399px) {
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}




@media (max-width: 1024px) {
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 568px) {
    .product-feed .catalog-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .catalog-grid {
        gap: var(--space-3);
    }
}