/**
 * Carrito y Checkout modernos de WooCommerce (bloques de Gutenberg,
 * WC 8.3+). Es lo que WooCommerce activa por defecto en instalaciones
 * nuevas: carrito con actualización en vivo, sin recargar la página, con
 * su propio stepper de cantidad nativo. Lo dejamos así (es más interactivo
 * que el carrito clásico) y sólo lo re-vestimos con los tokens del tema.
 */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var(--font-sans);
}

/* El badge "Guardar $X" que WooCommerce pone solo en cada línea cuando el
   precio baja del precio normal (pasa con el precio mayorista) — queda
   afuera: "guardar" no es como se dice en Argentina y quedaba confuso al
   lado del precio tachado, que ya deja bien claro cuánto baja. El cartel
   de arriba del carrito (inc/wholesale-pricing.php) ya avisa el ahorro
   total, así que no hace falta repetirlo acá. */
.wc-block-components-sale-badge {
	display: none;
}

/* Botones (Pasar al pago, Aplicar cupón, Realizar pedido, etc.) */
.wc-block-components-button.wp-element-button,
.wc-block-components-checkout-place-order-button {
	background: var(--color-primary) !important;
	border-radius: var(--radius-full) !important;
	font-weight: 700 !important;
	padding: 14px 24px !important;
	border: none !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.wc-block-components-button.wp-element-button:hover {
	background: var(--color-primary-hover) !important;
}

.wc-block-components-button.wc-block-components-button--outlined {
	background: transparent !important;
	color: var(--color-primary) !important;
	border: 1.5px solid var(--color-primary) !important;
}

/* Stepper de cantidad nativo (ya viene con +/-, lo alineamos a nuestro radio) */
.wc-block-components-quantity-selector {
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-full) !important;
	overflow: hidden;
}

.wc-block-components-quantity-selector__button {
	color: var(--color-text-secondary) !important;
}

.wc-block-cart-item__remove-link {
	color: var(--color-danger) !important;
	font-weight: 600 !important;
}

/* Tarjeta de totales / resumen del pedido */
.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wc-block-components-order-summary {
	border-color: var(--color-border) !important;
}

.wc-block-cart__totals-title,
.wc-block-components-totals-item .wc-block-components-totals-item__label {
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.15rem;
	font-weight: 600;
}

/* Sidebar de totales como card, igual que la versión clásica */
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout__sidebar {
	background: var(--color-bg-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-2);
}

/* Inputs de checkout (dirección, contacto, cupón) — WooCommerce le pone a
   cada uno un <label> que por defecto "flota" con una animación calculada
   contra SU tamaño de fuente/padding original. Como nosotros achicamos la
   fuente y cambiamos el padding, esa cuenta dejaba de cerrar y el label
   quedaba montado sobre el cursor. En vez de perseguir la animación,
   la sacamos: el label queda fijo arriba, como una etiqueta chica — más
   simple, más prolijo, y no se puede volver a desalinear. */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-select-input select,
.wc-block-components-combobox input {
	border-radius: var(--radius-sm) !important;
	border-color: var(--color-border-strong) !important;
	font-size: 0.95rem !important;
	padding: 20px 14px 7px !important;
}

.wc-block-components-text-input label {
	position: absolute !important;
	top: 7px !important;
	left: 15px !important;
	transform: none !important;
	transition: none !important;
	font-size: 0.68rem !important;
	font-weight: 600;
	color: var(--color-text-tertiary);
	pointer-events: none;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus {
	outline: 2px solid var(--color-primary) !important;
}

/* Botón "Aplicar" del cupón: mismo alto que el input de al lado, pero con
   un radio más chico (no pill completo) para que se sientan un mismo
   grupo en vez de que el botón "pese" mucho más que el campo de texto. */
.wc-block-components-totals-coupon__button.wc-block-components-button.wp-element-button {
	border-radius: var(--radius-sm) !important;
	padding: 12px 18px !important;
	font-size: 0.85rem !important;
}

/* Opciones de envío / medios de pago */
.wc-block-components-radio-control__option {
	border-radius: var(--radius-md) !important;
	border-color: var(--color-border) !important;
}

.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
	border-color: var(--color-primary) !important;
	background: color-mix(in srgb, var(--color-primary) 6%, white);
}

