/**
 * Browse toolbar — Explore, Artists, Resell (explore.html, artists.html, resell.html).
 * Mobile (≤820px): lavender strip, white search card, filter icon, collapsible controls; guides below bar via JS.
 * Desktop (≥821px): unchanged layout vs prior Explore/Artists/Resell desktop patterns.
 * Does not affect global styles.css outside these body classes.
 */

/* Resell only: shorter <summary> on mobile; desktop keeps "Artist's/Reseller's tier guide" */
.page-resell .tier-guide-summary__short {
  display: none;
}

@media (max-width: 820px) {
  :is(.page-explore, .page-artists, .page-resell) .explore-filters-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  /*
   * Search row — lifted white card on lavender (--bg) behind .filter-bar
   */
  :is(.page-explore, .page-artists, .page-resell) .explore-filters-search-cluster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    margin-top: 0;
    padding: 6px;
    border-radius: 12px;
    border: none;
    background: var(--surface);
    box-shadow: var(--shadow);
    box-sizing: border-box;
  }

  :is(.page-explore, .page-artists, .page-resell) .explore-browse-search {
    min-width: 0;
    width: 100%;
    max-width: none;
    min-height: 36px;
    height: 36px;
    font-size: 14px;
    padding: 0 12px;
    box-sizing: border-box;
  }

  :is(.page-explore, .page-resell) .explore-filters-search-cluster #browse-search-btn.explore-search-submit,
  .page-artists .explore-filters-search-cluster #artist-dir-search-btn.explore-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
    flex-shrink: 0;
  }

  :is(.page-explore, .page-resell) #browse-search-btn .explore-search-btn-text,
  .page-artists #artist-dir-search-btn .explore-search-btn-text {
    display: none;
  }

  :is(.page-explore, .page-resell) #browse-search-btn .explore-search-btn-icon,
  .page-artists #artist-dir-search-btn .explore-search-btn-icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  :is(.page-explore, .page-artists, .page-resell) .explore-filter-more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
  }

  :is(.page-explore, .page-artists, .page-resell) .explore-filter-more-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  :is(.page-explore, .page-artists, .page-resell) .explore-filter-more-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-soft);
  }

  .page-explore #explore-filters-collapsible,
  .page-artists #artists-filters-collapsible,
  .page-resell #resell-filters-collapsible {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  /** Artists only: Any Tier + Random Order side-by-side on one row */
  .page-artists #artists-filters-collapsible {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
  }
  .page-artists #artist-dir-tier,
  .page-artists #artist-dir-sort {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none !important;
    box-sizing: border-box;
  }

  .page-explore #explore-filters-collapsible.explore-filters-collapsible--closed,
  .page-artists #artists-filters-collapsible.explore-filters-collapsible--closed,
  .page-resell #resell-filters-collapsible.explore-filters-collapsible--closed {
    display: none !important;
  }

  :is(.page-explore, .page-artists, .page-resell) .explore-filters-guides {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 8px;
    align-items: flex-start;
  }

  /** Resell only: tighter gaps between Size / Artist tier / Reseller tier guides */
  .page-resell .explore-filters-guides {
    column-gap: 8px;
    row-gap: 2px;
  }
  .page-resell .explore-filters-guides > details.explore-size-guide {
    margin: 0 !important;
  }

  .page-resell .tier-guide-summary__full {
    display: none !important;
  }

  .page-resell .tier-guide-summary__short {
    display: inline !important;
  }

  /**
   * Resell only: All / Artist / Collector / Description / Tags on one row (narrow screens).
   * Sized close to the search row (36px / 14px); nowrap + horizontal scroll on tiny widths.
   */
  .page-resell #resell-filters-collapsible > .filter-chips {
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .page-resell #resell-filters-collapsible > .filter-chips .filter-chip {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
  }

  .page-resell #resell-filters-collapsible > .filter-chips .filter-chip.active {
    font-weight: 600;
  }

  .page-explore #explore-guides-slot,
  .page-artists #artists-guides-slot,
  .page-resell #resell-guides-slot {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
  }

  /** Artists directory only: tiny vertical offset for Tier guide vs filter row */
  .page-artists #artists-guides-slot {
    margin-top: -1px;
  }

  .page-explore #explore-guides-slot .explore-filters-guides > .explore-size-guide:first-child,
  .page-artists #artists-guides-slot .explore-filters-guides > .explore-size-guide:first-child,
  .page-resell #resell-guides-slot .explore-filters-guides > .explore-size-guide:first-child {
    margin-top: 0 !important;
  }

  /* Explore only: two guides side-by-side tweaks */
  .page-explore .explore-filters-guides > details.explore-size-guide:nth-child(2) {
    margin-top: 0 !important;
  }

  .page-explore .explore-filters-guides > details.explore-size-guide:nth-child(2) summary {
    white-space: nowrap;
  }

  :is(.page-explore, .page-artists, .page-resell) .browse-section {
    padding-top: 4px;
  }

  :is(.page-explore, .page-artists, .page-resell) .browse-section .results-meta {
    margin-top: 14px;
  }

  :is(.page-explore, .page-artists, .page-resell) .filter-bar {
    padding: 8px 0 4px;
    background: var(--bg);
    border-bottom: none;
    box-shadow: none;
  }

  :is(.page-explore, .page-artists, .page-resell) .filter-bar-inner {
    align-items: stretch;
  }
}

