
.cat-page { padding-top: 1.5rem; }
.cat-page .lead { max-width: 40rem; }
.cat-page .disclaimer { font-size: .75rem; line-height: 1.5; max-width: 42rem; margin-top: -.4rem; }
.cat-tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 1rem 0 .8rem; }
.cat-tabs::-webkit-scrollbar, .fam-chips::-webkit-scrollbar { display: none; }
.cat-tabs button, .fam-chips button, .prem-chip {
  flex: none; border: 1px solid var(--line); background: var(--ivory); color: var(--ink);
  border-radius: 999px; min-height: 40px; padding: .35rem 1rem;
  font: 500 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.cat-tabs button[aria-pressed="true"], .fam-chips button[aria-pressed="true"] {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.prem-chip { display: inline-flex; align-items: center; gap: .4rem; }
.prem-chip .star { color: var(--magenta); font-size: .85rem; letter-spacing: 0; line-height: 1; }
.prem-chip[aria-pressed="true"] { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.prem-chip[aria-pressed="true"] .star { color: #fff; }
.cat-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .4rem 0 .8rem; }
.cat-tools .search { flex: 1; min-width: 200px; }
.fam-chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .3rem; }
.cat-trust {
  display: flex; flex-wrap: wrap; gap: .55rem 1.15rem; list-style: none; margin: .15rem 0 .9rem; padding: .7rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: .82rem;
}
.cat-trust li { display: flex; align-items: center; gap: .45rem; }
.cat-trust svg { width: 18px; height: 18px; color: var(--magenta); flex: none; }
.cat-trust a { color: inherit; }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 760px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-card {
  position: relative; background: var(--ivory); border: 1px solid var(--line); border-radius: 18px;
  padding: .7rem .7rem 1rem; display: flex; flex-direction: column; gap: .35rem;
}
.cat-fig { position: relative; }
.cat-card img { width: 100%; height: 150px; object-fit: contain; background: var(--cream); border-radius: 12px; }
.prem {
  position: absolute; top: .45rem; right: .45rem; z-index: 1;
  background: var(--magenta); color: #fff; border: 0; border-radius: 999px;
  font: 600 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: .32rem .5rem;
}
.cat-card h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.1; margin: .2rem 0 0; }
.cat-card h2 a { color: inherit; text-decoration: none; }
.cat-card h2 a:hover { color: var(--magenta-deep); }
.cat-casa { margin: 0; font-size: .78rem; letter-spacing: .04em; color: var(--muted); }
.cat-fam { margin: 0; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cat-card .btn { width: 100%; justify-content: center; min-height: 42px; padding: .55rem .45rem; letter-spacing: .08em; font-size: .68rem; }
.cat-more { display: flex; justify-content: center; margin: 1.4rem 0; }
.cat-count { color: var(--muted); font-size: .85rem; }
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--cream); padding: .6rem 1rem; border-radius: 999px; font-size: .85rem; z-index: 50; }
