/* connect.css: only /connect and its locale copies, the directory (toolbar, filter dropdowns, card grid, open
   card, loading/empty/error states). Moved out of styles.css on 22.10.2026 for the asset budget: every page loads
   styles.css, only /connect loads this file, after styles.css. The guide pages (/connect/find-*) and the generated
   profile pages do not load it; what they share stays in styles.css (.cn-sr, the hero, .cn-disc*, and the card's
   style and link rows .cn-card__styles/.cn-card__links). Data and states come from connect-app.js.
   Risks / what goes stale silently: a rule here that another page needs is simply missing there (no error), so
   before reusing a .cn-dir/.cn-bar/.cn-card class on another page, move that rule back to styles.css. Rules in
   styles.css that target these classes load BEFORE this file and lose ties of equal specificity (the 44px touch
   floor for Contact and the switch is repeated below for that reason). */

.svc-section.cn-dir { padding-top: clamp(96px, 12vh, 150px); }
/* no caps eyebrow (DEV-720): the directory title is a plain section heading */
.cn-dir__title { margin-bottom: 28px; font-family: var(--font-display); font-weight: var(--section-weight); font-size: clamp(26px, 3vw, 40px);
  line-height: 1.14; letter-spacing: -0.018em; color: var(--ink); }

/* toolbar: kind switch, search, count; filters below */
.cn-bar { display: flex; flex-direction: column; gap: 18px; margin-bottom: 44px; }
.cn-bar__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.cn-seg { position: relative; flex: 0 0 auto; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 999px; background: rgba(241,241,241,0.06); }
.cn-seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--ink); transition: transform var(--dur-2) var(--ease); }
.cn-seg[data-kind="showroom"]::before { transform: translateX(100%); }
.cn-seg__btn { position: relative; z-index: 1; min-height: 40px; padding: 0 22px; border: 0; border-radius: 999px;
  background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cn-seg__btn:hover { color: var(--ink); }
.cn-seg__btn[aria-pressed="true"] { color: var(--bg); }
.cn-search { position: relative; flex: 1 1 280px; min-width: 0; }
.cn-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted-2);
  pointer-events: none; }
.cn-input { display: block; width: 100%; min-height: 48px; padding: 0 16px; font-family: inherit; font-size: 15px;
  color: var(--ink); background: rgba(241,241,241,0.07); border: 0; border-radius: 10px;
  transition: background-color var(--dur-1) var(--ease); }
.cn-input:hover { background-color: rgba(241,241,241,0.10); } /* -color: the shorthand dropped the select arrow (22.10.2026) */
.cn-search .cn-input { padding-left: 42px; }
.cn-input::placeholder { color: var(--muted-2); }
.cn-input:focus { outline: none; background-color: rgba(241,241,241,0.10); }
.cn-input:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.cn-count { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cn-field { display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; min-width: 0; } /* a two-line label never pushes its select below the neighbours */
.cn-field[hidden] { display: none; }
.cn-field__label { font-size: 13px; font-weight: 500; line-height: 1.3; color: rgba(241,241,241,.55); } /* sentence case like the card labels, no caps (22.10.2026) */
.cn-select { -webkit-appearance: none; appearance: none; padding-right: 40px; color: var(--muted); cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238d8d8d' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.cn-select.is-set { color: var(--ink); }
.cn-select:disabled { opacity: 0.5; cursor: default; }
/* Filter dropdown (2026-10-15): button + listbox from connect-app.js instead of the
   native <select>, whose system sheet was white with a blue highlight. Panel grammar
   of .lang-menu (dark frosted, soft lighter row, no contour), with the inputs' radius;
   a little more opaque than .lang-menu because it can sit over card photos. */
.cn-dd { position: relative; }
.cn-dd .cn-select { text-align: left; }
.cn-dd__value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-dd__list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content;
  max-width: min(340px, calc(100vw - 32px)); max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none; color-scheme: dark;
  background: rgba(13,13,13,0.86);
  backdrop-filter: blur(22px) saturate(115%); -webkit-backdrop-filter: blur(22px) saturate(115%);
  border-radius: 14px; box-shadow: 0 18px 44px -22px rgba(0,0,0,0.7);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); }
