/* ==========================================================================
   WOOCOMMERCE — Bugar Design System v3
   Tienda sobre la base Deep Abyss: los productos son CARDS CLARAS flotantes.
   Cada contenedor de lectura (tarjeta, tabla, panel de pago) invierte
   localmente los tokens de texto para cumplir la regla del kit:
   "nunca texto claro sobre panel claro, ni texto oscuro sobre la base Abyss".

   NO sobreescribe templates de cart/checkout — solo estilos visuales, para
   proteger los hooks de Mercado Pago y GTM4WP.
   ========================================================================== */

/* ---------- Wrapper ---------- */
.wc-wrapper {
	padding: calc(var(--nav-height) + 3rem) 0 4rem;
	min-height: 60vh;
}

@media (min-width: 768px) {
	.wc-wrapper {
		padding-top: calc(var(--nav-height) + 4rem);
		padding-bottom: 5.5rem;
	}
}

/* ---------- Titulos y breadcrumbs (sobre la base oscura) ---------- */
.woocommerce-products-header__title,
.woocommerce div.product .product_title {
	color: var(--chalk);
	letter-spacing: -0.035em;
}

.woocommerce-products-header__title {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.02;
	margin-bottom: 1.5rem;
}

.woocommerce .woocommerce-breadcrumb {
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(255, 249, 250, 0.56);
	margin-bottom: 1.5rem;
}
.woocommerce .woocommerce-breadcrumb a { color: rgba(255, 249, 250, 0.56); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--lava-light); }

/* ---------- Filtros de categoria (pills) ---------- */
.shop-filters {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	margin-bottom: 2.5rem;
	scrollbar-width: none;
}
.shop-filters::-webkit-scrollbar { display: none; }

.shop-filters__pill {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	min-height: var(--tap-min);
	padding: 0.625rem 1.25rem;
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-full);
	background: rgba(255, 249, 250, 0.06);
	color: rgba(255, 249, 250, 0.72);
	font-size: 0.875rem;
	font-weight: 500;
	transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.shop-filters__pill:hover {
	background: rgba(255, 65, 3, 0.14);
	border-color: rgba(255, 65, 3, 0.28);
	color: var(--lava-light);
}

.shop-filters__pill--active {
	background-image: var(--grad-accent);
	border-color: transparent;
	color: var(--on-accent); /* v6: nunca blanco sobre acento */
	font-weight: 600;
	box-shadow: var(--shadow-2) !important;
}
.shop-filters__pill--active:hover { color: #fff; }

/* ==========================================================================
   GRID DE PRODUCTOS
   auto-fill + minmax(280px, 1fr) con gap amplio: las tarjetas siempre ocupan
   el ancho disponible en partes iguales y nunca quedan delgadas ni rotas.
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* v6 19-sep: auto-fill, no auto-fit: con un solo producto la card no se estira a todo el ancho */
	gap: 32px;
	padding: 0;
	margin: 0 0 3rem;
	list-style: none;
}

/* WooCommerce inyecta clearfix con ::before/::after que rompe el grid */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}

/* En movil muy angosto, una sola columna limpia */
@media (max-width: 400px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* -- La tarjeta de producto ES una card del Design System -- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	/* Contexto oscuro: tarjeta glass sobre el resplandor */
	--text-strong: var(--chalk);
	--text-body:   rgba(255, 249, 250, 0.72);
	--text-muted:  rgba(255, 249, 250, 0.56);
	--text-faint:  rgba(255, 249, 250, 0.45);
	--surface:     rgba(255, 249, 250, 0.06);
	--surface-border: rgba(255, 249, 250, 0.12);
	--color-white: var(--text-strong);
	--color-muted: var(--text-muted);

	display: flex;
	flex-direction: column;
	background: rgba(0, 22, 33, 0.55);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-card);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	overflow: hidden;
	/* Neutraliza el layout de floats nativo de WooCommerce */
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	box-shadow: var(--shadow-3);
	color: var(--text-body);
	transition: transform var(--t-slow) var(--ease),
	            box-shadow var(--t-slow) var(--ease),
	            border-color var(--t-slow) var(--ease);
	position: relative;
}

.woocommerce ul.products li.product:hover {
	/* v6: el hover no desplaza */
	border-color: rgba(255, 249, 250, 0.24);
	box-shadow: var(--shadow-3);
}

/* -- Imagen 4:3 -- */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
	background: repeating-linear-gradient(135deg, rgba(255,249,250,0.05) 0 10px, rgba(255,249,250,0.02) 10px 20px);
}

/* -- Contenido de la tarjeta -- */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	padding: 0;
	color: inherit;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--text-strong);
	padding: 1.5rem 2rem 0;
	margin: 0 0 0.875rem;
}

.woocommerce ul.products li.product .price {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--text-strong);
	padding: 0 2rem;
	margin: 0 0 1.25rem;
}

.woocommerce ul.products li.product .price del {
	font-size: 0.9375rem;
	font-weight: 400;
	color: rgba(0, 22, 33, 0.30);
	text-decoration: line-through;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	background: none;
	color: var(--text-strong);
	font-weight: 800;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0 2rem 0.75rem;
	font-size: 0.875rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title + .star-rating { margin-top: 0; }

/* -- Boton de la tarjeta: pegado al fondo, ancho completo -- */
.woocommerce ul.products li.product .button {
	margin: auto 2rem 2rem;
	width: calc(100% - 4rem);
	min-height: 48px;
	padding: 0.875rem 1.25rem;
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
}

.woocommerce ul.products li.product .added_to_cart {
	margin: 0 2rem 1.5rem;
	width: calc(100% - 4rem);
}

/* ---------- Badges sobre la imagen ---------- */
.woocommerce span.onsale {
	position: absolute;
	top: 1rem;
	left: 1rem;
	right: auto;
	margin: 0;
	padding: 0.375rem 0.75rem;
	background: var(--magenta);
	color: var(--on-accent); /* v6: nunca blanco sobre acento */
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--radius-full);
	min-width: auto;
	min-height: auto;
	line-height: 1.4;
	z-index: 2;
}

.woocommerce ul.products li.product.outofstock .onsale { background: rgba(0, 22, 33, 0.75); }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5625rem;
	min-height: var(--tap-min);
	background-image: var(--grad-accent);
	background-color: var(--lava);
	color: var(--on-accent); /* v6: nunca blanco sobre acento */
	font-family: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	border: none;
	border-radius: var(--radius-btn);
	padding: 0.875rem 1.75rem;
	cursor: pointer;
	text-transform: none;
	line-height: 1.4;
	box-shadow: var(--shadow-btn);
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	color: #fff;
	/* v6: el hover no desplaza */
	box-shadow: var(--shadow-btn-hover);
}

/* -- Variante ghost (ver carrito, actualizar, seguir comprando) -- */
.woocommerce a.added_to_cart,
.woocommerce .cart .button[name="update_cart"],
.woocommerce .return-to-shop .button,
.woocommerce a.button.wc-backward {
	background-image: none;
	background-color: #fff;
	color: var(--abyss);
	border: 1px solid #E6E6E6;
	box-shadow: none;
}

.woocommerce a.added_to_cart:hover,
.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce a.button.wc-backward:hover {
	background-color: #FFF9FA;
	border-color: rgba(0, 22, 33, 0.18);
	color: var(--abyss);
	transform: none;
	box-shadow: none;
}

/* -- Deshabilitado -- */
.woocommerce a.button.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled {
	background-image: none;
	background-color: #F4F4F5;
	color: rgba(0, 22, 33, 0.30);
	border: 1px solid #E6E6E6;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
	opacity: 1;
}

/* -- "Comprar ahora" en Cyber Magenta (urgencia).
   Reutiliza las clases nativas por compatibilidad con GTM4WP, asi que
   necesita especificidad reforzada para ganarle a la regla generica. -- */
.woocommerce .agencia-buy-now-btn,
.woocommerce button.agencia-buy-now-btn.button.alt,
.btn--buy-now {
	background-image: none !important;
	background-color: var(--magenta) !important;
	color: #fff !important;
	box-shadow: var(--shadow-2);
}

