/*
 * Eidos Carrito Woo v1.0.7
 * Rediseño del carrito de WooCommerce para saio.org.ar.
 *
 * NOTA DE ESPECIFICIDAD (leer antes de tocar nada)
 * ------------------------------------------------
 * El tema Visual Composer Starter estiliza el carrito con selectores del tipo
 *
 *   .visualcomposerstarter.woocommerce-cart .woocommerce table.cart a.remove
 *
 * o sea CINCO clases. Las versiones 1.0.0 y 1.0.1 de este plugin apuntaban a
 * .woocommerce-cart-form table.shop_table (cuatro clases) y perdían la cascada
 * por una clase de diferencia. No era falta de !important: era aritmética.
 *
 * Por eso acá la base de todos los selectores es
 *
 *   body.woocommerce-cart .woocommerce table.cart
 *
 * que suma cinco clases más elementos y le gana al tema sin pelear. Si agregás
 * reglas nuevas, respetá esa base o vuelven a perder.
 *
 * Los !important que quedan son solo sobre las propiedades que el tema declara
 * explícitamente (width, height, font-size y opacity del botón de eliminar, y
 * las medidas de la miniatura). Están puestos a mano, uno por uno, no a barrer.
 */

body.woocommerce-cart,
body.woocommerce-checkout {
	--ecw-marca: #2e5c9a;
	--ecw-marca-oscuro: #1d3f6d;
	--ecw-borde: #e3e6ea;
	--ecw-borde-fuerte: #c9ced6;
	--ecw-texto: #1f2933;
	--ecw-texto-suave: #667180;
	--ecw-peligro: #b3261e;
	--ecw-peligro-fondo: #fdecec;
	--ecw-superficie: #ffffff;
	--ecw-radio: 8px;
}

/* --------------------------------------------------------------------------
   Tabla
   -------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce table.cart {
	width: 100%;
	table-layout: auto;
	border: 1px solid var(--ecw-borde);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0 0 2rem;
}

body.woocommerce-cart .woocommerce table.cart thead {
	display: table-header-group;
}

body.woocommerce-cart .woocommerce table.cart thead th {
	background: #f7f8fa;
	border: 0;
	border-bottom: 1px solid var(--ecw-borde);
	padding: 14px 16px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--ecw-texto-suave);
	text-align: left;
}

body.woocommerce-cart .woocommerce table.cart tbody td {
	border: 0;
	border-top: 1px solid var(--ecw-borde);
	padding: 18px 16px;
	vertical-align: middle;
	line-height: 1.45;
	color: var(--ecw-texto);
}

body.woocommerce-cart .woocommerce table.cart tbody tr:first-child td {
	border-top: 0;
}

/*
 * Anchos: width 1% + nowrap en table-layout auto significa "lo mínimo que le
 * entre al contenido". El nombre se queda con todo el sobrante y nunca colapsa.
 * (v1.0.0 usaba px fijos: 534px inamovibles que aplastaban la columna elástica
 * hasta dejar el texto en una letra por renglón.)
 */
body.woocommerce-cart .woocommerce table.cart td.product-remove,
body.woocommerce-cart .woocommerce table.cart th.product-remove,
body.woocommerce-cart .woocommerce table.cart td.product-thumbnail,
body.woocommerce-cart .woocommerce table.cart th.product-thumbnail,
body.woocommerce-cart .woocommerce table.cart td.product-price,
body.woocommerce-cart .woocommerce table.cart th.product-price,
body.woocommerce-cart .woocommerce table.cart td.product-quantity,
body.woocommerce-cart .woocommerce table.cart th.product-quantity,
body.woocommerce-cart .woocommerce table.cart td.product-subtotal,
body.woocommerce-cart .woocommerce table.cart th.product-subtotal {
	width: 1%;
	white-space: nowrap;
}

