/* Recomendaciones automáticas de azure (mu-plugins/dio-reco.php): campo de cantidad en las tarjetas de los 3 bloques.
 * Mismo lenguaje que la compra principal de la ficha v2 (píldora con borde --dio-borda, número a 600, botón verde de
 * acento del tema con ícono de carrito). Sin azul: en la v2 el azul es solo del precio principal, «Mais formas de
 * pagamento» y el valor Pix (pedido de Isaac, doc 48).
 * Tamaños: botones − / + de 32 × 34 px en computadora y 40 × 40 en el celular (WCAG 2.2, 2.5.8: mínimo 24 × 24; Apple
 * HIG: 44 pt). Con dos tarjetas por fila en el celular, el campo y el botón se apilan solos (flex-wrap). */

.dio-reco-compra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}
.dio-reco-qtd {
	flex: 1 1 104px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	height: 36px;
	border: 1px solid var(--dio-borda, #e3e9f2);
	border-radius: 30px;
	padding: 0 2px;
	background: #fff;
	color: var(--dio-escuro, #333);
}
.dio-reco-qtd button {
	flex: 0 0 32px;
	width: 32px;
	min-width: 32px;
	height: 34px;
	min-height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}
.dio-reco-qtd button:disabled {
	opacity: .35;
	cursor: default;
}
.dio-reco-qtd button:focus-visible,
.dio-reco-qtd .dio-reco-n:focus-visible,
.dio-reco-add:focus-visible,
.dio-reco-opcoes:focus-visible {
	outline: 2px solid var(--dio-escuro, #333);
	outline-offset: 2px;
}
.dio-reco-qtd .dio-reco-n {
	flex: 1 1 28px;
	width: 28px;
	min-width: 28px;
	height: 34px;
	min-height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
.dio-reco-qtd .dio-reco-n::-webkit-outer-spin-button,
.dio-reco-qtd .dio-reco-n::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.dio-reco-qtd.dio-reco-off {
	opacity: .45;
}

.dio-reco-compra .dio-reco-add,
.dio-reco-compra .dio-reco-opcoes {
	flex: 1 1 44px;
	min-height: 36px;
	margin: 0;
	padding: 0 12px;
	border-radius: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
}
.dio-reco-compra .dio-reco-add {
	background-color: var(--btn-accented-bgcolor, #00a349);
	color: var(--btn-accented-color, #fff);
}
.dio-reco-compra .dio-reco-add:hover {
	background-color: var(--btn-accented-bgcolor-hover, var(--btn-accented-bgcolor, #00a349));
	color: var(--btn-accented-color-hover, var(--btn-accented-color, #fff));
}
.dio-reco-compra .dio-reco-add > span::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.3 11h11l2.1-7.5H6.2'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.3 11h11l2.1-7.5H6.2'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Revisión M12: en los bloques con stepper, el ícono de carrito de Woodmart (cantidad 1, no ve el stepper) se oculta; el
   botón es «Adicionar». En la ficha v2 ya estaba oculto (pdp.css:614); esto lo cubre también sin la v2. */
.dio-reco-bloco .wd-product .wd-add-btn {
	display: none !important;
}
/* El «Ver carrinho» que WooCommerce agrega después del botón no entra en la tarjeta: el carrito lateral ya se abre. */
.dio-reco-compra .added_to_cart {
	display: none !important;
}
/* FBT: solo el campo (el botón es «Adicionar todos»). */
.dio-reco-compra--fbt .dio-reco-qtd {
	flex: 0 1 132px;
	margin: 0 auto;
}

/* ── FBT: tarjeta del total (pedido de Isaac, 05/11/2026, con print de referencia) ──────────────────────────────────
   Lista de los productos del combo con su valor (precio × cantidad), total, «Para N itens» y «Adicionar todos». Es la
   organización del FBT de Woodmart / Amazon (lista con casillas, «Este produto:» en el principal), con los colores de la
   tienda: precios en el azul de los precios, casillas y botón en el verde de acento (el mismo del check de las fotos).
   Las casillas son las de Woodmart (siguen mandando, sincronizadas con el check de la foto por pdp.js); el precio de
   cada fila lo escribe reco.js con la cantidad del stepper. Solo en los combos con cantidad (.dio-reco-fbt). */
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt.wd-design-side {
	--wd-form-width: 340px;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt.wd-design-side .wd-fbt-form {
	align-self: stretch;
	justify-content: flex-start;
	padding: 20px;
	border-color: var(--dio-borda, #e3e9f2);
	border-radius: 12px;
	background: var(--dio-fundo, #f6f8fc);
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-products,
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt.dio-fbt-sin-lista .wd-fbt-products {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--dio-borda, #e3e9f2);
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product {
	margin: 0;
	transition: opacity .2s ease;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product.dio-reco-fora {
	opacity: .45;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product-heading {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: start;
	margin: 0;
	padding: 0;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product-heading > .price {
	display: none; /* el de Woodmart es el unitario con cuotas; el de la fila lo escribe reco.js */
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid #c3cad6;
	border-radius: 5px;
	background: #fff center / 14px no-repeat;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product input[type="checkbox"]:checked {
	border-color: var(--btn-accented-bgcolor, #00a349);
	background-color: var(--btn-accented-bgcolor, #00a349);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* El principal va siempre (Woodmart lo deja marcado y deshabilitado): gris, como en la referencia. */
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product input[type="checkbox"]:checked:disabled {
	border-color: #b9c1cd;
	background-color: #b9c1cd;
	cursor: default;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--dio-escuro, #333);
	outline-offset: 2px;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product-heading label {
	display: block;
	min-width: 0;
	cursor: pointer;
}
/* Nombre completo, sin recortar: en esta tienda lo que distingue un producto de otro va al final («…com Visor, Correio» /
   «…com Visor, Carrossel»); con 2 líneas las dos filas se leían iguales. */
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product-heading .wd-entities-title {
	display: block;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--dio-escuro, #333);
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .dio-reco-este {
	font-weight: 700;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .dio-reco-unid {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--dio-texto, #777);
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .dio-reco-unid .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .dio-reco-unid:empty {
	display: none;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .dio-reco-linha {
	padding-top: 1px;
	text-align: right;
	white-space: nowrap;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 800;
	color: #1a3281; /* el azul de los precios de las tarjetas (plugin de cuotas) */
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .dio-reco-linha del {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #6d6d6d;
	opacity: .7;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .dio-reco-linha ins {
	text-decoration: none;
}
/* Selector de variación: debajo del nombre, alineado con el texto. */
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product-variation {
	margin: 8px 0 0 30px;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-product-variation select {
	width: 100%;
	height: 38px;
	padding: 0 32px 0 12px;
	border: 1px solid var(--dio-borda, #e3e9f2);
	border-radius: 8px;
	background-color: #fff;
	font-size: 13px;
	color: var(--dio-escuro, #333);
}
/* Total: precio, «Para N itens», cuotas y botón, abajo de todo (el botón queda a la altura de los steppers). */
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-purchase {
	margin-top: auto;
	gap: 0;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .dio-pdp-fbt-rotulo {
	display: none; /* la lista de arriba ya dice qué se suma; la referencia va directo al total */
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-purchase > .price {
	font-size: 28px;
	line-height: 1.15;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-purchase > .price del {
	font-size: 15px;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-desc {
	display: block;
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--dio-escuro, #333);
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .dio-pdp-fbt-parcelas {
	margin: 2px 0 14px;
}
body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-purchase-btn {
	width: 100%;
	margin-top: 0;
}

@media (max-width: 1024px) {
	body.dio-pdp-v2 .wd-fbt.dio-reco-fbt.wd-design-side .wd-fbt-form {
		margin-top: 14px;
	}
	body.dio-pdp-v2 .wd-fbt.dio-reco-fbt .wd-fbt-purchase > .price {
		font-size: 26px;
	}
}
@media (max-width: 768px) {
	.dio-reco-qtd {
		height: 42px;
	}
	.dio-reco-qtd button {
		flex-basis: 40px;
		width: 40px;
		min-width: 40px;
		height: 40px;
		min-height: 40px;
	}
	.dio-reco-qtd .dio-reco-n {
		height: 40px;
		min-height: 40px;
		font-size: 16px; /* 16 px: iOS no hace zoom al enfocar el campo. */
	}
	.dio-reco-compra .dio-reco-add,
	.dio-reco-compra .dio-reco-opcoes {
		min-height: 40px;
		flex-basis: 100%;
	}
}