/* Ergaenzt style.css fuer app2.py.
   Palette, Topbar und .game-filter/.game-logo kommen aus style.css,
   damit die Seite optisch zur Hauptseite passt. Hier steht nur, was
   dort nicht existiert: Kategorie-Tabs, Facetten und das Karten-Raster. */

/* Dunkles Theme: ueberschreibt die hellen Variablen aus style.css.
   Nur die Farbverlaeufe der drei Spiel-Banner bleiben, damit die
   Kategorie-Tabs erkennbar bleiben. */
body.cards-page {
  --bg: #000000;
  --card-bg: #101012;
  --border: #26262b;
  --text: #f2f2f4;
  --text-muted: #9b9ba4;
  --row-hover: #17171a;
  --header-bg: #0a0a0c;
  --accent: #e8b53a;        /* Gold statt Rot: liest sich auf Schwarz besser */
  --accent-soft: #2a2113;
  background: #000000;
  color: var(--text);
}

.cards-page .topbar {
  background: var(--header-bg);
  border-bottom-color: var(--border);
}
.cards-page .brand { color: var(--accent); }

.cards-page main {
  padding: 18px 24px 40px;
}

.brand-sub {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------- Admin-Ansicht ---------- */
/* .site-switch und .admin-badge stehen in style.css - beide Seiten
   tragen dieselben Elemente. */

/* Leiste mit den Admin-Werkzeugen, direkt unter den Kategorie-Bannern. */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
}
.admin-bar .order-action { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-bar input[type="text"] {
  width: 320px;
  max-width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: #17171a;
  font: inherit;
  font-size: 13px;
}
.admin-bar input[type="text"]::placeholder { color: #6f6963; opacity: 1; }
.admin-bar .order-button {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #17140a;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.admin-bar .order-button:hover { filter: brightness(1.12); }
.admin-bar .admin-hint { color: var(--text-muted); font-size: 12.5px; }

.admin-logout {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.admin-logout:hover { color: var(--accent); }

.status { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.stamp { color: var(--text-muted); }

.notice {
  margin: 14px 24px 0;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 14px;
}
.notice.error { border-color: #f6c6c3; background: #fdeceb; color: #a12622; }

/* ---------- Kategorie-Tabs (die drei Spiel-Banner) ---------- */

/* .game-filter kommt aus style.css und war dort ein <div>. Als <button>
   braucht es die Browser-Defaults zurueckgesetzt, sonst erbt es
   Systemschrift und einen grauen Rahmen. */
.category-tab {
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.category-tab:hover { transform: translateY(-2px); }

/* Nicht gewaehlte Kategorien treten zurueck, statt zu verschwinden -
   so bleibt sichtbar, dass es sie gibt. */
.category-tab:not(.is-active) { opacity: .55; }
.category-tab.is-active {
  box-shadow: 0 0 0 3px var(--text), 0 6px 18px rgba(31, 36, 48, .18);
}

/* Schwarz statt weiss: --text ist im dunklen Theme hell, auf weissem
   Grund war die Zahl praktisch unlesbar. */
.game-count {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #0d0d0f;
  color: #f2f2f4;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.category-tab[data-empty="1"] .game-count { color: #9b9ba4; }

/* ---------- Set-Uebersicht (Zwischenseite) ---------- */

.set-overview[hidden] { display: none; }

.overview-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.show-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: #17140a;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.show-all:hover { filter: brightness(1.12); }
.show-all span {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(23, 20, 10, .22);
  font-size: 12px;
}

.overview-hint { color: var(--text-muted); font-size: 13px; }

.set-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}
.set-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
}
.set-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.set-table tbody:last-child tr:last-child td { border-bottom: 0; }
.set-table .num { text-align: right; }

/* Zwischenueberschrift je Oberkategorie, mit Summe der Gruppe. */
.set-table .group-row th {
  padding: 10px 14px;
  background: #17171c;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  letter-spacing: .7px;
}
.set-table .group-row th.num { color: var(--text-muted); font-weight: 700; }
.set-group:first-child .group-row th { border-top: 0; }

.set-row { cursor: pointer; }
.set-row:hover td { background: var(--row-hover); }
.set-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.set-table .code { font-weight: 700; color: var(--accent); white-space: nowrap; }
.set-table .setname { font-weight: 600; }
.set-table .release { color: var(--text-muted); white-space: nowrap; }
.set-table .total { font-weight: 700; white-space: nowrap; }

.badge-en {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  vertical-align: middle;
}

/* Suchfeld weiss. style.css setzt dort var(--card-bg), das im dunklen
   Theme fast schwarz ist - hier bewusst ueberschrieben. */
.cards-page #search {
  background: #ffffff;
  color: #17171a;
  border-color: #ffffff;
  flex: 0 0 auto;
  width: 170px;
  max-width: 170px;
  padding: 0 10px;
  font-size: 14px;
}

/* Gleiche Hoehe wie das Sortier-Dropdown. Explizit gesetzt statt ueber
   Padding gerechnet, weil select und input ihre Innenhoehe
   unterschiedlich ableiten und sonst 2-3px auseinanderliegen. */
.cards-page .grid-toolbar #search,
.cards-page .sort-control select {
  height: 38px;
  box-sizing: border-box;
}

/* Luft zwischen Filterleiste und Kartenraster. */
.cards-page .grid-toolbar { margin-bottom: 26px; }
.cards-page #search::placeholder { color: #6f6963; opacity: 1; }
.cards-page #search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232, 181, 58, .35);
}

.back-button {
  margin-bottom: 14px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.back-button:hover { background: var(--row-hover); }

#grid-view[hidden] { display: none; }

/* ---------- Facetten ---------- */

.facets {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}
.facets[hidden] { display: none; }

.facet-group {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
}

.facet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.facet-head h3 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
}
.facet-n {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11px;
}
.facet-clear {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  visibility: hidden;   /* erst sichtbar, wenn etwas ausgewaehlt ist */
}
.facet-group.has-selection .facet-clear { visibility: visible; }

.facet-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  /* 58 Sets passen nicht auf einen Schirm - Hoehe deckeln und scrollen,
     sonst schiebt die Filterleiste das Raster aus dem Bild. */
  max-height: 132px;
  overflow-y: auto;
}

.facet-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #1a1a1e;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.facet-pill:hover { background: var(--row-hover); border-color: #d8d3ce; }
.facet-pill b { font-weight: 700; }
.facet-pill i {
  font-style: normal;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}
.facet-pill span { color: var(--text-muted); font-size: 12px; }

.facet-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #17140a;
}
.facet-pill.is-active i,
.facet-pill.is-active span { color: rgba(23, 20, 10, .70); }

/* ---------- Raster ---------- */

.card-grid {
  --tile: 180px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
  gap: 14px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: #d8d3ce;
  box-shadow: 0 6px 16px rgba(31, 36, 48, .10);
}
.card.is-hidden { display: none; }

.thumb {
  position: relative;    /* Anker fuer den Bildhinweis */
  aspect-ratio: 5 / 7;   /* Kartenformat: verhindert Layout-Spruenge beim Lazyload */
  background: var(--bg);
}

/* Wasserzeichen auf Karten, deren Bild aus der englischen Ausgabe
   stammt. Halbtransparent ueber dem unteren Bildrand, damit das Motiv
   sichtbar bleibt. */
.img-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 7px;
  background: rgba(0, 0, 0, .72);
  color: #f0d68a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-align: center;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
  cursor: help;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 12px;
}

.meta { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 2px; }

.card .name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  /* Zwei Zeilen, dann Ellipse - sonst reissen lange Namen die Kacheln
     unterschiedlich hoch und das Raster franst aus. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .sub { margin: 0; font-size: 11.5px; color: var(--text-muted); }
.card .set {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Preise sind bewusst unsichtbar. Der Wert bleibt als data-price am
   Element, damit "Preis auf-/absteigend" weiter sortieren kann - nur
   angezeigt wird er nirgends. */
.card .price { display: none; }
.modal-price { display: none; }

/* Admin-Ansicht (/admin): dort sind die Preise der einzige Unterschied -
   sie werden wieder eingeblendet, im Raster wie im Overlay. */
.cards-page.admin-view .card .price {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}
.cards-page.admin-view .card .price .no-price {
  color: var(--text-muted);
  font-weight: 600;
}
.cards-page.admin-view .modal-price { display: block; }

.empty-state {
  margin: 30px 0;
  text-align: center;
  color: var(--text-muted);
}

/* ---------- Overlay ---------- */

.card.has-history { cursor: pointer; }

.modal { position: fixed; inset: 0; z-index: 50; }
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 17, .55);
}

