/*
 * Fany Clothes Personalización — estilos mínimos y neutros (layout y estados).
 * El tema puede sobrescribir las variables --nnp-* en :root o en .nnp.
 */
.nnp {
	--nnp-gap: 0.75rem;
	--nnp-radio: 6px;
	--nnp-borde: #d4d4d4;
	--nnp-texto: inherit;
	--nnp-suave: var(--nn-muted, #6b6b6b);
	--nnp-hover: #000;
	--nnp-fondo: transparent;
	--nnp-activo: #1a1a1a;
	--nnp-activo-texto: #fff;
	--nnp-error: #b3261e;
	--nnp-tam-talla: 3rem;
	display: grid;
	gap: calc(var(--nnp-gap) * 1.5);
	margin: 0 0 var(--nnp-gap);
	color: var(--nnp-texto);
}

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

.nnp__titulo {
	/* Título del bloque y, si lo hay, su enlace auxiliar en la misma línea, a la izquierda. */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	column-gap: 0;
	row-gap: 0.25em;
	width: 100%;
	padding: 0;
	margin: 0 0 calc(var(--nnp-gap) / 1.5);
	font-weight: 600;
}

/* Radios ocultos accesibles: se pulsa la etiqueta. */
.nnp__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.nnp-tallas,
.nnp-modos,
.nnp-parches {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--nnp-gap) / 1.5);
}

.nnp-talla,
.nnp-modo,
.nnp-parche {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	border: 1px solid var(--nnp-borde);
	border-radius: var(--nnp-radio);
	background: var(--nnp-fondo);
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.nnp-talla {
	min-width: var(--nnp-tam-talla);
	min-height: var(--nnp-tam-talla);
	padding: 0 0.6em;
	flex-direction: column;
	gap: 0;
	line-height: 1.1;
}

.nnp-modo {
	padding: 0.55em 0.9em;
}

.nnp-talla__suplemento,
.nnp-modo__precio,
.nnp-parche__precio {
	font-size: 0.75em;
	color: var(--nnp-suave);
}

.nnp-talla.is-active,
.nnp-modo.is-active,
.nnp-parche.is-active {
	border-color: var(--nnp-activo);
	background: var(--nnp-activo);
	color: var(--nnp-activo-texto);
}

.nnp-talla.is-active .nnp-talla__suplemento,
.nnp-modo.is-active .nnp-modo__precio,
.nnp-parche.is-active .nnp-parche__precio {
	color: inherit;
}

.nnp-talla:focus-within,
.nnp-modo:focus-within,
.nnp-parche:focus-within {
	outline: 2px solid var(--nnp-activo);
	outline-offset: 2px;
}

.nnp-parches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.nnp-parche {
	flex-direction: column;
	padding: 0.6em;
	text-align: center;
	font-size: 0.875em;
}

.nnp-parche__imagen {
	display: block;
	width: 64px;
	height: 64px;
}

.nnp-parche__imagen img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nnp-parche--ninguno .nnp-parche__imagen {
	border: 1px dashed var(--nnp-borde);
	border-radius: 50%;
}

.nnp__sub {
	margin-top: calc(var(--nnp-gap) / 1.5);
}

.nnp__sub[hidden] {
	display: none;
}

.nnp-campos {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: calc(var(--nnp-gap) / 1.5);
}

.nnp-campo {
	display: grid;
	gap: 0.3em;
	margin-bottom: calc(var(--nnp-gap) / 1.5);
}

.nnp-campo__etiqueta {
	font-size: 0.875em;
}

.nnp-campo__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55em 0.7em;
	border: 1px solid var(--nnp-borde);
	border-radius: var(--nnp-radio);
	font: inherit;
}

.nnp-campo--nombre .nnp-campo__input {
	text-transform: uppercase;
}

.nnp__ayuda,
.nnp__nota {
	margin: 0;
	font-size: 0.8125em;
	color: var(--nnp-suave);
}

.nnp-error {
	margin: 0.4em 0 0;
	font-size: 0.875em;
	color: var(--nnp-error);
}

.nnp-error:empty {
	display: none;
}

.nnp__bloque.is-error .nnp-talla,
.nnp__bloque.is-error .nnp-campo__input {
	border-color: var(--nnp-error);
}

.nnp-resumen {
	display: flex;
	gap: 0.4em;
	align-items: baseline;
	margin: 0;
	font-weight: 600;
}

.nnp-guia__abrir {
	/* Enlace auxiliar del encabezado: «TALLA · [regla] guía de tallas». */
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nnp-suave);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: lowercase;
	text-decoration: none;
	cursor: pointer;
}

.nnp-guia__abrir::before {
	content: "·";
	margin: 0 0.5em;
	color: var(--nnp-suave);
	text-decoration: none;
}

.nnp-guia__abrir span:not(.screen-reader-text) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.nnp-guia__abrir:hover,
.nnp-guia__abrir:focus-visible {
	color: var(--nnp-hover);
}

.nnp-guia__icono {
	width: 14px;
	height: 14px;
	flex: none;
}

.nnp-guia {
	--nnp-guia-fondo: #fff;
	--nnp-guia-velo: rgb(0 0 0 / 0.5);
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--nnp-guia-velo);
}

.nnp-guia[hidden] {
	display: none;
}

.nnp-guia__modal {
	display: flex;
	flex-direction: column;
	width: min(40rem, 100%);
	max-height: min(85vh, 100%);
	border-radius: var(--nnp-radio, 6px);
	background: var(--nnp-guia-fondo);
	color: #1a1a1a;
	box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}

.nnp-guia__modal:focus {
	outline: none;
}

.nnp-guia__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--nnp-borde, #d4d4d4);
}

.nnp-guia__titulo {
	margin: 0;
	font-size: 1.125rem;
}

.nnp-guia__cerrar {
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--nnp-borde, #d4d4d4);
	border-radius: 50%;
	background: none;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.nnp-guia__cerrar:focus-visible,
.nnp-guia__abrir:focus-visible {
	outline: 2px solid var(--nnp-activo, #1a1a1a);
	outline-offset: 2px;
}

.nnp-guia__contenido {
	overflow: auto;
	padding: 1rem 1.25rem 1.25rem;
	overscroll-behavior: contain;
}

.nnp-guia__tabla {
	width: 100%;
	margin: 0 0 1.25rem;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.nnp-guia__tabla th,
.nnp-guia__tabla td {
	padding: 0.45em 0.6em;
	border-bottom: 1px solid var(--nnp-borde, #d4d4d4);
	text-align: left;
}

.nnp-guia__aviso {
	font-size: 0.8125rem;
	color: var(--nnp-suave, #6b6b6b);
}

html.nnp-guia-abierta {
	overflow: hidden;
}

/* Tallas agotadas: visibles, tachadas y no seleccionables. */
.nnp-talla.is-agotada {
	cursor: not-allowed;
	opacity: 0.5;
	background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(0 0 0 / 0.05) 6px 7px);
}

.nnp-talla.is-agotada .nnp-talla__nombre {
	text-decoration: line-through;
}

.nnp-talla__estado {
	font-size: 0.6875em;
}

@media (prefers-reduced-motion: reduce) {
	.nnp-talla,
	.nnp-modo,
	.nnp-parche {
		transition: none;
	}
}