.catalog-page { width: min(100% - 3rem, 76rem); margin-inline: auto; padding-block: 7rem 5rem; }
.catalog-page h1, .catalog-page h2 { max-width: none; }
#catalog-title { scroll-margin-top: 7rem; }
.catalog-hero { max-width: 58rem; padding-block: 1rem 3rem; }
.catalog-hero .home-eyebrow { padding: 0; background: none; color: var(--color-primary); font-size: 0.75rem; }
.catalog-hero .home-eyebrow::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.65rem; border-radius: var(--radius-full); background: currentColor; }
.catalog-hero h1 { font: 800 clamp(2.25rem, 4vw, 3.5rem)/1.1 var(--font-display); letter-spacing: -0.035em; margin-block: 0.75rem 1.25rem; }
.catalog-intro { max-width: 47rem; color: var(--color-muted); font-size: 1.05rem; }
.catalog-map-link { display: inline-block; margin-top: 0.75rem; color: var(--color-primary); font-weight: 600; }
.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; padding: 1.4rem; border-radius: var(--radius-lg); background: var(--color-surface-container); }
.catalog-toolbar h2 { margin: 0; font: 700 1.25rem var(--font-display); }
.catalog-toolbar p { color: var(--color-muted); font-size: 0.8rem; margin: 0.4rem 0 0; }
.catalog-controls, .catalog-view-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.catalog-view-switch { background: var(--color-surface-container-low); padding: 0.3rem; border-radius: var(--radius-full); }
.catalog-view-switch button { padding: 0.65rem 1rem; min-height: 44px; }
.catalog-view-switch [aria-pressed="true"] { background: var(--color-surface-container-lowest); color: var(--color-primary); }
.catalog-status { color: var(--color-muted); min-height: 1.5rem; margin-block: 1.5rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; list-style: none; padding: 0; margin: 0; }
.catalog-card { background: var(--color-surface-container-lowest); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.catalog-card__media, .catalog-detail__media { background: var(--color-surface-container); display: grid; place-items: center; overflow: hidden; aspect-ratio: 3 / 2; position: relative; }
.catalog-card__media > img, .catalog-detail__media > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.catalog-card__placeholder { width: 4rem; height: 4rem; color: var(--color-primary); }
.catalog-card__badge { position: absolute; z-index: 1; top: 1rem; left: 1rem; max-width: calc(100% - 2rem); background: var(--color-surface-container-lowest); color: var(--color-primary); border-radius: var(--radius-full); padding: 0.3rem 0.8rem; font-size: 0.75rem; }
.catalog-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.85rem; padding: 1.4rem; }
.catalog-card__body h3 { font: 700 1.15rem/1.4 var(--font-display); margin: 0; overflow-wrap: anywhere; }
.catalog-card__body p { margin: 0; }
.catalog-card__description { color: var(--color-muted); font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.catalog-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
.catalog-card__tags li { background: var(--color-surface-container-low); padding: 0.25rem 0.65rem; border-radius: var(--radius-full); font-size: 0.7rem; }
.catalog-card__expiry { color: var(--color-muted); font-size: 0.75rem; padding-bottom: 0.5rem; }
.catalog-card__body .button { margin-top: auto; width: 100%; }
.catalog-grid[data-view="list"] { grid-template-columns: 1fr; }
.catalog-grid[data-view="list"] .catalog-card { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; }
.catalog-grid[data-view="list"] .catalog-card__media { aspect-ratio: auto; min-height: 14rem; }
.catalog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 2.5rem; font-size: 0.85rem; }
.catalog-pagination__buttons { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.catalog-pagination__buttons .button { min-width: 6.5rem; }
.catalog-empty, .catalog-error, .catalog-invite { border-radius: var(--radius-lg); background: var(--color-surface-container-low); padding: 2rem; }
[data-catalog-preview] { margin-bottom: 1.5rem; }
.catalog-error { background: var(--color-error-container); margin-bottom: 1.4rem; }
.catalog-invite { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3rem; }
.catalog-invite h2 { font: 700 1.25rem var(--font-display); margin-top: 0; }
.catalog-invite p { color: var(--color-muted); max-width: 38rem; margin-bottom: 0; }
.catalog-invite .button { flex-shrink: 0; }
.catalog-detail { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(38rem, calc(100% - 2rem)); max-height: 90dvh; background: var(--color-surface-container-lowest); color: var(--color-on-surface); }
.catalog-detail::backdrop { background: rgb(0 0 0 / 45%); }
.catalog-detail__body { padding: 1.5rem; }
.catalog-detail__media { border-radius: var(--radius-md); margin-block: 1.5rem; }
.catalog-detail__description { white-space: pre-wrap; overflow-wrap: anywhere; }
.catalog-detail h2 { overflow-wrap: anywhere; }
.catalog-page [hidden] { display: none; }
.catalog-page .button:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 1000px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } }
@media (max-width: 600px) {
  .catalog-page { width: min(100% - 2rem, 76rem); padding-top: 6.5rem; }
  .catalog-hero { padding-bottom: 2rem; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-toolbar { padding: 1.2rem; }
  .catalog-controls { width: 100%; }
  .catalog-invite { flex-direction: column; align-items: start; padding: 1.4rem; }
  .catalog-pagination__buttons { gap: 0.5rem; width: 100%; justify-content: space-between; }
  .catalog-pagination__buttons .button { min-width: 0; padding-inline: 1rem; }
  .catalog-grid[data-view="list"] .catalog-card { grid-template-columns: 1fr; }
  .catalog-grid[data-view="list"] .catalog-card__media { aspect-ratio: 3 / 2; min-height: 0; }
}