/* ==========================================================================
   JN Add to Cart
   Todo el aspecto sale de custom properties, así que Elementor las
   sobreescribe por instancia sin necesidad de !important.
   ========================================================================== */

.jnac {
	--jnac-gap: 14px;
	--jnac-radius: 999px;
	--jnac-font-size: 16px;

	--jnac-qty-bg: #f1f2f3;
	--jnac-qty-border: transparent;
	--jnac-qty-color: #14181a;
	--jnac-qty-h: 52px;
	--jnac-qty-w: 132px;
	--jnac-qty-radius: 999px;
	--jnac-qty-btn: 20px;
	--jnac-qty-input-bg: transparent;
	--jnac-qty-input-border: transparent;
	--jnac-qty-input-bw: 0px;
	--jnac-qty-input-radius: 0px;
	--jnac-qty-input-w: auto;
	--jnac-qty-input-h: auto;

	--jnac-btn-bg: #101314;
	--jnac-btn-color: #ffffff;
	--jnac-btn-border: transparent;
	--jnac-btn-h: 52px;
	--jnac-btn-pad-x: 34px;
	--jnac-btn-radius: 999px;

	--jnac-pill-bg: #ffffff;
	--jnac-pill-color: #14181a;
	--jnac-pill-border: #d5d8db;
	--jnac-pill-radius: 999px;
	--jnac-pill-pad-y: 10px;
	--jnac-pill-pad-x: 18px;
	--jnac-pill-gap: 8px;
	--jnac-pill-sel-bg: #101314;
	--jnac-pill-sel-color: #ffffff;
	--jnac-pill-sel-border: #101314;
	--jnac-pill-min-h: 0px;

	--jnac-stock-color: #4d7c2f;
	--jnac-stock-low: #b45309;
	--jnac-stock-out: #b32d2e;
	--jnac-stock-label: #14181a;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--jnac-gap);
	font-size: var(--jnac-font-size);
}

.jnac *,
.jnac *::before,
.jnac *::after { box-sizing: border-box; }

.jnac .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Disponibilidad ---------- */

.jnac__stock {
	margin: 0;
	font-size: var(--jnac-stock-size, .95em);
	font-weight: var(--jnac-stock-weight, 500);
	line-height: 1.4;
	color: var(--jnac-stock-color);
}

.jnac__stock-label {
	color: var(--jnac-stock-label);
	font-weight: var(--jnac-stock-label-weight, 700);
	margin-right: 4px;
}

.jnac__stock--low { color: var(--jnac-stock-low); }
.jnac__stock--out { color: var(--jnac-stock-out); }
.jnac__stock--backorder { color: var(--jnac-stock-low); }

/* ---------- Atributos ---------- */

.jnac__attrs {
	display: flex;
	flex-direction: column;
	gap: var(--jnac-attr-gap, 14px);
}

.jnac__attr {
	display: flex;
	flex-direction: column;
	gap: var(--jnac-attr-label-gap, 8px);
}

.jnac__attr-label {
	font-size: var(--jnac-attr-label-size, .82em);
	font-weight: var(--jnac-attr-label-weight, 700);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--jnac-attr-label-color, #6b7280);
}

/* Por defecto cada opción mide lo que mide su texto y las que no caben
   pasan a la fila siguiente. El control de «opciones por fila» sustituye
   esto por una rejilla de columnas iguales, breakpoint a breakpoint. */
.jnac__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--jnac-pill-gap);
}

.jnac__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: 0;
	min-height: var(--jnac-pill-min-h);
	/* Nunca dos renglones. En modo automático la opción crece hasta caber;
	   con columnas fijas, si no cabe se recorta con puntos suspensivos y el
	   texto completo queda en el title. Para eso está el control de tamaño. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: var(--jnac-pill-pad, var(--jnac-pill-pad-y, 10px) var(--jnac-pill-pad-x, 18px));
	border: 1px solid var(--jnac-pill-border);
	border-radius: var(--jnac-pill-radius);
	background: var(--jnac-pill-bg);
	color: var(--jnac-pill-color);
	font: inherit;
	font-size: var(--jnac-pill-size, .95em);
	font-weight: var(--jnac-pill-weight, 500);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.jnac__pill:hover { border-color: var(--jnac-pill-sel-border); }

.jnac__pill.is-selected {
	background: var(--jnac-pill-sel-bg);
	color: var(--jnac-pill-sel-color);
	border-color: var(--jnac-pill-sel-border);
}

/* Sin stock: se deja pulsable a propósito, para que el cliente pueda verlo
   y el servidor explique por qué no se puede. Ocultarlo confunde más. */
.jnac__pill.is-agotada {
	opacity: .45;
	text-decoration: line-through;
}

.jnac__pill:focus-visible,
.jnac__select:focus-visible {
	outline: 2px solid var(--jnac-pill-sel-bg);
	outline-offset: 2px;
}

