/*
 * Cosmetics Hub — main stylesheet.
 * Mobile-first. No framework, no build step required (though a site owner
 * is free to run this through a bundler). Design tokens mirror
 * inc/customizer.php's ch_theme_css_vars() output so Customizer edits
 * override these defaults live.
 */

/* ---------------------------------------------------------- Tokens --- */
:root {
	--bg: #0B0E14;
	--surface: #141926;
	--surface-raised: #1B2233;
	--text: #E8EAF0;
	--text-muted: #8891A5;
	--accent: #7C5CFC;
	--accent-2: #33D6C0;
	--border: rgba(255, 255, 255, 0.08);

	--radius-card: 12px;
	--radius-control: 8px;
	--container-max: 1320px;
	--motion-duration: 180ms;

	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
}

html[data-mode='light'] {
	--bg: #F7F8FA;
	--surface: #FFFFFF;
	--surface-raised: #FFFFFF;
	--text: #171A21;
	--text-muted: #5B6376;
	--border: rgba(15, 18, 26, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	:root { --motion-duration: 0ms; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------ Base --- */
body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: 1.15;
	margin: 0 0 0.5em;
}

a { text-decoration: none; transition: color var(--motion-duration) ease; }

.ch-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 16px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.ch-skip-link:focus {
	position: fixed; top: 8px; left: 8px; width: auto; height: auto;
	background: var(--accent); color: #fff; padding: 10px 16px;
	border-radius: var(--radius-control); z-index: 1000; clip: auto;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ Buttons */
.ch-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 18px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: transform var(--motion-duration) ease, border-color var(--motion-duration) ease;
}
.ch-btn:hover { border-color: var(--accent); }
.ch-btn:active { transform: scale(0.98); }
.ch-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ch-btn--icon { padding: 8px 14px; font-size: 13px; }

.ch-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: var(--text);
	cursor: pointer;
}
.ch-icon-btn:hover { background: var(--surface); }

.ch-pill {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--border);
	font-size: 13px;
	color: var(--text);
}

/* ------------------------------------------------------------ Header - */
.ch-header {
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	z-index: 100;
}
.ch-header--sticky { position: sticky; top: 0; }
.ch-header__inner {
	display: flex; align-items: center; gap: 20px;
	height: 60px;
}
.ch-logo__text { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.ch-primary-nav { flex: 1; display: none; }
.ch-primary-nav__list { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; }
.ch-primary-nav__list a:hover { color: var(--accent); }
.ch-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ch-mobile-menu-toggle { display: inline-flex; }

.ch-icon-moon { display: none; }
html[data-mode='dark'] .ch-icon-sun { display: none; }
html[data-mode='dark'] .ch-icon-moon { display: block; }

.ch-search-panel {
	border-top: 1px solid var(--border);
	padding: 16px 0;
	background: var(--surface);
}
.ch-search-panel[hidden] { display: none; }

.ch-mobile-menu {
	position: fixed; inset: 0; top: 60px; z-index: 90;
	background: var(--bg);
	padding: 24px;
	overflow-y: auto;
}
.ch-mobile-menu[hidden] { display: none; }
.ch-mobile-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 18px; }
.ch-mobile-menu__list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }

@media (min-width: 960px) {
	.ch-primary-nav { display: block; }
	.ch-mobile-menu-toggle { display: none; }
}

/* --------------------------------------------------------- Search form */
.ch-search-form { display: flex; gap: 8px; position: relative; }
.ch-search-form__input {
	flex: 1;
	padding: 12px 16px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
	font-size: 15px;
}
.ch-search-form__submit {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; border-radius: var(--radius-control);
	border: 1px solid var(--border); background: var(--accent); color: #fff; cursor: pointer;
}
.ch-search-suggestions {
	margin-top: 8px;
	border-radius: var(--radius-control);
	overflow: hidden;
	background: var(--surface-raised);
	border: 1px solid var(--border);
}
.ch-search-suggestions:empty { display: none; }
.ch-suggestion {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px;
	border-bottom: 1px solid var(--border);
}
.ch-suggestion:last-child { border-bottom: none; }
.ch-suggestion img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.ch-suggestion mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; }

