/*
 * Tarjeta de producto 2026 (plugin 034). Tokens del diccionario: uploads/edb-diseno/edb-diseno-2026.css.
 * La usan «Mis favoritos», las grillas y carruseles de Elementor que dibujaban #18950 (categorías y portada) y los listados de WooCommerce (relacionados).
 * Filas fijas: nombre en 2 líneas; estrellas y etiquetas se reservan si alguna tarjeta del mismo contenedor las tiene, así los precios quedan alineados.
 */
/* ---------- Tarjeta ---------- */
/* Tarjeta sin borde: la foto va en su caja blanca redondeada y la zona del texto es transparente (pedido de Italo, 17-sep).
   En relacionados de la ficha el contenedor lleva fondo gris para que se distingan las fotos. Al pasar el mouse se levanta con sombra */
.edb-tj {
	/* Letras con las medidas de la tarjeta de producción (#18950, Figma): se escalan con el ancho de la tarjeta */
	container-type: inline-size; width: 100%; font-family: var(--edb-fuente);
	display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; background: transparent;
	transition: opacity .22s ease, transform .22s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Foto */
/* Prueba B (17-sep): la foto sobre gris y la foto mezclada (multiply) para que su fondo blanco tome el gris; la página va en blanco */
.edb-tj-media { position: relative; aspect-ratio: 1; border-radius: var(--edb-r-caja); background: var(--edb-gris-fondo); overflow: hidden; }
.edb-tj-media img.edb-tj-img { mix-blend-mode: multiply; }
.edb-tj-foto { display: block; width: 100%; height: 100%; }
.edb-tj-media img.edb-tj-img { display: block; box-sizing: border-box; width: 100% !important; height: 100% !important; max-width: none; padding: 8%; object-fit: contain; transition: transform .35s ease; }
.edb-tj--agotado img.edb-tj-img { opacity: .5; }
.edb-tj-descuento {
	position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: clamp(44px, calc(44px + 8 * (100vw - 1366px) / 554), 52px); aspect-ratio: 1;
	border-radius: 50%; background: var(--edb-coral); color: var(--edb-blanco); font: 600 clamp(11px, 4.9cqi, 16px)/1 var(--edb-fuente); pointer-events: none;
}
.edb-tj-sin-stock { position: absolute; left: 12px; bottom: 12px; }
button.edb-fav-quitar.edb-fav-quitar, button.edb-fav-boton.edb-tj-corazon {
	position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 6px rgba(0, 0, 0, .1); color: var(--edb-coral); cursor: pointer;
	transition: transform var(--edb-transicion), color var(--edb-transicion);
}
button.edb-fav-quitar.edb-fav-quitar::before {
	content: ""; width: 20px; height: 20px; background: currentColor;
	-webkit-mask: var(--edb-ico-corazon-lleno) center / contain no-repeat; mask: var(--edb-ico-corazon-lleno) center / contain no-repeat;
}
button.edb-fav-boton.edb-tj-corazon::before { width: 20px; height: 20px; }
button.edb-fav-boton.edb-tj-corazon:not(.edb-fav-activo) { color: var(--edb-texto); }
button.edb-fav-quitar.edb-fav-quitar:is(:hover, :focus-visible), button.edb-fav-boton.edb-tj-corazon:is(:hover, :focus-visible) { transform: scale(1.08); color: var(--edb-coral-profundo); background: var(--edb-blanco); }
button.edb-fav-quitar.edb-fav-quitar:focus-visible { outline: 2px solid var(--edb-salvia); outline-offset: 2px; }

/* Texto */
/* Texto con sangría respecto de la foto, como en Figma: el % se mide sobre el ancho de la tarjeta (14 px en 307, 7 px en 166) */
.edb-tj { --edb-tj-sangria: clamp(10px, 5.5%, 18px); }
.edb-tj-cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px var(--edb-tj-sangria) var(--edb-tj-sangria); }
.edb-tj-nombre {
	--edb-tj-titulo-lh: calc(13.28px + 3.535cqi);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * var(--edb-tj-titulo-lh)); margin: 0;
	font: 400 calc(14.08px + 1.01cqi)/var(--edb-tj-titulo-lh) var(--edb-fuente); letter-spacing: 0; text-transform: none; color: var(--edb-negro);
}
.edb-tj-nombre a, .edb-tj-nombre a:is(:hover, :focus, :visited) { font: inherit !important; letter-spacing: inherit !important; color: inherit !important; text-decoration: none; }
.edb-tj-nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Estrellas: solo con reseñas; si alguna tarjeta de la grilla las tiene, todas reservan la fila y los nombres quedan a la misma altura */
.edb-tj-estrellas-fila { display: none; }
/* Por fila: el script marca las tarjetas de cada fila donde alguna tiene reseñas (.edb-tj--fila-estrellas). Hasta que corre, se reserva en todo el contenedor */
:is(.edb-favoritos-grilla, .elementor-loop-container, ul.products):not(.edb-tj-filas):has(.edb-tj-estrellas) .edb-tj-estrellas-fila,
.edb-tj--fila-estrellas .edb-tj-estrellas-fila { display: block; min-height: 18px; margin-bottom: 8px; }
.edb-tj-estrellas { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; color: var(--edb-gris-legible); }
.edb-tj-estrellas-caja {
	position: relative; display: block; width: 88px; height: 16px; overflow: hidden; background: var(--edb-gris-punto);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") 0 0 / 17.6px 16px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") 0 0 / 17.6px 16px repeat-x;
}
.edb-tj-estrellas-caja > span { position: absolute; inset: 0 auto 0 0; background: var(--edb-estrella); }
.edb-tj-etiquetas { margin-top: 8px; }
.edb-tj-etiquetas:not(:has(.awl-label-wrap)) { display: none; }
/* Si alguna tarjeta tiene etiquetas, todas reservan la fila para que los precios queden a la misma altura */
:is(.edb-favoritos-grilla, .elementor-loop-container, ul.products):not(.edb-tj-filas):has(.edb-tj .awl-label-wrap) .edb-tj-etiquetas,
.edb-tj--fila-etiquetas .edb-tj-etiquetas { display: block; height: var(--edb-etq-alto); min-height: 0; overflow: hidden; }
/* Sin esto la píldora queda en una línea de texto y la fila crece 2-3 px más que la reservada */
.edb-tj-etiquetas .awl-label-wrap { display: flex; }
.edb-tj-precio {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 1.25em; margin: 10px 0 0;
	font: 600 var(--edb-tj-precio)/1.2 var(--edb-fuente); color: var(--edb-coral);
	/* Precio en % del ancho de la pantalla, como en producción (28/24 px en 1920); el tope en cqi evita que se corte */
	--edb-tj-precio: min(max(18px, 1.458vw), 11cqi); --edb-tj-tachado: min(max(15px, 1.25vw), 8.8cqi);
}
.edb-tj-precio ins, .edb-tj-hoja-precio ins { order: 1; text-decoration: none; background: none; color: inherit; }
.edb-tj-precio del, .edb-tj-hoja-precio del { order: 2; font-weight: 400; font-size: .76em; color: var(--edb-gris-texto); }
.edb-tj-precio del { font-size: var(--edb-tj-tachado); }
.edb-tj-precio .amount, .edb-tj-precio bdi, .edb-tj-hoja-precio .amount, .edb-tj-hoja-precio bdi { color: inherit; }
/* Una regla general del sitio (.price:not(:has(del)) .woocommerce-Price-amount) pone Inter 18px a los precios sin tachado:
   aquí todos los precios usan el tamaño y la letra de la tarjeta, tengan o no «Desde» */
