/* catalog.html — Cap Catalog page
   Depends on: base.css, nav.css, components.css
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Page layout ─────────────────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem }
h1         { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: .4rem }
.subtitle  { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem }

/* ── Guest banner ────────────────────────────────────────────────────────── */
.guest-banner {
  background: linear-gradient(135deg, rgba(200,169,110,.1), rgba(124,185,168,.08));
  border: 1px solid rgba(200,169,110,.25);
  border-radius: 10px;
  padding: 1rem 1.4rem;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.guest-banner p          { font-size: .85rem; color: var(--text); line-height: 1.5 }
.guest-banner p strong   { color: var(--accent) }

.signin-prompt {
  background: var(--accent); color: #111; border: none;
  padding: .4rem .9rem; border-radius: 6px;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: background .15s;
}
.signin-prompt:hover { background: var(--accent2) }

/* ── Filter row ──────────────────────────────────────────────────────────── */
.filter-row { display: flex; flex-direction: column; gap: .75rem; margin-bottom: .75rem }

.filters     { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem }
.filter-chip { background: none; border: 1px solid var(--border); color: var(--muted); padding: .35rem .85rem; border-radius: 20px; cursor: pointer; font-size: .8rem; transition: all .15s }
.filter-chip:hover,
.filter-chip.active { background: rgba(200,169,110,.12); color: var(--accent); border-color: var(--accent) }

.filter-selects { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .5rem }
.filter-select  {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .4rem .75rem;
  border-radius: 8px;
  font-size: .82rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s;
  appearance: none;
  padding-right: 1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
}
.filter-select:focus    { outline: none; border-color: var(--accent) }
.filter-select.has-value { border-color: var(--accent); color: var(--accent); background-color: rgba(200,169,110,.07) }

.search-wrap       { width: 100% }
.search-wrap input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .6rem 1rem;
  border-radius: 10px;
  font-size: .9rem;
  font-family: inherit;
}
.search-wrap input:focus { outline: none; border-color: var(--accent) }

/* ── Grid layout ─────────────────────────────────────────────────────────── */
.layout          { display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; align-items: start }
.layout.no-panel { grid-template-columns: 1fr }
.grid            { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1.2rem }

/* ── Cap cards ───────────────────────────────────────────────────────────── */
.cap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: visible;
  transition: border-color .15s, transform .15s;
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column;
}
.cap-card:hover  { border-color: var(--accent); transform: translateY(-2px) }
.cap-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(200,169,110,.2) }

.cap-img-wrap           { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface2); border-radius: 12px 12px 0 0; flex-shrink: 0 }
.cap-img-wrap img       { width: 100%; height: 100%; object-fit: cover }
.cap-img-placeholder    { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem }

