/* =============================================================
   80 — THE FILTER LEDGER
   The shop sidebar carried seven inline styles in its template,
   so no stylesheet could reach it — which is why three rounds of
   work on 54-shop-sidebar.css never landed. The markup now uses
   classes; these are the rules it was always meant to have.

   The critic's objection was specific: eleven identical 38px rows
   where the counts — the actual data, including the 511 that is
   88% of the catalogue — were the faintest, smallest mark in the
   column. So the count is set as a tabular figure with real
   presence, and the rows are weighted by share of the catalogue.
   ============================================================= */

.shop-sidebar .filter-list { margin: 0; padding: 0; list-style: none; }

.shop-sidebar .filter-item + .filter-item { border-top: 1px solid var(--color-border); }

.shop-sidebar .filter-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.3;
  transition: color 0.22s ease, padding-left 0.22s ease;
}

.shop-sidebar .filter-link:hover {
  color: var(--color-dark);
  padding-left: var(--space-2);
}

.shop-sidebar .filter-link.is-current {
  color: var(--color-accent);
  padding-left: var(--space-2);
}

/* The count is data, not decoration. Tabular so the column reads
   straight down, and sized to be legible rather than apologetic. */
.shop-sidebar .filter-link .count {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  transition: color 0.22s ease;
}
.shop-sidebar .filter-link:hover .count,
.shop-sidebar .filter-link.is-current .count { color: var(--color-accent); }

/* --- Popular products mini rows ------------------------------------- */

.shop-sidebar .sidebar-mini {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
}
.shop-sidebar .sidebar-mini + .sidebar-mini { border-top: 1px solid var(--color-border); }

.shop-sidebar .sidebar-mini-thumb { display: block; }
.shop-sidebar .sidebar-mini-thumb img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  filter: saturate(0.9) brightness(0.95);
  transition: filter 0.25s ease;
}
.shop-sidebar .sidebar-mini:hover .sidebar-mini-thumb img { filter: none; }

.shop-sidebar .sidebar-mini-name {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-sidebar .sidebar-mini:hover .sidebar-mini-name { color: var(--color-accent); }

.shop-sidebar .sidebar-mini-price {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-light);
}
.shop-sidebar .sidebar-mini-price .amount { color: inherit; }

@media (max-width: 768px) {
  .shop-sidebar .filter-link { padding: var(--space-3) 0; font-size: 0.9rem; }
}

/* The journey plates now wrap their img in <picture> to serve a portrait crop
   on phones. `display: contents` keeps the element out of the box tree so the
   absolutely-positioned img inside still fills the plate exactly as before. */
.journey-plate picture { display: contents; }