/* =====================================================================
 * Numbi Sport — Ficha de producto
 * ================================================================== */

.nbfi-acordeon,
.nbfi-distintivos {
	--nbfi-orange: #fe5000;
	--nbfi-ink: #14161c;
	--nbfi-soft: #5b6270;
	--nbfi-line: #e4e7ec;
	--nbfi-bg: #f6f7f9;
	--nbfi-radius: 12px;
	--nbfi-ease: cubic-bezier(.22, .61, .36, 1);

	box-sizing: border-box;
	font-family: inherit;
}

.nbfi-acordeon *,
.nbfi-distintivos * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * Maquetación de la ficha
 * ------------------------------------------------------------------ */

body.nbfi-page {
	--nbfi-orange: #fe5000;
	--nbfi-orange-dark: #d94400;
	/* Gris del botón apagado. Sólido a propósito: rebajando el naranja el
	 * texto blanco se deslavaba y el botón dejaba de parecer un botón. */
	--nbfi-boton-off: #9aa1ad;
	--nbfi-ink: #14161c;
	--nbfi-soft: #5b6270;
	--nbfi-line: #e4e7ec;
	--nbfi-bg: #f6f7f9;
	--nbfi-radius: 12px;
	--nbfi-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Divi deja una barra lateral vacía que se come un cuarto de pantalla */
body.nbfi-page #main-content .container {
	width: 100%;
	max-width: 1320px;
	padding-inline: 24px;
}

body.nbfi-page #main-content .container::before {
	display: none;
}

body.nbfi-page #left-area {
	width: 100%;
	padding: 0;
	float: none;
}

body.nbfi-page #sidebar {
	display: none;
}

body.nbfi-page #content-area {
	display: block;
}

/* Migas de pan */
body.nbfi-page .woocommerce-breadcrumb {
	margin: 0 0 22px;
	padding: 0;
	font-size: 13px;
	color: var(--nbfi-soft);
}

body.nbfi-page .woocommerce-breadcrumb a {
	color: var(--nbfi-soft);
	text-decoration: none;
}

body.nbfi-page .woocommerce-breadcrumb a:hover {
	color: var(--nbfi-orange);
}

/* Dos columnas: galería y resumen.
 *
 * OJO con el selector: en esta web hay TRES elementos `div.product`. Dos son
 * envoltorios de Divi (`.et_builder_inner_content.product`, que reciben las
 * clases de post_class()) y envuelven cabecera y pie; aplicarles la rejilla
 * descuadraba la página entera. El bueno es `div[id^="product-"]`, y dentro
 * Divi mete un `.clearfix` que es el que contiene galería y resumen. */
body.nbfi-page div[id^="product-"].product > .clearfix {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: start;
	gap: 46px;
}

body.nbfi-page div[id^="product-"].product > .clearfix::before,
body.nbfi-page div[id^="product-"].product > .clearfix::after {
	display: none;
}

body.nbfi-page .nbfi-galeria,
body.nbfi-page div[id^="product-"].product .woocommerce-product-gallery {
	grid-column: 1;
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
}

body.nbfi-page div[id^="product-"].product .summary {
	grid-column: 2;
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	position: sticky;
	top: 24px;
}

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

.nbfi-galeria {
	display: grid;
	gap: 12px;
}

.nbfi-galeria__principal {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--nbfi-line);
	border-radius: var(--nbfi-radius);
	background: var(--nbfi-bg);
}

.nbfi-galeria__zoom {
	display: block;
	line-height: 0;
	cursor: zoom-in;
}

.nbfi-galeria__principal img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: opacity .2s;
}

.nbfi-galeria.is-cambiando .nbfi-galeria__principal img {
	opacity: .35;
}

.nbfi-oferta {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--nbfi-orange);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	box-shadow: 0 8px 18px -8px rgba(254, 80, 0, .9);
}

.nbfi-galeria__minis {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nbfi-galeria__minis li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nbfi-mini {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--nbfi-line);
	border-radius: 10px;
	background: var(--nbfi-bg);
	overflow: hidden;
	cursor: pointer;
	line-height: 0;
	transition: border-color .18s, box-shadow .18s;
}

.nbfi-mini img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.nbfi-mini:hover {
	border-color: #c9ced7;
}

.nbfi-mini.is-active {
	border-color: var(--nbfi-orange);
	box-shadow: 0 0 0 2px rgba(254, 80, 0, .2);
}

/* ------------------------------------------------------------------ *
 * Resumen
 * ------------------------------------------------------------------ */

body.nbfi-page .product_title {
	margin: 0 0 10px;
	padding: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--nbfi-ink);
}

