/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* checkout */
.woocommerce-checkout {
    padding: 0 !important;
    margin: 0 !important;
}

form.checkout.woocommerce-checkout {
    padding: 0;
    margin: 0 0 5rem 0 !important;
}


/* Sugerencias de productos: carrito y checkout. */
body.woocommerce-cart .balmain-suggestions, body.woocommerce-checkout .balmain-suggestions {
	margin-top: 3rem;
}

body.woocommerce-checkout .balmain-suggestions {
    width: min(100%, var(--container-max-width, 1140px));
    margin: 10rem auto 3rem;
}

body.woocommerce-cart .balmain-suggestions__title,
body.woocommerce-checkout .balmain-suggestions__title {
	font-family: "Antonio", Sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	margin: 0 0 1.5rem;
}

body.woocommerce-cart ul.products.balmain-suggestions__list,
body.woocommerce-checkout ul.products.balmain-suggestions__list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce mete un clearfix con ::before y ::after. Dentro de un flex esos
   pseudoelementos cuentan como items y rompen el reparto de columnas. */
body.woocommerce-cart ul.products.balmain-suggestions__list::before,
body.woocommerce-cart ul.products.balmain-suggestions__list::after,
body.woocommerce-checkout ul.products.balmain-suggestions__list::before,
body.woocommerce-checkout ul.products.balmain-suggestions__list::after {
	display: none;
}

/* WooCommerce aplica float, width y clear a li.product; sin esto el flex no llega.
   La tarjeta es columna para que titulo, precio y boton queden alineados entre si. */
body.woocommerce-cart .balmain-suggestions__list li.product,
body.woocommerce-checkout .balmain-suggestions__list li.product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 0;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	box-sizing: border-box;
}

/* Con la imagen a tamaño completo cada producto trae una proporcion distinta;
   el aspect-ratio fijo las iguala como hacia la miniatura recortada. */
body.woocommerce-cart .balmain-suggestions__list li.product img,
body.woocommerce-checkout .balmain-suggestions__list li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: auto;
	display: block;
	margin: 0 0 1rem;
}

/* El color lo pone el enlace que envuelve al titulo, por eso va tambien aqui. */
body.woocommerce-cart .balmain-suggestions__list a.woocommerce-LoopProduct-link,
body.woocommerce-cart .balmain-suggestions__list a.woocommerce-LoopProduct-link:hover,
body.woocommerce-cart .balmain-suggestions__list a.woocommerce-LoopProduct-link:focus,
body.woocommerce-checkout .balmain-suggestions__list a.woocommerce-LoopProduct-link,
body.woocommerce-checkout .balmain-suggestions__list a.woocommerce-LoopProduct-link:hover,
body.woocommerce-checkout .balmain-suggestions__list a.woocommerce-LoopProduct-link:focus {
	display: block;
	width: 100%;
	color: #000;
}

/* WooCommerce fija el font-size del titulo del loop con mas especificidad,
   por eso esa propiedad concreta necesita !important. */
body.woocommerce-cart .balmain-suggestions__list li.product .woocommerce-loop-product__title,
body.woocommerce-checkout .balmain-suggestions__list li.product .woocommerce-loop-product__title {
	font-family: "Antonio", Sans-serif;
	font-size: 1.5rem !important;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	line-height: 1.2;
	padding: 0;
	margin: 0 0 .5rem;
}

body.woocommerce-cart .balmain-suggestions__list .price,
body.woocommerce-cart .balmain-suggestions__list .price .amount,
body.woocommerce-cart .balmain-suggestions__list .price bdi,
body.woocommerce-checkout .balmain-suggestions__list .price,
body.woocommerce-checkout .balmain-suggestions__list .price .amount,
body.woocommerce-checkout .balmain-suggestions__list .price bdi {
	font-family: "Poppins", Sans-serif;
	font-size: 16px;
	font-weight: 300;
	text-transform: none;
	font-style: normal;
	text-decoration: none;
	line-height: 1.5em;
	letter-spacing: 0px;
	word-spacing: 0em;
	color: #000;
}

/* margin-top auto: el boton queda abajo aunque los titulos ocupen 1 o 2 lineas. */
body.woocommerce-cart .balmain-suggestions__list li.product .button,
body.woocommerce-checkout .balmain-suggestions__list li.product .button {
	margin-top: auto;
	color: #1C244B;
	background-color: var(--e-global-color-accent);
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	border-radius: 0px 0px 0px 0px;
	padding: 15px 15px 15px 15px;
}

/* Movil: 2 columnas x 2 filas. El calc descuenta el gap para que quepan dos. */
@media only screen and (max-width: 767px) {
	body.woocommerce-cart ul.products.balmain-suggestions__list,
	body.woocommerce-checkout ul.products.balmain-suggestions__list {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	body.woocommerce-cart .balmain-suggestions__list li.product,
	body.woocommerce-checkout .balmain-suggestions__list li.product {
		flex: 0 0 calc(50% - 0.75rem);
		max-width: calc(50% - 0.75rem);
	}
}