/**
 * BSV — Carrito y checkout.
 *
 * Paleta: assets/css/bsv-tokens.css. Acá no van hex sueltos.
 *
 * Criterio: esto es una pantalla de tarea, no una pieza de comunicación. Manda
 * la legibilidad del importe, la claridad del paso siguiente y que el formulario
 * no se interponga. La marca aparece en los detalles —foco, CTA, acentos—, no
 * decorando el fondo.
 *
 * Se encola solo en carrito y checkout (ver functions.php).
 */

/* --- Pasos: Carrito › Finalizar la compra › Orden Completa --------------- */

.woocommerce-page .cart-steps,
.woocommerce-cart .entry-content > p:first-child:has( a.current ) {
	margin-bottom: 2rem;
}

.woocommerce-page a.current,
.woocommerce-page .nolink {
	font-weight: 700;
}

/* El paso activo toma el verde de marca; el azul por defecto de Porto no
   pertenece a esta paleta. Los pasos futuros bajan a texto secundario. */
.woocommerce-page a.current {
	color: var( --bsv-verde );
}

.woocommerce-page .nolink {
	color: #8A9199;
	cursor: default;
}

/* --- Superficies compartidas -------------------------------------------- */

/*
 * Una sola superficie por bloque. Porto ya envuelve cada resumen en su propio
 * contenedor con borde —.card.card-default en el carrito, .box-content en el
 * checkout— así que si además estilamos el elemento interno quedan dos marcos
 * concéntricos. En el checkout el panel es el de afuera porque el título «Tu
 * pedido» vive adentro de él y corresponde que quede dentro de la tarjeta.
 */
.woocommerce-cart .cart_totals,
.woocommerce-checkout .checkout-order-review .box-content {
	padding: 1.75rem;
	background: var( --bsv-blanco );
	border: 1px solid #E2E6E9;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba( 16, 24, 32, 0.04 ), 0 12px 28px rgba( 16, 24, 32, 0.06 );
}

/* Los contenedores internos pasan a ser contenido, no tarjetas. */
.woocommerce-cart .cart_totals .card,
.woocommerce-cart .cart_totals .card-default,
.woocommerce-cart .cart_totals .card-body,
.woocommerce-checkout #order_review {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 1.25rem;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --bsv-texto );
}

/* En pantallas anchas el importe acompaña el scroll del formulario: en un
   checkout largo, perder de vista el total es perder la referencia. */
@media ( min-width: 992px ) {
	.woocommerce-checkout .checkout-order-review .box-content {
		position: sticky;
		top: 96px;
	}

	.woocommerce-checkout #order_review_heading {
		z-index: 1;
	}
}

/* --- Importes ------------------------------------------------------------ */

/*
 * Cifras tabulares: sin esto los dígitos tienen anchos distintos y la columna
 * de precios queda visualmente desalineada entre filas.
 */
.woocommerce-page .amount,
.woocommerce-page .product-price,
.woocommerce-page .product-subtotal,
.woocommerce-page .cart-subtotal td,
.woocommerce-page .order-total td {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.woocommerce-page .cart_totals table,
.woocommerce-page .shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-page .cart_totals th,
.woocommerce-page .cart_totals td,
.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td {
	padding: 0.75rem 0;
	border-bottom: 1px solid #EDF0F2;
	font-size: 14px;
	line-height: 1.5;
	vertical-align: middle;
}

.woocommerce-page .cart_totals td,
.woocommerce-checkout #order_review td {
	text-align: right;
}

.woocommerce-page .order-total th,
.woocommerce-page .order-total td {
	padding-top: 1rem;
	border-bottom: 0;
	border-top: 2px solid var( --bsv-texto );
	font-size: 15px;
	font-weight: 700;
}

.woocommerce-page .order-total td .amount,
.woocommerce-page .order-total .woocommerce-Price-amount {
	font-size: 24px;
	line-height: 1.15;
	color: var( --bsv-verde );
}

/* --- Tabla del carrito --------------------------------------------------- */

.woocommerce-page .cart-table thead th,
.woocommerce-page .shop_table thead th {
	padding-bottom: 0.85rem;
	border-bottom: 1px solid #E2E6E9;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #6B747C;
}

.woocommerce-cart .cart_item td {
	padding: 1.25rem 0;
	border-bottom: 1px solid #EDF0F2;
	vertical-align: middle;
}

.woocommerce-cart .cart_item .product-thumbnail img {
	width: 72px;
	height: auto;
	border-radius: 6px;
	border: 1px solid #E2E6E9;
}

.woocommerce-page .cart_item .product-name a {
	font-size: 15px;
	font-weight: 600;
	color: var( --bsv-texto );
	text-decoration: none;
}

.woocommerce-page .cart_item .product-name a:hover,
.woocommerce-page .cart_item .product-name a:focus {
	color: var( --bsv-verde );
}

/* --- Formularios --------------------------------------------------------- */

.woocommerce-page form .form-row {
	margin-bottom: 1.15rem;
	padding: 0;
}

.woocommerce-page form .form-row label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --bsv-texto );
}

/* El asterisco es información, no adorno: se marca en rojo de marca y se le
   da un nombre accesible para quien no ve el color. */
.woocommerce-page form .form-row label .required,
.woocommerce-page form .form-row label.required_field::after {
	color: var( --bsv-rojo );
	text-decoration: none;
}

.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce-page .coupon input.input-text,
.woocommerce-page .select2-container .select2-selection--single {
	width: 100%;
	min-height: 46px;   /* Objetivo táctil cómodo en mobile. */
	padding: 0.6rem 0.85rem;
	background: var( --bsv-blanco );
	border: 1px solid #C9D0D6;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.4;
	color: var( --bsv-texto );
	transition: border-color 0.15s, box-shadow 0.15s;
	appearance: none;
}

.woocommerce-page form .form-row input.input-text::placeholder,
.woocommerce-page form .form-row textarea::placeholder {
	color: #7A838B;   /* 4.6:1 sobre blanco: el placeholder también se lee. */
}

.woocommerce-page form .form-row input.input-text:hover,
.woocommerce-page form .form-row select:hover {
	border-color: #A7B0B8;
}

