/**
 * Fortnite.gg-derived catalog UI — global visual upgrade for /cosmetics (and embeds).
 * Load LAST after fngg/global.css, cosmetics-v2.css, local.css, filters, bridge, item-detail.
 * Scoped to body.fngg-cosmetics.cosmetics-page so SPA routes without this body are unaffected.
 */

/* —— Re-map legacy FNGG chrome to site tokens (--fngg-yellow on :root; reinforce on body) —— */
body.fngg-cosmetics.cosmetics-page {
  --fngg-yellow: var(--accent);
}

/* —— Category chips: replace white “pill” + yellow tint with accent sheet —— */
body.fngg-cosmetics.cosmetics-page .locker-cat {
  background-color: color-mix(in srgb, var(--text) 6%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

body.fngg-cosmetics.cosmetics-page .locker-cat:hover {
  background-color: color-mix(in srgb, var(--text) 9%, transparent) !important;
}

body.fngg-cosmetics.cosmetics-page .locker-cat.active {
  background: var(--primary-dim) !important;
  border-color: var(--primary-line) !important;
  box-shadow: inset 0 -2px 0 0 var(--primary);
}

body.fngg-cosmetics.cosmetics-page .locker-cat.active .locker-cat-name {
  color: var(--text) !important;
}

body.fngg-cosmetics.cosmetics-page .locker-cat.active .locker-cat-count {
  color: var(--text-muted) !important;
}

body.fngg-cosmetics.cosmetics-page .active .locker-cat-icon {
  filter: none;
}

/* —— Grid tiles: softer frame + accent hover (replaces harsh white ring) —— */
body.fngg-cosmetics.cosmetics-page .fn-item-wrap {
  border-color: var(--border) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

body.fngg-cosmetics.cosmetics-page .fn-item a:hover,
body.fngg-cosmetics.cosmetics-page .fn-item-wrap:hover {
  box-shadow: 0 0 0 2px var(--primary-line), var(--shadow-sm) !important;
}

/* —— Item tiles: align with site surfaces —— */
body.fngg-cosmetics.cosmetics-page .item-icon {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

/* —— Primary FNGG buttons (.button) —— */
body.fngg-cosmetics.cosmetics-page .button:not(.button-grey) {
  background: linear-gradient(180deg, var(--primary-hover) 0%, var(--primary) 100%);
  color: var(--text-on-accent) !important;
  font-family: var(--font-body), system-ui, sans-serif;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, #1a0a0e 45%);
  box-shadow: var(--shadow-btn-outer), var(--shadow-btn-inset-light);
}

body.fngg-cosmetics.cosmetics-page .button.button-grey {
  background: color-mix(in srgb, var(--text) 10%, transparent) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

/* —— Filter chips —— */
body.fngg-cosmetics.cosmetics-page .filter.active {
  background: var(--primary-dim) !important;
  color: var(--text) !important;
  border: 1px solid var(--primary-line);
}

body.fngg-cosmetics.cosmetics-page .filter.active span {
  color: var(--text-muted) !important;
}

body.fngg-cosmetics.cosmetics-page .filter-select-btn.active::before,
body.fngg-cosmetics.cosmetics-page .filter-cats-btn.active::before {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
}

body.fngg-cosmetics.cosmetics-page .search-tag.active::after {
  background: var(--primary);
}

/* —— Scrollbars (catalog document) —— */
body.fngg-cosmetics.cosmetics-page ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
  border-radius: 8px;
}

body.fngg-cosmetics.cosmetics-page ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 55%, transparent);
}

/* —— Loader ring —— */
body.fngg-cosmetics.cosmetics-page .loader {
  border-top-color: var(--primary);
}

/* —— Form controls that used --fngg-yellow fill —— */
body.fngg-cosmetics.cosmetics-page .checkbox-v2:checked,
body.fngg-cosmetics.cosmetics-page .radio-v2:checked {
  background: linear-gradient(180deg, var(--primary-hover), var(--primary)) !important;
}

/* Category tray + grid: lose hard top/bottom “lines” (1px border on rounded rect + inset noise) */
body.fngg-cosmetics.cosmetics-page .locker-cats {
  border: none !important;
  box-shadow: none !important;
}

body.fngg-cosmetics.cosmetics-page #items.locker-items {
  box-shadow: none !important;
}