/* Tienda — motion helpers + responsive layout */

.tienda-cats {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px;
    padding: 4px 2px 14px;
    margin: 0 -2px 24px;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10px,
        #000 calc(100% - 10px),
        transparent
    );
}

.tienda-cats::-webkit-scrollbar {
    display: none;
}

.tienda-cat {
    flex: 0 0 auto;
    scroll-snap-align: center;
    white-space: nowrap;
    transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.22s,
        border-color 0.22s,
        box-shadow 0.22s,
        color 0.22s;
}

.tienda-cat:hover {
    transform: translateY(-1px);
    border-color: rgba(251, 191, 36, 0.35);
    color: var(--head);
}

.tienda-cat.is-active {
    box-shadow: 0 0 22px rgba(251, 191, 36, 0.2);
}

.tienda-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
}

.tienda-grid.is-filtering {
    pointer-events: none;
}

.tienda-card {
    will-change: transform, opacity;
}

.tienda-card:active {
    transform: scale(0.985);
}

.tienda-empty {
    animation: tienda-empty-in 0.4s ease both;
}

@keyframes tienda-empty-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .tienda-main {
        padding-left: clamp(12px, 3vw, 20px);
        padding-right: clamp(12px, 3vw, 20px);
    }

    .tienda-toolbar {
        margin-bottom: 16px;
    }

    .tienda-hero {
        margin-bottom: 20px;
    }

    .tienda-hero__title {
        font-size: clamp(1.75rem, 8vw, 2.6rem);
    }

    .tienda-grid {
        gap: 14px !important;
    }

    .tienda-super__crown {
        top: 12px;
        right: 12px;
        padding: 5px 10px;
        font-size: 9px;
    }

    .tienda-super__media,
    .tienda-super__no-media {
        height: clamp(220px, 56vw, 340px);
    }
}

@media (max-width: 520px) {
    .tienda-grid {
        grid-template-columns: 1fr !important;
    }

    .tienda-card__body {
        padding: 14px;
    }

    .tienda-card__title {
        font-size: 1rem;
    }

    .tienda-spotlight-card__body {
        padding: 14px;
    }

    .tienda-cat {
        padding: 7px 12px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tienda-super {
        animation: none !important;
    }

    .tienda-empty {
        animation: none;
    }

    .tienda-cat,
    .tienda-card {
        transition: none;
    }
}