p.edb-tj-precio.price .woocommerce-Price-amount, p.edb-tj-hoja-precio.price .woocommerce-Price-amount { font-family: inherit; font-size: inherit; font-weight: inherit; }
.edb-tj-precio .edb-precio-palabra, .edb-tj-hoja-precio .edb-precio-palabra { font: 500 12.4px/1.2 var(--edb-fuente); color: var(--edb-gris-texto); }
.edb-tj-precio .screen-reader-text, .edb-tj-hoja-precio .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Opciones: tallas y colores (panel rápido y panel de abajo) */
.edb-tj-atributo-nombre { margin: 0 0 7px; font: 600 14px/1.3 var(--edb-fuente); color: var(--edb-texto); }
.edb-tj-elegido { font-weight: 400; color: var(--edb-gris-legible); }
.edb-tj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
button.edb-tj-chip.edb-tj-chip {
	min-width: 44px; min-height: 38px; margin: 0; padding: 0 10px; border: 1px solid var(--edb-borde); border-radius: var(--edb-r-casilla);
	background: var(--edb-blanco); color: var(--edb-texto); font: 500 13px/1 var(--edb-fuente); letter-spacing: 0; text-transform: none;
	box-shadow: none; cursor: pointer; transition: border-color var(--edb-transicion), box-shadow var(--edb-transicion);
}
button.edb-tj-chip.edb-tj-chip:is(:hover, :focus) { border-color: var(--edb-texto); background: var(--edb-blanco); color: var(--edb-texto); }
button.edb-tj-chip.edb-tj-chip[aria-checked="true"] { border-color: var(--edb-texto); box-shadow: inset 0 0 0 1px var(--edb-texto); font-weight: 700; }
button.edb-tj-chip.edb-tj-chip:focus-visible { outline: 2px solid var(--edb-salvia); outline-offset: 2px; }
button.edb-tj-chip.edb-tj-chip.edb-tj-chip--sin {
	color: var(--edb-gris-apagado); border-color: var(--edb-linea); cursor: not-allowed;
	background: linear-gradient(to top right, transparent calc(50% - .6px), var(--edb-gris-apagado) 50%, transparent calc(50% + .6px)) var(--edb-blanco);
}
button.edb-tj-chip--color.edb-tj-chip--color {
	width: 32px; min-width: 0; height: 32px; min-height: 0; padding: 0; border: 1px solid rgba(0, 0, 0, .12); border-radius: 50%; background: var(--chip-color);
}
button.edb-tj-chip--color.edb-tj-chip--color:is(:hover, :focus) { background: var(--chip-color); border-color: rgba(0, 0, 0, .3); }
button.edb-tj-chip--color.edb-tj-chip--color[aria-checked="true"] { box-shadow: 0 0 0 2px var(--edb-blanco), 0 0 0 4px var(--edb-texto); }
button.edb-tj-chip--color.edb-tj-chip--color.edb-tj-chip--sin { opacity: .35; background: var(--chip-color); }
.edb-tj-atributo--falta .edb-tj-chips { animation: edb-tj-falta .45s ease; }
@keyframes edb-tj-falta { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.edb-tj-estado { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--edb-error); }
.edb-tj-estado:empty { display: none; }