.wc-block-components-radio-control__input:checked {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

/* Cupón */
.wc-block-components-panel__button {
	font-weight: 600 !important;
	color: var(--color-text) !important;
}

/* Cartel de precio mayorista (inc/wholesale-pricing.php + inc/cart-content.php) */
.wholesale-banner {
	/* Es un párrafo de texto simple (con el monto envuelto en su propio
	   <span> por wc_price()) — con display:flex ese span se separaba en
	   una columna aparte y el texto quedaba partido en dos, feo en mobile.
	   Con block, todo fluye y hace salto de línea como un texto normal. */
	display: block;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: var(--space-4);
}

.wholesale-banner--success {
	background: var(--color-success-bg);
	color: #0d5c30;
}

.wholesale-banner--pending {
	background: var(--color-bg-subtle);
	padding: var(--space-4);
}

/* El monto que falta va grande y en el azul de marca — es el dato que
   tiene que verse primero de un vistazo — con la explicación abajo en
   tamaño normal, más discreta. */
.wholesale-banner__amount {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 2px;
}

.wholesale-banner__text {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--color-text-secondary);
}

/* Sección de sugerencias, debajo de todo el bloque del carrito (lista +
   total + "Pasar al pago") — productos Mayorista baratos para llegar
   rápido al mínimo sin salir del carrito. Va en su propia tarjeta, con
   una línea divisoria arriba, para que quede claro que es una sección
   aparte y no se confunda con los productos que el cliente ya agregó.
   Son <a> comunes (sin AJAX a propósito): al agregar, recargan la
   página del carrito, así el cartel de arriba y la lista de productos
   se actualizan solos con el estado real. */
.wholesale-suggestions-section {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.wholesale-suggestions__title {
	margin: 0 0 var(--space-3);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
}

.wholesale-suggestions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}

.wholesale-suggestion {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-2);
	text-align: center;
}

.wholesale-suggestion__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.wholesale-suggestion__link img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--radius-sm);
	background: var(--color-bg-subtle);
}

.wholesale-suggestion__name {
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.1em;
}

.wholesale-suggestion__price {
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--color-text-secondary);
}

.wholesale-suggestion__btn {
	margin-top: var(--space-2);
	display: block;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 7px;
	border-radius: var(--radius-full);
	background: var(--color-bg-subtle);
	color: var(--color-text);
}

.wholesale-suggestion__btn:hover {
	background: var(--color-primary);
	color: #fff;
}

/* Carrito vacío */
.wp-block-woocommerce-empty-cart-block {
	padding: var(--space-6) 0;
	text-align: center;
}

.wp-block-woocommerce-empty-cart-block h2 {
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: var(--space-2);
}

.wp-block-woocommerce-empty-cart-block p {
	color: var(--color-text-secondary);
	max-width: 38ch;
	margin: 0 auto;
}

.wp-block-woocommerce-empty-cart-block .btn {
	margin-top: var(--space-5);
}

/* Encabezado "Cart"/"Checkout" heredado del título de página de WordPress:
   lo ocultamos porque ya mostramos nuestro propio breadcrumb arriba y el
   título repite información sin aportar (ver page.php). */
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title {
	font-size: 1.6rem;
}

/* Barra de progreso hacia el mínimo mayorista */
.wholesale-banner__bar {
	display: block;
	height: 8px;
	border-radius: var(--radius-full);
	background: var(--color-border);
	overflow: hidden;
	margin-top: var(--space-3);
}

.wholesale-banner__bar > span {
	display: block;
	height: 100%;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	transition: width 0.4s var(--ease);
}

.wholesale-banner__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-text-tertiary);
}

.wholesale-banner__benefit {
	display: block;
	margin-top: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	background: var(--color-success-bg);
	color: #0d5c30;
	font-size: 0.85rem;
	font-weight: 600;
}