/* --------------------------------------------------------------------------
   Styling for the fixes in inc/10-broken.php.

   Loads after style.css and after Revo's own theme-options CSS, so these rules
   win without !important. See functions.php for the ordering.

   DGA-023  sub-category tiles, now text instead of placeholder images
   DGA-041  the theme 404 screen's dead "Go Support" button
   -------------------------------------------------------------------------- */

/* --- sub-category grid ---------------------------------------------------- */

/* Revo prints its category <ul> whether or not there are categories to put in
   it, which leaves an empty grid taking up space on listing pages that have no
   sub-categories (the 12,104-product Ayurvedic Organic Herbal Products page,
   for one). */
.products-wrapper > ul.products-loop:empty {
	display: none;
}

/* Almost no category has a thumbnail, so the grid used to be a wall of grey
   WooCommerce placeholders that read as broken images. inc/10-broken.php now
   emits nothing where there is no real image; this turns what is left into a
   deliberate text grid rather than a naked list of links. */
.products-wrapper > ul.products-loop > li.product-category {
	margin-bottom: 12px;
}

.products-wrapper > ul.products-loop > li.product-category > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 74px;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid #e3e3e3;
	border-radius: 3px;
	background: #fbfcfb;
	text-align: center;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.products-wrapper > ul.products-loop > li.product-category > a:hover,
.products-wrapper > ul.products-loop > li.product-category > a:focus {
	border-color: #146614;
	background: #f2f7f2;
}

.products-wrapper > ul.products-loop > li.product-category .woocommerce-loop-category__title {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	color: #2f2f2f;
	text-transform: none;
	letter-spacing: 0;
}

/* <mark> defaults to a yellow highlight in every browser, which is not what a
   product count should look like. */
.products-wrapper > ul.products-loop > li.product-category .woocommerce-loop-category__title mark.count {
	display: block;
	margin-top: 3px;
	background: none;
	color: #7b7b7b;
	font-size: 12px;
	font-weight: 400;
}

/* Categories that do have a real image keep it, sized to match the text tiles. */
.products-wrapper > ul.products-loop > li.product-category > a:has(img.dga-subcat-thumb) {
	flex-direction: column;
	gap: 8px;
}

.products-wrapper > ul.products-loop > li.product-category img.dga-subcat-thumb {
	display: block;
	max-width: 100%;
	height: auto;
}

/* --- theme 404 screen ------------------------------------------------------ */

/* With revo_theme[page_404] cleared the theme's own 404 screen is back, and it
   ships a second button, "Go Support", hardcoded to href="#". Nothing to point
   it at: the theme's support site is not this business. */
.wrapper_404 .content_404 .btn-404.support {
	display: none;
}