/* Avisos de oferta en el frontend. */

/* Contenedor de los avisos de la ficha: se alinean en línea si caben y se
   apilan alineados a la izquierda si el texto es largo (otros idiomas). */
.wcrd-product-messages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 12px 0 16px;
}

.wcrd-product-offer-wrap {
	margin: 10px 0 12px;
}
.wcrd-product-offer {
	display: inline-flex;
	align-items: center;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0;
	padding: 9px 18px;
	background: #ffe000;
	color: #111;
	border: 0;
	border-radius: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.wcrd-cart-messages,
.wcrd-checkout-messages {
	margin: 0;
}

/* Filas de aviso dentro de las tablas (carrito y "Tu pedido").
   La del carrito se imprime siempre para que el refresco AJAX tenga destino:
   cuando el contenedor está vacío, la fila no debe ocupar ni verse. */
.wcrd-cart-message-row > td,
.wcrd-checkout-message-row > td {
	padding: 0;
	border: 0;
}
.wcrd-cart-message-row > td > .wcrd-cart-messages:not(:empty),
.wcrd-checkout-message-row > td > .wcrd-checkout-messages:not(:empty) {
	padding: 12px 0;
}
.wcrd-cart-messages:empty {
	display: none;
}
/* El último aviso no arrastra margen inferior dentro de la celda. */
.wcrd-cart-messages > :last-child,
.wcrd-checkout-messages > :last-child {
	margin-bottom: 0;
}

/* Fila de descuento dentro de la tabla del carrito. */
.wcrd-cart-discount-row td {
	font-weight: 700;
}
.wcrd-cart-discount-row .product-price,
.wcrd-cart-discount-row .product-subtotal {
	color: #1e7e34;
}

.wcrd-applied-discounts {
	margin: 0 0 12px;
}
.wcrd-applied-discount {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	margin-bottom: 6px;
	background: #e6f4ea;
	border-left: 4px solid #1e7e34;
	border-radius: 3px;
	color: #14532d;
	font-weight: 700;
}
.wcrd-applied-discount .wcrd-ad-amount {
	white-space: nowrap;
}

.wcrd-cart-offer,
.wcrd-checkout-offer {
	padding: 10px 14px;
	margin-bottom: 8px;
	background: #e6f4ea;
	border-left: 4px solid #1e7e34;
	border-radius: 3px;
	color: #14532d;
}

.wcrd-cart-progress {
	padding: 10px 14px;
	margin-bottom: 8px;
	background: #eef4ff;
	border-left: 4px solid #2271b1;
	border-radius: 3px;
	color: #0b3a75;
}

/* Envoltorio del aviso de progreso: controla el lado y el ajuste vertical. */
.wcrd-progress-wrap {
	display: block;
	width: 100%;
}

/* Estos valores son los MISMOS que los de la configuración por defecto, y están
   aquí a propósito como red de seguridad: una página servida desde la caché trae
   HTML antiguo, sin el `style` en línea, y sin esto el aviso saldría sin fondo ni
   borde. El estilo en línea de cada regla los pisa sin problema.
   OJO: NADA de `!important` en fondo/color/borde/tamaño, o los ajustes del panel
   dejarían de tener efecto. */
.wcrd-product-progress {
	display: inline-flex;
	align-items: center;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0;
	padding: 8px 12px;
	background: #ffe000;
	color: #111111;
	border: 2px solid #e00000;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	vertical-align: middle;
}

/* Precio rebajado: anterior tachado en rojo, con descuento en negro. */
.wcrd-old-price,
.wcrd-old-price .woocommerce-Price-amount,
.wcrd-old-price .amount,
.wcrd-old-price bdi {
	color: #e2001a !important;
	text-decoration: line-through !important;
	font-weight: 700 !important;
}
.wcrd-old-price {
	margin-right: 6px;
}
.wcrd-new-price,
.wcrd-new-price .woocommerce-Price-amount,
.wcrd-new-price .amount,
.wcrd-new-price bdi {
	color: #111 !important;
	text-decoration: none !important;
	font-weight: 700;
}

.wcrd-free-label {
	color: #1e7e34;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.9em;
}

.wcrd-gift-tag {
	color: #1e7e34;
	font-size: 0.85em;
}

/* Etiqueta (badge) superpuesta sobre la imagen del producto. */
.woocommerce ul.products li.product,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product {
	position: relative;
}
.wcrd-image-badges {
	position: absolute;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 5px;
	pointer-events: none;
	max-width: 80%;
}
.wcrd-image-badges.wcrd-pos-top-left {
	top: 10px;
	left: 10px;
	align-items: flex-start;
	justify-content: flex-start;
}
.wcrd-image-badges.wcrd-pos-top-right {
	top: 10px;
	right: 10px;
	align-items: flex-end;
	justify-content: flex-start;
}
.wcrd-image-badges.wcrd-pos-bottom-left {
	bottom: 10px;
	left: 10px;
	align-items: flex-start;
	justify-content: flex-end;
}
.wcrd-image-badges.wcrd-pos-bottom-right {
	bottom: 10px;
	right: 10px;
	align-items: flex-end;
	justify-content: flex-end;
}

/* Modo "sobre la foto".
   Muchos temas (el nuestro incluido) meten la imagen dentro de un contenedor
   con padding propio — .custom-image-wrapper tiene 25px — así que anclar el
   aviso a la tarjeta lo deja flotando en ese hueco, FUERA de la foto.
   El JS mueve el aviso al contenedor directo de la imagen y añade esta clase:
   cubrimos ese contenedor entero y HEREDAMOS su padding, con lo que el área
   útil del flex coincide exactamente con la foto. Sin números mágicos y sin
   medir nada, así que sigue cuadrando al girar el móvil o al redimensionar. */
.wcrd-image-badges.wcrd-on-image {
	inset: 0;
	padding: inherit;
	max-width: none;
}
.wcrd-image-badges.wcrd-on-image > .wcrd-image-badge {
	margin: 8px;
	max-width: calc( 100% - 16px );
}
/* Imagen superpuesta sobre la foto del producto (pegatina de oferta).
   El ancho lo lleva el ENVOLTORIO en % de la foto, así escala sola en móvil;
   la imagen ocupa el hueco que le queda al lado del '+'. */
.wcrd-badge-gift {
	position: relative; /* ancla del rótulo superpuesto */
	display: flex;
	align-items: center;
	gap: 4px;
	pointer-events: none;
	max-width: 100%;
}

/* Rótulo (GRATIS / FREE / GRATUIT…) encima de la imagen del regalo.
   Va absoluto y SIN max-width para que pueda sobresalir del marco.
   El selector lleva dos clases y `!important` a propósito: WooCommerce declara
   `.woocommerce img { max-width: 100% }`, que si no gana y recorta el rótulo en
   silencio (pedir un 110% no haría nada). Aquí `!important` es seguro porque el
   ancho lo fija cada regla con `width`, no con `max-width`: no pisa ningún ajuste. */
.wcrd-image-badges .wcrd-badge-gift-label {
	position: absolute !important;
	z-index: 2;
	height: auto !important;
	max-height: none !important;
	max-width: none !important;
	pointer-events: none;
}

/* Blindaje para los LISTADOS DE TIENDA.
   Las tarjetas del catálogo fuerzan a TODAS sus imágenes una altura fija (para
   que las tarjetas queden iguales) y `position: relative`, y lo hacen con
   `!important` desde una hoja externa. Eso reventaba nuestras imágenes
   superpuestas: el rótulo dejaba de flotar y pasaba a competir por el ancho,
   la foto del regalo se quedaba en 6 px de ancho y todo salía deformado. En la
   ficha no pasaba porque esas reglas solo aplican a `li.product`.
   Aquí `!important` es seguro: son propiedades que el panel nunca configura
   (el usuario ajusta el ANCHO en % y los desplazamientos, nunca la altura). */
.wcrd-image-badges .wcrd-image-badge-img {
	position: static !important;
	height: auto !important;
	max-height: none !important;
}
/* La etiqueta en modo imagen SÍ es relativa: es lo que permite desplazarla con
   left/top sin que empuje a las demás etiquetas de la misma esquina. */
.wcrd-image-badges .wcrd-badge-pic {
	position: relative !important;
	height: auto !important;
	max-height: none !important;
}
.wcrd-badge-plus {
	flex: 0 0 auto;
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.35 );
}
.wcrd-image-badge-img {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	box-sizing: border-box;
	pointer-events: none;
}