/* ---------------------------------------------------------------- Hero */
.ch-hero {
	padding: 56px 0 40px;
	background: radial-gradient(ellipse 80% 60% at 50% -20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
	text-align: center;
	animation: ch-fade-up 500ms ease both;
}
@keyframes ch-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ch-hero__title { font-size: clamp(28px, 6vw, 48px); }
.ch-hero__subtitle { color: var(--text-muted); font-size: 17px; max-width: 560px; margin: 0 auto 28px; }
.ch-hero__search { max-width: 560px; margin: 0 auto 20px; }
.ch-hero__quick-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* --------------------------------------------------------------- Rail */
.ch-rail { padding: 32px 0; }
.ch-rail__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.ch-rail__title { font-size: 22px; }
.ch-rail__view-all { font-size: 14px; color: var(--accent); font-weight: 600; }
.ch-rail__track {
	display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
	padding-bottom: 8px;
}
.ch-rail__track .ch-card { flex: 0 0 200px; scroll-snap-align: start; }

/* ------------------------------------------------------------- Cards -- */
.ch-card {
	position: relative;
	background: var(--surface);
	border-radius: var(--radius-card);
	border: 1px solid var(--border);
	overflow: hidden;
	transition: transform var(--motion-duration) ease, box-shadow var(--motion-duration) ease, border-color var(--motion-duration) ease;
}
.ch-card:hover {
	transform: translateY(-3px);
	border-color: var(--card-rarity, var(--accent));
	box-shadow: 0 0 0 1px var(--card-rarity, var(--accent)), 0 12px 24px -8px color-mix(in srgb, var(--card-rarity, var(--accent)) 45%, transparent);
}
.ch-card__link { display: block; color: inherit; }
.ch-card__media { position: relative; aspect-ratio: 1; background: var(--bg); }
.ch-card__thumb { width: 100%; height: 100%; object-fit: cover; }
.ch-card__thumb--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface), var(--surface-raised)); }
.ch-card__rarity-badge {
	position: absolute; bottom: 8px; left: 8px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
	padding: 3px 8px; border-radius: 999px;
	background: color-mix(in srgb, var(--card-rarity) 85%, black 15%);
	color: #fff;
}
.ch-card__body { padding: 12px 14px; }
.ch-card__type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ch-card__title { font-size: 15px; margin: 4px 0 6px; line-height: 1.3; }
.ch-card__meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); }
.ch-card__price { font-family: var(--font-mono); }

.ch-favorite-btn {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	width: 32px; height: 32px; border-radius: 999px; border: none;
	background: color-mix(in srgb, var(--bg) 60%, transparent);
	color: #fff; display: flex; align-items: center; justify-content: center;
	cursor: pointer; backdrop-filter: blur(4px);
}
.ch-favorite-btn.is-active { color: var(--accent-2); }

.ch-card--list { display: block; }
.ch-card--list .ch-card__link { display: grid; grid-template-columns: 60px 1fr auto auto auto; align-items: center; gap: 12px; padding: 8px 14px; }
.ch-card--list .ch-card__media { aspect-ratio: 1; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; }
.ch-card--list .ch-card__title { margin: 0; font-size: 14px; }
.ch-card__rarity-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card-rarity) 20%, transparent); color: var(--card-rarity); font-weight: 600; }
.ch-card__last-seen { font-size: 12px; color: var(--text-muted); display: none; }
@media (min-width: 720px) { .ch-card__last-seen { display: inline; } }

/* Skeleton loading state, toggled via JS by adding .is-loading to grid. */
.ch-cosmetic-grid.is-loading .ch-card { position: relative; pointer-events: none; }
.ch-cosmetic-grid.is-loading .ch-card::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent);
	animation: ch-shimmer 1.2s infinite;
}
@keyframes ch-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ------------------------------------------------------------- Grids -- */
.ch-cosmetic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
.ch-cosmetic-grid--compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* --------------------------------------------------------- Categories - */
.ch-categories { padding: 32px 0; }
.ch-categories__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ch-category-card {
	display: flex; flex-direction: column; gap: 4px;
	padding: 18px; border-radius: var(--radius-card);
	background: var(--surface); border: 1px solid var(--border);
	color: var(--text);
}
.ch-category-card:hover { border-color: var(--accent); }
.ch-category-card__name { font-weight: 600; }
.ch-category-card__count { font-size: 13px; color: var(--text-muted); }

.ch-collections { padding: 32px 0; }
.ch-collections__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ch-collection-card { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; background: var(--surface); }
.ch-collection-card__title {
	position: absolute; bottom: 0; left: 0; right: 0; padding: 16px;
	background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
	color: #fff; font-weight: 700; font-family: var(--font-display);
}

