/*
 * Product Affiliate Manager — estilos base.
 *
 * - Hereda la tipografía de tu tema (font-family: inherit).
 * - Selectores de UNA sola clase (baja especificidad): tu CSS del tema o
 *   «Apariencia > Personalizar > CSS adicional» los sobrescribe sin !important.
 * - Cambios rápidos: redefine las variables en tu CSS, por ejemplo:
 *     .paf-grid { --paf-title-color: #0a58ca; --paf-button-bg: #e91e8c; }
 *
 * Clases disponibles:
 *   .paf-grid            contenedor (cuadrícula)
 *   .paf-category-SLUG   contenedor, según la categoría (ej. .paf-category-arneses)
 *   .paf-cols-N          número de columnas (1-6)
 *   .paf-item            cada producto
 *   .paf-product-ID      cada producto, por su ID
 *   .paf-image / .paf-img  caja de imagen / imagen
 *   .paf-title           nombre del producto
 *   .paf-desc            descripción
 *   .paf-button          botón «Ver Producto»
 *   .paf-message         mensaje de «sin productos»
 *
 * Estas variables también se pueden cambiar desde Productos de afiliación > Aspecto.
 * Extra: --paf-title-size, --paf-desc-size, --paf-button-size, --paf-button-pad-y, --paf-button-pad-x
 */

.paf-grid {
	--paf-cols: 4;
	--paf-gap-x: 24px;
	--paf-gap-y: 64px;
	--paf-image-size: 250px;
	--paf-title-color: #2a7ac4;
	--paf-desc-color: #444444;
	--paf-button-bg: #f29cc0;
	--paf-button-bg-hover: #e97db0;
	--paf-button-color: #ffffff;
	--paf-button-radius: 3px;

	display: grid;
	grid-template-columns: repeat(var(--paf-cols), minmax(0, 1fr));
	gap: var(--paf-gap-y) var(--paf-gap-x);
	width: 100%;
	max-width: 100%;
	margin: 1.5em 0;
	box-sizing: border-box;
}

.paf-cols-1 { --paf-cols: 1; }
.paf-cols-2 { --paf-cols: 2; }
.paf-cols-3 { --paf-cols: 3; }
.paf-cols-4 { --paf-cols: 4; }
.paf-cols-5 { --paf-cols: 5; }
.paf-cols-6 { --paf-cols: 6; }

.paf-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
	box-sizing: border-box;
}

.paf-image {
	width: 100%;
	max-width: var(--paf-image-size);
	aspect-ratio: 1 / 1;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.paf-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	margin: 0;
}

.paf-title {
	width: 100%;
	max-width: var(--paf-image-size, 250px); /* el texto nunca es más ancho que la imagen */
	text-wrap: balance;
	margin: 14px 0 8px;
	font-family: inherit;
	font-size: var(--paf-title-size, 1em);
	font-weight: 400;
	line-height: 1.35;
	color: var(--paf-title-color);
	text-align: center;
	overflow-wrap: anywhere;
}

.paf-desc {
	width: 100%;
	max-width: var(--paf-image-size, 250px);
	text-wrap: pretty;
	margin: 0 0 14px;
	font-family: inherit;
	font-size: var(--paf-desc-size, .9em);
	line-height: 1.5;
	color: var(--paf-desc-color);
	text-align: center;
	overflow-wrap: anywhere;
}

.paf-button {
	display: inline-block;
	margin-top: auto;
	padding: var(--paf-button-pad-y, 10px) var(--paf-button-pad-x, 22px);
	background: var(--paf-button-bg);
	color: var(--paf-button-color);
	font-family: inherit;
	font-size: var(--paf-button-size, .95em);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--paf-button-radius);
	transition: background-color .2s ease, transform .2s ease;
}
/*
 * Estado normal: el botón se ve siempre igual, esté visitado, pulsado o con el foco puesto.
 * (Tras pulsar, el navegador deja el foco en el enlace: por eso el color de hover NO se
 * aplica con :focus, solo con el ratón encima.)
 */
.paf-button:link,
.paf-button:visited,
.paf-button:active,
.paf-button:focus {
	background: var(--paf-button-bg);
	color: var(--paf-button-color);
	text-decoration: none;
	transform: none;
}

/* Hover: solo en dispositivos con ratón (en móvil el hover se queda «pegado» tras tocar). */
@media (hover: hover) {
	.paf-button:hover {
		background: var(--paf-button-bg-hover);
		color: var(--paf-button-color);
		text-decoration: none;
		transform: translateY(-1px);
	}
}

/* Accesibilidad: el teclado ve un contorno, sin cambiar los colores. */
.paf-button:focus-visible {
	outline: 2px solid var(--paf-title-color);
	outline-offset: 2px;
}

/* Responsive: se respetan las columnas del shortcode mientras quepan */
@media (max-width: 1280px) {
	.paf-cols-6 { --paf-cols: 5; }
}
@media (max-width: 1100px) {
	.paf-cols-6,
	.paf-cols-5 { --paf-cols: 4; }
}
@media (max-width: 900px) {
	.paf-cols-6,
	.paf-cols-5,
	.paf-cols-4 { --paf-cols: 3; }
}
@media (max-width: 680px) {
	.paf-cols-6,
	.paf-cols-5,
	.paf-cols-4,
	.paf-cols-3 { --paf-cols: 2; }
	.paf-grid { --paf-gap-x: 14px; --paf-gap-y: 44px; }
}
@media (max-width: 360px) {
	.paf-cols-6,
	.paf-cols-5,
	.paf-cols-4,
	.paf-cols-3,
	.paf-cols-2 { --paf-cols: 1; }
}

.paf-message { color: #777; font-size: .9em; }