/**
 * Configurador "Arma tu producto" — mobile-first.
 * Campos apilados, toque mínimo 44px, total y botón siempre visibles.
 */

.paradiso-campos {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-bottom: 16px;
}

.pc-seccion {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.pc-seccion legend {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 8px;
	padding: 0;
}

.pc-legend-nota {
	display: block;
	font-size: 12px;
	font-weight: 400;
	opacity: 0.7;
	margin-top: 2px;
}

.pc-grilla-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.pc-lista {
	display: grid;
	gap: 8px;
}

.pc-tarjeta {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	border: 1px solid #cfcfcc;
	border-radius: 8px;
	padding: 10px 14px;
	cursor: pointer;
	margin: 0;
	background: transparent;
}

.pc-tarjeta input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
}

.pc-tarjeta-label {
	flex: 1;
	font-size: 15px;
	line-height: 1.3;
}

.pc-tarjeta-sub {
	font-size: 13px;
	opacity: 0.75;
	text-align: right;
	white-space: nowrap;
}

.pc-tarjeta:has(input:checked) {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
	background: rgba(0, 0, 0, 0.04);
}

/* Medida personalizada: se revela al elegir "Personalizado" (CSS puro). */
.pc-custom {
	display: none;
	gap: 10px;
	margin-top: 10px;
}

form.cart:has(input[name="paradiso_preset"][value="custom"]:checked) .pc-custom {
	display: flex;
}

/* Productos sin presets: la medida libre es la única vía, siempre visible. */
.pc-custom--fijo {
	display: flex;
	margin-top: 0;
}

/* Secciones condicionales ocultas (ej: Diseño con empavonado liso). */
.pc-seccion[hidden] {
	display: none;
}

/* Chips compactos para selectores con muchas opciones cortas
   (ej: los 18 tamaños de stickers). */
.pc-chips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.pc-chips .pc-tarjeta {
	position: relative;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 2px;
	height: 44px;
	min-height: 44px;
	overflow: hidden;
}

.pc-chips .pc-tarjeta input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pc-chips .pc-tarjeta-label {
	flex: none;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
}

/* La opción "Medida personalizada" ocupa el ancho completo de la grilla. */
.pc-tarjeta--cotizar {
	grid-column: 1 / -1;
}

/* Tarjetas de opción CON PRECIO que compiten lado a lado en una grilla
   (tamaño, material, caras, cuerpos, tramos de cantidad — en cualquier
   producto y cualquier modo del motor: m², tramos, tabla, híbrido):
   layout de columna pareja por defecto — etiqueta arriba, precio abajo,
   centrados, altura mínima pareja. El radio se oculta (la selección se
   marca con el borde).
   Se activa solo con :has(.pc-tarjeta-sub) — apenas UNA tarjeta del
   grupo (grilla o chips) muestra precio, TODAS sus hermanas (incluida
   una sin precio, ej. plisado "No") adoptan el mismo layout para quedar
   a la misma altura. Es el comportamiento por defecto del componente:
   no requiere agregar ninguna clase al crear un producto nuevo — así
   nacen bien alineadas y no hay que corregirlas una a una.
   No incluye .pc-lista a propósito: ahí viven Diseño y Tiempo de
   producción, listas de una sola columna con frases largas ("Estándar ·
   3 a 5 días hábiles") donde el layout de fila (etiqueta izquierda,
   precio derecha) no tiene el problema de descuadre — cada opción ocupa
   su propia fila completa, no compite en altura con una vecina. */
:is(.pc-grilla-2, .pc-chips):has(.pc-tarjeta-sub) .pc-tarjeta {
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2px;
	text-align: center;
	padding: 10px 6px;
	min-height: 58px;
}

:is(.pc-grilla-2, .pc-chips):has(.pc-tarjeta-sub) .pc-tarjeta input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

:is(.pc-grilla-2, .pc-chips):has(.pc-tarjeta-sub) .pc-tarjeta-label {
	flex: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	white-space: normal;
}

:is(.pc-grilla-2, .pc-chips):has(.pc-tarjeta-sub) .pc-tarjeta-sub {
	text-align: center;
	white-space: normal;
	font-size: 12px;
}

