/* ============================================================
   catalogo.css — barra de filtros, grilla, tarjeta y modal de producto
   ============================================================ */
.toolbar { display: grid; gap: var(--space-3); margin-block: var(--space-5) var(--space-4); }
@media (min-width: 768px) { .toolbar { grid-template-columns: 1fr 240px; } }

.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, 1fr); } }

/* Tarjeta de producto */
.card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-media { position: relative; aspect-ratio: 1 / 1; background: color-mix(in srgb, var(--cat-color, var(--color-line)) 45%, var(--color-surface)); display: flex; align-items: center; justify-content: center; font-size: 3rem; cursor: pointer; border: 0; padding: 0; width: 100%; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-badges { position: absolute; top: var(--space-2); left: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.card-body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; padding: var(--space-3) var(--space-4) var(--space-4); }
.card-title { font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.card-price { font-weight: 700; font-size: 1.1rem; }
.card-body .btn { margin-top: auto; }
.card.is-soldout .card-media img { opacity: .5; filter: grayscale(.6); }

/* Modal de producto */
.product-modal { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .product-modal { grid-template-columns: 1fr 1fr; } }
.carousel { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--color-line); touch-action: pan-y; }
.carousel-track { display: flex; height: 100%; transition: transform .3s ease; }
.carousel-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 5rem; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; cursor: pointer; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.carousel-btn.prev { left: var(--space-2); } .carousel-btn.next { right: var(--space-2); }
.carousel-dots { position: absolute; bottom: var(--space-2); left: 0; right: 0; display: flex; justify-content: center; gap: var(--space-2); }
.carousel-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: var(--color-surface); opacity: .6; cursor: pointer; }
.carousel-dots button[aria-current="true"] { opacity: 1; background: var(--color-primary); }
.stock-low { color: var(--color-warning); font-weight: 600; font-size: .9rem; }