/**
 * Cosmetics filter bar — layout from scratch (scoped to .cosmetics-filter-shell).
 * Loaded after cosmetics-v2.css; overrides FNGG filter styles with stable alignment.
 */

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell {
  --cf-h: 36px;
  --cf-gap: 8px;
  /* One shared visual “skin” for all dropdowns */
  --cf-panel-w: 280px;
  --cf-panel-max: min(280px, calc(100vw - 1.5rem));
  --cf-panel-pad: 12px;
  --cf-panel-bg: #1a1d24;
  --cf-panel-border: rgba(255, 255, 255, 0.1);
  --cf-panel-radius: 10px;
  --cf-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  /* Same spacing as the Source panel (reference) */
  --cf-inner-gap: 8px;
  --cf-cell-bg: #35383f;
  --cf-cell-border: rgba(0, 0, 0, 0.35);
  --cf-z: 200;
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1rem;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}

/* Row 1: search + dropdowns — one flex line, vertically centered */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs:not(.filters-active-wrap) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--cf-gap) !important;
  width: 100% !important;
  margin: 0 0 0.65rem !important;
  padding: 0 !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

@media (min-width: 768px) {
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs:not(.filters-active-wrap) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs:not(.filters-active-wrap):has(.filter-select.opened) {
    overflow: visible !important;
  }
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .search-wrap {
  flex: 0 1 220px !important;
  width: min(260px, 100%) !important;
  min-width: min(180px, 100%) !important;
  max-width: 280px !important;
  margin: 0 !important;
  position: relative !important;
  align-self: center !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell #locker-search,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell #locker-search.input,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell #locker-search.ui-input {
  width: 100% !important;
  height: var(--cf-h) !important;
  min-height: var(--cf-h) !important;
  line-height: var(--cf-h) !important;
  padding: 0 2rem 0 0.65rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-ui, 8px) !important;
  background: var(--bg-control) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell #locker-search::placeholder {
  opacity: 0.55;
  color: var(--text-muted);
}