.wcrd-image-badge {
	/* Relativa para poder desplazarla con left/top desde el panel sin sacarla
	   del flujo (si la sacáramos, dos etiquetas en la misma esquina se pisarían). */
	position: relative;
	display: inline-block;
	background: #ffe000;
	color: #111;
	font-weight: 700;
	font-size: 0.8em;
	line-height: 1.2;
	padding: 6px 14px;
	border-radius: 22px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
	text-align: center;
}

/* Estilo estrella / pegatina (sunburst). */
.wcrd-image-badge.wcrd-badge-star {
	position: relative;
	width: 92px;
	height: 92px;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.35 ) );
}
.wcrd-badge-star .wcrd-badge-shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.wcrd-badge-star .wcrd-badge-txt {
	position: relative;
	z-index: 1;
	text-align: center;
	font-weight: 800;
	font-size: 0.95em;
	line-height: 1.05;
	text-transform: uppercase;
	padding: 0 16px;
	word-break: break-word;
}

/* Estilo círculo. */
.wcrd-image-badge.wcrd-badge-circle {
	width: 80px;
	height: 80px;
	padding: 4px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.05;
	word-break: break-word;
}

/* Etiqueta en modo IMAGEN (sustituye a la píldora de texto).
   El ancho va en % de la foto; el contenedor de etiquetas coincide con ella. */
.wcrd-image-badges .wcrd-badge-pic {
	display: block;
	height: auto;
	max-width: none !important;
	pointer-events: none;
}