/* NX::Merchant Store Pro — ficha de producto (Fase 4) */

.nx-producto-single, .nx-categoria-archivo {
	max-width: 1600px;
	margin: 0 auto;
	padding: 4px;
}

.nx-producto-grid {
	display: grid;
	grid-template-columns: minmax(540px, 1fr) 1fr;
	gap: 48px;
	align-items: start;
}

@media (max-width: 960px) {
	.nx-producto-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Galería ---------- */

.nx-producto-galeria {
	min-width: 0;
}

.nx-galeria-principal {
	position: relative;
	width: 100%;
	min-width: 540px;
	max-width: 100%;
	/*aspect-ratio: 3 / 2;*/
	border-radius: 12px;
	overflow: hidden;
	margin-top:30px;
}

@media (max-width: 600px) {
	.nx-galeria-principal {
		min-width: 0;
	}
}

.nx-galeria-principal img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	cursor: zoom-in;
}

.nx-galeria-sin-imagen img {
	object-fit: contain;
	padding: 40px;
}

.nx-galeria-zoom {
	position: absolute;
	bottom: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nx-galeria-zoom:hover {
	background: #fff;
}

/* Thumbs con slider horizontal */

.nx-galeria-thumbs-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.nx-galeria-thumbs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	padding: 4px 2px;
	margin: 0;
	list-style: none;
	flex: 1;
	scrollbar-width: thin;
}

.nx-galeria-thumbs::-webkit-scrollbar {
	height: 6px;
}

.nx-galeria-thumbs::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 999px;
}

.nx-galeria-thumb-item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.nx-galeria-thumb {
	position: relative;
	width: 100px;
	height: 100px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: #f3f3f3;
}

.nx-galeria-thumb.is-activo {
	border-color: #2c7a4b;
}

.nx-galeria-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nx-galeria-thumb-zoom {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nx-galeria-thumbs-nav {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
}

.nx-galeria-thumbs-nav:hover {
	background: #f3f3f3;
}

/* ---------- Lightbox ---------- */

.nx-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nx-lightbox[hidden] {
	display: none;
}

.nx-lightbox-fondo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.82);
}

.nx-lightbox-inner {
	position: relative;
	z-index: 1;
	max-width: 950px;
	max-height: 90vh;
	width: 90%;
}

.nx-lightbox-inner img {
	display: block;
	width: 100%;
	max-width: 950px;
	max-height: 90vh;
	object-fit: contain;
	margin: 0 auto;
	border-radius: 8px;
	background: #fff;
}

.nx-lightbox-cerrar {
	position: absolute;
	top: -42px;
	right: 0;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	font-size: 20px;
	cursor: pointer;
}

/* ---------- Datos del producto ---------- */

.nx-producto-titulo {
	margin: 0 0 8px;
}
h1.nx-producto-titulo {
font-size:38px !important;
color: #246D61;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.nx-producto-sku {
	color: #246D61;
	font-size: 0.9rem;
	margin: 0 0 14px;
	display: inline-flex;
	background: rgba(233, 240, 2, 0.09);
	padding: 3px 14px;
	border-radius: 999px;
	border: 2px solid #ffef6c;
}

.nx-producto-precio {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
}

.nx-precio-anterior {
	text-decoration: line-through;
	color: #999;
	font-size: 1rem;
}

.nx-precio-actual {
	font-size: 1.6rem;
	font-weight: 700;
}

.nx-precio-oferta {
	color: #b32d2e;
}

.nx-badge-oferta {
	background: #b32d2e;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
}

.nx-oferta-cuenta-atras {
	font-size: 0.9rem;
	color: #b32d2e;
	margin: -8px 0 16px;
}

.nx-oferta-cuenta-atras strong {
	font-variant-numeric: tabular-nums;
}

.nx-producto-disponibilidad {
	margin-bottom: 18px;
}

/* NX v2.9 — Fase 8b: selector de variantes en la ficha de producto. */
.nx-variantes-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 18px;
}

.nx-variante-campo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nx-variante-campo label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #666;
}