.woocommerce .agencia-buy-now-btn:hover,
.woocommerce button.agencia-buy-now-btn.button.alt:hover,
.btn--buy-now:hover {
	background-color: var(--magenta) !important;
	color: #fff !important;
	/* v6: el hover no desplaza */
	box-shadow: var(--shadow-2) !important;
}

/* ---------- Cantidad ---------- */
.woocommerce .quantity .qty {
	min-height: var(--tap-min);
	background: rgba(255, 249, 250, 0.06);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-input);
	color: var(--chalk);
	padding: 0.75rem;
	width: 4.5rem;
	text-align: center;
	font-weight: 600;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce .quantity .qty:focus {
	background: rgba(255, 249, 250, 0.10);
	border-color: var(--lava);
	box-shadow: 0 0 0 4px rgba(255, 65, 3, 0.24);
	outline: none;
}

/* Dentro de una tabla/panel claro el input vuelve a claro */
.woocommerce table.shop_table .quantity .qty {
	background: #FFF9FA;
	border-color: #E6E6E6;
	color: var(--abyss);
}
.woocommerce table.shop_table .quantity .qty:focus {
	background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 65, 3, 0.10);
}

/* ==========================================================================
   PRODUCTO INDIVIDUAL
   ========================================================================== */
.woocommerce div.product { padding-top: 1rem; }

.woocommerce div.product div.images {
	background: #fff;
	background-image: var(--grad-panel);
	border: 1px solid #F0F0F0;
	border-radius: var(--radius-card);
	padding: 1.25rem;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.woocommerce div.product div.images img {
	border-radius: var(--radius-input);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.woocommerce div.product .product_title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 800;
	line-height: 1.02;
	margin-bottom: 1rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--chalk);
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: 1.5rem;
}
.woocommerce div.product p.price del { color: rgba(255, 249, 250, 0.45); font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--chalk); }

.woocommerce div.product .woocommerce-product-details__short-description {
	color: rgba(255, 249, 250, 0.72);
	font-size: 1.0625rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
	max-width: 65ch;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 2rem;
}

@media (max-width: 480px) {
	.woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
	.woocommerce div.product form.cart .button,
	.btn--buy-now,
	.agencia-buy-now-btn { width: 100%; }
}

.woocommerce div.product .product_meta {
	font-size: 0.8125rem;
	color: rgba(255, 249, 250, 0.45);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 249, 250, 0.10);
}
.woocommerce div.product .product_meta a { color: rgba(255, 249, 250, 0.72); }
.woocommerce div.product .product_meta a:hover { color: var(--lava-light); }

/* ---------- Pestanas: panel claro ---------- */
.woocommerce div.product .woocommerce-tabs {
	--text-strong: var(--abyss);
	--text-body:   rgba(0, 22, 33, 0.72);
	--text-muted:  rgba(0, 22, 33, 0.62);
	--surface-border: #E6E6E6;

	margin-top: 4rem;
	background: #fff;
	background-image: var(--grad-panel);
	border: 1px solid #F0F0F0;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 2rem;
	color: var(--text-body);
}

@media (min-width: 768px) { .woocommerce div.product .woocommerce-tabs { padding: 3rem; } }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 1px solid var(--surface-border);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: 0 1.25rem;
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--text-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--lava); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--text-strong); }

.woocommerce div.product .woocommerce-tabs .panel {
	background: transparent;
	background-image: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	color: var(--text-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 65ch;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--text-strong);
	margin-bottom: 1rem;
}

/* ---------- Relacionados ----------
   WooCommerce maqueta la ficha con floats: la galeria va a la izquierda y el
   resumen a la derecha. Como `div.product` no los limpia, la seccion de
   relacionados se dibujaba ENCIMA del producto y el `margin-top` no servia de
   nada. Primero se limpia el flotado; solo entonces el margen tiene efecto.
   Ver tambien el clearfix de `div.product` mas abajo (bloque de FASE 17). */
.woocommerce .related.products,
.woocommerce .up-sells {
	clear: both;
	margin-top: 4rem;
	padding-top: 3.5rem;
	border-top: 1px solid rgba(255, 249, 250, 0.10);
}

.woocommerce .related.products > h2,
.woocommerce .up-sells > h2 {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--chalk);
	margin-bottom: 2rem;
}

/* ==========================================================================
   TABLAS (carrito) — panel claro
   ========================================================================== */
.woocommerce table.shop_table {
	--text-strong: var(--chalk);
	--text-body:   rgba(255,249,250,0.72);
	--text-muted:  rgba(255,249,250,0.56);

	background: rgba(0,22,33,0.55);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	border: 1px solid rgba(255,249,250,0.12);
	border-radius: var(--radius-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
	box-shadow: var(--shadow-card);
	color: var(--text-body);
}

.woocommerce table.shop_table thead { background: rgba(255,249,250,0.06); }

.woocommerce table.shop_table th {
	color: var(--text-strong);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 1.125rem 1.25rem;
	border-bottom: 1px solid rgba(255,249,250,0.12);
}

.woocommerce table.shop_table td {
	padding: 1.25rem;
	border-top: 1px solid rgba(255,249,250,0.08);
	color: var(--text-body);
	font-size: 0.9375rem;
	vertical-align: middle;
}

.woocommerce table.shop_table td.product-name a { color: var(--text-strong); font-weight: 600; }
.woocommerce table.shop_table td.product-name a:hover { color: var(--lava); }
.woocommerce table.shop_table img { border-radius: var(--radius-input); width: 4rem; }

.woocommerce table.shop_table td.product-remove a,
.woocommerce a.remove {
	color: var(--magenta) !important;
	font-size: 1.25rem;
	background: none;
}
.woocommerce a.remove:hover { color: #fff !important; background: var(--magenta); }

/* ---------- Totales ---------- */
.woocommerce .cart-collaterals .cart_totals {
	--text-strong: var(--abyss);
	--text-body:   rgba(0, 22, 33, 0.72);
	--text-muted:  rgba(0, 22, 33, 0.62);

	background: #fff;
	background-image: var(--grad-panel);
	border: 1px solid #F0F0F0;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	color: var(--text-body);
}

.woocommerce .cart-collaterals .cart_totals h2 {
	font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em;
	color: var(--text-strong); margin-bottom: 1rem;
}

.woocommerce .cart-collaterals .cart_totals table { border: none; box-shadow: none; background: transparent; }
.woocommerce .cart-collaterals .cart_totals table th {
	background: transparent; padding: 0.75rem 0; border: none;
	font-size: 0.875rem; text-transform: none; letter-spacing: 0; color: var(--text-muted);
}
.woocommerce .cart-collaterals .cart_totals table td {
	padding: 0.75rem 0; border: none; text-align: right;
	color: var(--text-strong); font-weight: 600;
}
.woocommerce .cart-collaterals .cart_totals .order-total th,
.woocommerce .cart-collaterals .cart_totals .order-total td {
	border-top: 1px solid #E6E6E6; font-size: 1.0625rem; color: var(--text-strong); font-weight: 700;
}

/* ---------- Cupon ---------- */
.woocommerce .coupon .input-text {
	min-height: var(--tap-min);
	background: rgba(255, 249, 250, 0.06);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-input);
	color: var(--chalk);
	padding: 0.875rem 1rem;
	font-size: 0.9375rem;
}
.woocommerce .coupon .input-text:focus {
	background: rgba(255, 249, 250, 0.10);
	border-color: var(--lava);
	box-shadow: 0 0 0 4px rgba(255, 65, 3, 0.24);
	outline: none;
}

/* ==========================================================================
   CHECKOUT — paneles claros
   ========================================================================== */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment,
.woocommerce-order-received .woocommerce-order,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
	--text-strong: var(--abyss);
	--text-body:   rgba(0, 22, 33, 0.72);
	--text-muted:  rgba(0, 22, 33, 0.62);
	--text-faint:  rgba(0, 22, 33, 0.45);
	--surface:     #FFF9FA;
	--surface-border: #E6E6E6;
	--input-bg:    #FFF9FA;
	--input-bg-focus: #FFFFFF;
	--input-border: #E6E6E6;
	--input-ring:  rgba(255, 65, 3, 0.10);

	background: #fff;
	background-image: var(--grad-panel);
	border: 1px solid #F0F0F0;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	color: var(--text-body);
	margin-bottom: 2rem;
}