.cn-dd__list[hidden] { display: none; }
.cn-dd__list:focus { outline: none; }
.cn-dd.is-up .cn-dd__list { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
.cn-dd.is-end .cn-dd__list { left: auto; right: 0; }
.cn-dd.is-open .cn-dd__list { opacity: 1; transform: none; }
.cn-dd__opt { position: relative; display: flex; align-items: center; min-height: 44px; padding: 10px 38px 10px 12px;
  border-radius: 10px; font-size: 15px; line-height: 1.35; color: var(--muted); cursor: pointer; user-select: none; }
.cn-dd__opt.is-active { background: rgba(241,241,241,0.07); color: var(--ink); }
.cn-dd__opt[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.cn-dd__opt[aria-selected="true"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px;
  margin-top: -7px; background: no-repeat center / 14px 14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6' stroke='%23f1f1f1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* the listbox has focus while open, so the active row carries the keyboard ring */
.cn-dd__list:focus-visible .cn-dd__opt.is-active { box-shadow: inset 0 0 0 1px var(--line-2); }

/* grid + cards. A card is a compact directory tile (cover, place, name, tagline, one
   pill row, one quiet line, footer) that opens in place to the full row (.is-open):
   cover left, full profile right. `dense` lets the next tiles refill the row the
   opened card left, so the grid keeps no hole. */
.cn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense;
  align-items: stretch; gap: var(--gap-cards); }
.cn-grid[hidden] { display: none; }
.cn-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: rgba(241,241,241,0.05); border-radius: var(--radius); }
.cn-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface-3); }
.cn-card__initials { font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--subtle); user-select: none; }
.cn-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-3) var(--ease); }
/* the tile itself is the open button, stretched over the card; Contact sits above it */
.cn-card__toggle { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; border-radius: inherit;
  background: transparent; cursor: pointer; }
.cn-card__toggle:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -3px; }
.cn-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.cn-card__head { display: flex; flex-direction: column; gap: 6px; }
.cn-card__name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 20px;
  line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); overflow-wrap: anywhere; }
