/* Listing page (/p) — page title strip, category chips, sort control,
   product grid (2/3/4 columns), load more, empty state. */

.listing {
  max-width: var(--bp-2xl, 1280px);
  margin: 0 auto;
  padding: 0 var(--space-4, 1rem) var(--space-8, 4rem);
}

.listing__title-strip {
  background: var(--bg-page, #FFF8F3);
  padding: var(--space-6, 2rem) var(--space-4, 1rem) var(--space-4, 1rem);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle, rgba(110, 44, 47, 0.12));
}

.listing__title-strip h1 {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fs-32, 2rem);
  color: var(--text-primary, #3B261F);
  margin: 0;
  font-weight: var(--fw-semibold, 600);
}

.listing__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) 0;
  border-bottom: 1px solid var(--border-subtle, rgba(110, 44, 47, 0.12));
}

.listing__chip-strip {
  display: flex;
  gap: var(--space-2, 0.5rem);
  overflow-x: auto;
  flex: 1 1 auto;
  scrollbar-width: thin;
  padding-bottom: var(--space-1, 0.25rem);
  -webkit-overflow-scrolling: touch;
}

.listing__chip-strip::-webkit-scrollbar {
  height: 4px;
}

.listing__chip-strip::-webkit-scrollbar-thumb {
  background: var(--border-subtle, rgba(110, 44, 47, 0.12));
  border-radius: var(--radius-pill, 999px);
}

.listing__chip {
  flex: 0 0 auto;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--fs-14, 0.875rem);
  font-weight: var(--fw-medium, 500);
  background: var(--bg-surface, #FFFCF8);
  color: var(--text-primary, #3B261F);
  border: 1px solid var(--brand-accent, #B9886C);
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast, 120ms) var(--ease-standard, ease);
}

.listing__chip:hover,
.listing__chip:focus-visible {
  background: #fff;
  text-decoration: none;
  color: var(--text-primary, #3B261F);
}

.listing__chip.is-active {
  background: var(--brand-primary, #6E2C2F);
  color: #ffffff;
  border-color: var(--brand-primary, #6E2C2F);
}

.listing__sort {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex: 0 0 auto;
}

.listing__sort label {
  font-size: var(--fs-14, 0.875rem);
  color: var(--text-muted, #7A5F58);
}

.listing__sort select {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--fs-14, 0.875rem);
  color: var(--text-primary, #3B261F);
  background: var(--bg-surface, #FFFCF8);
  border: 1px solid var(--border-strong, #BFA59A);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  cursor: pointer;
}

.listing__sort select:focus-visible {
  outline: none;
  border-color: var(--brand-primary, #6E2C2F);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(110, 44, 47, 0.45));
}

.listing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) 0;
}

@media (min-width: 768px) {
  .listing__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .listing__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.listing__load-more {
  display: flex;
  justify-content: center;
  padding: var(--space-5, 1.5rem) 0;
}

.listing__load-more button {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  background: var(--bg-surface, #FFFCF8);
  color: var(--text-primary, #3B261F);
  border: 1px solid var(--brand-accent, #B9886C);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--fs-14, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  cursor: pointer;
}

.listing__load-more button:hover,
.listing__load-more button:focus-visible {
  background: #fff;
  text-decoration: none;
}

.listing__load-more button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(110, 44, 47, 0.45));
}

.listing__empty {
  text-align: center;
  padding: var(--space-7, 3rem) var(--space-4, 1rem);
  color: var(--text-primary, #3B261F);
}

.listing__empty-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--brand-accent, #B9886C);
  margin: 0 auto var(--space-4, 1rem);
}

.listing__empty h2 {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fs-24, 1.5rem);
  margin: 0 0 var(--space-3, 0.75rem);
}

.listing__empty p {
  color: var(--text-muted, #7A5F58);
  margin: 0 auto var(--space-4, 1rem);
  max-width: 32rem;
}

.listing__empty .listing__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border: 1px solid var(--brand-accent, #B9886C);
  border-radius: var(--radius-pill, 999px);
  color: var(--text-primary, #3B261F);
  text-decoration: none;
  font-size: var(--fs-14, 0.875rem);
}

.listing__empty .listing__whatsapp svg {
  width: 16px;
  height: 16px;
  color: var(--brand-whatsapp, #25D366);
}

.listing__error {
  text-align: center;
  padding: var(--space-6, 2rem);
  color: var(--text-muted, #7A5F58);
  font-size: var(--fs-14, 0.875rem);
}