/* Opción marcada explícitamente para ocupar el ancho completo en una fila
   normal (ej: "Medida personalizada" al final del pendón). NO se basa en
   :last-child para no afectar productos sin esta opción (roller, paloma,
   panel araña), donde cada tarjeta debe mantener su layout en columna. */
.pc-grilla-2:has(.pc-tarjeta-sub) .pc-tarjeta--ancho-completo,
.pc-chips:has(.pc-tarjeta-sub) .pc-tarjeta--ancho-completo {
	grid-column: 1 / -1;
	flex-direction: row;
	gap: 8px;
	height: auto;
	min-height: 48px;
}

/* Botón "Cotizar con nosotros" en la barra (reemplaza al carro cuando la
   medida es personalizada). */
.pc-boton-cotizar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 48px;
	padding: 0 18px;
	border-radius: 8px;
	background: #111;
	color: #fff;
	font-size: 15px;
	text-decoration: none;
}

.pc-boton-cotizar[hidden] {
	display: none;
}

.pc-campo {
	flex: 1;
	margin: 0;
}

.pc-campo label {
	display: block;
	font-size: 13px;
	margin-bottom: 4px;
}

.pc-campo input {
	width: 100%;
	min-height: 44px;
	font-size: 16px;
}

/* Tipos de laminado: se revelan al marcar "Sí". */
.pc-laminado-tipos {
	display: none;
	margin-top: 8px;
}

form.cart:has(input[name="paradiso_laminado_sino"][value="si"]:checked) .pc-laminado-tipos {
	display: grid;
}

.pc-stepper {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pc-stepper button {
	width: 48px;
	height: 48px;
	font-size: 20px;
	line-height: 1;
	border: 1px solid #cfcfcc;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

#paradiso_cantidad {
	width: 80px;
	min-height: 48px;
	text-align: center;
	font-size: 17px;
}

.pc-stepper-sufijo {
	font-size: 13px;
	opacity: 0.75;
}

.pc-aviso {
	font-size: 13px;
	background: #f4f4f2;
	border-radius: 6px;
	padding: 8px 12px;
	margin: 8px 0 0;
}

/* Barra de total: fija abajo en móvil, siempre visible. */
.paradiso-barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border-top: 1px solid #e2e2e0;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}

body.paradiso-con-barra {
	padding-bottom: 100px;
}

.pc-barra-info {
	flex: 1;
	min-width: 0;
}

.pc-total {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.pc-detalle {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	font-size: 12px;
	opacity: 0.8;
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
}

.pc-detalle li + li::before {
	content: "· ";
}

/* La cantidad nativa de Woo vive oculta dentro de la barra (se sincroniza
   con el stepper del paso 2). */
.paradiso-barra .quantity {
	display: none;
}

.paradiso-barra .single_add_to_cart_button {
	min-height: 48px;
	padding: 0 22px;
	font-size: 15px;
	flex: none;
}

/* Desktop: formulario a la izquierda, resumen pegajoso a la derecha. */
@media (min-width: 1024px) {
	form.cart:has(.paradiso-campos) {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}

	.paradiso-campos {
		grid-column: 1;
		margin-bottom: 0;
	}

	.paradiso-barra {
		position: sticky;
		top: 24px;
		grid-column: 2;
		flex-direction: column;
		align-items: stretch;
		border: 1px solid #e2e2e0;
		border-radius: 12px;
		padding: 18px;
	}

	body.paradiso-con-barra {
		padding-bottom: 0;
	}

	.pc-total {
		font-size: 24px;
	}

	.pc-detalle {
		display: block;
		font-size: 13px;
		margin-top: 6px;
	}

	.pc-detalle li + li::before {
		content: "";
	}

	.pc-detalle li {
		margin-top: 2px;
	}

	.paradiso-barra .single_add_to_cart_button {
		width: 100%;
		margin-top: 14px;
	}

	.pc-chips {
		grid-template-columns: repeat(6, 1fr);
	}

	.pc-boton-cotizar {
		width: 100%;
		flex: none;
	}
}