/* ============================================================
   Popular Categories — product-card treatment
   ============================================================

   The home page's "Popular Categories" tiles are styled as product cards
   rather than circular icons, so the section reads as part of the same system
   as the product grid below it.

   SCOPE: .cat-design-alt is exactly the 30 Popular Categories tiles. The three
   "Shop by Item" tiles further down use .cat-design-zoom-out and are untouched.

   THE CIRCLE IS A VARIABLE, NOT A BORDER-RADIUS RULE
   Woodmart rounds every category thumb with `border-radius: var(--wd-cat-brd-radius)`
   and sets that variable to 50% on :root. Overriding border-radius on the thumb
   alone leaves the circle on the other elements that read the same variable, so
   the variable itself is redefined on the tile. :root is the weakest place to
   set a custom property, so one declaration here wins for the whole subtree. */

.cat-design-alt {
	--wd-cat-brd-radius: 0;
}

/* height:100% + column flex so every card in a row ends level, regardless of
   whether its title runs to one line ("Art") or two ("Hunting/Shooting/Fishing"). */
.cat-design-alt .wd-cat-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
	border: 1px solid #e6e4df;
	border-radius: 8px;
	overflow: hidden;
	/* Same transition the product grid uses, so the two read as one system. */
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cat-design-alt .wd-cat-inner:hover {
	transform: translateY(-10px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Image well. White rather than tinted: these icons were drawn to sit on the
   white circle, several have baked-in white backgrounds, and a tint would show
   a hard seam on those. No forced aspect-ratio — the art is already square, so
   letting it size naturally keeps the cards compact. */
.cat-design-alt .wd-cat-thumb {
	background-color: #fff;
	margin-bottom: 0;
}

.cat-design-alt .wd-cat-image {
	display: block;
	margin: 0;
}

.cat-design-alt .wd-cat-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Text block: left-aligned like a product card, not centred like a category.
   margin-top:auto pins it to the bottom of the card so the baselines line up
   across a row even when one title wraps. */
.cat-design-alt .wd-cat-content {
	margin-top: auto;
	padding: 12px 14px 14px;
	text-align: left;
	background-color: #fff;
}

.cat-design-alt .wd-entities-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	color: var(--color-gray-900, #1f2937);
}

/* The product count takes the role the SKU/meta line plays on a product card:
   small, uppercase, letter-spaced, grey. Mirrors .onyx-product-model. */
.cat-design-alt .wd-cat-count,
.cat-design-alt .wd-cat-count a {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gray-600, #6b7280);
	text-align: left;
	line-height: 1.2;
	text-decoration: none;
}