.nx-variante-campo select {
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	min-width: 140px;
}

.nx-variante-no-disponible {
	width: 100%;
	color: #b32d2e;
	font-size: 0.9rem;
	margin: 0;
}

.nx-btn-pedido.is-disabled,
.nx-btn-pedido:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.nx-pedido-modal-variante {
	margin: -8px 0 14px;
	font-size: 0.9rem;
	color: #555;
	font-weight: 600;
}

.nx-stock {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
}

.nx-stock-disponible {
	color: #2c7a4b;
	background: #eaf7ee;
}

.nx-stock-agotado {
	color: #b32d2e;
	background: #fbeaea;
}

.nx-btn-pedido {
	display: inline-block;
	background: #2F756A;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 28px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 8px;
}

.nx-btn-pedido:hover {
	background: #0c463c;
	color:#fff;
}

.nx-pedido-placeholder-msg {
	color: #8a6d00;
	background: #fff8e1;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 0.9rem;
	margin: 0 0 20px;
}

.nx-producto-datos{
	padding-left:20px;
	border-left: 1px dashed #ccc;
}

.nx-producto-bloque {
	margin-top: 40px;
}
.nx-producto-comentario{
	padding: 10px;
	background-color: rgba(232, 230, 229, 0.26);
	border-radius: 8px;
	width: fit-content;
	border-left: 4px solid #8dd5e6;
}

.nx-producto-bloque h2 {
	font-size: 1.6rem;
	margin-bottom: 10px;
}

.nx-producto-medidas {
	margin: 0;
	padding-left: 18px;
}

.nx-producto-taxonomia {
	margin: 6px 0;
	font-size: 0.95rem;
}

.nx-producto-catalogo {
	margin-top: 16px;
}

/* Badge-botón de descarga de catálogo PDF (petición 5). */
.nx-badge-catalogo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fbeceb;
	color: #b3261e;
	border: 1px solid #f3c6c3;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.nx-badge-catalogo svg {
	flex-shrink: 0;
}

.nx-badge-catalogo:hover,
.nx-badge-catalogo:focus {
	background: #b3261e;
	color: #fff;
	text-decoration: none;
}

/* ---------- Descripción ---------- */

.nx-producto-descripcion {
	max-width: 900px;
	margin-top: 20px;
	padding-top: 32px;
	border: 1px solid #e5e5e5;
	background: #f9f8f7;
	padding: 1rem;
	border-radius: 8px;
}

.nx-producto-descripcion h2 {
	font-size: 1.6rem;
	margin-bottom: 12px;
}

.nx-producto-descripcion-contenido {
	line-height: 1.7;
}

.nx-producto-descripcion-contenido p {
	margin: 0 0 1em;
}

/* ---------- Relacionados / más vendidos ---------- */

.nx-producto-relacionados,
.nx-producto-mas-vendidos {
	margin-top: 30px;
	padding: 20px;
  background-color: #f9f9f9;
	border-radius:14px;
}

.nx-producto-relacionados h2,
.nx-producto-mas-vendidos h2 {
	font-size: 1.6rem;
	margin-bottom: 14px;
}

.nx-productos-fila {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	padding-bottom: 8px;
}

.nx-producto-mini-card {
	flex: 0 0 180px;
	display: block;
	text-decoration: none;
	color: #232323;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #d7d7d7;
	font-weight: 600;
	transition: box-shadow 0.2s ease;
}

.nx-producto-mini-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.nx-producto-mini-card img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.nx-producto-mini-titulo {
	display: block;
	padding: 10px 12px;
	font-size: 0.9rem;
}

/* ---------- Modal de pedido (Fase 5, arranque) ---------- */

.nx-pedido-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nx-pedido-modal[hidden] {
	display: none;
}

.nx-pedido-modal-fondo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.nx-pedido-modal-inner {
	position: relative;
	z-index: 1;
	width: 90%;
	max-width: 640px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
	padding: 1.500rem;
}
@media (max-width:648px){
	.nx-pedido-modal-inner {
		padding: 1.150rem;
	}
}