/* Botón del carrito: gris mientras falta elegir; se activa (salvia, con un pulso) cuando la elección está completa */
.edb-tj-agregar, button.edb-tj-agregar.edb-tj-agregar {
	display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: clamp(44px, calc(44px + 6 * (100vw - 1366px) / 554), 50px);
	margin: 0; padding: 0 14px; border: 1.5px solid var(--edb-salvia); border-radius: var(--edb-r-pildora); background: var(--edb-salvia); color: var(--edb-blanco);
	font: 600 clamp(14px, calc(14px + 2 * (100vw - 1366px) / 554), 16px)/1.1 var(--edb-fuente); letter-spacing: 0; text-align: center; text-transform: none; text-decoration: none;
	box-shadow: none; cursor: pointer; transition: background-color var(--edb-transicion), color var(--edb-transicion), border-color var(--edb-transicion);
}
button.edb-tj-agregar.edb-tj-agregar::before {
	content: ""; flex: none; width: 19px; height: 19px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.1 12.1H6.1z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3Cpath d='M12 11.6v5M9.5 14.1h5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.1 12.1H6.1z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3Cpath d='M12 11.6v5M9.5 14.1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
button.edb-tj-agregar.edb-tj-agregar:is(:hover, :focus) { background: var(--edb-salvia-hover); border-color: var(--edb-salvia-hover); color: var(--edb-blanco); }
button.edb-tj-agregar.edb-tj-agregar.edb-tj-agregar--elegir { border-color: var(--edb-borde); background: var(--edb-blanco); color: var(--edb-gris-legible); cursor: default; }
button.edb-tj-agregar.edb-tj-agregar.edb-tj-agregar--elegir:is(:hover, :focus) { border-color: var(--edb-borde); background: var(--edb-blanco); color: var(--edb-gris-legible); }
button.edb-tj-agregar.edb-tj-agregar[aria-busy="true"] { opacity: .75; cursor: progress; }
button.edb-tj-agregar.edb-tj-agregar.edb-tj-ok { border-color: var(--edb-exito); background: var(--edb-exito); color: var(--edb-blanco); }
button.edb-tj-agregar.edb-tj-agregar.edb-tj-ok::before, button.edb-tj-bolsa.edb-tj-bolsa.edb-tj-ok::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
button.edb-tj-agregar.edb-tj-agregar.edb-tj-recien { animation: edb-tj-activar .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes edb-tj-activar { 0% { transform: scale(.94); } 55% { transform: scale(1.04); } 100% { transform: none; } }
.edb-tj-agregar:focus-visible { outline: 3px solid var(--edb-coral); outline-offset: 3px; }

/* Compra rápida en computador: cajón que se despliega bajo los colores. La tarjeta se levanta y el cajón flota sobre la fila de abajo; la foto queda libre */
.edb-tj { position: relative; }
.edb-tj-rapido, .edb-tj-fondo { display: none; }
@media (hover: hover) and (pointer: fine) {
	/* El fondo levantado crece solo hacia abajo, del ancho de la foto: no sube (en categorías la barra de filtros pegada termina justo donde empieza la primera fila) ni se sale a los lados */
	.edb-tj-fondo {
		position: absolute; inset: 0 0 calc(-1 * var(--edb-tj-cajon, 0px)) 0; z-index: 0; display: block; border-radius: var(--edb-r-caja); background: var(--edb-blanco);
		box-shadow: 0 14px 36px rgba(34, 34, 34, .14); opacity: 0; pointer-events: none; transition: opacity .18s ease;
	}
	.edb-tj > .edb-tj-media, .edb-tj > .edb-tj-cuerpo { position: relative; z-index: 1; }
	.edb-tj.edb-tj-abierto { z-index: 20; }
	.edb-tj.edb-tj-abierto .edb-tj-fondo { opacity: 1; }
	.edb-tj-rapido {
		position: absolute; left: 0; right: 0; top: 100%; z-index: 1; display: block; box-sizing: border-box; padding: 14px var(--edb-tj-sangria) 0;
		visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	}
	.edb-tj.edb-tj-abierto .edb-tj-rapido { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.edb-tj.edb-tj-abierto img.edb-tj-img { transform: scale(1.03); }
	/* Espacio bajo la última fila de una grilla: el alto del cajón más grande de esa fila, calculado por el script */
	.edb-tj-grilla { padding-bottom: var(--edb-tj-cola, 0px) !important; }
}
/* El color se elige en los puntos bajo el precio: en el cajón no se repite */
.edb-tj-rapido .edb-tj-atributo--color { display: none; }
.edb-tj-rapido .edb-tj-atributo:not(.edb-tj-atributo--color) ~ .edb-tj-atributo:not(.edb-tj-atributo--color) { margin-top: 10px; }
.edb-tj-rapido .edb-tj-atributo-nombre { display: none !important; margin-bottom: 6px; font-size: 12px; }
.edb-tj-rapido--varios .edb-tj-atributo-nombre { display: block !important; }
.edb-tj-rapido .edb-tj-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.edb-tj-rapido .edb-tj-chips--largas { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
.edb-tj-rapido .edb-tj-chips--texto { display: flex; flex-wrap: wrap; }
.edb-tj-rapido button.edb-tj-chip.edb-tj-chip { min-width: 0; min-height: 36px; padding: 0 4px; }
.edb-tj-rapido .edb-tj-chips--texto button.edb-tj-chip.edb-tj-chip { flex: 1 0 auto; padding: 0 10px; }
.edb-tj-rapido .edb-tj-atributo:not(.edb-tj-atributo--color) ~ button.edb-tj-agregar.edb-tj-agregar { margin-top: 12px; }
.edb-tj-rapido > button.edb-tj-agregar.edb-tj-agregar { min-height: 44px; }
.edb-tj-rapido.edb-tj-ocupado .edb-tj-atributo { opacity: .55; pointer-events: none; }
.edb-tj-rapido .edb-tj-estado { margin-top: 8px; }

/* Compra rápida en pantallas táctiles: botón de bolsa sobre la foto que abre el panel desde abajo */
button.edb-tj-bolsa.edb-tj-bolsa { display: none; }
@media (hover: none), (pointer: coarse) {
	button.edb-tj-bolsa.edb-tj-bolsa {
		position: absolute; right: 8px; bottom: 8px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; margin: 0; padding: 0;
		border: 0; border-radius: 50%; background: var(--edb-salvia); color: var(--edb-blanco); box-shadow: 0 2px 10px rgba(34, 34, 34, .18);
		cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--edb-transicion), transform .15s ease;
	}
	button.edb-tj-bolsa.edb-tj-bolsa::before {
		content: ""; width: 21px; height: 21px; background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.1 12.1H6.1z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3Cpath d='M12 11.6v5M9.5 14.1h5'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.1 12.1H6.1z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3Cpath d='M12 11.6v5M9.5 14.1h5'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	button.edb-tj-bolsa.edb-tj-bolsa:is(:hover, :focus) { background: var(--edb-salvia-hover); color: var(--edb-blanco); }
	button.edb-tj-bolsa.edb-tj-bolsa:active { transform: scale(.92); }
	button.edb-tj-bolsa.edb-tj-bolsa.edb-tj-ok { background: var(--edb-exito); }
	button.edb-tj-bolsa.edb-tj-bolsa.edb-tj-ok::before { width: 20px; height: 20px; }
}
button.edb-tj-bolsa.edb-tj-bolsa:focus-visible { outline: 3px solid var(--edb-coral); outline-offset: 2px; }

/* Colores bajo el precio: al pasar el mouse cambian la foto; al hacer clic quedan elegidos (en táctil abren el panel de abajo) */
.edb-tj-colores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.edb-tj-colores-nombre { margin-left: 2px; font-size: 13px; line-height: 20px; color: var(--edb-gris-legible); white-space: nowrap; }
.edb-tj-colores.edb-tj-atributo--falta { animation: edb-tj-falta .45s ease; }
button.edb-tj-punto.edb-tj-punto {
	box-sizing: border-box; width: 20px; height: 20px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 1px solid rgba(0, 0, 0, .16); border-radius: 50%;
	background: var(--chip-color); box-shadow: none; cursor: pointer; transition: box-shadow var(--edb-transicion), transform var(--edb-transicion);
}
button.edb-tj-punto.edb-tj-punto:is(:hover, :focus) { transform: scale(1.15); background: var(--chip-color); border-color: rgba(0, 0, 0, .3); }
button.edb-tj-punto.edb-tj-punto.edb-tj-punto--activo { box-shadow: 0 0 0 2px var(--edb-blanco), 0 0 0 3.5px var(--edb-texto); }
button.edb-tj-punto.edb-tj-punto.edb-tj-punto--sin {
	opacity: .45; background: linear-gradient(to top right, transparent calc(50% - .75px), rgba(34, 34, 34, .55) 50%, transparent calc(50% + .75px)), var(--chip-color);
}
button.edb-tj-punto.edb-tj-punto:focus-visible { outline: 2px solid var(--edb-salvia); outline-offset: 4px; }

/* Sin stock: enlace a la ficha en vez de compra rápida */
.edb-tj .added_to_cart { display: none !important; }

/* ---------- Panel desde abajo (pantallas táctiles) ---------- */
html.edb-tj-hoja-abierta { overflow: hidden; }
.edb-tj-hoja { position: fixed; inset: 0; z-index: 99990; font-family: var(--edb-fuente); color: var(--edb-texto); }
.edb-tj-hoja-velo { position: absolute; inset: 0; background: rgba(34, 34, 34, .45); opacity: 0; transition: opacity .28s ease; }
.edb-tj-hoja-panel {
	position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; max-height: 88vh; max-height: 88dvh; overflow: auto; overscroll-behavior: contain;
	padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; background: var(--edb-blanco);
	box-shadow: 0 -8px 30px rgba(34, 34, 34, .16); transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.edb-tj-hoja-panel::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--edb-borde); }
.edb-tj-hoja.edb-visible .edb-tj-hoja-velo { opacity: 1; }
.edb-tj-hoja.edb-visible .edb-tj-hoja-panel { transform: none; }
@media (min-width: 600px) {
	.edb-tj-hoja-panel { left: 50%; right: auto; width: min(560px, 100%); transform: translate(-50%, 100%); }
	.edb-tj-hoja.edb-visible .edb-tj-hoja-panel { transform: translate(-50%, 0); }
}
.edb-tj-hoja-cabeza { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--edb-linea); }
.edb-tj-hoja-img { display: block; box-sizing: border-box; width: 76px; height: 76px; padding: 6px; border-radius: 8px; background: var(--edb-lienzo); object-fit: contain; mix-blend-mode: multiply; }
.edb-tj-hoja-nombre {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0;
	font: 400 15px/1.35 var(--edb-fuente); color: var(--edb-texto);
}
.edb-tj-hoja-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 6px 0 0; font: 600 18px/1.25 var(--edb-fuente); color: var(--edb-coral); }
button.edb-tj-hoja-cerrar.edb-tj-hoja-cerrar {
	align-self: start; display: grid; place-items: center; width: 40px; height: 40px; margin: -4px -8px 0 0; padding: 0; border: 0; border-radius: 50%;
	background: none; box-shadow: none; color: var(--edb-texto); cursor: pointer;
}
button.edb-tj-hoja-cerrar.edb-tj-hoja-cerrar::before {
	content: ""; width: 20px; height: 20px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
button.edb-tj-hoja-cerrar.edb-tj-hoja-cerrar:is(:hover, :focus) { background: var(--edb-lienzo); color: var(--edb-texto); }
.edb-tj-hoja-opciones { display: grid; gap: 18px; padding: 18px 0 4px; }
.edb-tj-hoja .edb-tj-atributo-nombre { margin-bottom: 10px; font-size: 15px; }
.edb-tj-hoja .edb-tj-chips { gap: 8px; }
.edb-tj-hoja button.edb-tj-chip.edb-tj-chip { min-width: 52px; min-height: 44px; padding: 0 12px; font-size: 15px; }
.edb-tj-hoja button.edb-tj-chip--color.edb-tj-chip--color { width: 40px; min-width: 0; height: 40px; min-height: 0; padding: 0; }
.edb-tj-hoja .edb-tj-estado { margin: 10px 0 0; font-size: 14px; }
.edb-tj-hoja button.edb-tj-hoja-agregar.edb-tj-agregar { min-height: 52px; margin-top: 18px; font-size: 16px; }
.edb-tj-hoja-ver { display: block; margin-top: 14px; font: 600 14px/1.3 var(--edb-fuente); color: var(--edb-texto); text-align: center; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) and (max-width: 1024px) {
	.edb-tj-precio { --edb-tj-precio: min(2.6vw, 11cqi); --edb-tj-tachado: min(2.2vw, 8.8cqi); }
}
@media (max-width: 767px) {
	button.edb-fav-quitar.edb-fav-quitar, button.edb-fav-boton.edb-tj-corazon { top: 6px; right: 6px; width: 34px; height: 34px; }
	button.edb-fav-quitar.edb-fav-quitar::before { width: 17px; height: 17px; }
	.edb-tj-descuento { top: 8px; left: 8px; width: 38px; }
	.edb-tj-sin-stock { left: 8px; bottom: 8px; }
	.edb-tj-cuerpo { padding-top: 10px; }
	.edb-tj-precio { gap: 0 6px; --edb-tj-precio: min(4.4vw, 11cqi); --edb-tj-tachado: min(3.5vw, 8.8cqi); }
	button.edb-tj-bolsa.edb-tj-bolsa { right: 6px; bottom: 6px; width: 38px; height: 38px; }
	button.edb-tj-bolsa.edb-tj-bolsa::before { width: 19px; height: 19px; }
	.edb-tj-colores { gap: 8px; margin-top: 8px; }
	button.edb-tj-punto.edb-tj-punto { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.edb-tj, .edb-tj-media img.edb-tj-img, .edb-tj-rapido, .edb-tj-hoja-velo, .edb-tj-hoja-panel, button.edb-tj-punto.edb-tj-punto { transition: none; }
	.edb-tj-atributo--falta .edb-tj-chips, .edb-tj-colores.edb-tj-atributo--falta, button.edb-tj-agregar.edb-tj-agregar.edb-tj-recien { animation: none; }
}

/* ---------- Corazón (lista de deseos del plugin 030) ---------- */
/* La hoja de la tienda deja sin fondo los botones de corazón al tocarlos; en la foto conserva su círculo blanco */
button.edb-fav-boton.edb-tj-corazon:is(:hover, :focus, :active) { background: var(--edb-blanco); box-shadow: 0 1px 6px rgba(0, 0, 0, .1); }
button.edb-fav-boton.edb-tj-corazon.edb-fav-activo { color: var(--edb-coral); }

/* ---------- Dónde vive la tarjeta ---------- */
/* Elementor (grilla de categorías y carruseles de la portada): la tarjeta ocupa todo el alto del ítem, así las filas y diapositivas quedan parejas */
.e-loop-item .edb-tj-caja { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; padding: 0 !important; height: 100%; }
.e-loop-item .edb-tj-caja > .elementor-widget-shortcode { width: 100%; flex: 1 1 auto; }
.e-loop-item .edb-tj-caja .elementor-widget-container, .e-loop-item .edb-tj-caja .elementor-shortcode { height: 100%; }
.e-loop-item .edb-tj { height: 100%; }
/* WooCommerce (relacionados y otros ul.products): el ítem solo lleva la tarjeta; se neutralizan los estilos de su tarjeta propia */
ul.products li.product.edb-tj-li { display: flex; flex-direction: column; margin-bottom: 0; padding: 0; text-align: left; }
ul.products li.product.edb-tj-li > .edb-tj { flex: 1 1 auto; }
ul.products li.product.edb-tj-li img.edb-tj-img { margin: 0 !important; box-shadow: none !important; }
ul.products li.product.edb-tj-li .edb-tj-nombre { padding: 0 !important; margin: 0 !important; }
/* La sección de la página con un cajón abierto sube de capa (sobre la sección siguiente, bajo la cabecera fija) */
.edb-tj-elevada { position: relative; z-index: 5; }

/* Etiquetas: una sola fila del alto de la píldora. Si no caben todas, se muestran las que caben (así el precio no baja).
   Se anula el margen que la hoja de la ficha pone a las etiquetas de los relacionados antiguos */
.edb-tj-etiquetas .advanced-woo-labels { flex-wrap: wrap !important; row-gap: 12px !important; margin: 0 !important; grid-area: auto !important; }

/* Separación entre productos, la misma en categorías, relacionados y favoritos (pedido de Italo, 17-sep: «que no parezcan sin margen»).
   Columnas: 24 px en 1366 a 38 px en 1920 (medida de Figma); filas: 40 a 56 px; teléfono: 12 y 28. Los carruseles de la portada conservan el suyo (35 px) */
:root {
	--edb-tj-hueco-col: clamp(24px, calc(24px + 14 * (100vw - 1366px) / 554), 38px);
	--edb-tj-hueco-fila: clamp(40px, calc(40px + 16 * (100vw - 1366px) / 554), 56px);
}
@media (max-width: 767px) { :root { --edb-tj-hueco-col: 12px; --edb-tj-hueco-fila: 28px; } }
.elementor-loop-container.elementor-grid:has(> .e-loop-item .edb-tj) {
	/* Columnas: nunca más de las elegidas en Elementor, pero se quita una si la tarjeta quedaría bajo 250 px (antes lo hacía el CSS de #18950) */
	grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - (var(--grid-columns, 4) - 1) * var(--edb-tj-hueco-col)) / var(--grid-columns, 4))), 1fr)) !important;
	column-gap: var(--edb-tj-hueco-col) !important;
	row-gap: var(--edb-tj-hueco-fila) !important;
}
@media (max-width: 767px) {
	.elementor-loop-container.elementor-grid:has(> .e-loop-item .edb-tj) { grid-template-columns: repeat(auto-fill, minmax(max(130px, calc((100% - (var(--grid-columns, 2) - 1) * var(--edb-tj-hueco-col)) / var(--grid-columns, 2))), 1fr)) !important; }
}