body.woocommerce-cart .woocommerce table.cart td.product-name,
body.woocommerce-cart .woocommerce table.cart th.product-name {
	width: auto;
	min-width: 160px;
	white-space: normal;
	text-align: left;
}

body.woocommerce-cart .woocommerce table.cart td.product-price,
body.woocommerce-cart .woocommerce table.cart td.product-subtotal {
	text-align: right;
}

body.woocommerce-cart .woocommerce table.cart td.product-quantity {
	text-align: center;
}

body.woocommerce-cart .woocommerce table.cart td.product-remove {
	text-align: center;
	padding-left: 12px;
	padding-right: 12px;
}

/* --------------------------------------------------------------------------
   Miniatura
   --------------------------------------------------------------------------
   La imagen del producto es 300x109: casi tres veces más ancha que alta.
   En una caja cuadrada de 64x64 con object-fit: contain renderizaba a 48x17 y
   el logo se veía diminuto. La caja tiene que ser apaisada, no cuadrada.
   -------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce table.cart td.product-thumbnail {
	min-width: 0;
}

body.woocommerce-cart .woocommerce table.cart td.product-thumbnail img {
	display: block;
	width: 88px !important;
	height: 64px !important;
	max-width: none !important;
	object-fit: contain !important;
	background: var(--ecw-superficie);
	border: 1px solid var(--ecw-borde);
	border-radius: var(--ecw-radio);
	padding: 5px;
	box-sizing: border-box;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Nombre y precios
   -------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce table.cart td.product-name a {
	font-size: 15px;
	font-weight: 600;
	color: var(--ecw-texto);
	text-decoration: none;
}

body.woocommerce-cart .woocommerce table.cart td.product-name a:hover {
	color: var(--ecw-marca);
	text-decoration: underline;
}

body.woocommerce-cart .woocommerce table.cart td.product-name dl.variation {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--ecw-texto-suave);
}

body.woocommerce-cart .woocommerce table.cart td.product-price {
	color: var(--ecw-texto-suave);
	font-size: 14px;
}

body.woocommerce-cart .woocommerce table.cart td.product-subtotal {
	font-size: 15px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Botón de eliminar
   --------------------------------------------------------------------------
   El tema le pone font-size: 0 al enlace y dibuja la equis con ::before y
   ::after de 2px, más width/height de 18px y opacity 0.8. Acá apagamos las dos
   barras y devolvemos el glifo nativo de WooCommerce, que es un carácter y se
   controla con color y font-size como cualquier texto.
   -------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce table.cart td.product-remove a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 32px !important;
	height: 32px !important;
	font-size: 20px !important;
	font-weight: 400;
	line-height: 1;
	opacity: 1 !important;
	border-radius: 50%;
	background: var(--ecw-peligro-fondo);
	color: var(--ecw-peligro) !important;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.woocommerce-cart .woocommerce table.cart td.product-remove a.remove::before,
body.woocommerce-cart .woocommerce table.cart td.product-remove a.remove::after {
	display: none !important;
	content: none !important;
}

body.woocommerce-cart .woocommerce table.cart td.product-remove a.remove:hover,
body.woocommerce-cart .woocommerce table.cart td.product-remove a.remove:focus {
	background: var(--ecw-peligro);
	color: #ffffff !important;
}

body.woocommerce-cart .woocommerce table.cart td.product-remove a.remove:focus-visible {
	outline: 2px solid var(--ecw-marca);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Cantidad
   -------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce table.cart td.product-quantity .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ecw-borde-fuerte);
	border-radius: var(--ecw-radio);
	overflow: hidden;
	height: 36px;
	float: none;
}

body.woocommerce-cart .woocommerce table.cart td.product-quantity .quantity input.qty {
	width: 44px;
	height: 100%;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--ecw-texto);
	padding: 0;
	box-shadow: none;
	-moz-appearance: textfield;
}

body.woocommerce-cart .woocommerce table.cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .woocommerce table.cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.woocommerce-cart .woocommerce table.cart .ecw-paso {
	width: 34px;
	min-height: 0;
	border: 0;
	background: transparent;
	color: var(--ecw-texto-suave);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.woocommerce-cart .woocommerce table.cart .ecw-paso:hover {
	background: #f2f4f7;
	color: var(--ecw-texto);
}

body.woocommerce-cart .woocommerce table.cart .ecw-paso[disabled] {
	opacity: 0.4;
	cursor: default;
	background: transparent;
}

/* --------------------------------------------------------------------------
   Fila de acciones y cupón
   -------------------------------------------------------------------------- */

