/* Product filters, groups and cards. */

.filters { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flabel { font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: .35rem 1rem;
  background: transparent; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: .95rem;
  transition: background-color .15s, color .15s;
}
.chip:hover { background: var(--panel); }
.chip[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.chip .n { font-weight: 400; opacity: 1; }
.chip[aria-pressed="true"] .n { font-weight: 700; }
.chip[data-empty="true"]:not([aria-pressed="true"]) { border-style: dashed; }

.search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 1rem; border: 2px solid var(--ink); border-radius: 999px; margin-left: auto; background: var(--surface); }
.search input { border: 0; background: transparent; outline: none; min-width: 0; width: 11rem; padding: .4rem 0; }
.search:focus-within { outline: var(--focus); outline-offset: 3px; }
.search input::placeholder { color: var(--ink-2); opacity: .8; }
@media (max-width: 640px) { .search { margin-left: 0; width: 100%; } .search input { width: 100%; } }

.result-count { margin: 18px 0 8px; font-weight: 700; }

.group { margin-top: clamp(32px, 5vw, 56px); }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 20px; }
.group-head h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.group-head p { margin: 0; font-weight: 700; }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }

.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; scroll-margin-top: 90px; }
.card:target { outline: var(--focus); outline-offset: 4px; }
.plate { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--plate, var(--panel)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
:root[data-theme="dark"] .plate { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plate { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } }
.plate-icon { width: clamp(84px, 24%, 112px); aspect-ratio: 1; border-radius: 23%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); overflow: hidden; }
.plate-icon img { width: 100%; height: 100%; object-fit: cover; }
.plate-icon .pad { background: #fff; padding: 12%; }
.plate .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate-soon {
  background-color: var(--panel);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--line) 14px 16px);
}
.plate-mono { width: clamp(84px, 24%, 112px); aspect-ratio: 1; border-radius: 23%; border: 2px dashed var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: 2.6rem; background: var(--ground); color: var(--ink); }

.status {
  position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #221F1D; font-weight: 700; font-size: .9rem; line-height: 1; padding: .5rem .8rem; border-radius: 999px;
}
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.status-live::before { background: #0B7A4F; }
.status-development::before { background: #B86A00; }
.status-soon::before { background: transparent; border: 2px solid #221F1D; }

.card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.card-body h3 { font-size: 1.75rem; }
.audience { margin: .35rem 0 0; font-weight: 700; font-size: .95rem; }
.tagline { margin: 1rem 0 .5rem; font-weight: 700; font-size: 1.1rem; line-height: 1.35; }
.desc { margin: 0 0 1.2rem; color: var(--ink-2); }

.card-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.card-actions .domain { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }

.empty { margin-top: 32px; padding: 32px; border: 2px dashed var(--ink); border-radius: var(--r-md); }
.empty h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.empty p { margin-bottom: 1.2rem; }
.empty .row { display: flex; flex-wrap: wrap; gap: 12px; }
.plain-list { display: grid; gap: 8px; margin-top: 16px; }

/* "See features" link under each product's buttons */
.more-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--sky); }
.more-link:hover { text-decoration-color: var(--ink); }
.card-actions .more-link { flex-basis: 100%; justify-content: flex-start; }