/* --------------------------------------------------------------- Stats */
.ch-stats { padding: 40px 0; background: var(--surface); }
.ch-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; text-align: center; }
.ch-stat__number { display: block; font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--accent); }
.ch-stat__label { font-size: 13px; color: var(--text-muted); }
@media (min-width: 720px) { .ch-stats__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- News */
.ch-news { padding: 32px 0; }
.ch-news__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ch-news-card { display: block; background: var(--surface); border-radius: var(--radius-card); border: 1px solid var(--border); overflow: hidden; color: var(--text); }
.ch-news-card__title { padding: 12px 14px 4px; font-size: 15px; }
.ch-news-card time { display: block; padding: 0 14px 14px; font-size: 12px; color: var(--text-muted); }

/* ----------------------------------------------------------- Archive -- */
.ch-archive-header { padding: 24px 0 8px; }
.ch-archive-title { font-size: 26px; }
.ch-breadcrumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.ch-breadcrumbs a { color: var(--text-muted); }
.ch-breadcrumbs__sep { margin: 0 6px; }
.ch-breadcrumbs__current { color: var(--text); }

.ch-archive-layout { display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 48px; }
@media (min-width: 960px) {
	.ch-archive-layout { grid-template-columns: 260px 1fr; align-items: start; }
	.ch-archive-layout__sidebar { position: sticky; top: 76px; }
}

.ch-filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; }
.ch-filters__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ch-filters__title { font-size: 16px; }
.ch-filters__clear { background: none; border: none; color: var(--accent); font-size: 13px; cursor: pointer; }
.ch-filter-group { border-top: 1px solid var(--border); padding: 10px 0; }
.ch-filter-group__title { font-weight: 600; font-size: 14px; cursor: pointer; }
.ch-filter-group__options { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 200px; overflow-y: auto; }
.ch-filter-group__options--range { flex-direction: row; align-items: center; gap: 8px; }
.ch-filter-group__options--range input { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.ch-filter-option { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ch-filter-option__count { margin-left: auto; color: var(--text-muted); }
.ch-filters__apply { width: 100%; margin-top: 12px; }

.ch-archive-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.ch-archive-toolbar__count { font-size: 14px; color: var(--text-muted); }
.ch-archive-toolbar__controls { display: flex; gap: 10px; align-items: center; }
.ch-archive-toolbar__controls select { padding: 8px 10px; border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.ch-view-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
.ch-view-toggle__btn { width: 36px; height: 36px; border: none; background: var(--surface); color: var(--text-muted); cursor: pointer; }
.ch-view-toggle__btn.is-active { color: var(--accent); background: var(--surface-raised); }

.ch-load-more-wrap { text-align: center; margin-top: 24px; }
.ch-empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }

/* --------------------------------------------------------- Single item */
.ch-cosmetic__layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 16px 0 40px; }
@media (min-width: 900px) { .ch-cosmetic__layout { grid-template-columns: 1fr 1fr; } }
.ch-cosmetic__gallery-main { border-radius: var(--radius-card); overflow: hidden; background: var(--surface); border: 2px solid var(--card-rarity); box-shadow: 0 0 32px -8px color-mix(in srgb, var(--card-rarity) 50%, transparent); }
.ch-cosmetic__gallery-placeholder { aspect-ratio: 1; background: var(--surface); }
.ch-cosmetic__gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.ch-cosmetic__gallery-thumbs img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; cursor: pointer; }
.ch-cosmetic__3d-preview, .ch-cosmetic__video { margin-top: 12px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); text-align: center; }
.ch-placeholder-note { color: var(--text-muted); font-size: 13px; margin-bottom: 10px; }

.ch-cosmetic__rarity-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; background: var(--card-rarity); color: #fff; margin-bottom: 8px; }
.ch-cosmetic__title { font-size: 30px; }
.ch-cosmetic__actions { display: flex; gap: 10px; align-items: center; margin: 16px 0; }
.ch-cosmetic__actions .ch-favorite-btn { position: static; background: var(--surface); color: var(--text); }
.ch-share-buttons { display: flex; gap: 8px; }