@media (min-width: 768px) {
	.woocommerce form.checkout_coupon,
	.woocommerce form.login,
	.woocommerce form.register,
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-additional-fields,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #payment,
	.woocommerce-MyAccount-content { padding: 2.5rem; }
}

.woocommerce-checkout #payment { padding: 0; overflow: hidden; }

.woocommerce form.checkout h3,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-strong);
	margin-bottom: 1.25rem;
}

/* El heading de "Tu pedido" vive fuera del panel -> sobre oscuro */
.woocommerce-checkout #order_review_heading { color: var(--chalk); margin-top: 2rem; }

.woocommerce form .form-row label,
.woocommerce-checkout label {
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-strong);
	margin-bottom: 0.5625rem;
	display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea {
	min-height: var(--tap-min);
	background: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-input);
	color: var(--text-strong);
	padding: 0.875rem 1rem;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.6;
	width: 100%;
	box-shadow: none;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus {
	background: var(--input-bg-focus);
	border-color: var(--lava);
	box-shadow: 0 0 0 4px var(--input-ring);
	outline: none;
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder { color: var(--text-faint); }

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--magenta);
	box-shadow: 0 0 0 4px rgba(253, 24, 67, 0.08);
}

.woocommerce form .form-row .required { color: var(--magenta); }

/* ---------- Select2 ---------- */
.select2-container--default .select2-selection--single {
	min-height: var(--tap-min);
	background: #FFF9FA;
	border: 1px solid #E6E6E6;
	border-radius: var(--radius-input);
	height: auto;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	background: #fff;
	border-color: var(--lava);
	box-shadow: 0 0 0 4px rgba(255, 65, 3, 0.10);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--abyss); line-height: 1.6; padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 0.875rem; }

.select2-dropdown {
	background: #fff;
	border: 1px solid #E6E6E6;
	border-radius: var(--radius-input);
	box-shadow: var(--shadow-3);
	overflow: hidden;
}
.select2-container--default .select2-results__option { color: rgba(0, 22, 33, 0.72); font-size: 0.9375rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--lava); color: var(--on-accent); /* v6: nunca blanco sobre acento */ }
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: #FFF9FA; border: 1px solid #E6E6E6; color: var(--abyss);
	border-radius: var(--radius-input); padding: 0.625rem 0.75rem;
}

/* ---------- Revision del pedido ---------- */
.woocommerce-checkout-review-order-table {
	border: 1px solid #F0F0F0;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: #fff;
}
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td { background: #FFF9FA; color: var(--abyss); }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	font-size: 1.0625rem; font-weight: 700; color: var(--abyss);
}

/* ---------- Metodos de pago (Mercado Pago) ---------- */
.woocommerce-checkout #payment ul.payment_methods {
	padding: 1.75rem;
	border-bottom: 1px solid #E6E6E6;
	margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; margin-bottom: 0.75rem; }
.woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 600; color: var(--abyss); font-size: 0.9375rem; display: inline;
}
.woocommerce-checkout #payment div.payment_box {
	background: #FFF9FA;
	border: 1px solid #F0F0F0;
	color: rgba(0, 22, 33, 0.72);
	font-size: 0.875rem;
	line-height: 1.6;
	border-radius: var(--radius-input);
	padding: 1rem;
	margin-top: 0.75rem;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #FFF9FA; }
.woocommerce-checkout #payment div.place-order { padding: 1.75rem; }

.woocommerce #payment #place_order,
.woocommerce-checkout #place_order { width: 100%; font-size: 1rem; min-height: 48px; padding: 1rem 2rem; }

/* ==========================================================================
   AVISOS (sobre la base oscura)
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: rgba(255, 249, 250, 0.06);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-card);
	color: rgba(255, 249, 250, 0.86);
	padding: 1.125rem 1.375rem;
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
	list-style: none;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.woocommerce-message { border-top: 3px solid var(--lava); }
.woocommerce-info { border-top: 3px solid var(--lava-light); }
.woocommerce-error { border-top: 3px solid var(--magenta); }

.woocommerce-message::before, .woocommerce-info::before { color: var(--lava-light); }
.woocommerce-error::before { color: var(--magenta); }

.woocommerce-message .button, .woocommerce-info .button { min-height: 40px; }

/* ==========================================================================
   MI CUENTA
   ========================================================================== */
.woocommerce-MyAccount-navigation { padding: 1rem; }

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }

.woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: 0 1rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--text-muted);
	border-radius: var(--radius-btn-sm);
	transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.woocommerce-MyAccount-navigation ul li a:hover { color: var(--text-strong); background: #FFF9FA; }
.woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--on-accent); /* v6: nunca blanco sobre acento */ background-image: var(--grad-accent); font-weight: 600;
}

/* ==========================================================================
   RATING, PAGINACION Y ORDENAMIENTO
   ========================================================================== */
.woocommerce .star-rating { color: var(--lava); }
.woocommerce .star-rating::before { color: rgba(0, 22, 33, 0.15); }

.woocommerce nav.woocommerce-pagination ul {
	border: none; display: flex; flex-wrap: wrap; gap: 0.5rem;
	justify-content: center; margin-top: 3.5rem;
}
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex; align-items: center; justify-content: center;
	min-width: var(--tap-min); min-height: var(--tap-min);
	background: rgba(255, 249, 250, 0.06);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-btn-sm);
	color: rgba(255, 249, 250, 0.72);
	font-weight: 500; font-size: 0.875rem;
	padding: 0 0.75rem;
	transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: rgba(255, 65, 3, 0.14); border-color: rgba(255, 65, 3, 0.28); color: var(--lava-light);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background-image: var(--grad-accent); border-color: transparent; color: var(--on-accent); /* v6: nunca blanco sobre acento */ font-weight: 600;
}

.woocommerce-result-count {
	font-size: 0.875rem; font-weight: 500; color: rgba(255, 249, 250, 0.56);
}

.woocommerce .woocommerce-ordering select {
	min-height: var(--tap-min);
	background: rgba(255, 249, 250, 0.06);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-input);
	color: var(--chalk);
	padding: 0.625rem 0.875rem;
	font-size: 0.875rem;
	cursor: pointer;
}
.woocommerce .woocommerce-ordering select option { background: #001621; color: var(--chalk); }
.woocommerce .woocommerce-ordering select:focus {
	border-color: var(--lava); box-shadow: 0 0 0 4px rgba(255, 65, 3, 0.24); outline: none;
}

/* ---------- Gracias por tu compra ---------- */
.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em;
	color: var(--chalk); margin-bottom: 1.5rem;
}

.woocommerce ul.order_details {
	--text-strong: var(--abyss);
	--text-faint: rgba(0, 22, 33, 0.45);
	background: #fff;
	background-image: var(--grad-panel);
	border: 1px solid #F0F0F0;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	display: flex; flex-wrap: wrap; gap: 1.5rem;
	margin-bottom: 2rem;
}
.woocommerce ul.order_details li {
	border: none; color: var(--text-faint);
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
	text-transform: uppercase; margin: 0; padding: 0;
}
.woocommerce ul.order_details li strong {
	display: block; color: var(--text-strong);
	font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
	text-transform: none; margin-top: 0.375rem;
}

/* ==========================================================================
   FASE 8 · GLASSMORPHISM
   Se eliminan los paneles blancos de la tienda: todas las superficies pasan a
   vidrio oscuro semitransparente con borde ultrafino, sobre el resplandor.
   Este bloque va al final a proposito, para sobreescribir en cascada las
   superficies claras declaradas mas arriba sin cirugia linea por linea.
   ========================================================================== */

