/* ===================================
   HISPANUS PRODUCT COMPARE - FRONTEND
   Grid plano único — alineación garantizada
   =================================== */

:root {
	--hpc-primary: #000000;
	--hpc-border: #ececec;
	--hpc-bg: #ffffff;
	--hpc-highlight: #fafafa;
	--hpc-text: #333333;
	--hpc-muted: #666666;
}

/* ─────────────────────────────────────
   GRID PRINCIPAL
   Todos los elementos (productos +
   especificaciones) son hijos directos
   de .hpc-compare.  Columnas:
     col-1  35 %  →  etiquetas
     col-2  32.5% →  producto izquierdo
     col-3  32.5% →  producto derecho
   ───────────────────────────────────── */
.hpc-compare {
	display: grid;
	/* Valores por defecto, sobreescritos por Elementor */
	--hpc-label-width: 35%;
	max-width: 100%;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--hpc-text);
	background: var(--hpc-bg);
}

.hpc-compare-1 {
	--hpc-col-width: calc(100% - var(--hpc-label-width));
	grid-template-columns: var(--hpc-label-width) var(--hpc-col-width);
}

.hpc-compare-2 {
	--hpc-col-width: calc((100% - var(--hpc-label-width)) / 2);
	grid-template-columns: var(--hpc-label-width) var(--hpc-col-width) var(--hpc-col-width);
}

.hpc-compare-3 {
	--hpc-col-width: calc((100% - var(--hpc-label-width)) / 3);
	grid-template-columns: var(--hpc-label-width) var(--hpc-col-width) var(--hpc-col-width) var(--hpc-col-width);
}

/* ── Espaciador de cabecera (col-1) ── */
.hpc-header-empty {
	/* Ocupa col-1 en la fila de productos;
	   no necesita contenido visual. */
}

/* ── Tarjetas de producto ── */
.hpc-product-col-1 { grid-column: 2; }
.hpc-product-col-2 { grid-column: 3; }
.hpc-product-col-3 { grid-column: 4; }

.hpc-product-card {
	text-align: center;
	padding: 0 10px 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem; /* Separación por defecto, personalizable desde el widget */
	
	background: #f5f5f5;
    margin: 3px;
    border-radius: 5px;
}

.hpc-product-card a {
    display: flex;
    justify-content: center;
}

.hpc-product-card a img {
	padding-top: 10px;
}

.hpc-product-image {
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	background: #f5f5f5;
}

.hpc-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hpc-product-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

h3.hpc-product-title {
    color: #000;
    font-size: 20px !important;
    text-transform: none !important;
    line-height: 23px !important;
}

.hpc-product-description {
	font-size: 14px;
	color: var(--hpc-muted);
	margin: 0;
	line-height: 1.6;
}

.hpc-product-price {
	font-size: 28px;
	font-weight: 700;
	margin: 0;
	color: var(--hpc-primary);
}

.hpc-product-price .woocommerce-Price-amount {
	font-weight: 700;
}

.hpc-product-price .woocommerce-Price-currencySymbol {
	font-size: 0.9em;
}

.hpc-product-price del {
	opacity: 0.6;
	text-decoration: line-through;
	font-size: 0.85em;
	margin-left: 0.5rem;
}

.hpc-btn-buy {
	display: inline-block;
	background: var(--hpc-primary);
	color: #ffffff;
	padding: 12px 32px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	transition: all 0.3s ease;
	border: 2px solid var(--hpc-primary);
	cursor: pointer;
}

.hpc-btn-buy:hover {
	background: #222222;
	border-color: #222222;
	transform: translateY(-2px);
}

/* ── Separador (ocupa 3 columnas) ── */
.hpc-divider {
	grid-column: 1 / -1;
	height: 1px;
	background: var(--hpc-border);
	margin: 0;
}

/* ── Celdas de especificación ── */
.hpc-spec-label {
	padding: 1.25rem 0.75rem 1.25rem 0;
	border-bottom: 1px solid var(--hpc-border);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.6;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--hpc-text);
}

.hpc-spec-label i {
	width: 20px;
	text-align: center;
	color: #f39c12;
	font-size: 1.1em;
	flex-shrink: 0;
}

.hpc-spec-value {
	padding: 1.25rem 0.75rem;
	border-bottom: 1px solid var(--hpc-border);
	text-align: center;
	color: var(--hpc-muted);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.6;
}

/* Resaltado de diferencias: se aplica a
   las 3 celdas individuales de la fila */
.hpc-hl {
	background: var(--hpc-highlight);
}

/* ─────────────────────────────────────
   TABLET & MOBILE (≤768 px)
   Diseño lado a lado para la comparativa
   ───────────────────────────────────── */
@media (max-width: 768px) {
	.hpc-compare-1 { grid-template-columns: 1fr; gap: 0; }
	.hpc-compare-2 { grid-template-columns: 1fr 1fr; gap: 0; }
	.hpc-compare-3 { grid-template-columns: 1fr 1fr 1fr; gap: 0; }

	.hpc-product-col-1 { grid-column: 1; padding: 0 5px 1rem; }
	.hpc-product-col-2 { grid-column: 2; padding: 0 5px 1rem; }
	.hpc-product-col-3 { grid-column: 3; padding: 0 5px 1rem; }

	.hpc-product-card {
		gap: 1rem;
		padding: 0;
	}

	.hpc-divider {
		grid-column: 1 / -1;
	}

	/* La etiqueta ocupa toda la fila y sirve de encabezado */
	.hpc-spec-label {
		grid-column: 1 / -1;
		text-align: center;
		background: #f5f5f5;
		margin-top: 10px;
		padding: 8px 10px;
		border-radius: 4px;
		font-size: 13px;
		font-weight: 700;
		border-bottom: none;
	}

	/* Los valores caen debajo en las columnas 1 y 2 */
	.hpc-spec-value {
		text-align: center;
		padding: 10px 5px;
		font-size: 13px;
		border-bottom: 1px solid var(--hpc-border);
	}

	.hpc-product-title {
		font-size: 16px;
	}

	.hpc-product-description {
		font-size: 12px;
	}

	.hpc-product-price {
		font-size: 20px;
	}

	.hpc-btn-buy {
		padding: 10px 14px;
		font-size: 13px;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* ── Impresión ── */
@media print {
	.hpc-btn-buy {
		display: none;
	}
}