/**
 * Wpry Commerce Kit — Kits de producto (frontend, presentación en cascada).
 *
 * Las secciones del kit (packs, incluye, elecciones, complementos) se muestran
 * apiladas una bajo otra, cada una con su título e introducción. kits.js marca
 * las tarjetas elegidas, calcula el total en vivo y, al declarar .is-live,
 * revela el pie (unidades, total y botón nativo recolocado). Sin JavaScript las
 * secciones quedan apiladas y el formulario nativo permanece intacto.
 *
 * NOTA: esta hoja conserva !important en cada declaración (variante de
 * diagnóstico) para imponerse sobre el tema. Los importes comparten un carril
 * vertical (--wck-price-col + --wck-right) para alinear los totales.
 */

.wck-kit {
	/* Paleta y geometría */
	--wck-ink: #16181d !important;
	--wck-mut: #6b7280 !important;
	--wck-line: #e4e7ec !important;
	--wck-soft: #f6f7f9 !important;
	--wck-bg: #fff !important;
	--wck-acc: var(--wck-kit-accent, #16181d) !important;
	--wck-ok: #177245 !important;
	--wck-warn: #9a5b00 !important;
	--wck-r: 12px !important;

	/* Carril de precios: todo importe termina en la misma vertical.
	 * --wck-right = padding de tarjeta + borde; --wck-sb queda a 0 (en
	 * cascada no hay visor con barra de scroll). */
	--wck-pad: 0.75em !important;
	--wck-cpad: 0.65em !important;
	--wck-bw: 1px !important;
	--wck-sb: 0px !important;
	--wck-right: calc(var(--wck-pad) + var(--wck-cpad) + var(--wck-bw) + var(--wck-sb)) !important;
	--wck-left: calc(var(--wck-pad) + var(--wck-cpad) + var(--wck-bw)) !important;
	--wck-price-col: 6.8em !important;

	margin: 0 0 1em !important;
	color: var(--wck-ink) !important;
	font-size: 0.95em !important;
	line-height: 1.4 !important;

	/* Blindaje de ancho: los textos dinámicos (nombres de producto,
	 * elecciones, importes) JAMÁS pueden ensanchar el configurador.
	 * Los spans con nowrap propagan su anchura mínima intrínseca hacia
	 * arriba; si el tema coloca esta columna en un flex/grid sin
	 * min-width:0, toda la columna de compra se expandiría. min-width y
	 * max-width cortan la propagación y contain:inline-size la elimina
	 * de raíz en navegadores modernos (los demás quedan igual que hoy). */
	min-width: 0 !important;
	max-width: 100% !important;
	contain: inline-size !important;
}

.wck-kit *,
.wck-kit *::before,
.wck-kit *::after {
	box-sizing: border-box !important;
}

/* Texto solo para lectores de pantalla (utilidad propia del módulo). */
.wck-kit__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* El pie (cantidad, total y botón) aparece cuando kits.js declara .is-live.
 * Sin JavaScript, las secciones quedan apiladas con sus títulos e
 * introducciones y el formulario nativo de compra permanece intacto. */
.wck-kit__foot {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * Secciones en cascada: una bajo otra, cada una con su título e intro
 * ------------------------------------------------------------------ */

.wck-kit__group {
	min-inline-size: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.wck-kit__group + .wck-kit__group {
	margin-top: 1.85em !important;
}

.wck-kit__group legend {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 0 0 0.2em !important;
	padding: 0 !important;
	font-size: 1.08em !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--wck-ink) !important;
}

.wck-kit__sec-intro {
	margin: 0 0 0.9em !important;
	max-width: 62ch !important;
	font-size: 0.86em !important;
	line-height: 1.45 !important;
	color: var(--wck-mut) !important;
}

.wck-kit__required {
	color: var(--wck-warn) !important;
}

/* ------------------------------------------------------------------ *
 * Tarjetas en tres zonas: imagen | cuerpo | precio
 * ------------------------------------------------------------------ */

.wck-kit__grid {
	display: grid !important;
	gap: 0.6em !important;
}

.wck-kit--grid .wck-kit__grid {
	grid-template-columns: repeat(auto-fill, minmax(11.5em, 1fr)) !important;
}

.wck-kit--list .wck-kit__grid {
	/* minmax(0,1fr) y no 1fr a secas: 1fr = minmax(auto,1fr) y dejaría
	 * que un nombre largo sin cortes ensanche la columna entera. */
	grid-template-columns: minmax(0, 1fr) !important;
}

.wck-kit__card {
	position: relative !important;
	display: grid !important;
	border: var(--wck-bw) solid var(--wck-line) !important;
	border-radius: calc(var(--wck-r) - 4px) !important;
	background: var(--wck-bg) !important;
	color: inherit !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

label.wck-kit__card {
	cursor: pointer !important;
}

label.wck-kit__card:hover {
	border-color: #c9cdd4 !important;
}

/* Selección: el borde no cambia de grosor (cero saltos de layout). */
.wck-kit__card.is-selected {
	border-color: var(--wck-acc) !important;
	box-shadow: 0 0 0 1px var(--wck-acc) !important;
}

.wck-kit__card-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.wck-kit__card:focus-within {
	box-shadow: 0 0 0 2px var(--wck-acc) !important;
}

@supports selector(:has(a)) {
	.wck-kit__card:focus-within {
		box-shadow: none !important;
	}

	.wck-kit__card.is-selected {
		box-shadow: 0 0 0 1px var(--wck-acc) !important;
	}

	.wck-kit__card:has(.wck-kit__card-input:focus-visible) {
		box-shadow: 0 0 0 2px var(--wck-acc) !important;
	}
}

.wck-kit__card-media {
	position: relative !important;
	display: block !important;
	overflow: hidden !important;
	border-radius: 8px !important;
	background: var(--wck-soft) !important;
}

.wck-kit__card-media img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Marca circular sobre la imagen: acento al seleccionar; gris fija en
 * los componentes incluidos (tarjetas estáticas). */
.wck-kit__card-media::after {
	content: "" !important;
	position: absolute !important;
	top: 4px !important;
	left: 4px !important;
	width: 1.15em !important;
	height: 1.15em !important;
	border-radius: 50% !important;
	background: var(--wck-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat !important;
	box-shadow: 0 0 0 2px var(--wck-bg) !important;
	opacity: 0 !important;
	transform: scale(0.6) !important;
	transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.wck-kit__card.is-selected .wck-kit__card-media::after {
	opacity: 1 !important;
	transform: scale(1) !important;
}

.wck-kit__card--static .wck-kit__card-media::after {
	background-color: #b9bec7 !important;
	opacity: 1 !important;
	transform: scale(1) !important;
}

.wck-kit__card-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.15em !important;
	min-width: 0 !important;
}

.wck-kit__card-name {
	font-size: 0.92em !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

.wck-kit__card-desc {
	font-size: 0.78em !important;
	line-height: 1.35 !important;
	color: var(--wck-mut) !important;
}

.wck-kit__card-meta {
	display: flex !important;
	align-items: baseline !important;
	gap: 0.45em !important;
	margin-top: 0.1em !important;
	font-size: 0.74em !important;
	color: var(--wck-mut) !important;
}

.wck-kit__dot {
	color: var(--wck-line) !important;
}

.wck-kit__card-sku {
	letter-spacing: 0.02em !important;
}

.wck-kit__card-link {
	color: inherit !important;
	font-weight: 500 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	white-space: nowrap !important;
}

.wck-kit__card-link:hover {
	color: var(--wck-ink) !important;
}

.wck-kit__badge {
	display: inline-block !important;
	align-self: flex-start !important;
	margin: 0.1em 0 !important;
	padding: 0.18em 0.55em !important;
	border-radius: 999px !important;
	background: var(--wck-soft, #f6f7f9) !important;
	color: var(--wck-ink, #16181d) !important;
	font-size: 0.68em !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

/* Distintivo del producto principal (también en carrito/pedido). */
.wck-kit__badge--main {
	background: #16181d !important;
	color: #fff !important;
}

/* Contenido de un pack: artículos en línea separados por puntos. */
.wck-kit__pack-items {
	display: flex !important;
	flex-wrap: wrap !important;
	column-gap: 0.55em !important;
	row-gap: 0.1em !important;
	list-style: none !important;
	margin: 0.15em 0 0 !important;
	padding: 0 !important;
	font-size: 0.74em !important;
	color: var(--wck-mut) !important;
}

.wck-kit__pack-items li + li::before {
	content: "· " !important;
	color: var(--wck-line) !important;
}

.wck-kit__pack-items a {
	color: inherit !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.wck-kit__pack-items a:hover {
	color: var(--wck-ink) !important;
}

.wck-kit__pack-items del {
	color: var(--wck-mut) !important;
}

/* En lista los precios por artículo del pack sobran (van en la zona). */
.wck-kit--list .wck-kit__pack-items del {
	display: none !important;
}

/* --- Zona de precio: tachado encima, precio en el kit debajo --- */

.wck-kit__card-price {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: center !important;
	min-width: var(--wck-price-col) !important;
	text-align: right !important;
	font-variant-numeric: tabular-nums !important;
	line-height: 1.25 !important;
}

.wck-kit__price-was {
	font-size: 0.74em !important;
	color: var(--wck-mut) !important;
	text-decoration: line-through !important;
}

.wck-kit__price-was del {
	text-decoration: inherit !important;
}

.wck-kit__price-now {
	font-size: 0.98em !important;
	font-weight: 700 !important;
}

.wck-kit__price-now ins {
	background: none !important;
	text-decoration: none !important;
	color: var(--wck-ok) !important;
}

.wck-kit__price-plus {
	margin-right: 0.05em !important;
	font-size: 0.85em !important;
	font-weight: 600 !important;
	color: var(--wck-mut) !important;
}

.wck-kit__price-note {
	font-size: 0.68em !important;
	font-weight: 600 !important;
	color: var(--wck-ok) !important;
}

.wck-kit-included {
	display: inline-block !important;
	padding: 0.18em 0.6em !important;
	border-radius: 999px !important;
	background: #e8f4ec !important;
	color: #177245 !important;
	font-size: 0.72em !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.4 !important;
}

/* --- Presentación "list": imagen | cuerpo | carril de precio --- */

.wck-kit--list .wck-kit__card {
	grid-template-columns: 56px minmax(0, 1fr) auto !important;
	align-items: center !important;
	gap: 0.7em !important;
	padding: 0.55em var(--wck-cpad) !important;
}

.wck-kit--list .wck-kit__card-media {
	width: 56px !important;
	height: 56px !important;
}

.wck-kit--list .wck-kit__card-name,
.wck-kit--list .wck-kit__card-desc {
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}

.wck-kit--list .wck-kit__card-price {
	align-self: stretch !important;
	padding-left: 0.7em !important;
	border-left: 1px solid var(--wck-line) !important;
}

/* --- Presentación "grid": imagen arriba, precio al pie --- */

.wck-kit--grid .wck-kit__card {
	grid-template-columns: minmax(0, 1fr) !important; /* nunca 1fr a secas: ver nota arriba */
	padding: var(--wck-cpad) !important;
}

.wck-kit--grid .wck-kit__card-media {
	aspect-ratio: 4 / 3 !important;
	margin-bottom: 0.55em !important;
}

.wck-kit--grid .wck-kit__card-name {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	overflow: hidden !important;
}

.wck-kit--grid .wck-kit__card-desc {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	overflow: hidden !important;
}

.wck-kit--grid .wck-kit__card-price {
	margin-top: 0.55em !important;
	padding-top: 0.5em !important;
	border-top: 1px solid var(--wck-line) !important;
}

/* ------------------------------------------------------------------ *
 * Pie: unidades, total y botón de compra
 * ------------------------------------------------------------------ */

.wck-kit.is-live .wck-kit__foot {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) !important;
	grid-template-areas:
		"qty total"
		"cta cta" !important;
	gap: 0.55em 0.75em !important;
	align-items: stretch !important;
	margin-top: 2em !important;
}

.wck-kit__qty {
	grid-area: qty !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.25em !important;
}

.wck-kit__qty.is-empty {
	display: none !important;
}

.wck-kit__qty-label,
.wck-kit__total-label {
	font-size: 0.68em !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--wck-mut) !important;
}

.wck-kit__qty-slot {
	display: flex !important;
	align-items: center !important;
	height: 2.5em !important;
	border: var(--wck-bw) solid var(--wck-line) !important;
	border-radius: 999px !important;
	background: var(--wck-bg) !important;
	overflow: hidden !important;
}

.wck-kit__qty-slot .quantity {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	float: none !important;
}

.wck-kit__qty-slot .quantity .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
}

.wck-kit__qty-slot input.qty {
	width: 2.6em !important;
	padding: 0.2em 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: center !important;
	font-size: 0.95em !important;
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

.wck-kit__qty-slot input.qty::-webkit-inner-spin-button,
.wck-kit__qty-slot input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.wck-kit__qty-btn {
	width: 2.2em !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--wck-ink) !important;
	font-size: 1.05em !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, opacity 0.15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.wck-kit__qty-btn:hover:not(:disabled) {
	background: var(--wck-soft) !important;
}

.wck-kit__qty-btn:disabled {
	opacity: 0.35 !important;
	cursor: default !important;
}

.wck-kit__total {
	grid-area: total !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.25em !important;
	align-items: flex-end !important;
	width: 100% !important;
}

.wck-kit__total-box {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 2.5em !important;
	padding: 0.3em var(--wck-right) 0.3em var(--wck-left) !important;
	border: var(--wck-bw) solid var(--wck-line) !important;
	border-radius: 10px !important;
	background: var(--wck-soft) !important;
	text-align: right !important;
	overflow: hidden !important;
}

.wck-kit__total-amount,
.wck-kit__total-hint {
	max-width: 100% !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}

.wck-kit__total-amount {
	font-size: 1.25em !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	font-variant-numeric: tabular-nums !important;
}

.wck-kit__total-hint {
	font-size: 0.68em !important;
	color: var(--wck-mut) !important;
	font-variant-numeric: tabular-nums !important;
}

.wck-kit__cta {
	grid-area: cta !important;
}

.wck-kit__cta .single_add_to_cart_button {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Importe que cambia: pequeño pulso para guiar la mirada. */
.wck-kit .is-tick {
	animation: wck-tick 0.35s ease !important;
}

/* ------------------------------------------------------------------ *
 * Botón nativo con relleno de progreso
 * ------------------------------------------------------------------ */

form.cart .single_add_to_cart_button.wck-kit-progress {
	position: relative !important;
	overflow: hidden !important;
}

form.cart .single_add_to_cart_button.wck-kit-progress::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	width: var(--wck-progress, 0%) !important;
	background: rgba(255, 255, 255, 0.35) !important;
	transition: width 0.35s ease !important;
	pointer-events: none !important;
}

form.cart .single_add_to_cart_button.wck-kit-progress:disabled,
form.cart .single_add_to_cart_button.wck-kit-progress.disabled {
	cursor: not-allowed !important;
	opacity: 0.75 !important;
}

form.cart .single_add_to_cart_button.wck-kit-progress > * {
	position: relative !important;
}

/* ------------------------------------------------------------------ *
 * Animaciones
 * ------------------------------------------------------------------ */

@keyframes wck-tick {
	0% {
		opacity: 0.25;
		transform: translateY(-0.2em);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wck-kit *,
	.wck-kit *::before,
	.wck-kit *::after,
	form.cart .single_add_to_cart_button.wck-kit-progress::before {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 640px) {
	.wck-kit {
		--wck-price-col: 5.6em !important;
		--wck-cpad: 0.55em !important;
	}

	.wck-kit--list .wck-kit__card {
		grid-template-columns: 48px minmax(0, 1fr) auto !important;
		gap: 0.55em !important;
	}

	.wck-kit--list .wck-kit__card-media {
		width: 48px !important;
		height: 48px !important;
	}

	/* Packs: en móvil, una sola columna para que respiren. */
	.wck-kit .wck-kit__packs .wck-kit__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * Carrito / checkout: hijos del kit indentados
 * ------------------------------------------------------------------ */

tr.wck-kit-child td.product-name {
	padding-left: 2em !important;
}

tr.wck-kit-child td.product-name::before {
	content: "\21B3\00a0" !important;
	color: #888 !important;
}

.wck-kit-qty {
	display: inline-block !important;
	min-width: 2em !important;
	text-align: center !important;
}


/* Títulos combinados en carrito y checkout */
.wck-kit-name-pack {
	font-weight: 600;
}

.wck-kit-name-origin {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
}


/* ============================================================
 * Packs — tarjetas premium de altura uniforme + manifiesto en diálogo.
 *
 * Sustituye al antiguo desplegable en línea (<details>), que al abrirse
 * deformaba la tarjeta y rompía la comparación lateral. Ahora cada pack es
 * una tarjeta de silueta fija (imagen · nombre · reclamo · precio con ancla
 * y ahorro · extras), con el botón "Ver qué incluye" anclado abajo para que
 * todas igualen su altura. El manifiesto completo vive en un <dialog> modal
 * (kits.js lo abre); sin JavaScript queda oculto y la comparación esencial
 * sigue disponible en la lista de extras siempre visible.
 *
 * El contrato del radio de selección NO cambia: la tarjeta sigue siendo una
 * label.wck-kit__card con su input.wck-kit__card-input, de modo que el
 * marcado .is-selected y el cálculo del total en kits.js funcionan igual.
 * ============================================================ */

/* Rejilla: columnas iguales que se reparten el ancho; misma altura (stretch).
 * auto-fit + minmax cae a una sola columna en móvil sin reglas extra. */
.wck-kit .wck-kit__packs .wck-kit__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)) !important;
	gap: 0.85em !important;
	align-items: stretch !important;
}

/* Tarjeta de pack: columna flexible. El botón "ver" lleva margin-top:auto,
 * así se ancla abajo y el espacio sobrante se reparte arriba: todas las
 * tarjetas de una fila acaban con la misma altura, sin saltos al interactuar. */
.wck-kit .wck-kit__packs .wck-kit__pack-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.6em !important;
	padding: 0.85em !important;
	height: 100% !important;
	min-width: 0 !important;
}

/* Recomendado (no seleccionado): borde algo más marcado + cinta. El acento se
 * reserva al estado seleccionado, que siempre manda visualmente. */
.wck-kit .wck-kit__packs .wck-kit__pack-card.is-recommended {
	border-color: #b6bcc6 !important;
}

/* Cinta "Recomendado". */
.wck-kit__ribbon {
	position: absolute !important;
	top: 0.6em !important;
	right: 0.6em !important;
	z-index: 2 !important;
	margin: 0 !important;
	padding: 0.22em 0.62em !important;
	border-radius: 999px !important;
	background: var(--wck-acc) !important;
	color: #fff !important;
	font-size: 0.68em !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.4 !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
}

/* Imagen del pack (clase propia: no hereda del card-media genérico). */
.wck-kit__pack-media {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden !important;
	border-radius: 9px !important;
	background: transparent !important;
	aspect-ratio: 16 / 10 !important;
}

.wck-kit__pack-media img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
}

/* Bloque de información (todo menos el botón inferior). */
.wck-kit__pack-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.4em !important;
	min-width: 0 !important;
}

.wck-kit .wck-kit__packs .wck-kit__card-name {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	overflow: hidden !important;
	font-size: 1em !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

.wck-kit__pack-claim {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	overflow: hidden !important;
	font-size: 0.8em !important;
	line-height: 1.35 !important;
	color: var(--wck-mut) !important;
}

/* --- Precio del pack: ancla (tachado) · precio · píldora de ahorro --- *
 * Se abandona la columna lateral del card-price genérico por una lectura en
 * bloque alineada a la izquierda. Mayor especificidad para imponerse al
 * .wck-kit__card-price genérico (flex en columna, alineado a la derecha). */
.wck-kit .wck-kit__packs .wck-kit__pack-price {
	display: block !important;
	min-width: 0 !important;
	margin: 0.05em 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	text-align: left !important;
	line-height: 1.2 !important;
}

.wck-kit .wck-kit__packs .wck-kit__price-was {
	display: inline !important;
	margin-right: 0.45em !important;
	font-size: 0.82em !important;
	vertical-align: baseline !important;
}

.wck-kit .wck-kit__packs .wck-kit__price-now {
	display: inline !important;
	font-size: 1.35em !important;
	font-weight: 800 !important;
}

/* El precio del pack en tinta fuerte; el verde se reserva para el ahorro. */
.wck-kit .wck-kit__packs .wck-kit__price-now ins {
	color: var(--wck-ink) !important;
}

/* Nota de ahorro → píldora verde en su propia línea, ceñida al contenido. */
.wck-kit .wck-kit__packs .wck-kit__price-note {
	display: block !important;
	width: -moz-fit-content !important;
	width: fit-content !important;
	margin-top: 0.4em !important;
	padding: 0.16em 0.6em !important;
	border-radius: 999px !important;
	background: #e8f4ec !important;
	color: #177245 !important;
	font-size: 0.72em !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

/* --- Lista "incluye" siempre visible: núcleo de serie (✓) + extras (+) --- */
.wck-kit__pack-extras {
	list-style: none !important;
	margin: 0.1em 0 0 !important;
	padding: 0 !important;
	font-size: 0.8em !important;
	color: var(--wck-mut) !important;
}

.wck-kit__pack-extra {
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	line-height: 1.5 !important;
}

/* Marca: ✓ (de serie) o + (extra del pack). Ancho fijo para alinear nombres. */
.wck-kit__pack-extra-mark {
	display: inline-block !important;
	width: 1em !important;
	margin-right: 0.3em !important;
	text-align: center !important;
	font-weight: 800 !important;
}

.wck-kit__pack-extra-mark--incl {
	color: #177245 !important;
}

.wck-kit__pack-extra-mark--plus {
	color: var(--wck-acc) !important;
}

/* El núcleo de serie en tinta (lo que recibes siempre); los extras y el
 * "+N más" quedan en el tono atenuado de la lista. */
.wck-kit__pack-extra--incl {
	color: var(--wck-ink) !important;
}

.wck-kit__pack-extra--more {
	color: var(--wck-ink) !important;
	font-weight: 600 !important;
	opacity: 0.7 !important;
}

/* --- Botón "Ver qué incluye": ghost, anclado abajo (alturas iguales) --- */
.wck-kit__pack-more {
	margin: auto 0 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4em !important;
	width: 100% !important;
	padding: 0.55em 0.7em !important;
	border: 1px solid var(--wck-line) !important;
	border-radius: 8px !important;
	background: var(--wck-bg) !important;
	color: var(--wck-ink) !important;
	font-size: 0.8em !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background-color 0.15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.wck-kit__pack-more:hover {
	border-color: var(--wck-acc) !important;
	background: var(--wck-soft) !important;
}

.wck-kit__pack-more:focus-visible {
	outline: 2px solid var(--wck-acc) !important;
	outline-offset: 2px !important;
}

/* Chevron derecho (indica "se abre un detalle"). */
.wck-kit__pack-more-icon {
	flex: 0 0 auto !important;
	width: 6px !important;
	height: 6px !important;
	border-right: 2px solid currentColor !important;
	border-bottom: 2px solid currentColor !important;
	transform: rotate(-45deg) !important;
}

/* ------------------------------------------------------------------ *
 * Diálogo modal con el manifiesto completo del pack
 * ------------------------------------------------------------------ */

.wck-kit__pack-dialog {
	width: min(460px, calc(100vw - 2rem)) !important;
	max-width: calc(100vw - 2rem) !important;
	max-height: min(80vh, 640px) !important;
	margin: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: var(--wck-bg, #fff) !important;
	color: var(--wck-ink, #16181d) !important;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28) !important;
	overflow: hidden !important;
}

/* display solo cuando está abierto: cerrado conserva el display:none del UA. */
.wck-kit__pack-dialog[open] {
	display: flex !important;
	flex-direction: column !important;
}

.wck-kit__pack-dialog::backdrop {
	background: rgba(16, 18, 21, 0.5) !important;
}

.wck-kit__pack-dialog-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.5em !important;
	flex: 0 0 auto !important;
	padding: 0.9em 1em !important;
	border-bottom: 1px solid var(--wck-line, #e4e7ec) !important;
}

.wck-kit__pack-dialog-title {
	font-size: 1em !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

.wck-kit__pack-dialog-close {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1.9em !important;
	height: 1.9em !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wck-soft, #f6f7f9) !important;
	color: var(--wck-ink, #16181d) !important;
	font-size: 1.15em !important;
	line-height: 1 !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.wck-kit__pack-dialog-close:hover {
	background: #ececf0 !important;
}

.wck-kit__pack-dialog .wck-kit__pack-rows {
	flex: 1 1 auto !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0.7em 1em !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5em !important;
	overflow: auto !important;
}

/* Mini-tarjeta de cada artículo del manifiesto. */
.wck-kit__pack-row {
	display: grid !important;
	grid-template-columns: 44px minmax(0, 1fr) auto !important;
	align-items: center !important;
	gap: 0.7em !important;
	margin: 0 !important;
	padding: 0.5em 0.6em !important;
	border: 1px solid var(--wck-line, #e4e7ec) !important;
	border-radius: 9px !important;
	background: var(--wck-bg, #fff) !important;
	min-width: 0 !important;
}

.wck-kit__pack-row-media {
	display: block !important;
}

.wck-kit__pack-row-media img {
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	object-fit: cover !important;
	border-radius: 6px !important;
}

.wck-kit__pack-row-body {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.2em !important;
	min-width: 0 !important;
}

.wck-kit__pack-row-name {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	overflow: hidden !important;
	font-size: 0.85em !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

a.wck-kit__pack-row-name {
	color: inherit !important;
	text-decoration: none !important;
}

a.wck-kit__pack-row-name:hover {
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.wck-kit__pack-row .wck-kit__badge {
	max-width: 100% !important;
}

.wck-kit__pack-row-price {
	font-size: 0.8em !important;
	color: var(--wck-mut, #6b7280) !important;
	white-space: nowrap !important;
}

.wck-kit__pack-row-price del {
	color: inherit !important;
}

/* Producto principal: primera fila destacada, sin precio propio. */
.wck-kit__pack-row--parent {
	grid-template-columns: 44px minmax(0, 1fr) !important;
	border-color: #c9cdd4 !important;
	background: var(--wck-soft, #f6f7f9) !important;
}

.wck-kit__pack-dialog-foot {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 0.4em 0.8em !important;
	padding: 0.8em 1em !important;
	border-top: 1px solid var(--wck-line, #e4e7ec) !important;
	background: var(--wck-soft, #f6f7f9) !important;
}

.wck-kit__pack-dialog-price {
	display: flex !important;
	align-items: baseline !important;
	gap: 0.45em !important;
	font-variant-numeric: tabular-nums !important;
}

.wck-kit__pack-dialog-was {
	font-size: 0.85em !important;
	color: var(--wck-mut, #6b7280) !important;
}

.wck-kit__pack-dialog-now {
	font-size: 1.2em !important;
	font-weight: 800 !important;
}

.wck-kit__pack-dialog-save {
	padding: 0.16em 0.6em !important;
	border-radius: 999px !important;
	background: #e8f4ec !important;
	color: #177245 !important;
	font-size: 0.74em !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

/* Móvil: el diálogo ocupa casi toda la pantalla y puede crecer más alto. */
@media (max-width: 640px) {
	.wck-kit__pack-dialog {
		width: calc(100vw - 1.5rem) !important;
		max-height: 88vh !important;
	}

	.wck-kit .wck-kit__packs .wck-kit__pack-card {
		padding: 0.75em !important;
	}
}
/* --------------------------------------------------------------------------
 * Eje de combinaciones (hardware): selector de enrollador y referencia (SKU)
 * del kit en el pie. El fieldset reutiliza .wck-kit__group/.wck-kit__grid;
 * aquí solo se afinan el distintivo de SKU y la fila de referencia.
 * ----------------------------------------------------------------------- */

/* Distintivo de SKU dentro de la tarjeta de cada combinación. */
.wck-kit__badge--sku {
	background: var(--wck-ink, #16181d) !important;
	color: #fff !important;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
	letter-spacing: 0.02em !important;
}

/* Fila "Referencia: SKU" en el pie, alineada a la derecha bajo el botón. */
.wck-kit__sku {
	display: flex !important;
	align-items: baseline !important;
	justify-content: flex-end !important;
	gap: 0.45em !important;
	margin-top: 0.5em !important;
	padding-top: 0.5em !important;
	border-top: var(--wck-bw, 1px) solid var(--wck-line, #e4e7ec) !important;
	font-size: 0.82em !important;
}

.wck-kit__sku-label {
	color: var(--wck-mut, #6b7280) !important;
	font-weight: 600 !important;
}

.wck-kit__sku-value {
	color: var(--wck-ink, #16181d) !important;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
}