/* Corazon de favoritos sobre la tarjeta de producto (.ccmg-card__media es
   position:relative en ccm-gallery). Colores del kit: #E60000 y #191818. */
.ccmg-card__media { position: relative; }

.ccmg-card__fav {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #191818;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	transition: transform 120ms ease, color 120ms ease;
}
.ccmg-card__fav svg { width: 20px; height: 20px; }

/* El tema Hello Elementor (reset.css) trae:
   [type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover
   { background-color: #c36; color: #fff; text-decoration: none; }
   Esa regla tiene especificidad (0,2,0) e iguala a nuestro antiguo
   ".ccmg-card__fav:hover" (tambien 0,2,0); al empatar, gana el que se carga
   despues en la cascada (el tema), y el corazon se pintaba magenta al pasar
   el mouse o dar foco. Anclamos el ancestro ".ccmg-card__media" (que ya
   existe en toda tarjeta) para subir a (0,3,0) y fijamos explicitamente
   background, color, border, text-decoration y box-shadow en cada estado
   interactivo (hover, focus, focus-visible, active) para que ninguna de las
   propiedades que toca el tema quede sin declarar por nosotros. */
.ccmg-card__media .ccmg-card__fav,
.ccmg-card__media .ccmg-card__fav:hover,
.ccmg-card__media .ccmg-card__fav:focus,
.ccmg-card__media .ccmg-card__fav:focus-visible,
.ccmg-card__media .ccmg-card__fav:active {
	background: rgba(255, 255, 255, 0.92);
	color: #191818;
	border: 0;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.ccmg-card__media .ccmg-card__fav:hover,
.ccmg-card__media .ccmg-card__fav:focus-visible { color: #E60000; transform: scale(1.08); }
.ccmg-card__media .ccmg-card__fav:focus { outline: none; }               /* el anillo va solo en focus-visible */
.ccmg-card__media .ccmg-card__fav:focus-visible { outline: 2px solid #E60000; outline-offset: 2px; }
.ccmg-card__media .ccmg-card__fav.is-fav,
.ccmg-card__media .ccmg-card__fav.is-fav:hover,
.ccmg-card__media .ccmg-card__fav.is-fav:focus { color: #E60000; }
.ccmg-card__media .ccmg-card__fav.is-fav svg { fill: currentColor; }
.ccmg-card__media .ccmg-card__fav[aria-busy="true"] { cursor: progress; }  /* sin cambiar el color: aria-busy es estado accesible, no visual */

/* Anuncio para lectores de pantalla, invisible. */
.ccmg-card__fav-live {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Lista en /account/favoritos/ */
.ccma-favoritos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1024px) { .ccma-favoritos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ccma-favoritos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* El clearfix de WooCommerce roba celda en grid (regla 3 del ROADMAP). Su regla
   es `.woocommerce ul.products::after` (0,2,2): hace falta mas especificidad
   y !important, como ya hace ccmg-product-grid.css. */
.woocommerce ul.products.ccma-favoritos::before,
.woocommerce ul.products.ccma-favoritos::after { display: none !important; content: none !important; }
/* Y el li.product de Woo (float:left; width:22.05%; margin) : la plantilla no
   tiene el ancestro .ccmg-product-grid que lo neutraliza en ccm-gallery. */
.woocommerce ul.products.ccma-favoritos li.product { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; clear: none !important; list-style: none !important; position: relative; }
.ccma-favoritos__item--out { opacity: 0; transform: scale(0.96); transition: opacity 250ms ease, transform 250ms ease; }
.ccma-empty { text-align: center; padding: 32px 16px; }
.ccma-empty__text { margin: 0 0 16px; }

/* La lista de favoritos usa la tarjeta de la tienda tal cual.
 *
 * Esta lista pinta CCMG_Product_Card_Renderer (la misma tarjeta de la
 * tienda) dentro de `ul.products.ccmg-product-grid__list.ccma-favoritos
 * li.product.ccmg-product-grid__item`, pero SIN el ancestro
 * `.ccmg-product-grid`. Sin ese ancestro, dos reglas ajenas le ganan a
 * `.ccmg-card__title` (ccmg-product-card.css:412-424, especificidad
 * (0,1,0), 14px/500/lh:14px, recorte a 2 lineas):
 *   1. account.css:155-156 `.woocommerce-MyAccount-content h3:not(a):not(b):not(c)`
 *      -> especificidad (0,4,1): titulo a 18px/600, sin recorte.
 *   2. WooCommerce woocommerce.css `.woocommerce ul.products li.product h3`
 *      -> especificidad (0,3,2): padding y font-size:1em. Del mismo
 *      fichero, sobre la misma lista: `...li.product a img` cambia el
 *      margen de la imagen, `...li.product .button` le mete margin-top
 *      al boton de carrito y `...li.product a` subraya los enlaces.
 * Este bloque es el espejo -anclado a `ul.products.ccma-favoritos` en vez
 * de a `.ccmg-product-grid`- de TODAS las reglas que ccmg-product-grid.css
 * aplica sobre `ul.products.ccmg-product-grid__list li.product.ccmg-product-grid__item`
 * y su tarjeta (lineas 144-169: el `li` y `.ccmg-card`; 171-217: imagen,
 * enlace, titulo, precio/envio; 471-488 y 524-531: variantes de
 * `@container card` y `@media max-width:479px` del titulo): mismas
 * declaraciones, especificidad (0,6-7,2-3) para superar las dos de arriba.
 * El margin-top:1em de Woo SI llega al boton `.ccmg-card__atc.button`
 * tambien en la tienda (medido: 16px), porque ni ccmg-gallery ni este
 * archivo lo neutralizan; es inerte porque el boton es absoluto y su
 * posicion la fijan `bottom`/`right`, asi que aqui tampoco se toca, por
 * paridad con la tienda. No se toca ccm-gallery: la lista de favoritos
 * no tiene la clase contenedora que los neutraliza alli, asi que se
 * repite aqui. En account.css solo se excluye a la tarjeta de las reglas
 * genericas de boton y foco con `:where(:not(.ccmg-card *))`, sin cambiar
 * su especificidad.
 *
 * `.ccmg-card` trae su propio `container-type:inline-size; container-name:
 * card` (ccmg-product-card.css:50-51), independiente de `.ccmg-product-grid`,
 * asi que las media/container queries de la tarjeta SI corren aqui. Pero
 * `ccmg-product-card.css:557` y `:571` (`@container card (max-width:130px)`
 * y `(min-width:131px) and (max-width:180px)`) achican `.ccmg-card__title`
 * con selector de (0,1,0): sin ancla, nuestro `h3.ccmg-card__title` de
 * arriba, en (0,6,3) y fijo en 14px, los pisaria en tarjetas angostas (nuestro
 * grid pasa a 2 columnas en movil: la tarjeta puede bajar de 180px). Por
 * eso `ccmg-product-grid.css:471-488` los repite anclados a
 * `.ccmg-product-grid`; aqui se repiten igual, anclados a
 * `ul.products.ccma-favoritos`, con las mismas dos reglas y las mismas
 * declaraciones (no hace falta el `@container card (min-width:280px)` de
 * la linea 605: ese vuelve a 14px, que ya es la base de arriba). */
.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card {
	height: 100%;
	width: 100%;
	margin: 0;
	color: inherit;
	text-decoration: none;
}

.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__img-link,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__img-link {
	text-decoration: none;
}

.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__img,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__img {
	margin: 0;
	box-shadow: none;
	border: 0;
}

.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__body-link,
.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__body-link:hover,
.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__body-link:focus,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__body-link,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__body-link:hover,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__body-link:focus {
	color: inherit;
	text-decoration: none;
}

.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product h3.ccmg-card__title,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product h3.ccmg-card__title {
	all: unset;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: var(--ccmg-card-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ccmg-card-title-color);
	max-height: 28px;
}

.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__price-current,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__price-current,
.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__price-regular,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__price-regular,
.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__shipping,
.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product .ccmg-card__shipping {
	text-transform: none;
	letter-spacing: 0;
}

@container card (max-width: 130px) {
	.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product h3.ccmg-card__title,
	.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product h3.ccmg-card__title {
		font-size: 11px;
		line-height: 12px;
		max-height: 24px;
	}
}

@container card (min-width: 131px) and (max-width: 180px) {
	.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product h3.ccmg-card__title,
	.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product h3.ccmg-card__title {
		font-size: 12px;
		line-height: 13px;
		max-height: 26px;
	}
}

@media (max-width: 479px) {
	.woocommerce .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product h3.ccmg-card__title,
	.woocommerce-page .woocommerce-MyAccount-content ul.products.ccma-favoritos li.product h3.ccmg-card__title {
		font-size: 13px;
		line-height: 14px;
		max-height: 26px;
	}
}