.woocommerce-page .coupon input.input-text:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus,
.woocommerce-page .select2-container--focus .select2-selection--single {
	outline: none;
	border-color: var( --bsv-verde );
	box-shadow: 0 0 0 3px rgba( 13, 108, 48, 0.16 );
}

.woocommerce-page form .form-row.woocommerce-invalid input.input-text,
.woocommerce-page form .form-row.woocommerce-invalid select {
	border-color: var( --bsv-rojo );
}

.woocommerce-page form .form-row.woocommerce-invalid input.input-text:focus {
	box-shadow: 0 0 0 3px rgba( 208, 50, 28, 0.16 );
}

.woocommerce-page form .form-row.woocommerce-validated input.input-text {
	border-color: #7FA98C;
}

/* --- Botones ------------------------------------------------------------- */

/*
 * El CTA de compra usa el mismo tratamiento que el del home (dorado sobre
 * texto verde): es el botón que el visitante ya aprendió a reconocer.
 * Contraste verificado: 5.29:1.
 */
.woocommerce-page .wc-proceed-to-checkout a.button,
.woocommerce-page .wc-proceed-to-checkout .btn,
.woocommerce-page .wc-proceed-to-checkout a.btn-v-dark,
.woocommerce-page #place_order,
.woocommerce-page button.button.alt {
	/*
	 * Flex y no block: el markup es «texto + <i> del ícono», y como inline el
	 * renglón cortaba entre los dos y la flecha caía sola a la línea siguiente.
	 * Como items de un flex quedan siempre en la misma fila.
	 */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	width: 100%;
	padding: 0.95rem 1.25rem;
	background: var( --bsv-oro );
	border: 2px solid var( --bsv-oro );
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var( --bsv-verde-legal );
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

/* El ícono ya está separado por el gap del flex; el padding de utilidad de
   Porto lo desalineaba respecto del texto. */
.woocommerce-page .wc-proceed-to-checkout .btn i,
.woocommerce-page #place_order i,
.woocommerce-page button.button.alt i {
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	line-height: 1;
}

.woocommerce-page .wc-proceed-to-checkout a.button:hover,
.woocommerce-page .wc-proceed-to-checkout .btn:hover,
.woocommerce-page .wc-proceed-to-checkout a.btn-v-dark:hover,
.woocommerce-page #place_order:hover,
.woocommerce-page button.button.alt:hover {
	background: var( --bsv-oro-claro );
	border-color: var( --bsv-oro-claro );
	color: var( --bsv-verde-legal );
}

.woocommerce-page .wc-proceed-to-checkout a.button:active,
.woocommerce-page .wc-proceed-to-checkout .btn:active,
.woocommerce-page #place_order:active {
	transform: translateY( 1px );
}

.woocommerce-page #place_order:disabled,
.woocommerce-page #place_order[disabled] {
	background: #E4E7EA;
	border-color: #E4E7EA;
	color: #8A9199;
	cursor: not-allowed;
}

/* Acciones secundarias: presentes pero sin competir con el CTA. */
.woocommerce-page .cart-actions .button,
.woocommerce-page .coupon .button {
	padding: 0.7rem 1.1rem;
	background: transparent;
	border: 1px solid #C9D0D6;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var( --bsv-texto );
	text-transform: none;
	transition: border-color 0.15s, background 0.15s;
}

.woocommerce-page .cart-actions .button:hover,
.woocommerce-page .coupon .button:hover {
	background: var( --bsv-gris-claro );
	border-color: #A7B0B8;
	color: var( --bsv-verde );
}

.woocommerce-page .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: stretch;
}

.woocommerce-page .coupon .input-text {
	flex: 1 1 12rem;
	min-width: 0;
}

/* --- Métodos de pago ----------------------------------------------------- */

.woocommerce-page #payment .payment_methods {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.woocommerce-page #payment .payment_methods > li {
	padding: 1rem;
	margin-bottom: 0.6rem;
	border: 1px solid #E2E6E9;
	border-radius: 8px;
	transition: border-color 0.15s, background 0.15s;
}

.woocommerce-page #payment .payment_methods > li:hover {
	border-color: #A7B0B8;
}

/* El método elegido se marca con el verde y una superficie propia: el radio
   solo es demasiado sutil para confirmar una decisión de pago. */
.woocommerce-page #payment .payment_methods > li:has( input:checked ) {
	background: #F4F8F5;
	border-color: var( --bsv-verde );
	box-shadow: inset 0 0 0 1px var( --bsv-verde );
}

.woocommerce-page #payment .payment_methods label {
	font-size: 15px;
	font-weight: 600;
	color: var( --bsv-texto );
	cursor: pointer;
}

.woocommerce-page #payment .payment_box {
	margin-top: 0.85rem;
	padding: 0.9rem 1rem;
	background: var( --bsv-blanco );
	border: 1px solid #E2E6E9;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.55;
	color: #5A636B;
}

.woocommerce-page #payment .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-page #payment input[type="radio"],
.woocommerce-page #payment input[type="checkbox"] {
	accent-color: var( --bsv-verde );
	width: 18px;
	height: 18px;
}

/* --- Avisos -------------------------------------------------------------- */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	padding: 0.95rem 1.15rem;
	margin-bottom: 1.25rem;
	border: 1px solid;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.55;
	list-style: none;
}

.woocommerce-error {
	background: #FDF3F2;
	border-color: #E8B4AC;
	color: #8A2318;
}

.woocommerce-message {
	background: #F4F8F5;
	border-color: #9CC2A8;
	color: #1B5B31;
}

.woocommerce-info {
	background: #FFFBEF;
	border-color: #E7CE86;
	color: #6B5310;
}

/* --- Foco visible: se respeta en todo el flujo de compra ----------------- */

.woocommerce-page a:focus-visible,
.woocommerce-page button:focus-visible,
.woocommerce-page input:focus-visible,
.woocommerce-page select:focus-visible {
	outline: 3px solid var( --bsv-verde );
	outline-offset: 2px;
}

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

