/**
 * Ficha de producto (doc 05, composición del mockup 04).
 *
 * Los selectores llevan .bx.single-product div.product por delante donde hace
 * falta para ganar a las reglas flotantes que Storefront aplica a la ficha.
 */

.bx-ficha {
	padding-bottom: var(--bx-e-6);
}

/* ------------------------------------------------------------- 1. Layout */

.bx-producto__superior {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bx-e-4);
	margin-bottom: var(--bx-e-2);
}

@media (min-width: 992px) {
	.bx-producto__superior {
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
		gap: var(--bx-e-5);
		align-items: start;
	}
}

/* ------------------------------------------------------------ 2. Galería */

.bx-galeria {
	position: relative;
}

@media (min-width: 992px) {
	.bx-galeria > .bx-badges {
		left: calc(76px + var(--bx-e-2) + 12px);
	}
}

.bx.single-product div.product .woocommerce-product-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bx-e-2);
	width: 100%;
	float: none;
	margin: 0;
	opacity: 1 !important;
}

.bx.single-product div.product .woocommerce-product-gallery > .flex-viewport,
.bx.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	flex: 1 1 100%;
	order: 1;
	min-width: 0;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-l);
	overflow: hidden;
	background: #030c15;
}

.bx.single-product div.product .woocommerce-product-gallery__image,
.bx.single-product div.product .woocommerce-product-gallery__image--placeholder {
	position: relative;
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.bx.single-product div.product .woocommerce-product-gallery__image > a {
	display: block;
	height: 100%;
}

/* Cubre todo el marco recortando lo que sobra, nunca deformando. */
.bx.single-product div.product .woocommerce-product-gallery__image img,
.bx.single-product div.product .woocommerce-product-gallery__image--placeholder img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
}

/* Sin JavaScript no hay carrusel: todas las fotos se ven en rejilla. */
html.bx-sin-js .single-product div.product .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
}

html.bx-sin-js .single-product div.product .woocommerce-product-gallery__wrapper > *:first-child {
	grid-column: 1 / -1;
}

/* El carril de miniaturas con sus flechas (lo monta el JS del tema). */
.bx-miniaturas {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

/* El orden manda dentro del carril: flecha, miniaturas, flecha. */
.bx-miniaturas__flecha--anterior {
	order: 0;
}

.bx-miniaturas .flex-control-thumbs {
	order: 1;
}

.bx-miniaturas__flecha--siguiente {
	order: 2;
}

.bx-miniaturas__flecha {
	display: none;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bx-texto-2);
	cursor: pointer;
	transition: color .18s ease, opacity .18s ease;
}

.bx-miniaturas.is-desplazable .bx-miniaturas__flecha {
	display: grid;
}

.bx-miniaturas__flecha:hover {
	color: var(--bx-accent);
}

.bx-miniaturas__flecha[disabled] {
	opacity: .25;
	cursor: default;
}

.bx-miniaturas__flecha svg {
	stroke-width: 1.5;
}

/* La barra de scroll solo se oculta si hay JS para mover el carril. */
html.bx-con-js .single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html.bx-con-js .single-product div.product .flex-control-thumbs::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* Sin JS la lista es hija directa de la galería y necesita su propio orden. */
.bx.single-product div.product .woocommerce-product-gallery.images > .flex-control-thumbs {
	order: 2;
}

/* Miniaturas: bajo la imagen en móvil (swipe), en columna a la izquierda en desktop. */
.bx.single-product div.product .woocommerce-product-gallery > .bx-miniaturas {
	flex: 1 1 100%;
	order: 2;
	scroll-behavior: smooth;
}

.bx.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs {
	display: flex;
	flex: 1 1 auto;
	scroll-behavior: smooth;
	min-width: 0;
	gap: var(--bx-e-1);
	margin: 0;
	padding: 2px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.bx.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs li {
	flex: 0 0 68px;
	margin: 0;
	padding: 0;
	width: auto;
	list-style: none;
	scroll-snap-align: start;
}

.bx.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-s);
	opacity: .55;
	cursor: pointer;
	transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}