/* -- Tokens: cualquier superficie de la tienda opera en contexto oscuro -- */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-tabs,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment,
.woocommerce-order-received .woocommerce-order,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
.woocommerce ul.order_details,
.woocommerce-checkout-review-order-table {
	--text-strong: var(--chalk);
	--text-body:   rgba(255, 249, 250, 0.72);
	--text-muted:  rgba(255, 249, 250, 0.56);
	--text-faint:  rgba(255, 249, 250, 0.45);
	--text-accent: var(--lava-light);
	--surface:        rgba(255, 249, 250, 0.06);
	--surface-border: rgba(255, 249, 250, 0.12);
	--input-bg:       rgba(255, 249, 250, 0.06);
	--input-bg-focus: rgba(255, 249, 250, 0.10);
	--input-border:   rgba(255, 249, 250, 0.12);
	--input-ring:     rgba(255, 65, 3, 0.24);
	--color-white:    var(--text-strong);
	--color-chalk:    var(--text-strong);
	--color-muted:    var(--text-muted);

	background: rgba(0, 22, 33, 0.55);
	background-image: none;
	border: 1px solid rgba(255, 249, 250, 0.12);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: var(--shadow-3);
	color: var(--text-body);
}

.woocommerce-checkout-review-order-table { box-shadow: none; }

/* -- Cabeceras y bordes internos -- */
.woocommerce table.shop_table thead,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
	background: rgba(255, 249, 250, 0.06);
	color: var(--chalk);
}

.woocommerce table.shop_table th { border-bottom-color: rgba(255, 249, 250, 0.12); }
.woocommerce table.shop_table td { border-top-color: rgba(255, 249, 250, 0.08); }

.woocommerce .cart-collaterals .cart_totals .order-total th,
.woocommerce .cart-collaterals .cart_totals .order-total td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	border-top-color: rgba(255, 249, 250, 0.12);
	color: var(--chalk);
}

/* -- Precio tachado sobre oscuro -- */
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del { color: rgba(255, 249, 250, 0.40); }

/* -- Pestanas del producto -- */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom-color: rgba(255, 249, 250, 0.12); }

/* -- Metodos de pago (Mercado Pago) -- */
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: rgba(255, 249, 250, 0.12); }
.woocommerce-checkout #payment ul.payment_methods li label { color: var(--chalk); }
.woocommerce-checkout #payment div.payment_box {
	background: rgba(255, 249, 250, 0.06);
	border: 1px solid rgba(255, 249, 250, 0.12);
	color: rgba(255, 249, 250, 0.72);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: rgba(255, 249, 250, 0.10); }

/* -- Select2 sobre oscuro -- */
.select2-container--default .select2-selection--single {
	background: rgba(255, 249, 250, 0.06);
	border-color: rgba(255, 249, 250, 0.12);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--chalk); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	background: rgba(255, 249, 250, 0.10);
	border-color: var(--lava);
	box-shadow: 0 0 0 4px rgba(255, 65, 3, 0.24);
}
.select2-dropdown {
	background: #04212E;
	border-color: rgba(255, 249, 250, 0.12);
	box-shadow: var(--shadow-3);
}
.select2-container--default .select2-results__option { color: rgba(255, 249, 250, 0.72); }
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: rgba(255, 249, 250, 0.06);
	border-color: rgba(255, 249, 250, 0.12);
	color: var(--chalk);
}

/* -- Botones fantasma sobre oscuro -- */
.woocommerce a.added_to_cart,
.woocommerce .cart .button[name="update_cart"],
.woocommerce .return-to-shop .button,
.woocommerce a.button.wc-backward {
	background-color: rgba(255, 249, 250, 0.06);
	color: var(--chalk);
	border-color: rgba(255, 249, 250, 0.16);
}
.woocommerce a.added_to_cart:hover,
.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce a.button.wc-backward:hover {
	background-color: rgba(255, 249, 250, 0.12);
	color: var(--chalk);
	border-color: rgba(255, 249, 250, 0.28);
}

/* -- Deshabilitado sobre oscuro -- */
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled {
	background-color: rgba(255, 249, 250, 0.08);
	color: rgba(255, 249, 250, 0.35);
	border-color: rgba(255, 249, 250, 0.12);
}

/* -- Cantidad e inputs dentro de tablas glass -- */
.woocommerce table.shop_table .quantity .qty {
	background: rgba(255, 249, 250, 0.06);
	border-color: rgba(255, 249, 250, 0.12);
	color: var(--chalk);
}
.woocommerce table.shop_table .quantity .qty:focus {
	background: rgba(255, 249, 250, 0.10);
	box-shadow: 0 0 0 4px rgba(255, 65, 3, 0.24);
}

/* -- Estrellas -- */
.woocommerce .star-rating::before { color: rgba(255, 249, 250, 0.20); }

/* -- Mi cuenta -- */
.woocommerce-MyAccount-navigation ul li a:hover { background: rgba(255, 249, 250, 0.08); }

/* ==========================================================================
   BOTON "VER MAS" DEL CATALOGO
   En el listado ya no se agrega al carrito: se navega al producto.
   ========================================================================== */
.woocommerce ul.products li.product .agencia-ver-mas {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: rgba(255, 249, 250, 0.06);
	background-image: none;
	color: var(--chalk);
	border: 1px solid rgba(255, 249, 250, 0.16);
	box-shadow: none;
}

.woocommerce ul.products li.product .agencia-ver-mas:hover {
	background: rgba(255, 65, 3, 0.14);
	border-color: rgba(255, 65, 3, 0.35);
	color: var(--lava-light);
	/* v6: el hover no desplaza */
	box-shadow: none;
}

/* ==========================================================================
   CAMPO "REQUIERE FACTURA?" (checkout)
   ========================================================================== */
.agencia-factura { margin-top: 1.5rem; }

.agencia-factura .agencia-factura__field > label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--chalk);
	margin-bottom: 0.75rem;
}

.agencia-factura .woocommerce-input-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.agencia-factura input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.agencia-factura label.radio {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--tap-min);
	padding: 0.625rem 1.25rem;
	margin: 0;
	border: 1px solid rgba(255, 249, 250, 0.16);
	border-radius: var(--radius-full);
	background: rgba(255, 249, 250, 0.06);
	color: var(--chalk);
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}

.agencia-factura label.radio:hover {
	background: rgba(255, 65, 3, 0.12);
	border-color: rgba(255, 65, 3, 0.32);
}

.agencia-factura input[type="radio"]:checked + span,
.agencia-factura label.radio:has(input:checked) {
	background-image: var(--grad-accent);
	background-color: var(--lava);
	border-color: transparent;
	color: var(--on-accent); /* v6: nunca blanco sobre acento */
	font-weight: 600;
}

.agencia-factura input[type="radio"]:focus-visible + span,
.agencia-factura label.radio:has(input:focus-visible) {
	outline: 2px solid var(--lava);
	outline-offset: 2px;
}

/* ==========================================================================
   PANEL "GRACIAS POR TU COMPRA" (glass)
   ========================================================================== */
.agencia-gracias {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	max-width: 40rem;
	margin: 0 auto 3rem;
	padding: 2.5rem 1.75rem;
	background: rgba(0, 22, 33, 0.55);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-panel);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: var(--shadow-3);
}

@media (min-width: 768px) { .agencia-gracias { padding: 3.5rem 3rem; } }

.agencia-gracias__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background-image: var(--grad-accent);
	color: var(--on-accent); /* v6: nunca blanco sobre acento */
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

.agencia-gracias__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--chalk);
	margin: 0;
}

.agencia-gracias__text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(255, 249, 250, 0.72);
	max-width: 52ch;
	margin: 0;
	text-wrap: pretty;
}

.agencia-gracias__text strong { color: var(--chalk); font-weight: 700; }

.agencia-gracias__nota {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-full);
	background: rgba(255, 65, 3, 0.14);
	border: 1px solid rgba(255, 65, 3, 0.28);
	color: var(--lava-light);
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0;
}

.agencia-gracias__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	justify-content: center;
	margin-top: 1rem;
	width: 100%;
}

