/* /panales index: one bordered list per brand, línea + talle per row.
   Calm rows, generous touch targets — no card grid. */

/* The marca × talle links, inside the marca's own section rather than in the
   directory at the top: as three more rows up there they pushed the catalog
   itself below the fold on a phone, which is V10's finding about the portada
   arriving on the page the rows were meant to serve. Here they sit between
   the marca's heading and its productos, which is where somebody scanning
   that marca is looking anyway. */
.brand-sizes { display: flex; flex-direction: column; gap: var(--sp-2xs); margin: 0 0 var(--sp-md); }
.brand-sizes .chips { margin-top: 0; }

.catalog {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
.catalog-item { border-bottom: 1px solid var(--border); }
.catalog-item:last-child { border-bottom: none; }
.catalog-item a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-md); padding: var(--sp-sm) var(--sp-md); min-height: 44px;
  color: var(--ink); text-decoration: none;
  transition: background-color 150ms var(--ease-out);
}
.catalog-item a:hover { background: var(--surface); color: var(--ink); }
.catalog-item .line-name { font-weight: 600; }
.catalog-item .talle { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }