/* Public category browse pages. Cards/market-context reuse search.css. */

.browse-wrap { max-width: 1200px; margin: 0 auto; padding: 44px 20px 60px; }

/* Centered, homepage-style category header */
.browse-hero {
  text-align: center;
  padding: 10px 0 28px;
  margin-bottom: 22px;
}
.browse-hero-title {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; margin-bottom: 14px;
}
.browse-hero-title h1 {
  font-size: 2.1rem; font-weight: 800; margin: 0; color: var(--text); line-height: 1.12;
}
.browse-hero h1 span { color: var(--primary); }
.browse-hero p { color: var(--text-light); font-size: 1rem; max-width: 560px; margin: 0 auto; }

.browse-hero-badge {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 19px;
  background: var(--primary-bg); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.25);
}
.browse-hero-ico {
  width: 38px; height: 38px; background-color: var(--primary);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* Location toolbar button shares the Filter & sort styling */
.browse-loc-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font);
  font-size: .85rem; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 16px; cursor: pointer; transition: all .15s; max-width: 220px;
}
.browse-loc-btn:hover, .browse-loc-btn.has-active { border-color: var(--primary); color: var(--primary); }
.browse-loc-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.browse-loc-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browse-loc-btn.has-active { background: var(--primary-bg-strong); }
.result-dist {
  font-size: .72rem; font-weight: 600; color: var(--primary);
  margin-left: 6px;
}
@media (max-width: 640px) {
  .browse-wrap { padding-top: 32px; }
  .browse-hero-title h1 { font-size: 1.6rem; }
  .browse-hero-badge { width: 54px; height: 54px; border-radius: 16px; }
  .browse-hero-ico { width: 32px; height: 32px; }
}

.browse-breadcrumb {
  font-size: .8rem; color: var(--text-muted); margin-bottom: 14px; text-align: center;
}
.browse-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.browse-breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.browse-breadcrumb .sep { margin: 0 6px; opacity: .6; }

/* Category nav rail */
.browse-cats {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px;
}
.browse-cats a {
  font-size: .82rem; font-weight: 600; color: var(--text-light);
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 14px; text-decoration: none; transition: all .15s; white-space: nowrap;
}
.browse-cats a:hover { border-color: var(--primary); color: var(--primary); }
.browse-cats a.active {
  border-color: var(--primary); background: var(--primary-bg-strong); color: var(--primary);
}

/* L2 sub-category rail */
.browse-subcats {
  display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 22px;
}
.browse-subcats a {
  font-size: .8rem; font-weight: 500; color: var(--text-light);
  background: transparent; border: 1px solid var(--border); border-radius: 16px;
  padding: 5px 12px; text-decoration: none; transition: all .15s;
}
.browse-subcats a:hover { border-color: var(--primary); color: var(--primary); }
.browse-subcats a.active { border-color: var(--primary); background: var(--primary); color: #fff; }

/* App-style subcategory icon chips (mirrors Android CategoriesActivity) */
.browse-subcat-strip {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 24px; justify-content: center;
}
.browse-subcat-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 22px;
  padding: 8px 15px 8px 11px; text-decoration: none; transition: all .15s; white-space: nowrap;
}
.browse-subcat-chip:hover { border-color: var(--primary); }
.browse-subcat-chip.active {
  border-color: var(--primary); background: var(--primary-bg-strong); color: var(--primary);
}
.browse-chip-ico {
  flex: 0 0 auto; width: 20px; height: 20px;
  background-color: var(--primary);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.browse-loading {
  grid-column: 1 / -1; text-align: center; padding: 60px 0;
  color: var(--text-light); font-size: .95rem;
}
.browse-loading-more { text-align: center; padding: 6px 0; color: var(--text-light); font-size: .9rem; }

/* Skeleton placeholder cards (shown while listings load) */
.skel-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.skel-img { width: 100%; aspect-ratio: 4/3; }
.skel-body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.skel-line { border-radius: 6px; height: 12px; }
.skel-badge { width: 38%; height: 14px; border-radius: 20px; }
.skel-title { width: 92%; }
.skel-title.short { width: 60%; }
.skel-price { width: 34%; height: 16px; margin-top: 2px; }
.skel-img, .skel-line {
  background: linear-gradient(100deg, var(--surface, #eef0f2) 30%, rgba(255,255,255,.65) 50%, var(--surface, #eef0f2) 70%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.25s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Infinite-scroll spinner */
.browse-spinner {
  width: 26px; height: 26px; margin: 8px auto; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: browse-spin .7s linear infinite;
}
@keyframes browse-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .skel-img, .skel-line { animation: none; }
  .browse-spinner { animation-duration: 1.6s; }
}

/* Guest "create alert" CTA — sits between the toolbar and the grid. Hidden for
   logged-in users (they already have alerts via the app). */
.browse-alert-cta {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 12px 16px;
  background: var(--primary-bg-strong, #eafaf4);
  border: 1px solid rgba(16, 163, 127, .18); border-radius: 12px;
}
.browse-alert-ico { display: flex; color: var(--primary); flex: 0 0 auto; }
.browse-alert-ico svg { width: 20px; height: 20px; }
.browse-alert-text { flex: 1 1 auto; font-size: .9rem; color: var(--text); font-weight: 500; line-height: 1.4; }
.browse-alert-btn {
  flex: 0 0 auto; padding: 9px 16px; border: none; border-radius: 8px;
  background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem;
  cursor: pointer; transition: opacity .15s, transform .15s; white-space: nowrap;
}
.browse-alert-btn:hover { opacity: .92; transform: translateY(-1px); }
html.fm-logged-in .browse-alert-cta { display: none !important; }
@media (max-width: 600px) {
  .browse-alert-cta { flex-wrap: wrap; }
  .browse-alert-text { flex: 1 1 100%; order: 1; }
  .browse-alert-ico { order: 0; }
  .browse-alert-btn { order: 2; width: 100%; }
}

/* Toolbar (Filter & sort + Location) below the subcategory chips */
.browse-toolbar {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  flex-wrap: wrap; margin: 0 0 18px;
}
/* "Categories" button: mobile-only entry point to the category sheet. Scoped
   under .browse-toolbar to beat the base .browse-fs-btn display. */
.browse-toolbar .browse-cat-btn { display: none; }
/* Category sheet: the primary mobile navigation surface, so it fills the whole
   screen (full width + height) rather than sitting as a small left-side card.
   Reuse the bottom-sheet chrome but let the cloned directory scroll inside it
   (the sidebar's sticky positioning must be neutralised). */
.browse-sheet-overlay.browse-cat-overlay { align-items: stretch; padding: 0; }
.browse-cat-overlay .browse-cat-sheet {
  max-width: none; width: 100%; height: 100%; max-height: 100%;
  border-radius: 0;
}
.browse-cat-sheet { display: flex; flex-direction: column; align-items: stretch; }
.browse-cat-sheet-nav.discover-sidebar {
  position: static; top: auto; max-height: none; overflow-y: auto; flex: 1 1 auto;
  width: 100%; align-self: stretch; margin: 0; padding: 4px 0 8px; border: none;
}
.browse-cat-overlay .browse-cat-sheet-nav .discover-cat-nav { width: 100%; }
@media (max-width: 900px) {
  .browse-toolbar .browse-cat-btn { display: inline-flex; }
}
.browse-toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.browse-fs-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font);
  font-size: .85rem; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 16px; cursor: pointer; transition: all .15s;
}
.browse-fs-btn:hover, .browse-fs-btn.has-active { border-color: var(--primary); color: var(--primary); }
.browse-fs-btn svg { width: 17px; height: 17px; }
.browse-fs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }

/* Filter & sort sheet (mirrors the app's bottom sheet) */
.browse-sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s; padding: 0;
}
.browse-sheet-overlay.open { opacity: 1; }
.browse-sheet {
  background: var(--bg); width: 100%; max-width: 560px;
  border-radius: 18px 18px 0 0; padding: 20px 22px 24px; max-height: 86vh; overflow-y: auto;
  transform: translateY(24px); transition: transform .22s;
}
.browse-sheet-overlay.open .browse-sheet { transform: translateY(0); }
.browse-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.browse-sheet-head h3 { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--text); }
.browse-sheet-close {
  border: none; background: var(--surface, #f1f1f1); width: 32px; height: 32px; border-radius: 50%;
  font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--text-light);
}
.bs-section { margin-bottom: 22px; }
.bs-label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 11px; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-chip {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font);
  font-size: .85rem; font-weight: 600; color: var(--text-light);
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
  padding: 8px 14px; cursor: pointer; transition: all .15s;
}
.bs-chip:hover { border-color: var(--primary); }
.bs-chip.active { border-color: var(--primary); background: var(--primary-bg-strong); color: var(--primary); }
.bs-chip img { width: 16px; height: 16px; object-fit: contain; }
.bs-price-row { display: flex; align-items: center; gap: 12px; }
.bs-price-row input {
  flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--font); font-size: .92rem; color: var(--text); background: var(--bg);
}
.bs-price-row input:focus { outline: none; border-color: var(--primary); }
.bs-price-sep { color: var(--text-muted); }
.bs-footer { display: flex; gap: 12px; margin-top: 6px; }
.bs-reset, .bs-apply {
  flex: 1; padding: 13px; border-radius: 11px; font-family: var(--font); font-weight: 700;
  font-size: .92rem; cursor: pointer; transition: all .15s; border: 1px solid var(--border);
}
.bs-reset { background: var(--bg); color: var(--text); }
.bs-reset:hover { border-color: var(--primary); color: var(--primary); }
.bs-apply { background: var(--primary); color: #fff; border-color: var(--primary); }
.bs-apply:hover { filter: brightness(.95); }

/* Location popup */
.browse-loc-sheet .bs-section:last-child { margin-bottom: 0; }
.bs-loc-input {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 12px; padding: 0 14px;
  transition: border-color .15s;
}
.bs-loc-input:focus-within { border-color: var(--primary); }
.bs-loc-ico { display: flex; color: var(--text-muted); flex: 0 0 auto; }
.bs-loc-ico svg { width: 18px; height: 18px; }
.bs-loc-input input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: .95rem; color: var(--text); padding: 13px 0;
}
.bs-loc-results { margin-top: 8px; display: flex; flex-direction: column; }
.bs-loc-item {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  font-family: var(--font); font-size: .9rem; color: var(--text);
  background: none; border: none; border-radius: 10px; padding: 10px 10px; cursor: pointer;
}
.bs-loc-item:hover { background: var(--primary-bg); }
.bs-loc-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-muted); }
.bs-loc-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-loc-empty { padding: 12px 10px; color: var(--text-muted); font-size: .88rem; }
.bs-loc-geo {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  font-family: var(--font); font-size: .92rem; font-weight: 700; color: var(--primary);
  background: var(--primary-bg); border: 1px solid var(--primary); border-radius: 12px;
  padding: 13px; cursor: pointer; transition: filter .15s;
}
.bs-loc-geo:hover { filter: brightness(.97); }
.bs-loc-geo:disabled { opacity: .7; cursor: default; }
.bs-loc-geo svg { width: 18px; height: 18px; }
.bs-loc-clear {
  display: block; width: 100%; margin-top: 10px;
  font-family: var(--font); font-size: .9rem; font-weight: 600; color: var(--text-light);
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; cursor: pointer; transition: all .15s;
}
.bs-loc-clear:hover { border-color: var(--primary); color: var(--primary); }

@media (min-width: 700px) {
  .browse-sheet-overlay { align-items: center; }
  .browse-sheet { border-radius: 18px; }
}

.browse-loadmore { display: flex; justify-content: center; align-items: center; min-height: 24px; margin: 28px 0 0; }
.browse-loadmore-btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 11px 30px; border-radius: 10px; font-weight: 700; font-size: .9rem;
  cursor: pointer; font-family: var(--font); transition: all .2s;
}
.browse-loadmore-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Discover rails */
.discover-rail { margin-bottom: 34px; }
.discover-rail-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px;
}
.discover-rail-head h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0; }
.discover-rail-head a {
  font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap;
}
.discover-rail-head a:hover { text-decoration: underline; }
.discover-rail-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
}
.discover-rail-grid .result-card { scroll-snap-align: start; }
.discover-rail-grid:empty {
  min-height: 220px; border: 1px dashed var(--border); border-radius: 12px;
  display: block; opacity: .4;
}
@media (min-width: 900px) {
  .discover-rail-grid { grid-auto-columns: minmax(190px, 1fr); }
}

/* Popular cities internal-link block */
.browse-cities { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); }
.browse-cities h2 { font-size: 1.05rem; color: var(--text); margin: 0 0 12px; }

/* SEO copy block below the grid */
.browse-about {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border);
  color: var(--text-light); font-size: .9rem; line-height: 1.65; max-width: 760px;
}
.browse-about h2 { font-size: 1.1rem; color: var(--text); margin: 0 0 10px; }

@media (max-width: 640px) {
  .browse-hero h1 { font-size: 1.5rem; }
}

/* ── Discover page: category sidebar + unified feed ── */
.discover-section-title {
  font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 16px;
}
/* Keep full width even when the feed is empty/loading (otherwise the wrap
   shrinks to the skeleton grid's tiny max-content and centers the layout). */
/* Fixed nav is ~65px tall; clear it and align the content's top with the
   sticky sidebar (which pins at the same offset) so the two columns start
   level instead of the sidebar jumping 56px lower at scroll 0. */
.catalog-page .browse-wrap { width: 100%; padding-top: 84px; }
.discover-layout {
  display: grid; grid-template-columns: 264px 1fr; gap: 32px; align-items: start;
}
.discover-feed { min-width: 0; }
.discover-feed .discover-section-title { text-align: left; }

/* ── Unified catalog right column (hub "all" feed, L1 and L2 views) ──
   The sidebar is shared chrome; only #catalogMain swaps on soft-nav. */
.catalog-main { min-width: 0; }
/* In-column header is left-aligned (the centered .browse-hero was for the old
   single-column pages). */
.catalog-main .browse-breadcrumb { text-align: left; margin-bottom: 12px; }
.catalog-header { text-align: left; padding: 0; margin: 0 0 18px; }
.catalog-header .browse-hero-title {
  flex-direction: row; align-items: center; gap: 14px; margin-bottom: 8px;
}
.catalog-header h1 {
  font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--text); line-height: 1.15;
}
.catalog-header h1 span { color: var(--primary); }
.catalog-header p { color: var(--text-light); font-size: .96rem; max-width: 640px; margin: 0; }
.catalog-header .browse-hero-badge { width: 48px; height: 48px; border-radius: 14px; }
.catalog-header .browse-hero-ico { width: 28px; height: 28px; }
.catalog-feed-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 4px 0 14px; }
.catalog-main .browse-subcat-strip { margin-top: 2px; justify-content: flex-start; }

/* ── Grid / list view toggle (mirrors the app's layout switch) ── */
.browse-view-toggle {
  margin-left: auto; display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.browse-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; background: var(--bg); border: none;
  cursor: pointer; color: var(--text-light); transition: all .15s;
}
.browse-view-btn + .browse-view-btn { border-left: 1px solid var(--border); }
.browse-view-btn svg { width: 18px; height: 18px; }
.browse-view-btn:hover { color: var(--primary); }
.browse-view-btn.active { background: var(--primary-bg-strong); color: var(--primary); }

/* Empty / error state must span the whole grid (otherwise it lands in a single
   column and looks left-aligned and cramped). text-align:center then centers it. */
.results-grid .empty-state { grid-column: 1 / -1; }

