/*
 * Styling for the two pieces of WooCommerce-generated markup that
 * archive-product.php and single-product.php now render via WooCommerce's
 * own hooks: the catalog pagination (templates/loop/pagination.php ->
 * paginate_links()) and the breadcrumb trail (templates/global/breadcrumb.php).
 *
 * Same approach, and same reason, as assets/css/cart-checkout.css: this
 * markup is produced by WordPress/WooCommerce core, not by a template this
 * theme owns, so there is nowhere to hang Tailwind utility classes. Every
 * color/radius/size value below is copied from the compiled Tailwind
 * utility of the same name in assets/css/default.css so the result is
 * visually identical to the hand-classed components around it:
 *
 *   .bg-nib-green-light   -> rgb(133 180 49)
 *   .bg-nib-green-dark    -> rgb(115 158 38)
 *   .text-nib-900         -> rgb(43 78 39)
 *   .bg-nib-gray-light /
 *   .border-nib-gray-light-> rgb(225 227 211)
 *   .bg-nib-100           -> rgb(242 243 238)
 */

/*
 * --- Catalog pagination ---
 *
 * The selectors below are long on purpose. WooCommerce's own
 * woocommerce.css (which is enqueued on every shop/archive/product page,
 * and whose body gets the `woocommerce` class) already styles this exact
 * markup at a high specificity:
 *
 *   .woocommerce nav.woocommerce-pagination ul li a          (0,3,4)
 *   .woocommerce nav.woocommerce-pagination ul li span.current,
 *   .woocommerce nav.woocommerce-pagination ul li a:hover    (0,4,4)
 *
 * A natural-looking `.woocommerce-pagination .page-numbers.current` is
 * only (0,3,0) and loses outright — verified live, where the current page
 * kept WooCommerce's default lilac (rgb(233 230 237)) instead of the
 * theme's green. So each rule here carries one more class than the
 * WooCommerce rule it has to beat, rather than relying on stylesheet
 * order to break a tie.
 */
nav.woocommerce-pagination {
	display: flex;
	justify-content: center;
	padding: 1.5rem 0;
}

nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

nav.woocommerce-pagination ul.page-numbers li {
	list-style: none;
	margin: 0;
	border: 0;
}

/* (0,4,4) — beats .woocommerce nav.woocommerce-pagination ul li a (0,3,4). */
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers,
nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid rgb(225 227 211);
	border-radius: 0.125rem;
	background: #fff;
	color: rgb(43 78 39);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	text-decoration: none;
}

/* (0,5,4) — beats .woocommerce ... ul li a:hover (0,4,4). */
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus,
nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus {
	background: rgb(242 243 238);
	border-color: rgb(133 180 49);
	color: rgb(43 78 39);
}

/* (0,5,4) — beats .woocommerce ... ul li span.current (0,4,4). */
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers.current,
nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current,
nav.woocommerce-pagination ul.page-numbers li a.page-numbers.current {
	background: rgb(133 180 49);
	border-color: rgb(115 158 38);
	color: #fff;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots,
nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* --- Breadcrumb --- */
.woocommerce-breadcrumb {
	padding: 0.5rem 0 0.75rem;
	color: rgb(43 78 39);
	font-size: 0.75rem;
	line-height: 1rem;
}

.woocommerce-breadcrumb a {
	color: rgb(43 78 39);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: rgb(115 158 38);
	text-decoration: underline;
}