/* =====================================================================
 * Numbi Sport — Tarjeta de producto
 * Se aplica a cualquier bucle de WooCommerce, también dentro de Divi.
 * ================================================================== */

.woocommerce ul.products li.product .nbp-card,
ul.products li.product .nbp-card {
	--nbp-orange: #fe5000;
	--nbp-orange-dark: #d94400;
	--nbp-ink: #14161c;
	--nbp-soft: #6b7280;
	--nbp-line: #e6e8ec;
	--nbp-bg: #f6f7f9;
	--nbp-ease: cubic-bezier(.22, .61, .36, 1);

	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--nbp-line);
	border-radius: 14px;
	background: #fff;
	transition: border-color .22s, box-shadow .22s, transform .22s var(--nbp-ease);
}

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

.nbp-card:hover {
	border-color: #d8dbe1;
	box-shadow: 0 22px 44px -28px rgba(20, 22, 28, .55);
	transform: translateY(-3px);
}

/* Que todas las tarjetas de una fila midan lo mismo */
ul.products.nbp-grid li.product.nbp-item {
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------------------------------ *
 * Imagen
 * ------------------------------------------------------------------ */

/* Divi y WooCommerce estilan `ul.products li.product a img` con (0,3,2);
 * hay que encadenar nuestras clases para ganar sin !important, o las fotos
 * se apilan en vez de superponerse. */
ul.products.nbp-grid li.product.nbp-item .nbp-card .nbp-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--nbp-bg);
	line-height: 0;
}

ul.products.nbp-grid li.product.nbp-item .nbp-card .nbp-media img,
ul.products.nbp-grid li.product.nbp-item .nbp-card .nbp-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: opacity .35s var(--nbp-ease), transform .6s var(--nbp-ease);
}

/* Sobra la imagen que mete Divi por su cuenta */
ul.products.nbp-grid li.product.nbp-item > .nbp-card > .et_shop_image {
	display: none;
}

ul.products.nbp-grid li.nbp-item .nbp-card .nbp-img--hover {
	opacity: 0;
}

.nbp-card:hover .nbp-img--main {
	transform: scale(1.04);
}

/* Solo se cambia de foto si de verdad hay una segunda */
ul.products.nbp-grid li.nbp-item .nbp-card:hover .nbp-img--hover {
	opacity: 1;
}

.nbp-card:hover .nbp-img--hover + .nbp-img--main,
.nbp-card .nbp-img--hover ~ .nbp-img--main {
	/* el orden real lo fija el marcado: principal primero, hover después */
}

ul.products.nbp-grid li.nbp-item .nbp-card:hover .nbp-media:has(.nbp-img--hover) .nbp-img--main {
	opacity: 0;
}

/* Distintivos */

.nbp-card .nbp-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.nbp-card .nbp-badge {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.5;
	color: #fff;
	white-space: nowrap;
}

.nbp-card .nbp-badge--oferta {
	background: var(--nbp-orange);
	box-shadow: 0 6px 14px -6px rgba(254, 80, 0, .9);
}

.nbp-card .nbp-badge--nuevo {
	background: var(--nbp-ink);
}

.nbp-card .nbp-agotado {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .72);
	color: var(--nbp-ink);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Cuerpo
 * ------------------------------------------------------------------ */

.nbp-card .nbp-body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1 1 auto;
	padding: 15px 15px 16px;
}

.nbp-card .nbp-cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--nbp-soft);
	line-height: 1.3;
}

.woocommerce ul.products li.product .nbp-card .nbp-title,
ul.products li.product .nbp-card .nbp-title {
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	/* Nada de recortar: el título se lee entero aunque ocupe tres líneas.
	 * Las tarjetas siguen igualadas por `grid-auto-rows: 1fr` en la lista,
	 * y el pie va pegado abajo con `margin-top: auto`. */
	min-height: calc(2 * 1.35em);
	/* Sin `hyphens: auto`: hacía falta cuando la tarjeta medía ~149px y partía
	 * los títulos por la mitad ("CALCETINES RUN-NING"). Con el listado a todo
	 * el ancho las palabras entran enteras; `overflow-wrap` se queda como red
	 * de seguridad para nombres de producto excepcionalmente largos. */
	overflow-wrap: break-word;
}

.nbp-card .nbp-title a {
	color: var(--nbp-ink);
	text-decoration: none;
	transition: color .18s;
}

.nbp-card .nbp-title a:hover {
	color: var(--nbp-orange);
}

/* Valoración: reserva sitio aunque el producto no tenga opiniones, para que
 * las tarjetas de una misma fila no bailen. */
.nbp-card .nbp-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 17px;
	font-size: 12px;
	color: var(--nbp-soft);
}

.nbp-card .nbp-stars {
	position: relative;
	font-size: 13px;
	letter-spacing: 1px;
	color: #dfe2e7;
	line-height: 1;
}