@media (max-width: 480px) {
	.agencia-gracias__acciones { flex-direction: column; }
	.agencia-gracias__acciones .btn { width: 100%; }
}

/* ==========================================================================
   FASE 9 · CORRECCIONES DE UI
   ========================================================================== */

/* -- Mini-carrito: sus reglas viven en global.css desde el 19-sep (esta hoja
   solo carga en paginas de WooCommerce y el panel esta en todas). -- */

/* -- Reviews del producto: los titulos salian casi negros sobre oscuro -- */
.woocommerce #reviews h2,
.woocommerce #reviews h3,
.woocommerce #review_form_wrapper label,
.woocommerce #review_form #respond .comment-reply-title,
.woocommerce #reviews #comments h2,
.woocommerce .woocommerce-Reviews-title,
.woocommerce p.stars-label,
.woocommerce #respond .comment-form-rating label {
	color: #FFF9FA !important;
}

.woocommerce #reviews .comment-text,
.woocommerce #reviews .description,
.woocommerce #review_form_wrapper .comment-form-comment label,
.woocommerce #reviews .woocommerce-review__author {
	color: rgba(255, 249, 250, 0.72);
}

.woocommerce #reviews .woocommerce-review__published-date,
.woocommerce #reviews .woocommerce-noreviews {
	color: rgba(255, 249, 250, 0.56);
}

.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
	background: rgba(255, 249, 250, 0.06);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-input);
	color: var(--chalk);
	padding: 0.875rem 1rem;
	min-height: var(--tap-min);
}

/* -- Campos ocultos del checkout (apellido lo rellena el servidor) -- */
.agencia-oculto { display: none !important; }

/* -- Checkbox de Terminos y Condiciones -- */
.agencia-terminos { margin-top: 1.25rem; }

.agencia-terminos .agencia-terminos__field label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	min-height: var(--tap-min);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--chalk);
	cursor: pointer;
	margin: 0;
}

.agencia-terminos input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--lava);
	margin-top: 0.125rem;
	flex-shrink: 0;
}

.agencia-terminos a { color: var(--lava-light); text-decoration: underline; text-underline-offset: 3px; }
.agencia-terminos a:hover { color: var(--lava); }

/* -- Fecha del checkout: icono del calendario legible sobre oscuro -- */
.woocommerce form .form-row input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(1.6);
	cursor: pointer;
	opacity: 0.7;
}

/* -- Pestanas y notas del formulario de reviews sobre el panel glass -- */
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: rgba(255, 249, 250, 0.56) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: #FFF9FA !important; }

.woocommerce #review_form .comment-notes,
.woocommerce #reviews .comment-notes,
.woocommerce #review_form label,
.woocommerce #reviews .woocommerce-verification-required {
	color: rgba(255, 249, 250, 0.72) !important;
}

/* WooCommerce pinta de blanco la pestana activa; sobre el panel glass debe
   ser transparente y marcarse solo con el subrayado Lava. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent !important;
	box-shadow: none !important;
}

/* ==========================================================================
   FASE 13 · CHECKOUT EN UNA SOLA COLUMNA DE BLOQUES
   Todo vive dentro de "Detalles de facturacion". Los campos se distribuyen
   en una rejilla de 2 columnas para acortar el formulario a la mitad.
   ========================================================================== */

/* El bloque nativo "Informacion adicional" queda vacio: se le quita el chrome
   de panel para que no deje una tarjeta hueca. No se oculta con display:none
   por si algun plugin de pago necesita inyectar algo ahi. */
.woocommerce-checkout .woocommerce-additional-fields {
	background: none;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
	margin: 0;
}

/* -- Rejilla de campos de facturacion -- */
.woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

@media (max-width: 768px) {
	.woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* WooCommerce trae floats y anchos en % para estas clases: se neutralizan
   para que la rejilla mande. */
.woocommerce-billing-fields__field-wrapper .form-row {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
}

/* Campos largos: ocupan las dos columnas */
.woocommerce-billing-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}

/* Campos que van de dos en dos (Pais/Telefono, Fecha/Horario) */
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last {
	grid-column: span 1;
}

@media (max-width: 768px) {
	.woocommerce-billing-fields__field-wrapper .form-row-first,
	.woocommerce-billing-fields__field-wrapper .form-row-last,
	.woocommerce-billing-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}
}

/* El campo oculto del apellido no debe reservar celda en la rejilla */
.woocommerce-billing-fields__field-wrapper .agencia-oculto {
	display: none !important;
}

/* Los <select> del checkout comparten el estilo del Super Formulario:
   fondo glass, sin flecha nativa y opciones en Deep Abyss. */
.woocommerce-checkout .form-row select,
.woocommerce-checkout #agencia_requiere_factura,
.woocommerce-checkout #agencia_horario {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	min-height: var(--tap-min);
	width: 100%;
	padding: 0.875rem 2.75rem 0.875rem 1rem;
	background-color: rgba(255, 249, 250, 0.06);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-input);
	color: var(--chalk);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.6;
	outline: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF4103' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-checkout .form-row select::-ms-expand { display: none; }

.woocommerce-checkout .form-row select:focus {
	background-color: rgba(255, 249, 250, 0.10);
	border-color: var(--lava);
	box-shadow: 0 0 0 4px rgba(255, 65, 3, 0.24);
}

.woocommerce-checkout .form-row select option,
.woocommerce-checkout .form-row select optgroup {
	background-color: #001621;
	color: var(--chalk);
}

/* El checkbox de terminos ocupa el ancho completo y se alinea con la rejilla */
.woocommerce-billing-fields__field-wrapper .agencia-terminos__field {
	grid-column: 1 / -1;
	margin-top: 0.25rem !important;
}

.woocommerce-billing-fields__field-wrapper .agencia-terminos__field label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	min-height: var(--tap-min);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--chalk);
	cursor: pointer;
	margin: 0;
}

.woocommerce-billing-fields__field-wrapper .agencia-terminos__field input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--lava);
	margin-top: 0.125rem;
	flex-shrink: 0;
}

.woocommerce-billing-fields__field-wrapper .agencia-terminos__field a {
	color: var(--lava-light);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -- Contenedor ancho para carrito / checkout / mi cuenta (ver page.php) -- */
.page-content__wide {
	max-width: var(--container-max);
	margin-inline: auto;
	width: 100%;
}

/* -- Checkout apilado: facturacion a todo lo ancho y el resumen debajo.
   WooCommerce reparte col-1/col-2 al 47% con floats; asi el formulario tenia
   la mitad del ancho y la rejilla de 2 columnas quedaba comprimida. -- */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
	display: block;
	width: 100%;
}

.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after { content: none; display: none; }

.woocommerce-checkout .col2-set > .col-1,
.woocommerce-checkout .col2-set > .col-2 {
	float: none !important;
	width: 100% !important;
	max-width: 100%;
}

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
	width: 100%;
	float: none;
}

.woocommerce-checkout #order_review_heading { margin-top: 2.5rem; }

/* FASE 14: se retira el tope de ancho del resumen. Con la arquitectura de tres
   tarjetas, dejarlo en 46rem hacia que la tarjeta de facturacion se viera al
   doble de ancho que las otras dos y el bloque perdia unidad. */

/* -- Blindaje del <select>: el CSS externo de Mercado Pago
   (super-token.bundle.min.css, servido desde su CDN) carga despues del tema y
   forza fondo blanco. Se marcan como importantes solo estas propiedades. -- */
.woocommerce-checkout .form-row select,
.woocommerce-checkout select#agencia_requiere_factura,
.woocommerce-checkout select#agencia_horario,
.woocommerce-checkout select#billing_country {
	background-color: rgba(255, 249, 250, 0.06) !important;
	color: var(--chalk) !important;
	border-color: rgba(255, 249, 250, 0.12) !important;
}

.woocommerce-checkout .form-row select:focus {
	background-color: rgba(255, 249, 250, 0.10) !important;
	border-color: var(--lava) !important;
}