@media (min-width: 821px) {
  :is(.page-explore, .page-artists, .page-resell) .explore-filter-more-toggle {
    display: none !important;
  }

  /* Remove mobile “card” chrome on desktop */
  :is(.page-explore, .page-artists, .page-resell) .explore-filters-search-cluster {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* ─── Explore (unchanged desktop grid) ─── */
  .page-explore #explore-filters-collapsible {
    display: contents;
  }

  .page-explore .explore-filters-wrap {
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    width: 100%;
  }

  .page-explore .explore-filters-search-cluster {
    grid-column: 2 / 4;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
  }

  .page-explore .explore-browse-search {
    width: 200px;
    max-width: 200px;
    height: 36px;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  .page-explore #explore-filters-collapsible > .filter-chips {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .page-explore #explore-filters-collapsible > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .page-explore #fil-custom-panels-wrap {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }

  .page-explore .explore-filters-guides {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    flex-wrap: wrap;
    column-gap: 26px;
    row-gap: 14px;
    align-items: flex-start;
    margin-top: -10px;
  }

  /* ─── Artists: tier + sort | search (desktop) ─── */
  .page-artists #artists-filters-collapsible {
    display: contents;
  }

  .page-artists .explore-filters-wrap--artists {
    display: grid;
    grid-template-columns: auto auto minmax(160px, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    width: 100%;
  }

  .page-artists #artist-dir-tier {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .page-artists #artist-dir-sort {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .page-artists .explore-filters-search-cluster {
    grid-column: 3 / 5;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
  }

  .page-artists .explore-browse-search {
    width: 220px;
    max-width: 220px;
    height: 36px;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  .page-artists .explore-filters-guides {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    column-gap: 26px;
    row-gap: 14px;
    align-items: flex-start;
    /* Tier guide row sits a hair closer to tier/sort/search */
    margin-top: -7px;
  }

  /* ─── Resell: chips + search flush left (same row), then hints / filter row / guides ─── */
  .page-resell #resell-filters-collapsible {
    display: contents;
  }

  .page-resell .explore-filters-wrap--resell {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    width: 100%;
  }

  .page-resell .filter-chips {
    order: 1;
    flex: 0 0 auto;
    align-self: center;
  }

  .page-resell .explore-filters-search-cluster {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
  }

  /* Don’t let global .artist-search-input { flex:1 } stretch in this bar — keeps field next to chips */
  .page-resell .explore-filters-search-cluster .artist-search-input.explore-browse-search {
    flex: 0 0 auto;
  }

  .page-resell .explore-browse-search {
    width: 200px;
    max-width: 200px;
    height: 36px;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  .page-resell .resell-time-filter-hint {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
  }

  /* size/tier/time/price row — second child of collapsible (chips=1st, custom-panels=3rd) */
  .page-resell #resell-filters-collapsible > div:nth-child(2) {
    order: 4;
    flex: 1 1 100%;
    width: 100%;
  }

  .page-resell #fil-custom-panels-wrap {
    order: 5;
    flex: 1 1 100%;
    width: 100%;
  }

  .page-resell .explore-filters-guides {
    order: 6;
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 4px;
    align-items: flex-start;
    /* Tiny gap under filter row — between old -10px tuck and the looser 6px */
    margin-top: 2px;
  }

  .page-resell .explore-filters-guides > details.explore-size-guide {
    margin: 0 !important;
  }

  /* Guides live in the filter bar on desktop; tuck results line slightly closer under it */
  :is(.page-explore, .page-artists, .page-resell) .browse-section {
    padding-top: 18px;
  }
}