/* ---------------------------------------------------------------------------
   Filter rail, desktop (2026-10-12): a styled list instead of plain text.

   The journal3 filter module (Brands, Categories - see sql/169) rendered as
   bare text: a heading in the link colour, rows of small checkboxes, nothing
   separating one section from the next. This file gives it the shape the
   big marketplaces use: bold section headings with the open/close arrow on the
   right, a hairline between sections, teal checkboxes, a soft highlight under
   the row the pointer is on, the selected option in teal, and each option's
   product count in grey on the right.

   Styles only - the module's markup and behaviour are untouched.

   Scoped to .desktop-filter-wrapper, the wrapper the theme draws around the
   module only when it sits in the side column; on phones the same module opens
   as the theme's filter panel and keeps its own look. Addressed by class, not
   by module id (the generated rules say .module-filter-36; an id changes when
   the module is re-saved or re-created).

   Each selector carries one class more than the generated rule it overrides,
   so nothing here needs !important.
   --------------------------------------------------------------------------- */

/* ── Heading: "Filter" on the left, "Reset" as a quiet link on the right ── */
.desktop-filter-wrapper .module-filter .module-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
  padding: 0 0 12px;
  border-bottom: 1px solid #e3e6e8;
  font-family: 'Jost', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #1d2327;
}

/* Reset as a plain teal text link. The theme styles it as a .btn: its generic
   button rule pins the text colour to the button foreground (near-white) with
   !important, which on the transparent background left a faint grey word, plus
   a circled-x icon on :before and a teal fill on hover/focus/active. Beating
   those needs !important too - the only !important in this file, all on this
   one button (FilterRailTest allows it here and nowhere else).
   Mobile filter panel: the theme's own rule for it is
   ".mobile-filter-container ... .reset-filter.btn" - not under this wrapper. */
.desktop-filter-wrapper .module-filter .module-title .reset-filter.btn,
.desktop-filter-wrapper .module-filter .module-title .reset-filter.btn:hover,
.desktop-filter-wrapper .module-filter .module-title .reset-filter.btn:focus,
.desktop-filter-wrapper .module-filter .module-title .reset-filter.btn:active {
  position: static;
  transform: none;
  margin-left: auto;
  padding: 0;
  min-height: 0;
  border: 0;
  background: none !important;
  box-shadow: none !important;
  color: #195C5B !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.desktop-filter-wrapper .module-filter .module-title .reset-filter.btn:hover {
  text-decoration: underline !important;
}

.desktop-filter-wrapper .module-filter .module-title .reset-filter.btn::before {
  display: none;
}

.desktop-filter-wrapper .module-filter .module-title .reset-filter.btn:focus-visible {
  outline: 2px solid #195C5B;
  outline-offset: 2px;
}

/* ── Section heading: dark and bold, arrow pushed to the right ── */
.desktop-filter-wrapper .module-filter .panel-group .panel .panel-heading a {
  display: flex;
  align-items: center;
  padding: 14px 0 8px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1d2327;
  cursor: pointer;
}

/* The arrow is the theme's own icon font glyph on a:before; order moves it to
   the end of the row. The <em> caret in the markup is a second arrow. */
.desktop-filter-wrapper .module-filter .panel-group .panel .panel-heading a::before {
  order: 2;
  margin-left: auto;
  margin-inline-end: 0;
  justify-content: flex-end;
  font-size: 12px;
  color: #6b777c;
}

.desktop-filter-wrapper .module-filter .panel-group .panel .panel-heading a > em {
  display: none;
}

/* Hairline between sections. The theme draws its own separator on
   .panel::after; that one is switched off so there is a single line. */
.desktop-filter-wrapper .module-filter .panel-group .panel + .panel {
  border-top: 1px solid #eceff0;
}

.desktop-filter-wrapper .module-filter .panel-group .panel:not(:only-child):not(:last-child)::after {
  border-width: 0;
}

.desktop-filter-wrapper .module-filter .panel-group .panel .panel-body {
  padding-bottom: 12px;
}

/* ── Option rows ── */
.desktop-filter-wrapper .module-filter .panel-body .filter-checkbox > label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.desktop-filter-wrapper .module-filter .panel-body .filter-checkbox > label:hover {
  background-color: #f2f6f6;
}

.desktop-filter-wrapper .module-filter .panel-body .filter-checkbox > label input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #195C5B;
  cursor: pointer;
}

.desktop-filter-wrapper .module-filter .panel-body .filter-checkbox > label input + * {
  margin: 0;
}

.desktop-filter-wrapper .module-filter .panel-body .filter-checkbox > label .links-text {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: #2b3337;
  line-height: 1.3;
}

.desktop-filter-wrapper .module-filter .panel-body .filter-checkbox > label:has(input:checked) .links-text {
  font-weight: 600;
  color: #195C5B;
}

/* The product count: plain grey figures on the right, not the theme's badge. */
/* The theme's badge is a fixed-height box nudged sideways with a transform. */
.desktop-filter-wrapper .module-filter .panel-body .filter-checkbox > label .count-badge {
  display: inline;
  position: static;
  height: auto;
  line-height: 1.3;
  transform: none;
  margin-left: auto;
  padding: 0;
  min-width: 0;
  border: 0;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #8a9599;
  font-variant-numeric: tabular-nums;
}