/* -- Rejilla anclada a IDs.
   WooCommerce carga `address-i18n.js`, que en el navegador reescribe las clases
   y el orden de `billing_country` y `billing_phone` segun la localizacion del
   pais. Por eso las reglas basadas en `form-row-first/last/wide` se pierden en
   esos dos campos. Los IDs no cambian, asi que la posicion se fija aqui. -- */
#billing_first_name_field,
#billing_email_field,
#billing_company_field,
#agencia_web_field,
#agencia_requiere_factura_field,
#agencia_acepto_terminos_field,
#agencia_acepta_novedades_field {
	grid-column: 1 / -1 !important;
}

#billing_country_field,
#billing_phone_field,
#agencia_fecha_field,
#agencia_horario_field {
	grid-column: span 1 !important;
}

/* El orden visual tambien se fija aqui, por la misma razon. */
#billing_first_name_field        { order: 1; }
#billing_email_field             { order: 2; }
#billing_country_field           { order: 3; }
#billing_phone_field             { order: 4; }
#billing_company_field           { order: 5; }
#agencia_fecha_field             { order: 6; }
#agencia_horario_field           { order: 7; }
#agencia_web_field               { order: 8; }
#agencia_requiere_factura_field  { order: 9; }
#agencia_acepto_terminos_field   { order: 10; }
#agencia_acepta_novedades_field  { order: 11; }

/* ==========================================================================
   FASE 14 · ARQUITECTURA DEL CHECKOUT EN TRES TARJETAS
   Va al final a proposito: gana en cascada sobre los bloques anteriores sin
   tener que reescribirlos linea por linea.
   ========================================================================== */

/* -- Tarea 1: Nombre Completo y Correo comparten fila, como Pais y Telefono.
   En movil el contenedor ya es de una sola columna, asi que caen al 100%. -- */
#billing_first_name_field,
#billing_email_field {
	grid-column: span 1 !important;
}

/* -- Tarea 2: el contenedor del resumen deja de ser tarjeta.
   `#order_review` envuelve la tabla del pedido y el bloque de pasarelas; si el
   mantiene el cristal, quedan tarjetas anidadas. Se vuelve transparente y sus
   dos hijos pasan a ser las tarjetas 2 y 3. -- */
.woocommerce-checkout #order_review {
	background: none;
	background-image: none;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

@media (min-width: 768px) {
	.woocommerce-checkout #order_review { padding: 0; }
}

/* Titulos por fuera de sus tarjetas ("Tu servicio" y "Metodo de pago"). */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .agencia-pago__titulo {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--chalk);
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce-checkout #order_review_heading { margin-top: 2.5rem; }
.woocommerce-checkout .agencia-pago__titulo { margin-top: 2.5rem; }

/* Red de seguridad: si alguna vez fallara la limpieza del fragmento AJAX en
   functions.php, solo se veria el primer titulo. */
.woocommerce-checkout #order_review h3.agencia-pago__titulo:nth-of-type(n + 2) {
	display: none;
}

/* -- Tarjeta 2: resumen del servicio -- */
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: rgba(0, 22, 33, 0.55);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-card);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: var(--shadow-3);
}

/* Sin bandas de color: la tarjeta debe leerse como una sola superficie. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	background: transparent;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 1rem 1.75rem;
	border-left: 0;
	border-right: 0;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	padding-top: 1.75rem;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr:last-child td {
	padding-bottom: 1.75rem;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--chalk);
}

@media (max-width: 480px) {
	.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
		padding: 0.875rem 1.125rem;
	}
}

/* -- Tarjeta 3: pasarelas de pago + boton de compra -- */
.woocommerce-checkout #payment {
	background: rgba(0, 22, 33, 0.55);
	background-image: none;
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-card);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: var(--shadow-3);
	padding: 0;
	margin: 0;
	overflow: visible;
}

/* ==========================================================================
   FASE 14 · TAREA 3 — PASARELAS DE PAGO
   ========================================================================== */

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 1.75rem;
	border-bottom: 1px solid rgba(255, 249, 250, 0.12);
	background: none;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	margin: 0;
	padding: 1.125rem 1.25rem;
	list-style: none;
	background: rgba(255, 249, 250, 0.04);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-input);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--lava);
	background: rgba(255, 65, 3, 0.06);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	font-weight: 600;
	color: var(--chalk);
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
	max-height: 28px;
	width: auto;
	margin: 0;
	vertical-align: middle;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"] {
	accent-color: var(--lava);
	width: 18px;
	height: 18px;
	margin: 0 0.25rem 0 0;
	cursor: pointer;
}

/* Caja desplegable de cada metodo (transferencia, tarjeta, etc.).
   Lleva doble ID porque la hoja de Mercado Pago anula el relleno. */
#order_review #payment div.payment_box {
	margin: 1.125rem 0 0;
	/* Mercado Pago trae `:has(> .mp-checkout-custom-load){padding:0!important}`;
	   sin `!important` su caja quedaria pegada a los bordes de la tarjeta. */
	padding: 1.5rem !important;
	background: rgba(0, 22, 33, 0.45);
	border: 1px solid rgba(255, 249, 250, 0.10);
	border-radius: var(--radius-input);
	color: var(--text-body);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* Fuera el triangulito nativo: aqui la caja ya vive dentro de su metodo. */
.woocommerce-checkout #payment div.payment_box::before {
	content: none;
	display: none;
}

.woocommerce-checkout #payment div.payment_box p { margin: 0 0 0.75rem; }
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment div.payment_box strong,
.woocommerce-checkout #payment div.payment_box h2,
.woocommerce-checkout #payment div.payment_box h3 { color: var(--chalk); }

/* Datos bancarios de "Transferencia bancaria" */
.woocommerce-checkout #payment div.payment_box ul.wc-bacs-bank-details {
	margin: 0;
	padding: 1.125rem 1.25rem;
	list-style: none;
	background: rgba(255, 249, 250, 0.05);
	border: 1px solid rgba(255, 249, 250, 0.10);
	border-radius: var(--radius-input);
}

.woocommerce-checkout #payment div.payment_box ul.wc-bacs-bank-details li {
	list-style: none;
	margin: 0 0 0.5rem;
	color: var(--text-body);
}

.woocommerce-checkout #payment div.payment_box ul.wc-bacs-bank-details li:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment div.payment_box ul.wc-bacs-bank-details li strong { color: var(--chalk); }

/* Boton de compra */
.woocommerce-checkout #payment div.place-order {
	padding: 1.75rem;
	margin: 0;
	background: none;
}

/* ==========================================================================
   FASE 14 · MERCADO PAGO (checkout transparente)
   El gateway pinta su formulario con clases `mp-*` y hoja propia desde su CDN,
   que carga despues del tema. Sus reglas usan hasta dos IDs con `!important`
   (`#mp-checkout-custom-root #mp-custom-checkout-form-container ...`), asi que
   aqui hace falta igualar esa especificidad, no solo marcar `!important`.
   ========================================================================== */

#order_review #payment .payment_box .mp-checkout-custom-container,
#order_review #payment .payment_box .mp-checkout-custom-load,
#order_review #payment .payment_box .mp-checkout-container,
#order_review #payment .payment_box .mp-checkout-custom-card-form,
#order_review #payment .payment_box .mp-checkout-custom-card-row {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

#order_review #payment .payment_box .mp-checkout-custom-container { padding: 0 !important; }

/* Textos y etiquetas del formulario de Mercado Pago sobre fondo oscuro. */
#order_review #payment .payment_box [class^="mp-"] label,
#order_review #payment .payment_box [class*=" mp-"] label,
#order_review #payment .payment_box .mp-checkout-custom-card-form-label,
#order_review #payment .payment_box .mp-input-label,
#order_review #payment .payment_box .mp-checkout-custom-title {
	color: var(--chalk) !important;
}

