/* Ruta: /public/assets/css/tienda.css
   Tienda: categorías (izquierda) + productos (derecha). Usa tokens de theme.css. */

/* Cabecera más compacta: menos espacio en blanco arriba de la Tienda */
.tienda-section { padding-top: clamp(.75rem, 2vw, 1.5rem); }
.tienda-section .section-title { margin-bottom: 1.4rem; }

.tienda-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: start;
}

/* ---- Sidebar de categorías (izquierda) ---- */
.tienda-side {
    position: sticky; top: 88px; min-width: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 1rem; box-shadow: var(--shadow-sm);
}
.tienda-main { min-width: 0; }
.tienda-side-title {
    font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--navy); margin: 0 0 .7rem;
}
.tienda-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.tienda-cat {
    display: flex; align-items: center; gap: .55rem;
    padding: .6rem .7rem; border-radius: 10px;
    color: var(--ink); font-weight: 600; font-size: .95rem;
    transition: background .15s ease, color .15s ease;
}
.tienda-cat:hover { background: var(--cream); color: var(--navy); }
.tienda-cat.is-active { background: var(--navy); color: #fff; }
.tienda-cat-ic { font-size: 1.1rem; width: 1.5rem; text-align: center; }

/* ---- Productos (derecha) ---- */
.tienda-main-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.tienda-main-title { font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--navy); margin: 0; }
.tienda-count { color: var(--ink-soft); font-weight: 600; font-size: .9rem; }

/* Rejilla dentro de la Tienda: 2 → 3 columnas (el sidebar ya ocupa ancho) */
.tienda-main .pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) {
    .tienda-main .pcard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Responsive: sidebar pasa a chips horizontales arriba ---- */
@media (max-width: 860px) {
    .tienda-layout { grid-template-columns: minmax(0, 1fr); }
    .tienda-side { position: static; padding: .8rem; }
    .tienda-cats { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: .5rem; padding-bottom: .3rem; scrollbar-width: none; }
    .tienda-cats::-webkit-scrollbar { display: none; }
    .tienda-cat { white-space: nowrap; border: 1px solid var(--line); }
    .tienda-cat.is-active { border-color: var(--navy); }
    .tienda-main .pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}