/* Uses /design-system.css, also loaded by the React portal. */
.catalogue-page main { max-width: var(--page-width); padding: 32px var(--gutter) var(--section-space); margin: auto; }
.catalogue-page main > section { padding: 36px 0; border-bottom: 1px solid var(--line); }
.catalogue-page main > section:last-child { border-bottom: 0; }
.catalogue-page main p { max-width: 78ch; }
.catalogue-page main a:not(.button) { color: var(--green); text-decoration: underline; }
.catalogue-page .profile-hero, .catalogue-page .columns { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 48px; }
.catalogue-page .profile-hero { padding-top: 16px; }
.profile-hero h1 { overflow-wrap: anywhere; }
.profile-hero aside { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); align-self: start; }
.profile-hero aside strong { display: block; font-size: var(--text-card); color: var(--green); overflow-wrap: anywhere; }
.profile-hero .button { margin: 16px 0; }
.catalogue-page dl { max-width: 1000px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 24px 0; background: var(--white); }
.catalogue-page dl > div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-bottom: 1px solid var(--line); padding: 16px 20px; }
.catalogue-page dl > div:last-child { border-bottom: 0; }
.catalogue-page dt { color: var(--muted); }
.catalogue-page dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.table-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.catalogue-page table { width: 100%; min-width: 550px; border-collapse: collapse; text-align: left; font-size: var(--text-small); background: var(--white); }
.catalogue-page th, .catalogue-page td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.catalogue-page tr:last-child td { border-bottom: 0; }
.catalogue-page th { background: var(--surface); }
.catalogue-page main > .purchase { background: var(--surface); padding: 28px; margin-top: 36px; border: 1px solid var(--line); border-radius: var(--radius); }
.catalogue-page li { margin: 10px 0; }
.catalogue-page form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin: 24px 0; }
.catalogue-page form label { display: grid; gap: 8px; font-size: var(--text-small); font-weight: 700; }
.catalogue-page input { width: min(420px,100%); min-height: 48px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); }
.catalogue-page form button { min-height: 48px; padding: 10px 18px; border: 1px solid var(--green); background: var(--green); color: var(--white); font-weight: 700; }
.catalogue-page main section > nav { display: flex; gap: 24px; }
@media (max-width: 800px) {
  .catalogue-page .profile-hero, .catalogue-page .columns { grid-template-columns: minmax(0,1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .catalogue-page main > section { padding: 28px 0; }
  .catalogue-page dl > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .profile-hero aside, .catalogue-page main > .purchase { padding: 22px; }
}
@media print {
  .catalogue-page .purchase { display: none; }
  .catalogue-page section { break-inside: avoid; }
}

.profile-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
.profile-save [role=status] { flex-basis: 100%; font-size: var(--text-small); color: var(--muted); }
@media print { .profile-save { display: none; } }