/* ============================================================================
   Items dentro del carrusel .slider-items
   ----------------------------------------------------------------------------
   Objetivo:
   - Todas las tarjetas del carrusel con el mismo alto (lo marca la mas alta).
   - El alto NO es fijo: crece si el item recibe mas datos.
   - Las zonas internas (marca, imagen, descripcion, calificacion, precio,
     existencia y botones) quedan a la misma altura entre tarjetas.

   Estructura de referencia del item:
   .slider-items > .slick-list > .slick-track > .slick-slide > article.item
       .icon-oferta / .text-marca / a > .item_img > img
       .item_descripcion / .item_calificacion / .item_precio
       .item_botones > .item_existencia + .store_item_btn_comprar
   ============================================================================ */


/* --- 1. Track en flex: los slides se estiran al alto del mas alto ---------- */
.slider-items .slick-track{
	display:flex;
	align-items:stretch;
}
.slider-items .slick-slide{
	height:auto;   /* slick lo calcula en px y descuadra las tarjetas */
	float:none;
	display:flex;
}
.slider-items .slick-slide > article,
.slider-items .slick-slide > .item{
	width:100%;
}


/* --- 2. La tarjeta: alto dinamico, en columna ----------------------------- */
.slider-items .item{
	height:auto;            /* sustituye el alto fijo de la hoja general */
	min-height:0;
	width:auto;
	display:flex;
	flex-direction:column;
	justify-content:flex-start; /* las zonas se apilan desde arriba */
}


/* --- 3. Zonas superiores con espacio reservado ---------------------------- */
/* marca del producto */
.slider-items .item .text-marca{
	display:block;
	min-height:16px;
	line-height:16px;
}

/* imagen: misma caja en todos los items, la imagen se centra sin deformarse */
.slider-items .item > a{
	display:block;
	width:100%;
	flex:0 0 auto;
}
.slider-items .item .item_img,
.slider-items .item .zoom{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:240px;
}
.slider-items .item .item_img img,
.slider-items .item .zoom img{
	max-width:100%;
	max-height:240px;
	width:auto;
	height:auto;
	object-fit:contain;
	margin:auto;
}

/* descripcion: dos lineas como maximo, para no invadir la calificacion */
.slider-items .item .item_descripcion,
.slider-items .item .descripcion a{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	min-height:40px;
	line-height:20px;
	margin:4px 0;
}

/* calificacion */
.slider-items .item .item_calificacion,
.slider-items .item .store_item_calificacion{
	min-height:24px;
}

/* precio: se reserva el espacio de dos renglones, asi un precio largo que
   salta de linea no recorre hacia abajo el resto de la tarjeta */
.slider-items .item .item_precio{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:58px;
	width:100%;
}
.slider-items .item .item_precio h2{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:center;
	width:100%;
	margin:0;
	gap:4px 8px;
}
.slider-items .item .item_precio .pPrecio,
.slider-items .item .item_precio .pOferta{
	height:auto;
	line-height:1.2;
}


/* --- 4. Bloque de compra pegado al fondo: los botones quedan alineados ---- */
.slider-items .item .item_botones{
	margin-top:auto;   /* absorbe el espacio sobrante de la tarjeta */
	width:100%;
}
.slider-items .item .item_existencia{
	min-height:22px;
}
.slider-items .item .store_item_btn_comprar{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-end;
	width:100%;
}
.slider-items .item .item_filtro_cantidad{
	width:100%;
	margin-bottom:6px;
}
.slider-items .item .store_item_btn_comprar .button,
.slider-items .item .store_item_btn_comprar .addBtn{
	margin:0 0 6px 0;
	width:90%;
}
.slider-items .item .store_item_btn_comprar .button:last-child,
.slider-items .item .store_item_btn_comprar .addBtn:last-child{
	margin-bottom:0;
}


/* --- 5. Pantallas chicas: la imagen ocupa menos alto ---------------------- */
@media screen and (max-width:600px){
	.slider-items .item .item_img,
	.slider-items .item .zoom{
		height:180px;
	}
	.slider-items .item .item_img img,
	.slider-items .item .zoom img{
		max-height:180px;
	}
}