/* Campos que el tema SI controla (mismo origen): documento, cuotas, titular. */
#order_review #payment .payment_box input.mp-card-holder-name,
#order_review #payment .payment_box input.mp-document,
#order_review #payment .payment_box select.mp-document-select,
#order_review #payment .payment_box select.mp-custom-checkout-select-input,
#order_review #payment .payment_box .mp-input,
#order_review #payment .payment_box .mp-input-document,
#order_review #payment .payment_box .mp-input-select-input {
	background-color: rgba(255, 249, 250, 0.06) !important;
	border: 1px solid rgba(255, 249, 250, 0.12) !important;
	border-radius: var(--radius-input) !important;
	color: var(--chalk) !important;
	min-height: var(--tap-min);
	padding: 0.75rem 1rem !important;
	box-shadow: none !important;
}

#order_review #payment .payment_box select.mp-document-select option,
#order_review #payment .payment_box select.mp-custom-checkout-select-input option {
	background-color: #001621;
	color: var(--chalk);
}

/* Los tres campos de la tarjeta (numero, vencimiento, CVV) son iframes de
   `secure-fields.mercadopago.com`. Su texto lo pinta Mercado Pago y es oscuro;
   como el contenido es de otro origen, el tema no puede recolorearlo y ponerlos
   en oscuro dejaria al comprador escribiendo en negro sobre negro. Se quedan en
   claro a proposito, como isla deliberada: Soft Chalk de marca, borde suave,
   esquinas redondeadas y aire generoso, no un parche blanco accidental. */
#order_review #payment .payment_box div.mp-checkout-custom-card-input,
#order_review #payment .payment_box div.mp-checkout-custom-security-code-input {
	background-color: #FFF9FA !important;
	border: 1px solid #E6E6E6 !important;
	border-radius: var(--radius-input) !important;
	padding: 0.375rem 0.875rem !important;
	min-height: var(--tap-min);
	box-shadow: none !important;
}

#order_review #payment .payment_box .mp-test-mode-card {
	background: rgba(255, 249, 250, 0.05) !important;
	border-radius: var(--radius-input) !important;
	padding: 1rem !important;
	color: var(--text-body) !important;
}

#order_review #payment .payment_box .mp-checkout-custom-security-code-tooltip {
	background: transparent !important;
}

/* ==========================================================================
   FASE 14 · TAREA 4 — ALERTAS DE VALIDACION
   WooCommerce marca con `data-id` los avisos que corresponden a un campo
   concreto, y su propio JS usa ese atributo para pintar el borde rojo. Aqui se
   ocultan solo esos: el usuario ve el campo en rojo, no un bloque de texto.
   Los errores de pasarela (fondos insuficientes, tarjeta rechazada, timeouts)
   NO llevan `data-id`, asi que siguen siendo visibles.
   ========================================================================== */
.woocommerce-checkout ul.woocommerce-error li[data-id] {
	display: none !important;
}

/* Si en la lista solo quedaban errores de campo, se oculta la caja entera. */
.woocommerce-checkout ul.woocommerce-error:not(:has(li:not([data-id]))) {
	display: none !important;
}

/* ==========================================================================
   FASE 16 · TAREA 1 — CAJA DE PAGO EN CLARO (legibilidad de la tarjeta)
   Se revierte a proposito el tratamiento oscuro de FASE 14 en `.payment_box`.
   Motivo: los tres campos de la tarjeta son iframes de Mercado Pago cuyo texto
   se pinta oscuro y el tema no puede recolorear (otro origen). Con la caja en
   claro, el iframe contrasta de forma nativa y el comprador lee sus numeros.
   La tarjeta contenedora (`#payment`) sigue siendo cristal oscuro: la isla
   clara es solo el desplegable del metodo seleccionado.
   ========================================================================== */

#order_review #payment div.payment_box {
	/* Inversion de ambito: mismo patron que `.panel` en global.css. Los alias
	   legacy se REDECLARAN aqui a proposito — declarados solo en `:root`
	   congelan su `var()` y se heredarian ya resueltos en claro. */
	--text-strong: var(--abyss);
	--text-body:   rgba(0, 22, 33, 0.72);
	--text-muted:  rgba(0, 22, 33, 0.62);
	--text-faint:  rgba(0, 22, 33, 0.45);
	--text-accent: var(--lava);

	--surface:        #FFF9FA;
	--surface-2:      #F4F4F5;
	--surface-border: #E6E6E6;

	--input-bg:       #FFFFFF;
	--input-bg-focus: #FFFFFF;
	--input-border:   #E6E6E6;
	--input-ring:     rgba(255, 65, 3, 0.10);

	--color-white:    var(--text-strong);
	--color-chalk:    var(--text-strong);
	--text-dark:      var(--text-strong);
	--color-muted:    var(--text-muted);
	--color-platinum: var(--text-faint);
	--color-border:   var(--surface-border);
	--bg-light:       var(--surface);
	--border:         var(--surface-border);

	margin: 1.125rem 0 0;
	/* Mercado Pago trae `:has(> .mp-checkout-custom-load){padding:0!important}`. */
	padding: 1.75rem !important;
	background: #FFF9FA !important;
	border: 1px solid #E6E6E6 !important;
	border-radius: var(--radius-card) !important;
	color: var(--text-body) !important;
	font-size: 0.9375rem;
	line-height: 1.65;
	box-shadow: inset 0 1px 0 rgba(255, 249, 250, 0.8);
}

@media (min-width: 768px) {
	#order_review #payment div.payment_box { padding: 2rem !important; }
}

#order_review #payment div.payment_box::before {
	content: none;
	display: none;
}

#order_review #payment div.payment_box p,
#order_review #payment div.payment_box li,
#order_review #payment div.payment_box span,
#order_review #payment div.payment_box label {
	color: var(--text-body);
}

#order_review #payment div.payment_box strong,
#order_review #payment div.payment_box b,
#order_review #payment div.payment_box h2,
#order_review #payment div.payment_box h3,
#order_review #payment div.payment_box h4 {
	color: var(--text-strong);
}

/* Datos bancarios de "Transferencia bancaria" sobre la caja clara. */
#order_review #payment div.payment_box ul.wc-bacs-bank-details {
	background: #FFFFFF;
	border: 1px solid #E6E6E6;
	border-radius: var(--radius-input);
	padding: 1.125rem 1.25rem;
}

#order_review #payment div.payment_box ul.wc-bacs-bank-details li { color: var(--text-body); }
#order_review #payment div.payment_box ul.wc-bacs-bank-details li strong { color: var(--text-strong); }

/* -- Mercado Pago dentro de la caja clara.
   Los campos que el tema controla (titular, documento, cuotas) y los tres
   iframes de la tarjeta comparten ahora el mismo acabado claro, para que el
   formulario se lea como una sola pieza y no como parches. -- */
#order_review #payment .payment_box input.mp-card-holder-name,
#order_review #payment .payment_box input.mp-document,
#order_review #payment .payment_box select.mp-document-select,
#order_review #payment .payment_box select.mp-custom-checkout-select-input,
#order_review #payment .payment_box .mp-input,
#order_review #payment .payment_box .mp-input-document,
#order_review #payment .payment_box .mp-input-select-input,
#order_review #payment .payment_box div.mp-checkout-custom-card-input,
#order_review #payment .payment_box div.mp-checkout-custom-security-code-input {
	background-color: #FFFFFF !important;
	border: 1px solid #E6E6E6 !important;
	border-radius: var(--radius-input) !important;
	color: var(--abyss) !important;
	min-height: var(--tap-min);
	box-shadow: none !important;
}

#order_review #payment .payment_box input.mp-card-holder-name,
#order_review #payment .payment_box input.mp-document,
#order_review #payment .payment_box select.mp-document-select,
#order_review #payment .payment_box select.mp-custom-checkout-select-input {
	padding: 0.75rem 1rem !important;
}

/* La regla del CVV en Mercado Pago suma una clase mas
   (`... .mp-checkout-custom-card-column .mp-checkout-custom-security-code-input`),
   asi que gana por especificidad. Se anade la clase del body para empatarla. */
