/**
 * GM Diseño — Tarjetas de producto uniformes
 *
 * El enlace que envuelve la imagen del catálogo pasa a ser un marco de
 * proporción fija. La imagen se encaja dentro sin recortarse ni
 * deformarse, así que da igual que el original sea alto, ancho o pequeño:
 * todas las filas quedan a la misma altura.
 */

:root {
	--gmtp-columnas: 4;
	--gmtp-hueco: 24px;
	--gmtp-proporcion: 1 / 1;
	--gmtp-ajuste: contain;
	--gmtp-fondo: #fff;
	--gmtp-relleno: 12px;
	--gmtp-borde: 1px solid #e8eaed;
	--gmtp-radio: 10px;
}

/* --- La cuadrícula -------------------------------------------------------
 * Se fuerza una rejilla propia con !important porque el tema, WooCommerce
 * y los constructores de páginas definen sus propias columnas en cada
 * plantilla, y unas categorías acababan con más columnas que otras.
 * También se alimenta la variable de Elementor, que usa la suya.
 * --------------------------------------------------------------------- */

:is(#content, .site-content, main, .elementor-location-archive) ul.products,
:is(#content, .site-content, main, .elementor-location-archive) .woocommerce ul.products,
:is(#content, .site-content, main, .elementor-location-archive) .woocommerce-page ul.products,
:is(#content, .site-content, main, .elementor-location-archive) ul.products.columns-1,
:is(#content, .site-content, main, .elementor-location-archive) ul.products.columns-2,
:is(#content, .site-content, main, .elementor-location-archive) ul.products.columns-3,
:is(#content, .site-content, main, .elementor-location-archive) ul.products.columns-4,
:is(#content, .site-content, main, .elementor-location-archive) ul.products.columns-5,
:is(#content, .site-content, main, .elementor-location-archive) ul.products.columns-6,
:is(#content, .site-content, main, .elementor-location-archive) .elementor-widget-woocommerce-products ul.products,
:is(#content, .site-content, main, .elementor-location-archive) .elementor-products-grid ul.products,
:is(#content, .site-content, main, .elementor-location-archive) .wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(var(--gmtp-columnas), minmax(0, 1fr)) !important;
	gap: var(--gmtp-hueco) !important;
	margin-left: 0;
	margin-right: 0;
	--e-woo-products-columns: var(--gmtp-columnas);
}

:is(#content, .site-content, main, .elementor-location-archive) .woocommerce ul.products::before,
:is(#content, .site-content, main, .elementor-location-archive) .woocommerce ul.products::after,
:is(#content, .site-content, main, .elementor-location-archive) ul.products::before,
:is(#content, .site-content, main, .elementor-location-archive) ul.products::after {
	display: none;
}

:is(#content, .site-content, main, .elementor-location-archive) .woocommerce ul.products li.product,
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product,
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product-category,
:is(#content, .site-content, main, .elementor-location-archive) .wc-block-grid__products .wc-block-grid__product {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding-left: 0;
	padding-right: 0;
	float: none !important;
	clear: none !important;
}

/* --- El marco -----------------------------------------------------------
 * Se apunta a la propia imagen y no al enlace que la envuelve: según el
 * tema, ese enlace puede estar anidado en una o dos capas, y el enlace del
 * título comparte clase con él. La imagen siempre es la imagen.
 * --------------------------------------------------------------------- */

:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product img.wp-post-image,
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product img.attachment-woocommerce_thumbnail,
:is(#content, .site-content, main, .elementor-location-archive) .wc-block-grid__product .wc-block-grid__product-image img {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--gmtp-proporcion);
	margin: 0 0 12px;
	padding: var(--gmtp-relleno);
	border: var(--gmtp-borde);
	border-radius: var(--gmtp-radio);
	background: var(--gmtp-fondo);
	object-fit: var(--gmtp-ajuste);
	object-position: center;
}

/* La segunda imagen del efecto «flip» del tema comparte el mismo marco. */
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product img.wp-post-image + img,
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product .woocommerce-loop-product__link img + img {
	margin-bottom: 0;
}

/* --- Alineación del resto de la tarjeta --------------------------------- */

:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product .woocommerce-loop-product__title {
	line-height: 1.35;
}

/* La etiqueta de oferta y la de «N en el carrito» se sitúan respecto a la
 * tarjeta, no respecto al marco, para que no las recorte el overflow. */
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product > .onsale,
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product > .gmcc-etiqueta {
	z-index: 4;
}

/* Los selectores de variante suelen tener distinto número de filas en cada
 * producto; se les da un hueco propio para que no empujen al botón. */
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product .variations,
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product .wcvaswatchinput,
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product .wcvaswatchlabel,
:is(#content, .site-content, main, .elementor-location-archive) ul.products li.product .wcva_single_variation_wrap {
	margin-bottom: 0;
}

/* =========================================================================
 * Selector de variantes del catálogo
 * ====================================================================== */

/* Por encima de la capa blanca con sombra que el tema pinta al pasar el
 * ratón sobre la tarjeta. */
.gmtp-var {
	position: relative;
	z-index: 3;
	margin: 10px 0 0;
}

.gmtp-var__campo + .gmtp-var__campo {
	margin-top: 6px;
}

.gmtp-var select.gmtp-var__select {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 40px;
	margin: 0 !important;
	padding: 8px 30px 8px 10px;
	text-overflow: ellipsis;
	border: 1px solid var(--gmtp-color-borde, #dfe3e8);
	border-radius: 8px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px;
	color: inherit;
	font-size: 13px;
	line-height: 1.3;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.gmtp-var select.gmtp-var__select:focus {
	outline: 2px solid rgba(0, 0, 0, 0.25);
	outline-offset: 1px;
}

/* Botón propio del bloque de variantes. Hereda el aspecto del tema por
 * llevar la clase `button`. */
.gmtp-var .gmtp-var__agregar {
	display: block;
	width: 100%;
	margin-top: 8px;
}

.gmtp-oculto {
	display: none !important;
}

/* Control de cantidad de la variación elegida: ocupa el ancho de la
 * tarjeta, igual que el botón al que sustituye. */
.gmtp-var__control {
	margin-top: 8px;
}

.gmtp-var__control[hidden] {
	display: none !important;
}

.gmtp-var .gmtp-var__control .gmcc__control {
	width: 100%;
	justify-content: space-between;
}

.gmtp-var__agregar[hidden] {
	display: none !important;
}

/* Presentaciones que ya están en el carrito. */
.gmtp-var__select option.gmtp-en-carrito {
	font-weight: 700;
}

.gmtp-var__aviso {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.35;
	color: #b3261e;
}

/* Apuntes con el precio de cada variación: nunca se ven, solo sirven para
 * copiar su contenido al precio de la tarjeta al elegir. */
.gmtp-var__precio-dato {
	display: none !important;
}

.gmtp-var__aviso {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.35;
	color: #b3261e;
}

/* El precio del producto o de la variación elegida. Ocupa el sitio del
 * precio del tema, que queda oculto en estas tarjetas. */
.gmtp-var__precio {
	display: block;
	margin: 0 0 10px;
	color: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.gmtp-var__precio[hidden] {
	display: none !important;
}

.gmtp-var__precio del {
	margin-right: 4px;
	font-weight: 400;
	opacity: 0.55;
}

.gmtp-var__precio small,
.gmtp-var__precio .woocommerce-price-suffix {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	opacity: 0.7;
}

.gmtp-var__precio {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	font-weight: 600;
}

/* Opciones que no existen o están agotadas para lo ya elegido. */
.gmtp-var__select option[hidden] {
	display: none;
}

/* --- Móvil ---------------------------------------------------------------
 * El tamaño de letra de 16px no es estético: por debajo de esa cifra iOS
 * hace zoom automático al tocar el desplegable y descoloca la página.
 * --------------------------------------------------------------------- */

@media (max-width: 782px) {
	.gmtp-var {
		margin-top: 8px;
	}

	.gmtp-var select.gmtp-var__select {
		min-height: 44px;
		padding: 10px 26px 10px 8px;
		background-position: right 8px center;
		font-size: 16px;
	}

	.gmtp-var__campo + .gmtp-var__campo {
		margin-top: 5px;
	}

	.gmtp-var__precio,
	/* Botón propio del bloque de variantes. Hereda el aspecto del tema por
 * llevar la clase `button`. */
.gmtp-var .gmtp-var__agregar {
	display: block;
	width: 100%;
	margin-top: 8px;
}

.gmtp-oculto {
	display: none !important;
}

/* Control de cantidad de la variación elegida: ocupa el ancho de la
 * tarjeta, igual que el botón al que sustituye. */
.gmtp-var__control {
	margin-top: 8px;
}

.gmtp-var__control[hidden] {
	display: none !important;
}

.gmtp-var .gmtp-var__control .gmcc__control {
	width: 100%;
	justify-content: space-between;
}

.gmtp-var__agregar[hidden] {
	display: none !important;
}

/* Presentaciones que ya están en el carrito. */
.gmtp-var__select option.gmtp-en-carrito {
	font-weight: 700;
}

.gmtp-var__aviso {
		font-size: 12px;
	}
}