/* ==========================================================================
   Cheetah WooCommerce — Shop Archive Styles
   ==========================================================================
   Location: assets/css/conditional/woocommerce-archive.css
   Dependencies: woocommerce.css, core/variables.css
   Loaded on: is_shop() || is_product_taxonomy()
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shop Header
   -------------------------------------------------------------------------- */
.cheetah-shop-header {
	margin-bottom: var(--cheetah-space-xl, 2rem);
	padding-bottom: var(--cheetah-space-lg);
	border-bottom: 1px solid var(--cheetah-border, #e2e8f0);
}

.cheetah-shop-title {
	margin: 0 0 var(--cheetah-space-sm);
	font-size: var(--cheetah-font-size-h1, 2.5rem);
	font-weight: 700;
	color: var(--cheetah-heading, #0f172a);
}

.term-description {
	font-size: var(--cheetah-font-size-base, 1rem);
	color: var(--cheetah-text-muted, #94a3b8);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Shop Toolbar
   --------------------------------------------------------------------------
   A single row with the result count on the left and the ordering control
   on the right, vertically aligned to a shared optical midline.

   Vertical alignment contract
   ---------------------------
   WooCommerce's `woocommerce_result_count()` wraps the count text in a
   `<p>` element, and base.css applies `margin-bottom: 1rem` to every
   paragraph. The flex toolbar used to centre the paragraph's full box —
   visible text PLUS a phantom 1rem of bottom margin — which pushed the
   visible text above the toolbar's optical midline. The paragraph is
   reset below, so the flex container measures only the visible text and
   the toolbar centres exactly what the user sees.

   Both columns also share a matching `min-height`, so the row holds the
   same optical midline regardless of how long the count string becomes
   or which ordering option is currently selected.

   Vertical rhythm — asymmetric by design
   --------------------------------------
   The toolbar belongs to the product grid BELOW it, not to the page
   header ABOVE it. The spacing is therefore deliberately asymmetric:

     • Space above the toolbar — generous. It separates the toolbar from
       the page title / term description, which is a different conceptual
       block.

     • Space below the toolbar — tight. It visually attaches the toolbar
       to the grid it describes, so the filter row and the results read
       as one unit.

   The previous rule combined symmetric 1rem padding with a 1.5rem
   bottom margin, producing a 2.5rem gap below the toolbar content
   baseline. That empty band made the toolbar look like it was floating
   between two unrelated blocks. The bottom half of that space is now
   collapsed into a single ~1rem gap (0.5rem padding-bottom + 0.5rem
   margin-bottom), which is the standard rhythm for a filter/sort row.

   The top padding is unchanged, so the toolbar keeps its full breathing
   room from the header above.
   -------------------------------------------------------------------------- */
.cheetah-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--cheetah-space-md, 1rem);
	padding: var(--cheetah-space-md, 1rem) 0 var(--cheetah-space-sm, 0.5rem);
	margin-bottom: var(--cheetah-space-sm, 0.5rem);
}

/* --------------------------------------------------------------------------
   Result count — left column
   -------------------------------------------------------------------------- */
.cheetah-shop-toolbar__count {
	display: flex;
	align-items: center;
	min-height: 40px;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--cheetah-secondary, #64748b);
	letter-spacing: 0.005em;
}

/*
 * Reset the WooCommerce result-count paragraph.
 *
 * Scoped to `.cheetah-shop-toolbar` so the reset can never leak onto any
 * other template that still relies on the default paragraph spacing.
 *
 * Both selectors are listed deliberately:
 *   • `.cheetah-shop-toolbar__count p`              — the theme's wrapper
 *   • `.cheetah-shop-toolbar .woocommerce-result-count` — WooCommerce's
 *     own paragraph class, so the reset survives a future template change
 *     that renders the result count without the theme wrapper.
 */
.cheetah-shop-toolbar .woocommerce-result-count,
.cheetah-shop-toolbar__count p {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	line-height: inherit;
}

/* Tabular numerals keep the count from reflowing as the page number
   changes, which stabilises the toolbar's right edge against the
   ordering select. */
.cheetah-shop-toolbar .woocommerce-result-count {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Ordering control — right column
   -------------------------------------------------------------------------- */
.cheetah-shop-toolbar__ordering {
	display: flex;
	align-items: center;
	min-height: 40px;
}

.cheetah-shop-toolbar__ordering select {
	height: 40px;
	padding: 0 2.25rem 0 1rem;
	font-size: 0.875rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.4;
	border: 1px solid var(--cheetah-border, #e2e8f0);
	border-radius: 8px;
	background-color: #ffffff;
	color: var(--cheetah-text, #1e293b);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cheetah-shop-toolbar__ordering select:hover {
	border-color: #cbd5e1;
}

.cheetah-shop-toolbar__ordering select:focus {
	outline: none;
	border-color: var(--cheetah-primary, #2563eb);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* --------------------------------------------------------------------------
   Product Grid
   -------------------------------------------------------------------------- */
.cheetah-shop-main ul.products {
	margin-bottom: var(--cheetah-space-xl, 2rem);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
nav.woocommerce-pagination {
	margin-top: var(--cheetah-space-xl, 2rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
}

nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	/* Neutralize WooCommerce core "connected bar" borders. */
	border-right: 0;
	flex-wrap: wrap;
}

nav.woocommerce-pagination ul li {
	border: none;
	border-right: 0;
	margin: 0;
	overflow: visible;
}

/*
 * Only style the actual page controls (.page-numbers on the <a> / <span>
 * that is a direct child of <li>). Nested spans inside prev/next (arrow +
 * screen-reader text) must not receive their own border box — that caused
 * the double-border look on those buttons.
 */
nav.woocommerce-pagination ul li > a.page-numbers,
nav.woocommerce-pagination ul li > span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--cheetah-space-sm);
	font-size: var(--cheetah-font-size-sm, 0.875rem);
	font-weight: 500;
	line-height: 1;
	color: var(--cheetah-text, #1e293b);
	background-color: #ffffff;
	border: 1px solid var(--cheetah-border, #e2e8f0);
	border-radius: var(--cheetah-radius, 4px);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

nav.woocommerce-pagination ul li > a.page-numbers:hover,
nav.woocommerce-pagination ul li > a.page-numbers:focus {
	background-color: var(--cheetah-primary, #2563eb);
	border-color: var(--cheetah-primary, #2563eb);
	color: #ffffff;
	transform: translateY(-1px);
}

nav.woocommerce-pagination ul li > span.page-numbers.current,
nav.woocommerce-pagination ul li > a.page-numbers.current {
	background-color: var(--cheetah-primary, #2563eb);
	border-color: var(--cheetah-primary, #2563eb);
	color: #ffffff;
	font-weight: 700;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.16);
}

/* Ellipses are visual separators rather than interactive page controls. */
nav.woocommerce-pagination ul li.cheetah-pagination__ellipsis > span.page-numbers.dots {
	min-width: 28px;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: var(--cheetah-text-muted, #94a3b8);
	font-weight: 600;
	box-shadow: none;
	pointer-events: none;
}

/* Optional page-jump control. */
.cheetah-pagination__go-to {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	margin: 0;
	padding: 0.5rem 0.75rem;
	background: var(--cheetah-bg-alt, #f8fafc);
	border: 1px solid var(--cheetah-border, #e2e8f0);
	border-radius: var(--cheetah-radius-lg, 8px);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.cheetah-pagination__go-to-label {
	margin: 0;
	font-size: var(--cheetah-font-size-sm, 0.875rem);
	font-weight: 600;
	color: var(--cheetah-text, #1e293b);
	white-space: nowrap;
}

.cheetah-pagination__go-to-control {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.cheetah-pagination__go-to-input {
	width: 64px;
	height: 34px;
	padding: 0 0.5rem;
	box-sizing: border-box;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	color: var(--cheetah-text, #1e293b);
	background: #ffffff;
	border: 1px solid var(--cheetah-border, #cbd5e1);
	border-radius: var(--cheetah-radius, 4px);
	appearance: textfield;
}

.cheetah-pagination__go-to-input::-webkit-outer-spin-button,
.cheetah-pagination__go-to-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.cheetah-pagination__go-to-input:focus {
	outline: none;
	border-color: var(--cheetah-primary, #2563eb);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.cheetah-pagination__go-to-total {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--cheetah-text-muted, #64748b);
	white-space: nowrap;
}

.cheetah-pagination__go-to-button {
	min-width: 46px;
	height: 34px;
	padding: 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	color: #ffffff;
	background: var(--cheetah-primary, #2563eb);
	border: 1px solid var(--cheetah-primary, #2563eb);
	border-radius: var(--cheetah-radius, 4px);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.cheetah-pagination__go-to-button:hover,
.cheetah-pagination__go-to-button:focus {
	background: var(--cheetah-primary-hover, #1d4ed8);
	border-color: var(--cheetah-primary-hover, #1d4ed8);
	transform: translateY(-1px);
}

.cheetah-pagination__go-to-button:focus-visible {
	outline: 2px solid var(--cheetah-primary, #2563eb);
	outline-offset: 2px;
}

/* Keep nested arrow / SR-only spans as plain text inside the control. */
nav.woocommerce-pagination ul li > a.page-numbers > span {
	display: inline;
	min-width: 0;
	height: auto;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	border-radius: 0;
	line-height: 1;
	color: inherit;
}

@media (max-width: 640px) {
	nav.woocommerce-pagination {
		gap: 0.75rem;
	}

	nav.woocommerce-pagination ul {
		gap: 0.25rem;
		max-width: 100%;
	}

	nav.woocommerce-pagination ul li > a.page-numbers,
	nav.woocommerce-pagination ul li > span.page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 0.5rem;
	}

	.cheetah-pagination__go-to {
		width: 100%;
		max-width: 320px;
		justify-content: space-between;
	}
}

@media (max-width: 420px) {
	nav.woocommerce-pagination ul li > a.page-numbers,
	nav.woocommerce-pagination ul li > span.page-numbers {
		min-width: 34px;
		height: 34px;
		padding: 0 0.375rem;
		font-size: 0.8125rem;
	}

	.cheetah-pagination__go-to {
		align-items: flex-start;
		flex-direction: column;
	}

	.cheetah-pagination__go-to-control {
		width: 100%;
	}

	.cheetah-pagination__go-to-input {
		flex: 1 1 auto;
		width: auto;
	}

	.cheetah-pagination__go-to-button {
		flex: 0 0 auto;
	}
}

/* --------------------------------------------------------------------------
   Load More Button (Infinite Scroll)
   -------------------------------------------------------------------------- */
.cheetah-load-more {
	text-align: center;
	margin-top: var(--cheetah-space-xl, 2rem);
}

.cheetah-load-more__button {
	min-width: 200px;
}

.cheetah-load-more__button.is-loading {
	position: relative;
	color: transparent;
}

.cheetah-load-more__button.is-loading::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid #ffffff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: cheetah-spin 0.8s linear infinite;
}

@keyframes cheetah-spin {
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   No Products Found
   -------------------------------------------------------------------------- */
.woocommerce-no-products-found {
	text-align: center;
	padding: var(--cheetah-space-2xl, 3rem) var(--cheetah-space-lg);
}

.woocommerce-no-products-found .woocommerce-info {
	background-color: transparent;
	border: 1px dashed var(--cheetah-border, #e2e8f0);
	color: var(--cheetah-text-muted, #94a3b8);
}

/* --------------------------------------------------------------------------
   Product Category Archive
   -------------------------------------------------------------------------- */
.cheetah-shop-page .term-description {
	margin-bottom: var(--cheetah-space-lg);
}

/* Category image */
.cheetah-shop-page .woocommerce-products-header__image {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: var(--cheetah-radius-lg, 8px);
	margin-bottom: var(--cheetah-space-lg);
}