/*
 * Cognitiva-AI — Estilos de marca para Carrito y Checkout (WooCommerce Blocks)
 * -----------------------------------------------------------------------------
 * Apunta a las clases del checkout POR BLOQUES (wc-block-*), que es el que
 * confirmamos que usa tu sitio (por los campos "Población"/"Región,Provincia"
 * y "AÑADE UNA NOTA A TU PEDIDO" en mayúsculas).
 *
 * IMPORTANTE: mismo aviso que en cae-espacio.css — los HEX de abajo son
 * aproximados a tu paleta petróleo/menta/naranja. Reemplázalos por los
 * códigos exactos de tu guía de marca antes de producción.
 *
 * Dejo los mensajes de error/aviso en rojo (color por defecto de WooCommerce),
 * a propósito: en un flujo de pago conviene que un error se siga leyendo
 * como error, sin ambigüedad de color con tu marca.
 */

:root {
	--cae-petroleo: #1B3A3A;
	--cae-menta: #A8E6CF;
	--cae-naranja: #FF6B35;
	--cae-fondo: #F4F5F0;
	--cae-borde: #DCDCD4;
	--cae-radio: 10px;
}

/* Tipografía general dentro del checkout/carrito */
.wc-block-cart,
.wc-block-checkout {
	font-family: 'Space Grotesk', sans-serif;
	color: #1B1B1B;
}

.wc-block-cart h1,
.wc-block-cart h2,
.wc-block-cart h3,
.wc-block-checkout h1,
.wc-block-checkout h2,
.wc-block-checkout h3,
.wc-block-components-checkout-step__title {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--cae-petroleo);
}

/* Campos de formulario: dirección, población, etc. */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-select select,
.wc-block-checkout__contact-fields input {
	border: 1px solid var(--cae-borde) !important;
	border-radius: var(--cae-radio) !important;
	font-family: 'Space Grotesk', sans-serif;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus {
	border-color: var(--cae-petroleo) !important;
	box-shadow: 0 0 0 1px var(--cae-petroleo) !important;
}

/* Botón principal: "Realizar el pedido" / "Continuar con el pago" */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-return-to-cart-button {
	background-color: var(--cae-petroleo) !important;
	border-color: var(--cae-petroleo) !important;
	border-radius: var(--cae-radio) !important;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
	background-color: #142b2b !important; /* petróleo un poco más oscuro al hover */
	border-color: #142b2b !important;
}

/* Panel lateral de totales (Subtotal / Total) */
.wc-block-components-totals-wrapper,
.wc-block-components-sidebar-layout .wc-block-components-panel {
	background: #ffffff;
	border: 1px solid var(--cae-borde);
	border-radius: var(--cae-radio);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--cae-petroleo);
	font-weight: 700;
}

/* Campo de cupón */
.wc-block-components-totals-coupon__button {
	border-color: var(--cae-petroleo) !important;
	color: var(--cae-petroleo) !important;
	border-radius: var(--cae-radio) !important;
}

/* Insignia "Oferta" en la página de producto — alineada a tu paleta
   en vez del verde oliva/dorado por defecto de WooCommerce */
.onsale {
	background: var(--cae-naranja) !important;
	color: #ffffff !important;
	font-family: 'Space Grotesk', sans-serif;
}

/* Botón "Añadir al carrito" en la página de producto individual
   (usa las clases clásicas de WooCommerce, no las de bloques) */
.single_add_to_cart_button,
a.add_to_cart_button,
button.add_to_cart_button,
.woocommerce div.product form.cart .button {
	background-color: var(--cae-petroleo) !important;
	border-color: var(--cae-petroleo) !important;
	color: #ffffff !important;
	border-radius: var(--cae-radio) !important;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
}

.single_add_to_cart_button:hover,
a.add_to_cart_button:hover,
button.add_to_cart_button:hover {
	background-color: #142b2b !important;
	border-color: #142b2b !important;
}

/* Precio de oferta en la página de producto (el "S/ 149.00" actual,
   que por defecto hereda el mismo dorado/oliva del badge "Oferta") */
.woocommerce div.product p.price ins,
.woocommerce div.product p.price ins .woocommerce-Price-amount {
	color: var(--cae-naranja) !important;
	text-decoration: none !important;
}

.woocommerce div.product p.price del {
	color: #9a9a9a !important;
}