.season-badge { position: absolute; top: .5rem; left: .5rem; font-size: .65rem; font-weight: 600; padding: .2rem .5rem; border-radius: 10px }
.sp-spring    { background: rgba(120,190,100,.2); color: #78be64 }
.sp-summer    { background: rgba(230,180,50,.2);  color: #e6b432 }
.sp-fall      { background: rgba(210,120,50,.2);  color: #d27832 }
.sp-winter    { background: rgba(100,160,220,.2); color: #64a0dc }
.sp-all-season { background: rgba(124,185,168,.2); color: var(--teal) }

.owner-badge { position: absolute; top: .5rem; right: .5rem; background: rgba(0,0,0,.6); color: var(--muted); font-size: .6rem; padding: .2rem .45rem; border-radius: 8px }

/* ── Wishlist heart button ─────────────────────────────────────────────── */
.wish-btn {
  position: absolute; bottom: .5rem; right: .5rem;
  background: rgba(0,0,0,.55); border: none; cursor: pointer;
  color: var(--muted); font-size: 1.1rem; line-height: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, transform .15s;
  z-index: 2;
}
.wish-btn:hover { background: rgba(0,0,0,.75); transform: scale(1.15) }
.wish-btn.wished { color: #e74c6f; background: rgba(0,0,0,.7) }

/* Modal wishlist button */
.cdm-btn-wish {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); padding: .45rem .9rem; border-radius: 8px;
  font-size: .8rem; cursor: pointer; transition: all .15s;
}
.cdm-btn-wish:hover { border-color: #e74c6f; color: #e74c6f }
.cdm-btn-wish.wished { border-color: #e74c6f; color: #e74c6f; background: rgba(231,76,111,.08) }

.cap-body     { padding: .9rem; display: flex; flex-direction: column; flex: 1 }
.cap-name     { font-weight: 600; font-size: .95rem; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cap-desc     { font-size: .78rem; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .5rem; min-height: 2.2rem }
.cap-meta-row { min-height: 1.2rem; margin-bottom: .4rem; font-size: .7rem; color: var(--muted) }

.color-dots-wrap { min-height: 1.4rem; margin-bottom: .55rem; display: flex; align-items: center }
.color-dots      { display: flex; gap: .3rem; flex-wrap: wrap }
.color-dot       { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15) }

.cap-footer   { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto }
.cap-category { font-size: .7rem; color: var(--muted); text-transform: capitalize }

.add-btn          { background: var(--accent); color: #111; border: none; padding: .35rem .75rem; border-radius: 6px; font-size: .75rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity .15s }
.add-btn:hover    { opacity: .85 }
.add-btn:disabled { opacity: .4; cursor: default }
.add-btn.added    { background: var(--teal); color: #111 }

/* ── Collectors ──────────────────────────────────────────────────────────── */
.cap-collectors-row { min-height: 1.8rem; margin-top: .55rem; display: flex; align-items: center; position: relative }
.comment-count-tag  { position: absolute; bottom: .5rem; right: .5rem; background: rgba(0,0,0,.65); color: var(--teal); font-size: .62rem; padding: .2rem .45rem; border-radius: 6px; display: flex; align-items: center; gap: .25rem }

.collectors-btn { display: inline-flex; align-items: center; gap: .35rem; background: rgba(200,169,110,.1); border: 1px solid rgba(200,169,110,.3); color: var(--accent); font-size: .72rem; font-weight: 600; padding: .25rem .6rem; border-radius: 6px; cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap }
.collectors-btn:hover { background: rgba(200,169,110,.2); border-color: var(--accent) }

.collectors-popover {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  min-width: 200px; max-width: 260px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 10px;
  padding: .75rem; z-index: 100;
  box-shadow: 0 -4px 20px rgba(0,0,0,.75);
  display: flex; flex-direction: column; gap: .4rem;
}
.collectors-popover::after { content: ''; position: absolute; top: 100%; left: 1rem; border: 5px solid transparent; border-top-color: var(--border2) }
.collectors-popover-title  { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; margin-bottom: .15rem }
.collectors-popover-list   { display: flex; flex-direction: column; gap: .3rem; max-height: 200px; overflow-y: auto }
.collectors-popover-item   { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text); font-size: .8rem; transition: border-color .15s }
.collectors-popover-item:hover { border-color: var(--accent) }
.collectors-popover-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--teal)); display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: #111; flex-shrink: 0 }
.collectors-popover-anon        { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; font-size: .8rem; color: var(--muted) }
.collectors-popover-anon-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--border2); display: flex; align-items: center; justify-content: center; font-size: .65rem; flex-shrink: 0 }

/* ── Comment panel ───────────────────────────────────────────────────────── */
.comment-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: sticky; top: 1rem;
  max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column; overflow: hidden;
}
.panel-header   { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); flex-shrink: 0 }
.panel-cap-name { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.panel-meta     { font-size: .75rem; color: var(--muted) }

.comments-list { flex: 1; overflow-y: auto; padding: .75rem }
.comment-item  { padding: .75rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; margin-bottom: .6rem }
.comment-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem }
.comment-author { font-size: .78rem; font-weight: 600; color: var(--accent) }
.comment-time   { font-size: .68rem; color: var(--muted) }
.comment-body   { font-size: .82rem; color: var(--text); line-height: 1.5; word-break: break-word }
.comment-del    { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .7rem; padding: .1rem .3rem; border-radius: 3px; transition: color .15s }
.comment-del:hover { color: var(--danger) }
.no-comments    { text-align: center; padding: 2rem; color: var(--muted); font-size: .82rem }

.comment-form          { padding: .75rem; border-top: 1px solid var(--border); flex-shrink: 0 }
.comment-form textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: .6rem .8rem; font-size: .82rem; font-family: inherit; resize: vertical; min-height: 70px; max-height: 150px; transition: border-color .15s }
.comment-form textarea:focus { outline: none; border-color: var(--accent) }
.comment-form-footer   { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem }
.char-count            { font-size: .68rem; color: var(--muted) }
.submit-comment        { background: var(--accent); color: #111; border: none; padding: .4rem .9rem; border-radius: 6px; font-size: .78rem; font-weight: 700; cursor: pointer; transition: opacity .15s }
.submit-comment:hover    { opacity: .85 }
.submit-comment:disabled { opacity: .4; cursor: default }

.guest-comment-notice   { text-align: center; padding: 1.5rem; color: var(--muted); font-size: .82rem }
.guest-comment-notice a { color: var(--teal) }

.collectors-section { border-bottom: 1px solid var(--border); padding: .6rem .75rem }
.collectors-header  { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; margin-bottom: .5rem }
.collectors-list    { display: flex; flex-wrap: wrap; gap: .4rem }
.collector-chip     { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: .2rem .65rem; font-size: .75rem; color: var(--text); text-decoration: none; transition: border-color .15s, color .15s }
.collector-chip:hover { border-color: var(--accent); color: var(--accent) }
.collector-chip.anon  { color: var(--muted); cursor: default }

.panel-empty      { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 2rem; color: var(--muted); text-align: center }
.panel-empty .icon { font-size: 2rem; margin-bottom: .75rem }

.panel-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 49 }

