/* [brewser_browse] — faceted catalogue. Self-skinning via the same --brewser-*
   tokens as the rest of the suite, so it tracks the light/dark theme. Scoped
   under .brewser-browse; nothing leaks to the surrounding theme. */

.brewser-browse {
	--bw-bg:          var(--brewser-bg,          #07050e);
	--bw-panel:       var(--brewser-panel,       #0e0a1d);
	--bw-panel-2:     var(--brewser-panel-2,     #141028);
	--bw-border:      var(--brewser-border,      #5b21b6);
	--bw-border-soft: var(--brewser-border-soft, #2e1f57);
	--bw-line:        var(--brewser-line,        rgba(139, 92, 246, 0.18));
	--bw-text:        var(--brewser-text,        #e6e1f5);
	--bw-muted:       var(--brewser-muted,       #d2cde5);
	--bw-cyan:        var(--brewser-cyan,        #22d3ee);
	--bw-brown:       var(--brewser-brown,       #BA7517);
	--bw-brown-soft:  var(--brewser-brown-soft,  #F0A828);
	--bw-brown-light: var(--brewser-brown-light, #FAEEDA);
	--bw-yellow:      var(--brewser-yellow,      #f5d90a);
	--bw-green:       var(--brewser-green,       #22c55e);
	--bw-danger:      var(--brewser-danger,      #fca5a5);

	color: var(--bw-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	box-sizing: border-box;
}
.brewser-browse *, .brewser-browse *::before, .brewser-browse *::after { box-sizing: border-box; }
.brewser-browse p:empty { display: none; margin: 0; padding: 0; }

/* Theme link reset. Content themes (e.g. HybridMag) style
 *   .entry-content a { color:#046bd2; text-decoration:underline; }
 * at specificity (0,1,1), which outranks our single-class link rules and
 * underlines + recolours every link in the grid. Kill the underline outright
 * (we never want one) and re-assert our link colours scoped to the container
 * so they win at (0,2,0). */
.brewser-browse a { text-decoration: none !important; line-height: 12px; color: inherit; }
.brewser-browse .brewser-browse__facet-link { color: var(--bw-text); }
.brewser-browse .brewser-browse__facet-link:hover,
.brewser-browse .brewser-browse__facet-link.is-active { color: var(--bw-brown); }
.brewser-browse .brewser-browse__sort { color: var(--bw-muted); }
.brewser-browse .brewser-browse__sort:hover,
.brewser-browse .brewser-browse__sort.is-active { color: #222222; }
.brewser-browse .brewser-browse__page { color: var(--bw-cyan); }
.brewser-browse .brewser-browse__page:hover { color: #04252e; }
.brewser-browse .brewser-browse__name { color: var(--bw-yellow); }
.brewser-browse .brewser-browse__price { color: #000; }
.brewser-browse .brewser-browse__price.is-free { color: #000; }

.brewser-agent {
  text-align: center;
  background: var(--brewser-panel);
  color: var(--bw-text);
  padding: 6px;
  border-radius: 8px;
  border: 2px solid var(--bw-border-soft);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.06);
}

.brewser-browse__inner {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

/* ---- Facets (left) ---- */
.brewser-browse__facets {
	flex: 0 0 210px;
	max-width: 210px;
	display: flex;
	flex-direction: column;
	gap: 22px;
    background: var(--bw-panel);
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.06);
	border: 1px solid var(--bw-border-soft);
    padding: 12px;
    border-radius: 8px;
}

.brewser-browse__facets a {
  line-height: 18px;
}

/* Collapsible facet header (a <button>): reset native button chrome and lay the
   chevron out to the LEFT of the label. */
.brewser-browse__facet-title {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bw-muted);
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}
.brewser-browse__facet-title:hover { color: var(--bw-text); }
/* The header is intentionally chromeless. Some themes (e.g. HybridMag) paint a
   solid background on a button's :hover/:focus/:active state, which otherwise
   shows as a black box behind the title text. Keep it transparent in every state
   — :hover MUST be included, or the theme's hover fill paints black until the
   button is focused (clicked), after which the :focus reset masks it. */
.brewser-browse__facet-title:hover,
.brewser-browse__facet-title:focus,
.brewser-browse__facet-title:active {
	background: none;
	box-shadow: none;
}
/* Chevron: a small box with two borders → points DOWN when expanded, RIGHT when
   the group is collapsed. currentColor tracks the title colour (incl. hover). */
.brewser-browse__facet-chevron {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}
.brewser-browse__facet.is-collapsed .brewser-browse__facet-chevron {
	margin-top: 0;
	transform: rotate(-45deg);
}
/* The theme-style toggle box (chevron in a bordered cell) is drawer-only (see the
   mobile-filters block); desktop uses the CSS caret above, so hide it by default. */
.brewser-browse__facet-toggle { display: none; }
.brewser-browse__facet.is-collapsed .brewser-browse__facet-list { display: none; }
.brewser-browse__facet-list { list-style: none; margin: 0; padding: 0; }
.brewser-browse__facet-list li { margin: 0; }
.brewser-browse__facet-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 10px;
	border-radius: 6px;
	color: var(--bw-text);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.3;
}
.brewser-browse__facet-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brewser-browse__facet-link:hover { background: var(--bw-brown-light); color: var(--bw-brown); }
.brewser-browse__facet-link.is-active {
	background: var(--bw-brown-light);
	color: var(--bw-brown-soft);
	font-weight: 600;
	/* box-shadow: inset 2px 0 0 var(--bw-brown); */
}
/* "All" is the no-filter default — when it's the active option, don't paint the
   selected background (nothing is actually filtered); the accent text still marks
   it. Hover still highlights, for consistency with the other rows. */
.brewser-browse__facet-link--all.is-active:not(:hover) { background: none; }
/* Dark mode (HybridMag adds html.hm-dark): the light-cream highlight (#FAEEDA) that
   backs the active/hover facet row is too bright on the dark panel — swap the token
   for a dark brown so the selection reads as a subtle tint. Only --bw-brown-light
   uses this, so the override is scoped to that highlight. */
html.hm-dark .brewser-browse { --bw-brown: #F0A828; }
html.hm-dark .brewser-browse { --bw-brown-light: #2E2617; }
/* Cross-filtered per-option count: muted, tabular figures, flush right; picks up
   the brown accent on the active/hovered row, dimmed when the option is empty. */
.brewser-browse__facet-count {
	flex: 0 0 auto;
	color: var(--bw-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	font-weight: 400;
}
.brewser-browse__facet-link:hover .brewser-browse__facet-count,
.brewser-browse__facet-link.is-active .brewser-browse__facet-count { color: var(--bw-brown); }
.brewser-browse__facet-count.is-empty { opacity: 0.45; }

/* ---- Main (right) ---- */
.brewser-browse__main { flex: 1 1 auto; min-width: 0; }

.brewser-browse__topbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bw-line);
}
.brewser-browse__heading { margin: 0; font-size: 22px; color: var(--bw-cyan); font-weight: 600; }
.brewser-browse__count { color: var(--bw-muted); font-size: 14px; }

/* ---- Search field (topbar) ---- */
.brewser-browse__search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Grow to fill the space between the results count and the sort tabs so the
	   topbar has no dead gap in the middle. This works only because the sort tabs
	   no longer carry margin-left:auto — an auto margin would swallow the free
	   space before flex-grow ever sees it. min-width keeps a sane floor before the
	   row wraps on narrow screens. */
	flex: 1 1 auto;
	min-width: 200px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--bw-panel);
	border: 1px solid var(--bw-border-soft);
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.06);
}
.brewser-browse__search:focus-within { border-color: var(--bw-brown); }
.brewser-browse__search-icon { flex: 0 0 auto; color: var(--bw-muted); }
.brewser-browse__search-input {
	flex: 1 1 auto;
	background: none!important;
	min-width: 0!important;
	margin: 0!important;
	padding: 0!important;
	border: 0!important;
	background: transparent;
	outline: none;
	color: var(--bw-text);
	font-size: 14px;
	line-height: 1.3;
}
.brewser-browse__search-input::placeholder { color: var(--bw-muted); opacity: 1; }
/* Hide the browser's native search × so our button is the single, styled clear. */
.brewser-browse__search-input::-webkit-search-cancel-button,
.brewser-browse__search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.brewser-browse__search-clear {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 3px;
	border: 0;
	background: transparent;
	color: var(--bw-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.brewser-browse__search-clear:hover { color: var(--bw-text); background: var(--bw-panel-2); }

.brewser-browse__sorts {
	/* No margin-left:auto — the growing search field (flex:1) is what pushes the
	   sort tabs to the right edge now. An auto margin here would eat the free
	   space and stop the search from expanding. */
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	background: var(--bw-panel);
    padding: 5px;
    border-radius: 25px;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.06);
	border: 1px solid var(--bw-border-soft);
}
.brewser-browse__sort {
	padding: 6px 12px;
	border-radius: 999px;
	color: var(--bw-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
.brewser-browse__sort:hover { color: #222222; }
.brewser-browse__sort.is-active { color: var(--bw-brown); background: var(--bw-brown-soft); }

/* ---- Grid + cards ---- */
.brewser-browse__grid {
	display: grid;
	grid-template-columns: repeat(var(--bwb-cols, 4), minmax(0, 1fr));
	gap: 16px;
}
.brewser-browse__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bw-panel);
	border: 1px solid var(--bw-border-soft);
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	text-decoration: none;
	color: var(--bw-text);
}
.brewser-browse__card:hover { border-color: var(--bw-border); }
.brewser-browse__card:focus-visible { outline: 2px solid var(--bw-cyan); outline-offset: 2px; }

.brewser-browse__thumb {
	position: relative; /* anchor for the price badge */
	display: block;
	width: 100%;
	aspect-ratio: 480 / 380;
	background: var(--bw-panel-2);
	overflow: hidden;
}
.brewser-browse__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dim the STILL thumbnail only in dark mode — never the animated overlay, whose
 * own opacity (0 at rest, 1 on hover) must win. Without :not(), this (0,2,2)
 * rule outranked .brewser-browse__thumb-gif {opacity:0} (0,1,0) and the GIF kept
 * showing after hover-out once loaded. */
html.hm-dark .brewser-browse__thumb img:not(.brewser-browse__thumb-gif) { opacity: 0.9; }

.brewser-browse__thumb-empty { display: block; width: 100%; height: 100%; }
/* Animated-banner GIF: fades in over the still thumbnail on card hover; its src
 * is lazy-set by JS on first hover (so the grid doesn't fetch every GIF up
 * front). CSS-cropped to the thumb box via object-fit; animation preserved. */
.brewser-browse__thumb-gif {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.brewser-browse__card:hover .brewser-browse__thumb-gif.is-loaded { opacity: 1; }
/* Same hover-to-play GIF layer on the "Featured this week" banner media. It
 * reuses .brewser-browse__thumb-gif (position/fade), revealed by hovering
 * anywhere on the banner — mirroring the whole-card hover on the grid. */
.brewser-browse__featured:hover .brewser-browse__thumb-gif.is-loaded { opacity: 1; }

/* Column that fills the (grid-stretched) card height so the meta row can be
   pinned to the bottom — see .brewser-browse__meta { margin-top:auto }. Without
   flex:1 the body only grows to its content, and a short title/blurb leaves the
   meta floating mid-card instead of aligned across the row. */
.brewser-browse__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 10px 12px 12px; }
/* Category taxonomy pill(s) above the card title. One nowrap row (overflow
   clipped) so a multi-category app never breaks the uniform card height; the
   row height is reserved so a category-less card stays aligned with the grid. */
.brewser-browse__cats {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	overflow: hidden;
	min-height: 23px; /* matches a rendered pill so category-less cards don't jitter */
	margin-bottom: 6px;
}
/* Scoped with .brewser-browse so the colour beats the theme's link/text rules. */
.brewser-browse .brewser-browse__cat {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--bw-panel-2);
	border: 1px solid var(--bw-border-soft);
	color: var(--bw-muted);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}
.brewser-browse__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--bw-yellow);
	line-height: 1.25;
	margin-bottom: 6px;
	/*
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	*/
}
/* Active-filters banner above the results — one removable chip per active
   filter (platform/category/genre/tags/publisher) + a Clear link. */
.brewser-browse__filter-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-bottom: 14px;
	padding: 10px 14px;
	border: 1px solid var(--bw-border-soft);
	border-radius: 8px;
	background: var(--bw-panel);
	font-size: 14px;
	color: var(--bw-text);
}
.brewser-browse__filter-label {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--bw-muted);
}
.brewser-browse__filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
}
/* Chip is a "remove this filter" link. Scoped with .brewser-browse so its colour
   beats the global `.brewser-browse a { color: inherit }` reset (0,1,1). */
.brewser-browse .brewser-browse__filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 6px 3px 10px;
	border-radius: 999px;
	background: var(--bw-panel-2);
	border: 1px solid var(--bw-border-soft);
	color: var(--bw-text);
	font-size: 13px;
	line-height: 1.4;
}
.brewser-browse .brewser-browse__filter-chip:hover { border-color: var(--bw-cyan); }
.brewser-browse__filter-chip-type { color: var(--bw-muted); font-weight: 600; }
.brewser-browse__filter-chip-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bw-panel);
	color: var(--bw-muted);
	font-size: 14px;
	line-height: 1;
}
.brewser-browse .brewser-browse__filter-chip:hover .brewser-browse__filter-chip-x {
	color: var(--bw-cyan);
}
.brewser-browse .brewser-browse__filter-clear {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--bw-brown);
	font-size: 13px;
	font-weight: 600;
}
.brewser-browse .brewser-browse__filter-clear:hover { color: var(--bw-text); }

/* One-line blurb (post excerpt). Clamped to two lines so cards stay uniform. */
.brewser-browse__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 10px;
	/* line-height: 1.35; */
	color: var(--bw-muted);
	margin-bottom: 8px;
	/* Fixed 2-line height (2 × line-height) — reserved even when the blurb is
	 * short or empty, so every card is the same height and rows stay aligned. */
	height: 2.6em;
}
.brewser-browse__meta {
	display: flex;
	align-items: center; /* rating text + platform icons share one line */
	justify-content: space-between;
	gap: 8px;
	min-height: 18px;    /* reserve the line even when a card has neither */
	margin-top: auto;    /* pin to the card bottom regardless of title/blurb length */
	font-size: 12.5px;
	color: var(--bw-muted);
}
/* Price badge — overlaid at the top-right corner of the featured image. */
.brewser-browse__price {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	padding: 1px 7px;
	border-radius: 12px;
	background: aliceblue;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	color: #000;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
}
.brewser-browse__price.is-free { color: #000; }
/* Dark mode (HybridMag adds html.hm-dark) — reverse the price pill: dark fill,
 * aliceblue text. The `.is-free` selector is listed explicitly so it outranks
 * the (0,3,0) theme-override colour rule above. */
html.hm-dark .brewser-browse__price,
html.hm-dark .brewser-browse__price.is-free {
	background: #000;
	color: aliceblue;
}
.brewser-browse__platforms {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex-wrap: nowrap;
	overflow: hidden;
	text-align: right;
	/* Stay pinned right even when the price is hidden (Price facet off), so the
	 * meta row doesn't shift the platforms to the left edge. */
	margin-left: auto;
}
/* PNG platform icon (set per-term under Posts → Platforms). object-fit keeps
 * non-square art from distorting; the box stays fixed so cards stay aligned. */
.brewser-browse__platform-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: block;
	flex: 0 0 auto;
}
/* Text fallback for platforms without an icon — separated by a middot so a
 * mix of icons and words still reads cleanly. */
.brewser-browse__platform-text { white-space: nowrap; }
.brewser-browse__platform-text + .brewser-browse__platform-text::before {
	content: "· ";
	color: var(--bw-muted);
}
/* Counts group in the meta row: "★ 4 (1) | 7 visits" (left of the platforms). */
.brewser-browse__counts {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.brewser-browse__rating { color: var(--bw-yellow); font-weight: 600; white-space: nowrap; }
html:not(.hm-dark) .brewser-browse__rating { color: var(--bw-brown); }

.brewser-browse__visits { color: var(--bw-muted); font-weight: 600; white-space: nowrap; }
.brewser-browse__count-sep { color: var(--bw-border-soft); }

.brewser-browse__empty { color: var(--bw-muted); font-style: italic; padding: 32px 4px; }

/* Search-specific empty state: a framed, centred card (not a blank grid). */
.brewser-browse__empty--search {
	font-style: normal;
	text-align: center;
	padding: 40px 20px;
	border: 1px dashed var(--bw-border-soft);
	border-radius: 12px;
	background: var(--bw-panel);
}
.brewser-browse__empty-title { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--bw-text); }
.brewser-browse__empty-hint { margin: 0; font-size: 14px; color: var(--bw-muted); }
/* Two-class scope beats the global `.brewser-browse a {color:inherit}` (0,1,1). */
.brewser-browse .brewser-browse__empty-clear { color: var(--bw-brown); font-weight: 600; }

/* ---- Pagination ---- */
.brewser-browse__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}
.brewser-browse__page {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--bw-border);
	color: var(--bw-cyan);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.brewser-browse__page:hover { background: var(--bw-cyan); color: #04252e; }
.brewser-browse__page-info { color: var(--bw-muted); font-size: 13px; }

/* ---- Loading state (JS fetch in flight) ---- */
.brewser-browse.is-loading .brewser-browse__grid { opacity: 0.5; pointer-events: none; }
.brewser-browse.is-loading { cursor: progress; }

/* ---- Screenshots hover gallery ------------------------------------------
 * Hovering a card that has screenshots pops a preview panel to the LEFT of the
 * card. Pure CSS + server-rendered markup so it survives the JS that swaps the
 * grid HTML on facet/sort/page changes. The card's base overflow:hidden clips
 * the thumb's rounded corners; on hover we let it show so the panel can escape.
 */
.brewser-browse__card { position: relative; }
.brewser-browse__card.has-shots:hover { overflow: visible; z-index: 20; }
.brewser-browse__shots {
	position: absolute;
	top: 0;
	right: 100%;            /* immediately to the LEFT of the card */
	width: 220px;
	max-width: 60vw;
	margin-right: 8px;
	padding: 8px;
	background: var(--bw-panel);
	border: 1px solid var(--bw-border);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateX(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;   /* preview only — a click still opens the app link */
	z-index: 20;
}
.brewser-browse__card.has-shots:hover .brewser-browse__shots {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
/* One-at-a-time slideshow: every screenshot shares a single slot. The first one
 * (kept in flow) sizes the slot; the rest overlay it absolutely. On hover they
 * cross-fade so exactly one shows at a time and the rest cycle through. */
.brewser-browse__shot {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	overflow: hidden;
	background: var(--bw-panel-2);
	opacity: 0;
}
.brewser-browse__shot:first-child {
	position: relative;     /* the sizer — gives the slot its height */
	top: auto;
	left: auto;
	right: auto;
	width: 100%;
}
.brewser-browse__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 1 screenshot — no cycling, just show it. */
.brewser-browse__card.has-shots:hover .brewser-browse__shots[data-count="1"] .brewser-browse__shot { opacity: 1; }

/* 2 screenshots — alternate. */
.brewser-browse__card.has-shots:hover .brewser-browse__shots[data-count="2"] .brewser-browse__shot:nth-child(1) { animation: bwb-shots-2a 6s ease-in-out infinite; }
.brewser-browse__card.has-shots:hover .brewser-browse__shots[data-count="2"] .brewser-browse__shot:nth-child(2) { animation: bwb-shots-2b 6s ease-in-out infinite; }
@keyframes bwb-shots-2a { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bwb-shots-2b { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* 3 screenshots — cycle through. */
.brewser-browse__card.has-shots:hover .brewser-browse__shots[data-count="3"] .brewser-browse__shot:nth-child(1) { animation: bwb-shots-3a 9s ease-in-out infinite; }
.brewser-browse__card.has-shots:hover .brewser-browse__shots[data-count="3"] .brewser-browse__shot:nth-child(2) { animation: bwb-shots-3b 9s ease-in-out infinite; }
.brewser-browse__card.has-shots:hover .brewser-browse__shots[data-count="3"] .brewser-browse__shot:nth-child(3) { animation: bwb-shots-3c 9s ease-in-out infinite; }
@keyframes bwb-shots-3a { 0%, 28% { opacity: 1; } 33%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bwb-shots-3b { 0%, 28% { opacity: 0; } 33%, 61% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes bwb-shots-3c { 0%, 61% { opacity: 0; } 66%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* Respect reduced-motion: no cycling, just show the first screenshot. */
@media (prefers-reduced-motion: reduce) {
	.brewser-browse__shot { animation: none !important; }
	.brewser-browse__card.has-shots:hover .brewser-browse__shots .brewser-browse__shot:first-child { opacity: 1; }
}

/* ---- Responsive: filters move to the mobile drawer on phones ----
   Fires for narrow/portrait phones (≤640px) OR a phone held in landscape (a short
   viewport, often WIDER than 640px, so a width-only query would miss it — hence the
   max-height gate). Tablets/desktops keep the side-by-side facets. On phones the
   filters live in the theme's slide-out drawer (mirrored via the PHP hook), so the
   inline sidebar is hidden and the grid takes the full width. */
@media (max-width: 640px), (orientation: landscape) and (max-width: 1024px) and (max-height: 500px) {
	.brewser-browse__inner > .brewser-browse__facets { display: none; }
	/* Phones: the search takes its own full-width row so the fold is predictable —
	   search on line 1, the count + sort tabs wrap onto the line(s) below — instead
	   of the three items fighting for one cramped row. */
	.brewser-browse__search { flex-basis: 100%; }
	/* No room to the side on phones — drop the hover gallery. */
	.brewser-browse__shots { display: none; }
}

/* Card grid columns on phones — override the admin's column count (the inline
   --bwb-cols, e.g. 5) so the grid actually folds instead of staying 5 tiny columns.
   Portrait → 2 across; landscape (short viewport) → 3 across. */
@media (max-width: 640px) and (orientation: portrait) {
	.brewser-browse__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 500px) {
	.brewser-browse__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Mobile drawer mirror: the facets rendered inside #hm-mobile-sidebar ----
   Styled to match the theme's own mobile nav menu (.hm-mobile-menu): each facet
   group is a divided row with a right-side rotating chevron, and its options are an
   indented sub-list that folds — the same design + folding as the menu above it.
   Uses the theme's border/font tokens so the dividers line up with the nav. */
.brewser-browse__mobile-filters { margin: 0 0 20px; }
.brewser-browse__mobile-filters-title {
	margin: 0;
	line-height: 45px;
	font-size: var(--hybridmag-font-size-base, 16px);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: inherit;
	border-top: 1px solid var(--hybridmag-color-border, var(--bw-border-soft));
	border-bottom: 1px solid var(--hybridmag-color-border, var(--bw-border-soft));
}
/* Strip the desktop sidebar's card chrome; become a plain bordered menu list. */
.brewser-browse__mobile-filters .brewser-browse__facets {
	display: block;
	flex: none;
	max-width: none;
	width: auto;
	gap: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}
/* Facet group = a menu item row; a divider below it, relative for the toggle. */
.brewser-browse__mobile-filters .brewser-browse__facet {
	position: relative;
	border-bottom: 1px solid var(--hybridmag-color-border, var(--bw-border-soft));
}
.brewser-browse__mobile-filters .brewser-browse__facet-title {
	justify-content: space-between;
	gap: 0;
	margin: 0;
	padding: 0;
	line-height: 45px;
	font-size: var(--hybridmag-font-size-base, 16px);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: inherit;
}
/* Fold toggle = the theme's dropdown-toggle look: a full-height BORDERED cell on the
   right (border-left is the divider before the chevron; border-right sits at the row
   edge), holding the theme's own fa-chevron-down (hm-svg-icon). Points DOWN when
   collapsed, UP when open — the 180° flip the theme applies via .toggled-on. */
.brewser-browse__mobile-filters .brewser-browse__facet-chevron { display: none; }
.brewser-browse__mobile-filters .brewser-browse__facet-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 0 0 auto;
	padding: 0 15px;
	color: inherit;
	border-left: 1px solid var(--hybridmag-color-border, var(--bw-border-soft));
	border-right: 1px solid var(--hybridmag-color-border, var(--bw-border-soft));
}
.brewser-browse__mobile-filters .brewser-browse__facet-toggle svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	transform: rotate(180deg);
	transition: transform 0.15s ease;
}
.brewser-browse__mobile-filters .brewser-browse__facet.is-collapsed .brewser-browse__facet-toggle svg {
	transform: none;
}
/* Options = the theme's sub-menu: indented 20px, bordered-top, divided rows. Keeps
   the filter affordances (per-option count + active highlight). */
.brewser-browse__mobile-filters .brewser-browse__facet-list {
	padding: 0 0 0 20px;
	border-top: 1px solid var(--hybridmag-color-border, var(--bw-border-soft));
}
.brewser-browse__mobile-filters .brewser-browse__facet-list li:not(:last-child) {
	border-bottom: 1px solid var(--hybridmag-color-border, var(--bw-border-soft));
}
.brewser-browse__mobile-filters .brewser-browse__facet-link {
	padding: 9px 12px 9px 0;
	border-radius: 0;
}

/* ---- Featured this week ---------------------------------------------------
 * Editorial slot between the header and the toolbar, spanning the main column
 * (right of the facets). Screenshot left, text right, ~150px tall. The surface
 * is the card colour with a hairline border; the ONE amber accent is the chip;
 * the CTA is an OUTLINED pill (the filled accent stays reserved for
 * "Submit your App"). Shown only in the default state (server-gated), so it's
 * part of the JS-swapped inner shell and just disappears when a filter is on.
 */
.brewser-browse__featured {
	display: flex;
	align-items: stretch;
	max-height: 150px;
	margin-bottom: 18px;
	background: var(--bw-panel);
	border: 1px solid var(--bw-line);
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	overflow: hidden;
}
.brewser-browse .brewser-browse__featured-media {
	flex: 0 0 34%;
	max-width: 260px;
	display: block;
	position: relative;
	background: var(--bw-panel-2);
	overflow: hidden;
}
.brewser-browse__featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.hm-dark .brewser-browse__featured-media img:not(.brewser-browse__thumb-gif) { opacity: 0.9; }
.brewser-browse__featured-media-empty { display: block; width: 100%; height: 100%; }
.brewser-browse__featured-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Tightened so the chip + one-line title + one-line blurb + foot row all fit
	   inside the 150px cap without the overflow clipping the "Open app" button. */
	padding: 12px 18px;
}
/* The single amber accent on the whole banner. */
.brewser-browse__featured-chip {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(240, 168, 40, 0.12);
	border: 1px solid rgba(240, 168, 40, 0.45);
	color: var(--bw-brown-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.5;
}
.brewser-browse__featured-chip::before { content: "\2605"; font-size: 11px; line-height: 1; }
.brewser-browse .brewser-browse__featured-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--bw-text);
	line-height: 1.2;
	/* One line only — a wrapping title would overflow the 150px cap and clip. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.brewser-browse__featured-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	color: var(--bw-muted);
	font-size: 13.5px;
	line-height: 1.4;
}
.brewser-browse__featured-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}
.brewser-browse__featured-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--bw-muted);
}
.brewser-browse__featured-dot { color: var(--bw-border-soft); }
.brewser-browse__featured-platforms { display: inline-flex; align-items: center; gap: 6px; }
/* Outlined CTA — deliberately not filled and not amber. */
.brewser-browse .brewser-browse__featured-open {
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--bw-border-soft);
	background: transparent;
	color: var(--bw-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.brewser-browse .brewser-browse__featured-open:hover { border-color: var(--bw-brown); color: var(--bw-brown); }
/* Stack media over text on narrow screens; the page never scrolls sideways. The
   150px cap is desktop-only — stacked, the media alone is 140px, so lift it and
   let the banner grow to its natural height. */
@media (max-width: 640px) {
	.brewser-browse__featured { flex-direction: column; max-height: none; }
	.brewser-browse .brewser-browse__featured-media { flex: 0 0 auto; max-width: none; height: 140px; }
	.brewser-browse__featured-foot { flex-wrap: wrap; }
	.brewser-browse .brewser-browse__featured-open { margin-left: 0; }
}