.nx-pedido-modal-inner h2 {
	margin: 0 0 4px;
	font-size: 1.6rem;
}

.nx-pedido-modal-producto {
	color: #1a1a1a;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
}

/* v2.12 — Cabecera con miniatura del producto (petición 4). */
.nx-pedido-modal-cabecera-producto {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 18px;
}

.nx-pedido-modal-thumb {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 10px;
	background: #f3f3f3;
	flex-shrink: 0;
}

.nx-pedido-modal-cabecera-texto {
	flex: 1;
	min-width: 0;
}

.nx-pedido-modal-cabecera-texto .nx-pedido-modal-producto,
.nx-pedido-modal-cabecera-texto .nx-pedido-modal-precio {
	margin-bottom: 6px;
}

@media (max-width: 560px) {
	.nx-pedido-modal-thumb {
		width: 96px;
		height: 96px;
	}
}

.nx-pedido-modal-precio {
	color: #2c7a4b;
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 16px;
}

.nx-pedido-modal-precio:empty {
	display: none;
}

.nx-pedido-modal-cerrar {
	position: absolute;
	top: 8px;
	right: 7px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: #d91313;
	font-size: 1.6rem;
	cursor: pointer;
	color: #fff;
	display: flex;
	align-content: baseline;
	align-items: baseline;
	justify-content: center;
	line-height: 26px;
}

.nx-pedido-campo {
	margin-bottom: 14px;
}

.nx-pedido-mensaje-contador {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #888;
	text-align: right;
}

/* v2.11 — Nombre y Apellido en la misma fila en escritorio, en columna
   en pantallas pequeñas (petición 3). */
.nx-pedido-campo-fila {
	display: flex;
	gap: 12px;
	margin-bottom: 0;
	align-items: flex-end;
}

.nx-pedido-campo-fila .nx-pedido-campo-mitad {
	flex: 1 1 0;
	min-width: 0;
}

/* v2.12 — Cuando el switch de WhatsApp comparte fila con el Teléfono
   (petición 2), se centra verticalmente para casar con la altura del
   input de al lado en vez de quedar pegado arriba. */
.nx-pedido-campo-fila .nx-pedido-switch-campo-compacta {
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

.nx-pedido-campo-fila .nx-pedido-switch-campo-compacta .nx-pedido-switch-label {
	width: 100%;
}

@media (max-width: 560px) {
	.nx-pedido-campo-fila {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
	}

	.nx-pedido-campo-fila .nx-pedido-switch-campo-compacta {
		margin-top: 14px;
	}
}

/* v2.11 — Interruptor tipo "pill" reutilizado en varios campos del
   formulario de pedido (WhatsApp, horario de contacto, texto legal). */
.nx-pedido-switch-campo {
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 12px 14px;
}

.nx-pedido-switch-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	cursor: pointer;
	font-weight: normal;
	margin: 0;
}

.nx-pedido-switch-texto {
	font-size: 0.88rem;
	color: #333;
	line-height: 1.4;
}

.nx-pedido-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 26px;
	flex-shrink: 0;
}

.nx-pedido-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.nx-pedido-switch-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: #ccc;
	border-radius: 999px;
	transition: background 0.2s ease;
}

.nx-pedido-switch-slider::before {
	content: "";
	position: absolute;
	height: 20px;
	width: 20px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease;
}

.nx-pedido-switch input:checked + .nx-pedido-switch-slider {
	background: #2c7a4b;
}

.nx-pedido-switch input:checked + .nx-pedido-switch-slider::before {
	transform: translateX(20px);
}

