/* etiquetas-filtro.css
   Estilos del filtro de etiquetas y layout del catálogo.
   Requiere las variables definidas en css/modern.css. */

.catalog-section { min-height: 500px; }

.results-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 45px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.results-bar h2 { margin: 8px 0 0; font-family: var(--display); font-size: clamp(36px, 4vw, 58px); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.results-bar p { margin: 0; color: var(--muted); }
.results-bar p strong { color: var(--ink); font-size: 24px; }

.empty-state { max-width: 620px; margin: 50px auto; text-align: center; }
.empty-state > span { color: #ddd; font-family: var(--display); font-size: 100px; font-weight: 700; line-height: 1; }
.empty-state h2 { margin: 20px 0 8px; font-family: var(--display); font-size: 42px; text-transform: uppercase; }
.empty-state p { margin: 0 0 28px; color: var(--muted); }

.pagination { margin-top: 70px; display: flex; align-items: center; justify-content: center; gap: 28px; }
.pagination a { padding: 13px 18px; border: 1px solid var(--black); font-family: var(--display); font-weight: 700; text-transform: uppercase; }
.pagination a:hover { background: var(--black); color: var(--white); }
.pagination span { color: var(--muted); font-size: 13px; }

.catalog-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 50px; align-items: start; }
.catalog-results { min-width: 0; }
.catalog-results .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.catalog-filters { position: sticky; top: 118px; padding: 26px; border: 1px solid var(--line); background: var(--soft); }
.catalog-filters__heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 28px; }
.catalog-filters__heading a { color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase; }
.catalog-filter-label, .catalog-tag-filter legend { display: block; margin-bottom: 10px; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.catalog-filter-select { width: 100%; height: 48px; margin-bottom: 28px; padding: 0 38px 0 13px; border: 1px solid #cfcfcf; border-radius: 0; outline: 0; background: var(--white); color: var(--ink); font-family: var(--body); cursor: pointer; }
.catalog-filter-select:focus { border-color: var(--accent); }
.catalog-tag-filter { min-width: 0; margin: 0; padding: 0; border: 0; }
.catalog-filter-hint { margin: -2px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.catalog-filter-hint.is-error { color: var(--clio); font-weight: 600; }
.catalog-tag-filter__options { max-height: 420px; overflow-y: auto; padding-right: 5px; scrollbar-width: thin; }
.catalog-tag-option { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; border-bottom: 1px solid #ddd; cursor: pointer; }
.catalog-tag-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.catalog-tag-option span { min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.catalog-tag-option small { color: var(--muted); font-size: 11px; }
.catalog-tag-option input:checked + span { color: var(--accent); }
.catalog-filters__empty { margin: 0; color: var(--muted); font-size: 13px; }
.catalog-filters__submit { margin-top: 28px; border: 0; cursor: pointer; }
.catalog-filters__clear, .catalog-filters__all { display: block; margin-top: 16px; color: var(--muted); font-family: var(--display); font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; text-transform: uppercase; }
.catalog-filters__clear { text-decoration: underline; text-underline-offset: 4px; }
.catalog-filters__all { padding-top: 16px; border-top: 1px solid #d5d5d5; color: var(--ink); }
.catalog-filters__clear:hover, .catalog-filters__all:hover, .catalog-filters__heading a:hover { color: var(--accent); }

@media (max-width: 1180px) {
  .catalog-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 30px; }
  .catalog-results .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; gap: 45px; }
  .catalog-filters { position: static; }
  .catalog-results .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .results-bar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .results-bar h2 { font-size: 37px; }
  .catalog-filters { padding: 20px; }
  .catalog-tag-filter__options { max-height: 320px; }
  .pagination { gap: 8px; }
  .pagination a { padding: 10px; font-size: 11px; }
}