.ch-cosmetic__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; margin: 20px 0; }
.ch-cosmetic__stat dt { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ch-cosmetic__stat dd { margin: 2px 0 0; font-weight: 600; }
.ch-mono { font-family: var(--font-mono); font-size: 13px; }

.ch-cosmetic__description { margin-top: 24px; }

.ch-cosmetic__prev-next { display: flex; justify-content: space-between; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; }

.ch-related { padding: 32px 0; }
.ch-comments { padding: 32px 0; }

/* --------------------------------------------------------------- Footer */
.ch-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: 40px; }
.ch-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
@media (min-width: 720px) { .ch-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.ch-footer__tagline { color: var(--text-muted); font-size: 14px; margin: 10px 0; }
.ch-footer__social { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.ch-newsletter { display: flex; gap: 8px; }
.ch-newsletter input { flex: 1; padding: 10px; border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.ch-footer__heading { font-size: 14px; margin-bottom: 12px; }
.ch-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ch-footer__list a { color: var(--text-muted); }
.ch-footer__bottom { border-top: 1px solid var(--border); padding: 16px 0; }
.ch-footer__bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-muted); }
.ch-footer__legal { display: flex; gap: 16px; }

/* -------------------------------------------------------- Widgets ----- */
.ch-widget { margin-bottom: 20px; }
.ch-widget__title { font-size: 14px; margin-bottom: 10px; }
.ch-widget--card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; }

/* -------------------------------------------------------- Generic page */
.ch-generic-content { padding: 32px 0 60px; max-width: 760px; }
.ch-post__title { font-size: 30px; }

/* ================================================================
 * Chilli Fortnite Database plugin — restyled native markup.
 *
 * Every cosmetic archive/single page goes through our own
 * chilli-fortnite-database/*.php overrides + template-parts/card-cosmetic
 * above, so most of what a visitor sees never touches this section. This
 * covers what's left: the plugin's own shortcodes ([chilli_search],
 * [chilli_filter], [chilli_trending], [chilli_wishlist], etc.) when a site
 * owner drops them directly into a page/post, plus the default templates'
 * markup as a safety net for any post type this theme doesn't override.
 * Class names below are copied verbatim from the plugin's PHP templates
 * and JS (Frontend/Shortcodes.php, templates/parts/card.php,
 * templates/single-cosmetic.php, templates/archive-cosmetic.php,
 * assets/js/frontend.js) — nothing here changes plugin markup, only style.
 * ================================================================ */

/* Bridge: the plugin's Settings-driven --cfd-primary/--cfd-accent (see
   Frontend\Assets::inline_theme_vars) flow into our own accent tokens
   automatically, so changing the color in the plugin's admin settings
   re-colors the theme too, without the two fighting over one variable name. */
