/* =========================================================
   TEMPUS — Shop archive (category chooser, product archive
   header/chips/grid/toolbar, empty state)

   Loaded on is_shop() || is_product_taxonomy() only — see
   tempus_kadence_shop_assets() in functions.php.
   Every colour/type/spacing value reads from tokens.css.
   No !important: the chooser sits outside Woo's ul.products, so
   Kadence archive styles don't reach it. If one ever does, scope
   or dequeue it rather than escalating specificity.
   ========================================================= */

/* ---------------------------------------------------------
   COLLECTION HEADER
   --------------------------------------------------------- */
.tempus-collection-header {
	max-width: 720px;
	margin: 0 auto var(--space-8);
	padding-top: var(--space-6);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

.tempus-collection-header__eyebrow {
	margin: 0;
	font: var(--label-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--gold-tempus);
}

.tempus-collection-header__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(38px, 6vw, 56px);
	line-height: 1.05;
	letter-spacing: var(--tracking-display);
	color: var(--white);
}

.tempus-collection-header__intro {
	margin: 0;
	max-width: 560px;
	font: var(--body-lg);
	color: var(--on-surface-variant);
}

.tempus-collection-header__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-5);
	margin: var(--space-3) 0 0;
	padding-top: var(--space-3);
	border-top: var(--border-width) solid var(--border-gold);
}

.tempus-collection-header__stat {
	display: flex;
	flex-direction: column-reverse; /* value above label visually; dt stays first in the DOM */
	align-items: center;
	gap: 4px;
}

.tempus-collection-header__stat-value {
	margin: 0;
	font-family: var(--font-display);
	font-size: 36px;
	line-height: 1;
	color: var(--gold-tempus);
}

.tempus-collection-header__stat-label {
	font: var(--label-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--on-surface-variant);
}

/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */
.tempus-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter);
	margin-bottom: var(--section-gap);
}

/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */
.tempus-cat-card {
	background: var(--espresso);
	border: var(--border-width) solid var(--outline-variant);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.tempus-cat-card:not(.tempus-cat-card--coming-soon):hover,
.tempus-cat-card:not(.tempus-cat-card--coming-soon):focus-within {
	border-color: var(--border-gold-strong);
	box-shadow: var(--glow-hover);
}

.tempus-cat-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.tempus-cat-card__link:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

/* Media */
.tempus-cat-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--near-black);
	overflow: hidden;
}

.tempus-cat-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.tempus-cat-card__link:hover .tempus-cat-card__media img {
	transform: scale(1.03);
}

/* Placeholder panel — bordered box, rule-flanked label */
.tempus-cat-card__placeholder {
	position: absolute;
	inset: var(--space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--border-width) solid var(--border-gold);
	border-radius: var(--radius);
	padding: 0 var(--space-3);
}

.tempus-cat-card__placeholder-label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	font: var(--label-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-align: center;
	color: var(--on-surface-variant);
}

.tempus-cat-card__placeholder-label::before,
.tempus-cat-card__placeholder-label::after {
	content: "";
	flex: 1;
	height: var(--border-width);
	background: var(--border-gold);
}

/* Body */
.tempus-cat-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: var(--space-4);
}

.tempus-cat-card__count {
	margin: 0;
	font: var(--label-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--gold-tempus);
}

.tempus-cat-card--coming-soon .tempus-cat-card__count {
	color: var(--on-surface-variant);
}

.tempus-cat-card__title {
	margin: 0;
	font: var(--headline);
	letter-spacing: var(--tracking-display);
	color: var(--white);
}

.tempus-cat-card__desc {
	font: var(--body-md);
	color: var(--on-surface-variant);
}

.tempus-cat-card__desc p {
	margin: 0;
}

.tempus-cat-card__desc p + p {
	margin-top: var(--space-1);
}

/* Chips */
.tempus-cat-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.tempus-cat-card__chip {
	padding: 4px 12px;
	border: var(--border-width) solid var(--border-gold);
	border-radius: var(--radius-full);
	font: var(--label-sm);
	letter-spacing: var(--tracking-label-sm);
	text-transform: uppercase;
	color: var(--on-surface-variant);
}

/* CTA */
.tempus-cat-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: auto;
	padding-top: var(--space-2);
	font: var(--label-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--gold-tempus);
	transition: color var(--dur-fast) var(--ease-out);
}

.tempus-cat-card__arrow {
	transition: transform var(--dur) var(--ease-out);
}

.tempus-cat-card__link:hover .tempus-cat-card__cta {
	color: var(--gold-deep);
}

.tempus-cat-card__link:hover .tempus-cat-card__arrow {
	transform: translateX(4px);
}

/* ---------------------------------------------------------
   EMPTY STATE (loop/no-products-found.php)
   --------------------------------------------------------- */