/* Relacionados de la ficha (lista con desplazamiento): misma separación entre tarjetas */
.edb-ficha .edb-relacionados ul.products:has(> li.edb-tj-li) { --ficha-hueco: var(--edb-tj-hueco-col) !important; align-items: stretch !important; overflow-y: hidden !important; }
/* (Sin overflow-y: hidden la lista también se desplazaba hacia abajo, porque el cajón oculto cuenta como contenido, y la parte de arriba de las tarjetas quedaba escondida) */
/* Todas las tarjetas de una fila o de un carrusel con el mismo alto (con el borde se nota si una queda más corta) */
ul.products li.product.edb-tj-li { height: auto !important; align-self: stretch !important; }
.swiper-wrapper:has(> .e-loop-item .edb-tj) { align-items: stretch; }
.swiper-wrapper:has(> .e-loop-item .edb-tj) > .e-loop-item { height: auto !important; }
/* La hoja de la ficha deja los li de relacionados en display: block; la tarjeta toma todo el alto del li */
ul.products li.product.edb-tj-li > .edb-tj { height: 100%; }

/* Prueba B: con la foto sobre gris, las páginas de categoría y «Mis favoritos» van en blanco */
body.tax-product_cat, body.tax-product_tag, body.tax-product_brand, body.post-type-archive-product, body:has(.edb-favoritos) { background-color: var(--edb-blanco) !important; --edb-f-fondo-barra: var(--edb-blanco, #fff); }
/* La onda bajo el héroe de la categoría se pinta con el fondo de la página; la variable se declara en .edb-cat-heroe (edb-categoria-2026.css), así que se fija ahí con más peso */
:is(body.tax-product_cat, body.tax-product_tag, body.tax-product_brand, body.post-type-archive-product) .edb-cat-heroe { --edb-cat-fondo-siguiente: var(--edb-blanco, #fff); }