@media ( max-width: 991px ) {
	.woocommerce-cart .cart_totals,
	.woocommerce-checkout #order_review {
		margin-top: 1.75rem;
	}
}

@media ( max-width: 575px ) {
	/*
	 * #order_review dejó de ser el panel: ahora la tarjeta es el .box-content
	 * de Porto, que lo envuelve. Esta regla quedó de esa etapa y le devolvía
	 * padding al contenedor interno, sumándolo al del panel. Va en cero: el
	 * espaciado lo define la tarjeta, no su contenido.
	 */
	.woocommerce-checkout #order_review {
		padding: 0;
	}

	.woocommerce-cart .cart_totals {
		padding: 1.25rem;
	}

	.woocommerce-cart .cart_item .product-thumbnail img {
		width: 56px;
	}

	.woocommerce-page .order-total td .amount,
	.woocommerce-page .order-total .woocommerce-Price-amount {
		font-size: 21px;
	}

	/* En columna, el flex-basis del input pasaba a ser altura y el campo
	   crecía hasta unos 200px de alto. Se fija a contenido. */
	.woocommerce-page .coupon {
		flex-direction: column;
		gap: 0.65rem;
	}

	.woocommerce-page .coupon .input-text {
		flex: 0 0 auto;
		width: 100%;
	}

	.woocommerce-page .coupon .button {
		width: 100%;
	}
}

/* --- Grilla de los campos de facturación --------------------------------- */

/*
 * WooCommerce maqueta estos campos con floats (.form-row-first / -last a ~47%
 * y clear:left). Las filas anchas no limpian el float de forma confiable: el
 * label de "Correo electrónico" quedaba corrido a la derecha, alineado con la
 * segunda columna mientras su input arrancaba a la izquierda.
 *
 * Con grid el par por fila es explícito, las filas anchas ocupan las dos
 * columnas y el ritmo vertical lo da un único gap en vez de márgenes sueltos.
 */
.woocommerce-page .woocommerce-billing-fields__field-wrapper,
.woocommerce-page .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.25rem 1.5rem;
	align-items: start;
}

.woocommerce-page .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-page .woocommerce-shipping-fields__field-wrapper > .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce-page .woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-page .woocommerce-shipping-fields__field-wrapper > .form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce-page .woocommerce-billing-fields h3,
.woocommerce-page #order_review_heading {
	margin: 0 0 1.5rem;
}

/* Los select traen su propia altura del navegador y quedaban más altos que los
   inputs de la misma fila. */
.woocommerce-page form .form-row select {
	height: 46px;
}

@media ( max-width: 767px ) {
	.woocommerce-page .woocommerce-billing-fields__field-wrapper,
	.woocommerce-page .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}
}

/* --- Resumen del pedido: una sola tarjeta -------------------------------- */

/*
 * El panel ya es la superficie elevada. La tabla de Porto traía su propio
 * borde y fondo, así que se veía una tarjeta dentro de otra.
 */
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .shop_table tbody,
.woocommerce-checkout #order_review .shop_table tfoot {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
	border-left: 0;
	border-right: 0;
	background: transparent;
}

/*
 * El filete va en el <tr>, no en las celdas. Dibujado por celda se cortaba
 * entre columnas y se leía como dos segmentos a distinta altura.
 * Con border-collapse: collapse el borde de la fila cruza entero.
 */
.woocommerce-checkout #order_review .order-total,
.woocommerce-page .cart_totals .order-total {
	border-top: 2px solid var( --bsv-texto );
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td,
.woocommerce-page .cart_totals .order-total th,
.woocommerce-page .cart_totals .order-total td {
	border-top: 0;
	box-shadow: none;
}

/*
 * Porto mete <h4 class="my-3"> dentro del <th> y <h4 class="mb-0"> en otra
 * fila: los márgenes de utilidad desalineaban verticalmente las etiquetas
 * respecto de sus importes. El espaciado lo gobierna el padding de la celda.
 */
.woocommerce-checkout #order_review th h4,
.woocommerce-checkout #order_review td h4,
.woocommerce-page .cart_totals th h4,
.woocommerce-page .cart_totals td h4 {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
}

/* --- Ritmo entre bloques del checkout ------------------------------------ */

.woocommerce-page .woocommerce-billing-fields,
.woocommerce-page .woocommerce-additional-fields,
.woocommerce-page #payment {
	margin-bottom: 2rem;
}

.woocommerce-page .woocommerce-billing-fields h3,
.woocommerce-page .woocommerce-additional-fields h3 {
	font-size: 20px;
	line-height: 1.25;
	color: var( --bsv-texto );
}

/* Más aire arriba de un título que abajo: agrupa con lo que encabeza. */
.woocommerce-page .woocommerce-additional-fields h3,
.woocommerce-page #payment .payment_methods + * {
	margin-top: 2.25rem;
}

/* --- Aplanar el bloque de pago ------------------------------------------- */

/*
 * Dentro del resumen se apilaban cuatro superficies con borde: el panel, el
 * <li> del método, el .payment_box y las cajas propias de Mercado Pago. Cada
 * nivel resta jerarquía al anterior y el bloque termina leyéndose como un
 * laberinto. El <li> queda como única superficie: lo de adentro es su
 * contenido, no otra tarjeta.
 */
.woocommerce-page #payment .payment_box {
	margin-top: 0.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woocommerce-page #payment .payment_methods > li {
	padding: 1rem 1.15rem;
}

/* Mercado Pago dibuja su propio contenedor; adentro del <li> sobra. */
.woocommerce-page #payment .mp-checkout-custom-container,
.woocommerce-page #payment .mp-checkout-custom-load {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.woocommerce-page #payment .mp-checkout-custom-card-flags {
	margin-top: 0.75rem;
}

/* El título de la sección respira respecto del bloque anterior. */
.woocommerce-page #payment > h3,
.woocommerce-page #order_review #payment h3 {
	margin: 2rem 0 1rem;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --bsv-texto );
}

/* --- WEB-05 · Confirmación de edad en el checkout ------------------------ */