body.woocommerce-cart .woocommerce table.cart td.actions {
	padding: 16px;
	background: #fafbfc;
	text-align: left;
}

/*
 * Cupón.
 *
 * El panel de totales trae div.vct-promo > button.vct-show-promo-form
 * ("¿Tienes un código promocional?"). Ese botón NO dibuja un formulario propio:
 * revela el nativo de WooCommerce, el mismo que vive en td.actions (su botón de
 * aplicar es id="vct-submit-coupon" name="apply_coupon"). Un desplegable que no
 * parece clickeable es un campo que nadie usa, así que lo escondemos y dejamos
 * el nativo a la vista. El nodo queda en el DOM: su JS no se rompe.
 */
body.woocommerce-cart .cart_totals .vct-promo {
	display: none !important;
}

body.ecw-cupon-en-tabla .woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	float: none;
}

body.ecw-cupon-en-tabla .woocommerce table.cart td.actions .coupon label[for="coupon_code"] {
	font-size: 14px;
	font-weight: 600;
	color: var(--ecw-texto);
	margin: 0;
}

/* Sin cupones vigentes que apliquen, no se ofrece nada. */
body.ecw-sin-cupon .woocommerce table.cart td.actions .coupon {
	display: none !important;
}

body.woocommerce-cart .woocommerce table.cart td.actions .coupon input#coupon_code {
	width: auto;
	min-width: 180px;
	height: 40px;
	border: 1px solid var(--ecw-borde-fuerte);
	border-radius: var(--ecw-radio);
	padding: 0 12px;
	font-size: 14px;
}

/*
 * Botones de la fila de acciones.
 *
 * No llegué a medir qué regla del tema los pinta de gris claro, así que el
 * color, el fondo y el borde de estos dos van con !important a propósito. Si
 * querés que lo resolvamos por especificidad como el resto, corré el script de
 * consola sobre "button[name=apply_coupon]" y lo cambio.
 *
 * "Actualizar carrito" arranca con disabled puesto por WooCommerce hasta que
 * cambia una cantidad. Un botón deshabilitado tiene que seguir leyéndose: se
 * distingue por color y cursor, nunca bajando la opacidad.
 */
body.woocommerce-cart .woocommerce table.cart td.actions button {
	height: 40px;
	border-radius: var(--ecw-radio);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0 18px;
	cursor: pointer;
	opacity: 1 !important;
	text-shadow: none;
}

body.woocommerce-cart .woocommerce table.cart td.actions button[name="apply_coupon"] {
	background: var(--ecw-superficie) !important;
	color: var(--ecw-marca) !important;
	border: 1px solid var(--ecw-marca) !important;
}

body.woocommerce-cart .woocommerce table.cart td.actions button[name="apply_coupon"]:hover {
	background: var(--ecw-marca) !important;
	color: #ffffff !important;
}

body.woocommerce-cart .woocommerce table.cart td.actions button[name="update_cart"] {
	background: var(--ecw-superficie) !important;
	color: var(--ecw-texto) !important;
	border: 1px solid var(--ecw-borde-fuerte) !important;
}

body.woocommerce-cart .woocommerce table.cart td.actions button[name="update_cart"]:hover:not([disabled]) {
	background: #f2f4f7 !important;
}

