.catalog-tools {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

.catalog-tools label {
  display: grid;
  flex: 1 1 10rem;
  max-width: 13rem;
  gap: .3rem;
  min-width: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}

.catalog-tools select { width: 100%; color: var(--ink); }
.catalog-reset { margin-inline-start: auto; }

.catalog-card.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: clip;
  background: color-mix(in srgb, var(--paper) 56%, white);
  border: 1px solid var(--line);
  border-radius: 1rem;
}

.catalog-card-media {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 80%, var(--muted));
}

.catalog-card-media img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  transition: transform .38s cubic-bezier(.2, .65, .3, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .catalog-card:hover .catalog-card-media img { transform: scale(1.035); }
}

.catalog-card .catalog-card-code {
  position: absolute;
  inset: .75rem auto auto .75rem;
  border-radius: 2rem;
  background: #fffdf4;
  color: #2b2128;
  padding: .32rem .64rem;
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .075em;
}

.catalog-card-code span { color: #756957; margin-inline: .12rem; }

.catalog-card .info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  padding: clamp(.8rem, 1.65vw, 1.35rem);
}

.catalog-card h3 { font-size: clamp(1.35rem, 2.8vw, 2.35rem); overflow-wrap: anywhere; }

.catalog-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: .15rem 0 .65rem;
  padding: 0;
}

.catalog-card-specs li {
  padding: .2rem .5rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 84%, var(--line));
  border: 1px solid var(--line);
  border-radius: .35rem;
  font-size: .72rem;
  line-height: 1.35;
  white-space: nowrap;
}

.catalog-card .actions { align-items: stretch; margin-top: auto; }
.catalog-card .actions .button { padding-inline: .65rem; gap: .38rem; }
.catalog-detail-button { flex: 1 1 6.5rem; justify-content: space-between; }
.catalog-save-button svg { width: 1rem; height: 1rem; flex: none; }
.catalog-save-button[aria-pressed='true'] { color: white; background: var(--accent); border-color: var(--accent); }
.catalog-save-button[aria-pressed='true'] svg { fill: currentColor; }

#detail {
  width: min(66rem, calc(100% - 1.4rem));
  max-height: calc(100dvh - 1.4rem);
  padding: clamp(1rem, 3vw, 2rem);
  overscroll-behavior: contain;
  border-radius: 1.15rem;
}

.catalog-detail-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.catalog-detail-header .eyebrow { margin: 0 0 .38rem; }
.catalog-detail-header h3 { font-size: clamp(2rem, 5vw, 3.5rem); }
.catalog-detail-header h3:focus { outline: none; }
.catalog-detail-header .catalog-detail-close { min-width: 2.75rem; min-height: 2.75rem; padding: .25rem; font-size: 1.5rem; }
.catalog-detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); }
.catalog-detail-visual figure { margin: 0; }
.catalog-detail-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(46dvh, 26rem);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0;
  background: color-mix(in srgb, var(--paper) 80%, var(--line));
  border-radius: .65rem;
}
.catalog-detail-visual figcaption { margin-top: .4rem; }
.catalog-detail-tabs { margin-top: .7rem; }
.catalog-detail-info .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.catalog-detail-info .specs div { padding-inline: 0 .35rem; }
.catalog-detail-info .specs dd { overflow-wrap: anywhere; }
.catalog-detail-info .actions { align-items: stretch; }
.catalog-detail-info .actions .button { flex: 1 1 auto; justify-content: center; }
#detail-status:empty { margin: 0; }

@media (max-width: 660px) {
  .catalog-tools label { flex: 1 1 7.5rem; max-width: none; }
  .catalog-reset { margin-inline-start: 0; }
  .catalog-card-media img { aspect-ratio: 4 / 3; }
  .catalog-card .catalog-card-code { inset: .45rem auto auto .45rem; }
  .catalog-card .actions .button { flex: 1 1 100%; }
  .catalog-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .catalog-detail-visual img { max-height: 34dvh; }
}