/**
 * Badge Hot Sale: esquina inferior derecha de la foto del producto.
 *
 * El badge se imprime dentro del contenedor de la imagen, que en WoodMart es
 * .product-element-top. Se le fuerza position:relative por si el tema no lo
 * trae, porque sin un ancestro posicionado el badge se iría a la esquina de la
 * ventana.
 */

.product-element-top,
.woocommerce-loop-product__link,
.cm-hot-sale .product-thumbnail {
	position: relative;
}

.cm-hot-badge {
	position: absolute;
	right: var(--cm-hot-margen, 8px);
	bottom: var(--cm-hot-margen, 8px);
	z-index: 5;

	display: block;
	width: var(--cm-hot-ancho, 64px);
	max-width: 45%; /* Que no tape el producto en tarjetas pequeñas. */

	line-height: 0;
	pointer-events: none; /* No debe robarle el clic al enlace del producto. */
}

.cm-hot-badge img {
	display: block;
	width: 100%;
	height: auto;
	/* El tema pone width/height a las imágenes del loop; esto lo acota al badge. */
	max-width: 100%;
	border-radius: 0;
	box-shadow: none;
}

/* En el carrusel de WoodMart la tarjeta encoge: el badge la acompaña. */
@media (max-width: 768px) {
	.cm-hot-badge {
		width: calc( var(--cm-hot-ancho, 64px) * 0.75 );
	}
}

/* Algunos temas animan la imagen al pasar el cursor; el badge se queda quieto. */
.product-element-top:hover .cm-hot-badge {
	transform: none;
}

/* ------------------------------------------------------------------ */
/* Cuenta regresiva                                                    */
/* ------------------------------------------------------------------ */

.cm-countdown {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;

	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 12px;

	color: #fff;
	box-shadow: 0 4px 16px rgba(240, 90, 20, .28);

	/* Naranja difuminado del banner del home, en tres capas:
	   1) halo de luz donde está el icono,
	   2) punteado tenue,
	   3) degradado radial naranja → naranja rojizo hacia los bordes. */
	background-color: #DF3410;
	background-image:
		radial-gradient(58% 120% at 14% 18%, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(circle, rgba(255, 255, 255, .10) 1.1px, transparent 1.2px),
		radial-gradient(125% 175% at 20% 22%, #FF8A1C 0%, #F4571A 32%, #DF3410 68%, #C81E08 100%);
	background-size: auto, 13px 13px, auto;
	background-repeat: no-repeat, repeat, no-repeat;
}

/* El icono de la marca, el mismo que el badge de las tarjetas. */
.cm-countdown__icono {
	flex: 0 0 auto;
	display: block;
	width: 38px;
	line-height: 0;
}

.cm-countdown__icono img {
	display: block;
	width: 100%;
	height: auto;
	/* Una sombra suave lo despega del fondo sin deformarlo. */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}

/* Opcional: convierte el icono en silueta blanca. Solo funciona bien con
   pictogramas planos — un icono con forma interior se vuelve una mancha. */
.cm-countdown__icono--blanco img {
	filter: brightness(0) invert(1);
}

.cm-countdown__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cm-countdown__titulo {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	line-height: 1.15;
}

/* El copy que da el motivo para comprar ahora. */
.cm-countdown__cta {
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.25;
	opacity: .95;
}

.cm-countdown__reloj {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	margin-left: auto; /* Mensaje a la izquierda, reloj a la derecha. */
}

.cm-countdown__etiqueta {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .8px;
	opacity: .85;
}

.cm-countdown__bloques {
	display: flex;
	gap: 6px;
}

.cm-countdown__bloque {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-width: 46px;
	padding: 4px 6px;
	border-radius: 7px;

	background: rgba(0, 0, 0, .22);
	/* Los dígitos no deben bailar al cambiar de ancho cada segundo. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.cm-countdown__bloque[hidden] {
	display: none;
}

.cm-countdown__bloque b {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
}

.cm-countdown__bloque i {
	font-size: 10px;
	font-style: normal;
	text-transform: uppercase;
	opacity: .85;
	letter-spacing: .4px;
}

/* Recta final: el naranja se cierra hacia el rojo, sin abandonar la gama. */
.cm-countdown--urgente {
	background-color: #C81E08;
	background-image:
		radial-gradient(58% 120% at 14% 18%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(circle, rgba(255, 255, 255, .09) 1.1px, transparent 1.2px),
		radial-gradient(125% 175% at 20% 22%, #F4571A 0%, #D62A0B 45%, #A81505 100%);
	box-shadow: 0 4px 18px rgba(168, 21, 5, .34);
}

.cm-countdown--urgente .cm-countdown__bloque[data-u="s"] {
	animation: cm-latido 1s ease-in-out infinite;
}

@keyframes cm-latido {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.09); }
}

/* Quien pide menos movimiento no debería recibir un latido en bucle. */
@media (prefers-reduced-motion: reduce) {
	.cm-countdown--urgente .cm-countdown__bloque[data-u="s"] {
		animation: none;
	}
}

/* Dentro de una tarjeta del catálogo el espacio es mucho menor. */
.cm-countdown--loop {
	gap: 6px;
	margin: 8px 0;
	padding: 7px 9px;
	border-radius: 8px;
	box-shadow: none;
}

.cm-countdown--loop .cm-countdown__titulo {
	font-size: 11px;
	letter-spacing: .3px;
}

.cm-countdown--loop .cm-countdown__reloj {
	flex-direction: row;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.cm-countdown--loop .cm-countdown__etiqueta {
	display: none; /* No cabe junto al reloj en una tarjeta. */
}

.cm-countdown--loop .cm-countdown__bloques {
	gap: 3px;
}

.cm-countdown--loop .cm-countdown__bloque {
	min-width: 30px;
	padding: 2px 3px;
	border-radius: 5px;
}

.cm-countdown--loop .cm-countdown__bloque b { font-size: 13px; }
.cm-countdown--loop .cm-countdown__bloque i { font-size: 8px; }

@media (max-width: 600px) {
	.cm-countdown {
		gap: 10px;
		padding: 11px 13px;
	}
	.cm-countdown__icono { width: 30px; }
	.cm-countdown__titulo { font-size: 14px; }
	.cm-countdown__cta { font-size: 11.5px; }
	.cm-countdown__bloque { min-width: 40px; }
	.cm-countdown__bloque b { font-size: 17px; }

	/* En pantallas estrechas el reloj pasa a ocupar su propia línea completa. */
	.cm-countdown__reloj {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-left: 0;
	}
	.cm-countdown__bloques { flex: 0 0 auto; }
}

/* Terminada la promoción el JS lo oculta; esto cubre el instante previo. */
.cm-countdown--fin {
	display: none;
}

/* Red de seguridad: el contador no pinta nada en la barra flotante de compra
   ni en ventanas de vista rápida, donde solo estorbaría. El duplicado ya se
   evita en PHP, pero estas barras se arman por JS en algunas plantillas. */
.wd-sticky-btn .cm-countdown,
.wd-quick-view .cm-countdown,
.wd-popup .cm-countdown,
.mfp-content .cm-countdown {
	display: none !important;
}