.tempus-empty {
	max-width: 560px;
	margin: var(--space-8) auto var(--section-gap);
	padding: var(--space-6) var(--space-4);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	border: var(--border-width) solid var(--border-gold);
	border-radius: var(--radius-lg);
	background: var(--espresso);
}

.tempus-empty__eyebrow {
	margin: 0;
	font: var(--label-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--gold-tempus);
}

.tempus-empty__title {
	margin: 0;
	font: var(--headline);
	letter-spacing: var(--tracking-display);
	color: var(--white);
}

.tempus-empty__text {
	margin: 0;
	font: var(--body-md);
	color: var(--on-surface-variant);
}

.tempus-empty__link {
	display: inline-flex;
	gap: var(--space-1);
	margin-top: var(--space-2);
	font: var(--label-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--gold-tempus);
	text-decoration: none;
}

.tempus-empty__link:hover,
.tempus-empty__link:focus-visible {
	color: var(--gold-deep);
}

/* ---------------------------------------------------------
   PRODUCT ARCHIVE (category / tag / search)
   Header reuses .tempus-collection-header above; the cards
   themselves are the shared .tz-card from main.css.
   --------------------------------------------------------- */
.tempus-archive {
	margin-bottom: var(--section-gap);
}

.tempus-archive-header .tempus-collection-header__intro p {
	margin: 0;
}

.tempus-archive-header .tempus-collection-header__intro p + p {
	margin-top: var(--space-1);
}

/* Chips */
.tempus-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1);
	margin-top: var(--space-2);
}

.tempus-chip {
	padding: 8px 16px;
	border: var(--border-width) solid var(--border-gold);
	border-radius: var(--radius-full);
	font: var(--label-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--on-surface-variant);
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.tempus-chip:hover,
.tempus-chip:focus-visible {
	border-color: var(--gold-tempus);
	color: var(--gold-tempus);
}

.tempus-chip.is-active {
	border-color: var(--gold-tempus);
	background: var(--gold-tempus);
	color: var(--near-black);
}

/* Toolbar — notices full width, result count left, sorting right.
   Kadence prints count + ordering inside .kadence-shop-top-row. */
.tempus-archive__toolbar {
	margin-bottom: var(--space-3);
}

.tempus-archive__toolbar .kadence-shop-top-row {
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding-bottom: var(--space-2);
	border-bottom: var(--border-width) solid var(--outline-variant);
}

.tempus-archive__toolbar .woocommerce-result-count,
.tempus-archive__toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
}

.tempus-archive__toolbar .woocommerce-result-count {
	font: var(--body-sm);
	letter-spacing: var(--tracking-label-sm);
	color: var(--on-surface-variant);
}

.tempus-archive__toolbar .woocommerce-ordering select {
	padding: 8px 32px 8px 12px;
	font: var(--body-sm);
}

/* Grid — 4 / 2 / 1, same gap and breakpoints as the homepage .tz-grid-4.
   (0,3,1) beats Kadence's .grid-cols / .grid-lg-col-4 classes on ul.products. */
.woocommerce .tempus-archive ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .tempus-archive ul.products::before,
.woocommerce .tempus-archive ul.products::after {
	content: none; /* WooCommerce's float clearfix would take a grid cell */
}

/* Pagination */
.woocommerce .tempus-archive nav.woocommerce-pagination {
	margin: var(--space-6) auto 0;
}

.woocommerce .tempus-archive nav.woocommerce-pagination ul li .page-numbers {
	border: var(--border-width) solid var(--outline-variant);
	border-radius: var(--radius-sm);
	font: var(--label-bold);
	color: var(--on-surface-variant);
}

.woocommerce .tempus-archive nav.woocommerce-pagination ul li a:hover,
.woocommerce .tempus-archive nav.woocommerce-pagination ul li a:focus-visible {
	border-color: var(--gold-tempus);
	color: var(--gold-tempus);
}

.woocommerce .tempus-archive nav.woocommerce-pagination ul li span.current {
	border-color: var(--gold-tempus);
	background: var(--gold-tempus);
	color: var(--near-black);
}

@media (max-width: 900px) {
	.woocommerce .tempus-archive ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.woocommerce .tempus-archive ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.tempus-archive__toolbar .kadence-shop-top-row {
		justify-content: center;
	}
}

/* ---------------------------------------------------------
   RESPONSIVE — Kadence tablet breakpoint (max-width: 1024px)
   --------------------------------------------------------- */
@media (max-width: 1024px) {
	.tempus-cat-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.tempus-collection-header {
		padding-top: var(--space-3);
		margin-bottom: var(--space-6);
	}

	.tempus-cat-card__body {
		padding: var(--space-3);
	}

	.tempus-cat-card__title {
		font: var(--headline-sm);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tempus-chip,
	.tempus-cat-card,
	.tempus-cat-card__media img,
	.tempus-cat-card__arrow {
		transition: none;
	}
}