.bx.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs img:hover {
	opacity: .9;
	transform: translateY(-1px);
}

.bx.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs img.flex-active,
.bx.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs .flex-active img {
	opacity: 1;
	border-color: var(--bx-cta-borde);
	box-shadow: 0 0 12px rgba(74, 208, 231, .35);
}

@media (min-width: 992px) {
	.bx.single-product div.product .woocommerce-product-gallery {
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.bx.single-product div.product .woocommerce-product-gallery > .flex-viewport,
	.bx.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		flex: 1 1 auto;
	}

	/* El carril se saca del flujo: así nunca puede estirar la galería, pase lo
	   que pase con el número de miniaturas o con el JS. */
	.bx.single-product div.product .woocommerce-product-gallery {
		position: relative;
		padding-left: 88px;
	}

	/* Un solo archivo de foto: nada que reservar a la izquierda. */
	.bx.single-product div.product .woocommerce-product-gallery.bx-sin-miniaturas {
		padding-left: 0;
	}

	.bx.single-product div.product .woocommerce-product-gallery > .bx-miniaturas {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 76px;
		max-height: none;
		flex-direction: column;
	}

	/* Sin JS la lista va sola: mismo tratamiento para que no alargue la fila. */
	html.bx-sin-js .single-product div.product .woocommerce-product-gallery.images > .flex-control-thumbs {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 76px;
	}

	.bx.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs {
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
		max-height: none;
		overflow-x: visible;
		overflow-y: auto;
	}

	.bx.single-product div.product .woocommerce-product-gallery.images .flex-control-thumbs li {
		flex: 0 0 auto;
	}
}

/* Lupa del zoom nativo. */
.bx.single-product div.product .woocommerce-product-gallery__trigger {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(3, 12, 21, .8);
	border: 1px solid var(--bx-panel-borde);
	color: var(--bx-texto);
	font-size: 0;
	text-decoration: none;
}

.bx.single-product div.product .woocommerce-product-gallery__trigger::after {
	content: "";
	width: 19px;
	height: 19px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* -------------------------------------------- 3. Franja de confianza */

.bx-confianza-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bx-e-2) var(--bx-e-3);
	margin: 0 0 var(--bx-e-2);
	padding: var(--bx-e-2) var(--bx-e-3);
	background: var(--bx-panel-fondo-2);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.bx-confianza-panel .bx-confianza {
	flex: 1 1 340px;
}

/* El botón vive dentro de la barra, a la derecha del todo. */
.bx .bx-confianza-panel__cta {
	flex: 1 1 100%;
	min-height: 46px;
}

@media (min-width: 992px) {
	.bx-confianza-panel {
		padding: var(--bx-e-2) var(--bx-e-3);
	}

	.bx .bx-confianza-panel__cta {
		flex: 0 0 30%;
		margin: 0;
	}
}

.bx-confianza--detallada {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bx-e-2);
}

.bx-confianza--detallada .bx-confianza__item {
	gap: 8px;
}

@media (min-width: 560px) {
	.bx-confianza--detallada {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bx-confianza__icono {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-s);
	color: var(--bx-accent);
	background: rgba(56, 214, 245, .06);
}

.bx-confianza__texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bx-confianza__titulo {
	color: var(--bx-texto);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.3;
}

.bx-confianza__detalle {
	color: var(--bx-texto-3);
	font-size: .73rem;
	line-height: 1.35;
}

/* ---------------------------------------------- 4. Columna de compra */

.bx.single-product div.product .bx-compra {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-3);
	padding: 0;
	margin: 0;
	width: auto;
	float: none;
	clear: none;
	background: none;
	border: 0;
	box-shadow: none;
}

.bx.single-product div.product .bx-compra > * {
	margin: 0;
}

