/* Chilli Fortnite Database — Item Shop Styles */

.cfd-item-shop {
	max-width: 1280px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

.cfd-breadcrumbs {
	font-size: .875rem;
	color: var( --cfd-muted, #6b7280 );
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
	margin-bottom: 1rem;
}
.cfd-breadcrumbs a { color: inherit; }

.cfd-shop-header h1 {
	margin: 0 0 .5rem;
	line-height: 1.15;
}

.cfd-shop-intro {
	color: var( --cfd-muted, #6b7280 );
	margin: 0 0 1rem;
	max-width: 70ch;
}

.cfd-shop-countdown {
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	background: var( --cfd-card-bg, #f9fafb );
	border: 1px solid var( --cfd-border, #e5e7eb );
	border-radius: 999px;
	padding: .45rem 1rem;
	margin: 0 0 1.25rem;
	font-size: .95rem;
}
.cfd-shop-countdown-label { color: var( --cfd-muted, #6b7280 ); }
.cfd-shop-countdown-value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --cfd-primary, #7c3aed );
}

/* Controls -------------------------------------------------------------- */

.cfd-shop-controls {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-end;
	padding: 1rem;
	margin: 0 0 1rem;
	background: var( --cfd-card-bg, #f9fafb );
	border: 1px solid var( --cfd-border, #e5e7eb );
	border-radius: 14px;
}

.cfd-shop-control {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	flex: 1 1 160px;
	min-width: 0;
}
.cfd-shop-control--search { flex: 2 1 260px; }

.cfd-shop-control label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var( --cfd-muted, #6b7280 );
}

.cfd-shop-control input,
.cfd-shop-control select {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid var( --cfd-border, #e5e7eb );
	border-radius: 10px;
	background: var( --cfd-bg, #fff );
	color: var( --cfd-fg, #111827 );
	font: inherit;
	min-height: 44px;
}

.cfd-shop-reset {
	padding: .6rem 1rem;
	min-height: 44px;
	border-radius: 10px;
	border: 1px solid var( --cfd-border, #e5e7eb );
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
}
.cfd-shop-reset:hover { border-color: var( --cfd-primary, #7c3aed ); }

.cfd-shop-count,
.cfd-shop-noresults,
.cfd-shop-empty {
	color: var( --cfd-muted, #6b7280 );
	margin: 0 0 1rem;
}

/* Cards ----------------------------------------------------------------- */

.cfd-shop-card { display: flex; flex-direction: column; }
.cfd-shop-card[hidden] { display: none; }

.cfd-shop-card .cfd-card-body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .85rem;
}

.cfd-shop-card .cfd-card-title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
}

.cfd-shop-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	font-size: .8rem;
	color: var( --cfd-muted, #6b7280 );
}

.cfd-shop-card .cfd-card-price {
	margin: .15rem 0 0;
	display: flex;
	align-items: baseline;
	gap: .35rem;
	font-size: 1rem;
}
.cfd-shop-regular { color: var( --cfd-muted, #6b7280 ); font-size: .85rem; }
.cfd-shop-currency { font-size: .8rem; color: var( --cfd-muted, #6b7280 ); }

.cfd-shop-bundle,
.cfd-shop-section,
.cfd-shop-nolink {
	margin: 0;
	font-size: .78rem;
	color: var( --cfd-muted, #6b7280 );
}

.cfd-shop-seen {
	margin: .35rem 0 0;
	display: flex;
	flex-direction: column;
	gap: .1rem;
	font-size: .78rem;
	color: var( --cfd-muted, #6b7280 );
	border-top: 1px solid var( --cfd-border, #e5e7eb );
	padding-top: .45rem;
}

.cfd-badge--daily { background: var( --cfd-accent, #22d3ee ); color: #06282e; }
.cfd-badge--bundle { background: #f59e0b; color: #241700; }

/* Pager + date lists ---------------------------------------------------- */

.cfd-shop-pager {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: space-between;
	align-items: center;
	margin: 2rem 0 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var( --cfd-border, #e5e7eb );
	font-size: .92rem;
}
.cfd-shop-pager a { color: var( --cfd-primary, #7c3aed ); text-decoration: none; }
.cfd-shop-pager a:hover { text-decoration: underline; }

.cfd-shop-recent h2 { font-size: 1.15rem; margin: 0 0 .75rem; }

.cfd-shop-date-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.cfd-shop-date-list li {
	display: flex;
	align-items: center;
	gap: .4rem;
	background: var( --cfd-card-bg, #f9fafb );
	border: 1px solid var( --cfd-border, #e5e7eb );
	border-radius: 999px;
	padding: .35rem .85rem;
	font-size: .85rem;
}
.cfd-shop-date-list li.is-current { border-color: var( --cfd-primary, #7c3aed ); }
.cfd-shop-date-list a { text-decoration: none; color: inherit; }
.cfd-shop-date-count { color: var( --cfd-muted, #6b7280 ); font-size: .78rem; }

.cfd-shop-date-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: .75rem;
}
.cfd-shop-date-grid a {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: .85rem 1rem;
	background: var( --cfd-card-bg, #f9fafb );
	border: 1px solid var( --cfd-border, #e5e7eb );
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
}
.cfd-shop-date-grid a:hover { border-color: var( --cfd-primary, #7c3aed ); }
.cfd-shop-date-grid span { font-size: .8rem; color: var( --cfd-muted, #6b7280 ); }

/* Cosmetic page shop history block -------------------------------------- */

.cfd-shop-appearances { margin: 2rem 0; }
.cfd-shop-appearances h3 { margin: 0 0 .5rem; }
.cfd-shop-lastseen { margin: 0 0 .75rem; color: var( --cfd-muted, #6b7280 ); }

/* Responsive ------------------------------------------------------------ */

@media ( max-width: 720px ) {
	.cfd-item-shop { padding: 1rem .75rem 2rem; }
	.cfd-shop-controls { padding: .85rem; }
	.cfd-shop-control,
	.cfd-shop-control--search { flex: 1 1 100%; }
	.cfd-shop-reset { width: 100%; }
	.cfd-shop-pager { flex-direction: column; align-items: flex-start; }
}