/*
 * Favoritos y etiquetas 2026 (plugin 030). Tokens del diccionario: uploads/edb-diseno/edb-diseno-2026.css.
 * Corazón: .edb-fav-corazon (widget de ícono de la tarjeta de Elementor) y .edb-fav-boton (relacionados y ficha).
 * Etiquetas: Advanced Woo Labels con forma de insignia del diccionario; el color lo define cada etiqueta en el plugin.
 */
:root {
	--edb-ico-corazon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 34.2 9.4 23.9C4.4 19 3.6 16.7 3.6 13.9c0-3.3 3-9 9.2-9 3.5 0 5.6 1.5 7.2 3.4 1.6-1.9 3.7-3.4 7.2-3.4 6.2 0 9.2 5.7 9.2 9 0 2.8-.8 5.1-5.8 10z' fill='none' stroke='%23000' stroke-width='2.8' stroke-linejoin='round'/%3E%3C/svg%3E");
	--edb-ico-corazon-lleno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 34.2 9.4 23.9C4.4 19 3.6 16.7 3.6 13.9c0-3.3 3-9 9.2-9 3.5 0 5.6 1.5 7.2 3.4 1.6-1.9 3.7-3.4 7.2-3.4 6.2 0 9.2 5.7 9.2 9 0 2.8-.8 5.1-5.8 10z' fill='%23000' stroke='%23000' stroke-width='2.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Corazón de las tarjetas (ícono de Elementor) ---------- */
.edb-fav-corazon { cursor: pointer; }
.edb-fav-corazon .elementor-icon { position: relative; transition: transform var(--edb-transicion); }
.edb-fav-corazon .elementor-icon svg { transition: opacity var(--edb-transicion); }
.edb-fav-corazon .elementor-icon::after {
	content: ""; position: absolute; inset: 0; background: var(--edb-coral); opacity: 0; transform: scale(.6);
	-webkit-mask: var(--edb-ico-corazon-lleno) center / contain no-repeat; mask: var(--edb-ico-corazon-lleno) center / contain no-repeat;
	transition: opacity var(--edb-transicion), transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.edb-fav-corazon:hover .elementor-icon { transform: scale(1.1); }
.edb-fav-corazon.edb-fav-activo .elementor-icon svg { opacity: 0; }
.edb-fav-corazon.edb-fav-activo .elementor-icon::after { opacity: 1; transform: none; }
.edb-fav-corazon:focus-visible { outline: 2px solid var(--edb-salvia); outline-offset: 3px; border-radius: 4px; }

/* ---------- Botón de corazón (relacionados y ficha) ---------- */
.edb-fav-boton {
	display: inline-grid; place-items: center; flex: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
	color: var(--edb-texto); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.edb-fav-boton::before {
	content: ""; width: 100%; height: 100%; background: currentColor;
	-webkit-mask: var(--edb-ico-corazon) center / contain no-repeat; mask: var(--edb-ico-corazon) center / contain no-repeat;
	transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.edb-fav-boton.edb-fav-activo::before { -webkit-mask-image: var(--edb-ico-corazon-lleno); mask-image: var(--edb-ico-corazon-lleno); }
.edb-fav-boton:focus-visible { outline: 2px solid var(--edb-salvia); outline-offset: 3px; }
/* El tema y el kit pintan botones con hover fucsia: se neutraliza con doble clase */
button.edb-fav-boton.edb-fav-boton:is(:hover, :focus, :active) { background: none; box-shadow: none; }

/* Tarjetas de relacionados: a la derecha de las estrellas */
.edb-ficha .edb-relacionados li.product .edb-fav-tarjeta {
	grid-area: estrellas; align-self: end; justify-self: end; width: 26px; height: 26px; margin: 0 var(--in, 21px) 0 0;
	color: var(--edb-gris-legible); position: relative; z-index: 2;
}
.edb-ficha .edb-relacionados li.product .edb-fav-tarjeta.edb-fav-activo { color: var(--edb-coral); }
@media (max-width: 767px) { .edb-ficha .edb-relacionados li.product .edb-fav-tarjeta { width: 20px; height: 20px; } }

/* Ficha: círculo coral como en Figma (mismo tamaño que el de compartir) */
button.edb-fav-ficha.edb-fav-ficha {
	width: 56px; height: 56px; border-radius: 50%; background: var(--edb-coral); color: var(--edb-blanco); transition: background-color var(--edb-transicion);
}
button.edb-fav-ficha.edb-fav-ficha::before { width: 46%; height: 46%; }
button.edb-fav-ficha.edb-fav-ficha:is(:hover, :focus) { background: #d8916e; }
button.edb-fav-ficha.edb-fav-ficha.edb-fav-activo { background: var(--edb-coral-profundo); }

/* ---------- Contador en la cabecera ---------- */
.edb-fav-cabecera .elementor-icon { position: relative; }
.edb-fav-cabecera.edb-fav-con .elementor-icon::after {
	content: attr(data-cantidad); position: absolute; top: -8px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
	border-radius: var(--edb-r-pildora); background: var(--edb-coral); color: var(--edb-blanco); font: 700 10px/17px var(--edb-fuente); text-align: center;
}

/* ---------- Aviso al guardar ---------- */
.edb-fav-aviso {
	position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 99998; display: flex; align-items: center; gap: 16px;
	max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--edb-r-pildora); background: var(--edb-texto); color: var(--edb-blanco);
	font: 500 14px/1.3 var(--edb-fuente); box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.edb-fav-aviso.edb-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.edb-fav-aviso a { color: var(--edb-blanco); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .edb-fav-aviso, .edb-fav-corazon .elementor-icon, .edb-fav-corazon .elementor-icon::after, .edb-fav-boton::before { transition: none; } }

/* ---------- Página «Mis favoritos» ---------- */
.edb-favoritos { box-sizing: border-box; width: 100%; padding: var(--edb-e-5) var(--edb-margen) var(--edb-e-6); font-family: var(--edb-fuente); color: var(--edb-texto); }
.edb-favoritos-cabecera { display: grid; gap: 8px; margin-bottom: var(--edb-e-5); }
.edb-favoritos-titulo { margin: 0; font: 600 var(--edb-t-display)/1.2 var(--edb-fuente); color: var(--edb-texto); }
.edb-favoritos-bajada { margin: 0; max-width: 60ch; font-size: var(--edb-t-texto); color: var(--edb-gris-legible); }
.edb-favoritos-grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, calc(24px + 12 * (100vw - 1366px) / 554), 36px); }
@media (max-width: 1024px) { .edb-favoritos-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 767px) { .edb-favoritos-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.edb-favoritos-vacio { display: grid; justify-items: center; gap: 12px; padding: 56px 24px; border-radius: var(--edb-r-caja); background: var(--edb-crema); text-align: center; }
.edb-favoritos-vacio[hidden] { display: none; }
.edb-favoritos-vacio p { margin: 0; max-width: 46ch; font-size: var(--edb-t-texto); }
.edb-favoritos-vacio .edb-favoritos-vacio-titulo { font-size: var(--edb-t-bloque); font-weight: 700; }
.edb-favoritos-vacio .edb-boton { margin-top: 8px; }

/* ---------- Etiquetas (Advanced Woo Labels) con forma de insignia ---------- */
:root {
	--edb-etq-alto: clamp(24px, calc(24px + 6 * (100vw - 1366px) / 554), 30px);
	--edb-etq-letra: clamp(12px, calc(12px + 2 * (100vw - 1366px) / 554), 14px);
	--edb-etq-relleno: clamp(10px, calc(10px + 7 * (100vw - 1366px) / 554), 17px);
	--edb-etq-hueco: clamp(8px, calc(8px + 8 * (100vw - 1366px) / 554), 16px);
}
@media (max-width: 767px) { :root { --edb-etq-alto: 22px; --edb-etq-letra: 11px; --edb-etq-relleno: 8px; --edb-etq-hueco: 6px; } }
.advanced-woo-labels { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: var(--edb-etq-hueco) !important; width: auto !important; margin: 0 !important; }
.advanced-woo-labels .awl-label-wrap { margin: 0 !important; padding: 0 !important; }
.advanced-woo-labels .awl-product-label {
	display: inline-flex !important; font-family: var(--edb-fuente) !important; font-style: normal !important; font-weight: 500 !important; letter-spacing: 0 !important;
	line-height: 1 !important; opacity: 1 !important;
}
.advanced-woo-labels .awl-label-text {
	display: inline-flex !important; align-items: center !important; min-height: var(--edb-etq-alto) !important; padding: 0 var(--edb-etq-relleno) !important;
	border-radius: var(--edb-r-pildora) !important; font-size: var(--edb-etq-letra) !important; line-height: 1 !important; white-space: nowrap !important;
}
.advanced-woo-labels .awl-label-text::before, .advanced-woo-labels .awl-label-text::after { display: none !important; }
.advanced-woo-labels .awl-inner-text { font: inherit !important; }

/* Tarjeta de Elementor (portada y categorías): fila bajo el nombre; se oculta si el producto no tiene etiquetas */
.edb-etiquetas-w { width: 100%; }
.edb-etiquetas-w:not(:has(.awl-label-wrap)) { display: none !important; }
.e-loop-item .edb-etiquetas-w { width: 100% !important; margin: 8px 0 0 !important; }

/* Relacionados (loop de WooCommerce): el plugin la pone antes del nombre; va entre nombre y precio */
.edb-ficha .edb-relacionados li.product a.woocommerce-LoopProduct-link { grid-template-areas: "foto" "estrellas" "titulo" "etiquetas" "precio" !important; grid-template-rows: auto calc(var(--in) + var(--estr-h)) auto auto auto !important; }
.edb-ficha .edb-relacionados li.product .advanced-woo-labels { grid-area: etiquetas !important; margin: 8px var(--in, 21px) 0 !important; }

/* Ficha: el plugin agrega sus etiquetas junto al título del producto; ahí se ocultan y quedan solo las de bajo el precio */
.edb-ficha .edb-col-info .advanced-woo-labels { display: none !important; }
.edb-ficha .edb-col-info .edb-etiquetas-w .advanced-woo-labels { display: flex !important; }

/* Ficha: etiquetas grandes bajo el precio */
.edb-ficha .edb-etiquetas-w {
	--edb-etq-alto: clamp(36px, calc(36px + 10 * (100vw - 1366px) / 554), 46px);
	--edb-etq-letra: clamp(15px, calc(15px + 5 * (100vw - 1366px) / 554), 20px);
	--edb-etq-relleno: clamp(18px, calc(18px + 7 * (100vw - 1366px) / 554), 25px);
	--edb-etq-hueco: clamp(10px, calc(10px + 6 * (100vw - 1366px) / 554), 16px);
	margin-top: clamp(14px, calc(14px + 8 * (100vw - 1366px) / 554), 22px) !important;
}
@media (max-width: 767px) { .edb-ficha .edb-etiquetas-w { --edb-etq-alto: 32px; --edb-etq-letra: 14px; --edb-etq-relleno: 14px; --edb-etq-hueco: 10px; margin-top: 12px !important; } }

/* Menú lateral del teléfono: «Mis favoritos» con su cantidad */
.edb-cajon .edb-cajon-favoritos a { gap: 10px; }
.edb-cajon .edb-cajon-cantidad {
	display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
	border-radius: var(--edb-r-pildora); background: var(--edb-coral); color: var(--edb-blanco); font: 700 11px/1 var(--edb-fuente);
}