body.woocommerce-cart .woocommerce table.cart td.actions button[name="update_cart"][disabled] {
	background: #f2f4f7 !important;
	color: var(--ecw-texto-suave) !important;
	border-color: var(--ecw-borde) !important;
	cursor: default;
}

/*
 * Sin cantidades editables no hay nada que actualizar: se esconde el botón, y
 * si además el cupón de la tabla está apagado, se esconde la fila entera para
 * no dejar una banda gris vacía. La clase la pone el plugin recorriendo el
 * carrito, así que vuelve sola si alguna vez hay un producto con cantidad.
 */
body.ecw-sin-cantidades .woocommerce table.cart td.actions button[name="update_cart"] {
	display: none !important;
}

body.ecw-sin-cantidades.ecw-sin-cupon .woocommerce table.cart td.actions {
	display: none !important;
}

body.ecw-sin-cantidades.ecw-sin-cupon .woocommerce table.cart {
	margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Totales
   -------------------------------------------------------------------------- */

body.woocommerce-cart .cart-collaterals .cart_totals {
	border: 1px solid var(--ecw-borde);
	border-radius: 12px;
	padding: 20px 22px;
	background: var(--ecw-superficie);
}

body.woocommerce-cart .cart-collaterals .cart_totals h2 {
	font-size: 18px;
	margin: 0 0 14px;
}

body.woocommerce-cart .cart-collaterals .cart_totals table th,
body.woocommerce-cart .cart-collaterals .cart_totals table td {
	border: 0;
	border-top: 1px solid var(--ecw-borde);
	padding: 12px 0;
	font-size: 14px;
}

body.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total th,
body.woocommerce-cart .cart-collaterals .cart_totals table tr.order-total td {
	font-size: 16px;
	font-weight: 700;
}

/*
 * "Finalizar compra".
 *
 * v1.0.5 centraba el texto con line-height igual a la altura. Eso se rompe en
 * cuanto el tema le suma su propio padding al enlace: el texto se corre hacia
 * arriba. Flex centra de verdad, sin importar qué padding venga de afuera.
 */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	height: auto !important;
	padding: 12px 20px !important;
	line-height: 1.25 !important;
	border: 0;
	border-radius: var(--ecw-radio);
	background: var(--ecw-marca);
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	margin: 14px 0 0;
	transition: background-color 0.15s ease;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--ecw-marca-oscuro);
}

