/**
 * TECNIGAL — Tarjetas de categoría y subcategoría.
 *
 * Woodmart (cat-design-default) superpone el título sobre la foto. Con nombres
 * largos el texto se salía de la tarjeta y, con fotos reales de fondo, quedaba
 * ilegible. Aquí se fija la tarjeta cuadrada, la foto en "contain" sobre blanco
 * y el título dentro de una franja de contraste, limitado a dos líneas.
 */

.wd-cat.category-grid-item .wd-cat-inner,
.wd-cat.cat-design-default .wd-cat-inner {
	position: relative;
	overflow: hidden;
	border: 1px solid #e6e9ee;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: box-shadow .2s ease, border-color .2s ease;
}

.wd-cat.category-grid-item .wd-cat-inner:hover {
	border-color: #d3dae4;
	box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
}

/* ------------------------------------------------------------------- imagen */

.wd-cat.category-grid-item .wd-cat-inner .wd-cat-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	background-color: #fff;
	overflow: hidden;
}

.wd-cat.category-grid-item .wd-cat-inner .wd-cat-thumb > a,
.wd-cat.category-grid-item .wd-cat-inner .wd-cat-image {
	display: block;
	width: 100%;
	height: 100%;
}

.wd-cat.category-grid-item .wd-cat-inner .wd-cat-thumb img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	/* "contain" para que no recorte la pieza; el catálogo usa el mismo criterio */
	object-fit: contain !important;
	object-position: center;
	padding: 12px 12px 64px;
	margin: 0 !important;
	transition: transform .35s ease;
}

.wd-cat.category-grid-item .wd-cat-inner:hover .wd-cat-thumb img {
	transform: scale(1.04);
}

/* ------------------------------------------------- franja de texto legible */

.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	top: auto;
	inset-inline: 0;
	z-index: 2;
	/* el diseño del tema esconde el texto abajo y lo sube al pasar el cursor;
	   aquí queremos que se vea siempre */
	transform: none !important;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	max-width: none;
	min-height: 0;
	padding: 26px 12px 12px !important;
	background: linear-gradient(to top, rgba(6, 16, 32, .88) 0%, rgba(6, 16, 32, .74) 55%, rgba(6, 16, 32, 0) 100%);
	text-align: left;
	pointer-events: none;
}

.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content .wd-entities-title {
	/* el tema lo saca del flujo con position:absolute;bottom:100%, o sea por
	   encima de la franja; devolverlo al flujo es lo que lo mete en la caja */
	position: static !important;
	bottom: auto !important;
	inset-inline-start: auto !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	/* 2 líneas exactas para que todas las tarjetas midan lo mismo */
	min-height: 2.5em;
	text-transform: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	word-break: normal;
	overflow-wrap: break-word;
}

.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content .wd-cat-count,
.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content .more-products {
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: 12px;
	line-height: 1.2;
}

.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content .wd-cat-count a,
.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content .more-products a {
	color: rgba(255, 255, 255, .82);
	pointer-events: auto;
}

.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content .wd-cat-count a:hover {
	color: #fff;
}

/* el enlace que cubre la tarjeta debe quedar por encima del degradado */
.wd-cat.category-grid-item .category-link,
.wd-cat.category-grid-item .wd-fill {
	z-index: 3;
}

/* ------------------------------------------------------------------- móvil */

@media (max-width: 768.98px) {
	.wd-cat.category-grid-item .wd-cat-inner .wd-cat-thumb img {
		padding: 8px 8px 56px;
	}

	.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content {
		padding: 22px 10px 10px !important;
	}

	.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content .wd-entities-title {
		font-size: 13px;
	}

	.wd-cat.category-grid-item .wd-cat-inner .wd-cat-content .wd-cat-count {
		font-size: 11px;
	}
}