.bx-compra__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bx-compra__badges .bx-badges {
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
}

/* Título: serif dorado, como en el mockup. */
.bx .product_title {
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.35rem);
	font-weight: 600;
	line-height: 1.15;
	margin: 0;
}

.bx .woocommerce-product-details__short-description {
	margin-top: -6px;
	color: var(--bx-texto-2);
	font-size: 1rem;
}

.bx .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Precio: sans grande y blanco; el formato lo imprime WooCommerce. */
.bx.single-product div.product .bx-compra > .price,
.bx .woocommerce-variation-price .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	color: var(--bx-texto);
	font-family: var(--bx-ui);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.bx.single-product div.product .bx-compra > .price del,
.bx .woocommerce-variation-price del {
	opacity: 1;
	color: var(--bx-texto-3);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: line-through;
}

.bx.single-product div.product .bx-compra > .price ins,
.bx .woocommerce-variation-price ins {
	background: none;
	color: var(--bx-texto);
	text-decoration: none;
}

.bx.single-product div.product .bx-compra .woocommerce-price-suffix,
.bx.single-product div.product .bx-compra small.includes_tax {
	display: block;
	width: 100%;
	color: var(--bx-texto-3);
	font-size: .78rem;
	font-weight: 400;
}

.bx-valoracion {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.bx-valoracion .bx-estrellas__enlace {
	color: var(--bx-texto-2);
	font-size: .88rem;
	text-decoration: none;
}

.bx-valoracion__vacia {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bx-texto-3);
	font-size: .85rem;
}

.bx-valoracion__vacia svg {
	color: var(--bx-gold);
}

/* --------------------------------------------------------- 5. Variaciones */

.bx.single-product div.product .bx-variaciones {
	display: grid;
	gap: var(--bx-e-3);
	margin: 0;
}

/* Etiqueta del grupo: versales doradas, como el mockup. */
.bx-variacion__etiqueta {
	display: block;
	margin-bottom: 10px;
	color: var(--bx-gold);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.bx-variacion__control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bx-e-1);
}

.bx-variacion__control select {
	flex: 1 1 200px;
}

.bx-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bx-e-1);
	width: 100%;
}

.bx-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--bx-control-borde);
	border-radius: var(--bx-r-s);
	background: var(--bx-control-fondo);
	color: var(--bx-texto-2);
	font-family: var(--bx-ui);
	font-size: .85rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.bx-pill:hover {
	border-color: rgba(74, 208, 231, .5);
	color: var(--bx-texto);
}