/* ── Cap Detail Modal ────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: flex-start; justify-content: center; z-index: 200; padding: 2rem 1rem; overflow-y: auto }
.modal-overlay.hidden { display: none }

.cdm            { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 500px; margin: auto }
.cdm-header     { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border) }
.cdm-title      { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; margin-right: .5rem }
.cdm-close      { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: .2rem .5rem; border-radius: 4px; line-height: 1; flex-shrink: 0 }
.cdm-close:hover { color: var(--text) }
.cdm-body       { padding: 1.2rem }
.cdm-img-wrap   { position: relative; margin-bottom: 1rem }
.cdm-img        { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block }
.cdm-img-placeholder { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 5rem; background: var(--surface2); border-radius: 10px; margin-bottom: 1rem }
.cdm-stock-attrib {
  position: absolute; bottom: .55rem; left: .55rem;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: .7rem; padding: .22rem .55rem;
  border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  max-width: calc(100% - 1.1rem);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cdm-stock-attrib a       { color: inherit; text-decoration: none }
.cdm-stock-attrib a:hover { text-decoration: underline }
.cdm-name       { font-size: 1.15rem; font-weight: 700; margin-bottom: .3rem }
.cdm-owner      { font-size: .8rem; color: var(--muted); margin-bottom: .75rem }
.cdm-badges     { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem }
.cdm-badge      { padding: .25rem .6rem; border-radius: 6px; font-size: .72rem; font-weight: 600 }
.cdm-badge-cat  { background: rgba(200,169,110,.15); color: var(--accent) }
.cdm-badge-style { background: rgba(124,185,168,.12); color: var(--teal) }
.cdm-section       { margin-bottom: 1rem }
.cdm-section-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; margin-bottom: .45rem }
.cdm-desc          { font-size: .88rem; color: var(--text); line-height: 1.6 }
.cdm-colors        { display: flex; flex-wrap: wrap; gap: .4rem }
.cdm-color-chip    { display: flex; align-items: center; gap: .35rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: .2rem .6rem; font-size: .75rem }
.cdm-color-dot     { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0 }
.cdm-details       { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem }
.cdm-actions       { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border) }
.cdm-btn-add       { background: var(--accent); color: #111; border: none; padding: .5rem 1.1rem; border-radius: 8px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: opacity .15s; display: inline-flex; align-items: center; gap: .4rem }
.cdm-btn-add:hover    { opacity: .85 }
.cdm-btn-add:disabled { opacity: .4; cursor: default }
.cdm-btn-add.added    { background: var(--teal) }
.cdm-btn-link         { background: none; border: 1px solid var(--border); color: var(--muted); padding: .5rem 1rem; border-radius: 8px; font-size: .85rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; transition: border-color .15s, color .15s }
.cdm-btn-link:hover   { color: var(--text); border-color: var(--accent) }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr }
  .comment-panel {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    max-height: 60vh; border-radius: 12px 12px 0 0;
    z-index: 50; transform: translateY(100%); transition: transform .3s ease;
  }
  .comment-panel.open { transform: translateY(0) }
}
@media (max-width: 640px) {
  .nav-logo img { height: 80px !important }
  .logo-spacer  { height: 24px }
}
@media (max-width: 420px) {
  .container { padding: 1.25rem 1rem }
  h1         { font-size: 1.2rem }
}

/* ── Suggest-a-Cap ─────────────────────────────────────────────────────────
   Header button (next to the page title) + a softer bottom prompt + modal
   form. Bottom prompt sits below the grid so it catches users who scrolled
   the whole catalog without finding what they wanted. */