.nbp-card .nbp-stars::before {
	content: "★★★★★";
	position: absolute;
	inset: 0;
	width: var(--nbp-fill, 0%);
	overflow: hidden;
	color: #f5a623;
	white-space: nowrap;
}

/* Revi.io inyecta su propia valoración en el bucle. Cuando está, se usa la
 * suya (es la fuente real de opiniones de esta tienda) y se oculta la nuestra. */
.nbp-card .reviStarsContainer {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 17px;
	font-size: 12px;
	color: var(--nbp-soft);
}

.nbp-card .reviStarsContainer + .nbp-rating {
	display: none;
}

/* Tallas y colores */

.nbp-card .nbp-variantes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	min-height: 22px;
}

.nbp-card .nbp-tallas,
.nbp-card .nbp-colores {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.nbp-card .nbp-talla {
	min-width: 25px;
	padding: 2px 6px;
	border: 1px solid var(--nbp-line);
	border-radius: 5px;
	background: #fff;
	color: var(--nbp-soft);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
}

.nbp-card .nbp-talla--mas {
	border-style: dashed;
}

.nbp-card .nbp-color {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(20, 22, 28, .18);
	background: linear-gradient(135deg, #d7dae0, #b9bec7);
}

.nbp-card .nbp-color__mas {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--nbp-soft);
}

/* ------------------------------------------------------------------ *
 * Precio y botón
 * ------------------------------------------------------------------ */

.nbp-card .nbp-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 11px;
}

.woocommerce ul.products li.product .nbp-card .nbp-price,
ul.products li.product .nbp-card .nbp-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 800;
	color: var(--nbp-ink);
	line-height: 1.3;
}

.nbp-card .nbp-price del {
	font-size: 13px;
	font-weight: 500;
	color: #9aa1ad;
	opacity: 1;
}

.nbp-card .nbp-price ins {
	background: none;
	text-decoration: none;
	color: var(--nbp-orange);
	font-weight: 800;
}

.nbp-card .nbp-price .woocommerce-price-suffix {
	display: none;
}

/* Botón: siempre visible en táctil, aparece al pasar el ratón en escritorio */
.woocommerce ul.products li.product .nbp-card .nbp-btn,
ul.products li.product .nbp-card .nbp-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	margin: 0;
	padding: 0 15px;
	border: 0;
	border-radius: 8px;
	background: var(--nbp-ink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s, opacity .2s, transform .2s var(--nbp-ease);
}

.woocommerce ul.products li.product .nbp-card .nbp-btn:hover,
ul.products li.product .nbp-card .nbp-btn:hover {
	background: var(--nbp-orange);
	color: #fff;
}

/* Botón "ir a la ficha": solo la flecha, en redondo. Con dos clases propias
 * (0,6,2) gana también al `width: 100%` del bloque de móvil. */
.woocommerce ul.products li.product .nbp-card .nbp-btn.nbp-btn--ir,
ul.products li.product .nbp-card .nbp-btn.nbp-btn--ir {
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	background: var(--nbp-bg);
	color: var(--nbp-ink);
	border: 1px solid var(--nbp-line);
}

.nbp-card .nbp-btn--ir .nbp-flecha {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .22s var(--nbp-ease);
}

.woocommerce ul.products li.product .nbp-card .nbp-btn.nbp-btn--ir:hover,
ul.products li.product .nbp-card .nbp-btn.nbp-btn--ir:hover {
	background: var(--nbp-orange);
	border-color: var(--nbp-orange);
	color: #fff;
}

.nbp-card .nbp-btn--ir:hover .nbp-flecha {
	transform: translateX(2px);
}

.nbp-card .nbp-btn--off {
	background: var(--nbp-bg);
	color: var(--nbp-soft);
	cursor: not-allowed;
}

/* Estado "añadido" de WooCommerce dentro de la tarjeta */
.nbp-card .added_to_cart {
	display: none;
}

.nbp-card .nbp-btn.loading {
	opacity: .6;
	pointer-events: none;
}