/* Richer empty state (favorites with no saved items / signed-out). */
.fav-empty { padding: 56px 24px 96px; }
.fav-empty-ico {
  width: 84px; height: 84px; margin: 0 auto 22px;
  border-radius: 50%; background: var(--bg-alt); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.fav-empty h3 { font-size: 1.3rem; }
.fav-empty p { margin-bottom: 24px; }
.fav-empty-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; border: none; cursor: pointer;
  padding: 11px 26px; border-radius: 10px; font-weight: 700; font-size: .9rem;
  font-family: var(--font); text-decoration: none; transition: background .15s ease;
}
.fav-empty-btn:hover { background: var(--primary-dark); color: #fff; }

/* Favorites uses the shared .loading-container/.spinner/.loading-text from
   search.css so its loading UI matches Search results and My Searches. The
   shared spinner sits in a single grid cell, so span the full grid width. */
.results-grid .loading-container { grid-column: 1 / -1; }

/* Favorites profile header → match the Search page header (size, font, location) */
.browse-wrap:has(#favoritesGrid) { padding-top: 96px; }
.browse-wrap:has(#favoritesGrid) .browse-breadcrumb { display: none; }
.browse-wrap:has(#favoritesGrid) .browse-hero { padding: 0; margin-bottom: 32px; }
.browse-wrap:has(#favoritesGrid) .browse-hero h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; line-height: 1.12; }
.browse-wrap:has(#favoritesGrid) .browse-hero p { font-size: .95rem; max-width: 600px; }
@media (max-width: 768px) {
  .browse-wrap:has(#favoritesGrid) { padding-top: 80px; }
  .browse-wrap:has(#favoritesGrid) .browse-hero h1 { font-size: 1.4rem; }
}

/* List view: one item per row, image left + details right (app-style). */
.results-grid.list-view { grid-template-columns: 1fr; gap: 12px; }
.results-grid.list-view .result-card,
.results-grid.list-view .skel-card { flex-direction: row; align-items: stretch; }
.results-grid.list-view .result-img,
.results-grid.list-view .result-img-placeholder,
.results-grid.list-view .skel-img {
  width: 150px; min-width: 150px; aspect-ratio: auto; align-self: stretch; object-fit: cover;
}
.results-grid.list-view .result-body,
.results-grid.list-view .skel-body { flex: 1; min-width: 0; }
.results-grid.list-view .result-body { justify-content: center; }
.results-grid.list-view .result-price { margin-top: 8px; }
.results-grid.list-view .result-title { -webkit-line-clamp: 2; }
@media (max-width: 640px) {
  .results-grid.list-view .result-img,
  .results-grid.list-view .result-img-placeholder,
  .results-grid.list-view .skel-img { width: 112px; min-width: 112px; }
}

/* Active state across the sidebar directory (server-rendered + synced by JS) */
.discover-cat-tile.active > summary,
.discover-cat-leaf.active { color: var(--primary); }
.discover-cat-leaf.active { background: var(--primary-bg); border-radius: 8px; }
.discover-dir-l2 a.active { color: var(--primary); font-weight: 700; }

/* Sticky category sidebar — full height, no inner scrollbar (it scrolls with
   the page when taller than the viewport). */
.discover-sidebar { position: sticky; top: 84px; align-self: start; }
.discover-sidebar .discover-section-title { font-size: 1rem; }
.discover-cat-nav { display: flex; flex-direction: column; }

/* Expandable category tile (native <details>) */
.discover-cat-tile { border-bottom: 1px solid var(--border); }
.discover-cat-tile > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  list-style: none; cursor: pointer; padding: 11px 10px;
  font-size: .92rem; font-weight: 600; color: var(--text); user-select: none;
}
.discover-cat-tile > summary::-webkit-details-marker { display: none; }
.discover-cat-tile > summary:hover { color: var(--primary); }
.discover-cat-head { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.discover-cat-head .browse-chip-ico { width: 20px; height: 20px; }
.discover-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discover-cat-chev { flex: 0 0 auto; color: var(--text-light); transition: transform .18s ease; }
.discover-cat-tile[open] > summary .discover-cat-chev { transform: rotate(180deg); }
.discover-cat-tile[open] > summary { color: var(--primary); }

/* Leaf category (no subcategories): plain link tile */
.discover-cat-leaf {
  display: flex; align-items: center; gap: 9px; padding: 11px 10px;
  font-size: .92rem; font-weight: 600; color: var(--text); text-decoration: none;
}
.discover-cat-leaf:hover { color: var(--primary); }
.discover-cat-leaf .browse-chip-ico { width: 20px; height: 20px; }

/* Subcategory links revealed on expand */
.discover-dir-l2 {
  list-style: none; margin: 0; padding: 2px 0 12px 39px;
  display: flex; flex-direction: column; gap: 7px;
}
.discover-dir-l2 a { color: var(--text-light); text-decoration: none; font-size: .85rem; line-height: 1.3; }
.discover-dir-l2 a:hover { color: var(--primary); text-decoration: underline; }
.discover-l2-all a { font-weight: 600; color: var(--text); }

@media (max-width: 900px) {
  .discover-layout { grid-template-columns: 1fr; gap: 24px; }
  /* Single column: surface the listings (header + chips + feed) first, and let
     the full category directory follow as an index below instead of pushing all
     the content off-screen behind the whole taxonomy. */
  .catalog-main { order: -1; }
  .discover-sidebar {
    order: 0; position: static; max-height: none; overflow: visible;
    margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--border);
  }
  /* Subcategory chips become one horizontally-scrollable row (like the app's
     category strip) instead of wrapping onto multiple lines. */
  .catalog-main .browse-subcat-strip {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; margin-left: 0; padding-bottom: 4px;
  }
  .catalog-main .browse-subcat-strip::-webkit-scrollbar { display: none; }
  .catalog-main .browse-subcat-chip { flex: 0 0 auto; }
}