.bx-pill.is-activa {
	background: var(--bx-control-activo-fondo);
	border-color: var(--bx-control-activo-borde);
	color: var(--bx-texto);
	box-shadow: 0 0 14px rgba(35, 118, 144, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.bx-pill.is-agotada {
	opacity: .45;
	text-decoration: line-through;
	cursor: not-allowed;
}

.bx-con-js .bx-variacion__control select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.bx-aviso-opciones:empty {
	display: none;
}

.bx-aviso-opciones {
	margin: 0;
	color: var(--bx-aviso);
	font-size: .85rem;
	font-weight: 600;
}

/* Grupo de opciones que falta por elegir. */
.bx-variacion.is-requerida .bx-variacion__etiqueta {
	color: var(--bx-aviso);
}

.bx-variacion.is-requerida .bx-pill,
.bx-variacion.is-requerida select {
	border-color: rgba(245, 158, 11, .55);
}

.bx .reset_variations {
	color: var(--bx-texto-3);
	font-size: .8rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Con un solo grupo de opciones siempre hay una elegida: el enlace de
   reinicio sobra y el mockup no lo contempla. */
.bx-variaciones > .bx-variacion:only-child .reset_variations {
	display: none;
}

.bx .woocommerce-variation-description {
	color: var(--bx-texto-2);
	font-size: .9rem;
}

/* Disponibilidad, en pill con un punto de color (doc 11 fase 1.2): el texto
   y el punto los decide el estado real de WooCommerce (bx_texto_disponibilidad()
   y bx_clase_disponibilidad() en inc/stock.php), nunca se escribe aquí. */
.bx .woocommerce-variation-availability p,
.bx .bx-compra p.stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid var(--bx-borde-fuerte);
	border-radius: var(--bx-r-pill);
	background: rgba(255, 255, 255, .04);
	font-size: .8rem;
	font-weight: 600;
}

.bx .woocommerce-variation-availability p::before,
.bx .bx-compra p.stock::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.bx .bx-compra p.stock.in-stock,
.bx .woocommerce-variation-availability .in-stock {
	color: var(--bx-exito);
}

.bx .bx-compra p.stock.in-stock::before,
.bx .woocommerce-variation-availability .in-stock::before {
	background: var(--bx-exito);
	box-shadow: 0 0 6px rgba(52, 211, 153, .7);
}

/* "out-of-stock" es el nombre nativo de la clase; aquí ya no significa que no
   se pueda comprar (bx_nunca_agotado() en inc/stock.php), solo que se
   fabrica bajo pedido: de ahí el ámbar y no el rojo de error. */
.bx .bx-compra p.stock.out-of-stock,
.bx .woocommerce-variation-availability .out-of-stock,
.bx .bx-agotado {
	color: var(--bx-aviso);
}

.bx .bx-compra p.stock.out-of-stock::before,
.bx .woocommerce-variation-availability .out-of-stock::before {
	background: var(--bx-aviso);
	box-shadow: 0 0 6px rgba(245, 158, 11, .7);
}

/* El aviso de entrega, bajo la pill: mismo tono discreto que el resto de
   ayudas de compra, sin competir con el estado de arriba. */
.bx .bx-compra .bx-entrega {
	margin: 6px 0 0;
	color: var(--bx-texto-3);
	font-size: .78rem;
}

.bx .single_variation_wrap {
	display: grid;
	gap: var(--bx-e-2);
}

/* --------------------------------------------------- 6. Cantidad y botones */

.bx.single-product div.product .bx-compra__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bx-e-2);
}

.bx .bx-compra__acciones > div:empty {
	display: none;
}

.bx.single-product div.product .bx-cantidad {
	display: inline-flex;
	align-items: center;
	height: 50px;
	padding: 4px;
	border: 1px solid var(--bx-control-borde);
	border-radius: 10px;
	background: var(--bx-control-fondo);
	float: none;
	margin: 0;
	width: auto;
}

.bx.single-product div.product .bx-cantidad__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--bx-texto);
	cursor: pointer;
}

.bx.single-product div.product .bx-cantidad__btn:hover {
	background: rgba(255, 255, 255, .08);
}

html.bx-sin-js .single-product div.product .bx-cantidad__btn {
	display: none;
}

/* Separadores finos entre − / cantidad / +, como en el mockup. */
.bx.single-product div.product .bx-cantidad .bx-cantidad__campo {
	border-left: 1px solid var(--bx-control-borde);
	border-right: 1px solid var(--bx-control-borde);
	border-radius: 0;
}

.bx.single-product div.product .bx-cantidad .bx-cantidad__campo,
.bx.single-product div.product .bx-cantidad input.qty {
	width: 46px;
	min-height: 40px;
	padding: 0;
	background: transparent;
	color: var(--bx-texto);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	box-shadow: none;
	-moz-appearance: textfield;
}

html.bx-con-js .bx-cantidad input.qty::-webkit-outer-spin-button,
html.bx-con-js .bx-cantidad input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bx.single-product div.product .single_add_to_cart_button {
	flex: 1 1 220px;
	width: auto;
	min-width: 0;
	min-height: 50px;
}

.bx .bx-compra__acciones .bx-btn--comprar {
	flex: 1 1 100%;
	width: 100%;
	min-height: 50px;
	margin-top: 4px;
}