@media (hover: hover) and (min-width: 782px) {

	.nbp-card .nbp-btn {
		opacity: 0;
		transform: translateY(4px);
	}

	.nbp-card:hover .nbp-btn,
	.nbp-card:focus-within .nbp-btn {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Rejilla del listado
 * ------------------------------------------------------------------ */

ul.products.nbp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	/* Todas las filas iguales: si no, cada fila toma la altura de su tarjeta
	 * más alta y el listado queda escalonado. */
	grid-auto-rows: 1fr;
	gap: 26px 22px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

ul.products.nbp-grid::before,
ul.products.nbp-grid::after {
	display: none;
}

/* WooCommerce fija el ancho con `.woocommerce ul.products.columns-3 li.product`
 * (0,4,2); con nuestras dos clases llegamos a (0,5,2) y ganaríamos sin
 * !important. Pero el módulo Shop de Divi (el que se usa en la home y en
 * cualquier página del Builder) lo repite con bandera:
 *
 *     .et_pb_shop ul.products.columns-4 li.product{width:48%!important}
 *
 * y contra `!important` la especificidad no sirve de nada. Dejaba las
 * tarjetas en 72px dentro de columnas de 156px. Va acotado a nuestras dos
 * clases, así que no se escapa fuera de la rejilla. */
.woocommerce ul.products.nbp-grid li.product.nbp-item,
ul.products.nbp-grid li.product.nbp-item {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	list-style: none;
}

@media (max-width: 782px) {
	ul.products.nbp-grid {
		grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
		gap: 18px 14px;
	}

	.nbp-card .nbp-body {
		gap: 6px;
		padding: 12px 12px 13px;
	}

	.woocommerce ul.products li.product .nbp-card .nbp-title,
	ul.products li.product .nbp-card .nbp-title {
		font-size: 12.3px;
	}

	.woocommerce ul.products li.product .nbp-card .nbp-price,
	ul.products li.product .nbp-card .nbp-price {
		font-size: 15px;
	}

	.nbp-card .nbp-foot {
		flex-wrap: wrap;
	}

	.woocommerce ul.products li.product .nbp-card .nbp-btn,
	ul.products li.product .nbp-card .nbp-btn {
		width: 100%;
	}
}

/* El listado, a todo el ancho en tableta y móvil.
 *
 * Divi encierra el contenido en `.container`, que mide el 80% de la ventana:
 * en un teléfono de 390px el listado se quedaba en 312px y se perdían 78px
 * en márgenes laterales. Aquí lo llevamos al ancho completo dejando solo un
 * canalón pequeño.
 *
 * Hay dos envoltorios distintos según de dónde salga el listado:
 *   - `.container`  → plantillas de WooCommerce (tienda, categoría, etiqueta,
 *                     búsqueda). Se nombran también por clase de body para
 *                     que el título y la barra de orden se alineen con las
 *                     tarjetas, no solo la rejilla.
 *   - `.et_pb_row`  → módulo Shop del Builder (home y cualquier página
 *                     maquetada con Divi).
 * Las reglas con `:has()` se disparan solas allá donde aparezca la rejilla,
 * así que cubren también plantillas futuras. Van en un bloque aparte a
 * propósito: si un navegador no entiende `:has()` descarta la regla entera,
 * y mezclarlas se llevaría por delante también los selectores por clase de
 * body, que funcionan en cualquier navegador. */
@media (max-width: 980px) {
	body.post-type-archive-product #main-content .container,
	body.tax-product_cat #main-content .container,
	body.tax-product_tag #main-content .container {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		padding-left: 14px;
		padding-right: 14px;
	}
}

@media (max-width: 980px) {
	#main-content .container:has(ul.products.nbp-grid),
	.et_pb_row:has(ul.products.nbp-grid) {
		box-sizing: border-box;
		/* Con bandera porque las filas a las que se les ha tocado el ancho en
		 * el Builder salen como `.et_pb_row_4{width:80%!important}`, y contra
		 * eso la especificidad no puede. */
		width: 100% !important;
		max-width: none !important;
		margin-left: 0;
		margin-right: 0;
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Móvil: exactamente dos por fila. Con `auto-fill` un teléfono de 390px se
 * quedaba en una sola columna, porque el contenedor mide ~312px y no entran
 * dos tarjetas de 158px. */
@media (max-width: 600px) {
	ul.products.nbp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* Ya vamos a todo el ancho: el canalón entre tarjetas se ajusta para
		 * que el espacio ganado se lo lleve el producto, no el hueco. */
		gap: 16px 12px;
	}

	/* Con la flecha en vez de "Ver más" sobra sitio en el pie, así que el
	 * título y el precio recuperan algo de cuerpo y se leen mejor. */
	.woocommerce ul.products li.product .nbp-card .nbp-title,
	ul.products li.product .nbp-card .nbp-title {
		font-size: 13.5px;
	}

	.woocommerce ul.products li.product .nbp-card .nbp-price,
	ul.products li.product .nbp-card .nbp-price {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nbp-card,
	.nbp-card * {
		transition-duration: .01ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * Migas de pan: casita delante de "Inicio"
 * ------------------------------------------------------------------ */

/*
 * El icono va como MÁSCARA, no como imagen de fondo: así se pinta con
 * `currentColor` y sigue al enlace (gris, y naranja al pasar por encima) sin
 * tener que duplicar el SVG en cada color. El `@supports` evita que en un
 * navegador sin `mask` quede un cuadrado sólido: simplemente no sale icono.
 */
@supports ((-webkit-mask: url('')) or (mask: url(''))) {
	.woocommerce-breadcrumb > a:first-child::before {
		content: "";
		display: inline-block;
		width: 1.05em;
		height: 1.05em;
		margin-right: .38em;
		vertical-align: -.16em;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h6v-6h2v6h6v-9h3z'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h6v-6h2v6h6v-9h3z'/%3E%3C/svg%3E") no-repeat center / contain;
	}
}