/* ===========================================================================
   Ficha de producto — cargada solo en is_product(). Sobre markup core Woo.
   El layout 55/45 base ya está en woo.css (líneas 47-94). Aquí: componentes.
   =========================================================================== */

/* Precio y summary */
.woocommerce div.product .summary > .price { color: var(--bf-color-body); font-size: 1.6rem; font-weight: 700; }
.woocommerce div.product .summary del { color: var(--bf-color-body); opacity: .7; }
.woocommerce div.product .summary ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--bf-color-body); font-size: 1rem; }
.woocommerce div.product .product_meta { border-top: var(--bf-border-thin); color: var(--bf-color-body); font-size: .875rem; margin-top: var(--bf-space-6); padding-top: var(--bf-space-4); }
.woocommerce div.product .product_meta a { color: var(--bf-color-ink); }

/* ATC + Compra ahora */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .bf-buy-now {
	background: var(--bf-color-ink);
	border: 0;
	color: var(--bf-color-paper);
	cursor: pointer;
	font-family: var(--bf-font-primary);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: var(--bf-ls-wide);
	line-height: 1;
	min-height: 44px;
	padding: var(--bf-space-4) var(--bf-space-6);
	text-transform: uppercase;
	width: 100%;
}
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible,
.woocommerce div.product form.cart .bf-buy-now:focus-visible { outline: var(--bf-focus-outline); outline-offset: var(--bf-focus-offset); }
.bf-buy-now-area { align-items: center; display: flex; gap: var(--bf-space-4); margin-top: var(--bf-space-4); }
.woocommerce div.product form.cart .bf-buy-now { margin: 0; width: auto; flex: 1; }
.bf-buy-now__or { color: var(--bf-color-body); font-weight: 700; }
.woocommerce div.product form.cart div.quantity { margin: 0 0 var(--bf-space-4); }
.woocommerce div.product form.cart div.quantity .qty { border: 0; border-bottom: var(--bf-border-medium); font-family: var(--bf-font-primary); font-size: 1rem; padding: var(--bf-space-2); width: 5rem; }

/* Bloque de pagos */
.bf-trust-payments { margin-top: var(--bf-space-6); }
.bf-trust-payments__title { font-size: .8125rem; font-weight: 700; letter-spacing: var(--bf-ls-wide); margin: 0 0 var(--bf-space-2); text-transform: uppercase; }
/* Acento verde PROD en "SEGURO" (woo-cart.css no carga en la ficha → regla
   duplicada a propósito; token en tokens.css). */
.bf-trust-payments__accent { color: var(--bf-color-success); }
.bf-trust-payments__list { display: flex; flex-wrap: wrap; gap: var(--bf-space-2); list-style: none; margin: 0; padding: 0; }
.bf-trust-payments__list li { display: flex; }
/* Tile de marca real (SVG flat → assets/images/payments/). El borde/redondez/
   fondo viven en el <img class="bf-trust-payments__icon"> para que ficha,
   carrito y footer del funnel compartan UNA misma regla. height:31px + width:auto
   reproducen el aspect 780:500 de los SVG → CLS-safe con los atributos del
   markup. Cero hex nuevos: bg/borde son tokens de tokens.css; radius 4px = PROD. */
.bf-trust-payments__icon { background: var(--bf-color-paper); border: var(--bf-border-thin); border-radius: 4px; display: block; height: 31px; width: auto; }
.bf-trust-payments__list img.bf-trust-payments__icon,
.bf-checkout-footer img.bf-trust-payments__icon { width: 48px; height: 31px; max-width: none; }