/* --------------------------------------------------- 7. Barra fija móvil */

.bx-barra-movil {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	display: none;
	align-items: center;
	gap: var(--bx-e-2);
	padding: 10px var(--bx-lateral);
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(0, 6, 13, .94);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-top: 1px solid var(--bx-panel-borde);
}

/* Solo en móvil y solo con JS, que es quien mantiene el espejo de cantidad. */
@media (max-width: 991px) {
	html.bx-con-js .bx-barra-movil {
		display: flex;
	}

	/* Con la barra fija abajo, el bloque de compra de la columna sobra. */
	html.bx-con-js .bx.single-product div.product .bx-compra__acciones {
		display: none;
	}

	/* "Comprar ahora" no existe en el móvil del mockup. */
	.bx .bx-confianza-panel__cta {
		display: none;
	}

	/* Hueco para que la barra no tape el final de la página. */
	.bx-ficha {
		padding-bottom: 92px;
	}
}

/* La barra se imprime fuera del contenedor del producto: lleva sus propias
   reglas para el stepper, sin depender de la cascada de la ficha. */
.bx .bx-barra-movil__cantidad {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 48px;
	padding: 4px;
	margin: 0;
	width: auto;
	flex-shrink: 0;
	float: none;
	border: 1px solid var(--bx-control-borde);
	border-radius: 10px;
	background: var(--bx-control-fondo);
}

.bx .bx-barra-movil__cantidad .bx-cantidad__btn {
	display: grid;
	place-items: center;
	width: 30px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--bx-texto);
	cursor: pointer;
}

.bx .bx-barra-movil__cantidad .bx-cantidad__campo {
	display: grid;
	place-items: center;
	width: 30px;
	min-height: 36px;
	padding: 0;
	border-left: 1px solid var(--bx-control-borde);
	border-right: 1px solid var(--bx-control-borde);
	border-radius: 0;
	background: transparent;
	color: var(--bx-texto);
	font-size: 1rem;
	font-weight: 700;
}

.bx .bx-barra-movil__cta {
	flex: 1 1 auto;
	min-height: 48px;
	padding: 10px 12px;
	gap: 6px;
	font-size: .72rem;
	letter-spacing: .04em;
	white-space: nowrap;
	overflow: hidden;
}

/* En pantallas muy estrechas el precio cede el sitio al texto del botón. */
@media (max-width: 359px) {
	.bx .bx-barra-movil__cta .bx-btn__precio {
		display: none;
	}
}

.bx .bx-barra-movil__cta .bx-btn__precio:not(:empty) {
	padding-left: 10px;
}

/* ------------------------------------------- 8. Detalles (2 columnas) */

.bx-detalles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bx-e-3);
	margin-top: var(--bx-e-4);
	align-items: start;
}