body.nbfi-page .summary .price,
body.nbfi-page div.product p.price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	font-size: 28px;
	font-weight: 800;
	color: var(--nbfi-ink);
	line-height: 1.2;
}

body.nbfi-page .summary .price del {
	font-size: 18px;
	font-weight: 500;
	color: #9aa1ad;
	opacity: 1;
}

body.nbfi-page .summary .price ins {
	background: none;
	text-decoration: none;
	color: var(--nbfi-orange);
}

body.nbfi-page .summary .price .woocommerce-price-suffix {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nbfi-soft);
	letter-spacing: .02em;
}

body.nbfi-page .woocommerce-product-details__short-description {
	margin: 0 0 22px;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--nbfi-line);
	font-size: 15px;
	line-height: 1.65;
	color: var(--nbfi-soft);
}

/* Variaciones */

body.nbfi-page table.variations {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
	border-collapse: collapse;
	display: block;
}

body.nbfi-page table.variations tbody,
body.nbfi-page table.variations tr {
	display: block;
	width: 100%;
}

body.nbfi-page table.variations th,
body.nbfi-page table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

body.nbfi-page table.variations th.label {
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 700;
	color: var(--nbfi-ink);
}

body.nbfi-page table.variations td.value {
	margin-bottom: 16px;
}

body.nbfi-page table.variations select {
	width: 100%;
	height: 50px;
	padding: 0 40px 0 16px;
	border: 1px solid var(--nbfi-line);
	border-radius: 10px;
	background-color: #fff;
	color: var(--nbfi-ink);
	font-size: 15px;
	transition: border-color .18s, box-shadow .18s;
}

body.nbfi-page table.variations select:focus {
	outline: none;
	border-color: var(--nbfi-orange);
	box-shadow: 0 0 0 3px rgba(254, 80, 0, .14);
}

body.nbfi-page .reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--nbfi-soft);
}

body.nbfi-page .woocommerce-variation-price {
	margin-bottom: 14px;
}

/* Guía de tallas */

.nbfi-guia {
	display: inline-block;
	margin: 0 0 14px;
	color: var(--nbfi-soft);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nbfi-guia:hover {
	color: var(--nbfi-orange);
}

/* Cantidad y comprar */

body.nbfi-page form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
}

/* El enlace es hijo directo de form.cart, que es flex: sin `flex-basis: 100%`
 * se coloca al lado del bloque de cantidad en vez de bajo el selector. */
body.nbfi-page form.cart > .nbfi-guia {
	flex: 1 0 100%;
	display: block;
	width: fit-content;
	margin: -4px 0 6px;
}

body.nbfi-page form.cart .quantity {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 56px;
	border: 1px solid var(--nbfi-line);
	border-radius: 10px;
	overflow: hidden;
}

body.nbfi-page form.cart .quantity input.qty {
	width: 74px;
	height: 54px;
	border: 0;
	background: none;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: var(--nbfi-ink);
}

body.nbfi-page form.cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: 10px;
	background: var(--nbfi-orange);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, transform .15s var(--nbfi-ease), box-shadow .2s;
	box-shadow: 0 12px 26px -14px rgba(254, 80, 0, .95);
}

/* El `color` es obligatorio: Divi pinta de azul (su color de acento) el texto
 * de todos los botones de WooCommerce al pasar por encima. */
body.nbfi-page form.cart button.single_add_to_cart_button:hover {
	background: var(--nbfi-orange-dark);
	color: var(--nbfi-ink);
	transform: translateY(-1px);
}

/* Sin talla elegida WooCommerce le pone `.disabled` (y a veces el atributo).
 * Se mantiene la forma, el tamaño y el naranja para que se siga leyendo como
 * el botón de comprar, pero apagado: sin relieve, sin sombra y con el cursor
 * avisando. La opacidad se fija porque WooCommerce baja los botones
 * deshabilitados a .5 y encima de este naranja quedaría ilegible. */
body.nbfi-page form.cart button.single_add_to_cart_button.disabled,
body.nbfi-page form.cart button.single_add_to_cart_button:disabled {
	/* Mismo botón: alto, ancho, radio, tipografía y espaciado se repiten aquí
	 * para que ni WooCommerce ni Divi puedan cambiar la forma al deshabilitarlo. */
	flex: 1 1 220px;
	height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;

	/* Lo único que cambia: el color, el relieve y el cursor. */
	background: var(--nbfi-boton-off);
	color: #fff;
	box-shadow: none;
	opacity: 1;
	cursor: not-allowed;
}

/* Ni se aclara ni se levanta al pasar por encima: no hay nada que pulsar. */
body.nbfi-page form.cart button.single_add_to_cart_button.disabled:hover,
body.nbfi-page form.cart button.single_add_to_cart_button:disabled:hover {
	background: var(--nbfi-boton-off);
	color: #fff;
	transform: none;
	box-shadow: none;
}

