/*
 * Theoheat Shop Category Grid
 * ----------------------------------------------------------
 * Styles the native WooCommerce [product_categories] shortcode.
 *
 * Divi Code module class:
 * theo-shop-category-grid
 *
 * The values below are defaults.
 * Appearance > Shop Category Grid can override them.
 * ----------------------------------------------------------
 */


/*======================================================================
# 1. DEFAULT VARIABLES
======================================================================*/

.theo-shop-category-grid {

	/* Grid */
	--theo-cat-columns-desktop: 4;
	--theo-cat-columns-tablet: 3;
	--theo-cat-columns-mobile: 2;

	--theo-cat-gap: 8px;
	--theo-cat-gap-mobile: 6px;

	/* Card */
	--theo-cat-background: #ffffff;
	--theo-cat-border: #eadfd8;
	--theo-cat-border-hover: #F3911E;
	--theo-cat-border-width: 1px;
	--theo-cat-radius: 8px;

	/* Title */
	--theo-cat-title-bg: #F3911E;
	--theo-cat-title-bg-hover: #C04727;
	--theo-cat-title-colour: #ffffff;

	--theo-cat-title-font-size: 15px;
	--theo-cat-title-font-size-mobile: 13px;
	--theo-cat-title-weight: 500;
	--theo-cat-title-height: 46px;

	/* Hover */
	--theo-cat-hover-lift: -4px;
	--theo-cat-image-scale: 1.035;

	--theo-cat-shadow:
		0 10px 24px rgba(0, 0, 0, 0.12);

	/* Animation */
	--theo-cat-speed: 250ms;
}


/*======================================================================
# 2. GRID
======================================================================*/

.theo-shop-category-grid ul.products {
	display: grid !important;

	grid-template-columns:
		repeat(
			var(--theo-cat-columns-desktop),
			minmax(0, 1fr)
		);

	gap: var(--theo-cat-gap);

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}


/*
 * Remove WooCommerce clearing pseudo-elements.
 *
 * Otherwise they become unwanted CSS Grid items.
 */
.theo-shop-category-grid ul.products::before,
.theo-shop-category-grid ul.products::after {
	content: none !important;
	display: none !important;
}


/*======================================================================
# 3. CATEGORY CARD
======================================================================*/

.theo-shop-category-grid ul.products li.product-category.product {
	position: relative;

	float: none !important;
	clear: none !important;

	width: auto !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	border:
		var(--theo-cat-border-width)
		solid
		var(--theo-cat-border);

	border-radius: var(--theo-cat-radius);

	background: var(--theo-cat-background);

	overflow: hidden;

	transform: translateY(0);

	transition:
		transform var(--theo-cat-speed) ease,
		border-color var(--theo-cat-speed) ease,
		box-shadow var(--theo-cat-speed) ease;
}


/*
 * Remove WooCommerce first/last positioning behaviour.
 */
.theo-shop-category-grid ul.products li.product-category.product.first,
.theo-shop-category-grid ul.products li.product-category.product.last {
	clear: none !important;
	margin-right: 0 !important;
}


/*
 * Make the entire category card clickable.
 */
.theo-shop-category-grid ul.products li.product-category.product > a {
	display: block;

	position: relative;

	width: 100%;
	height: 100%;

	text-decoration: none !important;

	overflow: hidden;
}


/*======================================================================
# 4. CATEGORY IMAGE
======================================================================*/

.theo-shop-category-grid ul.products li.product-category.product img {
	display: block;

	position: relative;
	z-index: 1;

	width: 100% !important;
	height: auto !important;

	margin: 0 !important;

	transform: scale(1);
	transform-origin: center center;

	transition:
		transform var(--theo-cat-speed) ease,
		opacity var(--theo-cat-speed) ease;
}


/*======================================================================
# 5. CATEGORY TITLE
======================================================================*/

.theo-shop-category-grid .woocommerce-loop-category__title {
	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	z-index: 2;

	min-height: var(--theo-cat-title-height);

	margin: 0 !important;
	padding: 9px 10px !important;

	background: var(--theo-cat-title-bg);

	color: var(--theo-cat-title-colour) !important;

	font-size: var(--theo-cat-title-font-size) !important;
	font-weight: var(--theo-cat-title-weight) !important;
	line-height: 1.25 !important;

	text-align: center;

	transition:
		background-color var(--theo-cat-speed) ease,
		color var(--theo-cat-speed) ease;
}


/*
 * Hide WooCommerce product counts.
 */
.theo-shop-category-grid .woocommerce-loop-category__title .count {
	display: none !important;
}


/*======================================================================
# 6. HOVER
======================================================================*/

@media (hover: hover) {

	.theo-shop-category-grid ul.products li.product-category.product:hover {
		transform:
			translateY(
				var(--theo-cat-hover-lift)
			);

		border-color:
			var(--theo-cat-border-hover);

		box-shadow:
			var(--theo-cat-shadow);
	}


	.theo-shop-category-grid ul.products li.product-category.product:hover img {
		transform:
			scale(
				var(--theo-cat-image-scale)
			);
	}


	.theo-shop-category-grid
	ul.products
	li.product-category.product:hover
	.woocommerce-loop-category__title {
		background:
			var(--theo-cat-title-bg-hover);
	}
}


/*======================================================================
# 7. KEYBOARD FOCUS
======================================================================*/

.theo-shop-category-grid
ul.products
li.product-category.product
> a:focus-visible {

	outline:
		3px solid
		var(--theo-cat-border-hover);

	outline-offset: -3px;
}


/*======================================================================
# 8. TABLET
======================================================================*/

@media (max-width: 980px) {

	.theo-shop-category-grid ul.products {
		grid-template-columns:
			repeat(
				var(--theo-cat-columns-tablet),
				minmax(0, 1fr)
			);
	}
}


/*======================================================================
# 9. MOBILE
======================================================================*/

@media (max-width: 767px) {

	.theo-shop-category-grid ul.products {

		grid-template-columns:
			repeat(
				var(--theo-cat-columns-mobile),
				minmax(0, 1fr)
			);

		gap:
			var(--theo-cat-gap-mobile);
	}


	.theo-shop-category-grid .woocommerce-loop-category__title {

		min-height: 44px;

		padding:
			8px 6px !important;

		font-size:
			var(--theo-cat-title-font-size-mobile) !important;
	}
}