@media (min-width: 992px) {
	.bx-detalles {
		grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
		gap: var(--bx-e-3);
	}

	.bx-detalles--solo {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Acordeones: un solo panel con filas separadas por línea. */
.bx-acordeones {
	overflow: hidden;
	padding: 0;
}

.bx-acordeon + .bx-acordeon {
	border-top: 1px solid var(--bx-panel-linea);
}

/* El cuerpo abierto conserva el fondo del panel: en el mockup el velo azulado
   vive solo en la cabecera (ver componentes.css). */

.bx-especificaciones-panel {
	padding: var(--bx-e-4);
}

/* Descripción completa: contenedor propio a todo el ancho, con el texto
   a una medida de lectura cómoda para que el panel no quede a medias. */
.bx-descripcion-panel {
	margin-top: var(--bx-e-3);
	padding: var(--bx-e-4);
}

@media (min-width: 992px) {
	.bx-descripcion-panel {
		padding: var(--bx-e-5);
	}
}

.bx-descripcion-panel .bx-prosa {
	max-width: 900px;
	margin-inline: auto;
}

/* --- "Ver más": recorte de la descripción en móvil, sin JavaScript --- */

.bx-vermas__control {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bx-vermas__boton {
	display: none;
}

.bx-vermas__cerrar {
	display: none;
}

@media (max-width: 991px) {
	.bx-vermas {
		position: relative;
	}

	.bx-vermas__cuerpo {
		max-height: 320px;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
	}

	.bx-vermas__control:checked ~ .bx-vermas__cuerpo {
		max-height: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.bx-vermas__boton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 44px;
		margin-top: var(--bx-e-2);
		padding: 8px 20px;
		border: 1px solid var(--bx-control-borde);
		border-radius: var(--bx-r-pill);
		background: var(--bx-control-fondo);
		color: var(--bx-texto);
		font-size: .8rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.bx-vermas__control:checked ~ .bx-vermas__boton .bx-vermas__abrir {
		display: none;
	}

	.bx-vermas__control:checked ~ .bx-vermas__boton .bx-vermas__cerrar {
		display: inline;
	}

	.bx-vermas__control:focus-visible ~ .bx-vermas__boton {
		outline: 2px solid var(--bx-accent);
		outline-offset: 2px;
	}
}

/* Enlace del resumen hacia la descripción completa. */
.bx-resumen__mas {
	margin: var(--bx-e-2) 0 0;
}

.bx-especificaciones-panel__diagrama {
	margin: var(--bx-e-3) 0 0;
	text-align: center;
}

.bx-especificaciones-panel__diagrama img {
	border-radius: var(--bx-r-m);
}

/* --------------------------------- 9. Bloque social (reseñas + relacionados) */

/* Relacionados arriba y reseñas debajo, cada uno a todo el ancho (doc 11
   fase 3.1): antes iban uno junto a otro en dos columnas y la lista de
   reseñas se quedaba sin sitio al crecer. */
.bx-social {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bx-e-4);
	margin-top: var(--bx-e-3);
	padding: var(--bx-e-4);
}

@media (min-width: 992px) {
	.bx-social {
		gap: var(--bx-e-5);
		padding: var(--bx-e-5);
	}
}

/* Separación entre las dos secciones cuando están las dos: relacionados
   siempre va primero (bx_bloque_social() en inc/woocommerce.php). */
.bx-social .bx-seccion-productos + .bx-resenas {
	padding-top: var(--bx-e-4);
	border-top: 1px solid var(--bx-panel-linea);
}

@media (min-width: 992px) {
	.bx-social .bx-seccion-productos + .bx-resenas {
		padding-top: var(--bx-e-5);
	}
}

.bx-resenas {
	margin: 0;
	min-width: 0;
}

.bx-resenas__barras {
	display: grid;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx-resenas__barra {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
	align-items: center;
	gap: var(--bx-e-1);
	font-size: .76rem;
	color: var(--bx-texto-3);
}

.bx-resenas__barra-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
}

.bx-resenas__barra-estrella {
	color: var(--bx-gold);
	fill: currentColor;
}

.bx-resenas__barra-pista {
	height: 7px;
	border-radius: var(--bx-r-pill);
	background: rgba(255, 255, 255, .07);
	overflow: hidden;
}

.bx-resenas__barra-valor {
	display: block;
	height: 100%;
	border-radius: var(--bx-r-pill);
	background: linear-gradient(90deg, #f5d18a, var(--bx-gold));
}

.bx-resenas__barra-num {
	text-align: right;
}

.bx-resenas__vacio {
	margin: 0 0 var(--bx-e-3);
	color: var(--bx-texto-3);
	font-size: .9rem;
}

/* 1 columna en móvil, 2 en escritorio (doc 11 fase 3.1). Cada reseña pasa a
   ser una tarjeta propia (antes eran filas separadas por una línea): con dos
   columnas, una línea arriba sola no tiene sentido. */
.bx .bx-resenas__lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0 0 var(--bx-e-3);
	padding: 0;
}

@media (min-width: 768px) {
	.bx .bx-resenas__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Tope de 2 filas (4 tarjetas) — solo con JavaScript: sin él la lista
	   entera ya está en el HTML y se lee completa. El botón de abajo la
	   destapa entera de un golpe (bx_bloque_resenas.js). */
	html.bx-con-js .bx-resenas__lista--limitada li:nth-child(n+5) {
		display: none;
	}
}

.bx .bx-resenas__lista .comment_container {
	display: flex;
	gap: var(--bx-e-2);
	height: 100%;
	padding: var(--bx-e-3);
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
}

.bx .bx-resenas__lista .comment_container img.avatar {
	position: static;
	flex: 0 0 38px;
	align-self: flex-start;
	width: 38px !important;
	height: 38px !important;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--bx-panel-borde);
	padding: 0;
	margin: 0;
	float: none;
}

.bx .bx-resenas__lista .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	font-size: .85rem;
}

.bx .bx-resenas__lista .woocommerce-review__author {
	color: var(--bx-texto);
	font-size: .85rem;
	font-weight: 700;
}

.bx .bx-resenas__lista .woocommerce-review__published-date,
.bx .bx-resenas__lista .woocommerce-review__verified {
	color: var(--bx-texto-3);
	font-size: .72rem;
}

/* El sello de compra verificada: quien pagó ese producto lo lleva junto a su
   nombre, con el visto de la casa. No es un adorno —es lo que separa una opinión
   de un cliente de un comentario cualquiera—, así que se lee como una chapa y
   no como un paréntesis perdido. */
.bx .bx-resenas__lista .woocommerce-review__verified,
.bx .bx-resena__sello {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 8px;
	padding: 3px 9px 3px 7px;
	border: 1px solid rgba(56, 214, 245, .38);
	border-radius: 999px;
	background: rgba(56, 214, 245, .12);
	color: var(--bx-accent);
	font-size: .68rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	vertical-align: middle;
	white-space: nowrap;
}

.bx .bx-resena__sello .bx-icono {
	flex: 0 0 auto;
	/* El visto va relleno para que se lea como una insignia y no como un
	   dibujo de líneas; el trazo se afina para que no se emborrone a 15 px. */
	stroke-width: 1.4;
}

/* En pantallas estrechas el rótulo cabe justo: si el nombre es largo, el sello
   pasa a la línea de abajo en vez de estirar la cabecera. */
@media (max-width: 480px) {
	.bx .bx-resena__sello {
		margin-left: 0;
		margin-top: 4px;
	}
}

.bx .bx-resenas__lista .woocommerce-review__dash {
	color: transparent;
}

/* Insignia de origen en las reseñas migradas de Wallapop: mismo lenguaje que
   el sello de compra verificada, para que se lea como parte de la casa y no
   como un aviso legal aparte. Va antes del texto, no junto al nombre: no es
   un dato de quien firma, es de dónde viene la opinión. */
.bx .bx-resenas__lista .bx-resena__origen {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	padding: 3px 9px;
	border: 1px solid var(--bx-borde-fuerte);
	border-radius: 999px;
	color: var(--bx-texto-3);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
}

.bx .bx-resenas__lista .bx-resena__origen-icono {
	flex: 0 0 auto;
	border-radius: 4px;
}

/* "Mostrar más": solo existe si hace falta (más de 4 reseñas) y solo se ve
   con JavaScript, que es quien puede destapar lo que el CSS de arriba
   esconde. Anclado a ".bx .bx-btn" (doc 12 §5): con la misma especificidad
   que la regla del botón base, gana por venir después en la hoja. */
.bx .bx-resenas__mostrar-mas {
	display: none;
	margin: 0 auto;
}

@media (min-width: 768px) {
	html.bx-con-js .bx .bx-resenas__lista--limitada + .bx-resenas__mostrar-mas {
		display: flex;
	}
}

/* Reseñas en móvil: aparecen al hacer scroll, sin el portal de partículas
   del resto del tema —esto es solo llegar desde el fondo, no magia—. Cada
   tarjeta lleva su propio desfase y transparencia de salida al azar
   (--bx-resena-x/--bx-resena-op, puestos por JS), así no entran todas a la
   vez con el mismo golpe (doc 11 fase 3.1). Con JavaScript únicamente: sin
   él la reseña ya está a la vista, quieta. */
@media (max-width: 767px) {
	html.bx-con-js .bx-resenas__lista li[data-bx-resena-espera] {
		opacity: 0;
		transform: translateY(var(--bx-resena-y, 22px));
		transition: opacity .5s ease, transform .5s ease;
	}

	html.bx-con-js .bx-resenas__lista li[data-bx-resena-espera].bx-resena--visible {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.bx-con-js .bx-resenas__lista li[data-bx-resena-espera] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Formulario de reseña: plegado, para no robar protagonismo al listado. */
.bx-resenas__formulario {
	margin-top: var(--bx-e-3);
	background: var(--bx-panel-fondo-2);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	overflow: hidden;
}

.bx-resenas__desplegable {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-2);
	min-height: 48px;
	padding: var(--bx-e-2) var(--bx-e-3);
	color: var(--bx-texto-2);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.bx-resenas__desplegable::-webkit-details-marker {
	display: none;
}

.bx-resenas__formulario[open] .bx-resenas__desplegable {
	color: var(--bx-accent);
	border-bottom: 1px solid var(--bx-panel-linea);
}

/* Storefront flota estos campos y los deja a un tercio de ancho. */
.bx #respond {
	padding: var(--bx-e-3);
	background: none;
}

.bx #respond .comment-form-author,
.bx #respond .comment-form-email,
.bx #respond .comment-form-url {
	width: 100%;
	float: none;
	margin-right: 0;
}

.bx-resenas__form-titulo {
	display: block;
	color: var(--bx-gold);
	font-family: var(--bx-display);
	font-size: 1rem;
	letter-spacing: .03em;
	margin-bottom: var(--bx-e-2);
	text-transform: uppercase;
}

.bx .comment-form {
	display: grid;
	gap: var(--bx-e-2);
}

.bx .comment-form p {
	margin: 0;
}

.bx .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: .8rem;
}

