/* Maquiven — discovery pages (search, categories, category, brand, location). Owner: discovery vertical.
   Linked by web/search.php, categories.php, category.php, brand.php, location.php through the 'head' stack,
   after the shared stylesheets. Tokens only (no hex), mobile-first, logical properties. */

/* ---------------------------------------------------------------- page head */
.browse-head { padding-block: var(--sp-5) var(--sp-4); }
@media (min-width: 768px) { .browse-head { padding-block: var(--sp-6) var(--sp-5); } }
.browse-head__title { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--c-navy); max-width: 32ch; overflow-wrap: anywhere; }
.browse-head__lead { margin-top: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-base); max-width: 70ch; }
@media (min-width: 768px) { .browse-head__lead { font-size: var(--fs-md); } }
.browse-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); color: var(--c-muted); font-size: var(--fs-sm); }
.browse-head__meta .ico { width: 16px; height: 16px; color: var(--c-orange); }
.browse-head__meta span { display: inline-flex; align-items: center; gap: 6px; }
.browse-head__row { display: flow-root; }
.browse-head__row > .browse-head__icon { float: inline-start; margin-inline-end: var(--sp-3); margin-top: 2px; }
@media (min-width: 768px) { .browse-head__row { display: flex; align-items: flex-start; gap: var(--sp-5); } .browse-head__row > .browse-head__icon { float: none; margin: 0; } }
.browse-head__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--c-navy-tint); color: var(--c-navy); }
.browse-head__icon .ico { width: 30px; height: 30px; }
@media (min-width: 768px) { .browse-head__icon { width: 72px; height: 72px; } .browse-head__icon .ico { width: 40px; height: 40px; } }
.browse-head__nav { margin-top: var(--sp-4); }
.browse-head__nav-label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted); }