.cn-card__tagline { font-size: 15px; line-height: 1.5; color: var(--muted); }
.cn-card:not(.is-open) .cn-card__tagline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; }
/* quiet line + footer pinned to the bottom, so footers align across a row */
.cn-card__end { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.cn-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px; }
.cn-card__cue { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cn-card__cue::after { content: ""; width: 10px; height: 10px; background: no-repeat center / 10px 10px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5l3.5 3.5 3.5-3.5' stroke='%23f1f1f1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cn-card__contact { position: relative; z-index: 2; min-height: 32px; } /* above the toggle; padding and size come from .cn-card__btn in styles.css, which used to win by source order */

/* open state: full row, cover left (40%), profile right; connect-app.js (flip) slides the
   tiles to their new places and fades the open part in */
.cn-card.is-open { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.cn-card.is-open .cn-card__toggle, .cn-card.is-open .cn-card__compact { display: none; }
/* the cover column fills the open card's full height (img is absolute, 100%, cover) */
.cn-card.is-open .cn-card__media { align-self: stretch; aspect-ratio: auto; min-height: 100%; }
.cn-card.is-open .cn-card__body { padding: 28px 72px 28px 28px; gap: 16px; }
.cn-card__close { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(13,13,13,0.6); color: var(--ink); cursor: pointer; transition: background var(--dur-1) var(--ease); }
.cn-card__close[hidden] { display: none; }
.cn-card__close:hover { background: rgba(241,241,241,0.08); }
.cn-card__close:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.cn-card__more[hidden] { display: none; }
.cn-card__more-in { display: flex; flex-direction: column; gap: 18px; }
/* DEV-678: the profile's own "looking for" note, under the Looking for row in Details. */
.cn-card__note { font-size: 13.5px; line-height: 1.5; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }

/* loading skeletons: opacity pulse only */
.cn-skel { display: block; width: 100%; height: 12px; margin-top: 12px; border-radius: 6px; background: var(--line);
  animation: cn-pulse 1.4s var(--ease) infinite alternate; }
.cn-skel--meta { width: 32%; height: 10px; margin-top: 0; }
.cn-skel--name { width: 62%; height: 20px; }
.cn-skel--short { width: 44%; }
.cn-card--skeleton .cn-card__media { animation: cn-pulse 1.4s var(--ease) infinite alternate; }
@keyframes cn-pulse { from { opacity: 1; } to { opacity: 0.45; } }

/* first load: one quiet fade-in, staggered by connect-app.js (--cn-i, capped) */
.cn-card--in { animation: cn-in var(--dur-3) var(--ease) both; animation-delay: calc(var(--cn-i, 0) * 60ms); }
@keyframes cn-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* empty + error */
.cn-state { padding: 48px 0 16px; text-align: center; }
.cn-state[hidden] { display: none; }
.cn-state__h { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.01em; color: var(--ink); }
.cn-state__p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.cn-state .btn { margin-top: 22px; }
.cn-page noscript .cn-state__p { text-align: center; }


@media (max-width: 1100px) {
  .cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .cn-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cn-card.is-open { display: flex; }
  .cn-card.is-open .cn-card__media { aspect-ratio: 4 / 3; min-height: 0; }
  .cn-card.is-open .cn-card__body { padding: 20px; }
}
@media (max-width: 600px) {
  .cn-grid { grid-template-columns: 1fr; }
  .cn-seg { width: 100%; }
  .cn-search { flex-basis: 100%; }
  .cn-count { margin-left: 0; }
}
@media (max-width: 540px) { .cn-filters { gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .cn-seg::before, .cn-card__img, .cn-dd__list { transition: none; }
  .cn-dd__list, .cn-dd.is-up .cn-dd__list { transform: none; }
  .cn-card--in, .cn-skel, .cn-card--skeleton .cn-card__media { animation: none; }
}

/* directory cards: flat, radius 14, hover and focus only lift the surface (Tobi 18.10.2026: no glow, no zoom) */
.cn-card { transition: background-color .3s var(--ease); }
@media (hover: hover) { .cn-card:not(.cn-card--skeleton):hover { background: rgba(241,241,241,0.08); } }
.cn-card:not(.cn-card--skeleton):focus-within, .cn-card.is-open { background: rgba(241,241,241,0.08); }

@media (prefers-reduced-motion: reduce) {
  .cn-card { transition: none; }
}

/* Directory: when the listing cannot load, the filters step aside and the message stands alone on one flat
   night plate (the list plate's material), so the section reads as intentional, not broken. */
.cn-dir:has([data-cn-error]:not([hidden]), [data-cn-empty-all]:not([hidden])) .cn-bar { display: none; } /* filters return with the entries */
.cn-page .cn-state { margin: 0; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
  border-radius: 14px; background: rgba(241,241,241,.05); }
.cn-page .cn-state__p { max-width: 44ch; margin-inline: auto; }
.cn-state .btn:focus:not(:focus-visible) { outline: none; } /* no ring left behind after a click */

/* Card text order (Tobi 18.10.2026): name, origin quiet, the "looking for" line in full ink as the main
   statement, tagline and chips muted */
.cn-card__from { margin-top: -2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }

/* The card surface (Tobi 19.10.2026: "nicht alles anzeigen"): photo 3:2, then four single lines (name, origin,
   "Looking for", its value), then the foot; every card has the same height. Tagline, countries, segment,
   categories and story live in Details as hairline rows, no chips. */
.cn-card:not(.is-open) .cn-card__media { aspect-ratio: 3 / 2; }
.cn-card:not(.is-open) :is(.cn-card__name, .cn-card__from) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-card__name { font-weight: 600; }
.cn-card__head .cn-card__wants { margin-top: 8px; }
.cn-card__wants .cn-want__value { display: block; white-space: nowrap; text-overflow: ellipsis; }
.cn-card__facts { list-style: none; margin: 0; padding: 0; }
.cn-card__facts li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid rgba(241,241,241,.10); }
.cn-fact__label { font-size: 13px; font-weight: 500; color: rgba(241,241,241,.55); }
.cn-fact__value { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }

/* open card: the full list sits in the open part (with the profile's own note), so the short line steps aside */
.cn-card.is-open .cn-card__head .cn-card__wants { display: none; }
.cn-card__toggle:focus:not(:focus-visible), .cn-card a:focus:not(:focus-visible), .cn-card button:focus:not(:focus-visible) { outline: none; } /* a ring only for the keyboard, never after a click */
/* The last tile of each list: card size and tone, no photo, no frame, no hover change */
.cn-card--cta { justify-content: center; }
.cn-card--cta .cn-card__body { flex: 0 0 auto; align-items: center; justify-content: center; gap: 12px; padding: 28px 24px; text-align: center; }
.cn-card--cta .cn-card__name { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.2; }
.cn-card.cn-card--cta:not(.is-open) .cn-card__tagline { display: block; max-width: 28ch; -webkit-line-clamp: unset; overflow: visible; } /* never clamped */
.cn-card--cta .cn-card__end { margin-top: 8px; } /* 12px gap + 8px = 20px above the pill */
.cn-grid:not(.cn-grid--solo) > .cn-card--cta { aspect-ratio: 4 / 5; } /* alone in its row it keeps about a card's height; next to cards the row stretches it to theirs */
/* WebKit shrank it to its content width (22.10.2026) */
.cn-grid:not(.cn-grid--solo) > .cn-card--cta { width: 100%; min-height: 100%; align-self: start; }
/* A blurred photo as the tile's ground (Tobi 19.10.2026: "mit Bild, blurry"): never one of the active hero strips;
   dark scrim 55 % plus the violet world tone; hover sharpens a little (blur 12px, scrim 45 %, 600ms). */
.cn-card--cta { isolation: isolate; }
.cn-card--cta .cn-card__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: blur(18px); transform: scale(1.1); transition: filter .6s var(--ease); }
.cn-card--cta .cn-card__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(180deg, rgba(150,130,205,.30) 0%, rgba(150,130,205,0) 70%); background-color: rgba(0,0,0,.55);
  transition: background-color .6s var(--ease); }
@media (hover: hover) {
  .cn-card--cta:hover .cn-card__bg { filter: blur(12px); }
  .cn-card--cta:hover .cn-card__scrim { background-color: rgba(0,0,0,.45); }
}
.cn-card.cn-card--cta:not(.is-open) .cn-card__tagline { color: rgba(241,241,241,.86); }
@media (prefers-reduced-motion: reduce) { .cn-card--cta .cn-card__bg, .cn-card--cta .cn-card__scrim { transition: none; } }
@media (hover: hover) { .cn-card.cn-card--cta:hover { background: rgba(241,241,241,0.05); } }
.cn-grid--solo { margin-top: 24px; }
.cn-grid--solo .cn-card--cta { min-height: 240px; }

/* the ≤1024 touch floor of styles.css (DEV-726) loads before this file; repeated so it still wins */
@media (max-width: 1024px) { .cn-card__contact, .cn-seg__btn { min-height: 44px; } }

/* ==== Phones (≤560px; Tobi 22.10.2026: "ist das nicht etwas unpassend, wenn man beim Mobile View immer nur so eine
   Kachel sieht … damit es nutzbar ist"). The four selects sit behind one "Filters" button (connect-app.js toggles
   .is-fopen on .cn-bar, the button carries aria-expanded and the number of active filters), stacked in one column at
   full width when open. Each card is a compact row: a square photo left, name, origin and "Looking for" right, the
   Details cue and a small Contact pill under them; about four cards per screen. Details opens below the row at full
   width (.cn-card__body is display: contents, so head, foot and the open part are cells of the card's grid). The
   last tile (list your profile) keeps its blurred photo at its own height instead of 4:5. Tablet and desktop
   unchanged. ==== */
.cn-ftoggle { display: none; }
@media (max-width: 560px) {
  .cn-bar { gap: 14px; margin-bottom: 24px; }
  .cn-bar__row { gap: 10px; }
  .cn-search { flex: 1 1 0; }
  .cn-ftoggle { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 48px; padding: 0 16px;
    border: 0; border-radius: 10px; background: rgba(241,241,241,0.07); font: inherit; font-size: 15px; font-weight: 600;
    color: var(--ink); cursor: pointer; transition: background-color var(--dur-1) var(--ease); }
  .cn-ftoggle:hover, .cn-ftoggle[aria-expanded="true"] { background: rgba(241,241,241,0.12); }
  .cn-ftoggle:focus:not(:focus-visible) { outline: none; }
  .cn-ftoggle:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
  .cn-ftoggle__n { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
  .cn-ftoggle__n[hidden] { display: none; }
  .cn-ftoggle svg { flex: none; color: var(--muted); transition: transform var(--dur-2) var(--ease); }
  .cn-ftoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .cn-count { flex-basis: 100%; font-size: 13.5px; font-weight: 500; white-space: normal; }
  .cn-filters { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cn-bar:not(.is-fopen) .cn-filters { display: none; }
  .cn-bar.is-fopen .cn-filters { animation: cn-fopen .22s var(--ease) both; }
  .cn-dd__list { width: 100%; max-width: none; }

  .cn-grid { gap: 10px; }
  .cn-card:not(.cn-card--cta) { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start;
    column-gap: 14px; padding: 12px; }
  .cn-card:not(.cn-card--cta) > .cn-card__media { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 88px;
    min-height: 0; aspect-ratio: 1 / 1; border-radius: 12px; }
  .cn-card__initials { font-size: 26px; }
  .cn-card:not(.cn-card--cta):not(.cn-card--skeleton) > .cn-card__body { display: contents; }
  .cn-card--skeleton > .cn-card__body { grid-column: 2; padding: 4px 0 0; gap: 0; }
  .cn-card__head { grid-column: 2; grid-row: 1; gap: 2px; min-width: 0; }
  .cn-card__name { font-size: 16.5px; line-height: 1.3; }
  .cn-card__from { margin-top: 0; font-size: 13px; }
  .cn-card__head .cn-card__wants { margin-top: 6px; gap: 2px; }
  .cn-card__wants .cn-want__label { font-size: 12px; }
  .cn-card__wants .cn-want__value { display: -webkit-box; white-space: normal; font-size: 14.5px; line-height: 1.35; }
  .cn-card:not(.cn-card--cta) > .cn-card__body > .cn-card__end { grid-column: 2; grid-row: 2; margin-top: 6px; }
  .cn-card__foot { padding-top: 0; }
  .cn-card__contact { min-height: 36px; padding: 0 14px; font-size: 13px; }
  .cn-card__contact::after { content: ""; position: absolute; inset: -4px 0; } /* 44px to the thumb */
  .cn-card.is-open:not(.cn-card--cta) { display: grid; }
  .cn-card.is-open:not(.cn-card--cta) .cn-card__head { padding-right: 44px; }
  .cn-card:not(.cn-card--cta) .cn-card__more { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
  .cn-card__close { top: 8px; right: 8px; }
  .cn-card__styles { grid-auto-columns: 120px; }

  .cn-grid:not(.cn-grid--solo) > .cn-card--cta { aspect-ratio: auto; min-height: 0; }
  .cn-card--cta .cn-card__body { padding: 28px 20px; }
  .cn-card--cta .cn-card__name { font-size: 20px; }
}
@keyframes cn-fopen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cn-bar.is-fopen .cn-filters { animation: none; }
  .cn-ftoggle, .cn-ftoggle svg { transition: none; }
}