/**
 * WooCommerce product category page overrides.
 *
 * Category-archive-specific chrome only. The product loop / card styling is
 * shared and lives in shared/woocommerce-product-cards.css.
 */

/* ---- Hide the result count and the ordering dropdown ---- */
.woocommerce-result-count,
.woocommerce-ordering {
	display: none !important;
}

/* =========================================================================
   Product grid — category-only surface (white panel with padding).
   The grid layout + card styling come from shared/woocommerce-product-cards.css.
   ========================================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products {
	padding: 28px;
	background: var(--wc-bg);
}

/* Extra breathing room under the title on category cards. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	padding-bottom: 15px !important;
}

/* =========================================================================
   Term (category) description — moved below the products via functions.php.
   Set it apart from the product grid with a clear separator.
   ========================================================================= */
.woocommerce .term-description,
.woocommerce-page .term-description {
	margin-top: 40px;
	border-top: 1px solid var(--vk-border);
	background: var(--vk-bg);
	padding: 28px;
	color: var(--vk-ink-soft);
	font-size: var(--vk-text-md);
	line-height: 1.7;
}
.woocommerce .term-description > *:first-child,
.woocommerce-page .term-description > *:first-child {
	margin-top: 0;
}
.woocommerce .term-description > *:last-child,
.woocommerce-page .term-description > *:last-child {
	margin-bottom: 0;
}
/* Emphasise the intro line of the description. */
.woocommerce .term-description > p:first-child,
.woocommerce-page .term-description > p:first-child {
	color: var(--vk-ink);
	font-size: var(--vk-text-lg);
	font-weight: 700;
}