/*
 * La regla genérica de labels del formulario (0,3,1) le ganaba a
 * .bsv-confirma-edad label (0,1,1): el label quedaba como bloque de 13px y el
 * flex nunca se aplicaba, así que el checkbox y el texto se amontonaban contra
 * el borde. Estos selectores suben la especificidad lo justo.
 *
 * WooCommerce además intercala un <span class="woocommerce-input-wrapper">
 * entre el <p> y el <label>, que por ser inline no dejaba que el label ocupara
 * el ancho.
 */
.woocommerce-page form .form-row.bsv-confirma-edad .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.woocommerce-page form .form-row.bsv-confirma-edad label,
.woocommerce-page form .form-row.bsv-confirma-edad label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var( --bsv-texto );
	cursor: pointer;
}

.woocommerce-page form .form-row.bsv-confirma-edad input[type="checkbox"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	/* Centra la caja respecto de la primera línea de texto (15px × 1.45). */
	margin-top: 0.05em;
	accent-color: var( --bsv-verde );
	cursor: pointer;
}

.woocommerce-page form .form-row.bsv-confirma-edad .required {
	color: var( --bsv-rojo );
	text-decoration: none;
}

/*
 * El checkbox y la leyenda +18 hablan de lo mismo. Como dos cajas ámbar
 * consecutivas se leen como dos avisos distintos, se fusionan en una sola
 * superficie: la declaración arriba, la advertencia legal debajo.
 */
