/*
 * Product archive: heading, filter chips, 2-column grid, pagination.
 */

.archive.container {
	padding-block: 14px 24px;
}

.archive__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
}

.archive__title {
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
}

.archive__count {
	font-size: var(--fs-12);
	color: var(--c-text-muted);
}

/* ---- Filter chips ------------------------------------------------------- */

.archive__filters {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.chip-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	flex: 1;
}

.chip-row::-webkit-scrollbar {
	display: none;
}

.chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 14px;
	border-radius: var(--r);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	font-size: var(--fs-12);
	font-weight: var(--fw-medium);
	color: var(--c-text);
	white-space: nowrap;
}

.chip.is-active {
	background: var(--c-teal);
	border-color: var(--c-teal);
	color: #fff;
}

.chip--filter {
	color: var(--c-text-muted);
}

.chip--filter svg {
	width: 16px;
	height: 16px;
}

/* ---- Grid --------------------------------------------------------------- */

.archive__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

/* Cards inside the grid stretch to the column instead of the rail's fixed width. */
.archive__grid .pcard {
	width: auto;
}

/*
 * The listing card is a size up from the one used in the home rails — the
 * Products frame gives it a 14/400 title and a 16/bold price against the
 * rail's 12/500 and 14/bold. Card box is ~165×196.
 */
.archive__grid .pcard__title {
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
}

.archive__grid .pcard__now {
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
	color: #333;
}

.archive__grid .pcard__now small {
	font-size: 8px;
	font-weight: var(--fw-regular);
}

.archive__grid .pcard__old {
	font-size: var(--fs-10);
	color: #757575;
}

.archive__grid .pcard__off {
	font-size: 9px;
}

.archive__grid .pcard__chip {
	font-size: var(--fs-10);
	color: #006FE8;
}

.archive__empty {
	padding: 40px 0;
	text-align: center;
	color: var(--c-text-muted);
}

/* ---- Pagination --------------------------------------------------------- */

.archive__pager {
	margin-top: 24px;
}

.archive__pager .page-numbers {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.archive__pager .page-numbers li {
	display: inline-flex;
}

.archive__pager .page-numbers a,
.archive__pager .page-numbers span {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-radius: var(--r);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	font-size: var(--fs-13);
	font-weight: var(--fw-medium);
	color: var(--c-text);
}

.archive__pager .page-numbers span.current {
	background: var(--c-teal);
	border-color: var(--c-teal);
	color: #fff;
}

.archive__pager .page-numbers .dots {
	border: 0;
	background: none;
}

/* The desktop filter rail has no place in the mobile layout — the chip row
   above the grid already covers category switching there. */
.archive__rail {
	display: none;
}