/* Ficha de datos (SKU, categorías, etiquetas) */

body.nbfi-page .product_meta {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--nbfi-line);
	font-size: 13px;
	line-height: 1.9;
	color: var(--nbfi-soft);
}

body.nbfi-page .product_meta > span {
	display: block;
}

body.nbfi-page .product_meta a {
	color: var(--nbfi-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.nbfi-page .product_meta a:hover {
	color: var(--nbfi-orange);
}

/* Valoración */

body.nbfi-page .summary .revi-widget,
body.nbfi-page .summary .woocommerce-product-rating {
	margin: 0 0 14px;
}

/* ------------------------------------------------------------------ *
 * Relacionados y opiniones
 * ------------------------------------------------------------------ */

body.nbfi-page .related > h2,
body.nbfi-page .upsells > h2 {
	margin: 0 0 26px;
	padding: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--nbfi-ink);
	text-align: center;
}

body.nbfi-page .related,
body.nbfi-page .upsells {
	margin-top: 60px;
	padding-top: 44px;
	border-top: 1px solid var(--nbfi-line);
}

body.nbfi-page [class*="revi-widget"] {
	margin-top: 50px;
}

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

@media (max-width: 980px) {
	body.nbfi-page div[id^="product-"].product > .clearfix {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/*
	 * Imprescindible: `grid-column: 2` en el resumen CREA una segunda columna
	 * implícita aunque la rejilla declare una sola. Sin devolver los dos
	 * bloques a la columna 1, en el móvil la galería se quedaba aplastada a la
	 * izquierda y el texto se le montaba encima.
	 */
	body.nbfi-page .nbfi-galeria,
	body.nbfi-page div[id^="product-"].product .woocommerce-product-gallery,
	body.nbfi-page div[id^="product-"].product .summary {
		grid-column: 1;
	}

	body.nbfi-page div[id^="product-"].product .summary {
		position: static;
	}
}

@media (max-width: 600px) {
	body.nbfi-page #main-content .container {
		padding-inline: 16px;
	}

	body.nbfi-page form.cart button.single_add_to_cart_button {
		flex: 1 1 100%;
	}

	.nbfi-galeria__minis {
		grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
	}
}

/* ------------------------------------------------------------------ *
 * Distintivos de venta
 * ------------------------------------------------------------------ */

.woocommerce div.product .nbfi-distintivos,
.nbfi-distintivos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .nbfi-distintivos li,
.nbfi-distintivos li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 13px;
	border: 1px solid var(--nbfi-line);
	border-radius: 999px;
	background: #fff;
	color: var(--nbfi-ink);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
}

.nbfi-distintivos li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nbfi-orange);
	flex: none;
}

/* ------------------------------------------------------------------ *
 * Acordeón
 * ------------------------------------------------------------------ */

.woocommerce div.product .nbfi-acordeon,
.nbfi-acordeon {
	clear: both;
	margin: 46px 0 0;
	border-top: 1px solid var(--nbfi-line);
}

.nbfi-item {
	border-bottom: 1px solid var(--nbfi-line);
}

.woocommerce div.product .nbfi-item__h,
.nbfi-item__h {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
}

.nbfi-item__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 4px;
	border: 0;
	background: none;
	color: var(--nbfi-ink);
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: color .18s;
}

.nbfi-item__btn:hover {
	color: var(--nbfi-orange);
}

/* Signo +/− dibujado con CSS, sin librería de iconos */
.nbfi-item__mas {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
}

.nbfi-item__mas::before,
.nbfi-item__mas::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .25s var(--nbfi-ease), opacity .25s;
}

.nbfi-item__mas::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.nbfi-item__btn[aria-expanded="true"] {
	color: var(--nbfi-orange);
}

.nbfi-item__btn[aria-expanded="true"] .nbfi-item__mas::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.nbfi-item__panel[hidden] {
	display: none;
}

.nbfi-item__cuerpo {
	padding: 0 4px 24px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--nbfi-soft);
}

.nbfi-item__cuerpo > *:first-child {
	margin-top: 0;
}

.nbfi-item__cuerpo > *:last-child {
	margin-bottom: 0;
}

/* Contenidos */

