/*!
 * EDESAC — catálogo de productos
 * =============================================================================
 * Retoques sobre lo que pintan WooCommerce y The7 en el catálogo. Solo se carga
 * en la tienda, en los archivos de categoría e industria y en la ficha.
 *
 * Aquí NO está el diseño de las tarjetas del Figma: eso llegará cuando se den
 * de alta los productos. Esto es lo mínimo para que el modo catálogo no deje
 * huecos ni botones muertos.
 */

/* ───────────────────────────────── 1. Restos del carrito ── */

/* El PHP ya quita el microwidget del carrito de la lista de The7, pero el tema
   lo pinta desde varios sitios (cabecera fija, cabecera móvil, menú lateral) y
   no todos pasan por ese filtro. */
.masthead .mini-cart,
.masthead .shopping-cart,
.masthead .dt-mini-cart,
.masthead .mini-widgets .shopping-cart,
#mobile-menu .mini-cart,
.dt-mobile-header .mini-cart,
.woocommerce .cart,
.added_to_cart {
	display: none !important;
}

/* ─────────────────────────────────── 2. Hueco del precio ── */

/* Sin precio, WooCommerce y The7 dejan el contenedor con su margen: una franja
   en blanco entre el título y el botón. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: none;
}

/* ──────────────────────────────────── 3. «Ver detalles» ── */

/* The7 saca el enlace de la tarjeta a un botón redondo flotando sobre la foto,
   y lo pinta con su glifo de CARRITO. El enlace ya dice «Ver detalles» —no
   añade nada al carrito, que no existe— pero el icono seguía prometiendo una
   compra. Se esconde el botón: la foto y el título ya enlazan a la ficha.

   Cuando se maqueten las tarjetas del Figma, que sí llevan un botón «Ver
   detalles» de texto, esta regla se sustituye por el estilo de ese botón. */
.woocommerce .woo-buttons,
.woocommerce .woo-buttons-on-img .woo-buttons {
	display: none;
}

/* Es un enlace, no una compra: se pinta como el botón secundario del sitio y
   no como el botón de acción principal. */
