/* Shirts catalog (browse-only). Phone first; widens on desktop. */
.shirts-wrap { max-width: 72rem; }
.cat-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cat-filter button {
  padding: 0.45rem 0.8rem; border: 1px solid var(--line2); border-radius: 999px;
  background: transparent; color: var(--mute2); font: inherit; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.cat-filter button.is-on { border-color: #fff; color: #fff; }
.shirt-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem;
}
.shirt-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: 0.75rem; background: #0a0a0a; overflow: hidden;
}
.shirt-card .ph { aspect-ratio: 4/5; background: #111; display: block; }
.shirt-card .ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shirt-card .body { padding: 0.6rem 0.65rem 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.shirt-card strong { font-size: 0.85rem; line-height: 1.2; }
.shirt-card .sub { font-size: 0.72rem; color: var(--mute2); line-height: 1.3; }
.shirt-card .sws { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin-top: 0.1rem; }
.shirt-card .sw {
  width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1px solid #444;
  background: #222 center/cover; padding: 0; cursor: pointer;
}
.shirt-card .sw.is-on { outline: 1px solid #fff; outline-offset: 1px; }
.shirt-card .sw-more { font-size: 0.66rem; color: var(--mute2); }
.shirt-card .btn { margin-top: auto; width: 100%; padding: 0.65rem 0.5rem; font-size: 0.64rem; text-decoration: none; }
.more-btn { align-self: center; margin-top: 0.4rem; }
@media (min-width: 640px) { .shirt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .shirt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; } }
.crumbs { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--mute2); }
.crumbs a { color: var(--mute2); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.cat-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.cat-tiles a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: #fff;
  border: 1px solid var(--line); border-radius: 0.75rem; background: #0a0a0a; overflow: hidden;
}
.cat-tiles a:hover, .cat-tiles a:focus-visible { border-color: #fff; }
.cat-tiles .ph { aspect-ratio: 1/1; background: #f2f2f2; display: block; }
.cat-tiles .ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-tiles .nm { padding: 0.55rem 0.65rem 0.1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cat-tiles .ct { padding: 0 0.65rem 0.6rem; font-size: 0.7rem; color: var(--mute2); }
.filter-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.filter-row select {
  flex: 1; min-width: 0; padding: 0.6rem 0.7rem; border-radius: 0.6rem; border: 1px solid var(--line2);
  background: var(--field, #111); color: #fff; font: inherit; font-size: 0.8rem;
}
#browse { display: flex; flex-direction: column; gap: 0.6rem; }
#browse[hidden] { display: none; }
.quote-note { margin: 0; }
.shirt-card .grp { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.shirt-card .btn--ghost { background: transparent; color: #fff; }
@media (min-width: 640px) { .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filter-row select { flex: 0 1 16rem; } }
@media (min-width: 960px) { .cat-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; } }
.cat-tiles[hidden], .cat-filter[hidden], .shirt-grid[hidden] { display: none; }