/* Triggers: same height as search, no v2 parallelogram */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-select:not(.filter-settings) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  height: var(--cf-h) !important;
  min-height: var(--cf-h) !important;
  max-height: var(--cf-h) !important;
  padding: 0 1.65rem 0 0.55rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  border-radius: var(--radius-ui, 8px) !important;
  border: 1px solid var(--border) !important;
  background-color: var(--bg-control) !important;
  background-image: url("/img/nav/down.png") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 9px) center !important;
  background-size: 11px 11px !important;
  cursor: pointer !important;
  /* must stay visible — dropdown is position:absolute inside; overflow:hidden clips it */
  overflow: visible !important;
  text-overflow: ellipsis !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-select:not(.filter-settings):hover {
  background-color: var(--bg-control-hover) !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-select:not(.filter-settings).opened {
  background-image: url("/img/nav/up.png") !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-sort {
  flex: 1 1 140px !important;
  min-width: 120px !important;
  max-width: min(320px, 40vw) !important;
  margin-left: auto !important;
  overflow: visible !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-settings {
  flex: 0 0 var(--cf-h) !important;
  width: var(--cf-h) !important;
  min-width: var(--cf-h) !important;
  max-width: var(--cf-h) !important;
  height: var(--cf-h) !important;
  min-height: var(--cf-h) !important;
  max-height: var(--cf-h) !important;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center !important;
  background-image: none !important;
  background-color: var(--bg-control) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-settings:hover {
  background-color: var(--bg-control-hover) !important;
  border-color: color-mix(in srgb, var(--border) 120%, transparent) !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-settings.opened {
  background-color: var(--bg-control-hover) !important;
  border-color: color-mix(in srgb, var(--border) 140%, transparent) !important;
}

/* Solid white gear (reference: cosmetics page) */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-settings > svg.f {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  fill: #fff !important;
  stroke: none !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-settings > svg.f path {
  fill: #fff !important;
  stroke: none !important;
}

/* Legacy circle without a class (generated cosmetics.html): keep fill white */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-settings > svg.f circle:not(.filter-settings-hub):not(.filter-settings-hub-dot) {
  fill: #fff !important;
  stroke: none !important;
}

/* Gear hub: gray disk + dot (above the path cutout) */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-settings > svg.f circle.filter-settings-hub {
  fill: #94a3b8 !important;
  stroke: none !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-settings > svg.f circle.filter-settings-hub-dot {
  fill: #475569 !important;
  stroke: none !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs .filter-sort #selected-sort {
  font-weight: 500;
  opacity: 0.9;
}

/* Dropdown panels: same width, background, border, and shadow for every filter */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-select .filter-select-inner {
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 4px) !important;
  right: auto !important;
  width: var(--cf-panel-w) !important;
  max-width: var(--cf-panel-max) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: var(--cf-panel-pad) !important;
  box-sizing: border-box !important;
  background: var(--cf-panel-bg) !important;
  border: 1px solid var(--cf-panel-border) !important;
  border-radius: var(--cf-panel-radius) !important;
  box-shadow: var(--cf-panel-shadow) !important;
  max-height: min(48vh, 380px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  z-index: var(--cf-z) !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-select .filter-select-inner::-webkit-scrollbar {
  width: 8px;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-select .filter-select-inner::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}

/* Sort / Settings: same 280px “box” as other panels; Sort aligned to the button, Settings to the button’s right edge */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-sort.opened .filter-select-inner {
  width: var(--cf-panel-w) !important;
  max-width: var(--cf-panel-max) !important;
  min-width: 0 !important;
}

/* Settings: trigger is ~42px; without min-width the panel can collapse to parent width (vertical strip) */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-settings.opened .filter-select-inner {
  left: auto !important;
  right: 0 !important;
  width: min(var(--cf-panel-w), calc(100vw - 1.5rem)) !important;
  min-width: min(260px, calc(100vw - 1.5rem)) !important;
  max-width: min(var(--cf-panel-w), calc(100vw - 1.5rem)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--cf-inner-gap) !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-settings .filter-select-inner > div:first-child {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-select:not(.opened) .filter-select-inner {
  display: none !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-select.opened {
  z-index: calc(var(--cf-z) + 1);
}

/*
 * Source-style layout everywhere: 2-column grid + same gap.
 * Settings / gear: single column (forms).
 */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-source.opened .filter-select-inner,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-tag.opened .filter-select-inner,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-rarity.opened .filter-select-inner,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-season.opened .filter-select-inner,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-color.opened .filter-select-inner,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-sort.opened .filter-select-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--cf-inner-gap) !important;
  align-content: start !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-color.opened .filter-select-inner {
  gap: 6px !important;
}

/* Buttons inside the panel: shared type scale and cell; per-type tweaks below */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-select-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 6px !important;
  box-sizing: border-box !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: #fff !important;
  border-radius: 6px !important;
  border: 1px solid var(--cf-cell-border) !important;
  background-color: var(--cf-cell-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  cursor: pointer !important;
  min-height: 30px !important;
}

/* 20px icon on the left + label: equal L/R padding so optical center matches the cell */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-source .filter-select-btn,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-tag .filter-select-btn {
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 30px !important;
  background-position: 8px center !important;
  background-size: 20px 20px !important;
  background-repeat: no-repeat !important;
  background-color: var(--cf-cell-bg) !important;
  font-size: 9px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.15 !important;
}

/* Rarity: Fortnite.gg art via --rarity-tile (wins over any background-image !important) */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-rarity .filter-select-btn {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 6px 4px !important;
  min-height: 30px !important;
  background-color: var(--cf-cell-bg) !important;
  background-image: var(--rarity-tile) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.15 !important;
  color: #fff !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-season .filter-select-btn {
  min-height: 30px !important;
  padding: 8px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-season .filter-select-inner .title {
  grid-column: 1 / -1 !important;
  margin: 0.4rem 0 0.15rem !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-season .filter-select-inner .title:first-of-type {
  margin-top: 0 !important;
}

/* Color: GG tint across cell + label; --color-swatch on HTML (base !important was killing inline background-color) */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-color .filter-select-btn::before {
  display: none !important;
  content: none !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-color .filter-select-btn {
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 4px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  background-color: var(--color-swatch) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.22) 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-color .filter-select-btn::after {
  content: attr(data-tooltip) !important;
  display: block !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  text-align: center !important;
  color: #fff !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-color .filter-select-btn[data-val="white"]::after {
  color: #1a1d24 !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-color .filter-select-btn[data-val="yellow"]::after {
  color: #1a0f00 !important;
}

/* Sort: 2-col grid; long labels must wrap (v2/legacy often forces nowrap → "OLDEST…") */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-sort .filter-select-btn {
  min-height: 28px !important;
  height: auto !important;
  max-height: none !important;
  justify-content: center !important;
  align-items: center !important;
  text-transform: uppercase !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  padding: 5px 4px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Do not override ::before on Color (unused; v2 neither). Elsewhere: strip v2 parallelogram */
body.fngg-cosmetics.cosmetics-page
  .cosmetics-filter-shell
  .filter-select:not(.filter-color)
  .filter-select-btn::before {
  display: none !important;
  content: none !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-select-btn.active {
  outline: 1px solid var(--secondary-brand, #00cec9);
  outline-offset: 1px;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-rarity .filter-select-inner hr {
  grid-column: 1 / -1 !important;
  margin: 6px 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Row 2: active pills + actions — same width as row 1 */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs.filters-active-wrap {
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 1rem !important;
  padding: 0.35rem 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  overflow: visible !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs.filters-active-wrap .filters-active,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs.filters-active-wrap .filters-active-settings {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* Clear filters: toolbar row, between sort and settings (visibility via JS) */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs:not(.filters-active-wrap) .filters-clear {
  flex: 0 0 auto !important;
  height: var(--cf-h) !important;
  min-height: var(--cf-h) !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--font-body), sans-serif !important;
  border-radius: var(--radius-ui, 8px) !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  color: var(--text) !important;
  background: var(--bg-control) !important;
  border: 1px solid var(--border) !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs.filters-active-wrap .filters-addlocker {
  flex: 0 0 auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font-body), sans-serif !important;
  border-radius: var(--radius-ui, 8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs.filters-active-wrap .filters-addlocker {
  color: #0b0f14 !important;
  background: var(--primary) !important;
  border: 1px solid transparent !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs.filters-active-wrap .filter-active,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs.filters-active-wrap .filter-active-setting {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  /* Longhand kills v2 padding: 11px 38px 7px 13px + padding-right merge */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0.65rem !important;
  padding-right: 1.75rem !important;
  line-height: 1 !important;
  font: 600 11px/1 var(--font-body), sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs.filters-active-wrap .filter-active::after,
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs.filters-active-wrap .filter-active-setting::after {
  top: 0 !important;
  bottom: 0 !important;
  right: 8px !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  transform: none !important;
  width: 14px !important;
  height: 14px !important;
  background-size: 14px 14px !important;
  opacity: 0.9 !important;
}

/* Mobile */
@media (max-width: 767px) {
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell {
    --cf-h: 42px;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs:not(.filters-active-wrap) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .search-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-select:not(.filter-sort):not(.filter-settings) {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-sort {
    flex: 1 1 calc(100% - 50px) !important;
    margin-left: 0 !important;
    max-width: none !important;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-settings {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    align-self: center !important;
    background-color: var(--bg-control) !important;
    border: 1px solid var(--border) !important;
    background-image: none !important;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-select .filter-select-inner {
    max-height: min(45vh, 360px) !important;
  }

  /*
   * Right column (Rarity, Color): panel is wider than the trigger (~half row).
   * With left:0 the right edge leaves the viewport — anchor to the button’s right edge.
   * Order in .inputs: 1 search, 2 source, 3 rarity, 4 season, 5 color, 6 sort, 7 settings.
   */
  body.fngg-cosmetics.cosmetics-page
    .cosmetics-filter-shell
    .inputs:not(.filters-active-wrap)
    > .filter-select:nth-child(3)
    .filter-select-inner,
  body.fngg-cosmetics.cosmetics-page
    .cosmetics-filter-shell
    .inputs:not(.filters-active-wrap)
    > .filter-select:nth-child(5)
    .filter-select-inner {
    left: auto !important;
    right: 0 !important;
  }

  /* Rarity: long labels (e.g. Gaming Series) — wrap, no ellipsis; slightly tighter cells */
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-rarity .filter-select-btn {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    min-height: 28px !important;
    padding: 4px 3px !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  /*
   * Sort: the 2-col grid used min-width:auto so intrinsic sizes could exceed 280px and overflow the viewport.
   * Single column on small screens + anchor to the trigger’s right edge.
   */
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-sort.opened .filter-select-inner {
    left: auto !important;
    right: 0 !important;
    width: min(100%, calc(100vw - 1.25rem)) !important;
    max-width: min(var(--cf-panel-w), calc(100vw - 1.25rem)) !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-sort .filter-select-btn {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }

  /* Other panels: explicit minmax stops CSS Grid from growing wider than the panel box */
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-source.opened .filter-select-inner,
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-tag.opened .filter-select-inner,
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-rarity.opened .filter-select-inner,
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-season.opened .filter-select-inner,
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .filter-color.opened .filter-select-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  /*
   * Settings (grid size): the trigger is only ~42px wide. `right:0` aligns the panel’s right edge to
   * the button, so the sheet grows left — when the gear wraps to the start of a row it clips off-screen.
   * Anchor to the trigger’s left so the panel opens into the viewport (to the right).
   */
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-settings.opened .filter-select-inner {
    left: 0 !important;
    right: auto !important;
    width: min(var(--cf-panel-w), calc(100vw - 1.5rem)) !important;
    min-width: 0 !important;
    max-width: min(var(--cf-panel-w), calc(100vw - 1.5rem)) !important;
  }
}

/* Very narrow phones: one filter per row for larger touch targets */
@media (max-width: 480px) {
  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-select:not(.filter-settings) {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .inputs > .filter-sort {
    flex: 1 1 calc(100% - 52px) !important;
    min-width: 0 !important;
  }
}

/* Logged-in catalog: two checkbox labels are inline-level — stack with gap so they don’t crowd one line */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell #cosmetics-filters-logged-in {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell #cosmetics-filters-logged-in .checkbox-label {
  width: 100% !important;
  min-width: 0 !important;
}

/* Grid size stepper: minus / value / plus */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .gridsize-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

/*
 * SPA (Tailwind): do not use class name `filter` on these buttons — Tailwind’s `.filter` utility
 * applies CSS `filter` and breaks +/− visibility. Legacy static HTML still uses `.filter`; React uses `.gridsize-step-btn`.
 */
body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .gridsize-step-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  filter: none;
  -webkit-tap-highlight-color: transparent;
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .gridsize-step-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

body.fngg-cosmetics.cosmetics-page .cosmetics-filter-shell .gridsize-step-btn svg.f {
  width: 0.85rem;
  height: 0.85rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}