.modal-panel {
  position: relative;
  width: min(94vw, 720px);
  max-height: 90vh;
  margin: 5vh auto 0;
  overflow-y: auto;
  padding: 22px;
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: 0 20px 50px rgba(31, 36, 48, .35);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.modal-close:hover { color: var(--text); }

.modal-head { display: flex; gap: 18px; align-items: flex-start; }
.modal-image-wrap {
  position: relative;
  flex: 0 0 150px;
  width: 150px;
  border-radius: 8px;
  overflow: hidden;
}
.modal-image {
  display: block;
  width: 100%;
  background: var(--bg);
}
.modal-note {
  position: static;
  display: block;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  background: rgba(0, 0, 0, .82);
}
.modal-note[hidden] { display: none; }
.modal-head h3 { margin: 0 0 4px; font-size: 19px; }
.modal-sub { margin: 0; color: var(--text-muted); font-size: 13px; }
.modal-price {
  margin: 8px 0 12px;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
}

.modal-cm {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: #17140a;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.modal-cm:hover { filter: brightness(1.12); }

.modal-chart { margin-top: 22px; }
.modal-chart h4 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
}
.modal-chart h4 span {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 11px;
  letter-spacing: 0;
}
.chart-state { margin: 20px 0; color: var(--text-muted); font-size: 14px; }
.chart-state[hidden] { display: none; }

/* Der Canvas fuellt exakt diesen Kasten - ohne die feste Hoehe zieht
   Chart.js ihn bei maintainAspectRatio:false beliebig lang. */
.chart-box {
  position: relative;
  height: 150px;
  width: 100%;
}
.chart-box canvas { position: absolute; inset: 0; }

/* ---------- Wunschliste ---------- */

.wishlist-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wishlist-button:hover { background: var(--row-hover); border-color: #3a3a42; }
.wishlist-button svg { width: 17px; height: 17px; fill: currentColor; }

.wishlist-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #17140a;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.wishlist-count.is-empty { background: #2a2a31; color: var(--text-muted); }

.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.modal-wish {
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.modal-wish:hover { background: var(--accent-soft); }
.modal-wish.is-done {
  background: var(--accent);
  color: #17140a;
}
.modal-wish .caret { font-size: 10px; opacity: .8; }

.modal-wish-view {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.modal-wish-view:hover { background: var(--row-hover); border-color: #3a3a42; }

/* Zustandsauswahl */
.wish-add { position: relative; }

.wish-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #16161a;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.wish-menu[hidden] { display: none; }

.wish-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.wish-menu button:hover { background: var(--row-hover); }

.cond-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 22px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
}
.cond-nm {
  width: 34px;
  background: #1f3d2a;
  color: #7bd39a;
  border: 1px solid #2f5c3f;
}
/* Offizielles PSA-Logo (static/psa-logo.webp). Es steht auf weissem
   Grund, deshalb sitzt es in einem weissen Chip - direkt auf dem
   dunklen Menue saehe der Rand ausgefranst aus. */
.cond-psa {
  height: 28px;
  width: auto;
  padding: 3px 5px;
  background: #fff;
  border: 1px solid #d8d3ce;
}
.cond-psa img {
  display: block;
  height: 100%;
  width: auto;
}

.wish-panel { width: min(94vw, 600px); }
.wish-panel h3 { margin: 0 0 14px; font-size: 19px; }
.wish-empty { color: var(--text-muted); font-size: 14px; }
.wish-empty[hidden] { display: none; }

.wish-list { list-style: none; margin: 0; padding: 0; }

.wish-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.wish-thumb {
  width: 40px;
  height: 56px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--bg);
  flex: 0 0 40px;
}
.wish-meta { flex: 1 1 auto; min-width: 0; }
.wish-meta strong {
  display: block;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wish-meta small { color: var(--text-muted); font-size: 11.5px; }

.wish-qty { display: flex; align-items: center; gap: 4px; }
.wish-qty button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.wish-qty button:hover { background: var(--row-hover); }
.wish-qty input {
  width: 46px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: center;
  -moz-appearance: textfield;
}
.wish-qty input::-webkit-outer-spin-button,
.wish-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wish-remove {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.wish-remove:hover { color: #e0625f; }

.wish-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.wish-foot[hidden] { display: none; }
.wish-total { color: var(--text-muted); font-size: 13px; }
.wish-foot-actions { display: flex; gap: 8px; }

.wish-clear {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.wish-clear:hover { color: var(--text); background: var(--row-hover); }

.wish-generate {
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #17140a;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.wish-generate:hover { filter: brightness(1.12); }
.wish-generate:disabled { opacity: .55; cursor: default; }

.link-panel { width: min(94vw, 560px); }
.link-panel h3 { margin: 0 0 12px; font-size: 19px; }
.link-panel p { margin: 0 0 8px; color: var(--text-muted); font-size: 13.5px; }
#wish-link {
  width: 100%;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: #17171a;
  font: inherit;
  font-size: 13px;
}
.link-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .modal-head { flex-direction: column; }
  .modal-image { width: 120px; flex-basis: auto; }
  .wishlist-button span:not(.wishlist-count) { display: none; }
}

@media (max-width: 640px) {
  .cards-page main { padding: 14px 12px 30px; }
  .cards-page .topbar { padding-bottom: 14px; }
  .cards-page .brand { align-items: center; }
  .cards-page .site-switch { width: 100%; }
  .cards-page .status { align-items: center; }
  .cards-page .grid-toolbar { align-items: stretch; }
  .cards-page #search { flex: 1 1 100%; width: 100%; max-width: none; }
  .cards-page .sort-control { flex: 1 1 100%; justify-content: space-between; }
  .cards-page .sort-control select { min-width: 0; }
  .set-overview { overflow-x: auto; }
  .set-table { min-width: 560px; }
  .facets,
  .facet-group,
  .facet-pills { min-width: 0; }
  .facet-pill { min-width: 0; overflow: hidden; }
  .facet-pill b { overflow: hidden; text-overflow: ellipsis; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --tile: 0; }
  .card-grid { gap: 10px; }
  .card { border-radius: 8px; }
  .meta { padding: 8px 8px 10px; }
  .modal-panel { width: calc(100vw - 24px); max-height: 94vh; margin-top: 3vh; padding: 18px 14px; }
  .wish-item { align-items: flex-start; gap: 8px; }
  .wish-qty { flex-wrap: wrap; justify-content: flex-end; }
  .wish-foot-actions { width: 100%; }
  .wish-foot-actions button { flex: 1 1 0; }
  .facet-pill i { max-width: 120px; }
}