.woocommerce-page .form-row.bsv-confirma-edad {
	margin-bottom: 0;
	/* Mismo padding en las dos mitades: así el filete divisorio queda con
	   igual aire arriba y abajo, y el bloque se lee como una sola pieza. */
	padding: 1.1rem 1.25rem;
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.woocommerce-page .form-row.bsv-confirma-edad + .bsv-leyenda-juego {
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem;
	background: #FFF8E1;
	border: 2px solid var( --bsv-oro );
	border-top: 1px dashed #E0C56B;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
}

.woocommerce-page .form-row.bsv-confirma-edad + .bsv-leyenda-juego strong {
	font-weight: 700;
	color: #111;
}

/* --- Mobile -------------------------------------------------------------- */

/*
 * "Actualizar carrito" queda fuera de .cart-actions (Porto lo cuelga de
 * #panel-cart-discount), así que no lo alcanzaba la regla de acciones
 * secundarias y se veía con el gris por defecto del tema.
 */
.woocommerce-page .wc-action-btn,
.woocommerce-page button[name="update_cart"],
.woocommerce-page button[name="apply_coupon"] {
	padding: 0.7rem 1.1rem;
	min-height: 46px;
	background: transparent;
	border: 1px solid #C9D0D6;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var( --bsv-texto );
	text-transform: none;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.woocommerce-page .wc-action-btn:hover,
.woocommerce-page button[name="update_cart"]:hover,
.woocommerce-page button[name="apply_coupon"]:hover {
	background: var( --bsv-gris-claro );
	border-color: #A7B0B8;
	color: var( --bsv-verde );
}

.woocommerce-page .wc-action-btn:disabled,
.woocommerce-page button[name="update_cart"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media ( max-width: 767px ) {

	/*
	 * Al apilarse la tabla, .product-price y .product-quantity quedan sin
	 * etiqueta: WooCommerce solo pone data-title en producto y subtotal, así
	 * que en el listado aparecían un "1" y un importe sueltos, sin contexto.
	 */
	.woocommerce-cart .cart_item .product-price,
	.woocommerce-cart .cart_item .product-quantity,
	.woocommerce-cart .cart_item .product-subtotal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		text-align: right;
	}

	.woocommerce-cart .cart_item .product-price::before {
		content: "Precio";
	}

	.woocommerce-cart .cart_item .product-quantity::before {
		content: "Cantidad";
	}

	.woocommerce-cart .cart_item .product-subtotal::before {
		content: "Subtotal";
	}

	.woocommerce-cart .cart_item .product-price::before,
	.woocommerce-cart .cart_item .product-quantity::before,
	.woocommerce-cart .cart_item .product-subtotal::before {
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #6B747C;
	}

	/* En mobile la cabecera de la tabla no aporta: las etiquetas van por fila. */
	.woocommerce-page .cart-table thead {
		display: none;
	}

	/* Objetivo táctil parejo en todos los controles del flujo de compra. */
	.woocommerce-page .quantity input,
	.woocommerce-page .wc-action-btn,
	.woocommerce-page button[name="update_cart"],
	.woocommerce-page button[name="apply_coupon"] {
		width: 100%;
		min-height: 46px;
	}

	.woocommerce-cart .cart_item .product-remove a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	/*
	 * El widget flotante de WhatsApp se ancla abajo a la izquierda y tapa el
	 * final del contenido. Se reserva ese alto para que nunca quede encima del
	 * total ni del botón de compra.
	 */
	.woocommerce-cart .cart_totals,
	.woocommerce-checkout .checkout-order-review .box-content {
		margin-bottom: 5.5rem;
	}
}

/* --- Celeste de Porto → verde de marca (red de seguridad) ---------------- */

/*
 * Complementa la redefinición de --porto-primary-color en bsv-tokens.css, para
 * los casos donde Porto escribió el celeste literal en vez de usar la variable.
 */
.woocommerce-page a.current,
.woocommerce-page .cart_item .product-price .amount,
.woocommerce-cart .cart_item .product-quantity,
.woocommerce-page .cart-table .amount {
	color: var( --bsv-verde );
}

/* La franja superior de la tabla del carrito tomaba el skin color. */
.woocommerce-page .cart-table,
.woocommerce-page .cart_totals .card,
.woocommerce-page .shop_table {
	border-top-color: var( --bsv-verde );
}

/*
 * La tarjeta de arriba del carrito es la propia <table>: Porto la convierte en
 * caja con borde y sombra solo en mobile (woopage.css, .shop_table.responsive)
 * y no le pone radio, así que quedaba con esquinas rectas al lado del panel de
 * totales, que sí lo tiene.
 *
 * Se igualan borde, sombra y radio a los de .cart_totals para que sean la
 * misma superficie. No hace falta overflow:hidden: el borde lo dibuja la tabla
 * misma, así que el radio ya lo recorta —y overflow sobre <table> es terreno
 * inconsistente entre motores.
 *
 * El selector lleva .woocommerce-cart adelante (0,3,0) para ganarle al de
 * Porto (0,2,0) por especificidad y no por orden de encolado. Por eso mismo el
 * color va lado por lado y no como shorthand: border-color le ganaría también
 * a la regla que pinta la franja verde de arriba (0,2,0) y la dejaría gris.
 */
@media ( max-width: 767px ) {
	.woocommerce-cart .shop_table.responsive {
		/*
		 * Sin esto el border-radius de abajo no se pinta: por spec (CSS
		 * Backgrounds & Borders L3, §5.3) border-radius no tiene efecto sobre
		 * un elemento table con border-collapse:collapse, y más arriba se lo
		 * ponemos a todo .shop_table. No es que el radio quede chico: el
		 * navegador lo descarta entero.
		 *
		 * Pasar al modelo separado no cambia nada visualmente porque Porto ya
		 * declara tr y td como display:block en la vista responsive, así que
		 * esos bordes se pintan como bordes de bloque y nunca dependieron del
		 * colapso. El border-spacing en cero evita los huecos del modelo
		 * separado.
		 */
		border-collapse: separate;
		border-spacing: 0;

		border-right-color: #E2E6E9;
		border-bottom-color: #E2E6E9;
		border-left-color: #E2E6E9;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba( 16, 24, 32, 0.04 ), 0 12px 28px rgba( 16, 24, 32, 0.06 );
	}
}

/* --- Padding de las filas del carrito ------------------------------------ */

@media ( max-width: 767px ) {

	/*
	 * El padding horizontal se define UNA sola vez, acá, y cada celda declara
	 * únicamente el vertical.
	 *
	 * No es cosmético: este selector es (0,2,1) y los de cada celda son
	 * (0,3,0), así que cualquier shorthand `padding: X 0` en una celda le gana
	 * y le devuelve el lateral a cero. Ya pasó: las filas de precio, cantidad
	 * y subtotal quedaron con la etiqueta pegada al borde izquierdo y el
	 * importe cortado contra el derecho. Usar padding-top/-bottom en las
	 * celdas es lo que evita que vuelva a pasar.
	 */
	.woocommerce-cart .cart_item td {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* La miniatura tenía tanto alto propio que la fila se veía vacía. */
	.woocommerce-cart .cart_item .product-thumbnail {
		padding-top: 1rem;
		padding-bottom: 0.5rem;
		text-align: center;
	}

	.woocommerce-cart .cart_item .product-thumbnail img {
		width: 84px;
	}

	.woocommerce-cart .cart_item .product-name {
		padding-top: 0;
		padding-bottom: 0.9rem;
		text-align: center;
		font-size: 16px;
	}

	/* Filas etiqueta/valor: mismo alto y aire parejo arriba y abajo. */
	.woocommerce-cart .cart_item .product-price,
	.woocommerce-cart .cart_item .product-quantity,
	.woocommerce-cart .cart_item .product-subtotal {
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
		min-height: 48px;
	}

	/* El bloque de cupón respiraba distinto arriba que abajo. */
	.woocommerce-page .coupon,
	.woocommerce-page #panel-cart-discount {
		padding: 1.25rem 1rem;
	}
}

/* --- Alturas parejas en todos los campos --------------------------------- */

/*
 * min-height no alcanzaba: cada tipo de control calcula su alto de forma
 * distinta. Los <input type="number"> reservan lugar para los spinners y
 * quedaban más altos que el resto; los <select> nativos aplican su propio
 * padding interno. Se fija una altura única para los tres.
 */
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select,
.woocommerce-page .coupon input.input-text {
	height: 46px;
	min-height: 46px;
}

.woocommerce-page form .form-row textarea {
	height: auto;
	min-height: 92px;
	padding-top: 0.7rem;
}

/* Los spinners de los campos numéricos: appearance:none no los saca en
   Chrome, hay que apuntarles a los pseudo-elementos. */
.woocommerce-page form .form-row input[type="number"] {
	-moz-appearance: textfield;
}

.woocommerce-page form .form-row input[type="number"]::-webkit-outer-spin-button,
.woocommerce-page form .form-row input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*
 * Al quitarle appearance al <select> se va también la flecha nativa. Se dibuja
 * una propia con el verde de marca y se reserva su espacio a la derecha para
 * que el texto no quede debajo.
 */
.woocommerce-page form .form-row select {
	padding-right: 2.5rem;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230D6C30' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* El foco no debe cambiar el alto: el anillo va por fuera de la caja. */
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row select:focus {
	height: 46px;
}

/* =========================================================================
 * Listado de tienda
 * ====================================================================== */

/* Barra de orden y cantidad: mismos controles que el resto del flujo. */
.woocommerce-page .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering .orderby,
.woocommerce-page .shop-loop-before select {
	height: 44px;
	padding: 0.5rem 2.25rem 0.5rem 0.85rem;
	background-color: var( --bsv-blanco );
	border: 1px solid #C9D0D6;
	border-radius: 8px;
	font-size: 14px;
	color: var( --bsv-texto );
	appearance: none;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230D6C30' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* --- Tarjeta de producto ------------------------------------------------- */

.woocommerce-page .products .product .product-inner {
	height: 100%;
	padding: 0.75rem 0.75rem 1.25rem;
	background: var( --bsv-blanco );
	border: 1px solid #E2E6E9;
	border-radius: 10px;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.woocommerce-page .products .product .product-inner:hover {
	border-color: #C9D0D6;
	box-shadow: 0 2px 4px rgba( 16, 24, 32, 0.05 ), 0 14px 32px rgba( 16, 24, 32, 0.09 );
	transform: translateY( -2px );
}

.woocommerce-page .products .product .product-image {
	margin-bottom: 1rem;
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce-page .products .product .product-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* La categoría es metadato: informa, no compite con el nombre. */
.woocommerce-page .products .product .category-list {
	margin-bottom: 0.35rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6B747C;
}

.woocommerce-page .products .product .product-loop-title,
.woocommerce-page .products .product .woocommerce-loop-product__title {
	margin: 0 0 0.5rem;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 700;
	color: var( --bsv-texto );
}

.woocommerce-page .products .product .price {
	display: block;
	margin: 0 0 1rem;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --bsv-verde );
}

/*
 * Porto define el contenedor del botón como shrink-to-fit:
 *
 *   ul.products .add-links { display: inline-block }   (theme_shop.css)
 *
 * En un inline-block el ancho porcentual de un hijo se trata como auto al
 * calcular el max-content del padre. O sea: .add-links se dimensiona al
 * texto de "AGREGAR AL CARRITO" en una sola línea (~220px) y recién ahí el
 * width:100% del botón se resuelve contra esos 220px. El botón nunca ve el
 * ancho de la tarjeta y se desborda sobre la columna vecina — visible en
 * cuanto la grilla pasa a dos columnas.
 *
 * Se pasa a block con ancho propio para que el 100% del botón se resuelva
 * contra la tarjeta. Sin esto, cualquier width que le pongamos al botón es
 * un porcentaje de sí mismo.
 */
.woocommerce-page .products .product .add-links-wrap,
.woocommerce-page .products .product .add-links {
	display: block;
	width: 100%;
}

/*
 * Va en verde sólido. Estuvo en contorno para no competir con el dorado de
 * "finalizar la compra", pero ese dorado no existe en el listado: acá esta
 * es la única acción de la tarjeta, y en mobile —una card por fila— es lo
 * único accionable de la pantalla. Un botón hueco la subordinaba a nada.
 *
 * Blanco sobre --bsv-verde: 6.55:1, AA.
 */
.woocommerce-page .products .product .add_to_cart_button {
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 46px;
	padding: 0.7rem 1rem;
	background: var( --bsv-verde );
	border: 2px solid var( --bsv-verde );
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var( --bsv-blanco );
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.woocommerce-page .products .product .add_to_cart_button:hover,
.woocommerce-page .products .product .add_to_cart_button:focus {
	background: var( --bsv-verde-legal );
	border-color: var( --bsv-verde-legal );
	color: var( --bsv-blanco );
}

/* =========================================================================
 * Ficha de producto
 * ====================================================================== */

.woocommerce-page.single-product .product_title {
	margin-bottom: 0.6rem;
	line-height: 1.15;
}

.woocommerce-page.single-product .summary .price,
.woocommerce-page.single-product .summary .price .amount {
	font-size: clamp( 28px, 4vw, 36px );
	line-height: 1.1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --bsv-verde );
}

.woocommerce-page.single-product .summary .stock.in-stock {
	color: var( --bsv-verde );
	font-weight: 600;
}

/* Este sí es el CTA de compra: dorado, igual que el del checkout. */
.woocommerce-page.single-product .single_add_to_cart_button,
html .woocommerce-page.single-product .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-width: 260px;
	min-height: 52px;
	padding: 0.95rem 1.75rem;
	background: var( --bsv-oro );
	border: 2px solid var( --bsv-oro );
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --bsv-verde-legal );
	text-transform: uppercase;
}

html .woocommerce-page.single-product .single_add_to_cart_button:hover,
html .woocommerce-page.single-product .single_add_to_cart_button:focus {
	background: var( --bsv-oro-claro );
	border-color: var( --bsv-oro-claro );
	color: var( --bsv-verde-legal );
}

.woocommerce-page.single-product .quantity input.qty {
	height: 52px;
	min-width: 72px;
	padding: 0.5rem;
	border: 1px solid #C9D0D6;
	border-radius: 8px;
	font-size: 16px;
	text-align: center;
}

/* Pestaña de valoraciones */
.woocommerce-page.single-product .tabs li.active a,
.woocommerce-page.single-product .wc-tabs li.active a {
	color: var( --bsv-verde );
	border-bottom-color: var( --bsv-verde );
}

@media ( max-width: 767px ) {
	.woocommerce-page.single-product .single_add_to_cart_button {
		width: 100%;
		min-width: 0;
	}

	.woocommerce-page .products .product .product-inner {
		padding: 0.6rem 0.6rem 1rem;
	}

	/*
	 * La grilla es de dos columnas en todo mobile (ccols-2 en ul.products),
	 * así que la tarjeta queda en ~124px de contenido y el botón en ~104px
	 * de caja de texto. "AGREGAR AL CARRITO" no entra en una línea a ningún
	 * tamaño legible: a 10px ya son ~112px y sigue sin entrar.
	 *
	 * Entonces no se achica hasta que entre, se lo deja envolver. Porto trae
	 * white-space:nowrap en .add-links .add_to_cart_button y overflow:hidden
	 * en ul.products .add-links .button, combinación que corta el texto en
	 * seco en vez de pasarlo de línea. Se revierte el nowrap acá.
	 *
	 * A 13px queda "AGREGAR AL" (~79px) sobre "CARRITO" (~55px), las dos
	 * holgadas dentro de los 104px. El botón crece a ~59px de alto —por
	 * encima del min-height de 46px— igual en las dos columnas, así que la
	 * grilla no se desalinea.
	 */
	.woocommerce-page .products .product .add_to_cart_button {
		padding: 0.7rem 0.5rem;
		font-size: 13px;
		line-height: 1.25;
		letter-spacing: 0.01em;
		text-align: center;
		white-space: normal;
	}

	/*
	 * El ícono de carrito de Porto es un ::before, o sea un ítem flex más.
	 * Se come ~23px de los 104px disponibles y deja el texto al borde de no
	 * entrar. A este ancho es decoración compitiendo por espacio: se oculta.
	 * Porto hace lo mismo en sus propios layouts angostos.
	 */
	.woocommerce-page .products .product .add_to_cart_button::before {
		display: none;
	}
}

/* =========================================================================
 * Compra finalizada
 * ====================================================================== */

.woocommerce-page .woocommerce-notice--success,
.woocommerce-page .woocommerce-thankyou-order-received {
	display: block;
	padding: 2rem 1.75rem;
	margin-bottom: 2rem;
	background: #F4F8F5;
	border: 1px solid #9CC2A8;
	border-radius: 10px;
	text-align: center;
	color: var( --bsv-texto );
}

.bsv-gracias__titulo {
	display: block;
	margin-bottom: 0.5rem;
	font-size: clamp( 24px, 4vw, 30px );
	line-height: 1.15;
	font-weight: 700;
	color: var( --bsv-verde );
}

.bsv-gracias__bajada {
	display: block;
	max-width: 46ch;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.55;
	color: var( --bsv-texto );
}

/* Resumen del pedido: número, fecha, total, método. */
.woocommerce-page .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var( --bsv-blanco );
	border: 1px solid #E2E6E9;
	border-radius: 10px;
	list-style: none;
}

.woocommerce-page .woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6B747C;
	text-align: left;
}

.woocommerce-page .woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.35rem;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
	color: var( --bsv-texto );
}