body.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Angosto: la tabla pasa a tarjetas
   --------------------------------------------------------------------------
   Corte a 1024px y no 768: el carrito comparte fila con el sidebar de SAIO,
   así que se queda sin ancho mucho antes que el viewport.

   Por debajo de 768px además entra woocommerce-smallscreen.css, que trae
   td { text-align: right !important }. Los !important de este bloque son
   exactamente para neutralizar eso, no por costumbre.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	body.woocommerce-cart .woocommerce table.cart,
	body.woocommerce-cart .woocommerce table.cart tbody {
		display: block;
		width: 100%;
	}

	body.woocommerce-cart .woocommerce table.cart thead {
		display: none;
	}

	/*
	 * Grilla de la tarjeta.
	 *
	 * La tercera columna es "auto", NO 32px. En v1.0.3 era fija de 32px porque
	 * solo pensé en la X, y el subtotal cayó ahí: un importe de 90px metido en
	 * 32px se parte en tres renglones. Las columnas son compartidas por todas
	 * las filas, así que la más angosta la define el contenido más ancho que
	 * caiga en ella. Con "auto" la columna la marca el subtotal y la X se
	 * alinea al borde derecho con justify-self.
	 */
	body.woocommerce-cart .woocommerce table.cart tr.woocommerce-cart-form__cart-item {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb nombre borrar"
			"thumb precio precio"
			"cant  cant   subtotal";
		column-gap: 12px;
		row-gap: 6px;
		align-items: center;
		padding: 16px;
		border-top: 1px solid var(--ecw-borde);
		background: transparent;
	}

	body.woocommerce-cart .woocommerce table.cart tbody tr:first-child {
		border-top: 0;
	}

	body.woocommerce-cart .woocommerce table.cart tr.woocommerce-cart-form__cart-item td {
		display: block;
		border: 0;
		padding: 0;
		width: auto;
		background: transparent;
	}

	/*
	 * woocommerce-smallscreen.css le mete content: attr(data-title) ":" a TODAS
	 * las celdas. La miniatura no tiene data-title, así que imprimía un ":"
	 * suelto. Apagamos el pseudo en toda la fila y lo devolvemos solo donde lo
	 * queremos.
	 */
	body.woocommerce-cart .woocommerce table.cart tr.woocommerce-cart-form__cart-item td::before {
		display: none !important;
		content: none !important;
	}

	body.woocommerce-cart .woocommerce table.cart tr.woocommerce-cart-form__cart-item td.product-price::before,
	body.woocommerce-cart .woocommerce table.cart tr.woocommerce-cart-form__cart-item td.product-subtotal::before {
		display: inline !important;
		content: attr(data-title) ": " !important;
		color: var(--ecw-texto-suave);
		font-weight: 400;
		font-size: 12px;
	}

	body.woocommerce-cart .woocommerce table.cart td.product-thumbnail {
		grid-area: thumb;
		align-self: start;
	}

	body.woocommerce-cart .woocommerce table.cart td.product-thumbnail img {
		width: 84px !important;
		height: 58px !important;
	}

	body.woocommerce-cart .woocommerce table.cart td.product-name {
		grid-area: nombre;
		text-align: left !important;
		white-space: normal;
		align-self: center;
	}

	body.woocommerce-cart .woocommerce table.cart td.product-name a {
		font-size: 14px;
		line-height: 1.35;
	}

	body.woocommerce-cart .woocommerce table.cart td.product-remove {
		grid-area: borrar;
		justify-self: end;
		align-self: start;
		padding: 0;
	}

	body.woocommerce-cart .woocommerce table.cart td.product-remove a.remove {
		width: 28px !important;
		height: 28px !important;
		font-size: 17px !important;
	}

	body.woocommerce-cart .woocommerce table.cart td.product-price {
		grid-area: precio;
		text-align: left !important;
		font-size: 13px;
		white-space: nowrap;
	}

	body.woocommerce-cart .woocommerce table.cart td.product-quantity {
		grid-area: cant;
		text-align: left !important;
		padding-top: 12px !important;
		margin-top: 6px;
		border-top: 1px solid var(--ecw-borde) !important;
	}

	body.woocommerce-cart .woocommerce table.cart td.product-subtotal {
		grid-area: subtotal;
		text-align: right !important;
		white-space: nowrap;
		padding-top: 12px !important;
		margin-top: 6px;
		border-top: 1px solid var(--ecw-borde) !important;
	}

	/* Los importes nunca se parten. */
	body.woocommerce-cart .woocommerce table.cart td.product-price .woocommerce-Price-amount,
	body.woocommerce-cart .woocommerce table.cart td.product-subtotal .woocommerce-Price-amount {
		white-space: nowrap;
		display: inline-block;
	}

	body.woocommerce-cart .woocommerce table.cart tr.cart_item ~ tr,
	body.woocommerce-cart .woocommerce table.cart td.actions {
		display: block;
		width: 100%;
		text-align: left !important;
	}

	body.ecw-cupon-en-tabla .woocommerce table.cart td.actions .coupon {
		flex-wrap: wrap;
	}

	body.woocommerce-cart .woocommerce table.cart td.actions .coupon input#coupon_code,
	body.woocommerce-cart .woocommerce table.cart td.actions button {
		flex: 1 1 100%;
		min-width: 0;
		width: 100%;
		margin: 0 0 8px;
	}

	body.woocommerce-cart .cart-collaterals,
	body.woocommerce-cart .cart-collaterals .cart_totals {
		width: 100%;
		float: none;
	}
}