.catalog-title-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
}
.suggest-cap-btn {
  background: var(--accent); color: #111;
  border: none; padding: .55rem 1.1rem; border-radius: 8px;
  font-size: .85rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity .15s;
}
.suggest-cap-btn:hover    { opacity: .85 }
.suggest-cap-btn:disabled { opacity: .55; cursor: default }
.suggest-cap-btn-secondary {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
}
.suggest-cap-btn-secondary:hover { background: rgba(200,169,110,.1) }

.suggest-prompt {
  margin-top: 2.5rem; padding: 1.25rem 1.4rem;
  background: linear-gradient(135deg, rgba(200,169,110,.08), rgba(124,185,168,.04));
  border: 1px dashed rgba(200,169,110,.4); border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.suggest-prompt-title { font-weight: 700; color: var(--text); margin-bottom: .25rem }
.suggest-prompt-body  { font-size: .85rem; color: var(--muted); line-height: 1.5; max-width: 520px }

/* Modal */
.suggest-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.suggest-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border);
  font-size: 1.05rem; font-weight: 700; color: var(--text);
}
.suggest-modal-close {
  background: none; border: none; color: var(--muted);
  font-size: 1.1rem; cursor: pointer; padding: .25rem .5rem;
  border-radius: 6px; transition: color .15s, background .15s;
}
.suggest-modal-close:hover { color: var(--text); background: var(--surface2) }
.suggest-modal-body { padding: 1.25rem }
.suggest-label {
  display: block; font-size: .78rem; font-weight: 600; color: var(--text2);
  margin: .9rem 0 .35rem;
}
.suggest-label:first-of-type { margin-top: 0 }
.suggest-required { color: var(--accent) }
.suggest-hint     { color: var(--muted); font-weight: 400; font-size: .72rem }
.suggest-modal-body input,
.suggest-modal-body textarea {
  width: 100%; padding: .55rem .7rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text);
  font-size: .88rem; font-family: inherit;
  transition: border-color .15s;
}
.suggest-modal-body input:focus,
.suggest-modal-body textarea:focus {
  outline: none; border-color: var(--accent);
}
.suggest-modal-body textarea { resize: vertical; min-height: 70px }
.suggest-status {
  margin-top: .9rem; padding: .55rem .75rem; border-radius: 6px;
  font-size: .8rem; min-height: 1em;
}
.suggest-status:empty { padding: 0; min-height: 0 }
.suggest-status-ok   { background: rgba(124,185,168,.12); color: var(--teal); border: 1px solid rgba(124,185,168,.3) }
.suggest-status-err  { background: rgba(224,82,82,.1);    color: var(--danger,#e05); border: 1px solid rgba(224,82,82,.3) }
.suggest-status-info { background: rgba(200,169,110,.1);  color: var(--accent); border: 1px solid rgba(200,169,110,.3) }
.suggest-actions {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.suggest-cancel {
  background: none; color: var(--muted);
  border: 1px solid var(--border); padding: .5rem 1rem;
  border-radius: 8px; font-size: .85rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.suggest-cancel:hover { color: var(--text); border-color: var(--text2) }
.suggest-submit {
  background: var(--accent); color: #111; border: none;
  padding: .5rem 1.2rem; border-radius: 8px; font-size: .85rem;
  font-weight: 700; font-family: inherit; cursor: pointer;
  transition: opacity .15s;
}
.suggest-submit:hover    { opacity: .85 }
.suggest-submit:disabled { opacity: .55; cursor: default }


/* Subtle SEO/discovery link in the filter row pointing to /brands. */
.browse-brands-link {
  display: inline-flex; align-items: center;
  color: var(--muted); text-decoration: none;
  font-size: .82rem; font-weight: 500;
  padding: .35rem .55rem; border-radius: 6px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.browse-brands-link:hover { color: var(--accent); background: rgba(200,169,110,.08) }


.hub-back-link {
  display: inline-block; margin-bottom: .5rem;
  color: var(--muted); text-decoration: none;
  font-size: .8rem; font-weight: 500;
  transition: color .15s;
}
.hub-back-link:hover { color: var(--accent) }


/* ── Brand hero — stats block + top-crowned cap above the catalog grid ─────
   Renders inside renderHubPage when filterKey === 'brand'. SEO-indexable
   (it's in the SSR HTML, not JS-rendered) and gives /brand/:slug pages
   real content beyond the cap list. */
.brand-hero {
  margin: 0 0 2rem;
  padding: 1.4rem 1.2rem;
  background: linear-gradient(135deg, rgba(200,169,110,.08), rgba(124,185,168,.04));
  border: 1px solid rgba(200,169,110,.25);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 1rem;
}
.brand-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
}
.brand-hero-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem .75rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.brand-hero-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; font-weight: 700; color: var(--accent);
  line-height: 1;
}
.brand-hero-stat-lbl {
  font-size: .7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-top: .35rem;
}

.brand-hero-top-cap {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem .9rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.brand-hero-top-cap:hover { border-color: var(--accent); transform: translateY(-1px) }
.brand-hero-top-cap > img,
.brand-hero-top-cap-fallback {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 8px; object-fit: cover;
  background: var(--surface2); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.brand-hero-top-cap-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0 }
.brand-hero-top-cap-label {
  font-size: .68rem; color: var(--accent); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.brand-hero-top-cap-name {
  font-size: .92rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-hero-top-cap-count { font-size: .76rem; color: var(--muted) }

.brand-hero-collector {
  font-size: .85rem; color: var(--text2); margin: 0;
}
.brand-hero-collector a {
  color: var(--accent); text-decoration: none;
}
.brand-hero-collector a:hover { text-decoration: underline }

@media (max-width: 480px) {
  .brand-hero-stats { grid-template-columns: 1fr; gap: .45rem }
  .brand-hero-stat-num { font-size: 1.4rem }
}


/* SSR fallback styles: keep cap-card-ssr looking identical to a normal
   .cap-card but with anchor reset (no underline, inherit color) and a
   small View-arrow CTA in place of the Sign-in / Add button. JS replaces
   these with the auth-aware version on hydration; if that ever fails,
   the SSR cards still navigate to the cap profile when tapped. */
a.cap-card.cap-card-ssr {
  text-decoration: none; color: inherit; display: block;
}
.cap-card-cta {
  font-size: .82rem; font-weight: 600; color: var(--accent);
  letter-spacing: .03em;
}