/**
 * WooCommerce Category Grid — Reusable card styling for [product_categories].
 *
 * Card layout: square image + centered title bar with background.
 * Works anywhere the [product_categories] shortcode is used.
 * Blocksy ct-media-container overrides included.
 *
 * Customizable via CSS custom properties on the parent container:
 *   --bc-cat-radius:     Card border radius (default: 8px)
 *   --bc-cat-title-bg:   Title bar background (default: palette-color-6 / #FAF6F2)
 *   --bc-cat-title-color: Title text color (default: palette-color-3 / #746A5F)
 *   --bc-cat-title-hover: Title hover color (default: palette-color-1 / #111)
 *   --bc-cat-title-size:  Title font size desktop (default: 24px)
 *   --bc-cat-title-size-mobile: Title font size mobile (default: 16px)
 *   --bc-cat-title-height: Title bar min height (default: 74px)
 *
 * @package Blocksy_Child
 * @since 1.0.0
 */

/* Grid wrapper — override WordPress constrained layout padding/max-width */
.bc-category-grid {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bc-category-grid > .woocommerce,
.bc-category-grid > p > .woocommerce {
	max-width: none;
}

.bc-category-grid ul.products {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Card */
li.product-category.product {
	--_radius: var(--bc-cat-radius, 8px);
	--_title-bg: var(--bc-cat-title-bg, var(--theme-palette-color-6, #FAF6F2));
	--_title-color: var(--bc-cat-title-color, var(--theme-palette-color-3, #746A5F));
	--_title-hover: var(--bc-cat-title-hover, var(--theme-palette-color-1, #111));
	--_title-size: var(--bc-cat-title-size, 24px);
	--_title-size-mobile: var(--bc-cat-title-size-mobile, 16px);
	--_title-height: var(--bc-cat-title-height, 74px);

	border-radius: var(--_radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Image container */
li.product-category.product figure {
	margin: 0;
	padding: 0;
}

li.product-category.product figure a,
li.product-category.product figure a.ct-media-container {
	display: block;
	border-radius: 0;
}

/* Image — override WC inline aspect-ratio: 1/1 */
li.product-category.product figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 365.5 / 392 !important;
	object-fit: cover;
	border-radius: 0;
	display: block;
	transition: transform 0.3s ease;
}

li.product-category.product:hover figure img {
	transform: scale(1.03);
}

/* Hide count badge */
.woocommerce-loop-category__title .count {
	display: none;
}

/* Title bar */
h2.woocommerce-loop-category__title,
h3.woocommerce-loop-category__title {
	background: var(--_title-bg);
	padding: 16px 12px;
	margin: 0;
	font-size: var(--_title-size-mobile);
	font-weight: 500;
	text-align: center;
	min-height: var(--_title-height);
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
}

h2.woocommerce-loop-category__title a,
h3.woocommerce-loop-category__title a {
	color: var(--_title-color);
	text-decoration: none;
}

li.product-category.product:hover h2.woocommerce-loop-category__title a,
li.product-category.product:hover h3.woocommerce-loop-category__title a {
	color: var(--_title-hover);
}

@media (min-width: 1024px) {
	h2.woocommerce-loop-category__title,
	h3.woocommerce-loop-category__title {
		font-size: var(--_title-size);
	}
}