/* ==========================================================================
   Category listing page — extends main.css design tokens.
   Load main.css first, then this file.
   ========================================================================== */

/* ---------- Category hero ---------- */
.cat-hero {
  position: relative; border-radius: 1.5rem; overflow: hidden;
  min-height: 11rem; display: flex; align-items: center; padding: 2rem;
}
.cat-hero-img { position: absolute; inset: 0; border-radius: 0; }
.cat-hero-img span { background: rgba(255,255,255,0.4); }
.cat-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(251,250,246,0.94) 0%, rgba(251,250,246,0.55) 55%, rgba(251,250,246,0.15) 100%);
}
.cat-hero > .relative { position: relative; z-index: 2; }

/* ---------- Filter sidebar ---------- */
.filter-group { padding: 1.25rem 0; border-bottom: 1px solid rgba(22,36,28,0.08); }
.filter-group:first-child { padding-top: 0; }
.filter-group-title { font-size: .8rem; font-weight: 700; color: #16241C; margin-bottom: .75rem; }
.filter-check {
  display: flex; align-items: center; gap: .6rem; font-size: .875rem; color: #3A493F;
  padding: .35rem 0; cursor: pointer;
}
.filter-check input { width: 1.05rem; height: 1.05rem; border-radius: .3rem; accent-color: #2F6B4F; }
.filter-check .count { margin-left: auto; font-size: .75rem; color: #6B7268; font-family: 'JetBrains Mono', monospace; }

.price-inputs { display: flex; align-items: center; gap: .5rem; }
.price-input {
  width: 100%; height: 2.4rem; border-radius: .6rem; border: 1px solid rgba(22,36,28,0.15);
  padding: 0 .7rem; font-size: .85rem;
}
.price-input:focus { outline: none; border-color: #2F6B4F; }

.chip.active-price { background: #2F6B4F; color: #fff; }

/* ---------- Toolbar ---------- */
.listing-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-open-btn {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700;
  padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(22,36,28,0.15);
}
.sort-select {
  height: 2.5rem; border-radius: .7rem; border: 1px solid rgba(22,36,28,0.15);
  padding: 0 .7rem; font-size: .875rem; background: #fff;
}
.sort-select:focus { outline: none; border-color: #2F6B4F; }

.active-filter-chip {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600;
  background: #EEF4EF; color: #255840; padding: .35rem .5rem .35rem .85rem; border-radius: 999px;
}
.active-filter-chip-remove { display: flex; width: 1.1rem; height: 1.1rem; align-items: center; justify-content: center; border-radius: 999px; background: rgba(47,107,79,0.15); }

/* ---------- Grid ---------- */
.listing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (min-width: 640px) { .listing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .listing-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.listing-grid .card-product { flex: none; width: 100%; }
.listing-grid .card-media { height: 9rem; }
@media (min-width: 640px) { .listing-grid .card-media { height: 11rem; } }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; gap: .4rem; justify-content: center; margin-top: 2.5rem; }
.page-btn {
  min-width: 2.3rem; height: 2.3rem; border-radius: .6rem; font-size: .85rem; font-weight: 600;
  color: #3A493F; transition: background-color .15s ease;
}
.page-btn:hover:not(:disabled) { background: rgba(22,36,28,0.06); }
.page-btn.active { background: #2F6B4F; color: #fff; }
.page-btn:disabled { opacity: .35; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
  padding: .85rem 1.4rem; border-radius: 999px; border: 1px solid rgba(22,36,28,0.15); color: #1F2E24;
}
.btn-secondary:hover { background: rgba(22,36,28,0.05); }

/* ---------- Empty state (sin resultados) ---------- */
.listing-empty { background: #fff; border-radius: 1.1rem; padding: 4rem 1.5rem; text-align: center; box-shadow: 0 2px 10px rgba(22,36,28,0.06); }

.filter-sheet { position: fixed; inset: 0; z-index: 60; visibility: hidden; display: flex; align-items: flex-end; }
.filter-sheet.open { visibility: visible; }
.filter-sheet-backdrop { position: absolute; inset: 0; background: rgba(22,36,28,0.45); opacity: 0; transition: opacity .2s ease; }
.filter-sheet.open .filter-sheet-backdrop { opacity: 1; }
.filter-sheet-panel {
  position: relative; z-index: 1; width: 100%; max-height: 85vh; background: #FBFAF6;
  border-radius: 1.25rem 1.25rem 0 0; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .22s ease;
}
.filter-sheet.open .filter-sheet-panel { transform: translateY(0); }