.woocommerce-checkout #order_review #payment .payment_box div.mp-checkout-custom-card-input,
.woocommerce-checkout #order_review #payment .payment_box div.mp-checkout-custom-security-code-input {
	padding: 0.375rem 0.875rem !important;
	border-radius: var(--radius-input) !important;
	background-color: #FFFFFF !important;
	border: 1px solid #E6E6E6 !important;
}

#order_review #payment .payment_box select.mp-document-select option,
#order_review #payment .payment_box select.mp-custom-checkout-select-input option {
	background-color: #FFFFFF;
	color: var(--abyss);
}

/* Etiquetas y titulos del formulario de Mercado Pago, ahora sobre claro. */
#order_review #payment .payment_box [class^="mp-"] label,
#order_review #payment .payment_box [class*=" mp-"] label,
#order_review #payment .payment_box .mp-checkout-custom-card-form-label,
#order_review #payment .payment_box .mp-input-label,
#order_review #payment .payment_box .mp-checkout-custom-title {
	color: var(--abyss) !important;
}

#order_review #payment .payment_box .mp-test-mode-card {
	background: #F4F4F5 !important;
	color: var(--text-body) !important;
}

/* ==========================================================================
   FASE 17 · FICHA DE PRODUCTO — SEPARACION DE "PRODUCTOS RELACIONADOS"
   ========================================================================== */

/* Clearfix en el contenedor de la ficha. WooCommerce flota la galeria y el
   resumen; sin esto `div.product` colapsa a la altura de su contenido no
   flotado y todo lo que viene despues se monta encima. */
.woocommerce div.product::after {
	content: "" !important;
	display: block !important;
	clear: both;
}

/* El aire se pone en los elementos FLOTADOS, no en los relacionados.
   Con `clear: both`, el navegador inserta "clearance" y se come el
   `margin-top` del elemento que limpia: con 80px declarados solo quedaban 34
   reales. El margen inferior de los floats si mueve el punto de limpieza, asi
   que la separacion resultante es la que se ve. */
/* Se repite el `div.` de WooCommerce (`.woocommerce div.product div.images`):
   su selector suma un elemento mas que el nuestro y ganaba con `2em`. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	margin-bottom: 4rem;
}

@media (min-width: 768px) {
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		margin-bottom: 5rem;
	}
}

.woocommerce div.product .related.products,
.woocommerce div.product .up-sells {
	clear: both;
	margin-top: 0;
}

/* Los relacionados van a todo el ancho, nunca en la columna del resumen. */
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells {
	float: none;
	width: 100%;
}

/* ==========================================================================
   FASE 17 · La caja de Stripe, en oscuro — excepcion acotada a Stripe
   --------------------------------------------------------------------------
   La FASE 16 puso `.payment_box` en claro a proposito, y esa decision SIGUE
   EN PIE: los campos de Mercado Pago son iframes de otro origen que pintan su
   texto en oscuro y el tema no puede recolorearlos. Con la caja clara, el
   comprador lee los numeros de su tarjeta. Oscurecer eso volveria a romperlo.

   Stripe es distinto porque SI expone una Appearance API: el filtro
   `wc_stripe_upe_params` en functions.php le pasa `theme: 'night'` con los
   tokens de Bugar, y su iframe se pinta oscuro por dentro. Solo por eso su
   caja puede ser oscura sin perder legibilidad.

   De ahi que esto NO sea una regla general sobre `.payment_box`, sino una
   excepcion por metodo. Si algun dia Mercado Pago publica su propia API de
   apariencia, se le da el mismo trato y esta division desaparece.

   Doble ID para ganar al bloque de FASE 16, que tambien lo lleva.
   ========================================================================== */

#order_review #payment li.payment_method_stripe div.payment_box,
#order_review #payment li.payment_method_bacs div.payment_box {
	/* Se deshace la inversion de ambito de FASE 16: aqui volvemos a oscuro. */
	--text-strong: var(--chalk);
	--text-body:   rgba(255, 249, 250, 0.72);
	--text-muted:  rgba(255, 249, 250, 0.56);
	--text-faint:  rgba(255, 249, 250, 0.45);
	--text-accent: var(--lava-light);

	--surface:        rgba(255, 249, 250, 0.06);
	--surface-2:      rgba(255, 249, 250, 0.08);
	--surface-border: rgba(255, 249, 250, 0.12);

	/* 🔴 !important porque la FASE 16 lo usa. No es capricho: aquel bloque
	   declara background/border/color con !important, y la unica forma de
	   revertirlo para UN metodo sin reescribir toda la FASE 16 —y arriesgar
	   la legibilidad de Mercado Pago, que es justo lo que aquello protege—
	   es igualar la especificidad. */
	background: rgba(0, 22, 33, 0.45) !important;
	border: 1px solid rgba(255, 249, 250, 0.10) !important;
	color: var(--text-body) !important;
	box-shadow: none;
}

/* El texto de dentro. Contraste medido sobre el fondo resultante:
   chalk #FFF9FA da 13.46:1 y el secundario 5.10:1 — los dos pasan AA. */
#order_review #payment li.payment_method_stripe div.payment_box p,
#order_review #payment li.payment_method_stripe div.payment_box li,
#order_review #payment li.payment_method_stripe div.payment_box span,
#order_review #payment li.payment_method_stripe div.payment_box label,
#order_review #payment li.payment_method_bacs div.payment_box p,
#order_review #payment li.payment_method_bacs div.payment_box li,
#order_review #payment li.payment_method_bacs div.payment_box span,
#order_review #payment li.payment_method_bacs div.payment_box label {
	color: var(--text-body);
}

#order_review #payment li.payment_method_stripe div.payment_box strong,
#order_review #payment li.payment_method_bacs div.payment_box strong,
#order_review #payment li.payment_method_bacs div.payment_box b {
	color: var(--text-strong);
}

/* v6 19-sep: tope de ancho de la card (categoria con 1 o 2 productos) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	max-width: 460px;
	width: 100%;
}

/* ==========================================================================
   PARCHES v6 · 19-sep-2026, 2.ª tanda (aviso WC, ítem del mini-carrito, footer)
   ========================================================================== */

/* -- 5 · Avisos de WooCommerce: el icono pisaba el texto -------------------
   Medido: padding-left 22px y el ::before absoluto en left 22.5px, es decir,
   icono y texto empezaban en el mismo sitio. Sitio para el icono y centrado
   vertical real. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 1rem 1.375rem 1rem 3.25rem;
	line-height: 1.5;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before {
	position: absolute;
	left: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	line-height: 1;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	float: none;
}

/* -- Mi cuenta · campos legibles (19-sep-2026) -----------------------------
   Los <select> e <input> de Facturación y Campañas los crea bugar-cliente.js
   sin clase ni estilo; WooCommerce y el navegador les ponían fondo blanco con
   el texto claro del tema: blanco sobre blanco. Con !important porque hay
   reglas de WooCommerce y del navegador (user agent) que ganan por origen.
   color-scheme: dark hace que la lista nativa del select y el selector de
   fecha se pinten en oscuro. */
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content .form-select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce-MyAccount-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
	color-scheme: dark;
	background-color: #1a1f24 !important;
	color: #FFF9FA !important;
	border: 1px solid rgba(255, 249, 250, 0.18) !important;
	border-radius: 10px;
	padding: 0.6rem 0.8rem;
	font: inherit;
	box-shadow: none;
}
.woocommerce-account .woocommerce-MyAccount-content input::placeholder,
.woocommerce-account .woocommerce-MyAccount-content textarea::placeholder {
	color: rgba(255, 249, 250, 0.4);
}
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content .form-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFF9FA' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.8rem center !important;
}
.woocommerce-account .woocommerce-MyAccount-content input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.7;
}
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.woocommerce-account .woocommerce-MyAccount-content input:focus {
	outline: none;
	border-color: var(--lava, #FF4103) !important;
	box-shadow: 0 0 0 3px rgba(255, 65, 3, 0.24);
}
.woocommerce-account .woocommerce-MyAccount-content select option,
.woocommerce-account .woocommerce-MyAccount-content select optgroup {
	background-color: #1a1f24;
	color: #FFF9FA;
}