.woocommerce ul.products li.product .button {
	background-color: var(--edesac-blue, #2270ae);
	color: #fff;
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--edesac-blue-dark, #174163);
	color: #fff;
}

/* The7 pinta sus botones con dos capas absolutas (::before base y ::after
   hover) que tapan el fondo del propio elemento. */
.woocommerce ul.products li.product .button:before,
.woocommerce ul.products li.product .button:after {
	display: none;
}

/* ──────────────────────────────── 4. Rejilla con la columna de filtros ── */

/* `filtros.php` envuelve el `#content` de The7 y la columna lateral en este
   contenedor. La columna va primero en el marcado —también es lo primero que
   lee un lector de pantalla— y en escritorio se coloca a la izquierda. */
.edh-tienda {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* The7 declara `.content { grid-area: content }` en su media.css, para la
   rejilla con la que él coloca contenido y barra lateral. Dentro de ESTA
   rejilla ese nombre de área no existe, así que el navegador se inventa líneas
   llamadas «content» y aparecen dos pistas fantasma: el contenido acababa en la
   cuarta columna, a 560px de la barra de filtros. Se anula colocando a los dos
   hijos a mano. */
.edh-tienda > .edh-tienda__sidebar {
	grid-area: auto;
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.edh-tienda > #content,
.edh-tienda > .content {
	grid-area: auto;
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	width: auto;
}

/* El plegable: en escritorio el JS lo abre, así que el botón sobra. */
.edh-tienda__plegable-boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	color: #1a1a17;
	cursor: pointer;
	list-style: none;
}

/* Safari pinta un triángulo propio en el <summary>. */
.edh-tienda__plegable-boton::-webkit-details-marker {
	display: none;
}

.edh-tienda__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.edh-tienda__plegable[open] .edh-tienda__chevron {
	transform: rotate(180deg);
}

.edh-tienda__filtros {
	margin-top: 16px;
}

/* Títulos de cada tarjeta de filtro («Categorías», «Industrias»). */
.edh-tienda__filtros .wpc-filters-widget .wpc-filters-section .wpc-filter-title,
.edh-tienda__filtros .wpc-filter-header {
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: #2270ae;
}

/* Una tarjeta sin términos aplicables se esconde con la clase que el propio
   plugin le pone. Va en CSS y no en PHP porque al filtrar el plugin repinta
   ese bloque por AJAX: un recorte en PHP solo valdría para la primera carga. */
.edh-tienda__filtros .wpc-filter-terms-count-0 {
	display: none;
}

@media (max-width: 991px) {
	.edh-tienda {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.edh-tienda > .edh-tienda__sidebar,
	.edh-tienda > #content,
	.edh-tienda > .content {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ═══════════════════════════ 5. Interfaz de los filtros ═══ */

/* El desplegable «Filtrar productos» ya no se pinta desde PHP. Estas dos
   reglas cubren la caché de página y cualquier contenido guardado antes. */
.edh-tienda__plegable-boton,
.edh-tienda__chevron {
	display: none;
}

.edh-tienda__filtros {
	margin-top: 0;
	padding: 20px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
}

/* Título de cada tarjeta de filtro, con el subrayado rojo del pie: es el
   mismo recurso de marca y ata visualmente las dos zonas. */
.edh-tienda__filtros .wpc-filter-title,
.edh-tienda__filtros .wpc-filter-header,
.edh-tienda__filtros .wpc-filters-section .wpc-filter-title {
	display: inline-block;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--edesac-red, #d73520);
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--edesac-blue-dark, #174163);
}

/* Separación entre bloques de filtro. */
.edh-tienda__filtros .wpc-filters-section {
	margin-bottom: 22px;
	padding-bottom: 0;
	border: 0;
}

.edh-tienda__filtros .wpc-filters-section:last-child {
	margin-bottom: 0;
}

/* Cada término: fila pulsable entera, no solo la casilla. */
.edh-tienda__filtros .wpc-filters-ul-list li,
.edh-tienda__filtros .wpc-term-item {
	margin: 0 0 2px;
	list-style: none;
}

.edh-tienda__filtros .wpc-filter-content label,
.edh-tienda__filtros .wpc-term-item-content {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border-radius: 8px;
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.35;
	color: #46525f;
	cursor: pointer;
	/* Propiedades nombradas, nunca `all`. */
	transition: background-color 140ms ease, color 140ms ease;
}

.edh-tienda__filtros .wpc-filter-content label:hover {
	background: #f1f5f9;
	color: var(--edesac-blue-dark, #174163);
}

/* El enlace del término hereda del label y deja de pintarse de azul enlace. */
.edh-tienda__filtros .wpc-filter-content a {
	color: inherit;
	text-decoration: none;
	font: inherit;
}

/* Casilla propia: la del navegador no acepta color de marca. */
.edh-tienda__filtros input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
	border: 1.5px solid #cbd5e1;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease;
}

.edh-tienda__filtros input[type="checkbox"]:checked {
	border-color: var(--edesac-blue, #2270ae);
	background: var(--edesac-blue, #2270ae);
	/* La marca va como fondo: un pseudo-elemento no cabe en un `input`. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	background-position: center;
	background-repeat: no-repeat;
}

.edh-tienda__filtros input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--edesac-red, #d73520);
	outline-offset: 2px;
}

/* El contador, como píldora al final de la fila. */
.edh-tienda__filtros .wpc-filter-count {
	margin-left: auto;
	padding: 1px 8px;
	border-radius: 20px;
	background: #eef2f6;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: #64748b;
}

/* Enlace «Editar conjunto de filtros»: solo lo ve un administrador y no debe
   competir con los filtros. */
.edh-tienda__filtros .wpc-edit-filters,
.edh-tienda__filtros .wpc-edit-set {
	margin-top: 14px;
	font-size: 0.75rem;
	opacity: 0.55;
}

/* ═══════════════════════════ 6. Banner comercial ═══ */

.edh-tienda__banner {
	margin-top: 20px;
	padding: 22px 20px;
	border-radius: 12px;
	background: var(--edesac-blue-dark, #174163);
	color: #fff;
}

.edh-tienda__banner-titulo {
	margin: 0;
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
	color: #fff;
}

.edh-tienda__banner-texto {
	margin: 8px 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

.edh-tienda__banner-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
	padding: 12px 18px;
	border-radius: 8px;
	background: #25d366;
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1.2;
	color: #08331a;
	text-align: center;
	text-decoration: none;
	transition: background-color 140ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.edh-tienda__banner-cta:hover {
	background: #1eb356;
	color: #08331a;
}

.edh-tienda__banner-cta:active {
	transform: translateY(1px) scale(0.985);
}

.edh-tienda__banner-cta svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ═══════════════════ 7. Rejilla de tres y botón por producto ═══ */

/* The7 coloca las tarjetas con Isotope y anchos en línea calculados por JS a
   partir de `data-columns`, que ya viene a 3 desde PHP. Estas reglas solo
   aseguran que la tarjeta no se estire de más si el JS no llega a ejecutarse. */
.woocommerce ul.products li.product,
.dt-products .wf-cell {
	max-width: 100%;
}

.edh-tienda__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #25d366;
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: #08331a;
	text-decoration: none;
	transition: background-color 140ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.edh-tienda__wa:hover {
	background: #1eb356;
	color: #08331a;
}

.edh-tienda__wa:active {
	transform: translateY(1px) scale(0.985);
}

.edh-tienda__wa svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ═══════════════════════════ 8. Responsive ═══ */

@media (max-width: 991px) {
	/* Sin desplegable: en móvil los filtros van arriba, compactos, y el banner
	   después. Se limita el alto de cada lista para que no empujen el catálogo
	   fuera de pantalla, que era lo que resolvía el `<details>`. */
	.edh-tienda__filtros .wpc-filters-widget-content {
		max-height: 320px;
		overflow-y: auto;
	}

	.edh-tienda__wa {
		min-height: 44px;
	}

	.edh-tienda__banner-cta {
		min-height: 44px;
	}
}

/* ═════════════════ 9. Tarjetas de producto a la misma altura ═══ */

/* Las fotos de catálogo vienen con proporciones distintas —un barril es
   vertical, un contenedor IBC es cuadrado—, así que cada tarjeta medía otra
   cosa y los títulos y los botones quedaban a distinta altura en la misma
   fila. Se le da a TODAS el mismo marco cuadrado y la foto se ajusta dentro
   con `contain`: el producto se ve entero, sin recortar, que es lo que importa
   en un catálogo técnico. */

.woocommerce .products .woocom-project > .woo-buttons-on-img,
.dt-products .wf-cell .woocom-project > .woo-buttons-on-img {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.dt-products .wf-cell .woocom-project img.wp-post-image,
.woocommerce .products img.wp-post-image {
	width: 100%;
	height: 100%;
	/* `contain` y no `cover`: recortar un bidón por la mitad para cuadrar la
	   caja es peor que dejar aire a los lados. */
	object-fit: contain;
	padding: 14px;
}

/* Con las fotos igualadas, el cuerpo de la tarjeta se estira para que el botón
   quede abajo del todo en las tres. */
.dt-products .wf-cell article.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.dt-products .wf-cell .woocom-project {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 0;
}

.dt-products .wf-cell .edh-tienda__wa {
	margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO
   ───────────────────────────────────────────────────────────────────────────
   Foto a la izquierda, datos a la derecha. Prefijo `edh-ficha`, libre.
   Ninguna `font-family`: se hereda la del tema.
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product div.product {
	--edh-f-azul:   #2270ae;
	--edh-f-osc:    #174163;
	--edh-f-rojo:   #d73520;
	--edh-f-ink:    #0f172a;
	--edh-f-texto:  #475569;
	--edh-f-suave:  #94a3b8;
	--edh-f-borde:  #e2e8f0;
	--edh-f-fondo:  #f6f8fa;
	--edh-f-curva:  cubic-bezier(.23, 1, .32, 1);
}

/* La barra de blog de The7 no pinta nada en una ficha técnica. */
.single-product #sidebar,
.single-product .sidebar-content,
.single-product aside.sidebar { display: none !important; }
.single-product #content { width: 100%; float: none; }

/* ── Foto ─────────────────────────────────────────────────────────────── */

.single-product div.product .woocommerce-product-gallery {
	background: var(--edh-f-fondo);
	border-radius: 18px;
	padding: clamp(16px, 3vw, 34px);
}

.single-product div.product .woocommerce-product-gallery img { border-radius: 12px; }

/* ── Antetítulo ───────────────────────────────────────────────────────── */

.edh-ficha__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.edh-ficha__linea {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--edh-f-azul);
	padding: 5px 11px;
	border-radius: 999px;
}

.edh-ficha__sku {
	font-size: 13px;
	font-weight: 600;
	color: var(--edh-f-suave);
	font-variant-numeric: tabular-nums;
}

/* ── Título y resumen ─────────────────────────────────────────────────── */

.single-product div.product .product_title {
	margin: 0 0 14px;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--edh-f-osc);
}

.single-product div.product .woocommerce-product-details__short-description {
	margin: 0 0 26px;
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--edh-f-texto);
	max-width: 58ch;
}

/* ── Bloques con etiqueta ─────────────────────────────────────────────── */

.edh-ficha__bloque { margin: 0 0 22px; }

.edh-ficha__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--edh-f-osc);
}

.edh-ficha__icono { width: 17px; height: 17px; flex: none; color: var(--edh-f-rojo); }

/* ── Presentaciones ───────────────────────────────────────────────────── */

.single-product .edh-ficha__pres {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .edh-ficha__pres-item {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	min-height: 0;
	padding: 8px 15px 8px 8px;
	border: 1px solid var(--edh-f-borde);
	border-radius: 12px;
	background: #fff;
	transition: border-color .22s var(--edh-f-curva), box-shadow .22s var(--edh-f-curva);
}

.single-product .edh-ficha__pres-item::before,
.single-product .edh-ficha__pres-item::marker { content: none; }

.edh-ficha__pres-foto {
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: var(--edh-f-fondo);
	overflow: hidden;
}

.edh-ficha__pres-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;   /* las fotos vienen con fondo blanco */
}

.edh-ficha__pres-nombre {
	font-size: 14px;
	font-weight: 600;
	color: var(--edh-f-ink);
	white-space: nowrap;
}

@media (hover: hover) {
	.single-product .edh-ficha__pres-item:hover {
		border-color: var(--edh-f-azul);
		box-shadow: 0 8px 20px -14px var(--edh-f-azul);
	}
}

/* ── Sectores ─────────────────────────────────────────────────────────── */

.single-product .edh-ficha__sectores {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product .edh-ficha__sectores li { margin: 0; min-height: 0; padding: 0; }
.single-product .edh-ficha__sectores li::before,
.single-product .edh-ficha__sectores li::marker { content: none; }

.single-product .edh-ficha__sectores a {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 999px;
	background: #eaf2f8;
	color: var(--edh-f-osc);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s var(--edh-f-curva), color .2s var(--edh-f-curva);
}

@media (hover: hover) {
	.single-product .edh-ficha__sectores a:hover { background: var(--edh-f-azul); color: #fff; }
}

/* ── Llamadas a la acción ─────────────────────────────────────────────── */

.edh-ficha__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}

.edh-ficha__wa,
.edh-ficha__pdf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .22s var(--edh-f-curva), box-shadow .22s var(--edh-f-curva),
	            background .22s var(--edh-f-curva), color .22s var(--edh-f-curva);
}

.edh-ficha__wa {
	background: #25d366;
	color: #fff;
	box-shadow: 0 10px 24px -14px #25d366;
}

.edh-ficha__wa svg { width: 20px; height: 20px; fill: currentColor; }

.edh-ficha__pdf {
	background: #fff;
	color: var(--edh-f-osc);
	border: 1.5px solid var(--edh-f-osc);
}

.edh-ficha__pdf .edh-ficha__icono { color: currentColor; width: 18px; height: 18px; }

@media (hover: hover) {
	.edh-ficha__wa:hover  { transform: translateY(-2px); box-shadow: 0 14px 28px -14px #25d366; color: #fff; }
	.edh-ficha__pdf:hover { background: var(--edh-f-osc); color: #fff; }
}

/* ── Franja de garantías ──────────────────────────────────────────────── */

.single-product .edh-ficha__garantias {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--edh-f-borde);
	list-style: none;
}

.single-product .edh-ficha__garantias li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	min-height: 0;
	padding: 0;
}

.single-product .edh-ficha__garantias li::before,
.single-product .edh-ficha__garantias li::marker { content: none; }

.edh-ficha__garantias .edh-ficha__icono { width: 22px; height: 22px; color: var(--edh-f-azul); }
.edh-ficha__garantias small  { display: block; font-size: 11px; letter-spacing: .09em;
                               text-transform: uppercase; color: var(--edh-f-suave); line-height: 1.3; }
.edh-ficha__garantias strong { display: block; font-size: 13.5px; font-weight: 700;
                               color: var(--edh-f-ink); line-height: 1.35; }

/* ── Relacionados ─────────────────────────────────────────────────────── */

.single-product .related > h2 {
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	color: var(--edh-f-osc);
	margin-bottom: 22px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.edh-ficha__acciones { flex-direction: column; }
	.edh-ficha__wa,
	.edh-ficha__pdf { width: 100%; }
	.single-product .edh-ficha__garantias { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Productos relacionados ───────────────────────────────────────────────
   The7 no usa el marcado de WooCommerce aquí: monta `ul.related-product > li`
   con su propia estructura, no `.products .product`. */

.single-product .related { margin-top: clamp(40px, 5vw, 68px); }

.single-product ul.related-product {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product ul.related-product > li {
	margin: 0;
	min-height: 0;
	padding: 14px;
	border: 1px solid var(--edh-f-borde, #e2e8f0);
	border-radius: 14px;
	background: #fff;
	transition: border-color .22s var(--edh-f-curva, ease),
	            box-shadow   .22s var(--edh-f-curva, ease),
	            transform    .22s var(--edh-f-curva, ease);
}

.single-product ul.related-product > li::before,
.single-product ul.related-product > li::marker { content: none; }

.single-product ul.related-product .product-thumbnail {
	display: grid;
	place-items: center;
	background: var(--edh-f-fondo, #f6f8fa);
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 12px;
}

.single-product ul.related-product img {
	width: 100%;
	height: auto;
	max-height: 150px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.single-product ul.related-product .product-title,
.single-product ul.related-product h3,
.single-product ul.related-product h4 {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--edh-f-ink, #0f172a);
}

/* Sin precio y sin botón de compra: esto es un catálogo. */
.single-product ul.related-product .price,
.single-product ul.related-product .add_to_cart_button,
.single-product ul.related-product .button { display: none; }

@media (hover: hover) {
	.single-product ul.related-product > li:hover {
		border-color: var(--edh-f-azul, #2270ae);
		transform: translateY(-3px);
		box-shadow: 0 14px 28px -20px rgba(15, 23, 42, .5);
	}
}

/* Línea comercial en la tarjeta del catálogo. */
.edh-tienda__linea {
	display: inline-block;
	margin: 0 0 5px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #eaf2f8;
	color: #174163;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TARJETA DEL CATÁLOGO
   ───────────────────────────────────────────────────────────────────────────
   Foto sobre fondo claro arriba, y abajo un bloque con la línea, el nombre y
   las dos acciones. Sin descripción: va en la ficha.

   El marcado lo pone The7 y no se toca:
     article.product > figure.woocom-project
        ├── div.woo-buttons-on-img   (la foto, y su capa de botones al pasar)
        └── figcaption.woocom-list-content
              ├── span.edh-tienda__linea
              ├── h4.entry-title > a
              └── div.edh-tienda__acciones
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce ul.products li.product,
.woocommerce .wf-cell article.product {
	--edh-c-azul:  #2270ae;
	--edh-c-osc:   #174163;
	--edh-c-ink:   #0f172a;
	--edh-c-suave: #94a3b8;
	--edh-c-borde: #e2e8f0;
	--edh-c-fondo: #f6f8fa;
	--edh-c-verde: #25d366;
	--edh-c-curva: cubic-bezier(.23, 1, .32, 1);
}

/* ── La tarjeta ───────────────────────────────────────────────────────── */

.woocommerce .wf-cell article.product .woocom-project {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--edh-c-borde);
	border-radius: 16px;
	background: #fff;
	transition: border-color .24s var(--edh-c-curva),
	            box-shadow   .24s var(--edh-c-curva),
	            transform    .24s var(--edh-c-curva);
}

/* Que todas las tarjetas de una fila midan lo mismo aunque el nombre parta
   en dos líneas: la celda estira y la tarjeta ocupa el alto entero. */
.woocommerce .wf-cell { display: flex; }
.woocommerce .wf-cell article.product { width: 100%; display: flex; }

@media (hover: hover) {
	.woocommerce .wf-cell article.product .woocom-project:hover {
		border-color: var(--edh-c-azul);
		transform: translateY(-4px);
		box-shadow: 0 18px 34px -22px rgba(15, 23, 42, .55);
	}
}

/* ── Zona de la foto ──────────────────────────────────────────────────── */

.woocommerce .wf-cell article.product .woo-buttons-on-img {
	background: var(--edh-c-fondo);
	padding: 22px 22px 18px;
	margin: 0;
}

.woocommerce .wf-cell article.product .woo-buttons-on-img img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: contain;
	/* Las fotos de envase vienen con fondo blanco: así se funden con el gris. */
	mix-blend-mode: multiply;
}

/* La capa de botones que The7 superpone al pasar el ratón: sobra, porque la
   tarjeta ya tiene su propio botón «Más detalles» debajo. */
.woocommerce .wf-cell article.product .woo-buttons { display: none; }

/* ── Zona de datos ────────────────────────────────────────────────────── */

.woocommerce .wf-cell article.product .woocom-list-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 auto;          /* empuja las acciones al fondo de la tarjeta */
	gap: 0;
	padding: 16px 18px 18px;
	text-align: center;
	background: #fff;
}

.woocommerce .wf-cell article.product .edh-tienda__linea { margin-bottom: 7px; }

.woocommerce .wf-cell article.product .entry-title {
	margin: 0 0 14px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	/* Dos líneas exactas: el nombre más largo del catálogo cabe, y todas las
	   tarjetas reservan el mismo hueco aunque el nombre sea corto. */
	min-height: calc(2 * 1.35em);
}

.woocommerce .wf-cell article.product .entry-title a {
	color: var(--edh-c-osc);
	text-decoration: none;
	transition: color .2s var(--edh-c-curva);
}

@media (hover: hover) {
	.woocommerce .wf-cell article.product .entry-title a:hover { color: var(--edh-c-azul); }
}

/* Por si el resumen se cuela por otra vía. */
.woocommerce .wf-cell article.product .woocommerce-product-details__short-description,
.woocommerce .wf-cell article.product .post-excerpt { display: none; }

/* ── Acciones ─────────────────────────────────────────────────────────── */

.edh-tienda__acciones {
	display: flex;
	/* `center` y no `stretch`: con `stretch`, el enlace principal se estiraba a
	   la altura que le imponía el tema (62 px) mientras el de WhatsApp mantenía
	   su cuadrado de 42, y quedaban descuadrados. Con altura fija en los dos y
	   centrado, casan siempre. */
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: auto;        /* siempre abajo, aunque el nombre sea de una línea */
}

.edh-tienda__mas {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Altura fija, y `padding` solo horizontal: The7 le mete su propio relleno
	   vertical a los enlaces del catálogo y lo estiraba a 62 px. */
	height: 44px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	background: var(--edh-c-osc);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background .22s var(--edh-c-curva), transform .22s var(--edh-c-curva);
}

.edh-tienda__acciones .edh-tienda__wa {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 10px;
	background: var(--edh-c-verde);
	color: #fff;
	transition: background .22s var(--edh-c-curva), transform .22s var(--edh-c-curva);
}

.edh-tienda__acciones .edh-tienda__wa svg { width: 21px; height: 21px; fill: currentColor; }
.edh-tienda__acciones .edh-tienda__wa span { display: none; }

@media (hover: hover) {
	.edh-tienda__mas:hover { background: var(--edh-c-azul); color: #fff; transform: translateY(-1px); }
	.edh-tienda__acciones .edh-tienda__wa:hover { background: #1fb855; color: #fff; transform: translateY(-1px); }
}

/* ── Aire entre tarjetas ──────────────────────────────────────────────── */

.woocommerce .wf-cell { padding-bottom: 24px; }

@media (max-width: 480px) {
	.woocommerce .wf-cell article.product .woo-buttons-on-img { padding: 16px 16px 12px; }
	.woocommerce .wf-cell article.product .woo-buttons-on-img img { height: 150px; }
	.woocommerce .wf-cell article.product .woocom-list-content { padding: 14px 14px 16px; }
}

/* ── Chips de presentación: ahora son un control ──────────────────────────
   Cambian la imagen del carrusel, así que tienen que parecer pulsables y
   marcar cuál está viéndose. */

.single-product .edh-ficha__pres-item {
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.single-product .edh-ficha__pres-item.is-activo {
	border-color: var(--edh-f-azul, #2270ae);
	background: #f2f8fc;
	box-shadow: 0 0 0 1px var(--edh-f-azul, #2270ae) inset;
}

.single-product .edh-ficha__pres-item.is-activo .edh-ficha__pres-nombre {
	color: var(--edh-f-osc, #174163);
}

/* Foco visible: se llega por teclado. */
.single-product .edh-ficha__pres-item:focus-visible {
	outline: 2px solid var(--edh-f-azul, #2270ae);
	outline-offset: 3px;
}

/* Las miniaturas del carrusel, a juego con las fichas. */
.single-product .flex-control-thumbs { gap: 8px; display: flex; margin: 12px 0 0; padding: 0; }
.single-product .flex-control-thumbs li { margin: 0; min-height: 0; width: auto; padding: 0; list-style: none; }
.single-product .flex-control-thumbs li::before,
.single-product .flex-control-thumbs li::marker { content: none; }

.single-product .flex-control-thumbs img {
	width: 62px;
	height: 62px;
	object-fit: contain;
	border-radius: 9px;
	border: 1px solid var(--edh-f-borde, #e2e8f0);
	background: #fff;
	opacity: 1;
	cursor: pointer;
	mix-blend-mode: multiply;
	transition: border-color .2s var(--edh-f-curva, ease);
}

.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { border-color: var(--edh-f-azul, #2270ae); }