/* WonderFonT catalog page only (/fonts, /he/fonts): the filter dropdowns, the view switch
   and the compare rows. Owner 09-28: "easier, with dropdowns, all at the same size; the
   view buttons stay and are clear"; the letters in the rows start on one line. */

/* Four dropdowns of one size, then the view switch */
.wf-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--wf-s3);
  align-items: center; margin-block: var(--wf-s4) var(--wf-s5); }
@media (max-width: 767px) {
  .wf-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-filters__view { grid-column: 1 / -1; justify-self: start; }
}
/* .wf-dd (the dropdown) lives in dd.css: the sign-in account switch uses it too. */

/* The view switch: one clear two-button control; its legend is for screen readers */
.wf-filters__view { flex-wrap: nowrap; gap: 4px; padding: 4px; border: 2px solid var(--wf-line-strong); border-radius: var(--wf-r-pill);
  background: var(--wf-paper); }
.wf-filters__view legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.wf-filters__view .wf-seg__opt span { min-block-size: 36px; border-color: transparent; background: none; }
.wf-filters__view .wf-seg__opt input:checked + span { background: var(--wf-lemon); border-color: var(--wf-btn-edge); }

/* Compare rows: same text, same size; the name first, the letters start on one line */
.wf-catalog:has([value=rows]:checked) .wf-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.wf-catalog:has([value=rows]:checked) .wf-cardw { display: flex; align-items: center; gap: var(--wf-s3); border-block-end: 1px solid var(--wf-line); }
.wf-catalog:has([value=rows]:checked) .wf-cardw .wf-card { flex: 1; border: 0; color: var(--wf-ink); }
.wf-catalog:has([value=rows]:checked) .wf-cmp-add { position: static; }
.wf-catalog:has([value=rows]:checked) .wf-card__acts { display: flex; flex: none; inline-size: 15rem; gap: var(--wf-s2);
  align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.wf-catalog:has([value=rows]:checked) .wf-rows-only { display: inline-flex; }
@media (max-width: 767px) { .wf-catalog:has([value=rows]:checked) .wf-cardw { flex-wrap: wrap; padding-block-end: var(--wf-s3); }
  .wf-catalog:has([value=rows]:checked) .wf-cardw .wf-card { flex-basis: 100%; }
  .wf-catalog:has([value=rows]:checked) .wf-card__acts { inline-size: 100%; justify-content: flex-start; } }
.wf-catalog:has([value=rows]:checked) .wf-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wf-s2) var(--wf-s5);
  padding: var(--wf-s3) var(--wf-s2); border-width: 0 0 1px; border-radius: 0; background: none; }
.wf-catalog:has([value=rows]:checked) .wf-card__body { flex: 1 1 22rem; }
.wf-catalog:has([value=rows]:checked) .wf-spec--card { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.wf-catalog:has([value=rows]:checked) .wf-card :is(h3, p) { margin: 0; }
.wf-catalog:has([value=rows]:checked) .wf-card__title { flex: 0 0 9rem; order: -1; font-size: var(--wf-t-base); }
.wf-catalog:has([value=rows]:checked) .wf-card__meta[lang="en"] { display: none; }
@media (min-width: 768px) {
  .wf-catalog:has([value=rows]:checked) .wf-card { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 15rem 11rem; }
}