.woocommerce-page .woocommerce-order-overview .woocommerce-order-overview__total strong {
	font-size: 20px;
	color: var( --bsv-verde );
}

/* --- Qué sigue ahora ----------------------------------------------------- */

.bsv-gracias__pasos {
	margin: 2rem 0 0;
	padding: 1.75rem;
	background: var( --bsv-gris-claro );
	border: 1px solid #E2E6E9;
	border-radius: 10px;
}

.bsv-gracias__pasos-titulo {
	margin: 0 0 1.25rem;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var( --bsv-texto );
}

.bsv-gracias__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bsvpaso;
}

.bsv-gracias__lista li {
	position: relative;
	counter-increment: bsvpaso;
	margin: 0 0 1rem;
	padding-left: 2.75rem;
	font-size: 15px;
	line-height: 1.6;
	color: var( --bsv-texto );
}

.bsv-gracias__lista li:last-child {
	margin-bottom: 0;
}

.bsv-gracias__lista li::before {
	content: counter( bsvpaso );
	position: absolute;
	left: 0;
	top: 0.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var( --bsv-verde );
	color: var( --bsv-blanco );
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
}

.bsv-gracias__pasos .bsv-leyenda-juego {
	margin-top: 1.5rem;
}

/* Detalle del pedido */
.woocommerce-page .woocommerce-order-details,
.woocommerce-page .woocommerce-customer-details {
	margin-top: 2rem;
}