/* Variaciones */
.woocommerce div.product form.variations_form table.variations { border: 0; margin: 0 0 var(--bf-space-4); }
.woocommerce div.product form.variations_form table.variations th, .woocommerce div.product form.variations_form table.variations td { border: 0; padding: var(--bf-space-2) 0; text-align: left; }
.woocommerce div.product form.variations_form table.variations label { font-size: .875rem; font-weight: 700; letter-spacing: var(--bf-ls-wide); text-transform: uppercase; }
.woocommerce div.product form.variations_form select { border: 0; border-bottom: var(--bf-border-medium); font-family: var(--bf-font-primary); min-height: 44px; padding: var(--bf-space-2); width: 100%; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: var(--bf-border-medium); display: flex; gap: var(--bf-space-6); list-style: none; margin: var(--bf-space-9) 0 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { border-bottom: 3px solid transparent; color: var(--bf-color-body); display: inline-block; font-size: .875rem; font-weight: 700; letter-spacing: var(--bf-ls-wide); padding: var(--bf-space-3) 0; text-transform: uppercase; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--bf-color-brand); color: var(--bf-color-ink); }
.woocommerce div.product .woocommerce-tabs .panel { color: var(--bf-color-body); margin: 0; padding: var(--bf-space-6) 0; }
.woocommerce div.product .woocommerce-tabs .panel h2:first-child { color: var(--bf-color-ink); font-size: 1.2rem; }

/* Relacionados y upsells: 6/3/2 */
.woocommerce .bf-woocommerce-single .related, .woocommerce .bf-woocommerce-single .upsells { border-top: var(--bf-border-thin); margin-top: var(--bf-space-9); padding-top: var(--bf-space-7); }
.woocommerce .bf-woocommerce-single .related > h2, .woocommerce .bf-woocommerce-single .upsells > h2 { color: var(--bf-color-ink); font-size: 1.2rem; }
.woocommerce .bf-woocommerce-single .related ul.products, .woocommerce .bf-woocommerce-single .upsells ul.products { display: grid; gap: var(--bf-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
	.woocommerce .bf-woocommerce-single .related ul.products, .woocommerce .bf-woocommerce-single .upsells ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.woocommerce .bf-woocommerce-single .related ul.products, .woocommerce .bf-woocommerce-single .upsells ul.products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.woocommerce div.product form.cart .button, .woocommerce div.product form.cart .bf-buy-now { width: auto; }
	.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; }
}

/* Galería: flechas prev/next del flexslider core (directionNav reactivado en
   functions.php). Solo escritorio: en móvil mandan el swipe y las miniaturas. */
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
.woocommerce div.product .flex-direction-nav { display: none; margin: 0; padding: 0; }
.woocommerce div.product .flex-direction-nav li { margin: 0; padding: 0; list-style: none; }

@media (min-width: 1024px) {
	.woocommerce div.product .flex-direction-nav { display: block; }
	.woocommerce div.product .flex-direction-nav a {
		align-items: center;
		background: var(--bf-color-paper);
		border: var(--bf-border-thin);
		color: var(--bf-color-ink);
		display: flex;
		font-size: 0;
		height: 44px;
		justify-content: center;
		line-height: 1;
		opacity: .85;
		position: absolute;
		/* La figura ya no estira (align-self:start en woo.css): su 50% cae sobre
		   main imagen + miniaturas; restamos 3rem para centrar sobre la imagen. */
		top: calc(50% - var(--bf-space-9));
		transform: translateY(-50%);
		width: 44px;
		z-index: 2;
	}
	.woocommerce div.product .flex-direction-nav a::before { font-size: 1.75rem; line-height: 1; }
	.woocommerce div.product .flex-direction-nav a.flex-prev { left: var(--bf-space-3); }
	.woocommerce div.product .flex-direction-nav a.flex-prev::before { content: '\2039'; }
	.woocommerce div.product .flex-direction-nav a.flex-next { right: var(--bf-space-3); }
	.woocommerce div.product .flex-direction-nav a.flex-next::before { content: '\203A'; }
	.woocommerce div.product .flex-direction-nav a:hover { opacity: 1; }
	.woocommerce div.product .flex-direction-nav a:focus-visible { outline: var(--bf-focus-outline); outline-offset: var(--bf-focus-offset); }
	/* animationLoop:false → flexslider marca el borde agotado como flex-disabled. */
	.woocommerce div.product .flex-direction-nav li.flex-disabled a,
	.woocommerce div.product .flex-direction-nav a.flex-disabled { opacity: .35; pointer-events: none; }
}