/* Chip navigation (subcategories, cities, brand categories): scrolls horizontally on phones */
.chip-nav { list-style: none; margin: 0; padding: 0; }
.chip-nav li { flex: 0 0 auto; }
.chip-nav .chip { min-height: 36px; }
.chip-nav .chip[aria-current="page"] { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.chip__count { font-size: var(--fs-secondary); font-weight: var(--fw-semibold); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.chip[aria-current="page"] .chip__count, .chip--active .chip__count { color: var(--c-on-navy-muted); }

/* ---------------------------------------------------------------- sub-bar with the search box */
.browse-bar { margin-bottom: var(--sp-4); }
@media (min-width: 768px) { .browse-bar { margin-bottom: var(--sp-5); } }
.browse-search { position: relative; display: flex; align-items: stretch; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }
.browse-search__icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; display: inline-flex; }
.browse-search__icon .ico { width: 20px; height: 20px; }
.browse-search__input { flex: 1 1 auto; min-width: 0; padding-inline-start: 42px; min-height: var(--field-h); font-size: 16px; }
.browse-search__submit { flex: 0 0 auto; }
@media (max-width: 767.98px) { .browse-search__submit { width: var(--field-h); padding: 0; } }
.browse-search__submit, .browse-bar__trigger .btn { min-height: var(--field-h); }
@media (min-width: 768px) { .browse-search { max-width: 720px; } .browse-search__input { min-height: 48px; font-size: var(--fs-base); } .browse-search__submit { min-height: 48px; padding-inline: var(--sp-6); } }
.browse-bar__trigger { flex: 0 0 auto; display: inline-flex; }
.browse-bar__trigger .btn, .browse__trigger .btn { white-space: nowrap; }
@media (min-width: 1024px) { .browse-bar__trigger, .browse__trigger { display: none; } }

/* ---------------------------------------------------------------- results */
.browse { padding-bottom: var(--sp-10); }
.browse__sticky { max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: var(--sp-2); }
.browse__results { min-width: 0; }
.results-head__count { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.results-head__count strong { color: var(--c-navy); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.results-head__range { font-size: var(--fs-xs); color: var(--c-muted); }
.results-head__tools .sort-form { display: flex; align-items: center; gap: var(--sp-2); }
.results-head__tools .sort-form .field { margin: 0; }
.results-head__tools .sort-form .select { min-height: var(--field-h); font-size: 16px; padding-block: 6px; max-width: 13.5rem; }
@media (max-width: 479.98px) {
  .results-head { align-items: flex-start; }
  .results-head__tools { width: 100%; margin-inline-start: 0; }
  .results-head__tools .sort-form { flex: 1 1 auto; }
  .results-head__tools .sort-form .field, .results-head__tools .sort-form .select { width: 100%; max-width: none; }
}
.browse__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.browse__chips:empty { display: none; }
.browse__chips .active-filters { flex: 0 1 auto; }
/* block M-99: active filters as AutoYa chips above the results — 44 px, orange border, navy text, a 44 × 44 X on each */
.active-filters .chip--active { min-height: var(--touch); padding: 0 0 0 14px; gap: 0; border: 2px solid var(--c-publish); background: var(--c-orange-tint); color: var(--c-navy); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.active-filters .chip__remove { width: var(--touch); height: var(--touch); margin: -2px -2px -2px 0; border-radius: var(--r-pill); }
.active-filters .chip__remove::after { content: none; }
.active-filters .chip__remove:hover { color: var(--c-orange-text); }
.active-filters .chip__remove .ico { width: 16px; height: 16px; }
.browse__quick .chip { min-height: 32px; }
.browse__quick .ico { color: var(--c-orange); }
.browse__grid.grid-cards--list { gap: var(--sp-3); }
.browse__pagination { margin-top: var(--sp-8); }
.browse__latest { margin-top: var(--sp-8); }
.browse__latest-title { font-size: var(--fs-section); line-height: 1.3; letter-spacing: normal; margin-bottom: var(--sp-4); color: var(--c-navy); }
.browse .empty-state { margin-top: var(--sp-2); }
/* block M-83: a category without any listing shows only its message, centred */
.browse--none .empty-state { max-width: 640px; margin: var(--sp-6) auto 0; }
/* Prices never break inside the amount; the "Negociable" chip wraps to its own line instead */
.browse .card__price, .rows-mobile .card__price, .carousel .card__price { flex-wrap: wrap; row-gap: 2px; white-space: nowrap; }
@media (max-width: 767.98px) {
  .browse .card--row .card__title { font-size: 15px; }
  .browse .card--row .card__price { font-size: var(--fs-card-price); }
  .browse .card--row .card__meta { font-size: var(--fs-secondary); }
}
/* Sidebar range inputs are narrow: tighter padding so "Año desde" fits */
.browse__aside .filters__range .input { padding-inline: 10px; font-size: var(--fs-sm); }

/* No-JS: "Filtros" links to #filters-sheet; show the sheet inline when targeted */
.sheet:target:not([open]) { display: block; position: static; height: auto; max-height: none; width: 100%; margin: 0 0 var(--sp-6); border: 1px solid var(--c-border); border-radius: var(--r-lg); }

/* ---------------------------------------------------------------- link rows + FAQ (search page) */
.browse-links { border-top: 1px solid var(--c-border); background: var(--c-surface); }
.browse-links__title, .browse-faq h2 { font-size: var(--fs-section); color: var(--c-navy); margin-bottom: var(--sp-4); }
.browse-links__list { list-style: none; margin: 0; padding: 0; }
.browse-links__list .chip { min-height: 36px; }
.browse-links__list .ico { color: var(--c-orange); }
.browse-links__count { font-size: var(--fs-secondary); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 820px; }
.faq-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--touch); padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-semibold); color: var(--c-navy); cursor: pointer; list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:focus-visible { box-shadow: var(--sh-focus); border-radius: var(--r-md); outline: none; }
.faq-item__chev { flex: 0 0 auto; color: var(--c-muted); transition: transform var(--t-fast) var(--ease); }
.faq-item[open] .faq-item__chev { transform: rotate(180deg); }
.faq-item > p { padding: 0 var(--sp-4) var(--sp-4); color: var(--c-text-2); }

/* ---------------------------------------------------------------- categories index */
.cat-cards { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 1280px) { .cat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.cat-card:hover, .cat-card:focus-within { border-color: var(--c-orange); box-shadow: var(--sh-md); }
@media (prefers-reduced-motion: no-preference) { .cat-card:hover { transform: translateY(-2px); } }
.cat-card__head { display: flex; align-items: center; gap: var(--sp-4); }
.cat-card__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-lg); background: var(--c-navy-tint); color: var(--c-navy); transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.cat-card__icon .ico, .cat-card__icon .ico.ico--xl { width: 44px; height: 44px; }
.cat-card:hover .cat-card__icon { color: var(--c-orange); background: var(--c-orange-tint); }
.cat-card__title { font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0; }
.cat-card__title a { color: var(--c-navy); text-decoration: none; }
.cat-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); }
.cat-card__title a:focus-visible { outline: none; }
.cat-card__title a:focus-visible::after { box-shadow: var(--sh-focus); }
.cat-card__count { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--c-muted); }
.cat-card__text { color: var(--c-text-2); font-size: var(--fs-sm); }
.cat-card__subs { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.cat-card__subs .chip { min-height: 32px; }
.cat-card__foot { margin-top: auto; position: relative; z-index: 1; }
.cat-card__foot .link-arrow { min-height: 0; }

.browse-extra { border-top: 1px solid var(--c-border); }
.browse-extra + .browse-extra { border-top: 0; padding-top: 0; }

/* ---------------------------------------------------------------- location page */
.state-tiles { margin-top: var(--sp-2); }
.state-tiles .tile__count { font-size: var(--fs-secondary); color: var(--c-muted); }
.geo-cloud { list-style: none; margin: 0; padding: 0; }
.geo-cloud .chip { min-height: 36px; }
.geo-cloud .chip--muted { opacity: .8; }
.state-cats { margin-bottom: var(--sp-6); }
@media (min-width: 1024px) { .state-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile--active { border-color: var(--c-orange); background: var(--c-orange-tint); }
.tile--active .tile__icon { color: var(--c-orange); }
.state-cats .browse-links__title { margin-bottom: var(--sp-3); }
@media (max-width: 767.98px) {
  .state-tiles { display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 2px; }
  .state-tiles::-webkit-scrollbar { display: none; }
  .state-tiles > .tile { flex: 0 0 132px; min-height: 96px; scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- touch targets on phones (DESIGN §2 intro, §6)
   components.css grows link chips to --touch below md; the pinned chip heights above are more specific, so the
   same rule is repeated for them here */
@media (max-width: 767.98px) {
  .chip-nav .chip, .browse__quick .chip, .browse-links__list .chip, .cat-card__subs .chip, .geo-cloud .chip { min-height: var(--touch); }
}