/**
 * Theme Name:     Unimart Child
 * Author:         Rainbow-Themes
 * Template:       unimart
 * Text Domain:	   unimart-child
 * Description:    Unimart is a powerful, modern, and fully customizable WooCommerce WordPress theme designed for eCommerce stores. Perfect for online shops, marketplaces, and retail businesses — Unimart offers seamless integration with WooCommerce, responsive layouts, and an intuitive live editor for ultimate design freedom.
 * Theme URI:      https://getunimart.com
 * Author URI:     https://rainbowthemes.net/
 * Version:        1.0.0
 * Tested up to:   7.0
 * License:        Envato Marketplaces Split License
 * License URI:    https://themeforest.net/licenses/standard
 * Tags:           e-commerce, rtl-language-support, blog, portfolio, custom-colors, featured-images, translation-ready
 */

/**
 * Producto individual (layout 9) con menos de 4 imágenes.
 *
 * El layout original es una tira de 4 imágenes a ancho completo con la ficha del
 * producto flotando encima de las dos últimas: layout-9.php mete la galería en un
 * `container-fluid p-0` y la ficha en un `container` aparte, superponiéndolas con
 * `margin-top:-240px` + `position:sticky`. Con 1 a 3 imágenes eso deja la foto
 * pegada al borde del navegador y un hueco blanco hasta la ficha.
 *
 * Acá se pasa a dos columnas clásicas dentro del container: imagen a la
 * izquierda, ficha a la derecha, alineadas arriba y sin superposición. La clase
 * `unimart-child-gallery-few` la agrega functions.php vía `body_class`, así que
 * los productos con 4 o más imágenes conservan el diseño original del tema.
 */
@media (min-width: 992px) {
	.unimart-child-gallery-few .rbt-single-product-area {
		display: flex;
		align-items: flex-start;
		gap: 24px;
		width: 100%;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 12px;
		padding-right: 12px;
	}

	/*
	 * Columna de la galería: deja de ser full-bleed y de ser sticky.
	 * Se usa `.rbt-sticky-top-150` para desambiguar, porque si el ancho del
	 * producto se cambia a "full width" el wrapper de la ficha también es un
	 * `.container-fluid`.
	 */
	.unimart-child-gallery-few .rbt-single-product-area > .container-fluid.rbt-sticky-top-150 {
		flex: 0 0 36%;
		width: 36%;
		max-width: 36%;
		padding-left: 0;
		padding-right: 0;
		position: static !important;
	}

	/* Columna de la ficha: ocupa el resto, sin el ancho fijo del container. */
	.unimart-child-gallery-few .rbt-single-product-area > .container {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/*
	 * Neutraliza la geometría flotante de la ficha (width:960px,
	 * margin-top:-240px, margin-right:-160px, sticky) conservando su caja:
	 * borde, fondo y padding siguen viniendo del tema.
	 */
	.unimart-child-gallery-few .rbt-single-product-content.rbt-content-top-sticky-on-img,
	.unimart-child-gallery-few .rbt-single-product-content.rbt-content-top-sticky-on-img.rbt-content-top-sticky-on-img-vr {
		position: static;
		width: 100%;
		margin: 0;
	}

}

@media (min-width: 1200px) {
	.unimart-child-gallery-few .rbt-single-product-area {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.unimart-child-gallery-few .rbt-single-product-area {
		max-width: 1320px;
	}
}

/**
 * Caja de la imagen cuadrada, con la foto contenida (no recortada).
 *
 * Sin esto el alto de la galería lo decide la proporción de cada foto, que en
 * este catálogo va de 0.52 a 1.67 (alto/ancho): las verticales se disparaban
 * muy por debajo de la ficha. La mediana es exactamente 1.00 y 56 de 117
 * productos ya son cuadrados, así que la mayoría no pierde nada y el resto
 * queda centrado sobre el fondo de la caja en vez de estirar el layout.
 *
 * `object-fit: contain` hace falta porque el tema aplica `cover` a todo `img`.
 */
.rbt-gallery-partial .rbt-product-single-img {
	aspect-ratio: 1 / 1;
}

.rbt-gallery-partial .rbt-product-single-img img {
	width: 100% !important;
	height: 100%;
	object-fit: contain;
}

/* watchOverflow bloquea las flechas cuando no hay nada que desplazar. */
.rbt-gallery-partial .swiper-button-lock {
	display: none;
}