.woocommerce-page .woocommerce-order-details__title,
.woocommerce-page .woocommerce-column__title {
	margin: 0 0 1.25rem;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --bsv-texto );
}

@media ( max-width: 575px ) {
	.bsv-gracias__pasos,
	.woocommerce-page .woocommerce-order-overview {
		padding: 1.25rem;
	}
}

/* --- select2 / selectWoo -------------------------------------------------- */

/*
 * WooCommerce reemplaza los <select> de país y provincia por selectWoo (una
 * variante de select2) recién en el cliente: el <select> original queda oculto
 * y lo que se ve es markup propio del plugin. Por eso los estilos aplicados al
 * select nativo no llegaban y el control quedaba con otra altura y el texto
 * apagado, como si fuera un placeholder.
 */
.woocommerce-page .select2-container--default .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	height: 46px;
	padding: 0 2.5rem 0 0.85rem;
	background: var( --bsv-blanco );
	border: 1px solid #C9D0D6;
	border-radius: 8px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 44px;
	font-size: 15px;
	color: var( --bsv-texto );   /* Sólido: antes se leía como texto deshabilitado. */
}

.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #7A838B;
}

/*
 * Una sola flecha, garantizado. En vez de ocultar el <b> interno de select2 y
 * dibujar un ::after —que depende de que su markup sea el esperado— se oculta
 * el contenedor de la flecha completo y el chevron se pinta como fondo del
 * propio control. Así no hay forma de que aparezcan dos.
 */
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-page .select2-container .select2-selection--single .select2-selection__arrow {
	display: none;
}

.woocommerce-page .select2-container--default .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230D6C30' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 12px 8px;
}

.woocommerce-page .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-page .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var( --bsv-verde );
	box-shadow: 0 0 0 3px rgba( 13, 108, 48, 0.16 );
}

/* Desplegable */
.select2-container--default .select2-dropdown {
	border: 1px solid #C9D0D6;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 12px 28px rgba( 16, 24, 32, 0.12 );
}

.select2-container--default .select2-results__option {
	padding: 0.6rem 0.85rem;
	font-size: 15px;
	color: #333940;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var( --bsv-verde );
	color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: #F4F8F5;
	color: #0D6C30;
	font-weight: 600;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	height: 40px;
	padding: 0 0.7rem;
	border: 1px solid #C9D0D6;
	border-radius: 6px;
	font-size: 15px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	outline: none;
	border-color: var( --bsv-verde );
}



/* --- Resumen del checkout: densidad -------------------------------------- */

/*
 * Este panel es un resumen de control, no el listado del carrito: el comprador
 * ya eligió y solo verifica. Va más compacto que la tabla del carrito, para
 * que el total y el botón de pago entren en pantalla sin scrollear.
 */
.woocommerce-checkout .checkout-order-review .box-content {
	padding: 1.5rem;
}

.woocommerce-checkout #order_review_heading {
	margin-bottom: 1rem;
}

.woocommerce-checkout #order_review .shop_table thead th {
	padding-bottom: 0.6rem;
}

.woocommerce-checkout #order_review .cart_item td,
.woocommerce-checkout #order_review .product-checkout-wrap {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	vertical-align: middle;
}

.woocommerce-checkout #order_review .cart_item .product-thumbnail {
	width: 52px;
	padding-right: 0.75rem;
}

.woocommerce-checkout #order_review .cart_item .product-thumbnail img {
	width: 52px;
	border-radius: 6px;
}

.woocommerce-checkout #order_review .cart_item .product-name {
	font-size: 14px;
	line-height: 1.4;
}

.woocommerce-checkout #order_review .cart-subtotal th,
.woocommerce-checkout #order_review .cart-subtotal td {
	padding: 0.65rem 0;
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	padding-top: 0.85rem;
	padding-bottom: 0.25rem;
}

.woocommerce-checkout #payment {
	margin-top: 1.25rem;
}