.jnac__select {
	font: inherit;
	font-size: var(--jnac-pill-size, .95em);
	padding: var(--jnac-select-pad, 12px 14px);
	border: 1px solid var(--jnac-pill-border);
	border-radius: var(--jnac-select-radius, 10px);
	background: var(--jnac-pill-bg);
	color: var(--jnac-pill-color);
	width: 100%;
	max-width: var(--jnac-select-width, 340px);
}

/* ---------- Acciones ---------- */

.jnac__acciones {
	display: flex;
	align-items: stretch;
	gap: var(--jnac-actions-gap, 12px);
	flex-wrap: wrap;
}

.jnac--layout-stack .jnac__acciones {
	flex-direction: column;
	align-items: stretch;
}

/* ---------- Cantidad ---------- */

.jnac__qty {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	width: var(--jnac-qty-w);
	height: var(--jnac-qty-h);
	padding: 0 6px;
	border: 1px solid var(--jnac-qty-border);
	border-radius: var(--jnac-qty-radius);
	background: var(--jnac-qty-bg);
	color: var(--jnac-qty-color);
}

.jnac--layout-stack .jnac__qty { width: 100%; }

.jnac__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--jnac-qty-h) - 14px);
	height: calc(var(--jnac-qty-h) - 14px);
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jnac-qty-btn-bg, transparent);
	color: inherit;
	cursor: pointer;
	transition: background-color .15s ease;
}

.jnac__qty-btn:hover { background: var(--jnac-qty-btn-hover, rgba(0, 0, 0, .07)); }

.jnac__qty-btn svg {
	width: var(--jnac-qty-btn);
	height: var(--jnac-qty-btn);
	display: block;
}

.jnac__qty-input {
	flex: 1 1 auto;
	width: var(--jnac-qty-input-w);
	min-width: 0;
	height: var(--jnac-qty-input-h);
	padding: 0;
	border: var(--jnac-qty-input-bw) solid var(--jnac-qty-input-border);
	border-radius: var(--jnac-qty-input-radius);
	background: var(--jnac-qty-input-bg);
	color: inherit;
	font: inherit;
	font-size: var(--jnac-qty-size, 1em);
	font-weight: var(--jnac-qty-weight, 600);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Las flechitas nativas del input number no se pueden estilizar: fuera. */
.jnac__qty-input::-webkit-outer-spin-button,
.jnac__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.jnac__qty-input:focus { outline: none; }
.jnac__qty:focus-within { box-shadow: 0 0 0 2px var(--jnac-btn-bg); }

/* ---------- Botones ---------- */

.jnac__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 1 1 auto;
	min-height: var(--jnac-btn-h);
	padding: 0 var(--jnac-btn-pad-x);
	border: 1px solid var(--jnac-btn-border);
	border-radius: var(--jnac-btn-radius);
	background: var(--jnac-btn-bg);
	color: var(--jnac-btn-color);
	font: inherit;
	font-size: var(--jnac-btn-size, 1em);
	font-weight: var(--jnac-btn-weight, 600);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.jnac__btn:hover { opacity: .92; }

.jnac__btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.jnac__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.jnac__buy {
	background: var(--jnac-buy-bg, transparent);
	color: var(--jnac-buy-color, #101314);
	border-color: var(--jnac-buy-border, #101314);
}

.jnac__add--externo { text-decoration: none; }

/* Todo el estado ocurre dentro del botón: el texto cambia ahí mismo, el
   giro y la marca de hecho aparecen dentro, y el ancho queda bloqueado desde
   el JavaScript para que no dé un salto al cambiar de palabra. */
.jnac__btn-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jnac__spinner,
.jnac__check {
	display: none;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

.jnac__spinner {
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: jnac-giro .7s linear infinite;
}

.jnac__btn.is-loading .jnac__spinner { display: block; }
.jnac__btn.is-done .jnac__check { display: block; }
.jnac__btn.is-done { background: var(--jnac-done-bg, var(--jnac-btn-bg)); color: var(--jnac-done-color, var(--jnac-btn-color)); }

@keyframes jnac-giro {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.jnac__spinner { animation-duration: 2s; }
	.jnac__btn, .jnac__pill, .jnac__qty-btn { transition: none; }
}

/* ---------- Aviso ---------- */

.jnac__aviso {
	display: none;
	margin: 0;
	font-size: var(--jnac-aviso-size, .9em);
	line-height: 1.4;
	color: var(--jnac-aviso-color, #b32d2e);
}

.jnac__aviso.is-visible { display: block; }

/* ---------- Marcador del editor ---------- */

.jnac-editor-placeholder {
	display: inline-block;
	padding: 12px 16px;
	border: 1px dashed #b4b5b7;
	border-radius: 4px;
	color: #6d7882;
	font-size: 12px;
	font-family: sans-serif;
	background: #f9fafa;
}