.bx #respond input[type="text"],
.bx #respond input[type="email"],
.bx #respond textarea {
	width: 100%;
	max-width: 100%;
}

.bx .comment-form .form-submit {
	margin: 0;
}

.bx .comment-form-rating select {
	max-width: 260px;
}

.bx .comment-form .comment-notes {
	color: var(--bx-texto-3);
	font-size: .78rem;
}

@media (min-width: 600px) {
	.bx .comment-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Dentro del bloque social la columna es estrecha: una sola columna. */
	.bx-social .comment-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.bx .comment-form-comment,
	.bx .comment-form-rating,
	.bx .form-submit,
	.bx .comment-notes {
		grid-column: 1 / -1;
	}
}

.bx .comment-form .comment-form-cookies-consent {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.bx .comment-form .comment-form-cookies-consent input {
	width: auto;
	min-height: 0;
	margin-top: 4px;
}

.bx .comment-form-cookies-consent label {
	font-weight: 400;
	font-size: .8rem;
}

/* ---------------------------------------- 10. Relacionados y cross-sell */

.bx-social .bx-seccion-productos {
	margin: 0;
	min-width: 0;
}

/* Las tarjetas de relacionados del mockup no llevan valoración. */
.bx-social .bx-tarjeta__valoracion {
	display: none;
}

.bx-social .bx-grid-productos {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bx-e-2);
}

@media (min-width: 1100px) {
	.bx-social .bx-grid-productos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bx-cross-sell {
	margin-top: var(--bx-e-3);
	padding: var(--bx-e-4);
}