@media ( max-width: 767px ) {
	.woocommerce-checkout .checkout-order-review .box-content {
		padding: 1.15rem;
	}

	.woocommerce-checkout #order_review .cart_item td,
	.woocommerce-checkout #order_review .product-checkout-wrap {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}

	.woocommerce-checkout #order_review .cart_item .product-thumbnail,
	.woocommerce-checkout #order_review .cart_item .product-thumbnail img {
		width: 44px;
	}

	.woocommerce-checkout #order_review .order-total td .amount,
	.woocommerce-checkout #order_review .order-total .woocommerce-Price-amount {
		font-size: 20px;
	}

	.woocommerce-page #payment .payment_methods > li {
		padding: 0.85rem 0.9rem;
	}
}

/* --- Alineación de los bloques dentro de "Tu pedido" --------------------- */

/*
 * Porto le agrega la utilidad px-2 a la lista de métodos de pago. Es el único
 * hijo del panel con padding horizontal propio, así que la caja del método
 * quedaba más angosta que el texto de privacidad, el bloque de edad y el botón.
 * Todos comparten ahora la misma caja: el panel es quien define los márgenes.
 */
.woocommerce-checkout #payment .payment_methods.px-2,
.woocommerce-checkout #payment .methods.px-2 {
	padding-left: 0;
	padding-right: 0;
}

/* Ritmo vertical entre los bloques del panel. */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	margin: 1.25rem 0;
	font-size: 13px;
	line-height: 1.6;
	color: #6B747C;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
}

.woocommerce-checkout #payment .porto-separator {
	margin: 1.25rem 0;
}

.woocommerce-checkout #payment .place-order {
	margin-top: 0;
	padding: 0;
}

/* El bloque de edad y el botón comparten el ancho del panel. */
.woocommerce-checkout .form-row.bsv-confirma-edad,
.woocommerce-checkout .form-row.bsv-confirma-edad + .bsv-leyenda-juego {
	margin-left: 0;
	margin-right: 0;
}

@media ( max-width: 767px ) {
	.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
	.woocommerce-checkout #payment .porto-separator {
		margin: 1rem 0;
	}

	.woocommerce-checkout .form-row.bsv-confirma-edad,
	.woocommerce-checkout .form-row.bsv-confirma-edad + .bsv-leyenda-juego {
		padding: 0.95rem 1rem;
	}

	.woocommerce-checkout .form-row.bsv-confirma-edad + .bsv-leyenda-juego {
		margin-bottom: 1.25rem;
	}

	/* El bloque de Mercado Pago trae sus propios contenedores: sin esto el
	   formulario de tarjeta suma tres niveles de padding. */
	.woocommerce-checkout #payment .payment_box .mp-checkout-custom-container,
	.woocommerce-checkout #payment .payment_box > div {
		padding-left: 0;
		padding-right: 0;
	}
}

/* --- Indicador de pasos del checkout ------------------------------------- */

/*
 * El markup de Porto es una lista con chevrons entre ítems, y al tercero le
 * pone la utilidad d-block: eso lo fuerza a ocupar su propia línea y en mobile
 * el renglón se parte con la flecha colgando adelante.
 *
 * En vez de pelearle al wrap, se reconstruye como lo que realmente es: un
 * indicador de progreso de tres pasos. Números en círculo unidos por una línea,
 * que comunica en qué etapa está la compra sin depender del ancho disponible.
 *
 * Se acota a .woo-page-header para no tocar las migas de pan del resto del sitio.
 */
.woo-page-header .breadcrumb {
	display: flex;
	align-items: flex-start;
	max-width: 520px;
	margin: 0 auto 2.25rem;
	padding: 0;
	list-style: none;
	counter-reset: bsvstep;
	background: none;
}

.woo-page-header .breadcrumb > li {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	counter-increment: bsvstep;
	text-align: center;
}

/*
 * Los chevrons ya no hacen falta: la línea de conexión los reemplaza.
 *
 * Lleva !important a propósito, y es el único de la hoja. Porto le pone la
 * utilidad .d-block al tercer delimitador, y las utilidades de display de
 * Bootstrap se declaran con !important: sin esto la especificidad no alcanza
 * y ese chevron queda visible, empujando su etiqueta a otra línea.
 */
.woo-page-header .breadcrumb .delimiter,
.woo-page-header .breadcrumb .delimiter.d-block {
	display: none !important;
}

.woo-page-header .breadcrumb > li::before {
	content: counter( bsvstep );
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var( --bsv-verde );
	color: var( --bsv-blanco );
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* Línea que une cada paso con el anterior. Va detrás de los círculos. */
.woo-page-header .breadcrumb > li + li::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 15px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: var( --bsv-verde );
}

/* Paso todavía no alcanzado: círculo y línea apagados. El número igual tiene
   que leerse — con #6B747C daba 3.83:1; este llega a 4.93:1. */
.woo-page-header .breadcrumb > li.disable::before {
	background: #E4E7EA;
	color: #5A636B;
}

.woo-page-header .breadcrumb > li.disable::after {
	background: #E4E7EA;
}

.woo-page-header .breadcrumb > li a {
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	color: #6B747C;
	text-decoration: none;
}

/* El paso completado sigue siendo un enlace útil: se puede volver al carrito. */
.woo-page-header .breadcrumb > li:not( .disable ):not( .current ) a:hover,
.woo-page-header .breadcrumb > li:not( .disable ):not( .current ) a:focus {
	color: var( --bsv-verde );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woo-page-header .breadcrumb > li.current a {
	color: var( --bsv-verde );
	font-weight: 700;
}

.woo-page-header .breadcrumb > li.disable a {
	color: #A7B0B8;
	cursor: default;
}

@media ( max-width: 480px ) {
	.woo-page-header .breadcrumb {
		margin-bottom: 1.75rem;
	}

	.woo-page-header .breadcrumb > li::before {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}

	.woo-page-header .breadcrumb > li + li::after {
		top: 13px;
	}

	.woo-page-header .breadcrumb > li a {
		font-size: 11.5px;
		letter-spacing: -0.01em;
	}
}