:root {
	--accent: var(--cfd-primary, #7C5CFC);
	--accent-2: var(--cfd-accent, #33D6C0);
}

/* Rarity color classes for the plugin's raw `cfd-card`/`cfd-rarity-{slug}`
   markup (shortcodes, default templates) — same palette as
   ch_cfd_rarity_color() in inc/cfd-integration.php, kept in sync by hand
   since one lives in PHP and one in CSS. Unrecognized/custom rarity slugs
   fall back to the plain border color below rather than going unstyled. */
.cfd-card { --card-rarity: var(--text-muted); }
.cfd-rarity-common { --card-rarity: #8891A5; }
.cfd-rarity-uncommon { --card-rarity: #4CBB6C; }
.cfd-rarity-rare { --card-rarity: #3E8EF7; }
.cfd-rarity-epic { --card-rarity: #A557F0; }
.cfd-rarity-legendary { --card-rarity: #F5A623; }
.cfd-rarity-mythic { --card-rarity: #E0453C; }
.cfd-rarity-exclusive,
.cfd-rarity-icon-series,
.cfd-rarity-gaming-legends { --card-rarity: #33D6C0; }
.cfd-rarity-marvel { --card-rarity: #E0453C; }
.cfd-rarity-dc { --card-rarity: #3E8EF7; }
.cfd-rarity-star-wars { --card-rarity: #F5A623; }
.cfd-rarity-dark { --card-rarity: #6A4CBB; }
.cfd-rarity-frozen { --card-rarity: #5FD0E8; }
.cfd-rarity-lava { --card-rarity: #E0623C; }
.cfd-rarity-shadow { --card-rarity: #4A4E5C; }

/* Search shortcode ([chilli_search]) */
.cfd-search { position: relative; }
.cfd-search-input {
	width: 100%; padding: 12px 16px;
	border-radius: var(--radius-control);
	border: 1px solid var(--border);
	background: var(--bg); color: var(--text);
	font-size: 15px; font-family: var(--font-body);
}
.cfd-search-results {
	margin-top: 8px; border-radius: var(--radius-control); overflow: hidden;
	background: var(--surface-raised); border: 1px solid var(--border);
}
.cfd-search-result {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px;
	border-bottom: 1px solid var(--border); color: var(--text);
}
.cfd-search-result:last-child { border-bottom: none; }
.cfd-search-result:hover { background: var(--surface); }
.cfd-search-result img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }

/* Filter bar shortcode ([chilli_filter]) */
.cfd-filter-bar {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	padding: 14px; border-radius: var(--radius-card);
	background: var(--surface); border: 1px solid var(--border);
	margin-bottom: 20px;
}
.cfd-filter-bar select {
	padding: 8px 10px; border-radius: var(--radius-control);
	border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

/* Card grid + card (shortcodes + plugin default templates fallback) */
.cfd-card-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
.cfd-card {
	position: relative; display: block; color: var(--text);
	background: var(--surface); border-radius: var(--radius-card);
	border: 1px solid var(--border); overflow: hidden;
	transition: transform var(--motion-duration) ease, box-shadow var(--motion-duration) ease, border-color var(--motion-duration) ease;
}
.cfd-card:hover {
	transform: translateY(-3px);
	border-color: var(--card-rarity, var(--accent));
	box-shadow: 0 0 0 1px var(--card-rarity, var(--accent)), 0 12px 24px -8px color-mix(in srgb, var(--card-rarity, var(--accent)) 45%, transparent);
}
.cfd-card-media { position: relative; aspect-ratio: 1; background: var(--bg); }
.cfd-card-image { width: 100%; height: 100%; object-fit: cover; }
.cfd-card-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface), var(--surface-raised)); }
.cfd-card-body { padding: 12px 14px; }
.cfd-card-title { font-size: 15px; margin: 0 0 6px; font-family: var(--font-display); line-height: 1.3; }
.cfd-card-rarity {
	display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
	padding: 3px 8px; border-radius: 999px; margin-bottom: 6px;
	background: color-mix(in srgb, var(--card-rarity) 85%, black 15%); color: #fff;
}
.cfd-card-price { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.cfd-badge { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--surface-raised); color: var(--text); }
.cfd-badge--featured { background: var(--accent); color: #fff; }
.cfd-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); grid-column: 1 / -1; }
.cfd-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.cfd-pagination a, .cfd-pagination span { padding: 8px 14px; border-radius: var(--radius-control); border: 1px solid var(--border); color: var(--text); }
.cfd-pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Trending/random/wishlist/recently-viewed shortcode blocks */
.cfd-shortcode-block { padding: 24px 0; }
.cfd-block-title { font-size: 20px; margin-bottom: 14px; font-family: var(--font-display); }

/* Default plugin archive/single templates (fallback for any post type this
   theme doesn't explicitly override — should rarely render in practice
   since chilli-fortnite-database/archive-cosmetic.php and
   single-cosmetic.php cover all 15 cosmetic post types). */
.cfd-archive-header { padding: 24px 0 8px; }
.cfd-hero { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 16px 0 32px; }
@media (min-width: 900px) { .cfd-hero { grid-template-columns: 1fr 1fr; } }
.cfd-hero-image { width: 100%; border-radius: var(--radius-card); border: 2px solid var(--cfd-item-color, var(--accent)); }
.cfd-rarity-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; background: var(--accent); color: #fff; margin-bottom: 8px; }
.cfd-price { font-family: var(--font-mono); font-size: 18px; margin: 8px 0; }
.cfd-quick-facts { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; font-size: 14px; }
.cfd-actions { display: flex; gap: 10px; margin: 16px 0; }
.cfd-share { display: flex; gap: 8px; }
.cfd-gallery, .cfd-video, .cfd-description, .cfd-meta-grid, .cfd-related, .cfd-comments { padding: 20px 0; }
.cfd-gallery-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.cfd-gallery-item img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.cfd-video-embed iframe, .cfd-video-embed video { width: 100%; border-radius: var(--radius-card); }
.cfd-meta-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.cfd-breadcrumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }

/* Lightbox overlay (data-cfd-lightbox / a[data-fullscreen], toggled by the
   plugin's frontend.js — class names taken from its lightbox module). */
.cfd-lightbox-overlay {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(0,0,0,0.85);
	display: flex; align-items: center; justify-content: center;
	padding: 32px;
}
.cfd-lightbox-overlay img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.cfd-lightbox-close {
	position: absolute; top: 20px; right: 20px;
	width: 40px; height: 40px; border-radius: 999px;
	background: var(--surface); border: none; color: var(--text);
	font-size: 20px; cursor: pointer;
}