.nx-pedido-switch input:focus-visible + .nx-pedido-switch-slider {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* El interruptor legal necesita más aire porque el texto suele ser largo. */
.nx-pedido-switch-label-legal {
	align-items: flex-start;
}

.nx-pedido-switch-label-legal .nx-pedido-switch-texto {
	font-size: 0.82rem;
	color: #555;
}

.nx-pedido-switch-label-legal .nx-pedido-switch-texto a {
	color: #2c7a4b;
}

.nx-pedido-switch-label-legal .nx-pedido-switch {
	margin-top: 2px;
}

/* v2.11 — Fecha y franja horaria que aparecen al activar "Quiero que me
   contacten a este horario" (petición 4). */
.nx-pedido-horario-extra {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #ddd;
}

.nx-pedido-campo-titulo-radio {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.nx-pedido-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: normal;
	font-size: 0.88rem;
	color: #333;
	margin-bottom: 6px;
	cursor: pointer;
}

.nx-pedido-radio input {
	flex-shrink: 0;
}

/* v2.12 — Tarjetas seleccionables para la franja horaria (petición 3),
   en lugar de radios sueltos que quedaban desalineados con su texto. */
.nx-pedido-franjas {
	display: flex;
	gap: 10px;
}

.nx-pedido-franja {
	position: relative;
	flex: 1;
	cursor: pointer;
}

.nx-pedido-franja-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.nx-pedido-franja-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 8px;
	border: 2px solid #e2e2e2;
	border-radius: 10px;
	background: #fff;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.nx-pedido-franja-input:checked + .nx-pedido-franja-card {
	border-color: #2c7a4b;
	background: #eaf7ee;
}

.nx-pedido-franja-input:focus-visible + .nx-pedido-franja-card {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.nx-pedido-franja-icono {
	pointer-events: none;
}

.nx-pedido-franja-texto {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: #333;
	line-height: 1.35;
}

.nx-pedido-franja-texto small {
	display: block;
	font-weight: 400;
	color: #777;
	font-size: 0.75rem;
}

.nx-pedido-campo label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.nx-pedido-campo input,
.nx-pedido-campo select,
.nx-pedido-campo textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 0.95rem;
}

.nx-pedido-form-aviso {
	font-size: 0.9rem;
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 14px;
}

.nx-pedido-form-aviso-ok {
	color: #2c7a4b;
	background: #eaf7ee;
}

.nx-pedido-form-aviso-error {
	color: #b32d2e;
	background: #fbeaea;
}

.nx-pedido-campo-nota {
	font-size: 0.78rem;
color: #d70d0d;
margin: 8px 0 14px;
background-color: rgba(255, 107, 70, 0.04);
border-radius: 6px;
padding: 12px;
border: 2px solid rgba(225, 49, 4, 0.37);
border-radius: 6px;
}

/* --- Paso 2 del pedido: verificación del PIN por email (v1.9) --- */

#nx-pedido-pin-info {
	margin: -4px 0 14px;
}

.nx-pedido-campo input#nx-pedido-pin {
	letter-spacing: 4px;
	font-size: 1.3rem;
	text-align: center;
}

.nx-login-btn-secundario {
	display: block;
	width: 100%;
	text-align: center;
	background: none;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 0.9rem;
	color: #444;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	margin-top: 8px;
}

.nx-login-btn-secundario:hover {
	background: #f5f5f5;
}

/* --- Paso 3 del pedido: confirmación final (v1.10) --- */

.nx-pedido-confirmacion {
	text-align: center;
}

.nx-pedido-confirmacion-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #eaf7ee;
	color: #2c7a4b;
}

.nx-pedido-confirmacion-mensaje {
	font-size: 1.05rem;
	font-weight: 600;
	color: #2c7a4b;
	margin: 0 0 18px;
}

.nx-pedido-confirmacion-datos {
	text-align: left;
	background: #f7f7f7;
	border-radius: 10px;
	padding: 14px 18px;
	margin: 0 0 20px;
}

.nx-pedido-confirmacion-fila {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid #e5e5e5;
}

.nx-pedido-confirmacion-fila:last-child {
	border-bottom: none;
}

.nx-pedido-confirmacion-fila dt {
	font-size: 0.82rem;
	font-weight: 600;
	color: #666;
	flex-shrink: 0;
}

.nx-pedido-confirmacion-fila dd {
	margin: 0;
	font-size: 0.9rem;
	text-align: right;
	word-break: break-word;
}

#nx-pedido-confirmacion-cerrar {
	width: 100%;
}