.woocommerce div.product .nbfi-composicion,
.nbfi-composicion {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.nbfi-composicion li {
	margin: 0;
	padding: 7px 13px;
	border-radius: 8px;
	background: var(--nbfi-bg);
	color: var(--nbfi-ink);
	font-size: 13.5px;
	font-weight: 700;
	list-style: none;
}

.nbfi-tecnologia {
	margin: 0 0 14px;
	padding: 0;
	color: var(--nbfi-ink);
}

.woocommerce div.product .nbfi-lista,
.nbfi-lista {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nbfi-lista li {
	position: relative;
	margin: 0;
	padding: 0 0 0 22px;
	list-style: none;
	line-height: 1.55;
}

.nbfi-lista li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nbfi-orange);
}

/* Tabla de la guía de tallas */

.nbfi-item__cuerpo table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
}

.nbfi-item__cuerpo table th,
.nbfi-item__cuerpo table td {
	padding: 10px 12px;
	border: 1px solid var(--nbfi-line);
	text-align: left;
}

.nbfi-item__cuerpo table th {
	background: var(--nbfi-bg);
	color: var(--nbfi-ink);
	font-weight: 700;
}

/* Guía de tallas en imagen (sustituye a la tabla cuando hay imagen subida) */

.nbfi-item__cuerpo .nbfi-tallas-img {
	display: block;
	box-shadow: none;
	border: 0;
}

.nbfi-item__cuerpo .nbfi-tallas-img img {
	display: block;
	width: 100%;
	max-width: 720px;
	height: auto;
	margin: 0;
	border: 1px solid var(--nbfi-line);
	border-radius: var(--nbfi-radius);
}

/* Preguntas frecuentes */

.nbfi-faq {
	display: grid;
	gap: 14px;
}

.nbfi-faq__item {
	padding: 15px 17px;
	border: 1px solid var(--nbfi-line);
	border-radius: var(--nbfi-radius);
	background: #fff;
}

.woocommerce div.product .nbfi-faq__p,
.nbfi-faq__p {
	margin: 0 0 6px;
	padding: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--nbfi-ink);
}

.nbfi-faq__r p {
	margin: 0;
	padding: 0;
	font-size: 14.5px;
}

.nbfi-faq__r p + p {
	margin-top: 8px;
}

@media (max-width: 600px) {
	.nbfi-item__btn {
		padding: 17px 2px;
		font-size: 15.5px;
	}

	.nbfi-item__cuerpo {
		padding: 0 2px 20px;
		font-size: 14.5px;
	}

	.nbfi-item__cuerpo table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nbfi-item__mas::before,
	.nbfi-item__mas::after {
		transition-duration: .01ms;
	}
}

/* WooCommerce imprime "GTIN:" aunque el producto no tenga: se oculta la fila
 * cuando el valor está vacío. */
body.nbfi-page .product_meta .gtin_wrapper:has(.gtin:empty) {
	display: none;
}

/* Hueco que deja el bloque de variación mientras no hay talla elegida */
body.nbfi-page .woocommerce-variation.single_variation:empty {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Tallas como botones
 * ------------------------------------------------------------------ */

/* El <select> sigue en el DOM para WooCommerce y para lectores de pantalla:
 * se oculta a la vista, no con display:none. */
body.nbfi-page table.variations select.nbfi-select-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.nbfi-tallas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nbfi-talla {
	min-width: 58px;
	padding: 12px 16px;
	border: 1px solid var(--nbfi-line);
	border-radius: 10px;
	background: #fff;
	color: var(--nbfi-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}

.nbfi-talla:hover:not(:disabled) {
	border-color: var(--nbfi-ink);
}

.nbfi-talla.is-active {
	border-color: var(--nbfi-orange);
	background: var(--nbfi-orange);
	color: #fff;
	box-shadow: 0 8px 18px -10px rgba(254, 80, 0, .95);
}

/* Agotada: se muestra tachada en vez de esconderla, para que se vea que
 * existe pero no está disponible. */
.nbfi-talla.is-agotada {
	color: #b6bcc6;
	background: var(--nbfi-bg);
	border-color: var(--nbfi-line);
	cursor: not-allowed;
	text-decoration: line-through;
}

.nbfi-talla:focus-visible {
	outline: 2px solid var(--nbfi-orange);
	outline-offset: 2px;
}

/* WooCommerce reserva sitio para el precio y la descripción de la variación
 * aunque estén vacíos: sin esto queda un hueco entre las tallas y el botón. */
body.nbfi-page .single_variation_wrap {
	margin-top: 4px;
}

body.nbfi-page .woocommerce-variation {
	margin: 0;
}

body.nbfi-page .woocommerce-variation-description:empty,
body.nbfi-page .woocommerce-variation-price:empty {
	display: none;
}

body.nbfi-page .woocommerce-variation-availability p.stock {
	margin: 0 0 8px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
}

body.nbfi-page p.stock.in-stock {
	color: #1c7a3a;
}

body.nbfi-page p.stock.out-of-stock {
	color: #b32d20;
}